import { useState } from "react";
import { Link, useLocation } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { MessageCircle, Menu, X } from "lucide-react";

const Navigation = () => {
  const [isOpen, setIsOpen] = useState(false);
  const location = useLocation();

  const navItems = [
    { name: "Home", path: "/" },
    { name: "About", path: "/about" },
    { name: "Stock", path: "/stock" },
    { name: "How to Buy", path: "/how-to-buy" },
  ];

  const isActive = (path: string) => location.pathname === path;

  return (
    <header className="bg-black/80 backdrop-blur-sm border-b border-gray-700/50 sticky top-0 z-50">
      <div className="container mx-auto px-4 py-4">
        <div className="flex items-center justify-between">
          <Link to="/" className="flex items-center space-x-3 transition-transform duration-300 hover:scale-105">
            <img 
              src="https://pbs.twimg.com/profile_images/1439202874597253122/CNRr08L3_400x400.jpg" 
              alt="MM2 Store Logo" 
              className="w-10 h-10 rounded-lg"
            />
            <div>
              <h1 className="text-2xl font-bold text-white">MM2STORE</h1>
              <p className="text-blue-400 text-sm">Your Trusted MM2 Hub</p>
            </div>
          </Link>

          {/* Desktop Navigation */}
          <nav className="hidden md:flex items-center space-x-6">
            {navItems.map((item) => (
              <Link
                key={item.name}
                to={item.path}
                className={`relative text-lg transition-all duration-300 hover:text-blue-400 ${
                  isActive(item.path) 
                    ? "text-blue-400 font-semibold" 
                    : "text-white"
                } after:content-[''] after:absolute after:w-full after:scale-x-0 after:h-0.5 after:bottom-0 after:left-0 after:bg-blue-400 after:origin-bottom-right after:transition-transform after:duration-300 hover:after:scale-x-100 hover:after:origin-bottom-left`}
              >
                {item.name}
              </Link>
            ))}
            <Button 
              asChild 
              className="bg-blue-600 hover:bg-blue-500 text-white transition-all duration-300 hover:scale-105"
            >
              <a href="https://discord.gg/dQrYDnf9JJ" target="_blank" rel="noopener noreferrer">
                <MessageCircle className="w-4 h-4 mr-2" />
                Join Discord
              </a>
            </Button>
          </nav>

          {/* Mobile Menu Button */}
          <button
            className="md:hidden text-white transition-transform duration-300 hover:scale-110"
            onClick={() => setIsOpen(!isOpen)}
          >
            {isOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
          </button>
        </div>

        {/* Mobile Navigation */}
        {isOpen && (
          <nav className="md:hidden mt-4 space-y-2 animate-fade-in">
            {navItems.map((item) => (
              <Link
                key={item.name}
                to={item.path}
                className={`block px-4 py-2 text-lg transition-all duration-300 rounded-lg ${
                  isActive(item.path)
                    ? "text-blue-400 bg-blue-900/20 font-semibold"
                    : "text-white hover:text-blue-400 hover:bg-blue-900/20"
                }`}
                onClick={() => setIsOpen(false)}
              >
                {item.name}
              </Link>
            ))}
            <Button 
              asChild 
              className="w-full bg-blue-600 hover:bg-blue-500 text-white mt-4"
            >
              <a href="https://discord.gg/dQrYDnf9JJ" target="_blank" rel="noopener noreferrer">
                <MessageCircle className="w-4 h-4 mr-2" />
                Join Discord
              </a>
            </Button>
          </nav>
        )}
      </div>
    </header>
  );
};

export default Navigation;




import { Card, CardContent } from "@/components/ui/card";
import { Star, Zap, Youtube } from "lucide-react";
import Navigation from "@/components/Navigation";

const About = () => {
  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-blue-900 to-black">
      <Navigation />
      
      <section className="py-16 px-4 min-h-screen flex items-center justify-center">
        <div className="container mx-auto">
          <div className="text-center mb-12 animate-fade-in">
            <h1 className="text-5xl md:text-6xl font-bold text-white mb-4">About MM2 Store</h1>
            <p className="text-xl text-gray-300 max-w-3xl mx-auto">
              MM2 Store is the go-to platform for Murder Mystery 2 players looking for a reliable, 
              community-driven place to browse stock and learn how to buy items safely.
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 animate-scale-in">
            <Card className="bg-black/40 border-gray-700/50 backdrop-blur-sm transition-all duration-300 hover:scale-105 hover:bg-black/60">
              <CardContent className="p-6 text-center">
                <Star className="w-12 h-12 text-blue-400 mx-auto mb-4" />
                <h4 className="text-xl font-semibold text-white mb-2">Trusted Community</h4>
                <p className="text-gray-300">Over 1,000+ satisfied customers trust us for their MM2 needs</p>
              </CardContent>
            </Card>
            
            <Card className="bg-black/40 border-gray-700/50 backdrop-blur-sm transition-all duration-300 hover:scale-105 hover:bg-black/60">
              <CardContent className="p-6 text-center">
                <Zap className="w-12 h-12 text-blue-400 mx-auto mb-4" />
                <h4 className="text-xl font-semibold text-white mb-2">Instant Delivery</h4>
                <p className="text-gray-300">Get your items delivered immediately through our Discord server</p>
              </CardContent>
            </Card>
            
            <Card className="bg-black/40 border-gray-700/50 backdrop-blur-sm transition-all duration-300 hover:scale-105 hover:bg-black/60">
              <CardContent className="p-6 text-center">
                <Youtube className="w-12 h-12 text-blue-400 mx-auto mb-4" />
                <h4 className="text-xl font-semibold text-white mb-2">Daily Giveaways</h4>
                <p className="text-gray-300">Subscribe to our YouTube for daily giveaways and MM2 tips</p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>
    </div>
  );
};

export default About;




import { Card, CardContent } from "@/components/ui/card";
import Navigation from "@/components/Navigation";

const HowToBuy = () => {
  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-blue-900 to-black">
      <Navigation />
      
      <section className="py-16 px-4 min-h-screen flex items-center justify-center">
        <div className="container mx-auto">
          <div className="text-center mb-12 animate-fade-in">
            <h1 className="text-5xl md:text-6xl font-bold text-white mb-4">How to Buy</h1>
            <p className="text-xl text-gray-300">Simple 4-step process to get your MM2 items</p>
          </div>
          
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div className="space-y-6 animate-fade-in">
              <div className="flex items-start space-x-4 transition-all duration-300 hover:scale-105">
                <div className="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold">1</div>
                <div>
                  <h4 className="text-xl font-semibold text-white mb-2">Join Our Discord</h4>
                  <p className="text-gray-300">Click the link to join our trusted community server</p>
                </div>
              </div>
              <div className="flex items-start space-x-4 transition-all duration-300 hover:scale-105">
                <div className="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold">2</div>
                <div>
                  <h4 className="text-xl font-semibold text-white mb-2">Browse Available Items</h4>
                  <p className="text-gray-300">Check our current stock and daily updated inventory</p>
                </div>
              </div>
              <div className="flex items-start space-x-4 transition-all duration-300 hover:scale-105">
                <div className="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold">3</div>
                <div>
                  <h4 className="text-xl font-semibold text-white mb-2">Open a Ticket</h4>
                  <p className="text-gray-300">Create a ticket with your order details</p>
                </div>
              </div>
              <div className="flex items-start space-x-4 transition-all duration-300 hover:scale-105">
                <div className="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold">4</div>
                <div>
                  <h4 className="text-xl font-semibold text-white mb-2">Receive Items Instantly</h4>
                  <p className="text-gray-300">Get your items delivered safely and quickly</p>
                </div>
              </div>
            </div>
            
            <div className="animate-scale-in">
              <Card className="bg-black/40 border-gray-700/50 backdrop-blur-sm transition-all duration-300 hover:scale-105">
                <CardContent className="p-6">
                  <h4 className="text-xl font-semibold text-white mb-4">Watch Our Tutorial</h4>
                  <div className="aspect-video rounded-lg overflow-hidden">
                    <iframe 
                      width="100%" 
                      height="100%" 
                      src="https://www.youtube.com/embed/8y9O5wgBqHQ" 
                      title="How To Use MM2Store (Buying MM2 Items)"
                      frameBorder="0" 
                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                      allowFullScreen
                      className="rounded-lg"
                    ></iframe>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

export default HowToBuy;



import { Card, CardContent } from "@/components/ui/card";
import Navigation from "@/components/Navigation";

const Stock = () => {
  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-blue-900 to-black">
      <Navigation />
      
      <section className="py-16 px-4 min-h-screen flex items-center justify-center">
        <div className="container mx-auto">
          <div className="text-center mb-12 animate-fade-in">
            <h1 className="text-5xl md:text-6xl font-bold text-white mb-4">Our Current Stock</h1>
            <p className="text-xl text-gray-300">Check out our latest inventory showcase</p>
          </div>
          
          <div className="max-w-4xl mx-auto animate-scale-in">
            <Card className="bg-black/40 border-gray-700/50 backdrop-blur-sm transition-all duration-300 hover:scale-105">
              <CardContent className="p-6">
                <div className="aspect-video rounded-lg overflow-hidden">
                  <iframe 
                    width="100%" 
                    height="100%" 
                    src="https://www.youtube.com/embed/r1doe-zBcCo" 
                    title="Our Stock"
                    frameBorder="0" 
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                    allowFullScreen
                    className="rounded-lg"
                  ></iframe>
                </div>
                <p className="text-gray-300 text-center mt-4">
                  All purchases are made through our Discord server. This site is informational only.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>
    </div>
  );
};

export default Stock;


import { Toaster } from "@/components/ui/toaster";
import { Toaster as Sonner } from "@/components/ui/sonner";
import { TooltipProvider } from "@/components/ui/tooltip";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Index from "./pages/Index";
import About from "./pages/About";
import Stock from "./pages/Stock";
import HowToBuy from "./pages/HowToBuy";
import NotFound from "./pages/NotFound";

const queryClient = new QueryClient();

const App = () => (
  <QueryClientProvider client={queryClient}>
    <TooltipProvider>
      <Toaster />
      <Sonner />
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Index />} />
          <Route path="/about" element={<About />} />
          <Route path="/stock" element={<Stock />} />
          <Route path="/how-to-buy" element={<HowToBuy />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </BrowserRouter>
    </TooltipProvider>
  </QueryClientProvider>
);

export default App;



@tailwind base;
@tailwind components;
@tailwind utilities;

/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
All colors MUST be HSL.
*/

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;

    --radius: 0.5rem;

    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
  }
}

/* Custom animations */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-fade-in {
  animation: fade-in 0.6s ease-out;
}

.animate-scale-in {
  animation: scale-in 0.6s ease-out;
}



import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Users, Shield, Zap, Youtube, MessageCircle } from "lucide-react";
import { Link } from "react-router-dom";
import Navigation from "@/components/Navigation";

const Index = () => {
  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-blue-900 to-black">
      <Navigation />

      {/* Hero Section */}
      <section className="py-20 px-4 min-h-screen flex items-center justify-center">
        <div className="container mx-auto text-center">
          <div className="mb-8 animate-fade-in">
            <Badge className="bg-blue-600/20 text-blue-200 border-blue-500/30 mb-4">
              Trusted by 1,000+ Players
            </Badge>
            <h2 className="text-6xl md:text-7xl font-bold text-white mb-6 leading-tight">
              Your Trusted
              <span className="text-blue-400 block">MM2 Hub</span>
            </h2>
            <p className="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
              Fast, safe, and simple. Join thousands of satisfied customers who trust MM2 Store for all their Murder Mystery 2 needs.
            </p>
          </div>

          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12 animate-scale-in">
            <Button 
              size="lg" 
              asChild 
              className="bg-blue-600 hover:bg-blue-500 text-white px-8 py-4 text-lg transition-all duration-300 hover:scale-105"
            >
              <a href="https://discord.gg/dQrYDnf9JJ" target="_blank" rel="noopener noreferrer">
                <MessageCircle className="w-5 h-5 mr-2" />
                Join Discord to Buy
              </a>
            </Button>
            <Button 
              size="lg" 
              variant="outline" 
              asChild
              className="border-blue-400 text-blue-100 hover:bg-blue-800/50 px-8 py-4 text-lg transition-all duration-300 hover:scale-105"
            >
              <a href="https://www.youtube.com/@MM2_STORE/videos" target="_blank" rel="noopener noreferrer">
                <Youtube className="w-5 h-5 mr-2" />
                Watch Our Videos
              </a>
            </Button>
          </div>

          {/* Trust Indicators */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto animate-fade-in">
            <div className="flex items-center justify-center space-x-3 text-gray-300 transition-all duration-300 hover:text-blue-400 hover:scale-105">
              <Users className="w-8 h-8 text-blue-400" />
              <span className="text-lg font-semibold">1K+ Customers</span>
            </div>
            <div className="flex items-center justify-center space-x-3 text-gray-300 transition-all duration-300 hover:text-blue-400 hover:scale-105">
              <Zap className="w-8 h-8 text-blue-400" />
              <span className="text-lg font-semibold">Instant Delivery</span>
            </div>
            <div className="flex items-center justify-center space-x-3 text-gray-300 transition-all duration-300 hover:text-blue-400 hover:scale-105">
              <Shield className="w-8 h-8 text-blue-400" />
              <span className="text-lg font-semibold">Safe & Secure</span>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

export default Index;