Update src/app/page.tsx

Merge version_20 into main

src/app/page.tsx

@@ -2,11 +2,11 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplit from '@/components/sections/contact/ContactSplit';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FaqDouble from '@/components/sections/faq/FaqDouble';
 import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+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,66 +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>
@@ -110,40 +67,16 @@ 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"
@@ -159,40 +92,22 @@ 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"
@@ -208,25 +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"
@@ -240,44 +143,19 @@ 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"
@@ -291,19 +169,13 @@ 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"
@@ -313,51 +185,35 @@ export default function LandingPage() {
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactSplit
-      useInvertedBackground={false}
-      background={{
-        variant: "gradient-bars",
-      }}
-      tag="Contact"
+      <ContactSplitForm
       title="Let's build something great"
       description="Have a project in mind? Reach out and let's get started."
+      useInvertedBackground={false}
+      inputs={[
+        { name: "name", type: "text", placeholder: "Full Name", required: true },
+        { name: "email", type: "email", placeholder: "Email Address", required: true }
+      ]}
+      textarea={{ name: "message", placeholder: "Your message", rows: 4, required: true }}
+      buttonText="Send"
       imageSrc="http://img.b2bpic.net/free-photo/modern-smartphone-with-blank-white-screen-dark-background_9975-134305.jpg"
-      mediaAnimation="slide-up"
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
+      <FooterBaseCard
+      logoText="DEVPORTFOLIO"
       columns={[
         {
-          items: [
-            {
-              label: "About",
-              href: "#about",
-            },
-            {
-              label: "Projects",
-              href: "#projects",
-            },
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Github",
-              href: "https://github.com",
-            },
-            {
-              label: "LinkedIn",
-              href: "https://linkedin.com",
-            },
-          ],
-        },
+          title: "Navigation",          items: [
+            { label: "Home", href: "#hero" },
+            { label: "About", href: "#about" },
+            { label: "Projects", href: "#projects" }
+          ]
+        }
       ]}
-      logoText="DEVPORTFOLIO"
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0a0a0a;
-  --card: #1a1a1a;
-  --foreground: #ffffffe6;
-  --primary-cta: #e6e6e6;
-  --primary-cta-text: #0a0a0a;
-  --secondary-cta: #1a1a1a;
-  --secondary-cta-text: #ffffffe6;
-  --accent: #737373;
-  --background-accent: #737373;
+  --background: #ffffff;
+  --card: #f9f9f9;
+  --foreground: #000612e6;
+  --primary-cta: #15479c;
+  --primary-cta-text: #ffffff;
+  --secondary-cta: #f9f9f9;
+  --secondary-cta-text: #000612e6;
+  --accent: #e2e2e2;
+  --background-accent: #c4c4c4;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);