Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -2,14 +2,13 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
-import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
-import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
-import HeroLogo from '@/components/sections/hero/HeroLogo';
-import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
-import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
+import ContactText from '@/components/sections/contact/ContactText';
+import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import HeroSplit from '@/components/sections/hero/HeroSplit';
+import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
+import { Phone } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -26,270 +25,76 @@ export default function LandingPage() {
         headingFontWeight="semibold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleFullscreen
-      navItems={[
-        {
-          name: "Solution",
-          id: "solution",
-        },
-        {
-          name: "Pricing",
-          id: "pricing",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
-      ]}
-      brandName="ClientFlow"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+            <NavbarStyleFullscreen
+            navItems={[
+              { name: "About", id: "problem" },
+              { name: "Benefits", id: "solution" },
+              { name: "Contact", id: "contact" },
+            ]}
+            brandName="ClientFlow"
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroLogo
-      logoText="ClientFlow"
-      description="More clients from your website in 48 hours. We build fast, simple, mobile-first pages that turn visitors into bookings."
-      buttons={[
-        {
-          text: "Get a free audit",
-          href: "#contact",
-        },
-        {
-          text: "See example",
-          href: "#proof",
-        },
-      ]}
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bj4SeQ36hW7hIXFeC9pBJuRaqu/a-minimalist-high-contrast-professional--1777764836161-95425c75.png?_wi=1"
-      imageAlt="ClientFlow Mobile Web Design"
-    />
-  </div>
+        <div id="hero" data-section="hero">
+            <HeroSplit
+              title="High-Conversion Web Flyers"
+              description="Get your business online with a fast, mobile-first digital flyer that turns visitors into clients."
+              background={{ variant: 'sparkles-gradient' }}
+              buttons={[{ text: "Call Now", href: "tel:+353861234567" }]}
+              imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bj4SeQ36hW7hIXFeC9pBJuRaqu/a-minimalist-high-contrast-professional--1777764836161-95425c75.png?_wi=1"
+              imageAlt="Modern digital flyer"
+              mediaAnimation="slide-up"
+            />
+        </div>
 
-  <div id="problem" data-section="problem">
-      <MetricSplitMediaAbout
-      useInvertedBackground={false}
-      title="Why your current site is losing customers"
-      description="Local businesses often lose potential clients due to outdated design, missing clear booking buttons, and slow, confusing mobile experiences. You need a site that acts as a salesperson, not a brochure."
-      metrics={[
-        {
-          value: "60%",
-          title: "Loss Rate",
-        },
-        {
-          value: "3s",
-          title: "Avg Dropoff",
-        },
-        {
-          value: "1",
-          title: "Lost Opportunity",
-        },
-      ]}
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bj4SeQ36hW7hIXFeC9pBJuRaqu/abstract-representation-of-a-cluttered-o-1777764845221-1ececc22.png?_wi=1"
-      imageAlt="Problem with outdated sites"
-      mediaAnimation="slide-up"
-      metricsAnimation="slide-up"
-    />
-  </div>
+        <div id="problem" data-section="problem">
+            <InlineImageSplitTextAbout
+              heading={[{ type: 'text', content: "Simple, Effective Communication" }]} 
+              useInvertedBackground={true}
+            />
+        </div>
 
-  <div id="solution" data-section="solution">
-      <FeatureCardTwentyThree
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      features={[
-        {
-          id: "f1",
-          title: "Conversion Focus",
-          tags: [
-            "High Performance",
-          ],
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bj4SeQ36hW7hIXFeC9pBJuRaqu/focused-clean-web-layout-showing-a-clear-1777764854402-dd52f8cb.png?_wi=1",
-        },
-        {
-          id: "f2",
-          title: "Clear Call to Action",
-          tags: [
-            "Simple UI",
-          ],
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bj4SeQ36hW7hIXFeC9pBJuRaqu/focused-clean-web-layout-showing-a-clear-1777764883061-b7226613.png",
-        },
-        {
-          id: "f3",
-          title: "Mobile Optimized",
-          tags: [
-            "Fast Load",
-          ],
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bj4SeQ36hW7hIXFeC9pBJuRaqu/focused-clean-web-layout-showing-a-clear-1777764890373-64c09b26.png",
-        },
-      ]}
-      title="A solution built for conversions"
-      description="We strip away the noise and focus on what matters: turning visitors into paying clients."
-    />
-  </div>
+        <div id="solution" data-section="solution">
+            <FeatureCardTwentyFive
+              animationType="slide-up"
+              textboxLayout="split"
+              useInvertedBackground={false}
+              title="Why choose a digital flyer?"
+              description="Minimalist design, maximum impact."
+              features={[
+                {
+                  title: "Mobile First",                  description: "Perfectly optimized for phone users on the go.",                  icon: Phone,
+                  mediaItems: [
+                    { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bj4SeQ36hW7hIXFeC9pBJuRaqu/focused-clean-web-layout-showing-a-clear-1777764854402-dd52f8cb.png?_wi=1" },
+                    { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bj4SeQ36hW7hIXFeC9pBJuRaqu/focused-clean-web-layout-showing-a-clear-1777764883061-b7226613.png" }
+                  ]
+                }
+              ]}
+            />
+        </div>
 
-  <div id="what-you-get" data-section="what-you-get">
-      <FeatureCardTwentyThree
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      features={[
-        {
-          id: "g1",
-          title: "Conversion Landing Page",
-          tags: [
-            "Ready in 48h",
-          ],
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bj4SeQ36hW7hIXFeC9pBJuRaqu/a-minimalist-high-contrast-professional--1777764836161-95425c75.png?_wi=2",
-          imageAlt: "A minimalist, high-contrast professional interface mockup of a local business website on mobile. Foc",
-        },
-        {
-          id: "g2",
-          title: "Mobile-First UI",
-          tags: [
-            "Responsive",
-          ],
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bj4SeQ36hW7hIXFeC9pBJuRaqu/abstract-representation-of-a-cluttered-o-1777764845221-1ececc22.png?_wi=2",
-          imageAlt: "A minimalist, high-contrast professional interface mockup of a local business website on mobile. Foc",
-        },
-        {
-          id: "g3",
-          title: "SEO & Booking System",
-          tags: [
-            "Ready to work",
-          ],
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bj4SeQ36hW7hIXFeC9pBJuRaqu/focused-clean-web-layout-showing-a-clear-1777764854402-dd52f8cb.png?_wi=2",
-          imageAlt: "A minimalist, high-contrast professional interface mockup of a local business website on mobile. Foc",
-        },
-      ]}
-      title="What you get"
-      description="A complete, high-performing asset designed for your local business."
-    />
-  </div>
+        <div id="contact" data-section="contact">
+            <ContactText
+              text="Ready to get started? Reach out to us now."
+              buttons={[{ text: "Call: +353 86 123 4567", href: "tel:+353861234567" }]}
+              background={{ variant: 'sparkles-gradient' }}
+              useInvertedBackground={false}
+            />
+        </div>
 
-  <div id="proof" data-section="proof">
-      <MetricCardEleven
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      metrics={[
-        {
-          id: "p1",
-          value: "300%",
-          title: "Conversion Uplift",
-          description: "From old site to ClientFlow.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bj4SeQ36hW7hIXFeC9pBJuRaqu/side-by-side-comparison-of-a-messy-old-w-1777764865165-2408ee50.png",
-        },
-      ]}
-      title="Before vs After"
-      description="Witness the transformation from a static site to a client-winning machine."
-    />
-  </div>
-
-  <div id="pricing" data-section="pricing">
-      <PricingCardFive
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      plans={[
-        {
-          id: "setup",
-          tag: "One-time",
-          price: "€350",
-          period: "setup",
-          description: "Includes design, dev, and mobile optimization.",
-          button: {
-            text: "Get Started",
-            href: "#contact",
-          },
-          featuresTitle: "Included",
-          features: [
-            "Mobile UI",
-            "Booking integration",
-            "SEO basics",
-          ],
-        },
-        {
-          id: "monthly",
-          tag: "Ongoing",
-          price: "€69",
-          period: "month",
-          description: "Includes hosting, security, and maintenance.",
-          button: {
-            text: "Get Started",
-            href: "#contact",
-          },
-          featuresTitle: "Included",
-          features: [
-            "Managed hosting",
-            "Daily backups",
-            "Updates",
-          ],
-        },
-      ]}
-      title="Simple Pricing"
-      description="One price to get started, or scale with us."
-    />
-  </div>
-
-  <div id="contact" data-section="contact">
-      <ContactSplitForm
-      useInvertedBackground={false}
-      title="Get more clients from your website"
-      description="Ready to transform your business? Reach out and we'll get started within 48 hours."
-      inputs={[
-        {
-          name: "name",
-          type: "text",
-          placeholder: "Your Name",
-        },
-        {
-          name: "email",
-          type: "email",
-          placeholder: "Email Address",
-        },
-      ]}
-      textarea={{
-        name: "message",
-        placeholder: "Tell us about your business",
-      }}
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bj4SeQ36hW7hIXFeC9pBJuRaqu/clean-workspace-for-a-local-business-own-1777764873676-f6c52a81.png"
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterBaseReveal
-      logoText="ClientFlow"
-      columns={[
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About",
-              href: "#",
-            },
-            {
-              label: "Contact",
-              href: "#contact",
-            },
-          ],
-        },
-        {
-          title: "Legal",
-          items: [
-            {
-              label: "Privacy",
-              href: "#",
-            },
-            {
-              label: "Terms",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-    />
-  </div>
+        <div id="footer" data-section="footer">
+            <FooterSimple
+              columns={[
+                {
+                  title: "Contact",                  items: [{ label: "Call +353 86 123 4567", href: "tel:+353861234567" }]
+                }
+              ]}
+              bottomLeftText="© 2024 ClientFlow"
+              bottomRightText="All Rights Reserved"
+            />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}