Merge version_2 into main #2

Merged
bender merged 4 commits from version_2 into main 2026-03-04 00:47:04 +00:00
4 changed files with 167 additions and 151 deletions

View File

@@ -1,22 +1,17 @@
import type { Metadata } from "next";
import { Halant } from "next/font/google";
import { Inter } from "next/font/google";
import { Open_Sans } from "next/font/google";
import { Poppins } from "next/font/google";
import { Montserrat } from "next/font/google";
import "./globals.css";
import { ServiceWrapper } from "@/components/ServiceWrapper";
import Tag from "@/tag/Tag";
const halant = Halant({
variable: "--font-halant", subsets: ["latin"],
weight: ["300", "400", "500", "600", "700"],
const poppins = Poppins({
variable: "--font-poppins", subsets: ["latin"],
weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
});
const inter = Inter({
variable: "--font-inter", subsets: ["latin"],
});
const openSans = Open_Sans({
variable: "--font-open-sans", subsets: ["latin"],
const montserrat = Montserrat({
variable: "--font-montserrat", subsets: ["latin"],
});
export const metadata: Metadata = {
@@ -49,7 +44,7 @@ export default function RootLayout({
<html lang="en" suppressHydrationWarning>
<ServiceWrapper>
<body
className={`${halant.variable} ${inter.variable} ${openSans.variable} antialiased`}
className={`${poppins.variable} ${montserrat.variable} antialiased`}
>
<Tag />
{children}

View File

@@ -2,211 +2,232 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import AboutMetric from '@/components/sections/about/AboutMetric';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Award, Clock, Shield, Star, Truck, Users } from 'lucide-react';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import SplitAbout from '@/components/sections/about/SplitAbout';
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactText from '@/components/sections/contact/ContactText';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Award, Clock, Shield, Star, Truck, Users, Zap, Target } from 'lucide-react';
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="text-shift"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="mediumSmall"
sizing="medium"
background="blurBottom"
cardStyle="outline"
primaryButtonStyle="double-inset"
secondaryButtonStyle="solid"
headingFontWeight="bold"
defaultButtonVariant="expand-hover"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="large"
sizing="largeSizeMediumTitles"
background="aurora"
cardStyle="glass-elevated"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="glass"
headingFontWeight="extrabold"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "home" },
{ name: "Home", id: "/" },
{ name: "Services", id: "services" },
{ name: "About", id: "about" },
{ name: "Testimonials", id: "testimonials" },
{ name: "Contact", id: "contact" }
]}
brandName="TruckShine Pro"
bottomLeftText="Fleet Specialists"
bottomLeftText="Fleet Excellence"
bottomRightText="contact@truckshine.com"
/>
</div>
<div id="hero" data-section="hero">
<HeroOverlay
title="Premium 18-Wheeler Truck Detailing"
description="Professional detailing services that restore and protect your fleet. From deep cleaning to protective coatings, we specialize in keeping your trucks looking showroom-ready and performing their best."
tag="Fleet Excellence"
tagIcon={Truck}
imageSrc="http://img.b2bpic.net/free-photo/truck-driver-putting-gloves-remove-vehicle-tarpaulin-unloading_342744-1295.jpg?_wi=1"
imageAlt="Professional truck detailing in progress"
textPosition="center"
showBlur={true}
showDimOverlay={true}
<HeroCarouselLogo
logoText="TRUCKSHINE PRO"
description="Revolutionize your fleet's appearance with cutting-edge detailing technology and expert craftsmanship"
buttons={[
{ text: "Schedule Service", href: "contact" },
{ text: "Learn More", href: "services" }
{ text: "View Services", href: "services" }
]}
slides={[
{
imageSrc: "http://img.b2bpic.net/free-photo/truck-driver-putting-gloves-remove-vehicle-tarpaulin-unloading_342744-1295.jpg?_wi=1", imageAlt: "Professional truck detailing"
},
{
imageSrc: "http://img.b2bpic.net/free-photo/young-man-washing-car-carwash-station-outdoor_651396-2004.jpg", imageAlt: "Premium fleet service"
},
{
imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-cleaning-car-exterior_23-2148194096.jpg", imageAlt: "Expert detailing techniques"
}
]}
autoplayDelay={5000}
showDimOverlay={true}
/>
</div>
<div id="about" data-section="about">
<AboutMetric
title="TruckShine Pro has been setting the standard for professional truck detailing since 2015. We're committed to delivering exceptional results that enhance your fleet's appearance and longevity."
metrics={[
{ icon: Truck, label: "Trucks Detailed", value: "5,000+" },
{ icon: Award, label: "Years Experience", value: "10+" },
{ icon: Users, label: "Fleet Clients", value: "200+" },
{ icon: Star, label: "Satisfaction Rate", value: "99%" }
<SplitAbout
title="Transforming Commercial Fleets Since 2015"
description="We combine innovation with precision to deliver unmatched truck detailing services"
tag="About TruckShine Pro"
tagAnimation="slide-up"
bulletPoints={[
{
title: "Expert Craftsmanship", description: "Our certified team brings years of experience in commercial fleet maintenance", icon: Star
},
{
title: "Advanced Technology", description: "Cutting-edge equipment and premium products for superior results", icon: Zap
},
{
title: "Fleet-Focused Solutions", description: "Tailored packages designed specifically for large-scale fleet operations", icon: Target
},
{
title: "Protection Guarantee", description: "Industry-leading 24-month protection warranty on all coatings", icon: Shield
}
]}
imageSrc="http://img.b2bpic.net/free-photo/truck-driver-putting-gloves-remove-vehicle-tarpaulin-unloading_342744-1295.jpg?_wi=2"
imageAlt="Professional truck detailing team at work"
mediaAnimation="slide-up"
imagePosition="right"
textboxLayout="default"
useInvertedBackground={false}
buttons={[
{ text: "Learn More", href: "#" }
]}
metricsAnimation="slide-up"
useInvertedBackground={true}
/>
</div>
<div id="services" data-section="services">
<FeatureCardThree
title="Our Detailing Services"
description="Comprehensive truck care tailored to your fleet's needs"
tag="Services"
<FeatureCardNineteen
title="Our Signature Detailing Process"
description="Comprehensive fleet care engineered for maximum impact and protection"
tag="Process"
tagAnimation="slide-up"
textboxLayout="default"
features={[
{
id: "01", title: "Deep Exterior Wash", description: "Professional pressure washing, foam cleaning, and spot removal to eliminate road grime, salt, and industrial buildup from your 18-wheeler.", imageSrc: "http://img.b2bpic.net/free-photo/truck-driver-putting-gloves-remove-vehicle-tarpaulin-unloading_342744-1295.jpg?_wi=2", imageAlt: "Exterior truck washing service"
id: 1,
tag: "Stage 1", title: "Deep Exterior Wash", subtitle: "Professional pressure washing and foam cleaning", description: "We utilize advanced pressure washing technology to eliminate road grime, salt, and industrial buildup from your 18-wheeler. Our foam pre-treatment softens contaminants for safe removal without paint damage.", imageSrc: "http://img.b2bpic.net/free-photo/truck-driver-putting-gloves-remove-vehicle-tarpaulin-unloading_342744-1295.jpg?_wi=3", imageAlt: "Exterior truck washing service"
},
{
id: "02", title: "Paint Polish & Wax", description: "Premium polishing treatments and protective wax coatings to restore shine, protect paint from UV damage, and maintain resale value.", imageSrc: "http://img.b2bpic.net/free-photo/truck-driver-putting-gloves-remove-vehicle-tarpaulin-unloading_342744-1295.jpg?_wi=3", imageAlt: "Truck paint polishing service"
id: 2,
tag: "Stage 2", title: "Premium Paint Polish & Wax", subtitle: "Restore shine and create lasting protection", description: "Our multi-stage polishing process removes oxidation and minor scratches, followed by premium wax application that provides UV protection and water beading for enhanced durability and visual appeal.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-cleaning-car-exterior_23-2148194096.jpg", imageAlt: "Truck paint polishing service"
},
{
id: "03", title: "Interior Cabin Deep Clean", description: "Detailed cleaning of cab interior including upholstery, windows, dashboard, and vents for a fresh, professional appearance.", imageSrc: "http://img.b2bpic.net/free-photo/young-man-washing-car-carwash-station-outdoor_651396-2004.jpg", imageAlt: "Truck interior detailing service"
id: 3,
tag: "Stage 3", title: "Interior Deep Clean", subtitle: "Refresh your cab interior completely", description: "Comprehensive detailing of cab interiors including upholstery treatment, window cleaning, dashboard restoration, and vent sanitization. We create a fresh, professional environment for your drivers.", imageSrc: "http://img.b2bpic.net/free-photo/young-man-washing-car-carwash-station-outdoor_651396-2004.jpg", imageAlt: "Truck interior detailing service"
},
{
id: "04", title: "Protective Coating", description: "Advanced ceramic and nano-coating applications that provide long-lasting protection against weathering, oxidation, and road contaminants.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-cleaning-car-exterior_23-2148194096.jpg", imageAlt: "Protective coating application"
id: 4,
tag: "Stage 4", title: "Advanced Protective Coating", subtitle: "Long-lasting nano-ceramic protection", description: "Our proprietary ceramic nano-coating technology provides exceptional protection against weathering, oxidation, and road contaminants. Backed by our 24-month warranty.", imageSrc: "http://img.b2bpic.net/free-photo/truck-driver-putting-gloves-remove-vehicle-tarpaulin-unloading_342744-1295.jpg?_wi=4", imageAlt: "Protective coating application"
}
]}
animationType="slide-up"
gridVariant="two-columns-alternating-heights"
useInvertedBackground={false}
animationType="blur-reveal"
useInvertedBackground={true}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardOne
title="Why Choose TruckShine Pro"
description="Industry-leading metrics that demonstrate our commitment to excellence"
<MetricCardSeven
title="Why Industry Leaders Choose Us"
description="Proven results backed by measurable excellence"
tag="Impact"
tagAnimation="slide-up"
textboxLayout="default"
metrics={[
{ id: "1", value: "6", title: "hours", description: "Average turnaround time per truck", icon: Clock },
{ id: "2", value: "24", title: "months", description: "Protection guarantee on coatings", icon: Shield },
{ id: "3", value: "15", title: "staff", description: "Certified professional detailers", icon: Users }
{
id: "1", value: "5000+", title: "Trucks Detailed", items: ["Precision service", "Enterprise fleets", "Independent operators"]
},
{
id: "2", value: "99%", title: "Satisfaction Rate", items: ["Exceeds expectations", "Repeat clients", "5-star reviews"]
},
{
id: "3", value: "24", title: "Month Warranty", items: ["Ceramic protection", "Premium coverage", "Industry-leading"]
},
{
id: "4", value: "200+", title: "Fleet Clients", items: ["National coverage", "Enterprise trusted", "Long-term partners"]
}
]}
animationType="slide-up"
animationType="blur-reveal"
gridVariant="uniform-all-items-equal"
useInvertedBackground={true}
useInvertedBackground={false}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFive
title="What Fleet Operators Say"
description="Trusted by logistics companies and independent truckers across the region"
textboxLayout="default"
useInvertedBackground={false}
<TestimonialCardTwelve
testimonials={[
{
id: "1", name: "Marcus Thompson, Fleet Director at CrossState Logistics", date: "Date: 15 January 2025", title: "Transformed our entire fleet appearance", quote: "TruckShine Pro has been maintaining our 40-truck fleet for three years. The attention to detail and consistency is unmatched. Our trucks always look professional on the road, which reflects well on our company.", tag: "Enterprise Fleet", avatarSrc: "http://img.b2bpic.net/free-photo/salesman-car-showroom_1303-13625.jpg", imageSrc: "http://img.b2bpic.net/free-photo/salesman-car-showroom_1303-13625.jpg?_wi=1"
id: "1", name: "Marcus Thompson", imageSrc: "http://img.b2bpic.net/free-photo/salesman-car-showroom_1303-13625.jpg", imageAlt: "Marcus Thompson"
},
{
id: "2", name: "Sarah Chen, Owner of Chen Trucking", date: "Date: 22 December 2024", title: "Professional service at competitive prices", quote: "As an independent operator, I appreciate the personalized service. The team treats my truck like their own. The protective coatings have saved me money on paint repairs. Highly recommended.", tag: "Independent Operator", avatarSrc: "http://img.b2bpic.net/free-photo/two-people-working-warehouse_329181-12826.jpg", imageSrc: "http://img.b2bpic.net/free-photo/two-people-working-warehouse_329181-12826.jpg"
id: "2", name: "Sarah Chen", imageSrc: "http://img.b2bpic.net/free-photo/two-people-working-warehouse_329181-12826.jpg", imageAlt: "Sarah Chen"
},
{
id: "3", name: "James Rodriguez, Operations Manager at Premier Freight", date: "Date: 08 November 2024", title: "Reliable partner for fleet maintenance", quote: "We've trusted TruckShine Pro for our seasonal fleet maintenance. Their scheduling flexibility and quality work make them an essential part of our operations. The ceramic coating keeps our trucks looking new.", tag: "Seasonal Partner", avatarSrc: "http://img.b2bpic.net/free-photo/businessman-smiling-camera_107420-95907.jpg", imageSrc: "http://img.b2bpic.net/free-photo/businessman-smiling-camera_107420-95907.jpg"
id: "3", name: "James Rodriguez", imageSrc: "http://img.b2bpic.net/free-photo/businessman-smiling-camera_107420-95907.jpg", imageAlt: "James Rodriguez"
},
{
id: "4", name: "Patricia Wong, General Manager at Diamond Transport", date: "Date: 25 October 2024", title: "Exceptional attention to detail", quote: "Outstanding service. The team goes above and beyond. Every truck comes back looking immaculate. We've noticed improved resale value on our retired vehicles. Worth every penny.", tag: "Long-term Client", avatarSrc: "http://img.b2bpic.net/free-photo/salesman-car-showroom_1303-13625.jpg", imageSrc: "http://img.b2bpic.net/free-photo/salesman-car-showroom_1303-13625.jpg?_wi=2"
id: "4", name: "Patricia Wong", imageSrc: "http://img.b2bpic.net/free-photo/salesman-car-showroom_1303-13625.jpg?_wi=2", imageAlt: "Patricia Wong"
}
]}
cardTitle="Over 5,000 trucks transformed. 99% satisfaction guaranteed."
cardTag="Trusted by Industry Leaders"
cardAnimation="blur-reveal"
useInvertedBackground={true}
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
title="Frequently Asked Questions"
description="Get answers to common questions about our truck detailing services"
<FaqBase
title="Common Questions"
description="Everything you need to know about our premium truck detailing services"
tag="Support"
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={true}
useInvertedBackground={false}
faqsAnimation="slide-up"
faqs={[
{ id: "1", title: "How long does a complete truck detailing take?", content: "A typical full detailing service for an 18-wheeler takes 5-8 hours depending on the truck's condition and the services selected. We work efficiently to minimize downtime for your fleet." },
{ id: "2", title: "Do you offer mobile detailing services?", content: "Yes, we provide mobile detailing for fleet operations. Our mobile units can come to your location for convenient on-site detailing, perfect for large fleets needing scheduled maintenance." },
{ id: "3", title: "What is ceramic coating and why is it beneficial?", content: "Ceramic coating is a premium protective layer applied to your truck's paint. It provides UV protection, water beading, and corrosion resistance for up to 24 months, reducing maintenance costs and maintaining resale value." },
{ id: "4", title: "Can you remove deep scratches and dents?", content: "Our polishing and compounding services can minimize the appearance of light to moderate scratches. Severe damage may require paint correction or professional body work, which we can recommend partners for." },
{ id: "5", title: "Do you service multiple trucks at the same time?", content: "Absolutely! We have the capacity to detail multiple trucks simultaneously. For large fleet contracts, we offer scheduled maintenance packages with dedicated teams for consistent results." },
{ id: "6", title: "What payment methods do you accept?", content: "We accept cash, credit cards, and checks. For fleet contracts, we offer flexible invoicing and net-30 payment terms to accommodate business accounting needs." }
{
id: "1", title: "How long does a complete truck detailing take?", content: "A typical full detailing service for an 18-wheeler takes 5-8 hours depending on the truck's condition and the services selected. We work efficiently to minimize downtime for your fleet."
},
{
id: "2", title: "Do you offer mobile detailing services?", content: "Yes, we provide mobile detailing for fleet operations. Our mobile units can come to your location for convenient on-site detailing, perfect for large fleets needing scheduled maintenance."
},
{
id: "3", title: "What is ceramic coating and why is it beneficial?", content: "Ceramic coating is a premium protective layer applied to your truck's paint. It provides UV protection, water beading, and corrosion resistance for up to 24 months, reducing maintenance costs and maintaining resale value."
},
{
id: "4", title: "Can you remove deep scratches and dents?", content: "Our polishing and compounding services can minimize the appearance of light to moderate scratches. Severe damage may require paint correction or professional body work, which we can recommend partners for."
},
{
id: "5", title: "Do you service multiple trucks at the same time?", content: "Absolutely! We have the capacity to detail multiple trucks simultaneously. For large fleet contracts, we offer scheduled maintenance packages with dedicated teams for consistent results."
},
{
id: "6", title: "What payment methods do you accept?", content: "We accept cash, credit cards, and checks. For fleet contracts, we offer flexible invoicing and net-30 payment terms to accommodate business accounting needs."
}
]}
animationType="smooth"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
title="Get Your Fleet Detailed"
description="Contact our team to schedule a consultation or book your truck detailing service. We're ready to transform your fleet."
inputs={[
{ name: "company", type: "text", placeholder: "Company Name", required: true },
{ name: "email", type: "email", placeholder: "Email Address", required: true },
{ name: "phone", type: "tel", placeholder: "Phone Number", required: true },
{ name: "truckCount", type: "number", placeholder: "Number of Trucks", required: false }
<ContactText
text="Ready to elevate your fleet's image? Contact us today for a consultation and discover the TruckShine Pro difference."
animationType="reveal-blur"
buttons={[
{ text: "Get in Touch", href: "#" },
{ text: "Request Quote", href: "#" }
]}
textarea={{ name: "message", placeholder: "Tell us about your fleet maintenance needs...", rows: 5, required: true }}
useInvertedBackground={false}
imageSrc="http://img.b2bpic.net/free-photo/truck-driver-putting-gloves-remove-vehicle-tarpaulin-unloading_342744-1295.jpg?_wi=4"
imageAlt="Professional truck detailing service"
mediaAnimation="slide-up"
mediaPosition="right"
buttonText="Request Quote"
background={{ variant: "sparkles-gradient" }}
useInvertedBackground={true}
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
<FooterLogoReveal
logoText="TruckShine Pro"
copyrightText="© 2025 TruckShine Pro | Premium Truck Detailing"
columns={[
{
title: "Services", items: [
{ label: "Exterior Wash", href: "#services" },
{ label: "Paint Polish", href: "#services" },
{ label: "Interior Cleaning", href: "#services" },
{ label: "Protective Coatings", href: "#services" }
]
},
{
title: "Company", items: [
{ label: "About Us", href: "#about" },
{ label: "Testimonials", href: "#testimonials" },
{ label: "FAQ", href: "#faq" },
{ label: "Contact", href: "#contact" }
]
},
{
title: "Connect", items: [
{ label: "Phone: (555) 123-4567", href: "tel:+15551234567" },
{ label: "Email: info@truckshine.com", href: "mailto:info@truckshine.com" },
{ label: "Hours: Mon-Fri 7am-6pm", href: "#" },
{ label: "Emergency: Available 24/7", href: "#" }
]
}
]}
leftLink={{ text: "Privacy Policy", href: "#" }}
rightLink={{ text: "© 2025 TruckShine Pro", href: "#" }}
/>
</div>
</ThemeProvider>

View File

@@ -11,7 +11,7 @@ html {
body {
background-color: var(--background);
color: var(--foreground);
font-family: var(--font-open-sans), sans-serif;
font-family: var(--font-poppins), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
h4,
h5,
h6 {
font-family: var(--font-open-sans), sans-serif;
font-family: var(--font-poppins), sans-serif;
}

View File

@@ -2,23 +2,23 @@
/* Base units */
/* --vw is set by ThemeProvider */
/* --background: #e3deea;;
--card: #ffffff;;
--foreground: #27231f;;
--primary-cta: #27231f;;
--secondary-cta: #ffffff;;
--accent: #c68a62;;
--background-accent: #c68a62;; */
/* --background: #000000;;
--card: #0c0c0c;;
--foreground: #ffffff;;
--primary-cta: #cee7ff;;
--secondary-cta: #000000;;
--accent: #535353;;
--background-accent: #cee7ff;; */
--background: #e3deea;;
--card: #ffffff;;
--foreground: #27231f;;
--primary-cta: #27231f;;
--background: #000000;;
--card: #0c0c0c;;
--foreground: #ffffff;;
--primary-cta: #cee7ff;;
--primary-cta-text: #e3deea;;
--secondary-cta: #ffffff;;
--secondary-cta: #000000;;
--secondary-cta-text: #27231f;;
--accent: #c68a62;;
--background-accent: #c68a62;;
--accent: #535353;;
--background-accent: #cee7ff;;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);