Switch to version 2: modified src/app/services/page.tsx
This commit is contained in:
@@ -1,213 +1,283 @@
|
||||
"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 MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
|
||||
import FaqDouble from "@/components/sections/faq/FaqDouble";
|
||||
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
||||
import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
|
||||
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
|
||||
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
|
||||
import FooterCard from "@/components/sections/footer/FooterCard";
|
||||
import { Zap, CheckCircle, Users, Shield, Sparkles, TrendingUp, MapPin, Phone, Mail, Facebook, Instagram, Linkedin } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
Wrench,
|
||||
Droplet,
|
||||
Paintbrush,
|
||||
Zap,
|
||||
MonitorPlay,
|
||||
Armchair,
|
||||
Layers,
|
||||
DoorOpen,
|
||||
BookOpen,
|
||||
Hammer,
|
||||
Clock,
|
||||
Users,
|
||||
CheckCircle,
|
||||
TrendingUp,
|
||||
Facebook,
|
||||
Instagram,
|
||||
Phone,
|
||||
} from "lucide-react";
|
||||
|
||||
export default function ServicesPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Features", id: "#features" },
|
||||
{ name: "Pricing", id: "#pricing" },
|
||||
{ name: "Services", id: "/services" },
|
||||
];
|
||||
|
||||
const contactButton = {
|
||||
text: "Get Started", href: "#contact"
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumLarge"
|
||||
contentWidth="smallMedium"
|
||||
sizing="mediumLargeSizeLargeTitles"
|
||||
background="aurora"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
background="noise"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={navItems}
|
||||
button={contactButton}
|
||||
brandName="Demo Site"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardDashboard
|
||||
title="Our Comprehensive Services"
|
||||
description="Explore our full range of solutions designed to help your business succeed. From analytics to support, we have everything you need."
|
||||
tag="Services"
|
||||
tagIcon={Zap}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "radial-gradient" }}
|
||||
buttons={[
|
||||
{ text: "View Pricing", href: "/#pricing" },
|
||||
{ text: "Schedule Demo", href: "#" },
|
||||
<NavbarStyleCentered
|
||||
brandName="Earl Boys Services"
|
||||
navItems={[
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Portfolio", id: "portfolio" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
dashboard={{
|
||||
title: "Service Capabilities", logoIcon: TrendingUp,
|
||||
imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=100&h=100&fit=crop&crop=face", buttons: [
|
||||
{ text: "Learn More", href: "#" },
|
||||
{ text: "Contact Us", href: "#" },
|
||||
],
|
||||
sidebarItems: [
|
||||
{ icon: CheckCircle, active: true },
|
||||
{ icon: Users },
|
||||
{ icon: Shield },
|
||||
],
|
||||
stats: [
|
||||
{
|
||||
title: "Services", values: [5, 8, 12],
|
||||
description: "Available today"
|
||||
},
|
||||
{
|
||||
title: "Coverage", values: [150, 250, 500],
|
||||
valueSuffix: "k mi²", description: "Service area"
|
||||
},
|
||||
{
|
||||
title: "Satisfaction", values: [95, 97, 99],
|
||||
valueSuffix: "%", description: "Customer rating"
|
||||
},
|
||||
],
|
||||
chartTitle: "Service Growth", chartData: [
|
||||
{ value: 40 },
|
||||
{ value: 60 },
|
||||
{ value: 80 },
|
||||
{ value: 70 },
|
||||
{ value: 95 },
|
||||
],
|
||||
listTitle: "Recent Implementations", listItems: [
|
||||
{ icon: CheckCircle, title: "Analytics Suite Deployed", status: "Completed" },
|
||||
{ icon: Users, title: "Team Training Completed", status: "Completed" },
|
||||
{ icon: Zap, title: "API Integration Ready", status: "Active" },
|
||||
],
|
||||
button={{
|
||||
text: "Call Now",
|
||||
href: "tel:804-938-0669",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardThree
|
||||
<div id="services-detail" data-section="services-detail">
|
||||
<FeatureCardTwentyFive
|
||||
features={[
|
||||
{
|
||||
id: "01", title: "Data Analytics", description: "Comprehensive data analysis tools with real-time processing and advanced algorithms.", imageSrc: "https://images.unsplash.com/photo-1460925895917-adf4198c868f?w=500&h=500&fit=crop", imageAlt: "Data analytics dashboard"
|
||||
title: "Plumbing Services",
|
||||
description: "Expert plumbing repairs, installations, and maintenance for all your home water systems. From leak detection to full system replacement.",
|
||||
icon: Droplet,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721573.jpg?_wi=3",
|
||||
imageAlt: "Professional plumbing work",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-man-receiving-box_23-2149103401.jpg?_wi=3",
|
||||
imageAlt: "Plumbing project completed",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "02", title: "Cloud Integration", description: "Seamless integration with leading cloud platforms. Deploy, scale, and manage with ease.", imageSrc: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=500&h=500&fit=crop", imageAlt: "Cloud integration services"
|
||||
title: "Painting Services",
|
||||
description: "Interior and exterior painting with premium finishes for residential and commercial spaces. Full surface preparation and cleanup included.",
|
||||
icon: Paintbrush,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-painting-wall-home_23-2149098981.jpg?_wi=3",
|
||||
imageAlt: "Professional painting service",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-man-choosing-color_23-2148903521.jpg?_wi=3",
|
||||
imageAlt: "Painting transformation",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "03", title: "Custom Development", description: "Tailored solutions built specifically for your business requirements and goals.", imageSrc: "https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=500&h=500&fit=crop", imageAlt: "Custom software development"
|
||||
title: "Electrical Work",
|
||||
description: "Licensed electrical services including installations, repairs, and safety inspections. All work meets current electrical codes and standards.",
|
||||
icon: Zap,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-electrician-checks-switchboard-tablet-night-shift-smart-service_169016-70936.jpg?_wi=3",
|
||||
imageAlt: "Professional electrical work",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-couple-moving-new-home_23-2149242082.jpg?_wi=3",
|
||||
imageAlt: "Electrical project completed",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "04", title: "Security & Compliance", description: "Enterprise-grade security with compliance certifications and regular audits.", imageSrc: "https://images.unsplash.com/photo-1555949519-f2a6f01c00f5?w=500&h=500&fit=crop", imageAlt: "Security infrastructure"
|
||||
title: "Wall Mounting & Installation",
|
||||
description: "Professional TV mounting, shelving installation, and wall customization services. Secure mounting with cable management included.",
|
||||
icon: MonitorPlay,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-builder-men-with-smartphones_23-2148751993.jpg?_wi=2",
|
||||
imageAlt: "Professional wall mounting",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-man-receiving-box_23-2149103401.jpg?_wi=4",
|
||||
imageAlt: "Wall mounting installation",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "05", title: "Training & Support", description: "Comprehensive training programs and 24/7 technical support for your team.", imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&h=500&fit=crop", imageAlt: "Team training session"
|
||||
title: "Furniture Assembly",
|
||||
description: "Quick and efficient furniture assembly for residential and commercial installations. Expert handling of all furniture types and styles.",
|
||||
icon: Armchair,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-hitting-nail-by-hammer_329181-3740.jpg?_wi=2",
|
||||
imageAlt: "Professional furniture assembly",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-man-choosing-color_23-2148903521.jpg?_wi=4",
|
||||
imageAlt: "Furniture installation completed",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "06", title: "Consulting Services", description: "Expert guidance from industry veterans to optimize your operations.", imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&h=500&fit=crop", imageAlt: "Business consulting meeting"
|
||||
title: "Flooring Installation",
|
||||
description: "Expert flooring installation for hardwood, tile, laminate, and other materials. Subfloor preparation to final finish included.",
|
||||
icon: Layers,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/circular-saw-carpenter-using-circular-saw-wood_169016-17039.jpg?_wi=3",
|
||||
imageAlt: "Professional flooring installation",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-couple-moving-new-home_23-2149242082.jpg?_wi=4",
|
||||
imageAlt: "Flooring project transformation",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Detailed Service Offerings"
|
||||
description="Everything you need for complete digital transformation"
|
||||
tag="Services"
|
||||
tagIcon={Zap}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
title="Complete Service Catalog"
|
||||
description="Explore our full range of professional home services. Each service includes consultation, professional execution, and satisfaction guarantee."
|
||||
tag="All 10 Services"
|
||||
tagIcon={Wrench}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: "Explore All Services", href: "#" },
|
||||
{
|
||||
text: "Back to Home",
|
||||
href: "/",
|
||||
},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
<div id="service-benefits" data-section="service-benefits">
|
||||
<MetricCardOne
|
||||
metrics={[
|
||||
{
|
||||
id: "1", value: "50+", title: "Enterprise Clients", description: "Trusted by leading companies", imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&h=500&fit=crop", imageAlt: "Enterprise clients working together"
|
||||
id: "1",
|
||||
value: "24",
|
||||
title: "Hour",
|
||||
description: "Response time for service requests",
|
||||
icon: Clock,
|
||||
},
|
||||
{
|
||||
id: "2", value: "10M+", title: "Data Points Processed", description: "Daily analytics processing", imageSrc: "https://images.unsplash.com/photo-1460925895917-adf4198c868f?w=500&h=500&fit=crop", imageAlt: "Data processing visualization"
|
||||
id: "2",
|
||||
value: "15",
|
||||
title: "Years",
|
||||
description: "Of industry expertise and experience",
|
||||
icon: Hammer,
|
||||
},
|
||||
{
|
||||
id: "3", value: "15", title: "Years Experience", description: "Industry leadership", imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&h=500&fit=crop", imageAlt: "Years of service"
|
||||
id: "3",
|
||||
value: "100",
|
||||
title: "Percent",
|
||||
description: "Licensed, insured, and bonded",
|
||||
icon: CheckCircle,
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
value: "2000",
|
||||
title: "Plus",
|
||||
description: "Happy customers in Richmond VA",
|
||||
icon: Users,
|
||||
},
|
||||
]}
|
||||
title="Service Excellence"
|
||||
description="Proven track record of delivering results"
|
||||
tag="Performance"
|
||||
tagIcon={TrendingUp}
|
||||
animationType="slide-up"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
title="Why Choose Our Services"
|
||||
description="We deliver professional excellence backed by years of experience, proper credentials, and unwavering commitment to customer satisfaction."
|
||||
tag="Service Excellence"
|
||||
tagIcon={TrendingUp}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
<div id="service-faq" data-section="service-faq">
|
||||
<FaqSplitText
|
||||
faqs={[
|
||||
{
|
||||
id: "1", title: "What services do you offer?", content: "We offer a comprehensive suite of services including data analytics, cloud integration, custom development, security consulting, training, and 24/7 support. Each service can be tailored to your specific needs."
|
||||
id: "1",
|
||||
title: "Do you provide free estimates for all services?",
|
||||
content: "Yes! We offer free, no-obligation estimates for all services. Our team will assess your project and provide a detailed quote with no hidden fees.",
|
||||
},
|
||||
{
|
||||
id: "2", title: "How long does implementation take?", content: "Implementation timelines vary based on service complexity. Basic analytics integration typically takes 2-4 weeks. Custom development projects are assessed individually. We always provide detailed timelines upfront."
|
||||
id: "2",
|
||||
title: "What is your service warranty policy?",
|
||||
content: "We stand behind all our work with comprehensive warranties. Most services include a 1-year warranty on labor, with extended warranties available for specific services.",
|
||||
},
|
||||
{
|
||||
id: "3", title: "Do you work with startups?", content: "Absolutely! We work with businesses of all sizes, from startups to enterprises. We have flexible engagement models and can scale our services as your business grows."
|
||||
id: "3",
|
||||
title: "Can you handle emergency service requests?",
|
||||
content: "Absolutely! We offer emergency services for urgent issues. Call 804-938-0669 to speak with our team about immediate needs.",
|
||||
},
|
||||
{
|
||||
id: "4", title: "What about ongoing support?", content: "All our services include ongoing support. Professional and Enterprise plans include priority support, dedicated account managers, and regular optimization reviews."
|
||||
id: "4",
|
||||
title: "How do you ensure quality and safety?",
|
||||
content: "All our technicians are certified and trained to industry standards. We follow strict safety protocols and use only quality materials and equipment.",
|
||||
},
|
||||
{
|
||||
id: "5", title: "Can you migrate data from our existing system?", content: "Yes, we specialize in data migration. Our team will work with you to ensure a smooth transition with zero downtime. We handle data validation and testing throughout the process."
|
||||
id: "5",
|
||||
title: "Do you offer service packages or discounts?",
|
||||
content: "Yes! We offer discounted packages for multiple services. Contact us for details on our bundled service options and seasonal promotions.",
|
||||
},
|
||||
{
|
||||
id: "6", title: "How do you ensure data security?", content: "We implement enterprise-grade security protocols including end-to-end encryption, regular security audits, and compliance with GDPR, HIPAA, and SOC 2 standards. Your data is our priority."
|
||||
id: "6",
|
||||
title: "What areas of Richmond do you service?",
|
||||
content: "We serve all of Richmond, VA and surrounding areas. Whether you're downtown or in the suburbs, we can help with your home service needs.",
|
||||
},
|
||||
]}
|
||||
title="Service Questions"
|
||||
description="Common questions about our service offerings"
|
||||
tag="Support"
|
||||
tagIcon={CheckCircle}
|
||||
sideTitle="Service Questions Answered"
|
||||
sideDescription="Learn more about our services, warranties, and availability. Have a specific question? Call us today."
|
||||
textPosition="left"
|
||||
faqsAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="smooth"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Demo Site"
|
||||
copyrightText="© 2025 Demo Site. All rights reserved."
|
||||
logoText="Earl Boys Services"
|
||||
copyrightText="© 2025 Earl Boys Services LLC. All rights reserved. Licensed & Insured."
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Facebook,
|
||||
href: "https://facebook.com", ariaLabel: "Facebook"
|
||||
href: "https://facebook.com",
|
||||
ariaLabel: "Facebook",
|
||||
},
|
||||
{
|
||||
icon: Instagram,
|
||||
href: "https://instagram.com", ariaLabel: "Instagram"
|
||||
href: "https://instagram.com",
|
||||
ariaLabel: "Instagram",
|
||||
},
|
||||
{
|
||||
icon: Linkedin,
|
||||
href: "https://linkedin.com", ariaLabel: "LinkedIn"
|
||||
icon: Phone,
|
||||
href: "tel:804-938-0669",
|
||||
ariaLabel: "Call us",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user