339 lines
17 KiB
TypeScript
339 lines
17 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
|
|
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
|
|
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import { Brush, Server, Lock, BarChart2, Activity, Smartphone, Palette, LifeBuoy } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="smallMedium"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="floatingGradient"
|
|
cardStyle="gradient-mesh"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="bold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "hero"},
|
|
{
|
|
name: "Features", id: "features"},
|
|
{
|
|
name: "What You Get", id: "what-customers-get"},
|
|
{
|
|
name: "Pricing", id: "pricing"},
|
|
{
|
|
name: "Why it Matters", id: "why-this-matters"},
|
|
{
|
|
name: "Testimonials", id: "testimonials"},
|
|
{
|
|
name: "Contact", id: "contact"},
|
|
]}
|
|
brandName="AgencyBuilder"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroCarouselLogo
|
|
logoText="AgencyBuilder"
|
|
description="We build high-converting websites for service companies. Get a professional site for your roofing, HVAC, or construction business today."
|
|
buttons={[
|
|
{
|
|
text: "Get Started", href: "#contact"},
|
|
]}
|
|
slides={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/programer-coding-laptop-sitting-down-desk-with-computer-screens-parsing-code-software-agency-software-developer-compiling-algorithms-with-cloud-programers-working-background_482257-43993.jpg?_wi=1", imageAlt: "professional web development services"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/abstract-background-pastel-vintage-gradient-white-pastel-background-used-variety-design-tasks-is-beautiful-blur-background_1258-82992.jpg?_wi=1", imageAlt: "website building tools screen"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/minimal-style-device-screen_23-2151913289.jpg?_wi=1", imageAlt: "digital agency office computer"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/production-manufacture-process-chart-diagram_53876-120646.jpg", imageAlt: "web studio office workspace"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/architectural-designer-works-digital-home-design-project_482257-119491.jpg", imageAlt: "modern website dev agency"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/management-verifying-task-progress_482257-80309.jpg", imageAlt: "creative web agency laptop"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentySeven
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: "f1", title: "Lightning Fast", descriptions: [
|
|
"Optimized code for maximum speed."],
|
|
imageSrc: "http://img.b2bpic.net/free-vector/programming-background-design_1223-79.jpg"},
|
|
{
|
|
id: "f2", title: "Mobile Responsive", descriptions: [
|
|
"Perfect display on all devices."],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/closeup-hands-using-mobile-phone-computer-laptop-black-marble-table_53876-41688.jpg"},
|
|
{
|
|
id: "f3", title: "Secure & Reliable", descriptions: [
|
|
"Industry standard security included."],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/virus-detected-alert-hacking-piracy-risk-shield-concept_53876-133656.jpg"},
|
|
]}
|
|
title="Why Choose Our Websites?"
|
|
description="Professional solutions designed to grow your service business."
|
|
/>
|
|
</div>
|
|
|
|
<div id="what-customers-get" data-section="what-customers-get">
|
|
<FeatureCardOne
|
|
animationType="slide-up"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={true}
|
|
title="What Our Customers Get"
|
|
description="Comprehensive web solutions designed for growth and peace of mind."
|
|
features={[
|
|
{
|
|
title: "Website Build", description: "A custom-designed, high-converting website tailored to your business.", imageSrc: "http://img.b2bpic.net/free-photo/programer-coding-laptop-sitting-down-desk-with-computer-screens-parsing-code-software-agency-software-developer-compiling-algorithms-with-cloud-programers-working-background_482257-43993.jpg", imageAlt: "website development agency"
|
|
},
|
|
{
|
|
title: "Hosting", description: "Reliable, fast, and secure hosting to keep your site online 24/7.", imageSrc: "http://img.b2bpic.net/free-photo/data-center-server-room-fiber-optic-cables-blazing-fast-connection-technologies_188544-23963.jpg", imageAlt: "server racks for website hosting"
|
|
},
|
|
{
|
|
title: "SSL Certificate", description: "Essential security for your website, ensuring visitor data protection.", imageSrc: "http://img.b2bpic.net/free-photo/padlock-internet-security-concept_53876-28952.jpg", imageAlt: "padlock for SSL security"
|
|
},
|
|
{
|
|
title: "Analytics", description: "Track website performance and understand your audience with integrated analytics.", imageSrc: "http://img.b2bpic.net/free-photo/business-graph-financial-analysis_53876-13233.jpg", imageAlt: "analytics dashboard with charts"
|
|
},
|
|
{
|
|
title: "Uptime Monitoring", description: "Proactive monitoring to ensure your website is always available to customers.", imageSrc: "http://img.b2bpic.net/free-photo/young-man-desk-with-laptop-watching-stock-market-data-online_1268-16479.jpg", imageAlt: "monitor showing website uptime"
|
|
},
|
|
{
|
|
title: "Mobile Optimization", description: "Flawless display and functionality across all devices, from desktops to smartphones.", imageSrc: "http://img.b2bpic.net/free-photo/various-devices-set_23-2148127027.jpg", imageAlt: "various devices showing responsive website"
|
|
},
|
|
{
|
|
title: "Clean Professional Design", description: "Modern, intuitive design that reflects your brand's professionalism.", imageSrc: "http://img.b2bpic.net/free-photo/minimal-style-device-screen_23-2151913289.jpg", imageAlt: "modern clean website design"
|
|
},
|
|
{
|
|
title: "Simple Support", description: "Dedicated, easy-to-reach support whenever you need assistance.", imageSrc: "http://img.b2bpic.net/free-photo/young-bald-call-center-man-wearing-headset-sitting-desk-with-work-tools-isolated-purple-background_141793-84945.jpg", imageAlt: "customer support representative"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardNine
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
plans={[
|
|
{
|
|
id: "p1", title: "Build: Entry Plan", price: "$499", period: "one-time", features: [
|
|
"Custom Design", "Mobile Responsive", "Speed Optimized"],
|
|
button: {
|
|
text: "Select Build", href: "#contact"},
|
|
imageSrc: "http://img.b2bpic.net/free-photo/human-face-with-music-note-design-3d-rendered-illustration_460848-11274.jpg", imageAlt: "minimalist logo construction company"},
|
|
{
|
|
id: "p2", title: "Build: Budget Plan", price: "$249", period: "one-time", features: [
|
|
"Basic Design", "Mobile Friendly"],
|
|
button: {
|
|
text: "Select Build", href: "#contact"},
|
|
imageSrc: "http://img.b2bpic.net/free-photo/abstract-background-pastel-vintage-gradient-white-pastel-background-used-variety-design-tasks-is-beautiful-blur-background_1258-82992.jpg?_wi=2", imageAlt: "minimalist logo construction company"},
|
|
{
|
|
id: "p3", title: "Hosting: Standard", price: "$24", period: "/mo", features: [
|
|
"Fast Hosting", "SSL Included", "Maintenance"],
|
|
button: {
|
|
text: "Select Hosting", href: "#contact"},
|
|
imageSrc: "http://img.b2bpic.net/free-photo/programer-coding-laptop-sitting-down-desk-with-computer-screens-parsing-code-software-agency-software-developer-compiling-algorithms-with-cloud-programers-working-background_482257-43993.jpg?_wi=2", imageAlt: "minimalist logo construction company"},
|
|
{
|
|
id: "p4", title: "Hosting: Managed", price: "$49", period: "/mo", features: [
|
|
"Managed Hosting", "Priority Support", "Backups"],
|
|
button: {
|
|
text: "Select Hosting", href: "#contact"},
|
|
imageSrc: "http://img.b2bpic.net/free-photo/minimal-style-device-screen_23-2151913289.jpg?_wi=2", imageAlt: "minimalist logo construction company"},
|
|
]}
|
|
title="Simple Pricing"
|
|
description="Choose a build project and a hosting plan for your business needs."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "m1", value: "100+", description: "Websites Delivered"},
|
|
{
|
|
id: "m2", value: "99.9%", description: "Uptime Guaranteed"},
|
|
{
|
|
id: "m3", value: "24/7", description: "Support Available"},
|
|
]}
|
|
title="Our Impact"
|
|
description="Numbers that drive growth for our clients."
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={[
|
|
"RoofCo", "HVAC Pros", "FixIt Fast", "Modern Plumbing", "Elite Construction", "Green Lawn", "Top Paint"]}
|
|
title="Trusted by Pros"
|
|
description="Industry leaders trust our web solutions."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
useInvertedBackground={false}
|
|
testimonial="Amazing service! The website they built brought in so many more leads for my roofing business."
|
|
rating={5}
|
|
author="John Doe, Roofing Pro"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/positive-confident-business-coach-posing-training-room_74855-3026.jpg", alt: "professional business owner portrait"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/portrait-man-black-suit_23-2148401442.jpg", alt: "hvac service business owner"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/closeup-focus-shot-handsome-adult-man-sitting-pier_181624-30113.jpg", alt: "happy roofing company owner"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/elegant-smiling-man-typing-computer_23-2147580170.jpg", alt: "portrait of business professional"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/young-bald-call-center-man-wearing-headset-sitting-desk-with-work-tools-isolated-purple-background_141793-84945.jpg", alt: "professional business owner portrait"},
|
|
]}
|
|
ratingAnimation="slide-up"
|
|
avatarsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="why-this-matters" data-section="why-this-matters">
|
|
<MetricSplitMediaAbout
|
|
useInvertedBackground={false}
|
|
title="Why a Strong Website Matters for Your Small Business"
|
|
description="In today's digital age, your website is often the first impression potential customers have of your business. A professional, high-performing website isn't just an online brochure; it's a powerful tool for lead generation, brand building, and customer engagement. It establishes credibility, showcases your services, and provides an accessible platform for customers to learn about you 24/7. Don't let an outdated or non-existent website hold your business back."
|
|
imageSrc="http://img.b2bpic.net/free-photo/minimal-style-device-screen_23-2151913289.jpg"
|
|
imageAlt="business owner looking at website on screen"
|
|
mediaAnimation="slide-up"
|
|
metricsAnimation="slide-up"
|
|
metrics={[]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "q1", title: "How fast is delivery?", content: "Usually within 7-10 business days."},
|
|
{
|
|
id: "q2", title: "Can I edit the site?", content: "Yes, we provide easy editing tools."},
|
|
{
|
|
id: "q3", title: "What about hosting?", content: "We offer reliable hosting for your site."},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/close-up-customer-support-worker-wearing-headset-following-call-script_482257-125782.jpg"
|
|
title="Common Questions"
|
|
description="Everything you need to know about our services."
|
|
faqsAnimation="slide-up"
|
|
imageAlt="customer support representative office"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "radial-gradient"}}
|
|
tag="Contact Us"
|
|
title="Ready to Start?"
|
|
description="Send us a message and we'll be in touch shortly."
|
|
/>
|
|
</div>
|
|
|
|
<div id="final-cta" data-section="final-cta">
|
|
<ContactText
|
|
background={{
|
|
variant: "sparkles-gradient"}}
|
|
text="Ready to make your business look professional online?"
|
|
buttons={[
|
|
{
|
|
text: "Start for $97/month", href: "#contact"
|
|
}
|
|
]}
|
|
animationType="entrance-slide"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="http://img.b2bpic.net/free-photo/focused-software-developer-writing-code-laptop-looking-multiple-screens-with-programming-language-is-interrupted-by-colleague-coder-asking-advice-programmers-doing-online-cloud-computing_482257-33386.jpg"
|
|
logoText="AgencyBuilder"
|
|
columns={[
|
|
{
|
|
title: "Company", items: [
|
|
{
|
|
label: "About", href: "#"},
|
|
{
|
|
label: "Careers", href: "#"},
|
|
],
|
|
},
|
|
{
|
|
title: "Services", items: [
|
|
{
|
|
label: "Web Design", href: "#"},
|
|
{
|
|
label: "Hosting", href: "#"},
|
|
],
|
|
},
|
|
{
|
|
title: "Solutions", items: [
|
|
{
|
|
label: "What You Get", href: "#what-customers-get"
|
|
},
|
|
{
|
|
label: "Why it Matters", href: "#why-this-matters"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: "Support", items: [
|
|
{
|
|
label: "FAQ", href: "#faq"
|
|
},
|
|
{
|
|
label: "Contact", href: "#contact"
|
|
}
|
|
]
|
|
}
|
|
]}
|
|
imageAlt="professional web development services"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |