Update src/app/page.tsx
This commit is contained in:
380
src/app/page.tsx
380
src/app/page.tsx
@@ -1,196 +1,244 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
||||
import SplitAbout from '@/components/sections/about/SplitAbout';
|
||||
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import { CheckCircle, Mail } from 'lucide-react';
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||
import HeroLogo from "@/components/sections/hero/HeroLogo";
|
||||
import FeatureCardSeven from "@/components/sections/feature/FeatureCardSeven";
|
||||
import PricingCardEight from "@/components/sections/pricing/PricingCardEight";
|
||||
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
|
||||
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
|
||||
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
|
||||
import ContactText from "@/components/sections/contact/ContactText";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
import { Zap, Users, TrendingUp, Award } from "lucide-react";
|
||||
|
||||
const navItems = [
|
||||
{ name: 'Home', id: '/' },
|
||||
{ name: 'Services', id: '#services' },
|
||||
{ name: 'About', id: '#about' },
|
||||
{ name: 'Contact', id: '#contact' },
|
||||
];
|
||||
const Home = () => {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Portfolio", id: "/portfolio" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
|
||||
const features = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Professional Plumbing Services',
|
||||
description: 'Expert plumbing solutions for residential and commercial properties. From repairs to full system installations.',
|
||||
imageSrc: 'https://images.unsplash.com/photo-1585771724684-38269d6639fd?w=800&q=80',
|
||||
imageAlt: 'Professional plumbing services',
|
||||
icon: CheckCircle,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Quality Painting & Finishing',
|
||||
description: 'Interior and exterior painting with premium finishes. Transform your space with professional craftsmanship.',
|
||||
imageSrc: 'https://images.unsplash.com/photo-1564543645419-d59e79b6837d?w=800&q=80',
|
||||
imageAlt: 'Professional painting services',
|
||||
icon: CheckCircle,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Electrical System Installation',
|
||||
description: 'Licensed electrical work for all your home and business needs. Safety and reliability guaranteed.',
|
||||
imageSrc: 'https://images.unsplash.com/photo-1621905167918-48416bd8575a?w=800&q=80',
|
||||
imageAlt: 'Professional electrical services',
|
||||
icon: CheckCircle,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Flooring Solutions',
|
||||
description: 'Beautiful and durable flooring installations. Hardwood, tile, laminate, and more.',
|
||||
imageSrc: 'https://images.unsplash.com/photo-1577659645047-f726860106d7?w=800&q=80',
|
||||
imageAlt: 'Professional flooring services',
|
||||
icon: CheckCircle,
|
||||
},
|
||||
];
|
||||
const features = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Lightning Fast Performance", description: "Optimized for speed with advanced caching, lazy loading, and resource optimization. Achieve sub-second page loads.", imageSrc: "https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=500&h=500&fit=crop"},
|
||||
{
|
||||
id: 2,
|
||||
title: "Seamless User Experience", description: "Intuitive interface with smooth animations and responsive design. Works flawlessly on all devices.", imageSrc: "https://images.unsplash.com/photo-1633356122544-f134324ef6db?w=500&h=500&fit=crop"},
|
||||
{
|
||||
id: 3,
|
||||
title: "Intelligent Caching", description: "Smart caching strategies that reduce server load and bandwidth usage while improving response times significantly.", imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&h=500&fit=crop"},
|
||||
{
|
||||
id: 4,
|
||||
title: "Scalable Infrastructure", description: "Built to handle growth. Scales automatically to meet demand without compromising performance or reliability.", imageSrc: "https://images.unsplash.com/photo-1561070791-2526d30994b5?w=500&h=500&fit=crop"},
|
||||
];
|
||||
|
||||
const bulletPoints = [
|
||||
{
|
||||
title: '15 Years Experience',
|
||||
description: 'Trusted by thousands of homeowners in Richmond, VA with consistent quality and reliability.',
|
||||
icon: CheckCircle,
|
||||
},
|
||||
{
|
||||
title: 'Licensed & Insured',
|
||||
description: 'All our technicians are fully licensed, insured, and trained to the highest standards.',
|
||||
icon: CheckCircle,
|
||||
},
|
||||
{
|
||||
title: 'Free Estimates',
|
||||
description: 'No obligation quotes for all services. Transparent pricing with no hidden fees.',
|
||||
icon: CheckCircle,
|
||||
},
|
||||
];
|
||||
const plans = [
|
||||
{
|
||||
id: "starter", badge: "Great for Getting Started", price: "$29/mo", subtitle: "Perfect for small projects and prototypes", buttons: [{ text: "Get Started", href: "/contact" }],
|
||||
features: [
|
||||
"Up to 100K monthly requests", "5GB storage", "Basic analytics", "Email support"],
|
||||
},
|
||||
{
|
||||
id: "professional", badge: "Most Popular", badgeIcon: Zap,
|
||||
price: "$79/mo", subtitle: "Ideal for growing businesses", buttons: [{ text: "Start Free Trial", href: "/contact" }],
|
||||
features: [
|
||||
"Up to 1M monthly requests", "100GB storage", "Advanced analytics", "Priority support", "Custom domains"],
|
||||
},
|
||||
{
|
||||
id: "enterprise", badge: "For Scale", price: "Custom", subtitle: "Enterprise-grade performance", buttons: [{ text: "Contact Sales", href: "/contact" }],
|
||||
features: [
|
||||
"Unlimited requests", "Unlimited storage", "Real-time analytics", "24/7 phone support", "Custom integrations", "Dedicated account manager"],
|
||||
},
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: 'Services',
|
||||
items: [
|
||||
{ label: 'Plumbing', href: '#services' },
|
||||
{ label: 'Painting', href: '#services' },
|
||||
{ label: 'Electrical', href: '#services' },
|
||||
{ label: 'Flooring', href: '#services' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Company',
|
||||
items: [
|
||||
{ label: 'About Us', href: '#about' },
|
||||
{ label: 'Contact', href: '#contact' },
|
||||
{ label: 'Testimonials', href: '#' },
|
||||
{ label: 'Blog', href: '#' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Support',
|
||||
items: [
|
||||
{ label: 'Help Center', href: '#' },
|
||||
{ label: 'FAQ', href: '#' },
|
||||
{ label: 'Emergency Service', href: 'tel:804-938-0669' },
|
||||
{ label: 'Schedule Service', href: '#contact' },
|
||||
],
|
||||
},
|
||||
];
|
||||
const metrics = [
|
||||
{
|
||||
id: "1", icon: TrendingUp,
|
||||
title: "Performance", value: "99.99%"},
|
||||
{
|
||||
id: "2", icon: Zap,
|
||||
title: "Speed", value: "<100ms"},
|
||||
{
|
||||
id: "3", icon: Users,
|
||||
title: "Users", value: "50K+"},
|
||||
{
|
||||
id: "4", icon: Award,
|
||||
title: "Uptime", value: "99.9%"},
|
||||
];
|
||||
|
||||
const testimonials = [
|
||||
{
|
||||
id: "1", name: "Sarah Johnson", imageSrc: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop"},
|
||||
{
|
||||
id: "2", name: "Michael Chen", imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop"},
|
||||
{
|
||||
id: "3", name: "Emma Davis", imageSrc: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop"},
|
||||
{
|
||||
id: "4", name: "James Wilson", imageSrc: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop"},
|
||||
];
|
||||
|
||||
const faqs = [
|
||||
{
|
||||
id: "1", title: "How do I get started?", content:
|
||||
"Getting started is easy! Sign up for a free account, choose your plan, and follow our setup guide. You'll be up and running in minutes."},
|
||||
{
|
||||
id: "2", title: "What makes your service fast?", content:
|
||||
"We use advanced caching strategies, CDN distribution, and optimized infrastructure to ensure lightning-fast performance across all regions."},
|
||||
{
|
||||
id: "3", title: "Can I upgrade or downgrade anytime?", content:
|
||||
"Absolutely! You can change your plan at any time. Upgrades take effect immediately, and downgrades apply at the next billing cycle."},
|
||||
{
|
||||
id: "4", title: "What support do you offer?", content:
|
||||
"We provide email support for all plans, priority support for Professional and above, and 24/7 phone support for Enterprise customers."},
|
||||
{
|
||||
id: "5", title: "Is my data secure?", content:
|
||||
"Yes, we use enterprise-grade security with encryption at rest and in transit. All data is backed up daily and complies with industry standards."},
|
||||
{
|
||||
id: "6", title: "Do you offer a free trial?", content:
|
||||
"Yes! We offer a 14-day free trial with full access to all Professional features. No credit card required to get started."},
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Product", items: [
|
||||
{ label: "Features", href: "#features" },
|
||||
{ label: "Pricing", href: "#pricing" },
|
||||
{ label: "Security", href: "#security" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About", href: "/" },
|
||||
{ label: "Blog", href: "/" },
|
||||
{ label: "Careers", href: "/" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{ label: "Documentation", href: "/" },
|
||||
{ label: "API Reference", href: "/" },
|
||||
{ label: "Support", href: "/" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="mediumLarge"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<NavbarStyleFullscreen
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={navItems}
|
||||
brandName="Earl Boys Services"
|
||||
bottomLeftText="Richmond, VA"
|
||||
bottomRightText="804-938-0669"
|
||||
brandName="Fast"
|
||||
button={{ text: "Get Started", href: "contact" }}
|
||||
/>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{ variant: 'radial-gradient' }}
|
||||
title="Professional Home Services in Richmond, VA"
|
||||
description="Expert plumbing, painting, electrical, and flooring services you can trust. 15 years of excellence."
|
||||
tag="Trusted Local Service"
|
||||
mediaItems={[
|
||||
{ imageSrc: 'https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=600&q=80', imageAlt: 'Professional home services' },
|
||||
{ imageSrc: 'https://images.unsplash.com/photo-1585771724684-38269d6639fd?w=600&q=80', imageAlt: 'Plumbing expertise' },
|
||||
{ imageSrc: 'https://images.unsplash.com/photo-1564543645419-d59e79b6837d?w=600&q=80', imageAlt: 'Quality painting' },
|
||||
]}
|
||||
mediaAnimation="none"
|
||||
<HeroLogo
|
||||
logoText="Fast"
|
||||
description="Optimized performance and lightning-fast load times for your website"
|
||||
buttons={[
|
||||
{ text: 'Get Free Estimate', href: '#contact' },
|
||||
{ text: 'Call Now', href: 'tel:804-938-0669' },
|
||||
{ text: "Start Free Trial", href: "/contact" },
|
||||
{ text: "View Docs", href: "/" },
|
||||
]}
|
||||
imageSrc="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=1200&h=600&fit=crop"
|
||||
imageAlt="Fast performance illustration"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardSeven
|
||||
features={features}
|
||||
title="Our Services"
|
||||
description="Comprehensive home services tailored to your needs. Quality workmanship and professional service."
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
<div id="features" data-section="features">
|
||||
<div className="py-20">
|
||||
<FeatureCardSeven
|
||||
title="Why Choose Our Platform"
|
||||
description="We deliver exceptional performance and speed optimization for your business"
|
||||
features={features}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
title="Why Choose Earl Boys Services?"
|
||||
description="With over 15 years in the home services industry, we've built our reputation on reliability, expertise, and customer satisfaction. Our team of licensed professionals is dedicated to delivering exceptional results on every project."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
mediaAnimation="none"
|
||||
bulletPoints={bulletPoints}
|
||||
imageSrc="https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=600&q=80"
|
||||
imageAlt="Our team of professionals"
|
||||
imagePosition="right"
|
||||
buttons={[{ text: 'Learn More', href: '#contact' }]}
|
||||
/>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<div className="py-20">
|
||||
<MetricCardThree
|
||||
title="Our Performance Metrics"
|
||||
description="Industry-leading uptime and speed performance"
|
||||
metrics={metrics}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<div className="py-20">
|
||||
<PricingCardEight
|
||||
title="Simple, Transparent Pricing"
|
||||
description="Choose the perfect plan for your needs"
|
||||
plans={plans}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<div className="py-20">
|
||||
<TestimonialCardTwelve
|
||||
testimonials={testimonials}
|
||||
cardTitle="Join 50,000+ satisfied customers who trust our platform"
|
||||
cardTag="Customer Testimonials"
|
||||
cardAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<div className="py-20">
|
||||
<FaqSplitMedia
|
||||
faqs={faqs}
|
||||
imageSrc="https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop"
|
||||
imageAlt="FAQ support"
|
||||
title="Frequently Asked Questions"
|
||||
description="Find answers to common questions about our service"
|
||||
textboxLayout="default"
|
||||
faqsAnimation="slide-up"
|
||||
mediaAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
tag="Get In Touch"
|
||||
title="Schedule Your Free Estimate"
|
||||
description="Contact us today for a free, no-obligation estimate. Our team is ready to help with all your home service needs."
|
||||
background={{ variant: 'sparkles-gradient' }}
|
||||
useInvertedBackground={false}
|
||||
mediaAnimation="none"
|
||||
imageSrc="https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=600&q=80"
|
||||
imageAlt="Professional team"
|
||||
mediaPosition="right"
|
||||
buttonText="Request Quote"
|
||||
inputPlaceholder="Enter your email"
|
||||
onSubmit={(email) => {
|
||||
console.log('Email submitted:', email);
|
||||
}}
|
||||
<div className="py-20">
|
||||
<ContactText
|
||||
text="Ready to optimize your website performance? Start your free trial today and experience the difference."
|
||||
animationType="entrance-slide"
|
||||
buttons={[
|
||||
{ text: "Start Free Trial", href: "/contact" },
|
||||
{ text: "Schedule Demo", href: "/" },
|
||||
]}
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Fast"
|
||||
columns={footerColumns}
|
||||
copyrightText="© 2025 Fast. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<footer data-section="footer">
|
||||
<FooterSimple
|
||||
columns={footerColumns}
|
||||
bottomLeftText="© 2025 Earl Boys Services LLC. All rights reserved."
|
||||
bottomRightText="Serving Richmond, VA with Professional Home Services"
|
||||
/>
|
||||
</footer>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default Home;
|
||||
Reference in New Issue
Block a user