Update theme colors

Merge version_2 into main

src/app/page.tsx

@@ -2,10 +2,10 @@
 
 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 FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
 import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
@@ -33,21 +33,13 @@ export default function LandingPage() {
       <NavbarLayoutFloatingOverlay
       navItems={[
         {
-          name: "Home",
-          id: "hero",
-        },
+          name: "Home",          id: "hero"},
         {
-          name: "About",
-          id: "about",
-        },
+          name: "About",          id: "about"},
         {
-          name: "Projects",
-          id: "projects",
-        },
+          name: "Projects",          id: "projects"},
         {
-          name: "Contact",
-          id: "contact",
-        },
+          name: "Contact",          id: "contact"},
       ]}
       brandName="DevFolio"
     />
@@ -59,39 +51,23 @@ export default function LandingPage() {
       description="Building scalable digital solutions with a focus on modern design and performance."
       buttons={[
         {
-          text: "View Projects",
-          href: "#projects",
-        },
+          text: "View Projects",          href: "#projects"},
         {
-          text: "Contact Me",
-          href: "#contact",
-        },
+          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-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-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-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-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-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",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-background-plexus-design-with-shallow-depth-field_1048-14031.jpg",          imageAlt: "Digital landscape"},
       ]}
     />
   </div>
@@ -110,41 +86,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."
@@ -159,41 +111,17 @@ 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."
@@ -208,25 +136,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,45 +156,15 @@ 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."
@@ -291,20 +177,11 @@ 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."
@@ -313,51 +190,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);