215 lines
9.1 KiB
TypeScript
215 lines
9.1 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import ReactLenis from "lenis/react";
|
||
import { Zap, Award, Smile, CheckCircle } from "lucide-react";
|
||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
|
||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
|
||
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="bounce-effect"
|
||
defaultTextAnimation="background-highlight"
|
||
borderRadius="soft"
|
||
contentWidth="mediumSmall"
|
||
sizing="largeSizeMediumTitles"
|
||
background="circleGradient"
|
||
cardStyle="glass-elevated"
|
||
primaryButtonStyle="radial-glow"
|
||
secondaryButtonStyle="radial-glow"
|
||
headingFontWeight="light"
|
||
>
|
||
<ReactLenis root>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarStyleCentered
|
||
navItems={[
|
||
{
|
||
name: "Etusivu", id: "hero"},
|
||
{
|
||
name: "Miksi me?", id: "features"},
|
||
{
|
||
name: "Kokemuksia", id: "testimonials"},
|
||
{
|
||
name: "Palvelut", id: "services"},
|
||
{
|
||
name: "Yhteystiedot", id: "contact"},
|
||
]}
|
||
brandName="Lucky Barbershop"
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroBillboardCarousel
|
||
background={{
|
||
variant: "plain"}}
|
||
title="Lucky Barbershop Center"
|
||
description="Ammattitaitoista hiustenleikkuuta ilman ajanvarausta. Nopea, laadukas ja juuri sinun toiveidesi mukainen hiustenleikkaus – tule suoraan sisään!"
|
||
buttons={[
|
||
{
|
||
text: "Soita heti", href: "tel:0401234567"},
|
||
{
|
||
text: "Pyydä tarjous", href: "#contact"},
|
||
]}
|
||
mediaItems={[
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/woman-washing-hair-customer_23-2147737054.jpg?_wi=1", imageAlt: "Barbershop interior"},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/woman-washing-hair-customer_23-2147737054.jpg?_wi=2", imageAlt: "Professional haircut"},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/woman-washing-hair-customer_23-2147737054.jpg?_wi=3", imageAlt: "Barber tools"},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/woman-washing-hair-customer_23-2147737054.jpg?_wi=4", imageAlt: "Clean chair"},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/woman-washing-hair-customer_23-2147737054.jpg?_wi=5", imageAlt: "Hair styling"},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/woman-washing-hair-customer_23-2147737054.jpg?_wi=6", imageAlt: "Barbershop vibe"},
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="features" data-section="features">
|
||
<FeatureCardTwentySix
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
features={[
|
||
{
|
||
title: "Ei ajanvarausta", description: "Pääset nopeasti tuoliin.", imageSrc: "http://img.b2bpic.net/free-photo/set-scissors-combs_23-2147711606.jpg", buttonIcon: Zap,
|
||
},
|
||
{
|
||
title: "Kokeneet parturit", description: "Ammattitaitoista ja varmaa otetta.", imageSrc: "http://img.b2bpic.net/free-photo/young-smiling-blonde-male-barber-uniform-trying-cut-his-hair-with-scissors-isolated-orange-space-with-copy-space_141793-60384.jpg?_wi=1", buttonIcon: Award,
|
||
},
|
||
{
|
||
title: "Rento palvelu", description: "Ystävällinen ja mukava ilmapiiri.", imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work-washing-head_627829-7378.jpg", buttonIcon: Smile,
|
||
},
|
||
{
|
||
title: "Laadukas tulos", description: "Saat juuri sellaiset hiukset kuin toivoit.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-selfcare-products_23-2149313024.jpg", buttonIcon: CheckCircle,
|
||
},
|
||
]}
|
||
title="Miksi valita meidät?"
|
||
description="Tarjoamme rentoa palvelua ja huippulaatua ilman turhaa odottelua."
|
||
/>
|
||
</div>
|
||
|
||
<div id="testimonials" data-section="testimonials">
|
||
<TestimonialCardSixteen
|
||
animationType="slide-up"
|
||
textboxLayout="split"
|
||
useInvertedBackground={true}
|
||
testimonials={[
|
||
{
|
||
id: "1", name: "Ville", role: "Asiakas", company: "Oulu", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/impressed-young-barber-wearing-uniform-glasses-holding-shaving-razors-looking-one-them-isolated-blue-background_141793-134401.jpg"},
|
||
{
|
||
id: "2", name: "Mikko", role: "Asiakas", company: "Oulu", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/young-smiling-blonde-male-barber-uniform-trying-cut-his-hair-with-scissors-isolated-orange-space-with-copy-space_141793-60384.jpg?_wi=2"},
|
||
{
|
||
id: "3", name: "Antti", role: "Asiakas", company: "Oulu", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/carefree-young-bearded-man-posing_176420-30302.jpg"},
|
||
{
|
||
id: "4", name: "Jari", role: "Asiakas", company: "Oulu", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-middle-eastern-man-pulling-ears-playful-mocking-someone_176420-20530.jpg"},
|
||
{
|
||
id: "5", name: "Teemu", role: "Asiakas", company: "Oulu", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-sneaky-bearded-man-planning-something_171337-4836.jpg"},
|
||
]}
|
||
kpiItems={[
|
||
{
|
||
value: "7v", label: "Kokemus"},
|
||
{
|
||
value: "5/5", label: "Keskiarvo"},
|
||
{
|
||
value: "100%", label: "Tyytyväisyys"},
|
||
]}
|
||
title="Asiakkaiden kokemuksia"
|
||
description="Tuhannet tyytyväiset asiakkaat luottavat meihin."
|
||
/>
|
||
</div>
|
||
|
||
<div id="services" data-section="services">
|
||
<PricingCardOne
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
plans={[
|
||
{
|
||
id: "1", badge: "Suosittu", price: "25€", subtitle: "Miesten hiustenleikkaus", features: [
|
||
"Koneleikkaus", "Saksileikkaus", "Viimeistely"],
|
||
},
|
||
{
|
||
id: "2", badge: "Hoito", price: "15€", subtitle: "Parta ja viimeistely", features: [
|
||
"Partakone", "Viimeistely", "Kulmien siistiminen"],
|
||
},
|
||
{
|
||
id: "3", badge: "Täydellinen", price: "35€", subtitle: "Hiukset + Parta", features: [
|
||
"Hiustenleikkaus", "Parta", "Täysi viimeistely"],
|
||
},
|
||
]}
|
||
title="Palvelumme"
|
||
description="Edulliset hinnat ja erinomainen laatu."
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<ContactSplitForm
|
||
useInvertedBackground={true}
|
||
title="Ota yhteyttä"
|
||
description="Soita meille numeroon 040 123 4567 tai tule suoraan paikalle!"
|
||
inputs={[
|
||
{
|
||
name: "name", type: "text", placeholder: "Nimi", required: true,
|
||
},
|
||
{
|
||
name: "email", type: "email", placeholder: "Sähköposti", required: true,
|
||
},
|
||
]}
|
||
textarea={{
|
||
name: "message", placeholder: "Viesti", rows: 4,
|
||
required: true,
|
||
}}
|
||
imageSrc="http://img.b2bpic.net/free-photo/exterior-shopfront-city_53876-144723.jpg"
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterMedia
|
||
imageSrc="http://img.b2bpic.net/free-vector/hairdresser-objects-composition-set-flat_98292-6756.jpg"
|
||
logoText="Lucky Barbershop"
|
||
columns={[
|
||
{
|
||
title: "Aukioloajat", items: [
|
||
{
|
||
label: "Ma-Pe 09-18", href: "#"},
|
||
{
|
||
label: "La 10-15", href: "#"},
|
||
],
|
||
},
|
||
{
|
||
title: "Yhteystiedot", items: [
|
||
{
|
||
label: "040 123 4567", href: "tel:0401234567"},
|
||
{
|
||
label: "Oulu, Finland", href: "#"},
|
||
],
|
||
},
|
||
{
|
||
title: "Seuraa", items: [
|
||
{
|
||
label: "Instagram", href: "#"},
|
||
{
|
||
label: "Facebook", href: "#"},
|
||
],
|
||
},
|
||
]}
|
||
copyrightText="© 2025 Lucky Barbershop. Kaikki oikeudet pidätetään."
|
||
/>
|
||
</div>
|
||
</ReactLenis>
|
||
</ThemeProvider>
|
||
);
|
||
} |