Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 2f6f5f68e7 | |||
| b685878e24 | |||
| fcc2936dc2 |
276
src/app/page.tsx
276
src/app/page.tsx
@@ -2,6 +2,7 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import { Sparkles, MapPin } from "lucide-react";
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
|
||||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||
@@ -30,22 +31,11 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Ann's Barber & Stylist"
|
||||
/>
|
||||
@@ -53,69 +43,17 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Walk In. Walk Out Looking Like You Meant It."
|
||||
description="Great haircuts. Friendly people. No weird vibes. Just one of the best barbershops in Gaithersburg."
|
||||
buttons={[
|
||||
{
|
||||
text: "Call Now",
|
||||
href: "tel:+13015550123",
|
||||
},
|
||||
{
|
||||
text: "Get Directions",
|
||||
href: "#contact",
|
||||
},
|
||||
{ text: "Call Now", href: "tel:+13015550123" },
|
||||
{ text: "Get Directions", href: "#contact" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/barber-shop-retro-vintage-style_1150-17931.jpg"
|
||||
imageAlt="Professional barber in shop"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-joyful-blonde-male-barber-uniform-holds-hair-clipper-raises-fist-up-isolated-olive-green-space-with-copy-space_141793-60317.jpg",
|
||||
alt: "Client 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-handsome-man-black-polo-shirt-swinging-paint-brush-with-aggressive-expression-standing-white-background_141793-20662.jpg",
|
||||
alt: "Client 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-getting-haircut_23-2148817196.jpg",
|
||||
alt: "Client 3",
|
||||
},
|
||||
{
|
||||
src: "testimonial-4",
|
||||
alt: "Client 4",
|
||||
},
|
||||
{
|
||||
src: "testimonial-5",
|
||||
alt: "Client 5",
|
||||
},
|
||||
]}
|
||||
avatarText="Trusted by 100+ regulars"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Precision Cuts",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Friendly Atmosphere",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Classic Techniques",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Quality Grooming",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "No Nonsense",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -123,15 +61,11 @@ export default function LandingPage() {
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"⭐ Best haircut I’ve had in a long time",
|
||||
"⭐ Always a great experience",
|
||||
"⭐ Friendly staff, quick service",
|
||||
"⭐ First haircut I liked right away",
|
||||
"⭐ Great atmosphere, no drama",
|
||||
]}
|
||||
title="People Don’t Just Come Back… They Recommend Us."
|
||||
description="Our regulars are our best marketing. Here's why people keep coming back to Ann's."
|
||||
tag="Testimonials"
|
||||
tagIcon={Sparkles}
|
||||
names={["⭐⭐⭐⭐⭐ Best haircut I’ve had", "⭐⭐⭐⭐⭐ Always a great experience", "⭐⭐⭐⭐⭐ Friendly staff", "⭐⭐⭐⭐⭐ Consistent quality", "⭐⭐⭐⭐⭐ Great atmosphere"]}
|
||||
title="Why Regulars Choose Us"
|
||||
description="Don't just take our word for it—join the hundred plus locals who trust Ann's with their look."
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -140,10 +74,7 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
title="Good Cuts. Good People. That’s It."
|
||||
description={[
|
||||
"Ann’s Barber & Stylist has built a reputation for doing things right. No overcomplicated styles, no rushed jobs. Just solid haircuts, friendly conversations, and people who actually care how you look when you leave.",
|
||||
"Regulars come here because they trust it. First-timers come back because they didn’t expect it to be this good.",
|
||||
"Also, yes… the dog is part of the experience.",
|
||||
]}
|
||||
"Ann’s Barber & Stylist has built a reputation for doing things right. No overcomplicated styles, no rushed jobs. Just solid haircuts, friendly conversations, and people who actually care how you look when you leave.", "Regulars come here because they trust it. First-timers come back because they didn’t expect it to be this good."]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -152,33 +83,12 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Haircuts",
|
||||
description: "Clean, sharp, and exactly what you asked for.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/attractive-young-man-shaving-before-work-holding-disposable-razor-shave-his-face-using-foam_343059-1186.jpg?_wi=1",
|
||||
imageAlt: "Professional haircut",
|
||||
},
|
||||
{
|
||||
title: "Straight Razor Shaves",
|
||||
description: "Old-school, smooth, and done right.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/attractive-young-man-shaving-before-work-holding-disposable-razor-shave-his-face-using-foam_343059-1186.jpg?_wi=2",
|
||||
imageAlt: "Razor shave",
|
||||
},
|
||||
{
|
||||
title: "Quick Cuts",
|
||||
description: "In, out, still looking great.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/attractive-young-man-shaving-before-work-holding-disposable-razor-shave-his-face-using-foam_343059-1186.jpg?_wi=3",
|
||||
imageAlt: "Quick haircut",
|
||||
},
|
||||
{
|
||||
title: "Kids Cuts",
|
||||
description: "Fast enough to keep them still.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/attractive-young-man-shaving-before-work-holding-disposable-razor-shave-his-face-using-foam_343059-1186.jpg?_wi=4",
|
||||
imageAlt: "Kids haircut",
|
||||
},
|
||||
{ title: "Precision Haircuts", description: "Tailored to your specific style and hair type.", imageSrc: "http://img.b2bpic.net/free-photo/attractive-young-man-shaving-before-work-holding-disposable-razor-shave-his-face-using-foam_343059-1186.jpg?_wi=1", imageAlt: "Haircut" },
|
||||
{ title: "Straight Razor Shaves", description: "The ultimate smooth finish with classic techniques.", imageSrc: "http://img.b2bpic.net/free-photo/attractive-young-man-shaving-before-work-holding-disposable-razor-shave-his-face-using-foam_343059-1186.jpg?_wi=2", imageAlt: "Shave" },
|
||||
{ title: "Quick Maintenance", description: "Ideal for beard trims or touch-ups on the go.", imageSrc: "http://img.b2bpic.net/free-photo/attractive-young-man-shaving-before-work-holding-disposable-razor-shave-his-face-using-foam_343059-1186.jpg?_wi=3", imageAlt: "Trim" },
|
||||
]}
|
||||
title="What We Do (Really Well)"
|
||||
description="We keep it simple, clean, and professional. Every cut is tailored to you."
|
||||
title="What We Do Well"
|
||||
description="Simple, clean, professional service."
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -187,58 +97,12 @@ export default function LandingPage() {
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
title="Transparent Quality"
|
||||
description="Professional grooming doesn't need to be expensive or complicated."
|
||||
plans={[
|
||||
{
|
||||
id: "p1",
|
||||
tag: "Benefit",
|
||||
price: "Quality",
|
||||
period: "Guaranteed",
|
||||
description: "You like your haircut immediately.",
|
||||
button: {
|
||||
text: "Book Now",
|
||||
},
|
||||
featuresTitle: "Why it matters",
|
||||
features: [
|
||||
"Precision cutting",
|
||||
"Professional styling",
|
||||
"Friendly environment",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
tag: "Benefit",
|
||||
price: "Service",
|
||||
period: "Friendly",
|
||||
description: "Friendly staff who listen to your needs.",
|
||||
button: {
|
||||
text: "Book Now",
|
||||
},
|
||||
featuresTitle: "Our approach",
|
||||
features: [
|
||||
"Listening first",
|
||||
"Customer focus",
|
||||
"Expert advice",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
tag: "Benefit",
|
||||
price: "Value",
|
||||
period: "Honest",
|
||||
description: "Fair prices, no surprises.",
|
||||
button: {
|
||||
text: "Book Now",
|
||||
},
|
||||
featuresTitle: "The promise",
|
||||
features: [
|
||||
"Fair pricing",
|
||||
"Transparent service",
|
||||
"No nonsense",
|
||||
],
|
||||
},
|
||||
{ id: "p1", tag: "Standard", price: "$25", period: "avg", description: "Full haircut service", button: { text: "Book Now" }, featuresTitle: "Includes", features: ["Wash", "Cut", "Style"] },
|
||||
{ id: "p2", tag: "Premium", price: "$40", period: "avg", description: "Haircut & Shave combo", button: { text: "Book Now" }, featuresTitle: "Includes", features: ["Everything in Standard", "Hot Towel", "Straight Razor"] },
|
||||
]}
|
||||
title="Why People Keep Coming Back"
|
||||
description="No surprises, just quality."
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -247,63 +111,24 @@ export default function LandingPage() {
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="asymmetric-60-wide-40-narrow"
|
||||
title="What Our Clients Say"
|
||||
description="We value every single review from our community."
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Mike R.",
|
||||
role: "Regular",
|
||||
company: "Gaithersburg",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-joyful-blonde-male-barber-uniform-holds-hair-clipper-raises-fist-up-isolated-olive-green-space-with-copy-space_141793-60317.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Dave S.",
|
||||
role: "Regular",
|
||||
company: "Gaithersburg",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-black-polo-shirt-swinging-paint-brush-with-aggressive-expression-standing-white-background_141793-20662.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Sarah K.",
|
||||
role: "Mom",
|
||||
company: "Gaithersburg",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-getting-haircut_23-2148817196.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Chris B.",
|
||||
role: "Pro",
|
||||
company: "Gaithersburg",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-hair-salon_23-2150665451.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "John P.",
|
||||
role: "Regular",
|
||||
company: "Gaithersburg",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-cutting-man-s-hair-barber-shop_23-2149186462.jpg",
|
||||
},
|
||||
{ id: "t1", name: "Mike R.", role: "Local", company: "Gaithersburg", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-joyful-blonde-male-barber-uniform-holds-hair-clipper-raises-fist-up-isolated-olive-green-space-with-copy-space_141793-60317.jpg" },
|
||||
{ id: "t2", name: "Sarah K.", role: "Local", company: "Gaithersburg", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-getting-haircut_23-2148817196.jpg" },
|
||||
]}
|
||||
title="Real People. Real Opinions."
|
||||
description="Don't take our word for it."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Find Us"
|
||||
title="Ready for a Better Haircut?"
|
||||
description="Easy to find. Hard to leave without looking better. Walk in or call ahead."
|
||||
tagIcon={MapPin}
|
||||
title="Visit Ann's Today"
|
||||
description="We're located in the heart of Gaithersburg. Walk-ins are always welcome, or give us a call to check wait times."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/full-shot-business-owner-standing-outdoors_23-2149434497.jpg?_wi=1"
|
||||
mediaPosition="right"
|
||||
/>
|
||||
@@ -314,42 +139,13 @@ export default function LandingPage() {
|
||||
imageSrc="http://img.b2bpic.net/free-photo/full-shot-business-owner-standing-outdoors_23-2149434497.jpg?_wi=2"
|
||||
logoText="Ann's Barber & Stylist"
|
||||
columns={[
|
||||
{
|
||||
title: "Visit",
|
||||
items: [
|
||||
{
|
||||
label: "123 Main St, Gaithersburg, MD",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Call",
|
||||
items: [
|
||||
{
|
||||
label: "(301) 555-0123",
|
||||
href: "tel:+13015550123",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Hours",
|
||||
items: [
|
||||
{
|
||||
label: "Mon-Fri: 9am-7pm",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Sat: 9am-5pm",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ title: "Location", items: [{ label: "123 Main St, Gaithersburg, MD", href: "#" }] },
|
||||
{ title: "Contact", items: [{ label: "(301) 555-0123", href: "tel:+13015550123" }] },
|
||||
{ title: "Hours", items: [{ label: "M-F: 9am-7pm", href: "#" }, { label: "Sat: 9am-5pm", href: "#" }] }
|
||||
]}
|
||||
copyrightText="© 2025 Ann's Barber & Stylist. Good haircuts. No nonsense."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user