Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -2,16 +2,17 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FaqDouble from '@/components/sections/faq/FaqDouble';
+import { Star, Shield, Award, Briefcase } from "lucide-react";
+import ContactSplit from '@/components/sections/contact/ContactSplit';
+import FaqSplitText from '@/components/sections/faq/FaqSplitText';
 import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import FooterCard from '@/components/sections/footer/FooterCard';
 import HeroBillboard from '@/components/sections/hero/HeroBillboard';
-import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
+import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import ProductCardThree from '@/components/sections/product/ProductCardThree';
-import TeamCardSix from '@/components/sections/team/TeamCardSix';
-import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
+import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
 
 export default function LandingPage() {
   return (
@@ -32,21 +33,13 @@ export default function LandingPage() {
       <NavbarLayoutFloatingOverlay
       navItems={[
         {
-          name: "Home",
-          id: "hero",
-        },
+          name: "Home",          id: "hero"},
         {
-          name: "Games",
-          id: "games",
-        },
+          name: "Games",          id: "games"},
         {
-          name: "Team",
-          id: "team",
-        },
+          name: "Team",          id: "team"},
         {
-          name: "Contact",
-          id: "contact",
-        },
+          name: "Contact",          id: "contact"},
       ]}
       brandName="IndieCore Studios"
     />
@@ -55,62 +48,39 @@ export default function LandingPage() {
   <div id="hero" data-section="hero">
       <HeroBillboard
       background={{
-        variant: "gradient-bars",
-      }}
+        variant: "gradient-bars"}}
       title="Crafting Immersive Worlds"
       description="IndieCore Studios pushes the boundaries of storytelling, mechanics, and visual fidelity. Experience the future of interactive entertainment."
       buttons={[
         {
-          text: "View Our Games",
-          href: "#games",
-        },
+          text: "View Our Games",          href: "#games"},
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/retro-3d-shapes-vaporwave-style_23-2148981119.jpg"
       imageAlt="IndieCore Studios featured cinematic scene"
       mediaAnimation="slide-up"
       avatars={[
         {
-          src: "http://img.b2bpic.net/free-photo/neon-hologram-tiger_23-2151558646.jpg",
-          alt: "Neon hologram of tiger",
-        },
+          src: "http://img.b2bpic.net/free-photo/neon-hologram-tiger_23-2151558646.jpg",          alt: "Neon hologram of tiger"},
         {
-          src: "http://img.b2bpic.net/free-photo/cyberpunk-city-street-night-with-neon-lights-futuristic-aesthetic_23-2151488736.jpg",
-          alt: "Cyberpunk city street at night with neon lights and futuristic aesthetic",
-        },
+          src: "http://img.b2bpic.net/free-photo/cyberpunk-city-street-night-with-neon-lights-futuristic-aesthetic_23-2151488736.jpg",          alt: "Cyberpunk city street at night with neon lights and futuristic aesthetic"},
         {
-          src: "http://img.b2bpic.net/free-photo/cyberpunk-boy-illustration_23-2151728183.jpg",
-          alt: "Cyberpunk boy illustration",
-        },
+          src: "http://img.b2bpic.net/free-photo/cyberpunk-boy-illustration_23-2151728183.jpg",          alt: "Cyberpunk boy illustration"},
         {
-          src: "http://img.b2bpic.net/free-photo/cyberpunk-city-street-night-with-neon-lights-futuristic-aesthetic_23-2151488741.jpg",
-          alt: "Cyberpunk city street at night with neon lights and futuristic aesthetic",
-        },
+          src: "http://img.b2bpic.net/free-photo/cyberpunk-city-street-night-with-neon-lights-futuristic-aesthetic_23-2151488741.jpg",          alt: "Cyberpunk city street at night with neon lights and futuristic aesthetic"},
         {
-          src: "http://img.b2bpic.net/free-photo/bigfoot-represented-neon-glow_23-2151322946.jpg",
-          alt: "Bigfoot represented in neon glow",
-        },
+          src: "http://img.b2bpic.net/free-photo/bigfoot-represented-neon-glow_23-2151322946.jpg",          alt: "Bigfoot represented in neon glow"},
       ]}
       marqueeItems={[
         {
-          type: "text",
-          text: "Innovation",
-        },
+          type: "text",          text: "Innovation"},
         {
-          type: "text",
-          text: "Storytelling",
-        },
+          type: "text",          text: "Storytelling"},
         {
-          type: "text",
-          text: "Performance",
-        },
+          type: "text",          text: "Performance"},
         {
-          type: "text",
-          text: "Community",
-        },
+          type: "text",          text: "Community"},
         {
-          type: "text",
-          text: "Excellence",
-        },
+          type: "text",          text: "Excellence"},
       ]}
     />
   </div>
@@ -122,26 +92,11 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          id: "1",
-          title: "Narrative Depth",
-          subtitle: "Story-driven campaigns",
-          category: "Creative",
-          value: "20+",
-        },
+          id: "1",          title: "Narrative Depth",          subtitle: "Story-driven campaigns",          category: "Creative",          value: "20+"},
         {
-          id: "2",
-          title: "Engine Performance",
-          subtitle: "High fidelity rendering",
-          category: "Technical",
-          value: "120fps",
-        },
+          id: "2",          title: "Engine Performance",          subtitle: "High fidelity rendering",          category: "Technical",          value: "120fps"},
         {
-          id: "3",
-          title: "Community Focus",
-          subtitle: "Engaging player base",
-          category: "Community",
-          value: "1M+",
-        },
+          id: "3",          title: "Community Focus",          subtitle: "Engaging player base",          category: "Community",          value: "1M+"},
       ]}
       title="Studio Pillars"
       description="Our core focus areas that define every game we build."
@@ -149,48 +104,18 @@ export default function LandingPage() {
   </div>
 
   <div id="games" data-section="games">
-      <ProductCardThree
+      <ProductCardFour
       animationType="slide-up"
       textboxLayout="default"
       gridVariant="three-columns-all-equal-width"
       useInvertedBackground={true}
       products={[
         {
-          id: "g1",
-          name: "Neon Shadows",
-          price: "Steam Store",
-          imageSrc: "http://img.b2bpic.net/free-photo/dark-fantasy-creature-scene_23-2151136073.jpg",
-        },
+          id: "g1",          name: "Neon Shadows",          price: "Play Now",          variant: "Action",          imageSrc: "http://img.b2bpic.net/free-photo/dark-fantasy-creature-scene_23-2151136073.jpg"},
         {
-          id: "g2",
-          name: "Cyber Reign",
-          price: "Steam Store",
-          imageSrc: "http://img.b2bpic.net/free-photo/8-bits-objects-gaming-assets_23-2151143643.jpg",
-        },
+          id: "g2",          name: "Cyber Reign",          price: "Play Now",          variant: "RPG",          imageSrc: "http://img.b2bpic.net/free-photo/8-bits-objects-gaming-assets_23-2151143643.jpg"},
         {
-          id: "g3",
-          name: "Void Wanderer",
-          price: "Steam Store",
-          imageSrc: "http://img.b2bpic.net/free-photo/people-white-clothes-stand-rock-by-sea-dusk-looking-into-distance-illustration_456031-16.jpg",
-        },
-        {
-          id: "g4",
-          name: "Red Sector",
-          price: "Steam Store",
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-people-with-medical-masks-pandemic_23-2148748975.jpg",
-        },
-        {
-          id: "g5",
-          name: "Abyss Keeper",
-          price: "Steam Store",
-          imageSrc: "http://img.b2bpic.net/free-photo/child-magic-school-learning-spells_23-2150170074.jpg",
-        },
-        {
-          id: "g6",
-          name: "Midnight Echo",
-          price: "Steam Store",
-          imageSrc: "http://img.b2bpic.net/free-photo/haunted-house-gothic-style_23-2151626657.jpg",
-        },
+          id: "g3",          name: "Void Wanderer",          price: "Play Now",          variant: "Adventure",          imageSrc: "http://img.b2bpic.net/free-photo/people-white-clothes-stand-rock-by-sea-dusk-looking-into-distance-illustration_456031-16.jpg"},
       ]}
       title="Featured Titles"
       description="Explore our library of critically acclaimed PC and console games."
@@ -198,38 +123,17 @@ export default function LandingPage() {
   </div>
 
   <div id="metrics" data-section="metrics">
-      <MetricCardSeven
+      <MetricCardThree
       animationType="slide-up"
       textboxLayout="split"
       useInvertedBackground={false}
       metrics={[
         {
-          id: "m1",
-          value: "15+",
-          title: "Game Releases",
-          items: [
-            "Successfully launched titles",
-            "Cross-platform support",
-          ],
-        },
+          id: "m1",          title: "Game Releases",          value: "15+", icon: Award},
         {
-          id: "m2",
-          value: "5M+",
-          title: "Happy Players",
-          items: [
-            "Monthly active users",
-            "Global player community",
-          ],
-        },
+          id: "m2",          title: "Happy Players",          value: "5M+", icon: Star},
         {
-          id: "m3",
-          value: "12",
-          title: "Industry Awards",
-          items: [
-            "Best Indie Studio",
-            "Design Excellence",
-          ],
-        },
+          id: "m3",          title: "Industry Awards",          value: "12", icon: Shield},
       ]}
       title="Studio Achievements"
       description="Our impact on the gaming landscape since 2018."
@@ -237,29 +141,18 @@ export default function LandingPage() {
   </div>
 
   <div id="team" data-section="team">
-      <TeamCardSix
+      <TeamCardEleven
       animationType="slide-up"
       textboxLayout="split"
-      gridVariant="three-columns-all-equal-width"
       useInvertedBackground={true}
-      members={[
+      groups={[
         {
-          id: "t1",
-          name: "Alex Rivers",
-          role: "Creative Director",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-posing-with-avantgarde-head-piece_23-2149020818.jpg",
-        },
-        {
-          id: "t2",
-          name: "Jordan P",
-          role: "Lead Programmer",
-          imageSrc: "http://img.b2bpic.net/free-photo/streamer-rgb-lit-studio-chatting-with-audience_482257-122959.jpg",
-        },
-        {
-          id: "t3",
-          name: "Sam V",
-          role: "Art Lead",
-          imageSrc: "http://img.b2bpic.net/free-photo/parenting-content-creator_23-2151488622.jpg",
+          id: "g1",          groupTitle: "Leadership",          members: [
+            {
+              id: "t1",          title: "Alex Rivers",          subtitle: "Creative Director",          detail: "Driving the vision.",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-posing-with-avantgarde-head-piece_23-2149020818.jpg"},
+            {
+              id: "t2",          title: "Jordan P",          subtitle: "Lead Programmer",          detail: "Crafting the tech.",          imageSrc: "http://img.b2bpic.net/free-photo/streamer-rgb-lit-studio-chatting-with-audience_482257-122959.jpg"},
+          ],
         },
       ]}
       title="The Creators"
@@ -268,91 +161,41 @@ export default function LandingPage() {
   </div>
 
   <div id="testimonial" data-section="testimonial">
-      <TestimonialCardThirteen
+      <TestimonialCardTwo
       animationType="slide-up"
       textboxLayout="split"
       useInvertedBackground={false}
       testimonials={[
         {
-          id: "1",
-          name: "Sarah J.",
-          handle: "@gamer",
-          testimonial: "The atmosphere is unmatched.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-business-man-posing-with-crossed-arms_23-2149206526.jpg",
-        },
+          id: "1",          name: "Sarah J.",          role: "Gamer",          testimonial: "The atmosphere is unmatched.",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-business-man-posing-with-crossed-arms_23-2149206526.jpg"},
         {
-          id: "2",
-          name: "Marc T.",
-          handle: "@critique",
-          testimonial: "Deep narrative and incredible art.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-man-posing_23-2150171293.jpg",
-        },
-        {
-          id: "3",
-          name: "Elena W.",
-          handle: "@devtalk",
-          testimonial: "A must-play experience.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/focused-man-rgb-lights-lit-living-room-playing-videogames_482257-116287.jpg",
-        },
-        {
-          id: "4",
-          name: "Leo B.",
-          handle: "@playmore",
-          testimonial: "The game design is brilliant.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/upbeat-freelancer-front-digital-device_482257-124312.jpg",
-        },
-        {
-          id: "5",
-          name: "Chris K.",
-          handle: "@proplayer",
-          testimonial: "Incredible production value in every release.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/closeup-content-pretty-businesswoman-glasses_1262-1740.jpg",
-        },
+          id: "2",          name: "Marc T.",          role: "Critic",          testimonial: "Deep narrative and incredible art.",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-man-posing_23-2150171293.jpg"},
       ]}
-      showRating={true}
       title="Player Voices"
       description="What the industry and our players say about our work."
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqDouble
-      textboxLayout="split"
+      <FaqSplitText
       useInvertedBackground={true}
       faqs={[
         {
-          id: "f1",
-          title: "Do you publish third-party titles?",
-          content: "Yes, we look for high-potential indie games.",
-        },
+          id: "f1",          title: "Do you publish third-party titles?",          content: "Yes, we look for high-potential indie games."},
         {
-          id: "f2",
-          title: "Where can we apply for jobs?",
-          content: "Check our Careers page or email us.",
-        },
-        {
-          id: "f3",
-          title: "Can I stream your games?",
-          content: "You are free to stream all our titles!",
-        },
+          id: "f2",          title: "Where can we apply for jobs?",          content: "Check our Careers page or email us."},
       ]}
-      title="Game Dev Insights"
-      description="Common inquiries about our studio and titles."
+      sideTitle="Game Dev Insights"
+      sideDescription="Common inquiries about our studio and titles."
       faqsAnimation="slide-up"
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactCenter
+      <ContactSplit
       useInvertedBackground={false}
       background={{
-        variant: "gradient-bars",
-      }}
+        variant: "gradient-bars"}}
       tag="Get in touch"
       title="Business Inquiries"
       description="Have a game idea? Want to partner? Let's talk business."
@@ -361,19 +204,11 @@ export default function LandingPage() {
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterLogoReveal
+      <FooterCard
       logoText="IndieCore Studios"
-      leftLink={{
-        text: "Privacy Policy",
-        href: "#",
-      }}
-      rightLink={{
-        text: "Contact Us",
-        href: "#contact",
-      }}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #000000;
-  --card: #481f1f;
-  --foreground: #ffffff;
-  --primary-cta: #ffffff;
+  --background: #ffffff;
+  --card: #f9f9f9;
+  --foreground: #000000;
+  --primary-cta: #FFD700;
   --primary-cta-text: #280101;
-  --secondary-cta: #361311;
+  --secondary-cta: #000000;
   --secondary-cta-text: #f6d4d4;
-  --accent: #51000b;
-  --background-accent: #ff2231;
+  --accent: #FFD700;
+  --background-accent: #f9f9f9;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);