217 lines
10 KiB
TypeScript
217 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import AboutMetric from '@/components/sections/about/AboutMetric';
|
|
import ContactFaq from '@/components/sections/contact/ContactFaq';
|
|
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
|
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
|
|
import { Phone, ShieldCheck, Target, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="expand-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="mediumSmall"
|
|
sizing="large"
|
|
background="noiseDiagonalGradient"
|
|
cardStyle="solid"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "hero"},
|
|
{
|
|
name: "Benefits", id: "features"},
|
|
{
|
|
name: "Pricing", id: "pricing"},
|
|
{
|
|
name: "Contact", id: "contact"},
|
|
]}
|
|
brandName="LocalWebBuilder"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDoubleCarousel
|
|
background={{
|
|
variant: "sparkles-gradient"}}
|
|
title="Affordable Websites for Your Business "
|
|
description="We build clean, professional websites for local businesses—fast and for just $1,000."
|
|
leftCarouselItems={[
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BB8CeXddNvgv6jv6dOKu0LBwDK/uploaded-1775101692393-y2hn15y5.png", imageAlt: "Professional web design"},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BB8CeXddNvgv6jv6dOKu0LBwDK/uploaded-1775101655925-lwi3xxqq.png", imageAlt: "Local business digital solution"},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BB8CeXddNvgv6jv6dOKu0LBwDK/uploaded-1775101791721-dimo1et1.png", imageAlt: "Fast turnaround web build"},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BB8CeXddNvgv6jv6dOKu0LBwDK/uploaded-1775101763875-3yogh50p.png", imageAlt: "Mobile optimized websites"},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BB8CeXddNvgv6jv6dOKu0LBwDK/uploaded-1775101228683-8ks7gg45.png", imageAlt: "Result focused design"},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BB8CeXddNvgv6jv6dOKu0LBwDK/uploaded-1775101750913-272ubim8.png", imageAlt: "Grow your local brand"},
|
|
]}
|
|
rightCarouselItems={[
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BB8CeXddNvgv6jv6dOKu0LBwDK/uploaded-1775102043053-3ihsfp80.png", imageAlt: "Professional web design"},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BB8CeXddNvgv6jv6dOKu0LBwDK/uploaded-1775101878287-0u67ofgr.png", imageAlt: "Local business digital solution"},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BB8CeXddNvgv6jv6dOKu0LBwDK/uploaded-1775101773914-fe0jbuh7.png", imageAlt: "Fast turnaround web build"},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BB8CeXddNvgv6jv6dOKu0LBwDK/a-professional-local-business-owner-look-1775100446329-6aaf6a09.png?_wi=10", imageAlt: "Mobile optimized websites"},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BB8CeXddNvgv6jv6dOKu0LBwDK/uploaded-1775101810845-guh4jhuy.png", imageAlt: "Result focused design"},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BB8CeXddNvgv6jv6dOKu0LBwDK/uploaded-1775102101244-9m0jtmkd.png", imageAlt: "Grow your local brand"},
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "Call Now: 970-216-3712", href: "tel:9702163712"},
|
|
{
|
|
text: "Get Started Today", href: "#contact"},
|
|
]}
|
|
avatars={[
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BB8CeXddNvgv6jv6dOKu0LBwDK/uploaded-1775102119159-6xlxd6yg.png", alt: "Customer 1"},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BB8CeXddNvgv6jv6dOKu0LBwDK/uploaded-1775102119159-6xlxd6yg.png", alt: "Customer 2"},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BB8CeXddNvgv6jv6dOKu0LBwDK/uploaded-1775102119159-6xlxd6yg.png", alt: "Customer 3"},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BB8CeXddNvgv6jv6dOKu0LBwDK/uploaded-1775102119159-6xlxd6yg.png", alt: "Customer 4"},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BB8CeXddNvgv6jv6dOKu0LBwDK/uploaded-1775102119159-6xlxd6yg.png", alt: "Customer 5"},
|
|
]}
|
|
avatarText="Trusted by 500+ local businesses"
|
|
marqueeItems={[
|
|
{
|
|
type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BB8CeXddNvgv6jv6dOKu0LBwDK/abstract-representation-of-website-speed-1775100445776-bc616a30.png", alt: "Partner 1"},
|
|
{
|
|
type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BB8CeXddNvgv6jv6dOKu0LBwDK/iconic-representation-of-mobile-first-re-1775100446807-6d736569.png", alt: "Partner 2"},
|
|
{
|
|
type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BB8CeXddNvgv6jv6dOKu0LBwDK/concept-of-lead-generation-and-customer--1775100450365-d441981b.png", alt: "Partner 3"},
|
|
{
|
|
type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BB8CeXddNvgv6jv6dOKu0LBwDK/abstract-representation-of-website-speed-1775100445776-bc616a30.png", alt: "Partner 4"},
|
|
{
|
|
type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BB8CeXddNvgv6jv6dOKu0LBwDK/iconic-representation-of-mobile-first-re-1775100446807-6d736569.png", alt: "Partner 5"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<AboutMetric
|
|
useInvertedBackground={false}
|
|
title="Built for Local Success"
|
|
metrics={[
|
|
{
|
|
icon: Zap,
|
|
label: "Turnaround", value: "Fast"},
|
|
{
|
|
icon: Target,
|
|
label: "Focus", value: "Leads"},
|
|
{
|
|
icon: ShieldCheck,
|
|
label: "Trust", value: "Local"},
|
|
]}
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwelve
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: "f1", label: "Performance", title: "High-Speed Websites", items: [
|
|
"Optimized load times", "Search engine ready", "Clean code structure"],
|
|
},
|
|
{
|
|
id: "f2", label: "Mobile", title: "Fully Responsive", items: [
|
|
"Looks great on all devices", "Mobile-first navigation", "Fast interactions"],
|
|
},
|
|
{
|
|
id: "f3", label: "Growth", title: "Lead-Driven Design", items: [
|
|
"Strategic CTA placement", "High conversion forms", "Click-to-call focus"],
|
|
},
|
|
]}
|
|
title="Why Choose Our Service"
|
|
description="Simple solutions built to help your business reach more local customers effectively."
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
plans={[
|
|
{
|
|
id: "basic", name: "Complete Website Build", price: "$1,000", features: [
|
|
"Full design & build", "Mobile optimization", "Lead capture forms", "SEO structure"],
|
|
buttons: [
|
|
{
|
|
text: "Get Started", href: "#contact"},
|
|
],
|
|
},
|
|
{
|
|
id: "deposit", name: "Down Payment", price: "$500", features: [
|
|
"Required to start", "Instant project kickoff", "Secure payment link"],
|
|
buttons: [
|
|
{
|
|
text: "Pay Deposit", href: "https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=YOUR_BUTTON_ID"},
|
|
],
|
|
},
|
|
]}
|
|
title="Transparent Pricing"
|
|
description="Affordable flat-fee pricing with no hidden costs."
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactFaq
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "q1", title: "How fast is the turnaround?", content: "We prioritize fast delivery, usually within 1-2 weeks."},
|
|
{
|
|
id: "q2", title: "What's the process?", content: "Consultation, deposit, design, launch. We handle the technical side."},
|
|
{
|
|
id: "q3", title: "Are there monthly fees?", content: "The $1,000 is a one-time build fee. We can discuss maintenance separately."},
|
|
]}
|
|
ctaTitle="Ready to get started?"
|
|
ctaDescription="Call us at 970-216-3712 or fill out the form to secure your spot today."
|
|
ctaButton={{
|
|
text: "Contact Us", onClick: () => {
|
|
const element = document.getElementById("contact");
|
|
element?.scrollIntoView({ behavior: "smooth" });
|
|
}}},
|
|
ctaIcon={Phone}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="LocalWebBuilder"
|
|
copyrightText="© 2025 LocalWebBuilder - All Rights Reserved"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|