Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 3490544062 | |||
| 2d45a61926 | |||
| 95dc1ca4c2 | |||
| 9e23740318 |
222
src/app/page.tsx
222
src/app/page.tsx
@@ -15,45 +15,33 @@ import { Phone, Scissors, Sparkles, Feather } from "lucide-react";
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="medium"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="glass-depth"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="mediumLargeSizeLargeTitles"
|
||||
background="aurora"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="bold"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
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: "Products",
|
||||
id: "products",
|
||||
},
|
||||
name: "Products", id: "products"},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "testimonials",
|
||||
},
|
||||
name: "Testimonials", id: "testimonials"},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
name: "Contact", id: "contact"},
|
||||
]}
|
||||
brandName="VR Barbershop"
|
||||
/>
|
||||
@@ -62,33 +50,22 @@ export default function LandingPage() {
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
variant: "sparkles-gradient"}}
|
||||
title="Experience Unrivaled Grooming at VR Barbershop"
|
||||
description="Where tradition meets modern elegance. Step into a world of precision haircuts, luxurious shaves, and personalized styling designed to refine your look and elevate your confidence."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Your Appointment",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Book Your Appointment", href: "#contact"},
|
||||
]}
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/middle-age-businessman-smiling-happy-standing-city_839833-25759.jpg",
|
||||
alt: "Satisfied client John Doe",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/middle-age-businessman-smiling-happy-standing-city_839833-25759.jpg", alt: "Satisfied client John Doe"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/shaving-concept-with-attractive-young-man_23-2148121943.jpg",
|
||||
alt: "Happy client Jane Smith",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/shaving-concept-with-attractive-young-man_23-2148121943.jpg", alt: "Happy client Jane Smith"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/stylish-man-listening-music-with-white-headphones_24972-2953.jpg",
|
||||
alt: "Regular client David Lee",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/stylish-man-listening-music-with-white-headphones_24972-2953.jpg", alt: "Regular client David Lee"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg",
|
||||
alt: "Loyal client Mike Johnson",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg", alt: "Loyal client Mike Johnson"},
|
||||
]}
|
||||
avatarText="Join our community of impeccably groomed gentlemen."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/top-view-male-self-care-setting-still-life_23-2150326538.jpg"
|
||||
@@ -102,9 +79,7 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "Our Legacy of Excellence in Grooming",
|
||||
},
|
||||
type: "text", content: "Our Legacy of Excellence in Grooming at VR Barbershop"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -115,19 +90,13 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Precision Haircuts",
|
||||
description: "Expert stylists craft personalized haircuts tailored to your unique features and style preferences, ensuring a sharp and refined look every time.",
|
||||
buttonIcon: Scissors,
|
||||
title: "Precision Haircuts", description: "Expert stylists craft personalized haircuts tailored to your unique features and style preferences, ensuring a sharp and refined look every time.", buttonIcon: Scissors,
|
||||
},
|
||||
{
|
||||
title: "Luxurious Hot Shaves",
|
||||
description: "Indulge in our classic hot lather shave, a relaxing ritual that leaves your skin feeling smooth, refreshed, and impeccably clean.",
|
||||
buttonIcon: Sparkles,
|
||||
title: "Luxurious Hot Shaves", description: "Indulge in our classic hot lather shave, a relaxing ritual that leaves your skin feeling smooth, refreshed, and impeccably clean.", buttonIcon: Sparkles,
|
||||
},
|
||||
{
|
||||
title: "Beard Trimming & Styling",
|
||||
description: "From a simple trim to intricate shaping, our barbers meticulously sculpt your beard to perfection, enhancing your facial features.",
|
||||
buttonIcon: Feather,
|
||||
title: "Beard Trimming & Styling", description: "From a simple trim to intricate shaping, our barbers meticulously sculpt your beard to perfection, enhancing your facial features.", buttonIcon: Feather,
|
||||
},
|
||||
]}
|
||||
title="Our Signature Services"
|
||||
@@ -144,35 +113,14 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
brand: "VR Essentials",
|
||||
name: "Luxury Beard Oil",
|
||||
price: "$35.00",
|
||||
rating: 5,
|
||||
reviewCount: "245",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/barber-using-shaving-cream-contour-male-customer-s-beard_23-2148985733.jpg",
|
||||
imageAlt: "Luxury Beard Oil bottle",
|
||||
},
|
||||
id: "1", brand: "VR Essentials", name: "Luxury Beard Oil", price: "$35.00", rating: 5,
|
||||
reviewCount: "245", imageSrc: "http://img.b2bpic.net/free-photo/barber-using-shaving-cream-contour-male-customer-s-beard_23-2148985733.jpg", imageAlt: "Luxury Beard Oil bottle"},
|
||||
{
|
||||
id: "2",
|
||||
brand: "VR Essentials",
|
||||
name: "Classic Pomade",
|
||||
price: "$28.00",
|
||||
rating: 4.8,
|
||||
reviewCount: "190",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/skin-regeneration-product-still-life_23-2151232285.jpg",
|
||||
imageAlt: "Classic Hair Pomade jar",
|
||||
},
|
||||
id: "2", brand: "VR Essentials", name: "Classic Pomade", price: "$28.00", rating: 4.8,
|
||||
reviewCount: "190", imageSrc: "http://img.b2bpic.net/free-photo/skin-regeneration-product-still-life_23-2151232285.jpg", imageAlt: "Classic Hair Pomade jar"},
|
||||
{
|
||||
id: "3",
|
||||
brand: "VR Essentials",
|
||||
name: "Soothing Aftershave Balm",
|
||||
price: "$42.00",
|
||||
rating: 4.9,
|
||||
reviewCount: "310",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-selfcare-products_23-2149313028.jpg",
|
||||
imageAlt: "Soothing Aftershave Balm bottle",
|
||||
},
|
||||
id: "3", brand: "VR Essentials", name: "Soothing Aftershave Balm", price: "$42.00", rating: 4.9,
|
||||
reviewCount: "310", imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-selfcare-products_23-2149313028.jpg", imageAlt: "Soothing Aftershave Balm bottle"},
|
||||
]}
|
||||
title="Premium Grooming Products"
|
||||
description="Maintain your impeccable style between visits with our exclusive line of high-quality grooming essentials."
|
||||
@@ -187,37 +135,17 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Marcus A.",
|
||||
handle: "@Marcus_Grooms",
|
||||
testimonial: "VR Barbershop is truly exceptional. The attention to detail and personalized service are unmatched. My haircut is always perfect, and the hot shave is pure luxury. Highly recommended!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-getting-his-hair-cut-barber-shop4_23-2149186458.jpg",
|
||||
},
|
||||
id: "1", name: "Marcus A.", handle: "@Marcus_Grooms", testimonial: "VR Barbershop is truly exceptional. The attention to detail and personalized service are unmatched. My haircut is always perfect, and the hot shave is pure luxury. Highly recommended!", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-getting-his-hair-cut-barber-shop4_23-2149186458.jpg"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Ethan K.",
|
||||
handle: "@EthanCuts",
|
||||
testimonial: "Coming to VR Barbershop is an experience in itself. The ambiance is relaxing, and the barbers are true artists. I always leave feeling refreshed and looking sharp. Best in the city!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-cutting-man-s-hair-barber-shop_23-2149186462.jpg",
|
||||
},
|
||||
id: "2", name: "Ethan K.", handle: "@EthanCuts", testimonial: "Coming to VR Barbershop is an experience in itself. The ambiance is relaxing, and the barbers are true artists. I always leave feeling refreshed and looking sharp. Best in the city!", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-cutting-man-s-hair-barber-shop_23-2149186462.jpg"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Samuel T.",
|
||||
handle: "@SamTheMan",
|
||||
testimonial: "I've been a loyal client for years, and VR Barbershop never disappoints. The quality of their services, from precision cuts to beard styling, is consistently top-notch. A genuine luxury.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mature-man-getting-haircut_23-2148465251.jpg",
|
||||
},
|
||||
id: "3", name: "Samuel T.", handle: "@SamTheMan", testimonial: "I've been a loyal client for years, and VR Barbershop never disappoints. The quality of their services, from precision cuts to beard styling, is consistently top-notch. A genuine luxury.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mature-man-getting-haircut_23-2148465251.jpg"},
|
||||
{
|
||||
id: "4",
|
||||
name: "Daniel P.",
|
||||
handle: "@DanStyles",
|
||||
testimonial: "Finally found a barbershop that understands my style. The team at VR Barbershop is fantastic. They listen, advise, and deliver flawless results every single time. Five stars!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-fashionable-boy-front-white-curtain_23-2148184872.jpg",
|
||||
},
|
||||
id: "4", name: "Daniel P.", handle: "@DanStyles", testimonial: "Finally found a barbershop that understands my style. The team at VR Barbershop is fantastic. They listen, advise, and deliver flawless results every single time. Five stars!", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-fashionable-boy-front-white-curtain_23-2148184872.jpg"},
|
||||
]}
|
||||
showRating={true}
|
||||
title="What Our Clients Say"
|
||||
@@ -232,27 +160,22 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "What are your operating hours?",
|
||||
content: "We are open Tuesday to Saturday, from 10:00 AM to 7:00 PM. We are closed on Sundays and Mondays.",
|
||||
id: "1", title: "What are your operating hours?", content: "We are open Tuesday to Saturday, from 10:00 AM to 7:00 PM. We are closed on Sundays and Mondays."},
|
||||
{
|
||||
id: "2", title: "Do I need an appointment?", content: "While walk-ins are welcome, we highly recommend booking an appointment to ensure prompt service and avoid waiting, especially during peak hours."},
|
||||
{
|
||||
id: "3", title: "What payment methods do you accept?", content: "We accept all major credit cards, debit cards, and cash. Digital payments like Apple Pay and Google Pay are also accepted."},
|
||||
{
|
||||
id: "4", title: "Where are you located?", content: "VR Barbershop is conveniently located at 123 Luxury Lane, Suite 456, Metropolis, State 78901."
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Do I need an appointment?",
|
||||
content: "While walk-ins are welcome, we highly recommend booking an appointment to ensure prompt service and avoid waiting, especially during peak hours.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "What payment methods do you accept?",
|
||||
content: "We accept all major credit cards, debit cards, and cash. Digital payments like Apple Pay and Google Pay are also accepted.",
|
||||
},
|
||||
id: "5", title: "What is your phone number?", content: "You can reach us at +1 (234) 567-8900 during business hours."
|
||||
}
|
||||
]}
|
||||
ctaTitle="Ready for a Fresh Look?"
|
||||
ctaDescription="Contact us today to book your next appointment or to learn more about our services."
|
||||
ctaButton={{
|
||||
text: "Call Us Now",
|
||||
href: "tel:+1234567890",
|
||||
}}
|
||||
text: "Call Us Now", href: "tel:+12345678900"}}
|
||||
ctaIcon={Phone}
|
||||
/>
|
||||
</div>
|
||||
@@ -261,58 +184,37 @@ export default function LandingPage() {
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Services",
|
||||
items: [
|
||||
title: "Services", items: [
|
||||
{
|
||||
label: "Precision Haircuts",
|
||||
href: "#services",
|
||||
},
|
||||
label: "Precision Haircuts", href: "#services"},
|
||||
{
|
||||
label: "Hot Lather Shaves",
|
||||
href: "#services",
|
||||
},
|
||||
label: "Hot Lather Shaves", href: "#services"},
|
||||
{
|
||||
label: "Beard Trimming",
|
||||
href: "#services",
|
||||
},
|
||||
label: "Beard Trimming", href: "#services"},
|
||||
{
|
||||
label: "Styling",
|
||||
href: "#services",
|
||||
},
|
||||
label: "Styling", href: "#services"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "About Us",
|
||||
items: [
|
||||
title: "About Us", items: [
|
||||
{
|
||||
label: "Our Story",
|
||||
href: "#about",
|
||||
},
|
||||
label: "Our Story", href: "#about"},
|
||||
{
|
||||
label: "Our Team",
|
||||
href: "#about",
|
||||
},
|
||||
label: "Our Team", href: "#about"},
|
||||
{
|
||||
label: "Testimonials",
|
||||
href: "#testimonials",
|
||||
},
|
||||
label: "Testimonials", href: "#testimonials"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Connect",
|
||||
items: [
|
||||
title: "Connect", items: [
|
||||
{
|
||||
label: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
label: "Book Now", href: "#contact"},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
label: "Call Us: +1 (234) 567-8900", href: "tel:+12345678900"},
|
||||
{
|
||||
label: "FAQs",
|
||||
href: "#contact",
|
||||
},
|
||||
label: "Find Us: 123 Luxury Lane", href: "#contact"},
|
||||
{
|
||||
label: "FAQs", href: "#contact"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #f7f6f7;
|
||||
--card: #ffffff;
|
||||
--foreground: #25190c;
|
||||
--primary-cta: #ff6207;
|
||||
--primary-cta-text: #f7f6f7;
|
||||
--secondary-cta: #ffffff;
|
||||
--secondary-cta-text: #25190c;
|
||||
--accent: #ffce93;
|
||||
--background-accent: #e8cfa8;
|
||||
--background: #0a0a0a;
|
||||
--card: #1a1a1a;
|
||||
--foreground: #f5f5f5;
|
||||
--primary-cta: #ffdf7d;
|
||||
--primary-cta-text: #0a0a0a;
|
||||
--secondary-cta: #1a1a1a;
|
||||
--secondary-cta-text: #ffffff;
|
||||
--accent: #b8860b;
|
||||
--background-accent: #8b6914;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user