373 lines
12 KiB
TypeScript
373 lines
12 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';
|
|
|
|
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: "Pricing",
|
|
id: "pricing",
|
|
},
|
|
{
|
|
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="pricing" data-section="pricing">
|
|
<PricingCardNine
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
plans={[
|
|
{
|
|
id: "p1",
|
|
title: "Entry Plan",
|
|
price: "$499",
|
|
period: "one-time",
|
|
features: [
|
|
"Custom Design",
|
|
"Mobile Responsive",
|
|
"Speed Optimized",
|
|
],
|
|
button: {
|
|
text: "Select Plan",
|
|
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: "Hosting 1",
|
|
price: "$24",
|
|
period: "/mo",
|
|
features: [
|
|
"Fast Hosting",
|
|
"SSL Included",
|
|
"Maintenance",
|
|
],
|
|
button: {
|
|
text: "Select Plan",
|
|
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: "p3",
|
|
title: "Budget Plan",
|
|
price: "$249",
|
|
period: "one-time",
|
|
features: [
|
|
"Basic Design",
|
|
"Mobile Friendly",
|
|
],
|
|
button: {
|
|
text: "Select Plan",
|
|
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: "p4",
|
|
title: "Hosting 2",
|
|
price: "$49",
|
|
period: "/mo",
|
|
features: [
|
|
"Managed Hosting",
|
|
"Priority Support",
|
|
"Backups",
|
|
],
|
|
button: {
|
|
text: "Select Plan",
|
|
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 the best 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="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="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: "#",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
imageAlt="professional web development services"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|