Merge version_1 into main #2
280
src/app/page.tsx
280
src/app/page.tsx
@@ -18,89 +18,61 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
name: "Home", id: "hero"},
|
||||
{
|
||||
name: "Diensten",
|
||||
id: "services",
|
||||
},
|
||||
name: "Diensten", id: "services"},
|
||||
{
|
||||
name: "Over Ons",
|
||||
id: "about",
|
||||
},
|
||||
name: "Over Ons", id: "about"},
|
||||
{
|
||||
name: "Portfolio",
|
||||
id: "results",
|
||||
},
|
||||
name: "Portfolio", id: "results"},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
name: "Contact", id: "contact"},
|
||||
]}
|
||||
brandName="Kapsalon RED Asse"
|
||||
button={{
|
||||
text: "Maak afspraak",
|
||||
href: "#contact",
|
||||
}}
|
||||
text: "Maak afspraak", href: "#contact"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
background={{
|
||||
variant: "rotated-rays-static",
|
||||
}}
|
||||
variant: "rotated-rays-static"}}
|
||||
title="Moderne Kapsalon in Asse met Persoonlijke Service"
|
||||
description="Kapsalon RED is een boutique salon in het hart van Asse, gedreven door passie voor haarkleur en stijlvolle kapsels. Wij bieden een vrouwelijke, stijlvolle ervaring waar jouw wens centraal staat."
|
||||
tag="Vrouwelijk & Professioneel"
|
||||
buttons={[
|
||||
{
|
||||
text: "Maak een afspraak",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Maak een afspraak", href: "#contact"},
|
||||
{
|
||||
text: "Bekijk diensten",
|
||||
href: "#services",
|
||||
},
|
||||
text: "Bekijk diensten", href: "#services"},
|
||||
]}
|
||||
carouselItems={[
|
||||
{
|
||||
id: "c1",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-woman-getting-her-hair-done_107420-12127.jpg?_wi=1",
|
||||
imageAlt: "Modern salon interior",
|
||||
},
|
||||
id: "c1", imageSrc: "http://img.b2bpic.net/free-photo/stylish-woman-getting-her-hair-done_107420-12127.jpg", imageAlt: "Modern salon interior"},
|
||||
{
|
||||
id: "c2",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautician-styling-clients-hair_107420-94682.jpg?_wi=1",
|
||||
imageAlt: "Stijlvolle haartransformatie",
|
||||
},
|
||||
id: "c2", imageSrc: "http://img.b2bpic.net/free-photo/beautician-styling-clients-hair_107420-94682.jpg", imageAlt: "Stijlvolle haartransformatie"},
|
||||
{
|
||||
id: "c3",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-photo-curlyhaired-beautiful-girl-high-quality-photo_114579-92162.jpg?_wi=1",
|
||||
imageAlt: "Warm welkom in de salon",
|
||||
},
|
||||
id: "c3", imageSrc: "http://img.b2bpic.net/free-photo/closeup-photo-curlyhaired-beautiful-girl-high-quality-photo_114579-92162.jpg", imageAlt: "Warm welkom in de salon"},
|
||||
{
|
||||
id: "c4",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-stunning-woman-with-pink-hair-stylish-winter-fluffy-coat-with-leopard-print_273443-1441.jpg?_wi=1",
|
||||
imageAlt: "Professional team",
|
||||
},
|
||||
id: "c4", imageSrc: "http://img.b2bpic.net/free-photo/portrait-stunning-woman-with-pink-hair-stylish-winter-fluffy-coat-with-leopard-print_273443-1441.jpg", imageAlt: "Professional team"},
|
||||
{
|
||||
id: "c5",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-washing-off-dye-sink_23-2147769788.jpg?_wi=1",
|
||||
imageAlt: "Modern styling",
|
||||
},
|
||||
id: "c5", imageSrc: "http://img.b2bpic.net/free-photo/woman-washing-off-dye-sink_23-2147769788.jpg", imageAlt: "Modern styling"},
|
||||
{
|
||||
id: "c6",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-hairstilyst-giving-haircut_23-2148506294.jpg?_wi=1",
|
||||
imageAlt: "Balayage resultaat",
|
||||
},
|
||||
id: "c6", imageSrc: "http://img.b2bpic.net/free-photo/front-view-hairstilyst-giving-haircut_23-2148506294.jpg", imageAlt: "Balayage resultaat"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -110,9 +82,7 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
title="Wie is Kapsalon RED Asse?"
|
||||
description={[
|
||||
"Red is een boutique kapsalon met een voorliefde voor haarkleur en stijlvolle kapsels. Als vrouwelijk gedreven team geloven we in een persoonlijke en warme aanpak.",
|
||||
"Wij luisteren naar jouw wensen en combineren onze expertise met de nieuwste trends om een look te creëren die perfect bij jouw persoonlijkheid en lifestyle past. Je bent bij ons niet zomaar een nummer; jouw 'me-time' ervaring is onze prioriteit.",
|
||||
]}
|
||||
"Red is een boutique kapsalon met een voorliefde voor haarkleur en stijlvolle kapsels. Als vrouwelijk gedreven team geloven we in een persoonlijke en warme aanpak.", "Wij luisteren naar jouw wensen en combineren onze expertise met de nieuwste trends om een look te creëren die perfect bij jouw persoonlijkheid en lifestyle past. Je bent bij ons niet zomaar een nummer; jouw 'me-time' ervaring is onze prioriteit."]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -123,29 +93,17 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Dameskapsels & Styling",
|
||||
descriptions: [
|
||||
"Op maat gemaakte snits en persoonlijke styling.",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-hairdresser-consulting-client_23-2147769874.jpg",
|
||||
},
|
||||
id: "f1", title: "Dameskapsels & Styling", descriptions: [
|
||||
"Op maat gemaakte snits en persoonlijke styling."],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-hairdresser-consulting-client_23-2147769874.jpg"},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Herenkapsels",
|
||||
descriptions: [
|
||||
"Kwalitatieve herenkapsels met aandacht voor detail.",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-bearded-man-getting-haircut-by-hairdresser-while-sitting-chair-barbershop-barber-soul_627829-6410.jpg",
|
||||
},
|
||||
id: "f2", title: "Herenkapsels", descriptions: [
|
||||
"Kwalitatieve herenkapsels met aandacht voor detail."],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-bearded-man-getting-haircut-by-hairdresser-while-sitting-chair-barbershop-barber-soul_627829-6410.jpg"},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Kleuring & Balayage",
|
||||
descriptions: [
|
||||
"Expert in balayage, highlights en kleurtechnieken.",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-looking-photo-tape-red-background-high-quality-photo_114579-60934.jpg",
|
||||
},
|
||||
id: "f3", title: "Kleuring & Balayage", descriptions: [
|
||||
"Expert in balayage, highlights en kleurtechnieken."],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-looking-photo-tape-red-background-high-quality-photo_114579-60934.jpg"},
|
||||
]}
|
||||
title="Onze Specialisaties"
|
||||
description="Van subtiele balayage tot stijlvolle snits, wij bieden een compleet scala aan haarverzorging."
|
||||
@@ -159,52 +117,28 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Dames",
|
||||
price: "Vanaf €45",
|
||||
buttons: [
|
||||
id: "p1", name: "Dames", price: "Vanaf €45", buttons: [
|
||||
{
|
||||
text: "Boek Nu",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Boek Nu", href: "#contact"},
|
||||
],
|
||||
features: [
|
||||
"Consultatie",
|
||||
"Wassen",
|
||||
"Snit & Styling",
|
||||
],
|
||||
"Consultatie", "Wassen", "Snit & Styling"],
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Heren",
|
||||
price: "Vanaf €30",
|
||||
buttons: [
|
||||
id: "p2", name: "Heren", price: "Vanaf €30", buttons: [
|
||||
{
|
||||
text: "Boek Nu",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Boek Nu", href: "#contact"},
|
||||
],
|
||||
features: [
|
||||
"Consultatie",
|
||||
"Wassen",
|
||||
"Snit",
|
||||
],
|
||||
"Consultatie", "Wassen", "Snit"],
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Kleuring",
|
||||
price: "Vanaf €60",
|
||||
buttons: [
|
||||
id: "p3", name: "Kleuring", price: "Vanaf €60", buttons: [
|
||||
{
|
||||
text: "Boek Nu",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Boek Nu", href: "#contact"},
|
||||
],
|
||||
features: [
|
||||
"Kleuradvies",
|
||||
"Verzorging",
|
||||
"Finishing touch",
|
||||
],
|
||||
"Kleuradvies", "Verzorging", "Finishing touch"],
|
||||
},
|
||||
]}
|
||||
title="Tarieven & Informatie"
|
||||
@@ -220,47 +154,17 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "prod1",
|
||||
name: "Brown Balayage",
|
||||
price: "Casual Styling",
|
||||
variant: "Kleurtechniek",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-woman-getting-her-hair-done_107420-12127.jpg?_wi=2",
|
||||
},
|
||||
id: "prod1", name: "Brown Balayage", price: "Casual Styling", variant: "Kleurtechniek", imageSrc: "http://img.b2bpic.net/free-photo/stylish-woman-getting-her-hair-done_107420-12127.jpg"},
|
||||
{
|
||||
id: "prod2",
|
||||
name: "Ash Blond",
|
||||
price: "Blended Highlights",
|
||||
variant: "Kleurtechniek",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautician-styling-clients-hair_107420-94682.jpg?_wi=2",
|
||||
},
|
||||
id: "prod2", name: "Ash Blond", price: "Blended Highlights", variant: "Kleurtechniek", imageSrc: "http://img.b2bpic.net/free-photo/beautician-styling-clients-hair_107420-94682.jpg"},
|
||||
{
|
||||
id: "prod3",
|
||||
name: "Moneypiece Ombré",
|
||||
price: "Trendy Look",
|
||||
variant: "Kleurtechniek",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-photo-curlyhaired-beautiful-girl-high-quality-photo_114579-92162.jpg?_wi=2",
|
||||
},
|
||||
id: "prod3", name: "Moneypiece Ombré", price: "Trendy Look", variant: "Kleurtechniek", imageSrc: "http://img.b2bpic.net/free-photo/closeup-photo-curlyhaired-beautiful-girl-high-quality-photo_114579-92162.jpg"},
|
||||
{
|
||||
id: "prod4",
|
||||
name: "Warm Blond",
|
||||
price: "Stijlvolle Look",
|
||||
variant: "Styling",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-stunning-woman-with-pink-hair-stylish-winter-fluffy-coat-with-leopard-print_273443-1441.jpg?_wi=2",
|
||||
},
|
||||
id: "prod4", name: "Warm Blond", price: "Stijlvolle Look", variant: "Styling", imageSrc: "http://img.b2bpic.net/free-photo/portrait-stunning-woman-with-pink-hair-stylish-winter-fluffy-coat-with-leopard-print_273443-1441.jpg"},
|
||||
{
|
||||
id: "prod5",
|
||||
name: "Bixie Blond",
|
||||
price: "Modern Cut",
|
||||
variant: "Snit",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-washing-off-dye-sink_23-2147769788.jpg?_wi=2",
|
||||
},
|
||||
id: "prod5", name: "Bixie Blond", price: "Modern Cut", variant: "Snit", imageSrc: "http://img.b2bpic.net/free-photo/woman-washing-off-dye-sink_23-2147769788.jpg"},
|
||||
{
|
||||
id: "prod6",
|
||||
name: "Cool Blond",
|
||||
price: "Highlights",
|
||||
variant: "Kleurtechniek",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-hairstilyst-giving-haircut_23-2148506294.jpg?_wi=2",
|
||||
},
|
||||
id: "prod6", name: "Cool Blond", price: "Highlights", variant: "Kleurtechniek", imageSrc: "http://img.b2bpic.net/free-photo/front-view-hairstilyst-giving-haircut_23-2148506294.jpg"},
|
||||
]}
|
||||
title="Inspiratie & Resultaten"
|
||||
description="Bekijk hier een selectie van onze transformaties en stijlvolle resultaten."
|
||||
@@ -273,60 +177,15 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Ellen N.",
|
||||
date: "10/2023",
|
||||
title: "Mijn vaste kapper",
|
||||
quote: "Ik denk dat ik na al die jaren eindelijk een vaste kapster gevonden heb. Heel vriendelijk team!",
|
||||
tag: "Klant",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/woman-model-appearance-with-flag-ukraine-her-face-holds-posing-pink-background_114579-92689.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-woman-getting-her-hair-done_107420-12127.jpg?_wi=3",
|
||||
imageAlt: "modern hair salon interior elegant",
|
||||
},
|
||||
id: "t1", name: "Ellen N.", date: "10/2023", title: "Mijn vaste kapper", quote: "Ik denk dat ik na al die jaren eindelijk een vaste kapster gevonden heb. Heel vriendelijk team!", tag: "Klant", avatarSrc: "http://img.b2bpic.net/free-photo/woman-model-appearance-with-flag-ukraine-her-face-holds-posing-pink-background_114579-92689.jpg", imageSrc: "http://img.b2bpic.net/free-photo/stylish-woman-getting-her-hair-done_107420-12127.jpg", imageAlt: "modern hair salon interior elegant"},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Sarah V.",
|
||||
date: "09/2023",
|
||||
title: "Fantastisch",
|
||||
quote: "Elke keer een fantastisch en uniek resultaat. Ze luisteren echt naar wat ik wil.",
|
||||
tag: "Klant",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/close-up-executives-showing-thumbs-up_1098-1828.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautician-styling-clients-hair_107420-94682.jpg?_wi=3",
|
||||
imageAlt: "hair salon interior design minimalist",
|
||||
},
|
||||
id: "t2", name: "Sarah V.", date: "09/2023", title: "Fantastisch", quote: "Elke keer een fantastisch en uniek resultaat. Ze luisteren echt naar wat ik wil.", tag: "Klant", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-executives-showing-thumbs-up_1098-1828.jpg", imageSrc: "http://img.b2bpic.net/free-photo/beautician-styling-clients-hair_107420-94682.jpg", imageAlt: "hair salon interior design minimalist"},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Marie L.",
|
||||
date: "08/2023",
|
||||
title: "Aanrader",
|
||||
quote: "Heel handig dat je online een afspraak kan maken. De sfeer in de salon is top!",
|
||||
tag: "Klant",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/young-professional-hairdresser-woman-apron-sprinkling-water-hair-man-client-using-spray-before-haircut_141793-37360.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-photo-curlyhaired-beautiful-girl-high-quality-photo_114579-92162.jpg?_wi=3",
|
||||
imageAlt: "hair salon interior view",
|
||||
},
|
||||
id: "t3", name: "Marie L.", date: "08/2023", title: "Aanrader", quote: "Heel handig dat je online een afspraak kan maken. De sfeer in de salon is top!", tag: "Klant", avatarSrc: "http://img.b2bpic.net/free-photo/young-professional-hairdresser-woman-apron-sprinkling-water-hair-man-client-using-spray-before-haircut_141793-37360.jpg", imageSrc: "http://img.b2bpic.net/free-photo/closeup-photo-curlyhaired-beautiful-girl-high-quality-photo_114579-92162.jpg", imageAlt: "hair salon interior view"},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Sofie D.",
|
||||
date: "07/2023",
|
||||
title: "Super service",
|
||||
quote: "Eindelijk iemand die begrijpt hoe mijn haar werkt. Heel tevreden.",
|
||||
tag: "Klant",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/girl-sitting-table-holding-mobile-phone-indoors_171337-17097.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-stunning-woman-with-pink-hair-stylish-winter-fluffy-coat-with-leopard-print_273443-1441.jpg?_wi=3",
|
||||
imageAlt: "interior view of modern hair salon",
|
||||
},
|
||||
id: "t4", name: "Sofie D.", date: "07/2023", title: "Super service", quote: "Eindelijk iemand die begrijpt hoe mijn haar werkt. Heel tevreden.", tag: "Klant", avatarSrc: "http://img.b2bpic.net/girl-sitting-table-holding-mobile-phone-indoors_171337-17097.jpg", imageSrc: "http://img.b2bpic.net/free-photo/portrait-stunning-woman-with-pink-hair-stylish-winter-fluffy-coat-with-leopard-print_273443-1441.jpg", imageAlt: "interior view of modern hair salon"},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Katrien P.",
|
||||
date: "06/2023",
|
||||
title: "Geweldig",
|
||||
quote: "Ik ben heel gelukkig naar buiten gestapt. Een echte aanrader in Asse!",
|
||||
tag: "Klant",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/impressed-girl-admiring-great-music-taste-friend-showing-thumbs-up-smiling-excited-astoni_1258-142264.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-washing-off-dye-sink_23-2147769788.jpg?_wi=3",
|
||||
imageAlt: "modern salon interior clean design",
|
||||
},
|
||||
id: "t5", name: "Katrien P.", date: "06/2023", title: "Geweldig", quote: "Ik ben heel gelukkig naar buiten gestapt. Een echte aanrader in Asse!", tag: "Klant", avatarSrc: "http://img.b2bpic.net/free-photo/impressed-girl-admiring-great-music-taste-friend-showing-thumbs-up-smiling-excited-astoni_1258-142264.jpg", imageSrc: "http://img.b2bpic.net/free-photo/woman-washing-off-dye-sink_23-2147769788.jpg", imageAlt: "modern salon interior clean design"},
|
||||
]}
|
||||
title="Wat onze klanten zeggen"
|
||||
description="Wij zijn trots op de mooie recensies die we van onze klanten in Asse krijgen."
|
||||
@@ -337,8 +196,7 @@ export default function LandingPage() {
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
variant: "plain"}}
|
||||
tag="Contact"
|
||||
title="Maak jouw afspraak bij RED Asse"
|
||||
description="Ben jij toe aan een nieuw kapsel of een update van je haarkleur? Maak eenvoudig online je afspraak of contacteer ons via onderstaande gegevens."
|
||||
@@ -354,45 +212,29 @@ export default function LandingPage() {
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Steenweg 33, 1730 Asse",
|
||||
href: "#",
|
||||
},
|
||||
label: "Steenweg 33, 1730 Asse", href: "#"},
|
||||
{
|
||||
label: "02 452 33 75",
|
||||
href: "tel:024523375",
|
||||
},
|
||||
label: "02 452 33 75", href: "tel:024523375"},
|
||||
{
|
||||
label: "asse@red-stylists.be",
|
||||
href: "mailto:asse@red-stylists.be",
|
||||
},
|
||||
label: "asse@red-stylists.be", href: "mailto:asse@red-stylists.be"},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Diensten",
|
||||
href: "#services",
|
||||
},
|
||||
label: "Diensten", href: "#services"},
|
||||
{
|
||||
label: "Portfolio",
|
||||
href: "#results",
|
||||
},
|
||||
label: "Portfolio", href: "#results"},
|
||||
{
|
||||
label: "Online Booking",
|
||||
href: "#",
|
||||
},
|
||||
label: "Online Booking", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
label: "Privacy Policy", href: "#"},
|
||||
{
|
||||
label: "Algemene Voorwaarden",
|
||||
href: "#",
|
||||
},
|
||||
label: "Algemene Voorwaarden", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
Reference in New Issue
Block a user