212 lines
10 KiB
TypeScript
212 lines
10 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
||
import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
|
||
import AboutMetric from "@/components/sections/about/AboutMetric";
|
||
import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
|
||
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
|
||
import PricingCardOne from "@/components/sections/pricing/PricingCardOne";
|
||
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
||
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
||
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
||
import { Award, CheckCircle, Phone, Shield, Sparkles, Star } from "lucide-react";
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="hover-magnetic"
|
||
defaultTextAnimation="entrance-slide"
|
||
borderRadius="pill"
|
||
contentWidth="medium"
|
||
sizing="largeSmallSizeMediumTitles"
|
||
background="circleGradient"
|
||
cardStyle="layered-gradient"
|
||
primaryButtonStyle="double-inset"
|
||
secondaryButtonStyle="radial-glow"
|
||
headingFontWeight="normal"
|
||
>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarStyleApple
|
||
brandName="JM Detailing"
|
||
navItems={[
|
||
{ name: "Palvelut", id: "services" },
|
||
{ name: "Miksi valita meidät", id: "about" },
|
||
{ name: "Hinnasto", id: "pricing" },
|
||
{ name: "Yhteystiedot", id: "contact" },
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroLogoBillboard
|
||
logoText="JM Detailing"
|
||
description="Laadukkaat autonhoitopalvelut Hämeenlinnassa – kiillotukset, pinnoitukset ja premium käsinpesut."
|
||
buttons={[
|
||
{ text: "Varaa aika", href: "https://jmdetailingoy.gmail.com" },
|
||
{ text: "Katso palvelut", href: "#services" },
|
||
]}
|
||
background={{ variant: "radial-gradient" }}
|
||
imageSrc="http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193557.jpg"
|
||
imageAlt="Kiiltävä musta auto detailingin jälkeen"
|
||
mediaAnimation="slide-up"
|
||
frameStyle="card"
|
||
buttonAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="about" data-section="about">
|
||
<AboutMetric
|
||
title="Ammattitasoista autonhoitoa"
|
||
metrics={[
|
||
{ icon: Sparkles, label: "Premium tuotteet", value: "Koch-Chemie" },
|
||
{ icon: Shield, label: "Keraamiset pinnoitteet", value: "1–5 vuotta" },
|
||
{ icon: Award, label: "Asiakastyytyväisyys", value: "#1 prioriteetti" },
|
||
{ icon: CheckCircle, label: "Räätälöidyt palvelut", value: "Jokaiselle autolle" },
|
||
]}
|
||
metricsAnimation="slide-up"
|
||
useInvertedBackground={false}
|
||
/>
|
||
</div>
|
||
|
||
<div id="services" data-section="services">
|
||
<FeatureCardThree
|
||
title="Palvelumme"
|
||
description="Kattava valikoima premium autonhoitopalveluita jokaiseen tarpeeseen"
|
||
tag="Palvelut"
|
||
features={[
|
||
{
|
||
id: "01", title: "Kiillotukset & myllytykset", description: "Pinnan epätäydellisyyksien poistaminen ja loisto", imageSrc: "http://img.b2bpic.net/free-photo/man-polish-car-garage_1157-26060.jpg", imageAlt: "Kiillotuspalvelu"},
|
||
{
|
||
id: "02", title: "Keraamiset pinnoitteet", description: "Pitkäkestoinen suojaus ja loisto", imageSrc: "http://img.b2bpic.net/free-photo/man-working-car-detailing-coating-car_1303-30596.jpg", imageAlt: "Keraminen pinnoite"},
|
||
{
|
||
id: "03", title: "Premium käsinpesut", description: "Varovainen ja ammattitaitoinen pesu", imageSrc: "http://img.b2bpic.net/free-photo/young-man-washing-car-carwash-station-outdoor_651396-2002.jpg", imageAlt: "Premium pesu"},
|
||
{
|
||
id: "04", title: "Sisätilojen pesut & suojaukset", description: "Upholstery ja sisätilan puhdistus", imageSrc: "http://img.b2bpic.net/free-photo/car-wash-detailing-station_1303-22315.jpg", imageAlt: "Sisätilojen pesu"},
|
||
{
|
||
id: "05", title: "Ajovalojen ehostus", description: "Selkeyden ja turvallisuuden parantaminen", imageSrc: "http://img.b2bpic.net/free-photo/man-gray-sweater-wipes-car-car-wash_1157-35957.jpg", imageAlt: "Ajovalojen ehostus"},
|
||
{
|
||
id: "06", title: "Otsonointi", description: "Tehokasta hajunpoistopalvelua", imageSrc: "http://img.b2bpic.net/free-photo/car-dashboard-radio-closeup-woman-sets-up-radio-while-driving-car_231208-7684.jpg", imageAlt: "Otsonointi"},
|
||
]}
|
||
textboxLayout="default"
|
||
animationType="slide-up"
|
||
gridVariant="bento-grid"
|
||
useInvertedBackground={false}
|
||
buttons={[{ text: "Katso hinnasto", href: "#pricing" }]}
|
||
buttonAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="beforeafter" data-section="beforeafter">
|
||
<ProductCardTwo
|
||
title="Näe ero"
|
||
description="Detailing ei ole vain pesu, se on viimeistelyä – katsele ennen ja jälkeen -kuvaparia"
|
||
tag="Tulokset"
|
||
products={[
|
||
{
|
||
id: "1", brand: "JM Detailing", name: "Kiillotettu pintavire", price: "Uusi loisto", rating: 5,
|
||
reviewCount: "Täydelliset tulokset", imageSrc: "http://img.b2bpic.net/free-photo/person-working-car-wrapping_23-2149342625.jpg", imageAlt: "Ennen ja jälkeen"},
|
||
{
|
||
id: "2", brand: "JM Detailing", name: "Pinnoitettu suojaus", price: "Pitkäkestoinen", rating: 5,
|
||
reviewCount: "Ammattilainen työ", imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193556.jpg", imageAlt: "Ennen ja jälkeen"},
|
||
]}
|
||
textboxLayout="default"
|
||
animationType="slide-up"
|
||
gridVariant="two-columns-alternating-heights"
|
||
useInvertedBackground={false}
|
||
buttons={[{ text: "Varaa aika", href: "https://jmdetailingoy.gmail.com" }]}
|
||
buttonAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="pricing" data-section="pricing">
|
||
<PricingCardOne
|
||
title="Läpinäkyvä hinnoittelu"
|
||
description="Esimerkkejä palveluistamme – tarkempi hinnoittelu sopimuksen mukaan"
|
||
tag="Palvelut"
|
||
plans={[
|
||
{
|
||
id: "1", badge: "Suosittu", badgeIcon: Sparkles,
|
||
price: "45€+", subtitle: "Premium käsinpesu", features: ["Koko auton pesu", "Kuivaus ja suojaus", "Sisätilojen imurointi"],
|
||
},
|
||
{
|
||
id: "2", badge: "Paras arvo", badgeIcon: Award,
|
||
price: "50€+", subtitle: "Talvipesu", features: ["Lika- ja suola-aineiden poistaminen", "Suojaava pesu", "Pohjan puhdistus"],
|
||
},
|
||
{
|
||
id: "3", badge: "Premium", badgeIcon: Star,
|
||
price: "85€/h", subtitle: "Sisätilojen puhdistus", features: ["Upholstery-pesu", "Nahkahuolto", "Lasi ja pinnat"],
|
||
},
|
||
]}
|
||
textboxLayout="default"
|
||
animationType="slide-up"
|
||
useInvertedBackground={false}
|
||
buttons={[{ text: "Katso koko hinnasto", href: "https://jmdetailingoy.gmail.com" }]}
|
||
buttonAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="brands" data-section="brands">
|
||
<SocialProofOne
|
||
title="Käytämme vain ammattilaistason tuotteita"
|
||
description="Brändien ja tuotteiden luottamus takaavat kestävän ja näyttävän lopputuloksen"
|
||
tag="Laatu"
|
||
logos={[
|
||
"http://img.b2bpic.net/free-vector/gradient-car-rental-labels-collection_23-2149240450.jpg", "http://img.b2bpic.net/free-vector/gradient-car-rental-labels-collection_23-2149240450.jpg", "http://img.b2bpic.net/free-photo/man-with-tattoos-producing-craft-beer_23-2148110878.jpg"]}
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
speed={40}
|
||
showCard={true}
|
||
tagAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<ContactCTA
|
||
tag="Ota yhteyttä"
|
||
tagIcon={Phone}
|
||
title="Haluatko autollesi parasta?"
|
||
description="Ota yhteyttä nyt ja varaa aika premium autonhoitopalavelustamme."
|
||
buttons={[
|
||
{ text: "Varaa aika nyt", href: "https://jmdetailingoy.gmail.com" },
|
||
{ text: "050 527 0344", href: "tel:+358505270344" },
|
||
]}
|
||
background={{ variant: "radial-gradient" }}
|
||
useInvertedBackground={false}
|
||
buttonAnimation="slide-up"
|
||
tagAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterLogoEmphasis
|
||
logoText="JM Detailing"
|
||
columns={[
|
||
{
|
||
items: [
|
||
{ label: "Palvelut", href: "#services" },
|
||
{ label: "Hinnasto", href: "#pricing" },
|
||
{ label: "Miksi valita meidät", href: "#about" },
|
||
],
|
||
},
|
||
{
|
||
items: [
|
||
{ label: "Osoite", href: "#" },
|
||
{ label: "Silmuntie 16, Hämeenlinna", href: "#" },
|
||
{ label: "050 527 0344", href: "tel:+358505270344" },
|
||
],
|
||
},
|
||
{
|
||
items: [
|
||
{ label: "Sähköposti", href: "#" },
|
||
{ label: "jmdetailingoy@gmail.com", href: "mailto:jmdetailingoy@gmail.com" },
|
||
{ label: "Ma–Pe 9:00–17:00", href: "#" },
|
||
],
|
||
},
|
||
]}
|
||
/>
|
||
</div>
|
||
</ThemeProvider>
|
||
);
|
||
}
|