Merge version_3 into main

Merge version_3 into main

src/app/page.tsx

@@ -6,7 +6,7 @@ import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FaqDouble from '@/components/sections/faq/FaqDouble';
 import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
 import FooterBase from '@/components/sections/footer/FooterBase';
-import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
+import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
 import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import ProductCardThree from '@/components/sections/product/ProductCardThree';
@@ -32,62 +32,41 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingInline
       navItems={[
-        {
-          name: "Home",          id: "home"},
-        {
-          name: "About",          id: "about"},
-        {
-          name: "Projects",          id: "projects"},
-        {
-          name: "Contact",          id: "contact"},
+        { name: "Home", id: "home" },
+        { name: "About", id: "about" },
+        { name: "Projects", id: "projects" },
+        { name: "Contact", id: "contact" },
       ]}
       brandName="3D STUDIO"
-      button={{ text: "Get Started" }}
+      button={{ text: "Get Started", href: "#contact" }}
     />
   </div>
 
   <div id="home" data-section="home">
-      <HeroOverlayTestimonial
-      title="Crafting Immersive 3D Worlds"
-      description="We specialize in high-end digital experiences, bringing creative visions to life with cutting-edge 3D animation and design."
+      <HeroSplitTestimonial
+      title="Digital Alter Ego"
+      description="Meet your 3D-animated representation—a high-fidelity digital persona built to bridge the gap between human creativity and virtual performance."
+      background={{ variant: "sparkles-gradient" }}
+      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qbn5ys&_wi=2"
+      imageAlt="3D animated character representing me"
+      imagePosition="right"
       testimonials={[
         {
-          name: "Alex Riv",          handle: "@alex",          testimonial: "Amazing 3D work, exceeded expectations.",          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qbn5ys&_wi=1",          imageAlt: "futuristic 3D background"},
+          name: "Alex Riv", handle: "@alex", testimonial: "The character animation is breathtakingly real.", rating: 5
+        },
         {
-          name: "Sam Kim",          handle: "@sam",          testimonial: "The animation fluidity is incredible.",          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kt5pfd&_wi=1",          imageAlt: "futuristic 3D background"},
-        {
-          name: "Jana Lee",          handle: "@jana",          testimonial: "Top-tier creative partner for our brand.",          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=g1ypmf&_wi=1",          imageAlt: "futuristic 3D background"},
-        {
-          name: "Mark Doe",          handle: "@mark",          testimonial: "Brought our concepts to life perfectly.",          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7f9f3d&_wi=1",          imageAlt: "futuristic 3D background"},
-        {
-          name: "Zoe Fox",          handle: "@zoe",          testimonial: "Stunning visuals and professional speed.",          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=94zbjw&_wi=1",          imageAlt: "futuristic 3D background"},
+          name: "Sam Kim", handle: "@sam", testimonial: "Finally, a digital persona that feels authentic.", rating: 5
+        },
       ]}
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qbn5ys&_wi=2"
-      imageAlt="futuristic 3D background"
-      avatars={[
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=g1ypmf",          alt: "professional client portrait"},
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7f9f3d",          alt: "tech innovator portrait"},
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=94zbjw",          alt: "creative lead portrait"},
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3je9qy",          alt: "digital architect portrait"},
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ifxdjh",          alt: "studio director portrait"},
+      buttons={[
+        { text: "Learn More", href: "#about" },
+        { text: "Book Consultation", href: "#contact" }
       ]}
-      avatarText="Trusted by industry leaders"
     />
   </div>
 
   <div id="about" data-section="about">
       <TestimonialAboutCard
-      useInvertedBackground={false}
       tag="About Studio"
       title="Pushing Boundaries"
       description="Founded by creative technologists who live at the intersection of art and code, our studio is dedicated to crafting the future of digital expression."
@@ -96,6 +75,7 @@ export default function LandingPage() {
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kt5pfd&_wi=2"
       imageAlt="creative designer workspace"
       mediaAnimation="slide-up"
+      useInvertedBackground={false}
     />
   </div>
 
@@ -106,11 +86,14 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          id: "f1",          title: "3D Modeling",          subtitle: "Precision modeling for any project.",          category: "Service",          value: "100%"},
+          id: "f1", title: "3D Modeling", subtitle: "Precision modeling for any project.", category: "Service", value: "100%"
+        },
         {
-          id: "f2",          title: "Motion Graphics",          subtitle: "Fluid and reactive animations.",          category: "Service",          value: "100%"},
+          id: "f2", title: "Motion Graphics", subtitle: "Fluid and reactive animations.", category: "Service", value: "100%"
+        },
         {
-          id: "f3",          title: "Environment Design",          subtitle: "Immersive and cinematic worlds.",          category: "Service",          value: "100%"},
+          id: "f3", title: "Environment Design", subtitle: "Immersive and cinematic worlds.", category: "Service", value: "100%"
+        },
       ]}
       title="Creative Services"
       description="Our expertise spans across multiple disciplines in the 3D space."
@@ -123,12 +106,9 @@ export default function LandingPage() {
       title="Studio Impact"
       tag="Performance"
       metrics={[
-        {
-          id: "m1",          value: "500+",          description: "Projects Completed"},
-        {
-          id: "m2",          value: "45",          description: "Global Awards"},
-        {
-          id: "m3",          value: "15+",          description: "Years Combined"},
+        { id: "m1", value: "500+", description: "Projects Completed" },
+        { id: "m2", value: "45", description: "Global Awards" },
+        { id: "m3", value: "15+", description: "Years Combined" },
       ]}
       metricsAnimation="slide-up"
     />
@@ -142,17 +122,14 @@ export default function LandingPage() {
       useInvertedBackground={false}
       products={[
         {
-          id: "p1",          name: "Neon Genesis",          price: "Art",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qnu60r",          imageAlt: "3D character design"},
+          id: "p1", name: "Neon Genesis", price: "Art", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qnu60r", imageAlt: "3D character design"
+        },
         {
-          id: "p2",          name: "Void Structure",          price: "Art",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=z9a5jp",          imageAlt: "architectural 3D render"},
+          id: "p2", name: "Void Structure", price: "Art", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=z9a5jp", imageAlt: "architectural 3D render"
+        },
         {
-          id: "p3",          name: "Fluidity V2",          price: "Art",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8wc7f0",          imageAlt: "fluid 3D visualization"},
-        {
-          id: "p4",          name: "Velocity Alpha",          price: "Art",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=pq0pck",          imageAlt: "concept car 3D abstract"},
-        {
-          id: "p5",          name: "Ethereal Sculpt",          price: "Art",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=x7pd20",          imageAlt: "digital 3D sculpture"},
-        {
-          id: "p6",          name: "Mech Engine",          price: "Art",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=tpxugs",          imageAlt: "mechanical abstract 3D"},
+          id: "p3", name: "Fluidity V2", price: "Art", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8wc7f0", imageAlt: "fluid 3D visualization"
+        },
       ]}
       title="Recent Projects"
       description="A curated collection of our most daring digital commissions."
@@ -167,20 +144,11 @@ export default function LandingPage() {
       useInvertedBackground={false}
       testimonials={[
         {
-          id: "t1",          name: "Alex Riv",          role: "Creative Lead",          company: "DesignLab",          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=g1ypmf&_wi=2",          imageAlt: "professional client portrait"},
+          id: "t1", name: "Alex Riv", role: "Creative Lead", company: "DesignLab", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=g1ypmf&_wi=2", imageAlt: "professional client portrait"
+        },
         {
-          id: "t2",          name: "Sam Kim",          role: "CTO",          company: "Innovate",          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7f9f3d&_wi=2",          imageAlt: "tech innovator portrait"},
-        {
-          id: "t3",          name: "Jana Lee",          role: "Director",          company: "GrowthCo",          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=94zbjw&_wi=2",          imageAlt: "creative lead portrait"},
-        {
-          id: "t4",          name: "Mark Doe",          role: "PM",          company: "Future",          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3je9qy",          imageAlt: "digital architect portrait"},
-        {
-          id: "t5",          name: "Zoe Fox",          role: "Founder",          company: "Vision",          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ifxdjh",          imageAlt: "studio director portrait"},
+          id: "t2", name: "Sam Kim", role: "CTO", company: "Innovate", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7f9f3d&_wi=2", imageAlt: "tech innovator portrait"
+        },
       ]}
       title="Client Feedback"
       description="Hear what our partners say about our collaborative process."
@@ -192,12 +160,8 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       faqs={[
-        {
-          id: "q1",          title: "How do you start?",          content: "Discovery, brainstorming, and sketching."},
-        {
-          id: "q2",          title: "What tools are used?",          content: "Industry-standard 3D suites like Blender, Cinema 4D."},
-        {
-          id: "q3",          title: "Timeline?",          content: "Varies by scope, usually 2-8 weeks."},
+        { id: "q1", title: "How do you start?", content: "Discovery, brainstorming, and sketching." },
+        { id: "q2", title: "What tools are used?", content: "Industry-standard 3D suites like Blender, Cinema 4D." },
       ]}
       title="Common Questions"
       description="Get answers to your inquiries about our studio and process."
@@ -208,15 +172,11 @@ export default function LandingPage() {
   <div id="contact" data-section="contact">
       <ContactCTA
       useInvertedBackground={false}
-      background={{
-        variant: "sparkles-gradient"}}
+      background={{ variant: "sparkles-gradient" }}
       tag="Let's Connect"
       title="Ready to Build Together?"
       description="Get in touch today to start your next 3D project with us."
-      buttons={[
-        {
-          text: "Contact Us",          href: "#"},
-      ]}
+      buttons={[{ text: "Contact Us", href: "#" }]}
     />
   </div>
 
@@ -224,19 +184,15 @@ export default function LandingPage() {
       <FooterBase
       columns={[
         {
-          title: "Company",          items: [
-            {
-              label: "About",              href: "#about"},
-            {
-              label: "Projects",              href: "#projects"},
+          title: "Company", items: [
+            { label: "About", href: "#about" },
+            { label: "Projects", href: "#projects" },
           ],
         },
         {
-          title: "Legal",          items: [
-            {
-              label: "Privacy",              href: "#"},
-            {
-              label: "Terms",              href: "#"},
+          title: "Legal", items: [
+            { label: "Privacy", href: "#" },
+            { label: "Terms", href: "#" },
           ],
         },
       ]}
@@ -246,4 +202,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #030128;
-  --card: #241f48;
-  --foreground: #ffffff;
-  --primary-cta: #ffffff;
-  --primary-cta-text: #030128;
-  --secondary-cta: #131136;
-  --secondary-cta-text: #d5d4f6;
-  --accent: #44358a;
-  --background-accent: #b597fe;
+  --background: #050012;
+  --card: #040121;
+  --foreground: #f0e6ff;
+  --primary-cta: #c89bff;
+  --primary-cta-text: #050012;
+  --secondary-cta: #1d123b;
+  --secondary-cta-text: #f0e6ff;
+  --accent: #684f7b;
+  --background-accent: #65417c;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);