Switch to version 4: modified src/app/page.tsx
This commit is contained in:
412
src/app/page.tsx
412
src/app/page.tsx
@@ -1,294 +1,196 @@
|
||||
"use client";
|
||||
'use client';
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
|
||||
import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
|
||||
import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
|
||||
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
|
||||
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
||||
import FaqDouble from "@/components/sections/faq/FaqDouble";
|
||||
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
|
||||
import FooterCard from "@/components/sections/footer/FooterCard";
|
||||
import { Sparkles, CheckCircle, Star, MapPin, Shield, Users, TrendingUp, Zap, Facebook, Instagram, Linkedin } from "lucide-react";
|
||||
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';
|
||||
|
||||
export default function HomePage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Features", id: "#features" },
|
||||
{ name: "Pricing", id: "#pricing" },
|
||||
{ name: "Services", id: "/services" },
|
||||
];
|
||||
const navItems = [
|
||||
{ name: 'Home', id: '/' },
|
||||
{ name: 'Services', id: '#services' },
|
||||
{ name: 'About', id: '#about' },
|
||||
{ name: 'Contact', id: '#contact' },
|
||||
];
|
||||
|
||||
const contactButton = {
|
||||
text: "Get Started", href: "#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 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 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' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="mediumLargeSizeLargeTitles"
|
||||
background="aurora"
|
||||
contentWidth="medium"
|
||||
sizing="mediumLarge"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={navItems}
|
||||
button={contactButton}
|
||||
brandName="Demo Site"
|
||||
/>
|
||||
</div>
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="Earl Boys Services"
|
||||
bottomLeftText="Richmond, VA"
|
||||
bottomRightText="804-938-0669"
|
||||
/>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardDashboard
|
||||
title="Real-Time Analytics Platform"
|
||||
description="Monitor your business metrics with our comprehensive dashboard. Real-time data, actionable insights, and beautiful visualizations."
|
||||
tag="Live Analytics"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "radial-gradient" }}
|
||||
<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"
|
||||
buttons={[
|
||||
{ text: "Get Started", href: "#pricing" },
|
||||
{ text: "View Demo", href: "#features" },
|
||||
{ text: 'Get Free Estimate', href: '#contact' },
|
||||
{ text: 'Call Now', href: 'tel:804-938-0669' },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
dashboard={{
|
||||
title: "Analytics Dashboard", logoIcon: TrendingUp,
|
||||
imageSrc: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face", buttons: [
|
||||
{ text: "Dashboard", href: "#" },
|
||||
{ text: "Export", href: "#" },
|
||||
],
|
||||
sidebarItems: [
|
||||
{ icon: TrendingUp, active: true },
|
||||
{ icon: Users },
|
||||
{ icon: Zap },
|
||||
],
|
||||
stats: [
|
||||
{
|
||||
title: "Revenue", values: [245890, 312750, 428500],
|
||||
valuePrefix: "$", description: "Monthly recurring."
|
||||
},
|
||||
{
|
||||
title: "Users", values: [1240, 2150, 3890],
|
||||
description: "Active users online."
|
||||
},
|
||||
{
|
||||
title: "Growth", values: [12.5, 18.3, 25.6],
|
||||
valueSuffix: "%", description: "Month-over-month."
|
||||
},
|
||||
],
|
||||
chartTitle: "Performance Trend", chartData: [
|
||||
{ value: 50 },
|
||||
{ value: 30 },
|
||||
{ value: 70 },
|
||||
{ value: 40 },
|
||||
{ value: 90 },
|
||||
],
|
||||
listTitle: "Recent Transactions", listItems: [
|
||||
{ icon: CheckCircle, title: "Order #12345", status: "Completed" },
|
||||
{ icon: TrendingUp, title: "Revenue Report", status: "Generated" },
|
||||
{ icon: Users, title: "Team Metrics", status: "Updated" },
|
||||
],
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardThree
|
||||
features={[
|
||||
{
|
||||
id: "01", title: "Real-Time Tracking", description: "Monitor your metrics as they happen with live updates and instant notifications.", imageSrc: "https://images.unsplash.com/photo-1460925895917-adf4198c868f?w=500&h=500&fit=crop", imageAlt: "Real-time dashboard tracking"
|
||||
},
|
||||
{
|
||||
id: "02", title: "Advanced Analytics", description: "Deep dive into data with customizable reports and predictive insights.", imageSrc: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=500&h=500&fit=crop", imageAlt: "Advanced analytics interface"
|
||||
},
|
||||
{
|
||||
id: "03", title: "Team Collaboration", description: "Work together seamlessly with shared dashboards and real-time updates.", imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&h=500&fit=crop", imageAlt: "Team collaboration tools"
|
||||
},
|
||||
{
|
||||
id: "04", title: "Custom Reports", description: "Generate detailed reports tailored to your business needs and export easily.", imageSrc: "https://images.unsplash.com/photo-1611532736592-5a66f6aef2a2?w=500&h=500&fit=crop", imageAlt: "Custom report generation"
|
||||
},
|
||||
]}
|
||||
title="Powerful Features"
|
||||
description="Everything you need to manage your business effectively"
|
||||
tag="Features"
|
||||
tagIcon={Zap}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: "Explore All Features", href: "#" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardTwo
|
||||
plans={[
|
||||
{
|
||||
id: "1", badge: "Starter", badgeIcon: Sparkles,
|
||||
price: "$29/mo", subtitle: "Perfect for getting started", buttons: [
|
||||
{ text: "Start Free Trial", href: "#" },
|
||||
{ text: "Learn More", href: "#" },
|
||||
],
|
||||
features: [
|
||||
"Up to 1,000 tracked events", "Basic analytics dashboard", "Email support", "1 team member"
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "2", badge: "Professional", badgeIcon: Star,
|
||||
price: "$99/mo", subtitle: "For growing businesses", buttons: [
|
||||
{ text: "Start Free Trial", href: "#" },
|
||||
{ text: "Learn More", href: "#" },
|
||||
],
|
||||
features: [
|
||||
"Up to 100,000 tracked events", "Advanced analytics & AI insights", "Priority email & chat support", "Up to 10 team members", "Custom reports"
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "3", badge: "Enterprise", badgeIcon: CheckCircle,
|
||||
price: "Custom", subtitle: "For large-scale operations", buttons: [
|
||||
{ text: "Contact Sales", href: "#" },
|
||||
{ text: "Schedule Demo", href: "#" },
|
||||
],
|
||||
features: [
|
||||
"Unlimited tracked events", "Full API access", "Dedicated account manager", "Custom integrations", "On-premise deployment", "SLA guarantee"
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Simple, Transparent Pricing"
|
||||
description="Choose the perfect plan for your needs"
|
||||
tag="Pricing"
|
||||
tagIcon={TrendingUp}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
buttons={[
|
||||
{ text: "View All Plans", href: "#" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<MetricCardEleven
|
||||
metrics={[
|
||||
{
|
||||
id: "1", value: "99.9%", title: "Uptime Guarantee", description: "Enterprise-grade reliability", imageSrc: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=500&h=500&fit=crop", imageAlt: "Server uptime monitoring"
|
||||
},
|
||||
{
|
||||
id: "2", value: "24/7", title: "Support Available", description: "Always here to help", imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&h=500&fit=crop", imageAlt: "Customer support team"
|
||||
},
|
||||
{
|
||||
id: "3", value: "150K+", title: "Active Users", description: "Trusted by businesses worldwide", imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&h=500&fit=crop", imageAlt: "Global user base"
|
||||
},
|
||||
]}
|
||||
title="Why Choose Us"
|
||||
description="Industry-leading performance and support"
|
||||
tag="Services"
|
||||
tagIcon={Shield}
|
||||
<FeatureCardSeven
|
||||
features={features}
|
||||
title="Our Services"
|
||||
description="Comprehensive home services tailored to your needs. Quality workmanship and professional service."
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="trust" data-section="trust">
|
||||
<SocialProofOne
|
||||
names={["TechCorp", "DataFlow", "CloudSync", "InnovateLabs", "FutureScale"]}
|
||||
title="Trusted by Industry Leaders"
|
||||
description="Join thousands of companies that rely on our platform for their analytics needs"
|
||||
tag="Trusted Partners"
|
||||
tagIcon={Users}
|
||||
<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}
|
||||
speed={40}
|
||||
showCard={true}
|
||||
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>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Sarah Johnson, CEO of TechCorp", date: "Date: 15 November 2024", title: "Transformed our analytics workflow", quote: "This platform has completely transformed how we analyze business data. The real-time insights have helped us make better decisions faster than ever before.", tag: "Enterprise Plan", avatarSrc: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop&crop=face", imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&h=500&fit=crop", imageAlt: "Sarah Johnson speaking at conference"
|
||||
},
|
||||
{
|
||||
id: "2", name: "Michael Chen, CTO of DataFlow", date: "Date: 10 November 2024", title: "Best analytics solution on the market", quote: "The API is clean, documentation is excellent, and the team is incredibly responsive. We integrated this in just a few days and immediately saw value.", tag: "Professional Plan", avatarSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face", imageSrc: "https://images.unsplash.com/photo-1460925895917-adf4198c868f?w=500&h=500&fit=crop", imageAlt: "Michael Chen coding on laptop"
|
||||
},
|
||||
{
|
||||
id: "3", name: "Emma Rodriguez, Founder of CloudSync", date: "Date: 5 November 2024", title: "Outstanding customer support", quote: "What impressed me most was the customer support team. They went above and beyond to help us optimize our setup. Highly recommended!", tag: "Starter Plan", avatarSrc: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop&crop=face", imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&h=500&fit=crop", imageAlt: "Emma Rodriguez at her desk"
|
||||
},
|
||||
]}
|
||||
title="What Our Customers Say"
|
||||
description="Real stories from companies using our platform daily"
|
||||
tag="Testimonials"
|
||||
tagIcon={Star}
|
||||
textboxLayout="default"
|
||||
<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>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
faqs={[
|
||||
{
|
||||
id: "1", title: "How does the pricing work?", content: "Our pricing is simple and transparent. We offer three tiers: Starter ($29/mo), Professional ($99/mo), and Enterprise (custom pricing). Each tier includes different features and support levels. You can switch plans anytime."
|
||||
},
|
||||
{
|
||||
id: "2", title: "Is there a free trial?", content: "Yes! All plans come with a 14-day free trial. No credit card required. You get full access to all features during the trial period."
|
||||
},
|
||||
{
|
||||
id: "3", title: "What kind of support do you offer?", content: "We provide email support for all plans, priority chat support for Professional plans, and dedicated account managers for Enterprise customers. Our support team is available 24/7."
|
||||
},
|
||||
{
|
||||
id: "4", title: "Can I cancel anytime?", content: "Absolutely! You can cancel your subscription anytime without penalties. If you cancel mid-month, you'll have access until the end of your billing period."
|
||||
},
|
||||
{
|
||||
id: "5", title: "Do you offer API access?", content: "Yes, API access is included in Professional and Enterprise plans. We provide comprehensive documentation and SDKs for popular programming languages."
|
||||
},
|
||||
{
|
||||
id: "6", title: "Is my data secure?", content: "Security is our top priority. We use enterprise-grade encryption, regular security audits, and comply with GDPR, CCPA, and SOC 2. Your data is backed up daily."
|
||||
},
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Find answers to common questions about our service"
|
||||
tag="Support"
|
||||
tagIcon={CheckCircle}
|
||||
faqsAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
<footer data-section="footer">
|
||||
<FooterSimple
|
||||
columns={footerColumns}
|
||||
bottomLeftText="© 2025 Earl Boys Services LLC. All rights reserved."
|
||||
bottomRightText="Serving Richmond, VA with Professional Home Services"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Demo Site"
|
||||
copyrightText="© 2025 Demo Site. All rights reserved."
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Facebook,
|
||||
href: "https://facebook.com", ariaLabel: "Facebook"
|
||||
},
|
||||
{
|
||||
icon: Instagram,
|
||||
href: "https://instagram.com", ariaLabel: "Instagram"
|
||||
},
|
||||
{
|
||||
icon: Linkedin,
|
||||
href: "https://linkedin.com", ariaLabel: "LinkedIn"
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</footer>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user