Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| c0e7882023 | |||
| 65d0ae633d | |||
| 4110a6032f |
385
src/app/page.tsx
385
src/app/page.tsx
@@ -9,298 +9,129 @@ import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import TeamCardFive from '@/components/sections/team/TeamCardFive';
|
||||
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
||||
import { Clock, Coffee, Star } from "lucide-react";
|
||||
import { Clock, Coffee, Star, Scissors, Sparkles, Smile } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="compact"
|
||||
sizing="mediumLargeSizeLargeTitles"
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="gradient-radial"
|
||||
primaryButtonStyle="double-inset"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Hjem",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Om Oss",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Team",
|
||||
id: "team",
|
||||
},
|
||||
{
|
||||
name: "Anmeldelser",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Kontakt",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="MR. Barber"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Hjem", id: "hero" },
|
||||
{ name: "Hvorfor oss", id: "about" },
|
||||
{ name: "Team", id: "team" },
|
||||
{ name: "Erfaringer", id: "testimonials" },
|
||||
{ name: "Kontakt", id: "contact" },
|
||||
]}
|
||||
brandName="MR. Barber"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
title="Presisjon og Stil hos MR. Barber"
|
||||
description="Opplev byens beste fade, skjeggtrim og profesjonell service i en atmosfære der du alltid føler deg velkommen. Velkommen til din nye faste frisør i Lørenskog."
|
||||
tag="Best i byen"
|
||||
buttons={[
|
||||
{
|
||||
text: "Bestill time",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/full-shot-man-getting-haircut_23-2149220553.jpg?_wi=1"
|
||||
imageAlt="MR. Barber interiør"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/smiling-broadly-business-woman-showing-thumb-up_1262-1127.jpg",
|
||||
alt: "Kunde 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205917.jpg",
|
||||
alt: "Kunde 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/headshot-handsome-bearded-man-smiling-standing-against-white-background_1258-112102.jpg",
|
||||
alt: "Kunde 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-vector/instagram-post-collection-template-with-photo_23-2148304306.jpg",
|
||||
alt: "Kunde 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/man-looking-mirror-medium-shot_23-2149141782.jpg",
|
||||
alt: "Kunde 5",
|
||||
},
|
||||
]}
|
||||
avatarText="Over 500+ fornøyde kunder"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Klassisk klipp",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Skjeggtrim",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Skinfade",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Hodebunnsmassasje",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Profesjonell styling",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
title="Presisjon, Atmosfære og Ibrahim"
|
||||
description="MR. Barber setter standarden i Lørenskog. Fra den perfekte fade til god stemning i stolen - vi kombinerer rimelige priser med topp håndverk."
|
||||
tag="Din lokale favoritt"
|
||||
tagIcon={Scissors}
|
||||
buttons={[{ text: "Bestill din time", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/full-shot-man-getting-haircut_23-2149220553.jpg?_wi=1"
|
||||
imageAlt="MR. Barber atmosfære"
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "Skinfade" },
|
||||
{ type: "text", text: "Skjeggtrim" },
|
||||
{ type: "text", text: "Klassisk Klipp" },
|
||||
{ type: "text", text: "Profesjonell service" },
|
||||
{ type: "text", text: "God stemning" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="Hvorfor velge MR. Barber?"
|
||||
metrics={[
|
||||
{
|
||||
icon: Star,
|
||||
label: "Kunder fornøyd",
|
||||
value: "100%",
|
||||
},
|
||||
{
|
||||
icon: Clock,
|
||||
label: "God tid til detaljer",
|
||||
value: "Alltid",
|
||||
},
|
||||
{
|
||||
icon: Coffee,
|
||||
label: "Gratis kaffe",
|
||||
value: "Ja",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
title="Hvorfor MR. Barber er ditt førstevalg"
|
||||
metrics={[
|
||||
{ icon: Star, label: "Presisjon", value: "100%" },
|
||||
{ icon: Clock, label: "God stemning", value: "Hver gang" },
|
||||
{ icon: Coffee, label: "Rimelige priser", value: "Alltid" },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
team={[
|
||||
{
|
||||
id: "ibrahim",
|
||||
name: "Ibrahim",
|
||||
role: "Master Barber",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-looking-mirror-medium-shot_23-2149141782.jpg?_wi=1",
|
||||
imageAlt: "Ibrahim",
|
||||
},
|
||||
{
|
||||
id: "jihad",
|
||||
name: "Jihad",
|
||||
role: "Barber",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blurred-woman-shaving-man_23-2147778910.jpg?_wi=1",
|
||||
imageAlt: "Jihad",
|
||||
},
|
||||
]}
|
||||
title="Møt våre eksperter"
|
||||
description="Våre dyktige barbere brenner for faget sitt og tar seg alltid tid til å lytte til dine ønsker."
|
||||
/>
|
||||
</div>
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
title="Møt Ibrahim og teamet"
|
||||
description="Hos oss er det Ibrahim og resten av gjengen som sørger for at du går ut døra med en ny, skarp stil hver gang. Velkommen til en barbershop som tar deg på alvor."
|
||||
team={[
|
||||
{
|
||||
id: "ibrahim", name: "Ibrahim", role: "Master Barber & Grunnlegger", imageSrc: "http://img.b2bpic.net/free-photo/man-looking-mirror-medium-shot_23-2149141782.jpg?_wi=1", imageAlt: "Ibrahim"
|
||||
},
|
||||
{
|
||||
id: "jihad", name: "Jihad", role: "Barber", imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205917.jpg?_wi=1", imageAlt: "Jihad"
|
||||
}
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Martin Skogheim",
|
||||
date: "4 måneder siden",
|
||||
title: "Beste opplevelsen!",
|
||||
quote: "Veldig dyktige barbere. Alle holder høy klasse.",
|
||||
tag: "Fast kunde",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/smiling-broadly-business-woman-showing-thumb-up_1262-1127.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-getting-haircut_23-2149220553.jpg?_wi=2",
|
||||
imageAlt: "barbershop interior classic style",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Omar",
|
||||
date: "8 måneder siden",
|
||||
title: "Perfekt fade",
|
||||
quote: "Ibrahim tok seg god tid til å lytte. Resultatet ble perfekt.",
|
||||
tag: "Anbefales",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205917.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-looking-mirror-medium-shot_23-2149141782.jpg?_wi=2",
|
||||
imageAlt: "barber portrait professional",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Ståle Hørlyk",
|
||||
date: "10 måneder siden",
|
||||
title: "Elegant interiør",
|
||||
quote: "Elegant interiør og meget dyktige fagfolk.",
|
||||
tag: "Topp service",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/headshot-handsome-bearded-man-smiling-standing-against-white-background_1258-112102.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blurred-woman-shaving-man_23-2147778910.jpg?_wi=2",
|
||||
imageAlt: "barber working on hair fade",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "John Kaluba",
|
||||
date: "7 måneder siden",
|
||||
title: "Klipper alt",
|
||||
quote: "De klipper alt slags typer hår inkludert skinfade.",
|
||||
tag: "Proff",
|
||||
avatarSrc: "http://img.b2bpic.net/free-vector/instagram-post-collection-template-with-photo_23-2148304306.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-broadly-business-woman-showing-thumb-up_1262-1127.jpg",
|
||||
imageAlt: "happy male customer smiling",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Erik Nilsen",
|
||||
date: "2 måneder siden",
|
||||
title: "Veldig fornøyd",
|
||||
quote: "Gjør alltid en fantastisk jobb, profesjonelt.",
|
||||
tag: "Stammis",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/smiling-broadly-business-woman-showing-thumb-up_1262-1127.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205917.jpg",
|
||||
imageAlt: "young customer happy smile",
|
||||
},
|
||||
]}
|
||||
title="Hva kundene sier"
|
||||
description="Vi er stolte av å være kundens foretrukne valg i Lørenskog."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
title="Kundene våre forteller"
|
||||
description="Se hvorfor våre kunder i Lørenskog kommer tilbake igjen og igjen."
|
||||
tag="Kundeopplevelser"
|
||||
tagIcon={Smile}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Martin Skogheim", date: "Forrige måned", title: "Eksepsjonell presisjon", quote: "Ibrahim er i en klasse for seg selv. Beste fade i Lørenskog.", tag: "Stammis", avatarSrc: "http://img.b2bpic.net/free-photo/smiling-broadly-business-woman-showing-thumb-up_1262-1127.jpg", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-getting-haircut_23-2149220553.jpg?_wi=2"
|
||||
},
|
||||
{
|
||||
id: "2", name: "Omar", date: "2 måneder siden", title: "Hyggelig atmosfære", quote: "Alltid god stemning, rimelig pris og fantastisk service.", tag: "Anbefales", avatarSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205917.jpg", imageSrc: "http://img.b2bpic.net/free-photo/man-looking-mirror-medium-shot_23-2149141782.jpg?_wi=2"
|
||||
}
|
||||
]}
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Bestill time"
|
||||
title="Klar for en ny klipp?"
|
||||
description="Besøk oss i dag for en profesjonell opplevelse i en behagelig atmosfære."
|
||||
buttons={[
|
||||
{
|
||||
text: "Ring oss",
|
||||
href: "tel:+4700000000",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
tag="Booking"
|
||||
tagIcon={Sparkles}
|
||||
title="Klar for å oppgradere stilen?"
|
||||
description="Book din time hos MR. Barber i dag. Rimelige priser, presisjon i hver bevegelse og byens beste stemning."
|
||||
buttons={[{ text: "Ring oss for booking", href: "tel:+4700000000" }]}
|
||||
background={{ variant: "radial-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{
|
||||
title: "MR. Barber",
|
||||
items: [
|
||||
{
|
||||
label: "Hjem",
|
||||
href: "#hero",
|
||||
},
|
||||
{
|
||||
label: "Om oss",
|
||||
href: "#about",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Tjenester",
|
||||
items: [
|
||||
{
|
||||
label: "Hårklipp",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Skjeggtrim",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Kontakt",
|
||||
items: [
|
||||
{
|
||||
label: "Lørenskog, Norge",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Følg oss på IG",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2024 MR. Barber. Alle rettigheter reservert."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{ title: "MR. Barber", items: [{ label: "Hjem", href: "#nav" }, { label: "Team", href: "#team" }] },
|
||||
{ title: "Tjenester", items: [{ label: "Fade", href: "#" }, { label: "Skjegg", href: "#" }] },
|
||||
{ title: "Kontakt", items: [{ label: "Lørenskog sentrum", href: "#" }, { label: "Instagram", href: "#" }] },
|
||||
]}
|
||||
copyrightText="© 2024 MR. Barber"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user