380 lines
12 KiB
TypeScript
380 lines
12 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import ReactLenis from "lenis/react";
|
||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
||
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
|
||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
|
||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
|
||
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
||
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
||
import { Scissors } from "lucide-react";
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="hover-bubble"
|
||
defaultTextAnimation="entrance-slide"
|
||
borderRadius="soft"
|
||
contentWidth="smallMedium"
|
||
sizing="largeSmallSizeLargeTitles"
|
||
background="noiseDiagonalGradient"
|
||
cardStyle="soft-shadow"
|
||
primaryButtonStyle="radial-glow"
|
||
secondaryButtonStyle="glass"
|
||
headingFontWeight="semibold"
|
||
>
|
||
<ReactLenis root>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarStyleApple
|
||
navItems={[
|
||
{
|
||
name: "Hem",
|
||
id: "hero",
|
||
},
|
||
{
|
||
name: "Om Oss",
|
||
id: "about",
|
||
},
|
||
{
|
||
name: "Tjänster",
|
||
id: "services",
|
||
},
|
||
{
|
||
name: "Kontakt",
|
||
id: "contact",
|
||
},
|
||
]}
|
||
brandName="Live-Life Salong"
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroSplitTestimonial
|
||
background={{
|
||
variant: "gradient-bars",
|
||
}}
|
||
title="Hårvård med känsla i Linköping"
|
||
description="Välkommen till Live-Life Salong – vi erbjuder professionell klippning, färgning och hårstyling skräddarsydd för just din stil."
|
||
testimonials={[
|
||
{
|
||
name: "Anna Svensson",
|
||
handle: "@anna_l",
|
||
testimonial: "Fantastisk service och alltid så nöjd med min färg!",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/thoughtful-blonde-woman-getting-hair-washed_23-2148332478.jpg?_wi=1",
|
||
imageAlt: "hair salon interior professional",
|
||
},
|
||
{
|
||
name: "Erik Larsson",
|
||
handle: "@erik_l",
|
||
testimonial: "Riktigt bra frisör, proffsigt bemötande.",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/empty-therapist-office-with-modern-furniture-decorations_482257-108008.jpg?_wi=1",
|
||
imageAlt: "hair salon interior professional",
|
||
},
|
||
{
|
||
name: "Maria Berg",
|
||
handle: "@m_berg",
|
||
testimonial: "Känner mig alltid fin när jag går härifrån.",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/woman-looks-from-sleepmask-dressed-domestic-wear-has-happy-smile-face-enjoys-good-morning-feels-refreshed-after-nap-poses-pink_273609-54576.jpg?_wi=1",
|
||
imageAlt: "hair salon interior professional",
|
||
},
|
||
{
|
||
name: "Johan Holm",
|
||
handle: "@j_holm",
|
||
testimonial: "Hög kvalitet och god stämning.",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/brunette-girl-getting-her-hair-dried_23-2148108866.jpg?_wi=1",
|
||
imageAlt: "hair salon interior professional",
|
||
},
|
||
{
|
||
name: "Sara Lind",
|
||
handle: "@sara_l",
|
||
testimonial: "Bästa salongen i Linköping!",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/view-scissors-hair-salon_23-2150462460.jpg?_wi=1",
|
||
imageAlt: "hair salon interior professional",
|
||
},
|
||
]}
|
||
imageSrc="http://img.b2bpic.net/free-photo/thoughtful-blonde-woman-getting-hair-washed_23-2148332478.jpg?_wi=2"
|
||
mediaAnimation="slide-up"
|
||
avatars={[
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/asian-woman-smart-clothes-sitting-office-chair-with-smartphone-smiling-camera_1098-20734.jpg",
|
||
alt: "Client portrait 1",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/female-hairdresser-styling-clients-hair_107420-94689.jpg",
|
||
alt: "Client portrait 2",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/medium-shot-friends-holding-hands_23-2148238253.jpg",
|
||
alt: "Client portrait 3",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/woman-working-her-fashion-design-workshop_23-2148877379.jpg",
|
||
alt: "Client portrait 4",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/home-interior-design-composition_23-2148986633.jpg",
|
||
alt: "Client portrait 5",
|
||
},
|
||
]}
|
||
avatarText="Över 500+ nöjda kunder"
|
||
marqueeItems={[
|
||
{
|
||
type: "text",
|
||
text: "Klippning",
|
||
},
|
||
{
|
||
type: "text",
|
||
text: "Färgning",
|
||
},
|
||
{
|
||
type: "text",
|
||
text: "Styling",
|
||
},
|
||
{
|
||
type: "text",
|
||
text: "Behandling",
|
||
},
|
||
{
|
||
type: "text",
|
||
text: "Hårvård",
|
||
},
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="about" data-section="about">
|
||
<TestimonialAboutCard
|
||
useInvertedBackground={false}
|
||
tag="Vår Filosofi"
|
||
title="Kvalitet i varje detalj"
|
||
description="Live-Life Salong strävar efter att erbjuda en avkopplande upplevelse kombinerat med högkvalitativt hantverk."
|
||
subdescription="Vi brinner för hårvård och håller oss ständigt uppdaterade med de senaste trenderna."
|
||
icon={Scissors}
|
||
imageSrc="http://img.b2bpic.net/free-photo/empty-therapist-office-with-modern-furniture-decorations_482257-108008.jpg?_wi=2"
|
||
mediaAnimation="blur-reveal"
|
||
/>
|
||
</div>
|
||
|
||
<div id="services" data-section="services">
|
||
<FeatureCardTwentySix
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
features={[
|
||
{
|
||
title: "Färgning",
|
||
description: "Professionell färgning och toning.",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/woman-looks-from-sleepmask-dressed-domestic-wear-has-happy-smile-face-enjoys-good-morning-feels-refreshed-after-nap-poses-pink_273609-54576.jpg?_wi=2",
|
||
buttonIcon: "Palette",
|
||
},
|
||
{
|
||
title: "Hårstyling",
|
||
description: "Styling för vardag och fest.",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/brunette-girl-getting-her-hair-dried_23-2148108866.jpg?_wi=2",
|
||
buttonIcon: "Sparkles",
|
||
},
|
||
{
|
||
title: "Klippning",
|
||
description: "Moderna klippningar för dam och herr.",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/view-scissors-hair-salon_23-2150462460.jpg?_wi=2",
|
||
buttonIcon: "Scissors",
|
||
},
|
||
{
|
||
title: "Behandlingar",
|
||
description: "Vårdande behandlingar för hälsosamt hår.",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149230924.jpg",
|
||
buttonIcon: "Heart",
|
||
},
|
||
]}
|
||
title="Våra Tjänster"
|
||
description="Vi erbjuder ett brett utbud av hårvårdsbehandlingar för alla behov."
|
||
/>
|
||
</div>
|
||
|
||
<div id="team" data-section="team">
|
||
<TeamCardTwo
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
gridVariant="three-columns-all-equal-width"
|
||
useInvertedBackground={false}
|
||
members={[
|
||
{
|
||
id: "t1",
|
||
name: "Maria",
|
||
role: "Senior Frisör",
|
||
description: "Expert på färg och klipp.",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/baking-time-with-best-grandmother_329181-17830.jpg",
|
||
},
|
||
{
|
||
id: "t2",
|
||
name: "Erik",
|
||
role: "Frisör",
|
||
description: "Specialiserad på styling.",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-with-tattoo-his-face-arms-dressed-white-shirt-grey-background_613910-8168.jpg",
|
||
},
|
||
{
|
||
id: "t3",
|
||
name: "Sara",
|
||
role: "Frisör",
|
||
description: "Duktig på klipp och färg.",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-beautiful-woman-looking-camera-while-standing-counter-movie-house_613910-21690.jpg",
|
||
},
|
||
]}
|
||
title="Träffa Teamet"
|
||
description="Dina frisörer på Live-Life Salong."
|
||
/>
|
||
</div>
|
||
|
||
<div id="testimonials" data-section="testimonials">
|
||
<TestimonialCardThirteen
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
testimonials={[
|
||
{
|
||
id: "1",
|
||
name: "Anna",
|
||
handle: "@anna",
|
||
testimonial: "Bäst i Linköping!",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-brunette-attractive-woman-green-dress-with-wonderful-smile-spend-tine-outdoor-looks-down-poses-outside_291650-2125.jpg",
|
||
},
|
||
{
|
||
id: "2",
|
||
name: "Erik",
|
||
handle: "@erik",
|
||
testimonial: "Mycket nöjd.",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-smiley-man_23-2149022665.jpg",
|
||
},
|
||
{
|
||
id: "3",
|
||
name: "Maria",
|
||
handle: "@maria",
|
||
testimonial: "Härlig salong.",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-smiling-young-redheaded-woman_171337-8472.jpg",
|
||
},
|
||
{
|
||
id: "4",
|
||
name: "Johan",
|
||
handle: "@johan",
|
||
testimonial: "Proffsigt.",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg",
|
||
},
|
||
{
|
||
id: "5",
|
||
name: "Sara",
|
||
handle: "@sara",
|
||
testimonial: "Toppenställe.",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-senior-woman_23-2149207172.jpg",
|
||
},
|
||
]}
|
||
showRating={true}
|
||
title="Vad våra kunder säger"
|
||
description="Läs om våra kunders fantastiska upplevelser hos oss."
|
||
/>
|
||
</div>
|
||
|
||
<div id="faq" data-section="faq">
|
||
<FaqDouble
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
faqs={[
|
||
{
|
||
id: "f1",
|
||
title: "Hur bokar jag?",
|
||
content: "Boka via telefon eller vår onlinebokning.",
|
||
},
|
||
{
|
||
id: "f2",
|
||
title: "Finns parkering?",
|
||
content: "Ja, gott om parkeringsplatser i närheten.",
|
||
},
|
||
{
|
||
id: "f3",
|
||
title: "Tar ni kort?",
|
||
content: "Ja, vi accepterar alla vanliga betalkort.",
|
||
},
|
||
]}
|
||
title="Vanliga frågor"
|
||
faqsAnimation="slide-up"
|
||
description="Vi har samlat svaren på de vanligaste funderingarna."
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<ContactSplitForm
|
||
useInvertedBackground={true}
|
||
title="Boka din tid"
|
||
description="Kontakta oss för bokningar eller frågor."
|
||
inputs={[
|
||
{
|
||
name: "name",
|
||
type: "text",
|
||
placeholder: "Namn",
|
||
required: true,
|
||
},
|
||
{
|
||
name: "email",
|
||
type: "email",
|
||
placeholder: "E-post",
|
||
required: true,
|
||
},
|
||
]}
|
||
textarea={{
|
||
name: "message",
|
||
placeholder: "Ditt meddelande",
|
||
rows: 4,
|
||
required: true,
|
||
}}
|
||
imageSrc="http://img.b2bpic.net/free-photo/empty-hotel-lounge-with-cozy-furniture_482257-67425.jpg"
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterLogoEmphasis
|
||
columns={[
|
||
{
|
||
items: [
|
||
{
|
||
label: "Hem",
|
||
href: "#hero",
|
||
},
|
||
{
|
||
label: "Tjänster",
|
||
href: "#services",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
items: [
|
||
{
|
||
label: "Facebook",
|
||
href: "#",
|
||
},
|
||
{
|
||
label: "Instagram",
|
||
href: "#",
|
||
},
|
||
],
|
||
},
|
||
]}
|
||
logoText="Live-Life Salong"
|
||
/>
|
||
</div>
|
||
</ReactLenis>
|
||
</ThemeProvider>
|
||
);
|
||
}
|