Update src/app/page.tsx
This commit is contained in:
225
src/app/page.tsx
225
src/app/page.tsx
@@ -10,7 +10,7 @@ import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
import { Award, Shield, Sparkles, CheckCircle, Star, Zap, TrendingUp, MessageCircle } from 'lucide-react';
|
||||
import { Award, Shield, Sparkles, CheckCircle, Star, TrendingUp } from 'lucide-react';
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -165,137 +165,135 @@ export default function LandingPage() {
|
||||
<PricingCardNine
|
||||
title="Pricing Plans"
|
||||
description="Transparent pricing for all your detailing needs. Choose the perfect package for your vehicle."
|
||||
tag="Competitive Pricing"
|
||||
tagIcon={Zap}
|
||||
tag="Affordable Excellence"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
plans={[
|
||||
{
|
||||
id: "starter", description: "Quick exterior refresh",
|
||||
price: "$199", period: "per service", description: "Quick exterior refresh", button: { text: "Get Started", href: "#contact" },
|
||||
featuresTitle: "What's Included", features: [
|
||||
"Professional wash", "Hand dry", "Tire shine", "Windows cleaned"
|
||||
id: "1", tag: "Popular", price: "$279", period: "per detail", description: "Perfect for regular maintenance and light detailing needs", button: { text: "Book Now", href: "#contact" },
|
||||
featuresTitle: "Includes:", features: [
|
||||
"Interior vacuum and detail", "Dashboard cleaning", "Floor mat treatment", "Air freshener"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "professional", description: "Complete exterior detail",
|
||||
price: "$349", period: "per service", description: "Complete exterior detail", button: { text: "Choose Plan", href: "#contact" },
|
||||
featuresTitle: "What's Included", features: [
|
||||
"Professional wash", "Clay bar treatment", "Paint correction", "Ceramic wax coating", "Wheel detail", "Interior vacuum"
|
||||
id: "2", tag: "Best Value", price: "$349", period: "per detail", description: "Our most popular package with comprehensive detailing", button: { text: "Book Now", href: "#contact" },
|
||||
featuresTitle: "Includes:", features: [
|
||||
"Complete interior detail", "Exterior wash and wax", "Paint protection", "Leather conditioning", "Tire shine"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "premium", description: "Full luxury detail",
|
||||
price: "$549", period: "per service", description: "Full luxury detail", button: { text: "Book Premium", href: "#contact" },
|
||||
featuresTitle: "What's Included", features: [
|
||||
"Everything in Professional", "Full interior detail", "Leather conditioning", "Engine bay cleaning", "Odor elimination", "Paint protection film"
|
||||
id: "3", tag: "Premium", price: "$499", period: "per detail", description: "Ultimate luxury detailing for showroom perfection", button: { text: "Book Now", href: "#contact" },
|
||||
featuresTitle: "Includes:", features: [
|
||||
"Full interior detail", "Exterior wash and polish", "Ceramic coating", "Premium leather treatment", "Engine detailing", "Post-service inspection"
|
||||
]
|
||||
}
|
||||
]}
|
||||
buttons={[{ text: "Contact for Custom Quotes", href: "#contact" }]}
|
||||
buttonAnimation="opacity"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
buttons={[{ text: "View More Packages", href: "#contact" }]}
|
||||
buttonAnimation="opacity"
|
||||
ariaLabel="Pricing plans and packages"
|
||||
className="elite-shine-pricing"
|
||||
containerClassName="px-4 py-16 md:py-24"
|
||||
textBoxTitleClassName="text-4xl md:text-5xl font-bold leading-tight mb-4"
|
||||
textBoxDescriptionClassName="text-lg text-gray-700 leading-relaxed mb-8"
|
||||
textBoxTagClassName="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-yellow-50 text-yellow-900 text-sm font-semibold mb-6"
|
||||
cardClassName="p-6 rounded-lg border border-gray-200 hover:shadow-lg transition-shadow"
|
||||
cardClassName="p-6 rounded-lg bg-white border border-gray-200 hover:shadow-lg transition-shadow"
|
||||
planTagClassName="inline-block px-3 py-1 rounded-full bg-yellow-100 text-yellow-800 text-xs font-semibold mb-3"
|
||||
planPriceClassName="text-4xl font-bold text-black mb-2"
|
||||
planPriceClassName="text-3xl font-bold text-black mb-1"
|
||||
planPeriodClassName="text-sm text-gray-600 mb-4"
|
||||
planDescriptionClassName="text-lg font-semibold text-black mb-6"
|
||||
planButtonClassName="w-full px-4 py-3 rounded-lg font-semibold transition-all"
|
||||
featuresTitleClassName="text-lg font-bold text-black mb-4"
|
||||
featureItemClassName="flex items-center gap-2 text-gray-700"
|
||||
featureIconClassName="w-5 h-5 text-yellow-600"
|
||||
planDescriptionClassName="text-gray-700 mb-6 leading-relaxed"
|
||||
planButtonClassName="w-full px-6 py-3 rounded-lg font-semibold transition-all"
|
||||
featuresTitleClassName="text-sm font-bold text-black mb-4 mt-6"
|
||||
featureItemClassName="flex items-center gap-3 text-sm text-gray-700 mb-3"
|
||||
featureIconClassName="text-yellow-600"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
title="By The Numbers"
|
||||
description="Our track record speaks for itself. Trusted by thousands of satisfied customers."
|
||||
tag="Our Impact"
|
||||
title="Our Impact by the Numbers"
|
||||
description="Proven results and trusted by thousands of vehicle owners across the region."
|
||||
tag="Results That Speak"
|
||||
tagIcon={TrendingUp}
|
||||
tagAnimation="slide-up"
|
||||
metrics={[
|
||||
{
|
||||
id: "1", icon: Star, title: "Customer Satisfaction", value: "98%", value: "98%", buttons: [{ text: "Read Reviews", href: "#testimonials" }]
|
||||
id: "1", title: "Vehicles Detailed", subtitle: "Premium transformations completed", category: "Total Projects", value: "5,000+", buttons: [{ text: "See Gallery", href: "#gallery" }]
|
||||
},
|
||||
{
|
||||
id: "2", icon: Award, title: "Years In Business", value: "20+", value: "20+", buttons: [{ text: "Our Story", href: "#about" }]
|
||||
id: "2", title: "Customer Satisfaction", subtitle: "Average rating from verified reviews", category: "Client Reviews", value: "4.9/5", buttons: [{ text: "Read Reviews", href: "#testimonials" }]
|
||||
},
|
||||
{
|
||||
id: "3", icon: TrendingUp, title: "Vehicles Detailed", value: "5,000+", value: "5,000+", buttons: [{ text: "See Gallery", href: "#services" }]
|
||||
id: "3", title: "Years in Business", subtitle: "Trusted expertise and professionalism", category: "Company History", value: "20+", buttons: [{ text: "Learn More", href: "#about" }]
|
||||
}
|
||||
]}
|
||||
buttons={[{ text: "Join Our Satisfied Clients", href: "#contact" }]}
|
||||
buttonAnimation="opacity"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
buttons={[{ text: "Join Our Community", href: "#contact" }]}
|
||||
buttonAnimation="opacity"
|
||||
ariaLabel="Key metrics and achievements"
|
||||
ariaLabel="Company metrics and achievements"
|
||||
className="elite-shine-metrics"
|
||||
containerClassName="px-4 py-16 md:py-24"
|
||||
textBoxTitleClassName="text-4xl md:text-5xl font-bold leading-tight mb-4"
|
||||
textBoxDescriptionClassName="text-lg text-gray-700 leading-relaxed mb-8"
|
||||
textBoxTagClassName="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-yellow-50 text-yellow-900 text-sm font-semibold mb-6"
|
||||
cardClassName="p-6 rounded-lg bg-white border border-gray-200 hover:shadow-lg transition-shadow text-center"
|
||||
cardTitleClassName="text-lg font-bold text-black mb-2"
|
||||
subtitleClassName="text-sm text-gray-600 mb-3"
|
||||
valueClassName="text-4xl font-bold text-yellow-600 mb-4"
|
||||
categoryClassName="text-xs text-gray-500 uppercase tracking-wide"
|
||||
gridClassName="grid gap-6 md:grid-cols-3"
|
||||
cardClassName="p-6 rounded-lg bg-white border border-gray-200 hover:shadow-lg transition-shadow"
|
||||
cardTitleClassName="text-2xl font-bold text-black mb-2"
|
||||
subtitleClassName="text-sm text-gray-600 mb-4"
|
||||
categoryClassName="text-xs text-gray-500 uppercase tracking-wide mb-3"
|
||||
valueClassName="text-4xl font-bold text-black mb-4"
|
||||
cardButtonClassName="px-6 py-2 rounded-lg font-semibold transition-all text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
title="Get Your Appointment"
|
||||
description="Schedule your premium detailing service today. Our team will contact you to confirm your booking."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "John Doe", required: true },
|
||||
{ name: "email", type: "email", placeholder: "john@example.com", required: true },
|
||||
{ name: "phone", type: "tel", placeholder: "(555) 000-0000", required: true },
|
||||
{ name: "serviceType", type: "select", placeholder: "Select Service", required: true }
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
title="What Our Customers Say"
|
||||
description="Hundreds of satisfied car owners trust Elite Shine for exceptional results and professional service."
|
||||
tag="Customer Testimonials"
|
||||
tagIcon={Star}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[{ text: "Schedule Your Appointment", href: "#contact" }]}
|
||||
buttonAnimation="opacity"
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Michael Chen", date: "2 weeks ago", title: "Luxury Vehicle Owner", quote: "Elite Shine transformed my Mercedes. The attention to detail is unmatched. My car looks better than showroom-new!", tag: "Full Detail Package", avatarSrc: "http://img.b2bpic.net/free-photo/cheerful-handsome-businessman_1262-21003.jpg", avatarAlt: "Michael Chen profile"
|
||||
},
|
||||
{
|
||||
id: "2", name: "Sarah Williams", date: "1 month ago", title: "BMW Owner", quote: "Professional, courteous, and thorough. The ceramic coating has kept my car pristine. Highly recommend for luxury vehicles.", tag: "Exterior Detail + Ceramic", avatarSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg", avatarAlt: "Sarah Williams profile"
|
||||
},
|
||||
{
|
||||
id: "3", name: "James Robertson", date: "3 weeks ago", title: "Entrepreneur", quote: "Best investment for my vehicle. The interior detail restored my leather like new. Outstanding service, worth every penny.", tag: "Interior Detail Premium", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-business-woman_23-2148603029.jpg", avatarAlt: "James Robertson profile"
|
||||
},
|
||||
{
|
||||
id: "4", name: "Jennifer Martinez", date: "1 month ago", title: "Executive", quote: "Impeccable results. Elite Shine understands luxury standards. My Porsche has never looked better. Five-star service!", tag: "Full Detail + Protection", avatarSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-successful-confident-young-woman-start-career-look-determined-get-job-waiting-interview-lean-glass-wall-business-center-smiling-looking-away-satisfied_197531-30572.jpg", avatarAlt: "Jennifer Martinez profile"
|
||||
},
|
||||
{
|
||||
id: "5", name: "David Park", date: "2 months ago", title: "Luxury Collector", quote: "Trusted them with my entire collection. Professional, reliable, and exceptional attention to detail. The best in the area.", tag: "Fleet Detailing", avatarSrc: "http://img.b2bpic.net/free-photo/cheerful-handsome-businessman_1262-21003.jpg", avatarAlt: "David Park profile"
|
||||
},
|
||||
{
|
||||
id: "6", name: "Patricia Stone", date: "6 weeks ago", title: "Vehicle Enthusiast", quote: "They care about your car as much as you do. The ceramic coating recommendation was perfect. Booking my next appointment soon!", tag: "Paint Protection Pro", avatarSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg", avatarAlt: "Patricia Stone profile"
|
||||
}
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "Tell us about your vehicle and any special requests", required: false }}
|
||||
buttonText="Book Appointment"
|
||||
onSubmit={(data) => console.log("Form submitted:", data)}
|
||||
sideContent={
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-black mb-2">Contact Information</h3>
|
||||
<p className="text-gray-700">Phone: <a href="tel:+1-555-0123" className="text-yellow-600 font-semibold">+1 (555) 0123</a></p>
|
||||
<p className="text-gray-700">Email: <a href="mailto:info@eliteshinedetail.com" className="text-yellow-600 font-semibold">info@eliteshinedetail.com</a></p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-black mb-2">Hours</h3>
|
||||
<p className="text-gray-700">Monday - Saturday: 9:00 AM - 6:00 PM</p>
|
||||
<p className="text-gray-700">Sunday: Closed</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-black mb-2">Service Area</h3>
|
||||
<p className="text-gray-700">We service the greater metropolitan area and surrounding regions. Offsite detailing available.</p>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
ariaLabel="Contact form and booking"
|
||||
className="elite-shine-contact"
|
||||
ariaLabel="Customer testimonials and reviews"
|
||||
className="elite-shine-testimonials"
|
||||
containerClassName="px-4 py-16 md:py-24"
|
||||
formContainerClassName="bg-white rounded-lg shadow-lg p-8"
|
||||
formTitleClassName="text-2xl font-bold text-black mb-2"
|
||||
formDescriptionClassName="text-gray-700 mb-6"
|
||||
fieldClassName="mb-4"
|
||||
labelClassName="block text-sm font-semibold text-black mb-2"
|
||||
inputClassName="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-yellow-600"
|
||||
buttonClassName="w-full px-4 py-3 rounded-lg font-semibold transition-all"
|
||||
sideContentClassName="space-y-8"
|
||||
textBoxTitleClassName="text-4xl md:text-5xl font-bold leading-tight mb-4"
|
||||
textBoxDescriptionClassName="text-lg text-gray-700 leading-relaxed mb-8"
|
||||
textBoxTagClassName="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-yellow-50 text-yellow-900 text-sm font-semibold mb-6"
|
||||
cardClassName="p-6 rounded-lg bg-white border border-gray-200 hover:shadow-lg transition-shadow"
|
||||
cardTagClassName="inline-block px-3 py-1 rounded-full bg-yellow-100 text-yellow-800 text-xs font-semibold mb-3"
|
||||
cardTitleClassName="text-lg font-bold text-black mb-1"
|
||||
cardQuoteClassName="text-gray-700 leading-relaxed italic mb-4"
|
||||
cardAuthorClassName="flex items-center gap-3"
|
||||
cardAvatarClassName="w-12 h-12 rounded-full overflow-hidden"
|
||||
cardNameClassName="font-semibold text-black"
|
||||
cardDateClassName="text-sm text-gray-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -303,9 +301,11 @@ export default function LandingPage() {
|
||||
<FaqBase
|
||||
title="Frequently Asked Questions"
|
||||
description="Find answers to common questions about our detailing services, pricing, and booking process."
|
||||
tag="Have Questions?"
|
||||
tagIcon={MessageCircle}
|
||||
tag="Common Questions"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[{ text: "Contact Us", href: "#contact" }]}
|
||||
buttonAnimation="opacity"
|
||||
faqs={[
|
||||
{
|
||||
id: "1", title: "How long does a full detail take?", content: "A complete full detail typically takes 6-8 hours depending on your vehicle's condition and size. We offer flexible scheduling to accommodate your needs."
|
||||
@@ -329,19 +329,63 @@ export default function LandingPage() {
|
||||
faqsAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="smooth"
|
||||
showCard={true}
|
||||
buttons={[{ text: "Still have questions? Contact us", href: "#contact" }]}
|
||||
buttonAnimation="opacity"
|
||||
ariaLabel="Frequently asked questions"
|
||||
className="elite-shine-faq"
|
||||
containerClassName="px-4 py-16 md:py-24"
|
||||
textBoxTitleClassName="text-4xl md:text-5xl font-bold leading-tight mb-4"
|
||||
textBoxTitleClassName="text-4xl md:text-5xl font-bold leading-tight mb-6"
|
||||
textBoxDescriptionClassName="text-lg text-gray-700 leading-relaxed mb-8"
|
||||
textBoxTagClassName="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-yellow-50 text-yellow-900 text-sm font-semibold mb-6"
|
||||
faqsContainerClassName="space-y-4"
|
||||
accordionClassName="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow"
|
||||
buttonContainerClassName="flex gap-4 mt-8"
|
||||
buttonClassName="px-8 py-3 rounded-lg font-semibold transition-all"
|
||||
accordionTitleClassName="text-lg font-bold text-black"
|
||||
accordionContentClassName="text-gray-700 leading-relaxed mt-4"
|
||||
accordionContentClassName="text-gray-700 leading-relaxed"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
title="Get Your Quote Today"
|
||||
description="Contact us to schedule your premium detailing appointment and learn about our custom packages."
|
||||
formTitle="Quick Contact"
|
||||
formDescription="Fill out the form below and we'll be in touch within 24 hours."
|
||||
inputs={[
|
||||
{
|
||||
id: "name", type: "text", placeholder: "Your Name", label: "Name", required: true
|
||||
},
|
||||
{
|
||||
id: "email", type: "email", placeholder: "your@email.com", label: "Email", required: true
|
||||
},
|
||||
{
|
||||
id: "phone", type: "tel", placeholder: "(555) 0123", label: "Phone", required: true
|
||||
},
|
||||
{
|
||||
id: "vehicle", type: "text", placeholder: "Vehicle Type", label: "Vehicle", required: false
|
||||
},
|
||||
{
|
||||
id: "message", type: "textarea", placeholder: "Tell us about your detailing needs", label: "Message", required: false
|
||||
}
|
||||
]}
|
||||
submitButtonText="Request Quote"
|
||||
onSubmit={(data) => console.log('Form submitted:', data)}
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
ariaLabel="Contact form section"
|
||||
className="elite-shine-contact"
|
||||
containerClassName="px-4 py-16 md:py-24"
|
||||
contentClassName="max-w-4xl mx-auto grid md:grid-cols-2 gap-12"
|
||||
textContainerClassName="flex flex-col justify-center"
|
||||
titleClassName="text-4xl md:text-5xl font-bold leading-tight mb-4"
|
||||
descriptionClassName="text-lg text-gray-700 leading-relaxed mb-8"
|
||||
formContainerClassName="bg-white rounded-lg p-8 shadow-lg"
|
||||
formTitleClassName="text-2xl font-bold text-black mb-2"
|
||||
formDescriptionClassName="text-gray-600 mb-6"
|
||||
inputWrapperClassName="mb-4"
|
||||
inputLabelClassName="block text-sm font-semibold text-black mb-2"
|
||||
inputClassName="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:border-yellow-600"
|
||||
textareaClassName="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:border-yellow-600 min-h-24 resize-none"
|
||||
submitButtonClassName="w-full px-6 py-3 rounded-lg font-semibold transition-all mt-6"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -353,13 +397,13 @@ export default function LandingPage() {
|
||||
{ label: "Exterior Detail", href: "#services" },
|
||||
{ label: "Interior Detail", href: "#services" },
|
||||
{ label: "Full Detail Package", href: "#services" },
|
||||
{ label: "Ceramic Coating", href: "#pricing" }
|
||||
{ label: "Ceramic Coating", href: "#services" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "#about" },
|
||||
{ label: "Pricing", href: "#pricing" },
|
||||
{ label: "Testimonials", href: "#testimonials" },
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
{ label: "Contact", href: "#contact" }
|
||||
]
|
||||
@@ -387,4 +431,3 @@ export default function LandingPage() {
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user