Merge version_1 into main #1
316
src/app/page.tsx
316
src/app/page.tsx
@@ -2,6 +2,7 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import { Scissors, Sparkles, User } from "lucide-react";
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
|
||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||
@@ -26,235 +27,106 @@ export default function LandingPage() {
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "#about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "#services",
|
||||
},
|
||||
{
|
||||
name: "Team",
|
||||
id: "#team",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
]}
|
||||
brandName="The Edge"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Services", id: "#services" },
|
||||
{ name: "Team", id: "#team" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
brandName="The Edge"
|
||||
button={{ text: "Book", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
logoText="The Edge Barber Shop"
|
||||
description="Crafting timeless style with precision and passion. Discover the ultimate grooming experience designed for the modern gentleman."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Appointment",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
text: "Explore Services",
|
||||
href: "#services",
|
||||
},
|
||||
]}
|
||||
imageSrc="https://pixabay.com/get/g41edfa7f202958dc271118a6a37e9844cae00a4a8499cdcd18b6bfe80550ff769cc8d29f1401df9a2e0601102448b53b4e67c369ad4d8799709ab9a3d09ba69f_1280.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{ variant: "gradient-bars" }}
|
||||
logoText="The Edge Barber Shop"
|
||||
description="Crafting timeless style with precision and passion. Discover the ultimate grooming experience designed for the modern gentleman."
|
||||
buttons={[
|
||||
{ text: "Book Appointment", href: "#contact" },
|
||||
{ text: "Explore Services", href: "#services" },
|
||||
]}
|
||||
imageSrc="https://pixabay.com/get/g41edfa7f202958dc271118a6a37e9844cae00a4a8499cdcd18b6bfe80550ff769cc8d29f1401df9a2e0601102448b53b4e67c369ad4d8799709ab9a3d09ba69f_1280.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
title="Where Tradition Meets Precision"
|
||||
buttons={[
|
||||
{
|
||||
text: "Our Story",
|
||||
href: "#about",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
title="Where Tradition Meets Precision"
|
||||
buttons={[{ text: "Our Story", href: "#about" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentySix
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Precision Cut",
|
||||
description: "Expert scissor and clipper work tailored to your face shape.",
|
||||
imageSrc: "https://pixabay.com/get/g80679d4e573d3ffaae85ed6c7e96fcd911954b16c35cfb7ad20f305bb94251bdd5b729824ed611f90d3cf03896f31ea98de3a0884c6344002b5c8f68611e1e7b_1280.jpg",
|
||||
buttonIcon: "Scissors",
|
||||
},
|
||||
{
|
||||
title: "Hot Towel Shave",
|
||||
description: "Relax with our premium straight razor shave and hot towel finish.",
|
||||
imageSrc: "https://pixabay.com/get/gde24f90c58a82aaf8aaf421c6ab09dd2d9910fb57cf494b11355c346768448ecd7a7cd31c1f7f8d078ca1e72b1d58ecf1f4e03dbf7e19e3521091dbe906efdaf_1280.jpg",
|
||||
buttonIcon: "Sparkles",
|
||||
},
|
||||
{
|
||||
title: "Scalp Treatment",
|
||||
description: "Revitalizing scalp care to keep your hair and skin healthy.",
|
||||
imageSrc: "https://pixabay.com/get/g159974edebcdf2170a7a7c180ac5f998cbabd26894ca89099b792fd33f9af7363a83b2e7e8a77c1ef196788c8d4f67053d086a6cf973a1f9b6715f2ce460f9e2_1280.jpg",
|
||||
buttonIcon: "User",
|
||||
},
|
||||
]}
|
||||
title="Signature Services"
|
||||
description="From classic cuts to modern fades, our expert team ensures you look and feel your absolute best."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentySix
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Precision Cut", description: "Expert scissor and clipper work tailored to your face shape.", imageSrc: "https://pixabay.com/get/g80679d4e573d3ffaae85ed6c7e96fcd911954b16c35cfb7ad20f305bb94251bdd5b729824ed611f90d3cf03896f31ea98de3a0884c6344002b5c8f68611e1e7b_1280.jpg", buttonIcon: Scissors },
|
||||
{ title: "Hot Towel Shave", description: "Relax with our premium straight razor shave and hot towel finish.", imageSrc: "https://pixabay.com/get/gde24f90c58a82aaf8aaf421c6ab09dd2d9910fb57cf494b11355c346768448ecd7a7cd31c1f7f8d078ca1e72b1d58ecf1f4e03dbf7e19e3521091dbe906efdaf_1280.jpg", buttonIcon: Sparkles },
|
||||
{ title: "Scalp Treatment", description: "Revitalizing scalp care to keep your hair and skin healthy.", imageSrc: "https://pixabay.com/get/g159974edebcdf2170a7a7c180ac5f998cbabd26894ca89099b792fd33f9af7363a83b2e7e8a77c1ef196788c8d4f67053d086a6cf973a1f9b6715f2ce460f9e2_1280.jpg", buttonIcon: User },
|
||||
]}
|
||||
title="Signature Services"
|
||||
description="From classic cuts to modern fades, our expert team ensures you look and feel your absolute best."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
team={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Marcus",
|
||||
role: "Master Barber",
|
||||
imageSrc: "https://pixabay.com/get/g45cec3b2be103fa06d5300023a56f41b3fddb39bb1d50c53fa3bc0dcd2a9bc5f236c5d46bb16173d71cd5dd26097e23145fb7688421e2aa054483d03552759c7_1280.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Leo",
|
||||
role: "Senior Stylist",
|
||||
imageSrc: "https://pixabay.com/get/g0ef255885f1948c860e5b15a5e582ca36d5222af9f5730e2086fe21ab0165e71565ddc022478be52a00bd8826d6d8d8118b88fb8408282b1c3361facccc1e770_1280.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Sam",
|
||||
role: "Creative Barber",
|
||||
imageSrc: "https://pixabay.com/get/gb7451394807fa6641b3066bd404593a44578a839448cf60fbd1658a11d0267fd16a1d72fbd83d42846d39b2752e48b67c193ffd01c43f319da0026b424ae7271_1280.jpg",
|
||||
},
|
||||
]}
|
||||
title="Meet Your Barbers"
|
||||
description="Our master barbers combine technical mastery with modern style."
|
||||
/>
|
||||
</div>
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
team={[
|
||||
{ id: "t1", name: "Marcus", role: "Master Barber", imageSrc: "https://pixabay.com/get/g45cec3b2be103fa06d5300023a56f41b3fddb39bb1d50c53fa3bc0dcd2a9bc5f236c5d46bb16173d71cd5dd26097e23145fb7688421e2aa054483d03552759c7_1280.jpg" },
|
||||
{ id: "t2", name: "Leo", role: "Senior Stylist", imageSrc: "https://pixabay.com/get/g0ef255885f1948c860e5b15a5e582ca36d5222af9f5730e2086fe21ab0165e71565ddc022478be52a00bd8826d6d8d8118b88fb8408282b1c3361facccc1e770_1280.jpg" },
|
||||
{ id: "t3", name: "Sam", role: "Creative Barber", imageSrc: "https://pixabay.com/get/gb7451394807fa6641b3066bd404593a44578a839448cf60fbd1658a11d0267fd16a1d72fbd83d42846d39b2752e48b67c193ffd01c43f319da0026b424ae7271_1280.jpg" },
|
||||
]}
|
||||
title="Meet Your Barbers"
|
||||
description="Our master barbers combine technical mastery with modern style."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "John Doe",
|
||||
role: "Regular Client",
|
||||
testimonial: "The best shave in town, hands down. Highly recommended.",
|
||||
imageSrc: "https://pixabay.com/get/gf4eecf830cf392e779332011eaad4f2dc6c37739af0ec731f1c609af3a732f97c5a6aebfbb593700e2c936434b675a2f5014fc2b517f8aa199ef6e2b6d3dd581_1280.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Mike Ross",
|
||||
role: "Regular Client",
|
||||
testimonial: "Marcus is a master of the fade. Never looked better.",
|
||||
imageSrc: "https://pixabay.com/get/gc7cdb0037a605a2ebe56ef4cc0135c908630abe2672aeb13bc9c4c834c8cd04c8e3286a087125d7966de10f541625c1ce3f10a6649a3bb237e58a82e067b8dba_1280.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "David W.",
|
||||
role: "Regular Client",
|
||||
testimonial: "A true professional environment with great attention to detail.",
|
||||
imageSrc: "https://pixabay.com/get/g9c349869d0beb16dbdd0e477998c7268f3c001b51ee8aeac8c47942b6a32dc34861dd084784da98a093ea81885c906eb5ab9e068e38d22c9da1af895e07ea75b_1280.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Chris P.",
|
||||
role: "Regular Client",
|
||||
testimonial: "My go-to spot every two weeks. Excellent service.",
|
||||
imageSrc: "https://pixabay.com/get/g42c1e07d0043810fbdf785db188ec2c4fbe1f2c3dda7dac14bac075a413cc6581e3e09441e99b1a8f908696138a049718fdd64efffaa1b5d7406c4f8ae87ee05_1280.jpg",
|
||||
},
|
||||
]}
|
||||
title="Trusted by Gentlemen"
|
||||
description="Here is what our regulars say about their experience at The Edge."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "John Doe", role: "Regular Client", testimonial: "The best shave in town, hands down. Highly recommended.", imageSrc: "https://pixabay.com/get/gf4eecf830cf392e779332011eaad4f2dc6c37739af0ec731f1c609af3a732f97c5a6aebfbb593700e2c936434b675a2f5014fc2b517f8aa199ef6e2b6d3dd581_1280.jpg" },
|
||||
{ id: "2", name: "Mike Ross", role: "Regular Client", testimonial: "Marcus is a master of the fade. Never looked better.", imageSrc: "https://pixabay.com/get/gc7cdb0037a605a2ebe56ef4cc0135c908630abe2672aeb13bc9c4c834c8cd04c8e3286a087125d7966de10f541625c1ce3f10a6649a3bb237e58a82e067b8dba_1280.jpg" },
|
||||
{ id: "3", name: "David W.", role: "Regular Client", testimonial: "A true professional environment with great attention to detail.", imageSrc: "https://pixabay.com/get/g9c349869d0beb16dbdd0e477998c7268f3c001b51ee8aeac8c47942b6a32dc34861dd084784da98a093ea81885c906eb5ab9e068e38d22c9da1af895e07ea75b_1280.jpg" },
|
||||
{ id: "4", name: "Chris P.", role: "Regular Client", testimonial: "My go-to spot every two weeks. Excellent service.", imageSrc: "https://pixabay.com/get/g42c1e07d0043810fbdf785db188ec2c4fbe1f2c3dda7dac14bac075a413cc6581e3e09441e99b1a8f908696138a049718fdd64efffaa1b5d7406c4f8ae87ee05_1280.jpg" },
|
||||
]}
|
||||
title="Trusted by Gentlemen"
|
||||
description="Here is what our regulars say about their experience at The Edge."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "rotated-rays-static",
|
||||
}}
|
||||
text="Ready for your next visit? Book your session at The Edge today."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "mailto:booking@theedgebarber.com",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "rotated-rays-static" }}
|
||||
text="Ready for your next visit? Book your session at The Edge today."
|
||||
buttons={[{ text: "Book Now", href: "mailto:booking@theedgebarber.com" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Services",
|
||||
href: "#services",
|
||||
},
|
||||
{
|
||||
label: "Team",
|
||||
href: "#team",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Book Appointment",
|
||||
href: "mailto:booking@theedgebarber.com",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
label: "Location",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Facebook",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="The Edge"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="The Edge"
|
||||
columns={[
|
||||
{ items: [{ label: "About", href: "#about" }, { label: "Services", href: "#services" }, { label: "Team", href: "#team" }] },
|
||||
{ items: [{ label: "Book Appointment", href: "mailto:booking@theedgebarber.com" }, { label: "Contact", href: "#contact" }, { label: "Location", href: "#" }] },
|
||||
{ items: [{ label: "Instagram", href: "#" }, { label: "Facebook", href: "#" }, { label: "Privacy Policy", href: "#" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user