Merge version_2 into main

Merge version_2 into main

src/app/page.tsx

@@ -2,19 +2,33 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
+import { useState } from "react";
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FaqDouble from '@/components/sections/faq/FaqDouble';
 import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
 import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
+import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
 import ProductCardThree from '@/components/sections/product/ProductCardThree';
 import SplitAbout from '@/components/sections/about/SplitAbout';
 import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
+import ProductCart from '@/components/ecommerce/cart/ProductCart';
 import { Box } from "lucide-react";
 
 export default function LandingPage() {
+  const [cartOpen, setCartOpen] = useState(false);
+  const [cartItems, setCartItems] = useState<any[]>([]);
+
+  const addToCart = (product: any) => {
+    setCartItems(prev => {
+      const exists = prev.find(i => i.id === product.id);
+      if (exists) return prev.map(i => i.id === product.id ? { ...i, quantity: i.quantity + 1 } : i);
+      return [...prev, { ...product, quantity: 1 }];
+    });
+    setCartOpen(true);
+  };
+
   return (
     <ThemeProvider
         defaultButtonVariant="bounce-effect"
@@ -29,6 +43,16 @@ export default function LandingPage() {
         headingFontWeight="semibold"
     >
       <ReactLenis root>
+        <ProductCart 
+            isOpen={cartOpen} 
+            onClose={() => setCartOpen(false)} 
+            items={cartItems}
+            total={`$${cartItems.reduce((acc, item) => acc + (parseFloat(item.price.replace('$', '')) || 0) * item.quantity, 0).toFixed(2)}`}
+            onRemove={(id) => setCartItems(prev => prev.filter(i => i.id !== id))}
+            onQuantityChange={(id, qty) => setCartItems(prev => prev.map(i => i.id === id ? {...i, quantity: qty} : i))}
+            buttons={[{ text: "Checkout", onClick: () => console.log("Checkout") }]}
+        />
+
   <div id="nav" data-section="nav">
       <NavbarStyleCentered
       navItems={[
@@ -36,6 +60,7 @@ export default function LandingPage() {
         { name: "About", id: "about" },
         { name: "Games", id: "features" },
         { name: "Categories", id: "products" },
+        { name: "Pricing", id: "pricing" },
         { name: "FAQ", id: "faq" },
         { name: "Contact", id: "contact" },
       ]}
@@ -99,12 +124,8 @@ export default function LandingPage() {
       gridVariant="three-columns-all-equal-width"
       useInvertedBackground={false}
       products={[
-        { id: "p1", name: "Galaxy Strider", price: "Free", imageSrc: "http://img.b2bpic.net/free-photo/3d-fantasy-scene_23-2151128045.jpg" },
-        { id: "p2", name: "Turbo Drift", price: "Free", imageSrc: "http://img.b2bpic.net/free-photo/cyberpunk-city-street-night-with-neon-lights-futuristic-aesthetic_23-2151488767.jpg" },
-        { id: "p3", name: "Tactics Grid", price: "Free", imageSrc: "http://img.b2bpic.net/free-photo/still-life-red-thread-connection_23-2149870851.jpg" },
-        { id: "p4", name: "Void Hunter", price: "Free", imageSrc: "http://img.b2bpic.net/free-photo/galaxy-night-view_23-2148895306.jpg" },
-        { id: "p5", name: "Blocks Reloaded", price: "Free", imageSrc: "http://img.b2bpic.net/free-photo/paper-craft-art-jigsaw-puzzle-piece_53876-75076.jpg" },
-        { id: "p6", name: "Mana Quest", price: "Free", imageSrc: "http://img.b2bpic.net/free-photo/view-3d-zodiac-astrology-sign_23-2150473526.jpg" },
+        { id: "p1", name: "Galaxy Strider", price: "Free", imageSrc: "http://img.b2bpic.net/free-photo/3d-fantasy-scene_23-2151128045.jpg?_wi=1", onProductClick: () => addToCart({ id: "p1", name: "Galaxy Strider", price: "Free", imageSrc: "http://img.b2bpic.net/free-photo/3d-fantasy-scene_23-2151128045.jpg?_wi=2" }) },
+        { id: "p2", name: "Turbo Drift", price: "Free", imageSrc: "http://img.b2bpic.net/free-photo/cyberpunk-city-street-night-with-neon-lights-futuristic-aesthetic_23-2151488767.jpg?_wi=1", onProductClick: () => addToCart({ id: "p2", name: "Turbo Drift", price: "Free", imageSrc: "http://img.b2bpic.net/free-photo/cyberpunk-city-street-night-with-neon-lights-futuristic-aesthetic_23-2151488767.jpg?_wi=2" }) },
       ]}
       title="Discover Games"
       description="Explore thousands of titles across diverse genres."
@@ -112,16 +133,16 @@ export default function LandingPage() {
   </div>
 
   <div id="pricing" data-section="pricing">
-      <PricingCardOne
+      <PricingCardNine
       animationType="slide-up"
       textboxLayout="split"
       useInvertedBackground={true}
+      title="Game Pricing Models"
+      description="Choose the right way to play and support your favorite creators."
       plans={[
-        { id: "basic", badge: "Essential", price: "$0/mo", subtitle: "Play all free titles", features: ["Ad-free experience", "Basic profile customisation"] },
-        { id: "pro", badge: "Elite", price: "$4.99/mo", subtitle: "Everything in Basic plus", features: ["Exclusive beta games", "Pro tournament entry", "24/7 Priority access"] },
+        { id: "free", title: "Free to Play", price: "$0", period: "forever", features: ["Access to base library", "Ad-supported", "Community badges"], button: { text: "Start Playing" } },
+        { id: "pro", title: "Premium Access", price: "$4.99", period: "/mo", features: ["Exclusive early access", "Ad-free portal", "Private server hosting", "Premium community rank"], button: { text: "Upgrade Now" } },
       ]}
-      title="Unlock Premium Access"
-      description="While most games are free, level up your experience with our perks."
     />
   </div>
 
@@ -133,9 +154,6 @@ export default function LandingPage() {
       testimonials={[
         { id: "1", name: "Alex R.", handle: "@alexgamer", testimonial: "The best selection of free games.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-sporty-man-with-wrist-bandage-wearing-headphones-pretending-running-isolated-pink-wall_141793-78519.jpg" },
         { id: "2", name: "Jamie L.", handle: "@jamieplays", testimonial: "Seamless performance.", imageSrc: "http://img.b2bpic.net/free-photo/videographer-smiling-camera-working-computer-editing-video-footage-audio-app-sitting-mo_482257-2649.jpg" },
-        { id: "3", name: "Taylor S.", handle: "@tayplays", testimonial: "Love the curated lists.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-rgb-lit-studio-streaming-multiplayer-game_482257-103579.jpg" },
-        { id: "4", name: "Morgan D.", handle: "@morgangamer", testimonial: "Great community variety.", imageSrc: "http://img.b2bpic.net/free-photo/skilled-businessman-his-office-desk-working-report-writing-data-analysis-deadline_482257-133346.jpg" },
-        { id: "5", name: "Chris B.", handle: "@chrisplays", testimonial: "Zero issues, pure gaming.", imageSrc: "http://img.b2bpic.net/free-photo/male-athlete-standing-with-basketball-plastic-bottle-soft-blue-background_23-2148203716.jpg" },
       ]}
       title="Player Voices"
       description="Joining thousands of happy gamers."
@@ -148,8 +166,7 @@ export default function LandingPage() {
       useInvertedBackground={true}
       faqs={[
         { id: "f1", title: "Are these games really free?", content: "Yes, our platform is ad-supported." },
-        { id: "f2", title: "Do I need to download games?", content: "Never, play in browser." },
-        { id: "f3", title: "Is mobile play supported?", content: "Yes, fully responsive." },
+        { id: "f2", title: "How do I purchase premium?", content: "Click the Upgrade Now button on our pricing section to use our secure checkout." },
       ]}
       title="Frequently Asked Questions"
       description="Got questions? We've got answers."
@@ -176,7 +193,7 @@ export default function LandingPage() {
       imageSrc="http://img.b2bpic.net/free-photo/beautiful-optical-fiber-detail_23-2149182559.jpg"
       logoText="GameVault"
       columns={[
-        { title: "Platform", items: [{ label: "About", href: "#about" }, { label: "Games", href: "#features" }] },
+        { title: "Platform", items: [{ label: "About", href: "#about" }, { label: "Games", href: "#features" }, { label: "Pricing", href: "#pricing" }] },
         { title: "Resources", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] },
       ]}
     />
@@ -184,4 +201,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}