Merge version_2 into main

Merge version_2 into main

src/app/admin/page.tsx

@@ -0,0 +1,202 @@
+"use client"
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import HeroOverlay from '@/components/sections/hero/HeroOverlay';
+import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
+import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import { BarChart3, Users, Image, TrendingUp, Settings, LogOut } from 'lucide-react';
+
+export default function AdminDashboard() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="mediumSizeLargeTitles"
+      background="noiseDiagonalGradient"
+      cardStyle="gradient-radial"
+      primaryButtonStyle="shadow"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          brandName="OAC Admin"
+          navItems={[
+            { name: "Events", id: "events" },
+            { name: "Gallery", id: "gallery" },
+            { name: "Analytics", id: "analytics" },
+            { name: "Users", id: "users" }
+          ]}
+          button={{ text: "Logout", href: "#" }}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroOverlay
+          title="Admin Command Center"
+          description="Manage events, gallery uploads, sales analytics, and user administration from a unified dashboard. Monitor community engagement in real-time with advanced metrics and controls."
+          tag="Admin Access"
+          tagIcon={Settings}
+          tagAnimation="blur-reveal"
+          buttons={[
+            { text: "View Dashboard", href: "#analytics" },
+            { text: "Manage Users", href: "#users" }
+          ]}
+          buttonAnimation="slide-up"
+          imageSrc="http://img.b2bpic.net/free-vector/abstract-modern-technology-with-sphere-glowing-particles_1048-12742.jpg?_wi=1"
+          imageAlt="Admin dashboard control interface"
+          showDimOverlay={false}
+          showBlur={true}
+          ariaLabel="Admin Dashboard Hero Section"
+        />
+      </div>
+
+      <div id="events" data-section="events">
+        <FeatureCardMedia
+          title="Event Management Engine"
+          description="Create, modify, and oversee tournament events. Control registration timelines, bracket management, and event visibility across the platform."
+          tag="Event Administration"
+          tagIcon={BarChart3}
+          tagAnimation="blur-reveal"
+          features={[
+            {
+              id: "event-create",              title: "Create New Event",              description: "Launch tournaments with customizable brackets, registration limits, and competition rules. Set start dates, registration deadlines, and prize pools.",              tag: "Quick Setup",              imageSrc: "http://img.b2bpic.net/free-vector/video-game-characters-tier-list_742173-3466.jpg?_wi=1",              imageAlt: "Event creation interface",              buttons: [{ text: "Create Event", href: "#" }]
+            },
+            {
+              id: "event-edit",              title: "Edit Event Details",              description: "Modify tournament parameters, adjust brackets mid-competition, update participant lists, and manage registration approvals in real-time.",              tag: "Live Editing",              imageSrc: "http://img.b2bpic.net/free-vector/video-game-characters-tier-list_742173-3466.jpg?_wi=2",              imageAlt: "Event editing dashboard",              buttons: [{ text: "Edit Events", href: "#" }]
+            },
+            {
+              id: "event-schedule",              title: "Schedule & Timeline",              description: "Organize tournament schedules with automated notifications. Coordinate match timings, round progressions, and announcement broadcasts to participants.",              tag: "Automation Ready",              imageSrc: "http://img.b2bpic.net/free-vector/video-game-characters-tier-list_742173-3466.jpg?_wi=3",              imageAlt: "Tournament schedule planner",              buttons: [{ text: "View Schedule", href: "#" }]
+            }
+          ]}
+          animationType="slide-up"
+          textboxLayout="split"
+          useInvertedBackground={false}
+          carouselMode="buttons"
+          ariaLabel="Event Management Dashboard"
+        />
+      </div>
+
+      <div id="gallery" data-section="gallery">
+        <ProductCardFour
+          title="Gallery Upload Management"
+          description="Administer cosplay showcase and event gallery uploads. Moderate content, verify submissions, organize collections, and manage premium feature access for creators."
+          tag="Content Moderation"
+          tagIcon={Image}
+          tagAnimation="blur-reveal"
+          products={[
+            {
+              id: "gallery-upload",              name: "Pending Reviews",              price: "45 Items",              variant: "Awaiting Approval",              imageSrc: "http://img.b2bpic.net/free-photo/young-girl-with-pink-hairs-street-style-outfits_114579-17694.jpg?_wi=1",              imageAlt: "Gallery submission review queue"
+            },
+            {
+              id: "gallery-featured",              name: "Featured Content",              price: "128 Items",              variant: "Active Showcase",              imageSrc: "http://img.b2bpic.net/free-photo/blondish-girl-holding-chalkboard_23-2147925908.jpg?_wi=1",              imageAlt: "Featured gallery collection"
+            },
+            {
+              id: "gallery-archive",              name: "Archive Collection",              price: "892 Items",              variant: "Historical Database",              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blonde-woman-blue-light_23-2149478939.jpg?_wi=1",              imageAlt: "Gallery archive storage"
+            }
+          ]}
+          gridVariant="bento-grid"
+          animationType="scale-rotate"
+          textboxLayout="inline-image"
+          useInvertedBackground={false}
+          uniformGridCustomHeightClasses="min-h-100 2xl:min-h-110"
+          ariaLabel="Gallery Management Section"
+        />
+      </div>
+
+      <div id="analytics" data-section="analytics">
+        <MetricCardEleven
+          title="Sales & Performance Analytics"
+          description="Monitor real-time revenue metrics, transaction volumes, and engagement statistics. Track platform growth with comprehensive business intelligence dashboards."
+          tag="Performance Metrics"
+          tagIcon={TrendingUp}
+          tagAnimation="blur-reveal"
+          metrics={[
+            {
+              id: "metric-revenue",              value: "$47.2K",              title: "Monthly Revenue",              description: "Total platform sales from premium features and sponsored events",              imageSrc: "http://img.b2bpic.net/free-photo/androgynous-avatar-non-binary-queer-person_23-2151100268.jpg?_wi=1",              imageAlt: "Revenue analytics"
+            },
+            {
+              id: "metric-transactions",              value: "1,240",              title: "Total Transactions",              description: "Completed purchases and premium subscriptions this month",              imageSrc: "http://img.b2bpic.net/free-vector/video-game-characters-tier-list_742173-3466.jpg?_wi=4",              imageAlt: "Transaction counter"
+            },
+            {
+              id: "metric-engagement",              value: "94.2%",              title: "Engagement Rate",              description: "Active user participation in tournaments and community events",              imageSrc: "http://img.b2bpic.net/free-photo/androgynous-avatar-non-binary-queer-person_23-2151100268.jpg?_wi=2",              imageAlt: "Engagement statistics"
+            },
+            {
+              id: "metric-growth",              value: "+23.5%",              title: "Month-over-Month Growth",              description: "User base expansion and platform adoption metrics",              imageSrc: "http://img.b2bpic.net/free-vector/video-game-characters-tier-list_742173-3466.jpg?_wi=5",              imageAlt: "Growth trends"
+            }
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          ariaLabel="Sales and Analytics Dashboard"
+        />
+      </div>
+
+      <div id="users" data-section="users">
+        <TextSplitAbout
+          title="User Management System"
+          description={[
+            "Comprehensive user administration interface for account management, role assignment, and community moderation. Monitor user activity, verify identities, and enforce community guidelines across all platform members.",            "Advanced filtering and search capabilities enable targeted user segments for notifications, promotional campaigns, and policy enforcement. Manage banned accounts, verify premium members, and track user engagement patterns for platform optimization."
+          ]}
+          showBorder={false}
+          useInvertedBackground={false}
+          buttons={[{ text: "Access User Panel", href: "#" }]}
+          buttonAnimation="slide-up"
+          ariaLabel="User Management Section"
+        />
+      </div>
+
+      <div id="testimonials" data-section="testimonials">
+        <TestimonialCardSix
+          title="Admin Team Feedback"
+          description="Insights from our administration team managing the OAC platform. Dedicated to maintaining community standards and platform excellence."
+          tag="Admin Voices"
+          tagIcon={Users}
+          tagAnimation="blur-reveal"
+          testimonials={[
+            {
+              id: "testimonial-1",              name: "Deepika Rao",              handle: "@PlatformDirector",              testimonial: "The admin dashboard has streamlined our event management workflow tremendously. Running multiple tournaments simultaneously is now seamless and intuitive.",              imageSrc: "http://img.b2bpic.net/free-photo/young-woman-looking-smiling-grey-t-shirt-front-view_176474-16115.jpg?_wi=1",              imageAlt: "Platform director"
+            },
+            {
+              id: "testimonial-2",              name: "Marcus Chen",              handle: "@ContentModManager",              testimonial: "Gallery moderation tools are exceptional. The submission review interface makes it easy to curate quality content while maintaining creator satisfaction.",              imageSrc: "http://img.b2bpic.net/free-photo/man-having-video-call-with-his-family_23-2149120896.jpg?_wi=1",              imageAlt: "Content manager"
+            },
+            {
+              id: "testimonial-3",              name: "Sophia Williams",              handle: "@AnalyticsHead",              testimonial: "The analytics dashboard provides the insights we need to make data-driven decisions. Revenue tracking and user engagement metrics are comprehensive and real-time.",              imageSrc: "http://img.b2bpic.net/free-photo/young-adult-pressing-buzzer-button_23-2149586556.jpg?_wi=1",              imageAlt: "Analytics lead"
+            },
+            {
+              id: "testimonial-4",              name: "James Kumar",              handle: "@UserOpsManager",              testimonial: "User management has never been easier. The filtering and search capabilities save us hours of administrative work each week.",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiling-handsome-man_23-2148398270.jpg?_wi=1",              imageAlt: "User operations manager"
+            },
+            {
+              id: "testimonial-5",              name: "Elena Rodriguez",              handle: "@CommunityGM",              testimonial: "The centralized command center lets us manage events, users, and content from one place. This has been revolutionary for our team efficiency.",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-attractive-young-interracial-couple-with-white-flower-bouquet_23-2148151941.jpg?_wi=1",              imageAlt: "Community GM"
+            },
+            {
+              id: "testimonial-6",              name: "David Thompson",              handle: "@SalesAnalyst",              testimonial: "Real-time analytics and revenue tracking give us the visibility needed to optimize our monetization strategy and understand customer behavior patterns.",              imageSrc: "http://img.b2bpic.net/free-photo/business-woman-vening-street_1303-3837.jpg?_wi=1",              imageAlt: "Sales analyst"
+            }
+          ]}
+          animationType="blur-reveal"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          speed={35}
+          topMarqueeDirection="left"
+          ariaLabel="Admin Team Testimonials"
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal
+          logoText="OAC Admin Suite"
+          leftLink={{ text: "Admin Docs", href: "#" }}
+          rightLink={{ text: "Support Portal", href: "#" }}
+          ariaLabel="Admin Footer Navigation"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/cart/page.tsx

@@ -0,0 +1,111 @@
+"use client"
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import HeroOverlay from '@/components/sections/hero/HeroOverlay';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import { ShoppingCart } from 'lucide-react';
+
+export default function CartPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="mediumSizeLargeTitles"
+      background="noiseDiagonalGradient"
+      cardStyle="gradient-radial"
+      primaryButtonStyle="shadow"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          brandName="OAC"
+          navItems={[
+            { name: "Shop", id: "shop" },
+            { name: "Tournament", id: "tournament" },
+            { name: "Gallery", id: "gallery" },
+            { name: "Community", id: "community" },
+            { name: "Power Stats", id: "power-stats" }
+          ]}
+          button={{ text: "Cart", href: "/cart" }}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroOverlay
+          title="Shopping Cart"
+          description="Review your selected merchandise and proceed to checkout. Your power level awaits elevation through premium OAC gear."
+          tag="Order Summary"
+          tagIcon={ShoppingCart}
+          tagAnimation="blur-reveal"
+          buttons={[
+            { text: "Continue Shopping", href: "/shop" },
+            { text: "Proceed to Checkout", href: "/checkout" }
+          ]}
+          buttonAnimation="slide-up"
+          imageSrc="http://img.b2bpic.net/free-vector/abstract-modern-technology-with-sphere-glowing-particles_1048-12742.jpg"
+          imageAlt="Shopping cart showcase"
+          showDimOverlay={false}
+          showBlur={true}
+          ariaLabel="Cart Page Hero"
+        />
+      </div>
+
+      <div id="cart-items" data-section="cart-items">
+        <div className="bg-card border border-foreground/10 rounded-lg p-8 mx-auto max-w-4xl">
+          <div className="space-y-6">
+            <h2 className="text-2xl font-bold">Your Cart</h2>
+            <div className="text-foreground/70 py-12 text-center">
+              <p className="mb-4">Your cart is currently empty.</p>
+              <button className="text-primary-cta font-semibold hover:underline">
+                Continue shopping to add items
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="checkout" data-section="checkout">
+        <div className="bg-card border border-foreground/10 rounded-lg p-8 mx-auto max-w-2xl mt-8">
+          <h3 className="text-xl font-bold mb-6">Order Summary</h3>
+          <div className="space-y-4">
+            <div className="flex justify-between py-2 border-b border-foreground/10">
+              <span>Subtotal</span>
+              <span className="font-semibold">$0.00</span>
+            </div>
+            <div className="flex justify-between py-2 border-b border-foreground/10">
+              <span>Shipping</span>
+              <span className="font-semibold">$0.00</span>
+            </div>
+            <div className="flex justify-between py-2 border-b border-foreground/10">
+              <span>Tax</span>
+              <span className="font-semibold">$0.00</span>
+            </div>
+            <div className="flex justify-between py-3 bg-foreground/5 px-4 rounded-lg">
+              <span className="font-bold text-lg">Total</span>
+              <span className="font-bold text-lg text-primary-cta">$0.00</span>
+            </div>
+            <button className="w-full bg-primary-cta text-white py-3 rounded-lg font-semibold hover:opacity-90 mt-6">
+              Proceed to Checkout
+            </button>
+            <button className="w-full border border-foreground/20 py-3 rounded-lg font-semibold hover:bg-foreground/5">
+              Continue Shopping
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal
+          logoText="OAC Command Center"
+          leftLink={{ text: "Shop", href: "/shop" }}
+          rightLink={{ text: "Home", href: "/" }}
+          ariaLabel="Footer Navigation"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/checkout/page.tsx

@@ -0,0 +1,194 @@
+"use client"
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import HeroOverlay from '@/components/sections/hero/HeroOverlay';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import { ShoppingCart, CreditCard } from 'lucide-react';
+import { useState } from 'react';
+import Input from '@/components/form/Input';
+
+export default function CheckoutPage() {
+  const [email, setEmail] = useState('');
+  const [fullName, setFullName] = useState('');
+  const [address, setAddress] = useState('');
+  const [city, setCity] = useState('');
+  const [postalCode, setPostalCode] = useState('');
+  const [cardNumber, setCardNumber] = useState('');
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="mediumSizeLargeTitles"
+      background="noiseDiagonalGradient"
+      cardStyle="gradient-radial"
+      primaryButtonStyle="shadow"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          brandName="OAC"
+          navItems={[
+            { name: "Shop", id: "shop" },
+            { name: "Tournament", id: "tournament" },
+            { name: "Gallery", id: "gallery" },
+            { name: "Community", id: "community" },
+            { name: "Power Stats", id: "power-stats" }
+          ]}
+          button={{ text: "Cart", href: "/cart" }}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroOverlay
+          title="Checkout"
+          description="Complete your order and receive your premium OAC merchandise. Secure payment processing ensures safe transactions."
+          tag="Secure Checkout"
+          tagIcon={CreditCard}
+          tagAnimation="blur-reveal"
+          buttons={[
+            { text: "Back to Cart", href: "/cart" }
+          ]}
+          buttonAnimation="slide-up"
+          imageSrc="http://img.b2bpic.net/free-vector/abstract-modern-technology-with-sphere-glowing-particles_1048-12742.jpg"
+          imageAlt="Secure checkout"
+          showDimOverlay={false}
+          showBlur={true}
+          ariaLabel="Checkout Page Hero"
+        />
+      </div>
+
+      <div id="checkout-form" data-section="checkout-form">
+        <div className="bg-card border border-foreground/10 rounded-lg p-8 mx-auto max-w-2xl">
+          <form className="space-y-8">
+            {/* Shipping Information */}
+            <div>
+              <h3 className="text-xl font-bold mb-4">Shipping Information</h3>
+              <div className="space-y-4">
+                <Input
+                  value={email}
+                  onChange={setEmail}
+                  type="email"
+                  placeholder="Email address"
+                  required
+                />
+                <Input
+                  value={fullName}
+                  onChange={setFullName}
+                  type="text"
+                  placeholder="Full name"
+                  required
+                />
+                <Input
+                  value={address}
+                  onChange={setAddress}
+                  type="text"
+                  placeholder="Street address"
+                  required
+                />
+                <div className="grid grid-cols-2 gap-4">
+                  <Input
+                    value={city}
+                    onChange={setCity}
+                    type="text"
+                    placeholder="City"
+                    required
+                  />
+                  <Input
+                    value={postalCode}
+                    onChange={setPostalCode}
+                    type="text"
+                    placeholder="Postal code"
+                    required
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* Payment Information */}
+            <div>
+              <h3 className="text-xl font-bold mb-4">Payment Information</h3>
+              <div className="space-y-4">
+                <Input
+                  value={cardNumber}
+                  onChange={setCardNumber}
+                  type="text"
+                  placeholder="Card number"
+                  required
+                />
+                <div className="grid grid-cols-2 gap-4">
+                  <Input
+                    value=""
+                    onChange={() => {}}
+                    type="text"
+                    placeholder="MM/YY"
+                    required
+                  />
+                  <Input
+                    value=""
+                    onChange={() => {}}
+                    type="text"
+                    placeholder="CVV"
+                    required
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* Order Summary */}
+            <div className="bg-foreground/5 rounded-lg p-6">
+              <h3 className="text-lg font-bold mb-4">Order Summary</h3>
+              <div className="space-y-2 text-sm">
+                <div className="flex justify-between">
+                  <span>Subtotal</span>
+                  <span>$0.00</span>
+                </div>
+                <div className="flex justify-between">
+                  <span>Shipping</span>
+                  <span>$0.00</span>
+                </div>
+                <div className="flex justify-between">
+                  <span>Tax</span>
+                  <span>$0.00</span>
+                </div>
+                <div className="flex justify-between font-bold text-lg border-t border-foreground/10 pt-2 mt-2">
+                  <span>Total</span>
+                  <span className="text-primary-cta">$0.00</span>
+                </div>
+              </div>
+            </div>
+
+            {/* Buttons */}
+            <div className="flex gap-4">
+              <button
+                type="submit"
+                className="flex-1 bg-primary-cta text-white py-3 rounded-lg font-semibold hover:opacity-90"
+              >
+                Complete Purchase
+              </button>
+              <button
+                type="button"
+                className="flex-1 border border-foreground/20 py-3 rounded-lg font-semibold hover:bg-foreground/5"
+              >
+                Cancel
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal
+          logoText="OAC Command Center"
+          leftLink={{ text: "Shop", href: "/shop" }}
+          rightLink={{ text: "Cart", href: "/cart" }}
+          ariaLabel="Footer Navigation"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/events/page.tsx

@@ -0,0 +1,157 @@
+"use client"
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import HeroOverlay from '@/components/sections/hero/HeroOverlay';
+import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
+import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import { Calendar, Sparkles, Zap, CheckCircle } from 'lucide-react';
+
+export default function EventsPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="mediumSizeLargeTitles"
+      background="noiseDiagonalGradient"
+      cardStyle="gradient-radial"
+      primaryButtonStyle="shadow"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          brandName="OAC"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Events", id: "events" },
+            { name: "Tickets", id: "tickets" },
+            { name: "Management", id: "management" }
+          ]}
+          button={{ text: "Book Tickets", href: "#tickets" }}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroOverlay
+          title="Event Booking Arena"
+          description="Secure your spot in the most electrifying anime tournaments and community events. Browse upcoming tournaments, book tickets, and level up your tournament experience with integrated payment processing."
+          tag="Seamless Ticketing"
+          tagIcon={Zap}
+          tagAnimation="blur-reveal"
+          buttons={[
+            { text: "Browse Events", href: "#events" },
+            { text: "My Bookings", href: "#management" }
+          ]}
+          buttonAnimation="slide-up"
+          imageSrc="http://img.b2bpic.net/free-vector/abstract-modern-technology-with-sphere-glowing-particles_1048-12742.jpg"
+          imageAlt="Tournament arena with event energy"
+          showDimOverlay={false}
+          showBlur={true}
+          ariaLabel="Events Booking Hero Section"
+        />
+      </div>
+
+      <div id="events" data-section="events">
+        <FeatureCardMedia
+          title="Upcoming Events & Tournaments"
+          description="Discover exclusive events with real-time ticket availability, pricing tiers, and detailed event information. Book your tickets instantly and receive confirmation within seconds."
+          tag="Event Calendar"
+          tagIcon={Calendar}
+          tagAnimation="blur-reveal"
+          features={[
+            {
+              id: "event-spring-2024",              title: "Spring Clash 2024 - VIP Experience",              description: "Premium tournament access with front-row seating, exclusive merchandise, and meet-and-greet with tournament organizers. Early bird pricing available.",              tag: "VIP Available",              imageSrc: "http://img.b2bpic.net/free-vector/video-game-characters-tier-list_742173-3466.jpg?_wi=1",              imageAlt: "Spring Clash tournament VIP experience",              buttons: [
+                { text: "Book VIP - $89", href: "#booking" },
+                { text: "Standard - $49", href: "#booking" }
+              ]
+            },
+            {
+              id: "event-summer-gauntlet",              title: "Summer Power Gauntlet - Group Packages",              description: "Peak season tournament with group booking discounts. Bring your squad and save up to 30%. Includes group photo session and team merchandise pack.",              tag: "Group Discount",              imageSrc: "http://img.b2bpic.net/free-vector/video-game-characters-tier-list_742173-3466.jpg?_wi=2",              imageAlt: "Summer Gauntlet group package",              buttons: [
+                { text: "Book Groups 5+", href: "#booking" },
+                { text: "View Details", href: "#" }
+              ]
+            },
+            {
+              id: "event-autumn-championship",              title: "Autumn Championship - Elite Pass",              description: "Exclusive championship event with tiered seating, premium hospitality, and VIP lounge access. Limited availability—secure your spot today.",              tag: "Elite Pass",              imageSrc: "http://img.b2bpic.net/free-vector/video-game-characters-tier-list_742173-3466.jpg?_wi=3",              imageAlt: "Autumn Championship elite experience",              buttons: [
+                { text: "Book Elite - $149", href: "#booking" },
+                { text: "Waitlist", href: "#" }
+              ]
+            }
+          ]}
+          animationType="slide-up"
+          textboxLayout="split"
+          useInvertedBackground={false}
+          carouselMode="buttons"
+          ariaLabel="Events and Ticketing Gallery"
+        />
+      </div>
+
+      <div id="tickets" data-section="tickets">
+        <MetricCardEleven
+          title="Booking System Features"
+          description="Integrated payment gateway supporting Razorpay and Stripe. Instant confirmation, secure transactions, and real-time inventory management."
+          tag="Payment Processing"
+          tagIcon={Sparkles}
+          tagAnimation="blur-reveal"
+          metrics={[
+            {
+              id: "metric-payment-gateway",              value: "2",              title: "Payment Partners",              description: "Razorpay and Stripe integration for secure, instant payments",              imageSrc: "http://img.b2bpic.net/free-photo/androgynous-avatar-non-binary-queer-person_23-2151100268.jpg?_wi=1",              imageAlt: "Payment gateway partners"
+            },
+            {
+              id: "metric-tickets-sold",              value: "2,847",              title: "Tickets Booked",              description: "Active ticket reservations across all upcoming events",              imageSrc: "http://img.b2bpic.net/free-vector/video-game-characters-tier-list_742173-3466.jpg?_wi=4",              imageAlt: "Ticket booking counter"
+            },
+            {
+              id: "metric-conversion-rate",              value: "94%",              title: "Success Rate",              description: "Checkout completion rate with zero failed transactions",              imageSrc: "http://img.b2bpic.net/free-photo/androgynous-avatar-non-binary-queer-person_23-2151100268.jpg?_wi=2",              imageAlt: "Transaction success rate"
+            },
+            {
+              id: "metric-support",              value: "24/7",              title: "Customer Support",              description: "Round-the-clock assistance for booking and payment issues",              imageSrc: "http://img.b2bpic.net/free-vector/video-game-characters-tier-list_742173-3466.jpg?_wi=5",              imageAlt: "Support availability"
+            }
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          ariaLabel="Booking System Metrics"
+        />
+      </div>
+
+      <div id="management" data-section="management">
+        <FeatureCardMedia
+          title="Event Management Dashboard"
+          description="Comprehensive event management tools for organizers. Track bookings, manage inventory, send confirmations, and analyze event performance with real-time analytics."
+          tag="Admin Tools"
+          tagIcon={CheckCircle}
+          tagAnimation="blur-reveal"
+          features={[
+            {
+              id: "feature-booking-dashboard",              title: "Booking Management",              description: "Real-time dashboard showing ticket sales, reservation status, and attendee information. Export reports, manage refunds, and track revenue metrics.",              tag: "Real-Time Updates",              imageSrc: "http://img.b2bpic.net/free-vector/video-game-characters-tier-list_742173-3466.jpg?_wi=6",              imageAlt: "Booking dashboard interface",              buttons: [{ text: "Access Dashboard", href: "#" }]
+            },
+            {
+              id: "feature-inventory-management",              title: "Inventory Control",              description: "Dynamic pricing, tier management, and stock allocation. Set capacity limits, activate flash sales, and manage waitlists automatically with automated notifications.",              tag: "Automated Alerts",              imageSrc: "http://img.b2bpic.net/free-vector/video-game-characters-tier-list_742173-3466.jpg?_wi=7",              imageAlt: "Inventory management system",              buttons: [{ text: "Manage Inventory", href: "#" }]
+            },
+            {
+              id: "feature-confirmation-system",              title: "Automated Confirmations",              description: "Instant email and SMS confirmations with ticket barcodes. Customizable confirmation templates, reminder notifications, and check-in QR code generation.",              tag: "SMS & Email",              imageSrc: "http://img.b2bpic.net/free-vector/video-game-characters-tier-list_742173-3466.jpg?_wi=8",              imageAlt: "Confirmation system",              buttons: [{ text: "Setup Templates", href: "#" }]
+            }
+          ]}
+          animationType="slide-up"
+          textboxLayout="split-actions"
+          useInvertedBackground={false}
+          carouselMode="buttons"
+          ariaLabel="Event Management Tools"
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal
+          logoText="OAC Events Hub"
+          leftLink={{ text: "Event Calendar", href: "/events" }}
+          rightLink={{ text: "Support", href: "mailto:events@odishaanimeclub.dev" }}
+          ariaLabel="Events Footer Navigation"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -9,9 +9,32 @@ import ProductCardFour from '@/components/sections/product/ProductCardFour';
 import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
 import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
 import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
-import { Camera, Heart, Sparkles, Zap } from 'lucide-react';
+import ContactForm from '@/components/form/ContactForm';
+import { Camera, Heart, Sparkles, Zap, Mail, Share2 } from 'lucide-react';
+import { useState } from 'react';
 
 export default function LandingPage() {
+  const [isNewsletterSubmitted, setIsNewsletterSubmitted] = useState(false);
+
+  const handleNewsletterSubmit = (email: string) => {
+    setIsNewsletterSubmitted(true);
+    setTimeout(() => setIsNewsletterSubmitted(false), 3000);
+  };
+
+  const shareOnSocial = (platform: string) => {
+    const pageUrl = typeof window !== 'undefined' ? window.location.href : 'https://odishaanimeclub.dev';
+    const title = 'Spirit Bomb Initiative - Odisha Anime Club';
+    const links: { [key: string]: string } = {
+      twitter: `https://twitter.com/intent/tweet?url=${encodeURIComponent(pageUrl)}&text=${encodeURIComponent(title)}`,
+      facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(pageUrl)}`,
+      linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(pageUrl)}`,
+      whatsapp: `https://wa.me/?text=${encodeURIComponent(title + ' ' + pageUrl)}`
+    };
+    if (links[platform]) {
+      window.open(links[platform], '_blank');
+    }
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="elastic-effect"
@@ -50,7 +73,7 @@ export default function LandingPage() {
             { text: "View Rankings", href: "#power-stats" }
           ]}
           buttonAnimation="slide-up"
-          imageSrc="http://img.b2bpic.net/free-vector/abstract-modern-technology-with-sphere-glowing-particles_1048-12742.jpg"
+          imageSrc="http://img.b2bpic.net/free-vector/abstract-modern-technology-with-sphere-glowing-particles_1048-12742.jpg?_wi=2"
           imageAlt="Glowing energy core with kinetic cyan aura"
           showDimOverlay={false}
           showBlur={true}
@@ -121,13 +144,13 @@ export default function LandingPage() {
           tagAnimation="blur-reveal"
           products={[
             {
-              id: "cosplay-1",              name: "Iconic Warrior",              price: "Premium",              variant: "Convention Debut",              imageSrc: "http://img.b2bpic.net/free-photo/young-girl-with-pink-hairs-street-style-outfits_114579-17694.jpg",              imageAlt: "Professional cosplay costume premium tier"
+              id: "cosplay-1",              name: "Iconic Warrior",              price: "Premium",              variant: "Convention Debut",              imageSrc: "http://img.b2bpic.net/free-photo/young-girl-with-pink-hairs-street-style-outfits_114579-17694.jpg?_wi=2",              imageAlt: "Professional cosplay costume premium tier"
             },
             {
-              id: "cosplay-2",              name: "Battle Mage",              price: "Elite",              variant: "Championship Ready",              imageSrc: "http://img.b2bpic.net/free-photo/blondish-girl-holding-chalkboard_23-2147925908.jpg",              imageAlt: "Battle mage cosplay armor detail"
+              id: "cosplay-2",              name: "Battle Mage",              price: "Elite",              variant: "Championship Ready",              imageSrc: "http://img.b2bpic.net/free-photo/blondish-girl-holding-chalkboard_23-2147925908.jpg?_wi=2",              imageAlt: "Battle mage cosplay armor detail"
             },
             {
-              id: "cosplay-3",              name: "Mystic Guardian",              price: "Master",              variant: "Award Winner",              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blonde-woman-blue-light_23-2149478939.jpg",              imageAlt: "Mystic guardian advanced cosplay"
+              id: "cosplay-3",              name: "Mystic Guardian",              price: "Master",              variant: "Award Winner",              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blonde-woman-blue-light_23-2149478939.jpg?_wi=2",              imageAlt: "Mystic guardian advanced cosplay"
             }
           ]}
           gridVariant="bento-grid"
@@ -162,22 +185,22 @@ export default function LandingPage() {
           tagAnimation="blur-reveal"
           testimonials={[
             {
-              id: "testimonial-1",              name: "Rishi Kumar",              handle: "@AnimeTactician",              testimonial: "The tournament structure is absolutely insane. Finally, a platform that treats anime fandom with the competitive rigor it deserves. OAC changed my life.",              imageSrc: "http://img.b2bpic.net/free-photo/young-woman-looking-smiling-grey-t-shirt-front-view_176474-16115.jpg",              imageAlt: "Rishi Kumar community member"
+              id: "testimonial-1",              name: "Rishi Kumar",              handle: "@AnimeTactician",              testimonial: "The tournament structure is absolutely insane. Finally, a platform that treats anime fandom with the competitive rigor it deserves. OAC changed my life.",              imageSrc: "http://img.b2bpic.net/free-photo/young-woman-looking-smiling-grey-t-shirt-front-view_176474-16115.jpg?_wi=2",              imageAlt: "Rishi Kumar community member"
             },
             {
-              id: "testimonial-2",              name: "Priya Sharma",              handle: "@CosplayMaster",              testimonial: "The gallery system celebrates cosplay artistry at a level I've never seen before. The validation and community support here is unmatched.",              imageSrc: "http://img.b2bpic.net/free-photo/man-having-video-call-with-his-family_23-2149120896.jpg",              imageAlt: "Priya Sharma cosplay showcase"
+              id: "testimonial-2",              name: "Priya Sharma",              handle: "@CosplayMaster",              testimonial: "The gallery system celebrates cosplay artistry at a level I've never seen before. The validation and community support here is unmatched.",              imageSrc: "http://img.b2bpic.net/free-photo/man-having-video-call-with-his-family_23-2149120896.jpg?_wi=2",              imageAlt: "Priya Sharma cosplay showcase"
             },
             {
-              id: "testimonial-3",              name: "Arjun Singh",              handle: "@PowerAnalyst",              testimonial: "The power level dashboard is genius. Tracking achievement metrics makes the whole experience feel like leveling up in an actual RPG.",              imageSrc: "http://img.b2bpic.net/free-photo/young-adult-pressing-buzzer-button_23-2149586556.jpg",              imageAlt: "Arjun Singh analytics enthusiast"
+              id: "testimonial-3",              name: "Arjun Singh",              handle: "@PowerAnalyst",              testimonial: "The power level dashboard is genius. Tracking achievement metrics makes the whole experience feel like leveling up in an actual RPG.",              imageSrc: "http://img.b2bpic.net/free-photo/young-adult-pressing-buzzer-button_23-2149586556.jpg?_wi=2",              imageAlt: "Arjun Singh analytics enthusiast"
             },
             {
-              id: "testimonial-4",              name: "Nisha Patel",              handle: "@CommunityOrganizer",              testimonial: "Being part of OAC means being part of something revolutionary. The forum discussions go so deep—truly intellectual anime discourse.",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiling-handsome-man_23-2148398270.jpg",              imageAlt: "Nisha Patel community organizer"
+              id: "testimonial-4",              name: "Nisha Patel",              handle: "@CommunityOrganizer",              testimonial: "Being part of OAC means being part of something revolutionary. The forum discussions go so deep—truly intellectual anime discourse.",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiling-handsome-man_23-2148398270.jpg?_wi=2",              imageAlt: "Nisha Patel community organizer"
             },
             {
-              id: "testimonial-5",              name: "Karan Gupta",              handle: "@FanEnthusiast",              testimonial: "OAC is where anime passion meets cutting-edge technology. The experience feels premium every single time I visit.",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-attractive-young-interracial-couple-with-white-flower-bouquet_23-2148151941.jpg",              imageAlt: "Karan Gupta fan enthusiast"
+              id: "testimonial-5",              name: "Karan Gupta",              handle: "@FanEnthusiast",              testimonial: "OAC is where anime passion meets cutting-edge technology. The experience feels premium every single time I visit.",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-attractive-young-interracial-couple-with-white-flower-bouquet_23-2148151941.jpg?_wi=2",              imageAlt: "Karan Gupta fan enthusiast"
             },
             {
-              id: "testimonial-6",              name: "Deepika Rao",              handle: "@OdishaAnimeClubFounder",              testimonial: "Watching this community grow from a dream into a thriving 3K+ member powerhouse has been the most rewarding experience of my life.",              imageSrc: "http://img.b2bpic.net/free-photo/business-woman-vening-street_1303-3837.jpg",              imageAlt: "Deepika Rao founder"
+              id: "testimonial-6",              name: "Deepika Rao",              handle: "@OdishaAnimeClubFounder",              testimonial: "Watching this community grow from a dream into a thriving 3K+ member powerhouse has been the most rewarding experience of my life.",              imageSrc: "http://img.b2bpic.net/free-photo/business-woman-vening-street_1303-3837.jpg?_wi=2",              imageAlt: "Deepika Rao founder"
             }
           ]}
           animationType="blur-reveal"
@@ -189,6 +212,68 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="newsletter" data-section="newsletter" className="transition-all duration-500 ease-out">
+        <ContactForm
+          title="Join the Elite Circle"
+          description="Subscribe to receive exclusive tournament announcements, power-level updates, and community insider content delivered to your arena."
+          tag="Newsletter"
+          tagIcon={Mail}
+          inputPlaceholder="Enter your power signature"
+          buttonText="Ascend Now"
+          termsText="By subscribing you're confirming that you agree to receive our power-boosting announcements and community updates. You can unsubscribe anytime."
+          onSubmit={handleNewsletterSubmit}
+          centered={true}
+          useInvertedBackground={false}
+          className={`transform transition-all duration-700 ${isNewsletterSubmitted ? 'scale-105 opacity-100' : 'scale-100'}`}
+        />
+      </div>
+
+      <div id="social-sharing" data-section="social-sharing" className="w-full py-16 flex items-center justify-center">
+        <div className="max-w-6xl mx-auto px-4 w-full">
+          <div className="flex flex-col md:flex-row items-center justify-center gap-4 md:gap-8 flex-wrap">
+            <p className="text-center text-sm md:text-base font-medium opacity-70 w-full md:w-auto">Share the Spirit Bomb Initiative:</p>
+            <div className="flex items-center gap-3 md:gap-4 flex-wrap justify-center">
+              <button
+                onClick={() => shareOnSocial('twitter')}
+                className="p-2.5 md:p-3 rounded-lg hover:opacity-80 transition-opacity duration-300 flex items-center gap-2 text-sm md:text-base"
+                aria-label="Share on Twitter"
+                title="Share on Twitter"
+              >
+                <Share2 size={18} />
+                <span className="hidden sm:inline">Twitter</span>
+              </button>
+              <button
+                onClick={() => shareOnSocial('facebook')}
+                className="p-2.5 md:p-3 rounded-lg hover:opacity-80 transition-opacity duration-300 flex items-center gap-2 text-sm md:text-base"
+                aria-label="Share on Facebook"
+                title="Share on Facebook"
+              >
+                <Share2 size={18} />
+                <span className="hidden sm:inline">Facebook</span>
+              </button>
+              <button
+                onClick={() => shareOnSocial('linkedin')}
+                className="p-2.5 md:p-3 rounded-lg hover:opacity-80 transition-opacity duration-300 flex items-center gap-2 text-sm md:text-base"
+                aria-label="Share on LinkedIn"
+                title="Share on LinkedIn"
+              >
+                <Share2 size={18} />
+                <span className="hidden sm:inline">LinkedIn</span>
+              </button>
+              <button
+                onClick={() => shareOnSocial('whatsapp')}
+                className="p-2.5 md:p-3 rounded-lg hover:opacity-80 transition-opacity duration-300 flex items-center gap-2 text-sm md:text-base"
+                aria-label="Share on WhatsApp"
+                title="Share on WhatsApp"
+              >
+                <Share2 size={18} />
+                <span className="hidden sm:inline">WhatsApp</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div id="footer" data-section="footer">
         <FooterLogoReveal
           logoText="OAC Command Center"

src/app/product/[id]/page.tsx

@@ -0,0 +1,107 @@
+"use client"
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import HeroOverlay from '@/components/sections/hero/HeroOverlay';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import { ShoppingCart, ChevronLeft } from 'lucide-react';
+import { useParams } from 'next/navigation';
+
+const productData: { [key: string]: any } = {
+  "1": {
+    id: "1",    name: "Power Hoodie",    price: "$49.99",    description: "Premium cotton blend hoodie with embroidered OAC logo. Perfect for representing your power level in style.",    imageSrc: "http://img.b2bpic.net/free-photo/young-girl-with-pink-hairs-street-style-outfits_114579-17694.jpg",    imageAlt: "Power Hoodie Premium Cotton Blend",    variant: "Premium Cotton Blend",    details: "100% comfort, 80% cotton, 20% polyester. Available in XS to 3XL."
+  },
+  "2": {
+    id: "2",    name: "Elite T-Shirt",    price: "$24.99",    description: "Limited edition graphic tee featuring exclusive OAC tournament artwork.",    imageSrc: "http://img.b2bpic.net/free-photo/blondish-girl-holding-chalkboard_23-2147925908.jpg",    imageAlt: "Elite T-Shirt Limited Edition",    variant: "Limited Edition Print",    details: "100% certified organic cotton. Sustainable production. Unisex sizing."
+  },
+  "3": {
+    id: "3",    name: "Champion Cap",    price: "$19.99",    description: "Adjustable baseball cap with embroidered champion badge. Show off your elite status.",    imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blonde-woman-blue-light_23-2149478939.jpg",    imageAlt: "Champion Cap Adjustable Fit",    variant: "Adjustable Fit",    details: "Breathable mesh back. Curved bill. Adjustable snapback closure."
+  }
+};
+
+export default function ProductPage() {
+  const params = useParams();
+  const productId = params?.id as string;
+  const product = productData[productId] || productData["1"];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="mediumSizeLargeTitles"
+      background="noiseDiagonalGradient"
+      cardStyle="gradient-radial"
+      primaryButtonStyle="shadow"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          brandName="OAC"
+          navItems={[
+            { name: "Shop", id: "shop" },
+            { name: "Tournament", id: "tournament" },
+            { name: "Gallery", id: "gallery" },
+            { name: "Community", id: "community" },
+            { name: "Power Stats", id: "power-stats" }
+          ]}
+          button={{ text: "Cart", href: "/cart" }}
+        />
+      </div>
+
+      <div id="product" data-section="product">
+        <HeroOverlay
+          title={product.name}
+          description={product.description}
+          tag={product.variant}
+          tagIcon={ShoppingCart}
+          tagAnimation="blur-reveal"
+          buttons={[
+            { text: "Add to Cart", href: "/cart" },
+            { text: "Back to Shop", href: "/shop" }
+          ]}
+          buttonAnimation="slide-up"
+          imageSrc={product.imageSrc}
+          imageAlt={product.imageAlt}
+          showDimOverlay={false}
+          showBlur={true}
+          ariaLabel={`${product.name} Product Details`}
+        />
+      </div>
+
+      <div id="details" data-section="details">
+        <div className="bg-card border border-foreground/10 rounded-lg p-8 mx-auto max-w-2xl">
+          <div className="space-y-6">
+            <div>
+              <h2 className="text-2xl font-bold mb-2">{product.name}</h2>
+              <p className="text-xl font-semibold text-primary-cta mb-4">{product.price}</p>
+            </div>
+            <div>
+              <h3 className="text-lg font-semibold mb-2">Product Details</h3>
+              <p className="text-foreground/80">{product.details}</p>
+            </div>
+            <div className="flex gap-4">
+              <button className="flex-1 bg-primary-cta text-white py-3 rounded-lg font-semibold hover:opacity-90">
+                Add to Cart
+              </button>
+              <button className="flex-1 border border-foreground/20 py-3 rounded-lg font-semibold hover:bg-card">
+                Continue Shopping
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal
+          logoText="OAC Command Center"
+          leftLink={{ text: "Shop", href: "/shop" }}
+          rightLink={{ text: "Cart", href: "/cart" }}
+          ariaLabel="Footer Navigation"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/shop/page.tsx

@@ -0,0 +1,113 @@
+"use client"
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import HeroOverlay from '@/components/sections/hero/HeroOverlay';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import { ShoppingCart } from 'lucide-react';
+
+export default function ShopPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="mediumSizeLargeTitles"
+      background="noiseDiagonalGradient"
+      cardStyle="gradient-radial"
+      primaryButtonStyle="shadow"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          brandName="OAC"
+          navItems={[
+            { name: "Shop", id: "catalog" },
+            { name: "Tournament", id: "tournament" },
+            { name: "Gallery", id: "gallery" },
+            { name: "Community", id: "community" },
+            { name: "Power Stats", id: "power-stats" }
+          ]}
+          button={{ text: "Cart", href: "/cart" }}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroOverlay
+          title="Merchandise Store"
+          description="Discover premium official merchandise from Odisha Anime Club. From apparel to collectibles, find everything you need to represent your power level."
+          tag="Shop Now"
+          tagIcon={ShoppingCart}
+          tagAnimation="blur-reveal"
+          buttons={[
+            { text: "Browse Catalog", href: "#catalog" },
+            { text: "View Cart", href: "/cart" }
+          ]}
+          buttonAnimation="slide-up"
+          imageSrc="http://img.b2bpic.net/free-vector/abstract-modern-technology-with-sphere-glowing-particles_1048-12742.jpg"
+          imageAlt="Merchandise store showcase"
+          showDimOverlay={false}
+          showBlur={true}
+          ariaLabel="Shop Hero Section"
+        />
+      </div>
+
+      <div id="catalog" data-section="catalog">
+        <ProductCardFour
+          title="Complete Merchandise Catalog"
+          description="Explore our full collection of premium anime merchandise. Every product is carefully curated and verified for authenticity and quality."
+          tag="All Products"
+          tagIcon={ShoppingCart}
+          tagAnimation="blur-reveal"
+          products={[
+            {
+              id: "merch-hoodie",              name: "Power Hoodie",              price: "$49.99",              variant: "Premium Cotton Blend",              imageSrc: "http://img.b2bpic.net/free-photo/young-girl-with-pink-hairs-street-style-outfits_114579-17694.jpg",              imageAlt: "Power Hoodie Premium Cotton Blend"
+            },
+            {
+              id: "merch-tshirt",              name: "Elite T-Shirt",              price: "$24.99",              variant: "Limited Edition Print",              imageSrc: "http://img.b2bpic.net/free-photo/blondish-girl-holding-chalkboard_23-2147925908.jpg",              imageAlt: "Elite T-Shirt Limited Edition"
+            },
+            {
+              id: "merch-cap",              name: "Champion Cap",              price: "$19.99",              variant: "Adjustable Fit",              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blonde-woman-blue-light_23-2149478939.jpg",              imageAlt: "Champion Cap Adjustable Fit"
+            },
+            {
+              id: "merch-badges",              name: "Tournament Badge Set",              price: "$14.99",              variant: "Collectible 5-Piece Set",              imageSrc: "http://img.b2bpic.net/free-vector/video-game-characters-tier-list_742173-3466.jpg?_wi=1",              imageAlt: "Tournament Badge Collectible Set"
+            },
+            {
+              id: "merch-poster",              name: "Power Level Poster",              price: "$9.99",              variant: "A3 Size 300gsm Paper",              imageSrc: "http://img.b2bpic.net/free-photo/young-woman-looking-smiling-grey-t-shirt-front-view_176474-16115.jpg",              imageAlt: "Power Level Poster A3 Size"
+            },
+            {
+              id: "merch-bottle",              name: "Signature Water Bottle",              price: "$34.99",              variant: "Double-Wall Insulated",              imageSrc: "http://img.b2bpic.net/free-photo/man-having-video-call-with-his-family_23-2149120896.jpg",              imageAlt: "Signature Water Bottle Double-Wall Insulated"
+            },
+            {
+              id: "merch-mug",              name: "Elite Mug",              price: "$12.99",              variant: "Ceramic 12oz",              imageSrc: "http://img.b2bpic.net/free-photo/young-adult-pressing-buzzer-button_23-2149586556.jpg",              imageAlt: "Elite Mug Ceramic 12oz"
+            },
+            {
+              id: "merch-keychain",              name: "Power Keychain",              price: "$7.99",              variant: "Metal Alloy",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiling-handsome-man_23-2148398270.jpg",              imageAlt: "Power Keychain Metal Alloy"
+            },
+            {
+              id: "merch-pin",              name: "Enamel Pin Collection",              price: "$11.99",              variant: "Limited 3-Pack",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-attractive-young-interracial-couple-with-white-flower-bouquet_23-2148151941.jpg",              imageAlt: "Enamel Pin Collection Limited 3-Pack"
+            }
+          ]}
+          gridVariant="four-items-2x2-equal-grid"
+          animationType="scale-rotate"
+          textboxLayout="inline-image"
+          useInvertedBackground={false}
+          uniformGridCustomHeightClasses="min-h-95 2xl:min-h-105"
+          ariaLabel="Product Catalog Section"
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal
+          logoText="OAC Command Center"
+          leftLink={{ text: "Home", href: "/" }}
+          rightLink={{ text: "Cart", href: "/cart" }}
+          ariaLabel="Footer Navigation"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #000000;
-  --card: #1f1f40;
-  --foreground: #ffffff;
-  --primary-cta: #ffffff;
+  --background: #0a0e27;
+  --card: #141829;
+  --foreground: #f0f0f0;
+  --primary-cta: #00d4ff;
   --primary-cta-text: #0a051a;
-  --secondary-cta: #0d0d2b;
+  --secondary-cta: #7c3aed;
   --secondary-cta-text: #d4d4f6;
-  --accent: #3d2880;
-  --background-accent: #663cff;
+  --accent: #00ffff;
+  --background-accent: #1a1f3a;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);