Merge version_1 into main #1
297
src/app/page.tsx
297
src/app/page.tsx
@@ -17,216 +17,109 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Team",
|
||||
id: "team",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Otto"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Team", id: "team" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Otto"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardScroll
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Otto Barbering & Grooming"
|
||||
description="Where tradition meets precision. Experience the ultimate barbering service in the heart of the city."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Appointment",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/retro-world-theatre-day-scenes-with-backstage_23-2151211363.jpg"
|
||||
imageAlt="Vintage barber chair in professional barbershop"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardScroll
|
||||
title="Otto Barbering & Grooming"
|
||||
description="Where tradition meets precision. Experience the ultimate barbering service in the heart of the city."
|
||||
background={{ variant: "plain" }}
|
||||
buttons={[{ text: "Book Appointment", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/retro-world-theatre-day-scenes-with-backstage_23-2151211363.jpg"
|
||||
imageAlt="Vintage barber chair in professional barbershop"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureBento
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Precision Cut",
|
||||
description: "Customized haircuts for every hair type.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Scissors,
|
||||
},
|
||||
{
|
||||
title: "Hot Towel Shave",
|
||||
description: "Classic straight-razor shave with hot towels.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Sparkles,
|
||||
},
|
||||
{
|
||||
title: "Beard Trim",
|
||||
description: "Expert shaping and grooming for facial hair.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Smile,
|
||||
},
|
||||
]}
|
||||
title="Our Services"
|
||||
description="Expert grooming tailored to your style."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureBento
|
||||
title="Our Services"
|
||||
description="Expert grooming tailored to your style."
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Precision Cut", description: "Customized haircuts for every hair type.", bentoComponent: "reveal-icon", icon: Scissors },
|
||||
{ title: "Hot Towel Shave", description: "Classic straight-razor shave with hot towels.", bentoComponent: "reveal-icon", icon: Sparkles },
|
||||
{ title: "Beard Trim", description: "Expert shaping and grooming for facial hair.", bentoComponent: "reveal-icon", icon: Smile },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardTen
|
||||
useInvertedBackground={true}
|
||||
title="The Masters"
|
||||
tag="Expert Staff"
|
||||
members={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Marcus",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-confident-blonde-male-barber-uniform-holds-comb-scissors-isolated-orange-space-with-copy-space_141793-60335.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Elena",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-holding-strands-hair-while-thinking-about-something_176474-95380.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "James",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/unpleased-young-male-barber-wearing-uniform-holding-scissors-with-cash-isolated-olive-green-background_141793-119410.jpg",
|
||||
},
|
||||
]}
|
||||
memberVariant="card"
|
||||
membersAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardTen
|
||||
title="The Masters"
|
||||
tag="Expert Staff"
|
||||
memberVariant="card"
|
||||
useInvertedBackground={true}
|
||||
membersAnimation="slide-up"
|
||||
members={[
|
||||
{ id: "1", name: "Marcus", imageSrc: "http://img.b2bpic.net/free-photo/young-confident-blonde-male-barber-uniform-holds-comb-scissors-isolated-orange-space-with-copy-space_141793-60335.jpg" },
|
||||
{ id: "2", name: "Elena", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-holding-strands-hair-while-thinking-about-something_176474-95380.jpg" },
|
||||
{ id: "3", name: "James", imageSrc: "http://img.b2bpic.net/free-photo/unpleased-young-male-barber-wearing-uniform-holding-scissors-with-cash-isolated-olive-green-background_141793-119410.jpg" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "John Doe",
|
||||
role: "Architect",
|
||||
company: "Studio A",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-afro-american-man-wearing-black-pullover-posing-outdoor-terrace_291650-214.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Sam Smith",
|
||||
role: "Developer",
|
||||
company: "Code Lab",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-doing-his-self-care-ritual_23-2149204951.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Mike Ross",
|
||||
role: "Attorney",
|
||||
company: "Law Firm",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/successful-young-man-stylish-hat-relaxing-alone-cozy-cafeteria-lunch-break-looking-with-happy-expression_273609-1935.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Dave Grohl",
|
||||
role: "Artist",
|
||||
company: "Music Co",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-standing-kitchen_107420-12358.jpg",
|
||||
},
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
value: "10k+",
|
||||
label: "Happy Clients",
|
||||
},
|
||||
{
|
||||
value: "15",
|
||||
label: "Years Experience",
|
||||
},
|
||||
{
|
||||
value: "5.0",
|
||||
label: "Star Rating",
|
||||
},
|
||||
]}
|
||||
title="What Our Clients Say"
|
||||
description="Join our community of satisfied gentlemen."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
title="What Our Clients Say"
|
||||
description="Join our community of satisfied gentlemen."
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
kpiItems={[
|
||||
{ value: "10k+", label: "Happy Clients" },
|
||||
{ value: "15", label: "Years Experience" },
|
||||
{ value: "5.0", label: "Star Rating" },
|
||||
]}
|
||||
testimonials={[
|
||||
{ id: "1", name: "John Doe", role: "Architect", company: "Studio A", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-afro-american-man-wearing-black-pullover-posing-outdoor-terrace_291650-214.jpg" },
|
||||
{ id: "2", name: "Sam Smith", role: "Developer", company: "Code Lab", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/man-doing-his-self-care-ritual_23-2149204951.jpg" },
|
||||
{ id: "3", name: "Mike Ross", role: "Attorney", company: "Law Firm", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/successful-young-man-stylish-hat-relaxing-alone-cozy-cafeteria-lunch-break-looking-with-happy-expression_273609-1935.jpg" },
|
||||
{ id: "4", name: "Dave Grohl", role: "Artist", company: "Music Co", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-standing-kitchen_107420-12358.jpg" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
text="Ready for a fresh cut? Visit us or book online."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Us",
|
||||
href: "mailto:hello@otto.com",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
text="Ready for a fresh cut? Visit us or book online."
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
buttons={[{ text: "Contact Us", href: "mailto:hello@otto.com" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Location",
|
||||
items: [
|
||||
{
|
||||
label: "123 Barber St",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "City, State 12345",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Social",
|
||||
items: [
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Facebook",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2024 Otto Barbershop."
|
||||
bottomRightText="All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{ title: "Location", items: [{ label: "123 Barber St", href: "#" }, { label: "City, State 12345", href: "#" }] },
|
||||
{ title: "Social", items: [{ label: "Instagram", href: "#" }, { label: "Facebook", href: "#" }] },
|
||||
]}
|
||||
bottomLeftText="© 2024 Otto Barbershop."
|
||||
bottomRightText="All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user