Update src/app/page.tsx
This commit is contained in:
296
src/app/page.tsx
296
src/app/page.tsx
@@ -3,13 +3,13 @@
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import AboutMetric from '@/components/sections/about/AboutMetric';
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
||||
import { Award, Scissors, Star } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
@@ -30,30 +30,12 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "#hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "#about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "#pricing",
|
||||
},
|
||||
{
|
||||
name: "Gallery",
|
||||
id: "#gallery",
|
||||
},
|
||||
{
|
||||
name: "Reviews",
|
||||
id: "#reviews",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
{ name: "Home", id: "#hero" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Services", id: "#pricing" },
|
||||
{ name: "Gallery", id: "#gallery" },
|
||||
{ name: "Reviews", id: "#reviews" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
brandName="CARPE DIEM BARBERSHOP"
|
||||
/>
|
||||
@@ -61,42 +43,17 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
background={{
|
||||
variant: "rotated-rays-static",
|
||||
}}
|
||||
background={{ variant: "rotated-rays-static" }}
|
||||
title="The Finest Haircut You Will Ever Get In London"
|
||||
description="London's Only 5-Star Rated Barbershop — 619 Google Reviews"
|
||||
buttons={[
|
||||
{
|
||||
text: "BOOK NOW",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "BOOK NOW", href: "#contact" }]}
|
||||
carouselItems={[
|
||||
{
|
||||
id: "c1",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dd0uaBVU6eQ5MTWG82b6xRjYz9/uploaded-1778598134475-hfhdkgld.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "c2",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dd0uaBVU6eQ5MTWG82b6xRjYz9/uploaded-1778598134475-497d89sa.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "c3",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dd0uaBVU6eQ5MTWG82b6xRjYz9/uploaded-1778598134475-tiayxwrb.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "c4",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dd0uaBVU6eQ5MTWG82b6xRjYz9/uploaded-1778598134475-8mknrim7.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "c5",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work_627829-7271.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "c6",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/european-brutal-man-with-beard-cut-barbershop_343596-4697.jpg?_wi=1",
|
||||
},
|
||||
{ id: "c1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dd0uaBVU6eQ5MTWG82b6xRjYz9/uploaded-1778598134475-hfhdkgld.jpg?_wi=1" },
|
||||
{ id: "c2", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dd0uaBVU6eQ5MTWG82b6xRjYz9/uploaded-1778598134475-497d89sa.jpg?_wi=1" },
|
||||
{ id: "c3", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dd0uaBVU6eQ5MTWG82b6xRjYz9/uploaded-1778598134475-tiayxwrb.jpg?_wi=1" },
|
||||
{ id: "c4", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dd0uaBVU6eQ5MTWG82b6xRjYz9/uploaded-1778598134475-8mknrim7.jpg?_wi=1" },
|
||||
{ id: "c5", imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work_627829-7271.jpg?_wi=1" },
|
||||
{ id: "c6", imageSrc: "http://img.b2bpic.net/free-photo/european-brutal-man-with-beard-cut-barbershop_343596-4697.jpg?_wi=1" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -106,21 +63,9 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
title="The Story of Carpe Diem"
|
||||
metrics={[
|
||||
{
|
||||
icon: Scissors,
|
||||
label: "Years of Passion",
|
||||
value: "15+",
|
||||
},
|
||||
{
|
||||
icon: Star,
|
||||
label: "Google Rating",
|
||||
value: "5.0",
|
||||
},
|
||||
{
|
||||
icon: Award,
|
||||
label: "Verified Reviews",
|
||||
value: "619+",
|
||||
},
|
||||
{ icon: Scissors, label: "Years of Passion", value: "15+" },
|
||||
{ icon: Star, label: "Google Rating", value: "5.0" },
|
||||
{ icon: Award, label: "Verified Reviews", value: "619+" },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
@@ -132,43 +77,8 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "cuts",
|
||||
name: "✂️ Haircuts",
|
||||
price: "From £48",
|
||||
features: [
|
||||
"Long Haircut: £48",
|
||||
"Skin Fade: Price on request",
|
||||
"Skin Fade + Haircut: Price on request",
|
||||
"Beard Trim: Price on request",
|
||||
"Razor Cut: Price on request",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Book Appointment",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "colour",
|
||||
name: "🎨 Colour Services",
|
||||
price: "From £30",
|
||||
features: [
|
||||
"Hair Colour: £45",
|
||||
"Hair Colour + Cut: £80",
|
||||
"Beard Colour: £30",
|
||||
"Beard Colour/Trim: £65",
|
||||
"Full Package: £140",
|
||||
"Patch Test: FREE",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Book Appointment",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ id: "cuts", name: "✂️ Haircuts", price: "From £48", features: ["Long Haircut: £48", "Skin Fade: Price on request", "Skin Fade + Haircut: Price on request", "Beard Trim: Price on request", "Razor Cut: Price on request"], buttons: [{ text: "Book Appointment", href: "#contact" }] },
|
||||
{ id: "colour", name: "🎨 Colour Services", price: "From £30", features: ["Hair Colour: £45", "Hair Colour + Cut: £80", "Beard Colour: £30", "Beard Colour/Trim: £65", "Full Package: £140", "Patch Test: FREE"], buttons: [{ text: "Book Appointment", href: "#contact" }] },
|
||||
]}
|
||||
title="Services & Pricing"
|
||||
description="Premium grooming experiences tailored for the modern Londoner."
|
||||
@@ -182,42 +92,12 @@ export default function LandingPage() {
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "g1",
|
||||
name: "Classic Fade",
|
||||
price: "Sharp & Clean",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dd0uaBVU6eQ5MTWG82b6xRjYz9/uploaded-1778598134475-497d89sa.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "g2",
|
||||
name: "Modern Cut",
|
||||
price: "Style & Texture",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dd0uaBVU6eQ5MTWG82b6xRjYz9/uploaded-1778598134475-tiayxwrb.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "g3",
|
||||
name: "Precision Trim",
|
||||
price: "Expert Grooming",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dd0uaBVU6eQ5MTWG82b6xRjYz9/uploaded-1778598134475-8mknrim7.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "g4",
|
||||
name: "Beard Detail",
|
||||
price: "Perfect Finish",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dd0uaBVU6eQ5MTWG82b6xRjYz9/uploaded-1778598134475-hfhdkgld.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "g5",
|
||||
name: "Colour Work",
|
||||
price: "Bespoke Style",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work_627829-7271.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "g6",
|
||||
name: "Razor Sharp",
|
||||
price: "Expert Technique",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/european-brutal-man-with-beard-cut-barbershop_343596-4697.jpg?_wi=2",
|
||||
},
|
||||
{ id: "g1", name: "Classic Fade", price: "Sharp & Clean", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dd0uaBVU6eQ5MTWG82b6xRjYz9/uploaded-1778598134475-497d89sa.jpg?_wi=2" },
|
||||
{ id: "g2", name: "Modern Cut", price: "Style & Texture", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dd0uaBVU6eQ5MTWG82b6xRjYz9/uploaded-1778598134475-tiayxwrb.jpg?_wi=2" },
|
||||
{ id: "g3", name: "Precision Trim", price: "Expert Grooming", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dd0uaBVU6eQ5MTWG82b6xRjYz9/uploaded-1778598134475-8mknrim7.jpg?_wi=2" },
|
||||
{ id: "g4", name: "Beard Detail", price: "Perfect Finish", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dd0uaBVU6eQ5MTWG82b6xRjYz9/uploaded-1778598134475-hfhdkgld.jpg?_wi=2" },
|
||||
{ id: "g5", name: "Colour Work", price: "Bespoke Style", imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work_627829-7271.jpg?_wi=2" },
|
||||
{ id: "g6", name: "Razor Sharp", price: "Expert Technique", imageSrc: "http://img.b2bpic.net/free-photo/european-brutal-man-with-beard-cut-barbershop_343596-4697.jpg?_wi=2" },
|
||||
]}
|
||||
title="Our Work"
|
||||
description="See the precision and craft that makes us London's top-rated destination."
|
||||
@@ -225,118 +105,42 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="reviews" data-section="reviews">
|
||||
<TestimonialCardTen
|
||||
<TestimonialCardTwo
|
||||
animationType="depth-3d"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
title: "Incredible Service",
|
||||
quote: "I was impressed to find out that they're the only 5-star-rated barber in London. I booked a long haircut with Sol (£48) and it was absolutely worth it.",
|
||||
name: "William Julian Taranu-Lee",
|
||||
role: "Client",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work_627829-7271.jpg?_wi=3",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
title: "Cleanest Fade",
|
||||
quote: "Booked a skin fade + haircut and couldn't be happier with the result. The fade was clean, blended perfectly, and the overall cut was sharp and fresh.",
|
||||
name: "Clement LIU",
|
||||
role: "Client",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/european-brutal-man-with-beard-cut-barbershop_343596-4697.jpg?_wi=3",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
title: "Top Expertise",
|
||||
quote: "I came in not really knowing what to get, but Sol knew exactly what to do and gave me a really good cut that didn't just look good but was of great quality.",
|
||||
name: "David Solomon",
|
||||
role: "Client",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fatty-bearded-male-red-t-shirt-grey-background_613910-15636.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
title: "Professional",
|
||||
quote: "Sol is a true master of his craft. The attention to detail is second to none. Best shop in the city.",
|
||||
name: "Alex R.",
|
||||
role: "Client",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pleased-slavic-middle-aged-male-barber-uniform-holding-barber-tools-isolated-purple-wall_141793-91610.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
title: "Highly Recommend",
|
||||
quote: "Everything from the environment to the final cut is premium. You can tell they care about every single customer.",
|
||||
name: "Sam K.",
|
||||
role: "Client",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-blond-bearded-male-dressed-black-leather-jacket_613910-11902.jpg",
|
||||
},
|
||||
{ id: "t1", name: "William Julian Taranu-Lee", role: "Client", testimonial: "I was impressed to find out that they're the only 5-star-rated barber in London. I booked a long haircut with Sol (£48) and it was absolutely worth it.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dd0uaBVU6eQ5MTWG82b6xRjYz9/uploaded-1778602154020-vvai2v83.jpg" },
|
||||
{ id: "t2", name: "Clement LIU", role: "Client", testimonial: "Booked a skin fade + haircut and couldn't be happier with the result. The fade was clean, blended perfectly, and the overall cut was sharp and fresh.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dd0uaBVU6eQ5MTWG82b6xRjYz9/uploaded-1778602154020-f3s3dr3x.jpg" },
|
||||
{ id: "t3", name: "David Solomon", role: "Client", testimonial: "I came in not really knowing what to get, but Sol knew exactly what to do and gave me a really good cut that didn't just look good but was of great quality.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dd0uaBVU6eQ5MTWG82b6xRjYz9/uploaded-1778602154020-4f2h16nq.jpg" },
|
||||
]}
|
||||
title="What Our Clients Say"
|
||||
description="London's Only 5-Star Rated Barbershop — 619 Google Reviews"
|
||||
title="Luxury Client Experiences"
|
||||
description="Refining the art of grooming with every precision cut."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
<ContactSplitForm
|
||||
title="Book Your Luxury Experience"
|
||||
description="Step into a world of timeless style and premium craftsmanship."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Full Name" },
|
||||
{ name: "email", type: "email", placeholder: "Email Address" }
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dd0uaBVU6eQ5MTWG82b6xRjYz9/uploaded-1778602154020-i0dhc65c.jpg"
|
||||
buttonText="Reserve Seat"
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Booking"
|
||||
title="Book Your Seat at Carpe Diem"
|
||||
description="53 Charlotte St., London W1T 4PA | sol@carpediembarberlondon.co.uk"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dd0uaBVU6eQ5MTWG82b6xRjYz9/uploaded-1778598134475-497d89sa.jpg?_wi=3"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation",
|
||||
items: [
|
||||
{
|
||||
label: "Home",
|
||||
href: "#hero",
|
||||
},
|
||||
{
|
||||
label: "Services",
|
||||
href: "#pricing",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Location",
|
||||
items: [
|
||||
{
|
||||
label: "53 Charlotte St., London",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "+44 7828 469044",
|
||||
href: "tel:+447828469044",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Social",
|
||||
items: [
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "TikTok",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
<FooterLogoEmphasis
|
||||
logoText="CARPE DIEM"
|
||||
columns={[
|
||||
{ items: [{ label: "Home", href: "#hero" }, { label: "Services", href: "#pricing" }, { label: "Gallery", href: "#gallery" }] },
|
||||
{ items: [{ label: "Contact", href: "#contact" }, { label: "53 Charlotte St.", href: "#" }] }
|
||||
]}
|
||||
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dd0uaBVU6eQ5MTWG82b6xRjYz9/uploaded-1778602154020-8zxl86w4.jpg"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
|
||||
Reference in New Issue
Block a user