Merge version_2 into main

Merge version_2 into main

src/app/admin/page.tsx

@@ -0,0 +1,199 @@
+"use client";
+
+import { BarChart3, Settings, Trophy, Users, Zap } from "lucide-react";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
+import FeatureCardTwelve from "@/components/sections/feature/FeatureCardTwelve";
+import MetricCardTen from "@/components/sections/metrics/MetricCardTen";
+import FooterBase from "@/components/sections/footer/FooterBase";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+
+export default function AdminPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="soft"
+      contentWidth="mediumSmall"
+      sizing="mediumLargeSizeMediumTitles"
+      background="noiseDiagonalGradient"
+      cardStyle="inset"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="medium"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          brandName="Counter-Strike Admin"
+          navItems={[
+            { name: "Dashboard", id: "dashboard" },
+            { name: "Tournaments", id: "tournaments" },
+            { name: "Teams", id: "teams" },
+            { name: "Live Results", id: "live-results" },
+            { name: "Home", id: "/" },
+          ]}
+        />
+      </div>
+
+      <div id="dashboard" data-section="dashboard">
+        <HeroLogoBillboard
+          logoText="Admin Dashboard"
+          description="Manage tournaments, teams, and live competition results with powerful administration tools."
+          buttons={[
+            { text: "New Tournament", href: "#tournaments" },
+            { text: "View Statistics", href: "#statistics" },
+          ]}
+          background={{ variant: "glowing-orb" }}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZJPKdry8xklfGL8mpyrtIoLGP/professional-counter-strike-2-gameplay-s-1772794209910-2cca9213.png"
+          imageAlt="Admin dashboard overview"
+          frameStyle="browser"
+          buttonAnimation="slide-up"
+          mediaAnimation="slide-up"
+        />
+      </div>
+
+      <div id="tournaments" data-section="tournaments">
+        <FeatureCardTwelve
+          title="Tournament Management"
+          description="Create and manage competitive tournaments with comprehensive bracket systems and scheduling tools."
+          tag="Tournaments"
+          tagIcon={Trophy}
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          animationType="slide-up"
+          features={[
+            {
+              id: "create",              label: "Create",              title: "Create New Tournaments",              items: [
+                "Set tournament format and rules",                "Define prize pool and rewards",                "Configure bracket systems",                "Schedule match dates and times"],
+              buttons: [{ text: "Create Tournament", href: "#" }],
+            },
+            {
+              id: "manage",              label: "Manage",              title: "Edit & Monitor Tournaments",              items: [
+                "Update tournament details",                "Track participant registrations",                "Manage bracket progression",                "Handle disputes and appeals"],
+              buttons: [{ text: "View All Tournaments", href: "#" }],
+            },
+            {
+              id: "analytics",              label: "Analyze",              title: "Tournament Analytics",              items: [
+                "View participation metrics",                "Track revenue and sponsorships",                "Monitor player performance data",                "Generate tournament reports"],
+              buttons: [{ text: "View Analytics", href: "#" }],
+            },
+          ]}
+        />
+      </div>
+
+      <div id="teams" data-section="teams">
+        <FeatureCardTwelve
+          title="Team Management"
+          description="Oversee team registrations, roster changes, and player eligibility."
+          tag="Teams"
+          tagIcon={Users}
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={true}
+          animationType="slide-up"
+          features={[
+            {
+              id: "registration",              label: "Register",              title: "Team Registration & Setup",              items: [
+                "Approve team applications",                "Verify player identities",                "Manage team information",                "Set team logos and branding"],
+              buttons: [{ text: "Review Applications", href: "#" }],
+            },
+            {
+              id: "roster",              label: "Rosters",              title: "Manage Team Rosters",              items: [
+                "Track player roster changes",                "Validate substitutions",                "Check player eligibility",                "Archive historical rosters"],
+              buttons: [{ text: "Manage Rosters", href: "#" }],
+            },
+            {
+              id: "compliance",              label: "Compliance",              title: "Team Compliance & Rules",              items: [
+                "Enforce competition rules",                "Monitor anti-cheat compliance",                "Track rule violations",                "Issue sanctions and warnings"],
+              buttons: [{ text: "View Violations", href: "#" }],
+            },
+          ]}
+        />
+      </div>
+
+      <div id="live-results" data-section="live-results">
+        <MetricCardTen
+          title="Live Results Management"
+          description="Track real-time match results, scores, and player statistics during active competitions."
+          tag="Live"
+          tagIcon={BarChart3}
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          animationType="slide-up"
+          metrics={[
+            {
+              id: "1",              title: "Active Matches",              subtitle: "Currently Running",              category: "Live",              value: "8 Matches",              buttons: [{ text: "Monitor Matches", href: "#" }],
+            },
+            {
+              id: "2",              title: "Result Input",              subtitle: "Score Verification",              category: "Management",              value: "3 Pending",              buttons: [{ text: "Verify Scores", href: "#" }],
+            },
+            {
+              id: "3",              title: "Player Stats",              subtitle: "Real-Time Tracking",              category: "Analytics",              value: "256 Players",              buttons: [{ text: "View Stats", href: "#" }],
+            },
+            {
+              id: "4",              title: "Broadcasts",              subtitle: "Stream Management",              category: "Media",              value: "5 Active",              buttons: [{ text: "Manage Streams", href: "#" }],
+            },
+          ]}
+        />
+      </div>
+
+      <div id="statistics" data-section="statistics">
+        <MetricCardTen
+          title="System Statistics"
+          description="Overview of platform performance, user engagement, and operational metrics."
+          tag="Metrics"
+          tagIcon={Zap}
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={true}
+          animationType="slide-up"
+          metrics={[
+            {
+              id: "1",              title: "Total Users",              subtitle: "Registered Players",              category: "Platform",              value: "2.5M"},
+            {
+              id: "2",              title: "Active Tournaments",              subtitle: "Running Now",              category: "Competitions",              value: "42"},
+            {
+              id: "3",              title: "Registered Teams",              subtitle: "Competing",              category: "Teams",              value: "3.2K"},
+            {
+              id: "4",              title: "Total Prize Pool",              subtitle: "Available Rewards",              category: "Economy",              value: "$5.2M"},
+          ]}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBase
+          logoText="Counter-Strike Admin"
+          copyrightText="© 2024 Counter-Strike Admin Panel. All rights reserved."
+          columns={[
+            {
+              title: "Management",              items: [
+                { label: "Tournaments", href: "#tournaments" },
+                { label: "Teams", href: "#teams" },
+                { label: "Live Results", href: "#live-results" },
+                { label: "Settings", href: "#" },
+              ],
+            },
+            {
+              title: "Tools",              items: [
+                { label: "Reports", href: "#" },
+                { label: "User Management", href: "#" },
+                { label: "Compliance", href: "#" },
+                { label: "Audit Logs", href: "#" },
+              ],
+            },
+            {
+              title: "Support",              items: [
+                { label: "Documentation", href: "#" },
+                { label: "Help Center", href: "#" },
+                { label: "Contact Support", href: "#" },
+                { label: "Report Issue", href: "#" },
+              ],
+            },
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -35,6 +35,7 @@ export default function LandingPage() {
             { name: "Competitive", id: "competitive" },
             { name: "Community", id: "testimonials" },
             { name: "FAQ", id: "faq" },
+            { name: "Admin", id: "/admin" },
           ]}
         />
       </div>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
+  --background: #0a0a0a;
-  --card: #f9f9f9;
+  --card: #1a1a1a;
-  --foreground: #000f06e6;
+  --foreground: #ffffff;
-  --primary-cta: #0a7039;
+  --primary-cta: #00d9ff;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #ff6b1a;
   --secondary-cta-text: #000f06e6;
-  --accent: #e2e2e2;
+  --accent: #00d9ff;
-  --background-accent: #c4c4c4;
+  --background-accent: #ff6b1a;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

src/app/teams/page.tsx

@@ -0,0 +1,375 @@
+"use client";
+
+import { useState } from "react";
+import { Users, MapPin, Trophy, Users2, Mail, Phone } from "lucide-react";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import TeamCardTen from "@/components/sections/team/TeamCardTen";
+import ContactFaq from "@/components/sections/contact/ContactFaq";
+import FooterBase from "@/components/sections/footer/FooterBase";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+
+export default function TeamsPage() {
+  const [formData, setFormData] = useState({
+    teamName: "",    captain: "",    email: "",    phone: "",    region: "",    skillLevel: ""});
+  const [formErrors, setFormErrors] = useState<Record<string, string>>({});
+  const [submitStatus, setSubmitStatus] = useState<"idle" | "success" | "error">("idle");
+
+  const validateForm = () => {
+    const errors: Record<string, string> = {};
+
+    if (!formData.teamName.trim()) {
+      errors.teamName = "Team name is required";
+    }
+    if (!formData.captain.trim()) {
+      errors.captain = "Captain name is required";
+    }
+    if (!formData.email.trim()) {
+      errors.email = "Email is required";
+    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
+      errors.email = "Please enter a valid email";
+    }
+    if (!formData.phone.trim()) {
+      errors.phone = "Phone number is required";
+    }
+    if (!formData.region) {
+      errors.region = "Region is required";
+    }
+    if (!formData.skillLevel) {
+      errors.skillLevel = "Skill level is required";
+    }
+
+    setFormErrors(errors);
+    return Object.keys(errors).length === 0;
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!validateForm()) {
+      setSubmitStatus("error");
+      return;
+    }
+
+    console.log("Form submitted:", formData);
+    setSubmitStatus("success");
+    setFormData({
+      teamName: "",      captain: "",      email: "",      phone: "",      region: "",      skillLevel: ""});
+
+    setTimeout(() => {
+      setSubmitStatus("idle");
+    }, 3000);
+  };
+
+  const handleInputChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
+  ) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+    if (formErrors[name]) {
+      setFormErrors((prev) => {
+        const updated = { ...prev };
+        delete updated[name];
+        return updated;
+      });
+    }
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="soft"
+      contentWidth="mediumSmall"
+      sizing="mediumLargeSizeMediumTitles"
+      background="noiseDiagonalGradient"
+      cardStyle="inset"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="medium"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          brandName="Counter-Strike"
+          navItems={[
+            { name: "About", id: "about" },
+            { name: "Features", id: "features" },
+            { name: "Competitive", id: "competitive" },
+            { name: "Community", id: "testimonials" },
+            { name: "Teams", id: "/teams" },
+            { name: "FAQ", id: "faq" },
+          ]}
+        />
+      </div>
+
+      <div id="featured-teams" data-section="featured-teams" className="py-20">
+        <TeamCardTen
+          title="Professional Counter-Strike Teams"
+          tag="Featured Teams"
+          tagAnimation="slide-up"
+          membersAnimation="slide-up"
+          members={[
+            {
+              id: "1",              name: "Natus Vincere",              imageSrc:
+                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZJPKdry8xklfGL8mpyrtIoLGP/professional-esports-player-headshot-wea-1772794208774-cede4231.png",              imageAlt: "Natus Vincere team logo"},
+            {
+              id: "2",              name: "FaZe Clan",              imageSrc:
+                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZJPKdry8xklfGL8mpyrtIoLGP/counter-strike-team-coach-or-analyst-pro-1772794208496-4864025f.png",              imageAlt: "FaZe Clan team logo"},
+            {
+              id: "3",              name: "Vitality",              imageSrc:
+                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZJPKdry8xklfGL8mpyrtIoLGP/esports-caster-or-streamer-professional--1772794209359-97fb478d.png",              imageAlt: "Vitality team logo"},
+            {
+              id: "4",              name: "Cloud9",              imageSrc:
+                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZJPKdry8xklfGL8mpyrtIoLGP/esports-community-manager-or-event-organ-1772794208847-1bb5069c.png",              imageAlt: "Cloud9 team logo"},
+          ]}
+          memberVariant="card"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="team-registration" data-section="team-registration" className="py-20">
+        <div className="w-full max-w-4xl mx-auto px-6">
+          <div className="text-center mb-12">
+            <h2 className="text-4xl md:text-5xl font-bold mb-4">Register Your Team</h2>
+            <p className="text-lg text-foreground/70">
+              Join the competitive Counter-Strike community. Register your team to participate in tournaments and events.
+            </p>
+          </div>
+
+          <form
+            onSubmit={handleSubmit}
+            className="bg-card rounded-lg p-8 border border-accent/20 shadow-lg"
+          >
+            {submitStatus === "success" && (
+              <div className="mb-6 p-4 bg-green-500/20 border border-green-500/50 rounded-lg text-green-700 dark:text-green-300">
+                ✓ Team registration submitted successfully!
+              </div>
+            )}
+
+            {submitStatus === "error" && Object.keys(formErrors).length > 0 && (
+              <div className="mb-6 p-4 bg-red-500/20 border border-red-500/50 rounded-lg text-red-700 dark:text-red-300">
+                Please fix the errors below.
+              </div>
+            )}
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div>
+                <label className="block text-sm font-medium mb-2">
+                  <Users className="inline mr-2 w-4 h-4" />
+                  Team Name *
+                </label>
+                <input
+                  type="text"
+                  name="teamName"
+                  value={formData.teamName}
+                  onChange={handleInputChange}
+                  className={`w-full px-4 py-2 rounded-lg border bg-background/50 backdrop-blur-sm transition-colors ${
+                    formErrors.teamName
+                      ? "border-red-500 focus:ring-red-500"
+                      : "border-accent/30 focus:ring-primary-cta"
+                  } focus:outline-none focus:ring-2`}
+                  placeholder="Enter team name"
+                />
+                {formErrors.teamName && (
+                  <p className="text-red-500 text-sm mt-1">{formErrors.teamName}</p>
+                )}
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium mb-2">
+                  <Users2 className="inline mr-2 w-4 h-4" />
+                  Captain Name *
+                </label>
+                <input
+                  type="text"
+                  name="captain"
+                  value={formData.captain}
+                  onChange={handleInputChange}
+                  className={`w-full px-4 py-2 rounded-lg border bg-background/50 backdrop-blur-sm transition-colors ${
+                    formErrors.captain
+                      ? "border-red-500 focus:ring-red-500"
+                      : "border-accent/30 focus:ring-primary-cta"
+                  } focus:outline-none focus:ring-2`}
+                  placeholder="Captain name"
+                />
+                {formErrors.captain && (
+                  <p className="text-red-500 text-sm mt-1">{formErrors.captain}</p>
+                )}
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium mb-2">
+                  <Mail className="inline mr-2 w-4 h-4" />
+                  Email *
+                </label>
+                <input
+                  type="email"
+                  name="email"
+                  value={formData.email}
+                  onChange={handleInputChange}
+                  className={`w-full px-4 py-2 rounded-lg border bg-background/50 backdrop-blur-sm transition-colors ${
+                    formErrors.email
+                      ? "border-red-500 focus:ring-red-500"
+                      : "border-accent/30 focus:ring-primary-cta"
+                  } focus:outline-none focus:ring-2`}
+                  placeholder="team@example.com"
+                />
+                {formErrors.email && (
+                  <p className="text-red-500 text-sm mt-1">{formErrors.email}</p>
+                )}
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium mb-2">
+                  <Phone className="inline mr-2 w-4 h-4" />
+                  Phone Number *
+                </label>
+                <input
+                  type="tel"
+                  name="phone"
+                  value={formData.phone}
+                  onChange={handleInputChange}
+                  className={`w-full px-4 py-2 rounded-lg border bg-background/50 backdrop-blur-sm transition-colors ${
+                    formErrors.phone
+                      ? "border-red-500 focus:ring-red-500"
+                      : "border-accent/30 focus:ring-primary-cta"
+                  } focus:outline-none focus:ring-2`}
+                  placeholder="+1 (555) 000-0000"
+                />
+                {formErrors.phone && (
+                  <p className="text-red-500 text-sm mt-1">{formErrors.phone}</p>
+                )}
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium mb-2">
+                  <MapPin className="inline mr-2 w-4 h-4" />
+                  Region *
+                </label>
+                <select
+                  name="region"
+                  value={formData.region}
+                  onChange={handleInputChange}
+                  className={`w-full px-4 py-2 rounded-lg border bg-background/50 backdrop-blur-sm transition-colors ${
+                    formErrors.region
+                      ? "border-red-500 focus:ring-red-500"
+                      : "border-accent/30 focus:ring-primary-cta"
+                  } focus:outline-none focus:ring-2`}
+                >
+                  <option value="">Select region</option>
+                  <option value="na">North America</option>
+                  <option value="eu">Europe</option>
+                  <option value="asia">Asia</option>
+                  <option value="sa">South America</option>
+                  <option value="oce">Oceania</option>
+                </select>
+                {formErrors.region && (
+                  <p className="text-red-500 text-sm mt-1">{formErrors.region}</p>
+                )}
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium mb-2">
+                  <Trophy className="inline mr-2 w-4 h-4" />
+                  Skill Level *
+                </label>
+                <select
+                  name="skillLevel"
+                  value={formData.skillLevel}
+                  onChange={handleInputChange}
+                  className={`w-full px-4 py-2 rounded-lg border bg-background/50 backdrop-blur-sm transition-colors ${
+                    formErrors.skillLevel
+                      ? "border-red-500 focus:ring-red-500"
+                      : "border-accent/30 focus:ring-primary-cta"
+                  } focus:outline-none focus:ring-2`}
+                >
+                  <option value="">Select skill level</option>
+                  <option value="amateur">Amateur</option>
+                  <option value="semi-pro">Semi-Pro</option>
+                  <option value="professional">Professional</option>
+                  <option value="elite">Elite</option>
+                </select>
+                {formErrors.skillLevel && (
+                  <p className="text-red-500 text-sm mt-1">{formErrors.skillLevel}</p>
+                )}
+              </div>
+            </div>
+
+            <button
+              type="submit"
+              className="w-full mt-8 px-6 py-3 bg-primary-cta text-white rounded-lg font-medium hover:opacity-90 transition-opacity"
+            >
+              Register Team
+            </button>
+          </form>
+        </div>
+      </div>
+
+      <div id="contact" data-section="contact" className="py-20">
+        <ContactFaq
+          faqs={[
+            {
+              id: "1",              title: "What is required to register a team?",              content:
+                "You need a team name, captain name, valid email, phone number, region, and skill level. Minimum 5 players are required for competitive tournaments."},
+            {
+              id: "2",              title: "When can my team start competing?",              content:
+                "Once registered and verified, your team can participate in upcoming tournaments. Verification typically takes 24-48 hours during business days."},
+            {
+              id: "3",              title: "Are there team fees?",              content:
+                "Team registration is free. However, individual tournament participation may have entry fees that vary by event. Check specific tournament details for pricing."},
+            {
+              id: "4",              title: "How do I update team information?",              content:
+                "Contact our support team with your team registration ID. We can help you update team roster, captain, or contact information at any time."},
+            {
+              id: "5",              title: "What support do you provide?",              content:
+                "We provide tournament scheduling, anti-cheat support, dispute resolution, and community management. Our support team is available 24/7 for assistance."},
+            {
+              id: "6",              title: "Can I register multiple teams?",              content:
+                "Yes, you can register multiple teams under the same organization. Each team must have unique members and a designated captain for tournament participation."},
+          ]}
+          ctaTitle="Ready to Register?"
+          ctaDescription="Get your team set up and start competing in Counter-Strike tournaments today. Our team is here to help."
+          ctaButton={{ text: "Contact Support", href: "#" }}
+          ctaIcon={Users}
+          useInvertedBackground={false}
+          animationType="slide-up"
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBase
+          logoText="Counter-Strike"
+          copyrightText="© 2024 Counter-Strike. All rights reserved."
+          columns={[
+            {
+              title: "Game",              items: [
+                { label: "Download", href: "https://www.counter-strike.net" },
+                { label: "Updates", href: "#" },
+                { label: "System Requirements", href: "#" },
+                { label: "Support", href: "#" },
+              ],
+            },
+            {
+              title: "Community",              items: [
+                { label: "Forums", href: "https://forums.steampowered.com" },
+                { label: "Teams", href: "/teams" },
+                { label: "Esports", href: "#" },
+                { label: "Events", href: "#" },
+              ],
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Code of Conduct", href: "#" },
+                { label: "Contact", href: "#" },
+              ],
+            },
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/tickets/page.tsx

@@ -0,0 +1,252 @@
+"use client";
+
+import { ShoppingCart, Ticket, ArrowRight, Check } from "lucide-react";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FooterBase from "@/components/sections/footer/FooterBase";
+import PricingCardFive from "@/components/sections/pricing/PricingCardFive";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { useState } from "react";
+
+export default function TicketsPage() {
+  const [cart, setCart] = useState<Array<{ id: string; name: string; price: number; quantity: number }>>([]);
+  const [selectedPlan, setSelectedPlan] = useState<string | null>(null);
+
+  const addToCart = (planId: string, planName: string, price: number) => {
+    const existingItem = cart.find((item) => item.id === planId);
+    if (existingItem) {
+      setCart(
+        cart.map((item) =>
+          item.id === planId ? { ...item, quantity: item.quantity + 1 } : item
+        )
+      );
+    } else {
+      setCart([...cart, { id: planId, name: planName, price, quantity: 1 }]);
+    }
+    setSelectedPlan(planId);
+  };
+
+  const removeFromCart = (planId: string) => {
+    setCart(cart.filter((item) => item.id !== planId));
+  };
+
+  const updateQuantity = (planId: string, quantity: number) => {
+    if (quantity <= 0) {
+      removeFromCart(planId);
+    } else {
+      setCart(
+        cart.map((item) =>
+          item.id === planId ? { ...item, quantity } : item
+        )
+      );
+    }
+  };
+
+  const cartTotal = cart.reduce((sum, item) => sum + item.price * item.quantity, 0);
+
+  const handleCheckout = () => {
+    if (cart.length === 0) {
+      alert("Please add tickets to your cart");
+      return;
+    }
+    alert(`Processing checkout for ${cart.length} ticket(s) - Total: $${cartTotal.toFixed(2)}`);
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="soft"
+      contentWidth="mediumSmall"
+      sizing="mediumLargeSizeMediumTitles"
+      background="noiseDiagonalGradient"
+      cardStyle="inset"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="medium"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          brandName="Counter-Strike"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "About", id: "#about" },
+            { name: "Features", id: "#features" },
+            { name: "Competitive", id: "#competitive" },
+            { name: "Community", id: "#testimonials" },
+            { name: "FAQ", id: "#faq" },
+          ]}
+        />
+      </div>
+
+      <div id="tickets-hero" data-section="tickets-hero" className="py-20 text-center">
+        <div className="max-w-3xl mx-auto px-4">
+          <div className="flex items-center justify-center gap-2 mb-6">
+            <Ticket className="w-6 h-6 text-primary-cta" />
+            <span className="text-sm font-medium text-primary-cta">Esports Championship</span>
+          </div>
+          <h1 className="text-5xl md:text-6xl font-bold mb-6">Counter-Strike 2 Championship</h1>
+          <p className="text-lg text-foreground/70 mb-8">
+            Secure your spot at the biggest esports event of the year. Watch professional teams compete for glory and prize pools.
+          </p>
+        </div>
+      </div>
+
+      <div id="pricing" data-section="pricing" className="py-20">
+        <PricingCardFive
+          title="Event Tickets & Packages"
+          description="Choose the perfect ticket package to experience the championship"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          animationType="slide-up"
+          plans={[
+            {
+              id: "general-admission",              tag: "General Admission",              price: "$49",              period: "/ticket",              description: "Standard event access with general seating in the venue.",              button: {
+                text: "Add to Cart",                onClick: () => addToCart("general-admission", "General Admission", 49),
+              },
+              featuresTitle: "What's Included:",              features: [
+                "General venue access",                "Standard seating",                "Complimentary water and snacks",                "Official event merchandise discount"],
+            },
+            {
+              id: "vip-package",              tag: "VIP Package",              tagIcon: Check,
+              price: "$149",              period: "/ticket",              description: "Premium experience with priority seating and exclusive perks.",              button: {
+                text: "Add to Cart",                onClick: () => addToCart("vip-package", "VIP Package", 149),
+              },
+              featuresTitle: "What's Included:",              features: [
+                "Premium seating (front section)",                "Early venue entry",                "VIP lounge access",                "Exclusive event merchandise",                "Meet & greet opportunity",                "Premium food and beverages"],
+            },
+            {
+              id: "pro-pass",              tag: "Pro Pass",              tagIcon: Check,
+              price: "$299",              period: "/ticket",              description: "The ultimate championship experience with full access and exclusives.",              button: {
+                text: "Add to Cart",                onClick: () => addToCart("pro-pass", "Pro Pass", 299),
+              },
+              featuresTitle: "What's Included:",              features: [
+                "VIP ringside seating",                "Exclusive afterparty access",                "Professional photography package",                "Limited edition pro pass merchandise",                "Private player autograph session",                "Premium dining experience",                "Behind-the-scenes tour",                "24/7 concierge support"],
+            },
+          ]}
+        />
+      </div>
+
+      <div id="cart" data-section="cart" className="py-20">
+        <div className="max-w-4xl mx-auto px-4">
+          <div className="bg-card rounded-lg p-8 border border-foreground/10">
+            <h2 className="text-3xl font-bold mb-8 flex items-center gap-2">
+              <ShoppingCart className="w-8 h-8" />
+              Your Cart
+            </h2>
+
+            {cart.length === 0 ? (
+              <p className="text-foreground/60 text-center py-12">
+                Your cart is empty. Select tickets above to get started.
+              </p>
+            ) : (
+              <div>
+                <div className="space-y-4 mb-8">
+                  {cart.map((item) => (
+                    <div
+                      key={item.id}
+                      className="flex items-center justify-between p-4 bg-background rounded-lg border border-foreground/10"
+                    >
+                      <div>
+                        <p className="font-semibold">{item.name}</p>
+                        <p className="text-sm text-foreground/60">${item.price.toFixed(2)} each</p>
+                      </div>
+                      <div className="flex items-center gap-4">
+                        <div className="flex items-center border border-foreground/20 rounded">
+                          <button
+                            onClick={() => updateQuantity(item.id, item.quantity - 1)}
+                            className="px-3 py-2 text-foreground/60 hover:text-foreground"
+                          >
+                            −
+                          </button>
+                          <span className="px-4">{item.quantity}</span>
+                          <button
+                            onClick={() => updateQuantity(item.id, item.quantity + 1)}
+                            className="px-3 py-2 text-foreground/60 hover:text-foreground"
+                          >
+                            +
+                          </button>
+                        </div>
+                        <p className="font-semibold w-24 text-right">
+                          ${(item.price * item.quantity).toFixed(2)}
+                        </p>
+                        <button
+                          onClick={() => removeFromCart(item.id)}
+                          className="text-red-500 hover:text-red-600 font-medium"
+                        >
+                          Remove
+                        </button>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+
+                <div className="border-t border-foreground/10 pt-6 mb-8">
+                  <div className="flex justify-between items-center mb-6">
+                    <span className="text-lg font-semibold">Total:</span>
+                    <span className="text-2xl font-bold text-primary-cta">${cartTotal.toFixed(2)}</span>
+                  </div>
+                  <button
+                    onClick={handleCheckout}
+                    className="w-full bg-primary-cta text-white py-3 rounded-lg font-semibold hover:opacity-90 transition flex items-center justify-center gap-2"
+                  >
+                    <ArrowRight className="w-5 h-5" />
+                    Proceed to Checkout
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div id="cta" data-section="cta">
+        <ContactCTA
+          tag="Questions?"
+          tagIcon={Ticket}
+          title="Need Help with Tickets?"
+          description="Our support team is ready to assist you with any questions about tickets, packages, or the event."
+          buttons={[
+            { text: "Contact Support", href: "mailto:support@counter-strike.net" },
+            { text: "Back to Home", href: "/" },
+          ]}
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBase
+          logoText="Counter-Strike"
+          copyrightText="© 2024 Counter-Strike. All rights reserved."
+          columns={[
+            {
+              title: "Event",              items: [
+                { label: "Tickets", href: "/tickets" },
+                { label: "Schedule", href: "/tickets#schedule" },
+                { label: "Venue", href: "/tickets#venue" },
+                { label: "FAQ", href: "/tickets#faq" },
+              ],
+            },
+            {
+              title: "Information",              items: [
+                { label: "About Event", href: "#" },
+                { label: "Teams", href: "#" },
+                { label: "Matches", href: "#" },
+                { label: "Prizes", href: "#" },
+              ],
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms & Conditions", href: "#" },
+                { label: "Refund Policy", href: "#" },
+                { label: "Contact", href: "#" },
+              ],
+            },
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/tournament/page.tsx

@@ -0,0 +1,184 @@
+"use client";
+
+import { Calendar, MapPin, Trophy, Users, Clock, Award } from "lucide-react";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleCarousel";
+import TimelineHorizontalCardStack from "@/components/cardStack/layouts/timelines/TimelineHorizontalCardStack";
+import FaqBase from "@/components/sections/faq/FaqBase";
+import FooterBase from "@/components/sections/footer/FooterBase";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+
+export default function TournamentPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="soft"
+      contentWidth="mediumSmall"
+      sizing="mediumLargeSizeMediumTitles"
+      background="noiseDiagonalGradient"
+      cardStyle="inset"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="medium"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          brandName="Counter-Strike"
+          navItems={[
+            { name: "About", id: "/" },
+            { name: "Features", id: "/" },
+            { name: "Competitive", id: "/" },
+            { name: "Community", id: "/" },
+            { name: "FAQ", id: "/" },
+            { name: "Tournament", id: "/tournament" },
+          ]}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroSplitDoubleCarousel
+          title="Global Championship 2025"
+          description="Join the most prestigious Counter-Strike tournament of the year. Compete against elite teams from around the world for glory, recognition, and a share of the massive prize pool."
+          tag="Elite Tournament"
+          tagIcon={Trophy}
+          tagAnimation="slide-up"
+          background={{ variant: "glowing-orb" }}
+          leftCarouselItems={[
+            {
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZJPKdry8xklfGL8mpyrtIoLGP/counter-strike-esports-tournament-venue--1772794210167-b85f6222.png?_wi=1",              imageAlt: "Championship arena"},
+            {
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZJPKdry8xklfGL8mpyrtIoLGP/counter-strike-professional-player-in-ac-1772794209735-f714b66d.png?_wi=1",              imageAlt: "Professional player competing"},
+            {
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZJPKdry8xklfGL8mpyrtIoLGP/professional-counter-strike-2-gameplay-s-1772794209910-2cca9213.png?_wi=1",              imageAlt: "Tournament gameplay"},
+            {
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZJPKdry8xklfGL8mpyrtIoLGP/counter-strike-map-overview-screenshot-s-1772794209997-0b6eda7c.png?_wi=1",              imageAlt: "Competitive strategy"},
+          ]}
+          rightCarouselItems={[
+            {
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZJPKdry8xklfGL8mpyrtIoLGP/professional-counter-strike-2-gameplay-s-1772794209910-2cca9213.png?_wi=3",              imageAlt: "Tournament matches"},
+            {
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZJPKdry8xklfGL8mpyrtIoLGP/counter-strike-weapon-showcase-featuring-1772794209778-7e80c40f.png?_wi=3",              imageAlt: "Tournament equipment"},
+            {
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZJPKdry8xklfGL8mpyrtIoLGP/counter-strike-esports-tournament-venue--1772794210167-b85f6222.png?_wi=3",              imageAlt: "Championship venue"},
+            {
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZJPKdry8xklfGL8mpyrtIoLGP/counter-strike-professional-player-in-ac-1772794209735-f714b66d.png?_wi=3",              imageAlt: "Tournament atmosphere"},
+          ]}
+          carouselPosition="right"
+          buttons={[
+            { text: "Register Team", href: "https://www.counter-strike.net" },
+            { text: "View Details", href: "#schedule" },
+          ]}
+          buttonAnimation="slide-up"
+        />
+      </div>
+
+      <div id="schedule" data-section="schedule">
+        <TimelineHorizontalCardStack
+          title="Tournament Schedule"
+          description="Follow the complete tournament schedule from qualifiers through finals."
+          tag="Event Timeline"
+          tagIcon={Calendar}
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          mediaItems={[
+            {
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZJPKdry8xklfGL8mpyrtIoLGP/counter-strike-esports-tournament-venue--1772794210167-b85f6222.png?_wi=4",              imageAlt: "Qualifiers stage"},
+            {
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZJPKdry8xklfGL8mpyrtIoLGP/professional-counter-strike-2-gameplay-s-1772794209910-2cca9213.png?_wi=4",              imageAlt: "Group stage"},
+            {
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZJPKdry8xklfGL8mpyrtIoLGP/counter-strike-weapon-showcase-featuring-1772794209778-7e80c40f.png?_wi=4",              imageAlt: "Semifinals"},
+            {
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZJPKdry8xklfGL8mpyrtIoLGP/counter-strike-professional-player-in-ac-1772794209735-f714b66d.png?_wi=4",              imageAlt: "Grand finals"},
+          ]}
+        >
+          <div className="space-y-2">
+            <h3 className="font-semibold text-lg">Qualifiers</h3>
+            <p className="text-sm opacity-75">February 1-15, 2025</p>
+            <p className="text-sm">Regional qualifiers for 64 teams</p>
+          </div>
+          <div className="space-y-2">
+            <h3 className="font-semibold text-lg">Group Stage</h3>
+            <p className="text-sm opacity-75">February 20 - March 5, 2025</p>
+            <p className="text-sm">32 teams compete in group format</p>
+          </div>
+          <div className="space-y-2">
+            <h3 className="font-semibold text-lg">Semifinals</h3>
+            <p className="text-sm opacity-75">March 8-10, 2025</p>
+            <p className="text-sm">Top 4 teams battle for finals spots</p>
+          </div>
+          <div className="space-y-2">
+            <h3 className="font-semibold text-lg">Grand Finals</h3>
+            <p className="text-sm opacity-75">March 12-15, 2025</p>
+            <p className="text-sm">Championship match at main venue</p>
+          </div>
+        </TimelineHorizontalCardStack>
+      </div>
+
+      <div id="rules" data-section="rules">
+        <FaqBase
+          title="Tournament Rules & Information"
+          description="Everything you need to know about tournament regulations, eligibility, and competition format."
+          tag="Rules"
+          tagIcon={Award}
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          faqsAnimation="slide-up"
+          animationType="smooth"
+          faqs={[
+            {
+              id: "1",              title: "What are the eligibility requirements?",              content: "Teams must have 5 registered players aged 16 or older. Players must have a valid Steam account with no VAC bans in the last 5 years. Team rosters must be finalized by the registration deadline and cannot be changed during the tournament without approval."},
+            {
+              id: "2",              title: "What is the prize pool?",              content: "The tournament features a $5 million USD prize pool distributed across all stages. First place receives $2 million, second place $1.2 million, third place $700k, fourth place $500k, with remaining prizes distributed through group stage performances."},
+            {
+              id: "3",              title: "What is the format?",              content: "The tournament uses a 5v5 competitive format on the latest Counter-Strike 2 patch. Qualifiers are single-elimination, group stage uses round-robin, and finals use double-elimination bracket. Best-of-3 matches for finals, best-of-1 for group stage."},
+            {
+              id: "4",              title: "What equipment is provided?",              content: "All teams receive official tournament peripherals including keyboards, mice, headsets, and monitors. Players may use their own equipment if it meets tournament standards. All equipment is checked and calibrated 24 hours before matches."},
+            {
+              id: "5",              title: "What are the anti-cheat procedures?",              content: "All players undergo hardware and software checks before competing. VAC is mandatory, and players must allow tournament admins to monitor their systems. Any suspicious activity results in immediate investigation and potential disqualification."},
+            {
+              id: "6",              title: "Can I stream my team's matches?",              content: "Official tournament broadcasts are handled by the esports team. Teams can stream their own perspective with commentary, but official live match streams are provided by the tournament organizers with proper delays for fair play."},
+            {
+              id: "7",              title: "What maps are played?",              content: "The tournament map pool includes Mirage, Inferno, Nuke, Anubis, Ascent, Vertigo, and Ancient. The ban/pick format allows teams to ban maps before each series. All matches use the official tournament server settings."},
+            {
+              id: "8",              title: "How are delays and technical issues handled?",              content: "The tournament has built-in delay protocols. If technical issues occur during a match, admins can pause the game for up to 10 minutes per team per match. Rounds already completed will not be replayed unless both teams and admins agree."},
+          ]}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBase
+          logoText="Counter-Strike"
+          copyrightText="© 2024 Counter-Strike. All rights reserved."
+          columns={[
+            {
+              title: "Tournament",              items: [
+                { label: "Schedule", href: "#schedule" },
+                { label: "Rules", href: "#rules" },
+                { label: "Register", href: "https://www.counter-strike.net" },
+                { label: "Venues", href: "#" },
+              ],
+            },
+            {
+              title: "Community",              items: [
+                { label: "Forums", href: "https://forums.steampowered.com" },
+                { label: "Discord", href: "#" },
+                { label: "Twitch", href: "#" },
+                { label: "Twitter", href: "#" },
+              ],
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Code of Conduct", href: "#" },
+                { label: "Contact", href: "#" },
+              ],
+            },
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}