Merge version_1 into main #2
220
src/app/page.tsx
220
src/app/page.tsx
@@ -33,25 +33,15 @@ export default function LandingPage() {
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
name: "Home", id: "hero"},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
name: "About", id: "about"},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
name: "Services", id: "services"},
|
||||
{
|
||||
name: "Team",
|
||||
id: "team",
|
||||
},
|
||||
name: "Team", id: "team"},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
name: "Contact", id: "contact"},
|
||||
]}
|
||||
brandName="The Drill"
|
||||
/>
|
||||
@@ -60,35 +50,16 @@ export default function LandingPage() {
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
variant: "gradient-bars"}}
|
||||
title="Precision Cuts. Modern Style."
|
||||
description="Experience the ultimate grooming at The Drill Barbershop. Where classic tradition meets modern technique."
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-man-apron-holding-scissors-showing-index-finger-with-skeptic-expression-warning-gesture_141793-37461.jpg?_wi=1",
|
||||
imageAlt: "Barber cutting hair",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-man-apron-holding-scissors-showing-index-finger-with-skeptic-expression-warning-gesture_141793-37461.jpg", imageAlt: "Barber cutting hair"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/set-scissors-combs_23-2147711606.jpg?_wi=1",
|
||||
imageAlt: "Close up scissors",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/set-scissors-combs_23-2147711606.jpg", imageAlt: "Close up scissors"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-getting-haircut_23-2149220553.jpg?_wi=1",
|
||||
imageAlt: "Interior shop view",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-wiping-client-beard-with-towel_23-2148298345.jpg",
|
||||
imageAlt: "Clean beard shave",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work_627829-7242.jpg",
|
||||
imageAlt: "Barber chair detail",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vintage-wooden-table-with-beard-shaping-salon-tools_53876-127084.jpg",
|
||||
imageAlt: "Final look product",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-getting-haircut_23-2149220553.jpg", imageAlt: "Interior shop view"},
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
@@ -100,9 +71,7 @@ export default function LandingPage() {
|
||||
title="Mastery in Every Detail"
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Book Now", href: "#contact"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -114,64 +83,43 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Classic Cut",
|
||||
description: "Timeless precision cut tailored to your hair type and style preferences.",
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-hipster-man-posing-street-it-businessman-plaid-shirt-sunglasses-europe-city-center_291049-1489.jpg",
|
||||
imageAlt: "Classic Cut",
|
||||
},
|
||||
title: "Classic Cut", description: "Timeless precision cut tailored to your hair type and style preferences.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-hipster-man-posing-street-it-businessman-plaid-shirt-sunglasses-europe-city-center_291049-1489.jpg", imageAlt: "Classic Cut"},
|
||||
items: [
|
||||
{
|
||||
icon: Scissors,
|
||||
text: "Precision styling",
|
||||
},
|
||||
text: "Precision styling"},
|
||||
{
|
||||
icon: Sparkles,
|
||||
text: "Hot towel treatment",
|
||||
},
|
||||
text: "Hot towel treatment"},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-man-apron-holding-scissors-showing-index-finger-with-skeptic-expression-warning-gesture_141793-37461.jpg?_wi=2",
|
||||
imageAlt: "mens haircut side fade style",
|
||||
reverse: false
|
||||
},
|
||||
{
|
||||
title: "Beard Grooming",
|
||||
description: "Expert shaping, trimming, and conditioning for a perfectly maintained beard.",
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-man-getting-his-beard-styled-barber_23-2148985718.jpg",
|
||||
imageAlt: "Beard Grooming",
|
||||
},
|
||||
title: "Beard Grooming", description: "Expert shaping, trimming, and conditioning for a perfectly maintained beard.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-man-getting-his-beard-styled-barber_23-2148985718.jpg", imageAlt: "Beard Grooming"},
|
||||
items: [
|
||||
{
|
||||
icon: Droplets,
|
||||
text: "Deep conditioning",
|
||||
},
|
||||
text: "Deep conditioning"},
|
||||
{
|
||||
icon: Target,
|
||||
text: "Precise line up",
|
||||
},
|
||||
text: "Precise line up"},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/set-scissors-combs_23-2147711606.jpg?_wi=2",
|
||||
imageAlt: "mens haircut side fade style",
|
||||
reverse: true
|
||||
},
|
||||
{
|
||||
title: "Hot Towel Shave",
|
||||
description: "The quintessential barbershop experience with hot towel preparation.",
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/couple-love-bathroom_23-2147986325.jpg",
|
||||
imageAlt: "Hot Towel Shave",
|
||||
},
|
||||
title: "Hot Towel Shave", description: "The quintessential barbershop experience with hot towel preparation.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/couple-love-bathroom_23-2147986325.jpg", imageAlt: "Hot Towel Shave"},
|
||||
items: [
|
||||
{
|
||||
icon: Leaf,
|
||||
text: "Soothing essential oils",
|
||||
},
|
||||
text: "Soothing essential oils"},
|
||||
{
|
||||
icon: Shield,
|
||||
text: "Safety focused",
|
||||
},
|
||||
text: "Safety focused"},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-getting-haircut_23-2149220553.jpg?_wi=2",
|
||||
imageAlt: "mens haircut side fade style",
|
||||
reverse: false
|
||||
},
|
||||
]}
|
||||
title="Grooming Services"
|
||||
@@ -187,41 +135,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Clay Pomade",
|
||||
price: "$22",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-beauty-products-based-regenerative-agriculture_23-2150721381.jpg",
|
||||
},
|
||||
id: "p1", name: "Clay Pomade", price: "$22", imageSrc: "http://img.b2bpic.net/free-photo/still-life-beauty-products-based-regenerative-agriculture_23-2150721381.jpg"},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Beard Oil",
|
||||
price: "$18",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-holding-face-oil-bottle_23-2148696678.jpg",
|
||||
},
|
||||
id: "p2", name: "Beard Oil", price: "$18", imageSrc: "http://img.b2bpic.net/free-photo/man-holding-face-oil-bottle_23-2148696678.jpg"},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Sea Salt Spray",
|
||||
price: "$15",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-man-streets-provincial-spanish-city_72229-593.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Texture Powder",
|
||||
price: "$20",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-combing-hair-make-haircut_176420-16209.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Shaving Cream",
|
||||
price: "$12",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-male-beauty-products-with-display_23-2150435190.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Aftershave Balm",
|
||||
price: "$16",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/master-hairdresser-prepares-face-shaving-smears-face-with-foam-hairdressing-salon_613910-18406.jpg",
|
||||
},
|
||||
id: "p3", name: "Sea Salt Spray", price: "$15", imageSrc: "http://img.b2bpic.net/free-photo/young-man-streets-provincial-spanish-city_72229-593.jpg"},
|
||||
]}
|
||||
title="Barbershop Essentials"
|
||||
description="Professional grade grooming products for at-home maintenance."
|
||||
@@ -235,33 +153,14 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
groups={[
|
||||
{
|
||||
id: "team-1",
|
||||
groupTitle: "Expert Team",
|
||||
members: [
|
||||
id: "team-1", groupTitle: "Expert Team", members: [
|
||||
{
|
||||
id: "m1",
|
||||
title: "Marcus",
|
||||
subtitle: "Lead Barber",
|
||||
detail: "15+ years experience.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/excited-young-male-barber-wearing-glasses-red-shirt-barber-apron-holding-barbering-tools-looking-camera-showing-thumb-up-isolated-blue-background_141793-138548.jpg",
|
||||
},
|
||||
id: "m1", title: "Marcus", subtitle: "Lead Barber", detail: "15+ years experience.", imageSrc: "http://img.b2bpic.net/free-photo/excited-young-male-barber-wearing-glasses-red-shirt-barber-apron-holding-barbering-tools-looking-camera-showing-thumb-up-isolated-blue-background_141793-138548.jpg"},
|
||||
{
|
||||
id: "m2",
|
||||
title: "Alex",
|
||||
subtitle: "Senior Stylist",
|
||||
detail: "Specialist in fades.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-confident-blonde-male-barber-uniform-cuts-hair-with-scissors-isolated-green-space-with-copy-space_141793-60161.jpg",
|
||||
},
|
||||
id: "m2", title: "Alex", subtitle: "Senior Stylist", detail: "Specialist in fades.", imageSrc: "http://img.b2bpic.net/free-photo/young-confident-blonde-male-barber-uniform-cuts-hair-with-scissors-isolated-green-space-with-copy-space_141793-60161.jpg"},
|
||||
{
|
||||
id: "m3",
|
||||
title: "Jordan",
|
||||
subtitle: "Junior Stylist",
|
||||
detail: "Precision techniques.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/confident-slavic-middle-aged-male-barber-uniform-holding-hair-clippers-points-side-isolated-pink-wall_141793-83134.jpg",
|
||||
},
|
||||
id: "m3", title: "Jordan", subtitle: "Junior Stylist", detail: "Precision techniques.", imageSrc: "http://img.b2bpic.net/free-photo/confident-slavic-middle-aged-male-barber-uniform-holding-hair-clippers-points-side-isolated-pink-wall_141793-83134.jpg"},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-man-apron-holding-scissors-showing-index-finger-with-skeptic-expression-warning-gesture_141793-37461.jpg?_wi=3",
|
||||
imageAlt: "portrait lead barber in uniform",
|
||||
},
|
||||
]}
|
||||
title="Meet Your Barbers"
|
||||
@@ -274,30 +173,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "John D.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-positive-blond-bearded-male-dressed-red-fleece-shirt-makes-conversation_613910-13394.jpg",
|
||||
},
|
||||
id: "t1", name: "John D.", imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-positive-blond-bearded-male-dressed-red-fleece-shirt-makes-conversation_613910-13394.jpg"},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Mike S.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-using-smart-watch-express-pay_1170-2342.jpg",
|
||||
},
|
||||
id: "t2", name: "Mike S.", imageSrc: "http://img.b2bpic.net/free-photo/man-using-smart-watch-express-pay_1170-2342.jpg"},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Sarah W.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/look-my-ring-is-very-similar_329181-8041.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "David L.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-with-shaving-cream-beard-relaxing-chair_107420-94768.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Robert B.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-smiling-businessman-resting-cushions_1262-1762.jpg",
|
||||
},
|
||||
id: "t3", name: "Sarah W.", imageSrc: "http://img.b2bpic.net/free-photo/look-my-ring-is-very-similar_329181-8041.jpg"},
|
||||
]}
|
||||
cardTitle="Client Reviews"
|
||||
cardTag="Testimonials"
|
||||
@@ -310,20 +190,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Do I need an appointment?",
|
||||
content: "We recommend booking, but walk-ins are welcome if space allows.",
|
||||
},
|
||||
id: "f1", title: "Do I need an appointment?", content: "We recommend booking, but walk-ins are welcome if space allows."},
|
||||
{
|
||||
id: "f2",
|
||||
title: "How long does a cut take?",
|
||||
content: "Typically 30-45 minutes depending on the service.",
|
||||
},
|
||||
id: "f2", title: "How long does a cut take?", content: "Typically 30-45 minutes depending on the service."},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Do you sell gift cards?",
|
||||
content: "Yes, they are available in the shop or online.",
|
||||
},
|
||||
id: "f3", title: "Do you sell gift cards?", content: "Yes, they are available in the shop or online."},
|
||||
]}
|
||||
sideTitle="Frequently Asked"
|
||||
faqsAnimation="blur-reveal"
|
||||
@@ -334,16 +205,13 @@ export default function LandingPage() {
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
variant: "radial-gradient"}}
|
||||
tag="Visit Us"
|
||||
title="Ready for a fresh look?"
|
||||
description="Located in the heart of downtown. Book your next visit with us today."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Appointment",
|
||||
href: "#",
|
||||
},
|
||||
text: "Book Appointment", href: "#"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -352,13 +220,9 @@ export default function LandingPage() {
|
||||
<FooterLogoReveal
|
||||
logoText="The Drill"
|
||||
leftLink={{
|
||||
text: "Privacy Policy",
|
||||
href: "#",
|
||||
}}
|
||||
text: "Privacy Policy", href: "#"}}
|
||||
rightLink={{
|
||||
text: "Terms of Service",
|
||||
href: "#",
|
||||
}}
|
||||
text: "Terms of Service", href: "#"}}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
|
||||
Reference in New Issue
Block a user