bender/3cab58d7-85ee-427f-8ed2-10680274a561
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: bender:version_2
Branches Tags
bender:main bender:version_3 bender:version_2 bender:version_1
...
pull from: bender:version_3
Branches Tags
bender:main bender:version_3 bender:version_2 bender:version_1

3 Commits
version_2 ... version_3

Author SHA1 Message Date
bender
dd6a05e8ab Update src/app/page.tsx 2026-05-02 23:48:59 +00:00
bender
e93cbab485 Update src/app/page.tsx 2026-05-02 23:48:33 +00:00
bender
4553bf5eb8 Merge version_2 into main 
Merge version_2 into main
 2026-05-02 23:42:36 +00:00
1 changed files with 70 additions and 177 deletions
Expand all files Collapse all files

247
src/app/page.tsx
View File

@@ -2,14 +2,13 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react"; import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm'; import ContactText from '@/components/sections/contact/ContactText';
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree'; import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal'; import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroLogo from '@/components/sections/hero/HeroLogo'; import HeroSplit from '@/components/sections/hero/HeroSplit';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven'; import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen'; import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive'; import { Phone } from "lucide-react";
export default function LandingPage() { export default function LandingPage() {
return ( return (
@@ -26,181 +25,75 @@ export default function LandingPage() {
headingFontWeight="semibold" headingFontWeight="semibold"
> >
<ReactLenis root> <ReactLenis root>
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarStyleFullscreen <NavbarStyleFullscreen
navItems={[ navItems={[
{ { name: "About", id: "problem" },
name: "Solution", id: "solution"}, { name: "Benefits", id: "solution" },
{ { name: "Contact", id: "contact" },
name: "Pricing", id: "pricing"}, ]}
{ brandName="ClientFlow"
name: "Contact", id: "contact"}, />
]} </div>
brandName="ClientFlow"
/>
</div>
<div id="hero" data-section="hero"> <div id="hero" data-section="hero">
<HeroLogo <HeroSplit
logoText="ClientFlow" title="High-Conversion Web Flyers"
description="More clients from your website in 48 hours. We build fast, simple, mobile-first pages that turn visitors into bookings." description="Get your business online with a fast, mobile-first digital flyer that turns visitors into clients."
buttons={[ background={{ variant: 'sparkles-gradient' }}
{ buttons={[{ text: "Call Now", href: "tel:+353861234567" }]}
text: "Get a free audit", href: "#contact"}, 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"
text: "See example", href: "#proof"}, mediaAnimation="slide-up"
]} />
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bj4SeQ36hW7hIXFeC9pBJuRaqu/a-minimalist-high-contrast-professional--1777764836161-95425c75.png?_wi=1" </div>
imageAlt="ClientFlow Mobile Web Design"
/>
</div>
<div id="problem" data-section="problem"> <div id="problem" data-section="problem">
<MetricSplitMediaAbout <InlineImageSplitTextAbout
useInvertedBackground={false} heading={[{ type: 'text', content: "Simple, Effective Communication" }]}
title="Why your current site is losing customers" useInvertedBackground={true}
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={[ </div>
{
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="solution" data-section="solution"> <div id="solution" data-section="solution">
<FeatureCardTwentyThree <FeatureCardTwentyFive
animationType="slide-up" animationType="slide-up"
textboxLayout="split" textboxLayout="split"
useInvertedBackground={false} useInvertedBackground={false}
features={[ title="Why choose a digital flyer?"
{ description="Minimalist design, maximum impact."
id: "f1", title: "Conversion Focus", tags: [ features={[
"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"}, title: "Mobile First", description: "Perfectly optimized for phone users on the go.", icon: Phone,
{ mediaItems: [
id: "f2", title: "Clear Call to Action", tags: [ { 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" },
"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" }
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"}, </div>
]}
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="what-you-get" data-section="what-you-get"> <div id="contact" data-section="contact">
<FeatureCardTwentyThree <ContactText
animationType="slide-up" text="Ready to get started? Reach out to us now."
textboxLayout="default" buttons={[{ text: "Call: +353 86 123 4567", href: "tel:+353861234567" }]}
useInvertedBackground={false} background={{ variant: 'sparkles-gradient' }}
features={[ useInvertedBackground={false}
{ />
id: "g1", title: "Conversion Landing Page", tags: [ </div>
"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="proof" data-section="proof"> <div id="footer" data-section="footer">
<MetricCardEleven <FooterSimple
animationType="slide-up" columns={[
textboxLayout="split" {
useInvertedBackground={false} title: "Contact", items: [{ label: "Call +353 86 123 4567", href: "tel:+353861234567" }]
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"}, bottomLeftText="© 2024 ClientFlow"
]} bottomRightText="All Rights Reserved"
title="Before vs After" />
description="Witness the transformation from a static site to a client-winning machine." </div>
/>
</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>
</ReactLenis> </ReactLenis>
</ThemeProvider> </ThemeProvider>
); );