Update src/app/page.tsx

Merge version_20 into main

src/app/page.tsx

@@ -6,7 +6,7 @@ import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FaqDouble from '@/components/sections/faq/FaqDouble';
 import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
 import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import ProductCardThree from '@/components/sections/product/ProductCardThree';
@@ -32,42 +32,23 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        {
-          name: "Home",          id: "hero"},
-        {
-          name: "About",          id: "about"},
-        {
-          name: "Projects",          id: "projects"},
-        {
-          name: "Contact",          id: "contact"},
+        { name: "Home", id: "hero" },
+        { name: "About", id: "about" },
+        { name: "Projects", id: "projects" },
+        { name: "Contact", id: "contact" },
       ]}
       brandName="DevFolio"
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroCarouselLogo
-      logoText="DEVPORTFOLIO"
-      description="Building scalable digital solutions with a focus on modern design and performance."
+      <HeroBillboard
+      title="Building scalable digital solutions with a focus on modern design and performance."
+      description="DevFolio"
+      background={{ variant: "sparkles-gradient" }}
       buttons={[
-        {
-          text: "View Projects",          href: "#projects"},
-        {
-          text: "Contact Me",          href: "#contact"},
-      ]}
-      slides={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-network-data-communications-background-with-plexus-design_1048-17880.jpg",          imageAlt: "Digital landscape"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-technology-background-with-low-poly-plexus-design_1048-16168.jpg",          imageAlt: "Digital landscape"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-modern-particle-background-with-flowing-cyber-dots_1048-12265.jpg",          imageAlt: "Digital landscape"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-geometric-abstract-background_1048-15986.jpg",          imageAlt: "Digital landscape"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-modern-techno-background-with-particles-with-shallow-depth-field_1048-12266.jpg",          imageAlt: "Digital landscape"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-background-plexus-design-with-shallow-depth-field_1048-14031.jpg",          imageAlt: "Digital landscape"},
+        { text: "View Projects", href: "#projects" },
+        { text: "Contact Me", href: "#contact" }
       ]}
     />
   </div>
@@ -86,17 +67,17 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          id: "1",          title: "Frontend Development",          author: "Frameworks",          description: "Expert in React, Next.js, and Tailwind CSS for high-performance UIs.",          tags: [
-            "React",            "Next.js",            "Tailwind"],
-          imageSrc: "http://img.b2bpic.net/free-photo/factory-employees-looking-mockup-display-researching-green-energy-solutions_482257-123400.jpg"},
+          id: "1",          title: "Frontend Development",          author: "Frameworks",          description: "Expert in React, Next.js, and Tailwind CSS for high-performance UIs.",          tags: ["React", "Next.js", "Tailwind"],
+          imageSrc: "http://img.b2bpic.net/free-photo/factory-employees-looking-mockup-display-researching-green-energy-solutions_482257-123400.jpg"
+        },
         {
-          id: "2",          title: "Backend Engineering",          author: "Systems",          description: "Building secure and scalable APIs with Node.js and PostgreSQL/MongoDB.",          tags: [
-            "Node.js",            "Express",            "Postgres"],
-          imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-nutritional-counter-app-composition_23-2149880606.jpg"},
+          id: "2",          title: "Backend Engineering",          author: "Systems",          description: "Building secure and scalable APIs with Node.js and PostgreSQL/MongoDB.",          tags: ["Node.js", "Express", "Postgres"],
+          imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-nutritional-counter-app-composition_23-2149880606.jpg"
+        },
         {
-          id: "3",          title: "DevOps & Tools",          author: "Infrastructure",          description: "Deploying applications with Docker, AWS, and CI/CD pipelines.",          tags: [
-            "Docker",            "AWS",            "CI/CD"],
-          imageSrc: "http://img.b2bpic.net/free-photo/clock-time-reminder-alarm-countdown-graphic_53876-128050.jpg"},
+          id: "3",          title: "DevOps & Tools",          author: "Infrastructure",          description: "Deploying applications with Docker, AWS, and CI/CD pipelines.",          tags: ["Docker", "AWS", "CI/CD"],
+          imageSrc: "http://img.b2bpic.net/free-photo/clock-time-reminder-alarm-countdown-graphic_53876-128050.jpg"
+        },
       ]}
       title="Core Technical Skills"
       description="Professional toolkit for modern web and backend development."
@@ -111,17 +92,23 @@ export default function LandingPage() {
       useInvertedBackground={false}
       products={[
         {
-          id: "p1",          name: "E-Commerce Platform",          price: "SaaS / Full Stack",          imageSrc: "http://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg"},
+          id: "p1",          name: "E-Commerce Platform",          price: "SaaS / Full Stack",          imageSrc: "http://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg"
+        },
         {
-          id: "p2",          name: "AI Analytics Dashboard",          price: "Tech / AI",          imageSrc: "http://img.b2bpic.net/free-photo/programmer-developing-software-large-computer-screen_53876-101149.jpg"},
+          id: "p2",          name: "AI Analytics Dashboard",          price: "Tech / AI",          imageSrc: "http://img.b2bpic.net/free-photo/programmer-developing-software-large-computer-screen_53876-101149.jpg"
+        },
         {
-          id: "p3",          name: "Corporate Task Manager",          price: "Productivity",          imageSrc: "http://img.b2bpic.net/free-photo/technology-innovation-evolution-solution-digital-concept_53876-121526.jpg"},
+          id: "p3",          name: "Corporate Task Manager",          price: "Productivity",          imageSrc: "http://img.b2bpic.net/free-photo/technology-innovation-evolution-solution-digital-concept_53876-121526.jpg"
+        },
         {
-          id: "p4",          name: "Portfolio Engine",          price: "Open Source",          imageSrc: "http://img.b2bpic.net/free-photo/solar-panels-plant-specialist-identifying-system-errors-using-chroma-key-pc_482257-117831.jpg"},
+          id: "p4",          name: "Portfolio Engine",          price: "Open Source",          imageSrc: "http://img.b2bpic.net/free-photo/solar-panels-plant-specialist-identifying-system-errors-using-chroma-key-pc_482257-117831.jpg"
+        },
         {
-          id: "p5",          name: "Real-time Chat App",          price: "Communication",          imageSrc: "http://img.b2bpic.net/free-photo/professional-person-engaging-with-ai-chatbot-computer-screen_482257-126263.jpg"},
+          id: "p5",          name: "Real-time Chat App",          price: "Communication",          imageSrc: "http://img.b2bpic.net/free-photo/professional-person-engaging-with-ai-chatbot-computer-screen_482257-126263.jpg"
+        },
         {
-          id: "p6",          name: "Fintech API Layer",          price: "Backend",          imageSrc: "http://img.b2bpic.net/free-photo/technology-circuit-processor-innovation-network-concept_53876-124253.jpg"},
+          id: "p6",          name: "Fintech API Layer",          price: "Backend",          imageSrc: "http://img.b2bpic.net/free-photo/technology-circuit-processor-innovation-network-concept_53876-124253.jpg"
+        },
       ]}
       title="Featured Projects"
       description="Explore a selection of my latest work."
@@ -136,13 +123,13 @@ export default function LandingPage() {
       useInvertedBackground={false}
       metrics={[
         {
-          id: "m1",          value: "50+",          title: "Projects Completed",          description: "Delivered across various industries.",          icon: Award,
+          id: "m1",          value: "50+",          title: "Projects Completed",          description: "Delivered across various industries.",          icon: Award
         },
         {
-          id: "m2",          value: "10k+",          title: "Code Commits",          description: "Refining architecture and performance.",          icon: Code,
+          id: "m2",          value: "10k+",          title: "Code Commits",          description: "Refining architecture and performance.",          icon: Code
         },
         {
-          id: "m3",          value: "100%",          title: "Client Satisfaction",          description: "Top-tier quality delivery.",          icon: CheckCircle,
+          id: "m3",          value: "100%",          title: "Client Satisfaction",          description: "Top-tier quality delivery.",          icon: CheckCircle
         },
       ]}
       title="Professional Impact"
@@ -156,15 +143,20 @@ export default function LandingPage() {
       useInvertedBackground={false}
       testimonials={[
         {
-          id: "t1",          title: "Highly Professional",          quote: "Exceptional work on our platform migration.",          name: "Sarah Miller",          role: "CTO",          imageSrc: "http://img.b2bpic.net/free-photo/adult-enjoying-cocktail_52683-107593.jpg"},
+          id: "t1",          title: "Highly Professional",          quote: "Exceptional work on our platform migration.",          name: "Sarah Miller",          role: "CTO",          imageSrc: "http://img.b2bpic.net/free-photo/adult-enjoying-cocktail_52683-107593.jpg"
+        },
         {
-          id: "t2",          title: "Creative Excellence",          quote: "Brilliant UI and UX implementation.",          name: "Mark Chen",          role: "PM",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-entrepreneur-with-corporate-job-looking-camera-business-office-portrait-young-man-preparing-work-planning-development-industry-with-technology-computer_482257-29387.jpg"},
+          id: "t2",          title: "Creative Excellence",          quote: "Brilliant UI and UX implementation.",          name: "Mark Chen",          role: "PM",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-entrepreneur-with-corporate-job-looking-camera-business-office-portrait-young-man-preparing-work-planning-development-industry-with-technology-computer_482257-29387.jpg"
+        },
         {
-          id: "t3",          title: "Reliable Partner",          quote: "The go-to developer for our scaling needs.",          name: "Emily Davis",          role: "CEO",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-businesswoman-her-employees-background_1262-20305.jpg"},
+          id: "t3",          title: "Reliable Partner",          quote: "The go-to developer for our scaling needs.",          name: "Emily Davis",          role: "CEO",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-businesswoman-her-employees-background_1262-20305.jpg"
+        },
         {
-          id: "t4",          title: "Tech Expert",          quote: "In-depth knowledge of modern backend systems.",          name: "David Kim",          role: "Lead Eng",          imageSrc: "http://img.b2bpic.net/free-photo/closeup-business-people-shaking-hands-outdoor-cafe_1262-19116.jpg"},
+          id: "t4",          title: "Tech Expert",          quote: "In-depth knowledge of modern backend systems.",          name: "David Kim",          role: "Lead Eng",          imageSrc: "http://img.b2bpic.net/free-photo/closeup-business-people-shaking-hands-outdoor-cafe_1262-19116.jpg"
+        },
         {
-          id: "t5",          title: "Fast Delivery",          quote: "Highly efficient and quality-focused approach.",          name: "John Doe",          role: "Product Lead",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-handsome-man-spectacles_1303-14468.jpg"},
+          id: "t5",          title: "Fast Delivery",          quote: "Highly efficient and quality-focused approach.",          name: "John Doe",          role: "Product Lead",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-handsome-man-spectacles_1303-14468.jpg"
+        },
       ]}
       title="Client Feedback"
       description="Don't just take my word for it."
@@ -177,11 +169,14 @@ export default function LandingPage() {
       useInvertedBackground={false}
       faqs={[
         {
-          id: "f1",          title: "What is your availability?",          content: "I am currently accepting new freelance and full-time project opportunities."},
+          id: "f1",          title: "What is your availability?",          content: "I am currently accepting new freelance and full-time project opportunities."
+        },
         {
-          id: "f2",          title: "What is your process?",          content: "I follow agile methodologies ensuring continuous communication and delivery."},
+          id: "f2",          title: "What is your process?",          content: "I follow agile methodologies ensuring continuous communication and delivery."
+        },
         {
-          id: "f3",          title: "Do you provide support?",          content: "Post-project maintenance and technical support are included in all engagements."},
+          id: "f3",          title: "Do you provide support?",          content: "Post-project maintenance and technical support are included in all engagements."
+        },
       ]}
       title="Common Questions"
       description="Learn more about how I work."