Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -4,14 +4,13 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
-import MediaAbout from '@/components/sections/about/MediaAbout';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
 import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
-import { CheckCircle, Sparkles, Zap } from "lucide-react";
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
+import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
+import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
+import { User } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -40,108 +39,48 @@ export default function LandingPage() {
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroSplitDualMedia
+      <HeroBillboard
+      title="Graphic Designer"
+      description="Visual identity, packaging, and book design crafted with passion and purpose."
+      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CXNx7WXcJJJN1YzMFAU3OGeC8v/uploaded-1776528790910-ra2if4fe.jpg"
+      imageAlt="Designer Work"
+      background={{ variant: "plain" }}
+    />
+  </div>
+
+  <div id="carousel" data-section="carousel">
+    <HeroBillboardCarousel
+      title="Featured Collections"
+      description="A curated selection of my latest design projects."
       background={{ variant: "plain" }}
-      title="Creative Portfolio"
-      description="Visual identity, packaging, and book design crafted with passion and purpose. I help brands tell their unique story through compelling visuals."
-      tag="Graphic Designer"
       mediaItems={[
-        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CXNx7WXcJJJN1YzMFAU3OGeC8v/uploaded-1776528451107-2shc324i.jpg?_wi=1", imageAlt: "Graphic Designer Portrait" },
+        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CXNx7WXcJJJN1YzMFAU3OGeC8v/uploaded-1776528451107-2shc324i.jpg?_wi=1", imageAlt: "Project 1" },
-        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CXNx7WXcJJJN1YzMFAU3OGeC8v/uploaded-1776528451107-sdip55j6.jpg?_wi=1", imageAlt: "Design Work Showcase" }
+        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CXNx7WXcJJJN1YzMFAU3OGeC8v/uploaded-1776528451107-sdip55j6.jpg?_wi=1", imageAlt: "Project 2" },
+        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CXNx7WXcJJJN1YzMFAU3OGeC8v/uploaded-1776528451107-bhmo4fxw.jpg?_wi=1", imageAlt: "Project 3" }
       ]}
-      mediaAnimation="slide-up"
-      rating={5}
-      ratingText="Top Rated Designer"
-      tagIcon={Sparkles}
     />
   </div>
 
   <div id="about" data-section="about">
-      <MediaAbout
+      <TestimonialAboutCard
-      useInvertedBackground={false}
+      tag="About Me"
       title="Crafting Brand Identities"
-      description="I focus on creating thoughtful, visually appealing brand identities that resonate with Gen Z and beyond. My approach balances modern style with clear communication."
+      description="I focus on creating thoughtful, visually appealing brand identities that resonate with modern audiences."
+      subdescription="My approach balances modern style with clear communication."
+      icon={User}
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CXNx7WXcJJJN1YzMFAU3OGeC8v/uploaded-1776528451107-bhmo4fxw.jpg?_wi=1"
-      imageAlt="Brand Company Kit"
+      imageAlt="Designer Portrait"
-    />
+      mediaAnimation="none"
-  </div>
-
-  <div id="packaging" data-section="packaging">
-      <FeatureCardTen
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={true}
-      title="Packaging Design Expertise"
-      description="I create packaging that stands out on the shelf, balancing creativity with practical brand communication."
-      features={[
-        {
-          title: "Concept Creation",          description: "Developing initial ideas based on brand personality.",          items: [{ icon: CheckCircle, text: "Brand storytelling" }, { icon: CheckCircle, text: "Visual hierarchy" }],
-          reverse: false,
-          media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CXNx7WXcJJJN1YzMFAU3OGeC8v/uploaded-1776528451107-sdip55j6.jpg?_wi=2", imageAlt: "Packaging Concept" }
-        },
-        {
-          title: "Brand Cohesion",          description: "Ensuring every pack reflects the core identity.",          items: [{ icon: CheckCircle, text: "Consistent color palettes" }, { icon: CheckCircle, text: "Typography balance" }],
-          reverse: true,
-          media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CXNx7WXcJJJN1YzMFAU3OGeC8v/uploaded-1776528451107-bhmo4fxw.jpg?_wi=2", imageAlt: "Packaging Cohesion" }
-        },
-        {
-          title: "Visual Impact",          description: "Creating designs that captivate the target audience.",          items: [{ icon: CheckCircle, text: "Modern aesthetic" }, { icon: CheckCircle, text: "High engagement" }],
-          reverse: false,
-          media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CXNx7WXcJJJN1YzMFAU3OGeC8v/uploaded-1776528451107-hzpberw9.jpg?_wi=1", imageAlt: "Visual Impact" }
-        }
-      ]}
-    />
-  </div>
-
-  <div id="branding" data-section="branding">
-      <ProductCardTwo
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="two-columns-alternating-heights"
       useInvertedBackground={false}
-      products={[
-        { id: "1", brand: "Identity", name: "Logo Design", price: "Custom", rating: 5, reviewCount: "120", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CXNx7WXcJJJN1YzMFAU3OGeC8v/uploaded-1776528451107-bhmo4fxw.jpg?_wi=3" },
-        { id: "2", brand: "Identity", name: "Company Kit", price: "Custom", rating: 5, reviewCount: "85", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CXNx7WXcJJJN1YzMFAU3OGeC8v/uploaded-1776528451107-2shc324i.jpg?_wi=2" },
-        { id: "3", brand: "Print", name: "Envelopes", price: "Custom", rating: 4, reviewCount: "50", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CXNx7WXcJJJN1YzMFAU3OGeC8v/uploaded-1776528451107-sdip55j6.jpg?_wi=3" }
-      ]}
-      title="Brand Company Kits"
-      description="Comprehensive design solutions tailored to establish consistent, professional brand identities."
-    />
-  </div>
-
-  <div id="book-design" data-section="book-design">
-      <FeatureCardTen
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={true}
-      title="Book Cover Design"
-      description="Bold, fresh designs connecting deeply with the Gen Z audience."
-      features={[
-        {
-          title: "Gen Z Focus",          description: "Targeted visuals for modern readers.",          items: [{ icon: Zap, text: "Eye-catching colors" }, { icon: Zap, text: "Youthful vibe" }],
-          reverse: false,
-          media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CXNx7WXcJJJN1YzMFAU3OGeC8v/uploaded-1776528451107-37du6737.jpg", imageAlt: "Gen Z Book Cover" }
-        },
-        {
-          title: "Clean Typography",          description: "Modern fonts for maximum readability.",          items: [{ icon: Zap, text: "Dynamic layout" }, { icon: Zap, text: "Clear communication" }],
-          reverse: true,
-          media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CXNx7WXcJJJN1YzMFAU3OGeC8v/uploaded-1776528451107-sdip55j6.jpg?_wi=4", imageAlt: "Typography Detail" }
-        },
-        {
-          title: "Trendy Elements",          description: "Integrating current design trends.",          items: [{ icon: Zap, text: "Bold visuals" }, { icon: Zap, text: "Relatable themes" }],
-          reverse: false,
-          media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CXNx7WXcJJJN1YzMFAU3OGeC8v/uploaded-1776528451107-hzpberw9.jpg?_wi=2", imageAlt: "Trends Showcase" }
-        }
-      ]}
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
       <TestimonialCardTwelve
-      useInvertedBackground={false}
       cardTitle="Client Voices"
       cardTag="Trusted by Brands"
       cardAnimation="slide-up"
+      useInvertedBackground={false}
       testimonials={[
         { id: "1", name: "Sarah J.", imageSrc: "http://img.b2bpic.net/free-photo/graphic-designer-making-logo-notebook_23-2149142118.jpg" },
         { id: "2", name: "Michael Chen", imageSrc: "http://img.b2bpic.net/free-photo/female-logo-designer-working-her-tablet-connected-laptop_23-2149119251.jpg" },
@@ -152,8 +91,6 @@ export default function LandingPage() {
 
   <div id="faq" data-section="faq">
       <FaqSplitMedia
-      textboxLayout="default"
-      useInvertedBackground={true}
       faqs={[
         { id: "1", title: "What is your design process?", content: "I research, sketch, and iterate until the design matches your brand vision perfectly." },
         { id: "2", title: "Do you offer revisions?", content: "Yes, I offer up to three rounds of revisions to ensure you are 100% satisfied with the outcome." },
@@ -163,17 +100,18 @@ export default function LandingPage() {
       title="Common Questions"
       description="Learn more about my design process and project timeline."
       faqsAnimation="slide-up"
-      mediaAnimation="slide-up"
+      textboxLayout="split"
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="contact" data-section="contact">
       <ContactCenter
-      useInvertedBackground={false}
       background={{ variant: "plain" }}
       tag="Let's Connect"
       title="Let's Work Together"
       description="I assure you that you won't regret your decision to work with me."
+      useInvertedBackground={false}
     />
   </div>