Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -12,6 +12,7 @@ import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloating
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
 import TextAbout from '@/components/sections/about/TextAbout';
+import { Code } from 'lucide-react';
 
 export default function LandingPage() {
   return (
@@ -31,145 +32,26 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingInline
       navItems={[
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Features",
-          id: "features",
-        },
-        {
-          name: "Services",
-          id: "services",
-        },
-        {
-          name: "FAQ",
-          id: "faq",
-        },
+        { name: "About", id: "about" },
+        { name: "Features", id: "features" },
+        { name: "Services", id: "services" },
+        { name: "Development", id: "dev-services" },
+        { name: "FAQ", id: "faq" },
       ]}
       brandName="CodeFlow"
       button={{
-        text: "Get Started",
-        href: "contact",
-      }}
+        text: "Get Started",        href: "contact"}}
     />
   </div>
 
   <div id="hero" data-section="hero">
       <HeroSplitDoubleCarousel
-      background={{
-        variant: "plain",
-      }}
+      background={{ variant: "plain" }}
       title="Modern Software Engineering Solutions"
-      description="Accelerate your development cycle with premium coding services, high-performance architecture, and robust scalable platforms."
-      leftCarouselItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/entertainer-using-light-bulb-entertain-fans-pretending-be-electrocuted_482257-124250.jpg",
-          imageAlt: "Code workspace",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/futurism-perspective-digital-nomads-lifestyle_23-2151252440.jpg",
-          imageAlt: "Code workspace",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/team-database-admins-analyzing-source-code-wall-screen-tv-comparing-errors-using-digital-tablet-busy-server-room-two-cloud-programers-debugging-algorithm-software-innovation-office_482257-43976.jpg",
-          imageAlt: "Code workspace",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/black-programmer-remotely-working-home-office-writing-code-computer_482257-118283.jpg",
-          imageAlt: "Code workspace",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/financial-application-ui-pc-screen-showing-company-revenue_482257-119232.jpg",
-          imageAlt: "Code workspace",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/shoulder-view-african-american-startup-employee-looking-laptop-screen-with-business-analytics-charts-sitting-desk-close-focus-portable-computer-display-with-sales-results_482257-38698.jpg",
-          imageAlt: "Code workspace",
-        },
-      ]}
-      rightCarouselItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/annoyed-worker-work-raging-after-losing-all-progress-due-computer-crash_482257-124211.jpg",
-          imageAlt: "Code workspace",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/black-laptop-screen-dark-room-night_169016-58233.jpg",
-          imageAlt: "Code workspace",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/financial-software-ui-pc-screen-apartment-office-desk_482257-122945.jpg",
-          imageAlt: "Code workspace",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/businessman-studying-infographics-performance-metrics_482257-122632.jpg",
-          imageAlt: "Code workspace",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/artificial-intelligence-startup-coworkers-doing-brainstorming-optimizing-code_482257-125922.jpg",
-          imageAlt: "Code workspace",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/successful-hacker-celebrating-phishing-achievement-pc-feeling-happy-about-stealing-passwords-night-skilled-spy-enjoying-cyberattack-success-with-malware-break-firewall_482257-66409.jpg",
-          imageAlt: "Code workspace",
-        },
-      ]}
-      buttons={[
-        {
-          text: "Get Started",
-          href: "contact",
-        },
-        {
-          text: "Learn More",
-          href: "about",
-        },
-      ]}
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/young-handsome-man-work-office-using-computer_171337-6827.jpg",
-          alt: "Developer",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/disabled-man-working-with-technology-home-office_329181-17550.jpg",
-          alt: "Architect",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/young-stylish-smiling-man-co-working-office-startup-freelancer-holding-using-tablet_285396-9048.jpg",
-          alt: "Manager",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-man-wearing-gen-z-makeup_52683-91454.jpg",
-          alt: "Engineer",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-handsome-young-man-with-arms-crossed-holding-white-headphone-around-his-neck_23-2148096439.jpg",
-          alt: "Researcher",
-        },
-      ]}
-      avatarText="Join 500+ developers"
-      marqueeItems={[
-        {
-          type: "text",
-          text: "Cloud-Native",
-        },
-        {
-          type: "text",
-          text: "AI/ML Integration",
-        },
-        {
-          type: "text",
-          text: "Agile Dev",
-        },
-        {
-          type: "text",
-          text: "Scalable Systems",
-        },
-        {
-          type: "text",
-          text: "High Performance",
-        },
-      ]}
+      description="Reduce time-to-market by 40% with our premium coding services and scalable architecture."
+      leftCarouselItems={[{ imageSrc: "http://img.b2bpic.net/free-photo/entertainer-using-light-bulb-entertain-fans-pretending-be-electrocuted_482257-124250.jpg", imageAlt: "Code workspace" }]}
+      rightCarouselItems={[{ imageSrc: "http://img.b2bpic.net/free-photo/annoyed-worker-work-raging-after-losing-all-progress-due-computer-crash_482257-124211.jpg", imageAlt: "Code workspace" }]}
+      buttons={[{ text: "Get Started", href: "contact" }, { text: "Learn More", href: "about" }]}
     />
   </div>
 
@@ -177,12 +59,7 @@ export default function LandingPage() {
       <TextAbout
       useInvertedBackground={false}
       title="Built for Developers, By Developers."
-      buttons={[
-        {
-          text: "Our Mission",
-          href: "#",
-        },
-      ]}
+      buttons={[{ text: "Our Mission", href: "#" }]}
     />
   </div>
 
@@ -191,24 +68,8 @@ export default function LandingPage() {
       animationType="slide-up"
       textboxLayout="default"
       useInvertedBackground={false}
-      negativeCard={{
-        items: [
-          "Manual code reviews",
-          "Siloed communication",
-          "Legacy pipeline maintenance",
-          "Long feedback loops",
-          "High technical debt",
-        ],
-      }}
-      positiveCard={{
-        items: [
-          "Automated CI/CD workflows",
-          "Real-time collaboration",
-          "Scalable cloud infrastructure",
-          "AI-assisted coding",
-          "Instant observability",
-        ],
-      }}
+      negativeCard={{ items: ["Manual code reviews", "Siloed communication", "Legacy pipeline maintenance"] }}
+      positiveCard={{ items: ["Automated CI/CD workflows", "Real-time collaboration", "Scalable cloud infrastructure"] }}
       title="Efficiency vs Chaos"
       description="We compare traditional workflows with modern streamlined development practices."
     />
@@ -220,71 +81,36 @@ export default function LandingPage() {
       textboxLayout="split"
       gridVariant="three-columns-all-equal-width"
       useInvertedBackground={false}
-      products={[
-        {
-          id: "p1",
-          name: "Web Platform",
-          price: "Custom",
-          imageSrc: "http://img.b2bpic.net/free-photo/important-information-placed-cork-board_329181-15321.jpg",
-        },
-        {
-          id: "p2",
-          name: "Mobile Apps",
-          price: "Custom",
-          imageSrc: "http://img.b2bpic.net/free-photo/still-life-illustrating-ethics-concept_23-2149412262.jpg",
-        },
-        {
-          id: "p3",
-          name: "Cloud Infra",
-          price: "Custom",
-          imageSrc: "http://img.b2bpic.net/free-vector/flat-gradient-geometric-circle-infographics_52683-9726.jpg",
-        },
-        {
-          id: "p4",
-          name: "API Services",
-          price: "Custom",
-          imageSrc: "http://img.b2bpic.net/free-photo/man-pointing-important-papers-cork-board_329181-15333.jpg",
-        },
-        {
-          id: "p5",
-          name: "AI/ML Integration",
-          price: "Custom",
-          imageSrc: "http://img.b2bpic.net/free-photo/team-discussing-about-industrial-project-using-dual-monitors-setup-desing-d-gears-metalic-cla_482257-2640.jpg",
-        },
-        {
-          id: "p6",
-          name: "Security Audits",
-          price: "Custom",
-          imageSrc: "http://img.b2bpic.net/free-photo/businesspeople-planning-tasks-with-sticky-notes_53876-15192.jpg",
-        },
-      ]}
+      products={[{ id: "p1", name: "Web Platform", price: "Custom", imageSrc: "http://img.b2bpic.net/free-photo/important-information-placed-cork-board_329181-15321.jpg" }]}
       title="Our Coding Services"
       description="Comprehensive engineering solutions tailored to your technical requirements."
     />
   </div>
 
+  <div id="dev-services" data-section="dev-services">
+      <ProductCardOne
+      animationType="slide-up"
+      textboxLayout="split"
+      gridVariant="three-columns-all-equal-width"
+      useInvertedBackground={true}
+      title="Development Services"
+      tag="Professional"
+      tagIcon={Code}
+      description="End-to-end development lifecycles from architecture to deployment."
+      products={[
+        { id: "ds1", name: "Full-Stack Dev", price: "Consult", imageSrc: "http://img.b2bpic.net/free-photo/futurism-perspective-digital-nomads-lifestyle_23-2151252440.jpg" },
+        { id: "ds2", name: "DevOps Engineering", price: "Consult", imageSrc: "http://img.b2bpic.net/free-photo/team-database-admins-analyzing-source-code-wall-screen-tv-comparing-errors-using-digital-tablet-busy-server-room-two-cloud-programers-debugging-algorithm-software-innovation-office_482257-43976.jpg" },
+        { id: "ds3", name: "Technical Strategy", price: "Consult", imageSrc: "http://img.b2bpic.net/free-photo/black-programmer-remotely-working-home-office-writing-code-computer_482257-118283.jpg" }
+      ]}
+    />
+  </div>
+
   <div id="metrics" data-section="metrics">
       <MetricCardFourteen
       useInvertedBackground={false}
       title="Performance Metrics"
       tag="Reliability"
-      metrics={[
-        {
-          id: "m1",
-          value: "99.9%",
-          description: "Uptime Guaranteed",
-        },
-        {
-          id: "m2",
-          value: "5x",
-          description: "Faster Deployment",
-        },
-        {
-          id: "m3",
-          value: "100+",
-          description: "Projects Delivered",
-        },
-      ]}
+      metrics={[{ id: "m1", value: "99.9%", description: "Uptime" }]}
       metricsAnimation="slide-up"
     />
   </div>
@@ -293,73 +119,16 @@ export default function LandingPage() {
       <TestimonialCardTen
       textboxLayout="split"
       useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "t1",
-          title: "Great Partner",
-          quote: "CodeFlow revolutionized our entire pipeline performance.",
-          name: "Alex Johnson",
-          role: "Software Engineer",
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-young-man-sitting-table-office-chatting_171337-17748.jpg",
-        },
-        {
-          id: "t2",
-          title: "Game Changer",
-          quote: "The most professional dev team I have ever worked with.",
-          name: "Sarah Chen",
-          role: "CTO",
-          imageSrc: "http://img.b2bpic.net/free-photo/upbeat-saleswoman-hired-explain-vehicle-pricing-options-clients_482257-118422.jpg",
-        },
-        {
-          id: "t3",
-          title: "Highly Recommend",
-          quote: "Delivered high-quality, scalable code on time every time.",
-          name: "Michael Smith",
-          role: "Product Manager",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-successful-businessman-smiling-posing-with-crossed-arms-office_176420-910.jpg",
-        },
-        {
-          id: "t4",
-          title: "Expert Team",
-          quote: "Their AI expertise transformed our infrastructure.",
-          name: "David Kim",
-          role: "AI Researcher",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-man-using-portable-notebook-cafe-sitting-table-by-window-typing-something-frowning_343059-118.jpg",
-        },
-        {
-          id: "t5",
-          title: "Reliable",
-          quote: "Outstanding dedication and deep technical knowledge.",
-          name: "Emily Rodriguez",
-          role: "Cloud Architect",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-festive-plump-male-eyeglasses-bow-tie-dark-grey-background_613910-13747.jpg",
-        },
-      ]}
+      testimonials={[{ id: "t1", title: "Great Partner", quote: "Amazing service!", name: "Alex Johnson", role: "Software Engineer" }]}
       title="Developer Feedback"
-      description="Hear from our partners about our development methodology."
+      description="Hear from our partners."
     />
   </div>
 
   <div id="faq" data-section="faq">
       <FaqSplitText
       useInvertedBackground={false}
-      faqs={[
-        {
-          id: "f1",
-          title: "How do you start a project?",
-          content: "We follow an agile development lifecycle starting with discovery.",
-        },
-        {
-          id: "f2",
-          title: "What stacks do you support?",
-          content: "We specialize in React, Node.js, Python, and cloud-native stacks.",
-        },
-        {
-          id: "f3",
-          title: "Do you provide maintenance?",
-          content: "Yes, we offer ongoing maintenance and optimization packages.",
-        },
-      ]}
+      faqs={[{ id: "f1", title: "How do you start?", content: "Agile discovery phase." }]}
       sideTitle="Common Questions"
       faqsAnimation="slide-up"
     />
@@ -369,65 +138,19 @@ export default function LandingPage() {
       <ContactSplitForm
       useInvertedBackground={false}
       title="Start Your Project"
-      description="Ready to build something great? Get in touch with our team."
-      inputs={[
-        {
-          name: "name",
-          type: "text",
-          placeholder: "Name",
-          required: true,
-        },
-        {
-          name: "email",
-          type: "email",
-          placeholder: "Email",
-          required: true,
-        },
-      ]}
-      textarea={{
-        name: "message",
-        placeholder: "Project details",
-        rows: 4,
-        required: true,
-      }}
-      imageSrc="http://img.b2bpic.net/free-photo/front-view-ofcomfortable-working-place-office_158595-1322.jpg"
+      description="Ready to build?"
+      inputs={[{ name: "name", type: "text", placeholder: "Name", required: true }, { name: "email", type: "email", placeholder: "Email", required: true }]}
+      textarea={{ name: "message", placeholder: "Project details", rows: 4, required: true }}
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterBaseReveal
       logoText="CodeFlow"
-      columns={[
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About",
-              href: "#about",
-            },
-            {
-              label: "Services",
-              href: "#services",
-            },
-          ],
-        },
-        {
-          title: "Legal",
-          items: [
-            {
-              label: "Privacy",
-              href: "#",
-            },
-            {
-              label: "Terms",
-              href: "#",
-            },
-          ],
-        },
-      ]}
+      columns={[{ title: "Company", items: [{ label: "About", href: "#about" }, { label: "Services", href: "#services" }] }]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}