Merge version_3 into main #4
248
src/app/page.tsx
248
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,181 +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}
|
||||
description="Forget bloated websites. We build streamlined digital flyers that focus on your core message and get results quickly."
|
||||
/>
|
||||
</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: "starting from €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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user