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 { Star, Shield, Award, Briefcase } from "lucide-react";
-import FaqDouble from '@/components/sections/faq/FaqDouble';
+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 ProductCardFour from '@/components/sections/product/ProductCardFour';
-import TeamCardSix from '@/components/sections/team/TeamCardSix';
+import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
-import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
+import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
 
 export default function LandingPage() {
   return (
@@ -103,24 +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: "Play on Steam",          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: "Play on Steam",          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: "Play on Steam",          imageSrc: "http://img.b2bpic.net/free-photo/people-white-clothes-stand-rock-by-sea-dusk-looking-into-distance-illustration_456031-16.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"},
-        {
-          id: "g4",          name: "Red Sector",          price: "Play on Steam",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-people-with-medical-masks-pandemic_23-2148748975.jpg"},
-        {
-          id: "g5",          name: "Abyss Keeper",          price: "Play on Steam",          imageSrc: "http://img.b2bpic.net/free-photo/child-magic-school-learning-spells_23-2150170074.jpg"},
-        {
-          id: "g6",          name: "Midnight Echo",          price: "Play on Steam",          imageSrc: "http://img.b2bpic.net/free-photo/haunted-house-gothic-style_23-2151626657.jpg"},
       ]}
       title="Featured Titles"
       description="Explore our library of critically acclaimed PC and console games."
@@ -128,23 +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: [
+          id: "m1",          title: "Game Releases",          value: "15+", icon: Award},
-            "Successfully launched titles",            "Cross-platform support"],
-        },
         {
-          id: "m2",          value: "5M+",          title: "Happy Players",          items: [
+          id: "m2",          title: "Happy Players",          value: "5M+", icon: Star},
-            "Monthly active users",            "Global player community"],
-        },
         {
-          id: "m3",          value: "12",          title: "Industry Awards",          items: [
+          id: "m3",          title: "Industry Awards",          value: "12", icon: Shield},
-            "Best Indie Studio",            "Design Excellence"],
-        },
       ]}
       title="Studio Achievements"
       description="Our impact on the gaming landscape since 2018."
@@ -152,18 +141,19 @@ 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: "g1",          groupTitle: "Leadership",          members: [
             {
-          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: "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: "t3",          name: "Sam V",          role: "Art Lead",          imageSrc: "http://img.b2bpic.net/free-photo/parenting-content-creator_23-2151488622.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"
       description="Behind every pixel and line of code is a team of passionate creators."
@@ -171,53 +161,38 @@ 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,
+          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"},
-          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,
+          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"},
-          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"},
       ]}
-      showRating={true}
       title="Player Voices"
       description="What the industry and our players say about our work."
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqDouble
+      <FaqSplitText
-      textboxLayout="split"
       useInvertedBackground={true}
       faqs={[
         {
           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!"},
       ]}
-      title="Game Dev Insights"
+      sideTitle="Game Dev Insights"
-      description="Common inquiries about our studio and titles."
+      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"}}
@@ -229,12 +204,8 @@ 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>

src/app/styles/variables.css

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