Merge version_1 into main #2
347
src/app/page.tsx
347
src/app/page.tsx
@@ -13,257 +13,118 @@ import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCar
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="background-highlight"
|
||||
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">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="LionzVision"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="LionzVision"
|
||||
button={{ text: "Book Now", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
title="Precision Cuts. Visionary Style."
|
||||
description="At LionzVision, we blend traditional barbering techniques with modern precision to redefine your grooming standards."
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/professional-bearded-barber-man-apron-smiling-cheerfully-showing-victory-sing-standing-white-wall_141793-48512.jpg",
|
||||
alt: "Barber A",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-portrait-blond-bearded-male-dressed-black-leather-jacket_613910-11915.jpg",
|
||||
alt: "Barber B",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-smiling-handsome-stylish-redhead-biker-black-leather-jacket-holds-motorcycle-helmet-posing-studio-isolated-dark-background_613910-5351.jpg",
|
||||
alt: "Barber C",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/hipster-man-barber-shop-professional-hairdresser-uses-brush-almost-finished-hairstyle_613910-3886.jpg",
|
||||
alt: "Barber D",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/professional-bearded-barber-man-apron-smiling-cheerfully-showing-victory-sing-standing-white-wall_141793-48512.jpg",
|
||||
alt: "Barber E",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Appointment",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Precision Cuts",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Modern Styles",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Classic Shaves",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Expert Grooming",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Premium Experience",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
background={{ variant: "radial-gradient" }}
|
||||
title="Precision Cuts. Visionary Style."
|
||||
description="At LionzVision, we blend traditional barbering techniques with modern precision to redefine your grooming standards."
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/professional-bearded-barber-man-apron-smiling-cheerfully-showing-victory-sing-standing-white-wall_141793-48512.jpg", alt: "Barber A" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/close-up-portrait-blond-bearded-male-dressed-black-leather-jacket_613910-11915.jpg", alt: "Barber B" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-smiling-handsome-stylish-redhead-biker-black-leather-jacket-holds-motorcycle-helmet-posing-studio-isolated-dark-background_613910-5351.jpg", alt: "Barber C" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/hipster-man-barber-shop-professional-hairdresser-uses-brush-almost-finished-hairstyle_613910-3886.jpg", alt: "Barber D" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/professional-bearded-barber-man-apron-smiling-cheerfully-showing-victory-sing-standing-white-wall_141793-48512.jpg", alt: "Barber E" }
|
||||
]}
|
||||
buttons={[{ text: "Book Appointment", href: "#contact" }]}
|
||||
buttonAnimation="slide-up"
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "Precision Cuts" },
|
||||
{ type: "text", text: "Modern Styles" },
|
||||
{ type: "text", text: "Classic Shaves" },
|
||||
{ type: "text", text: "Expert Grooming" },
|
||||
{ type: "text", text: "Premium Experience" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={true}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "Mastering the Art of ",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/cheerful-barber-client-preparing-treatment_23-2147737010.jpg",
|
||||
alt: "Professional Barbering",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
content: " Grooming",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={true}
|
||||
heading={[
|
||||
{ type: "text", content: "Mastering the Art of " },
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-photo/cheerful-barber-client-preparing-treatment_23-2147737010.jpg", alt: "Professional Barbering" },
|
||||
{ type: "text", content: " Grooming" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwelve
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "s1",
|
||||
label: "Shave",
|
||||
title: "Royal Hot Towel Shave",
|
||||
items: [
|
||||
"Straight razor precision",
|
||||
"Hot towel treatment",
|
||||
"Post-shave soothing",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "s2",
|
||||
label: "Cut",
|
||||
title: "Modern Fade Design",
|
||||
items: [
|
||||
"Skin fade tech",
|
||||
"Custom line-up",
|
||||
"Detailed blending",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "s3",
|
||||
label: "Beard",
|
||||
title: "Beard Sculpting",
|
||||
items: [
|
||||
"Beard shaping",
|
||||
"Conditioning treatment",
|
||||
"Oil infusion",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Our Signature Services"
|
||||
description="From classic shaves to modern fade techniques, discover our expert grooming services tailored to your personal vision."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwelve
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ id: "s1", label: "Shave", title: "Royal Hot Towel Shave", items: ["Straight razor precision", "Hot towel treatment", "Post-shave soothing"] },
|
||||
{ id: "s2", label: "Cut", title: "Modern Fade Design", items: ["Skin fade tech", "Custom line-up", "Detailed blending"] },
|
||||
{ id: "s3", label: "Beard", title: "Beard Sculpting", items: ["Beard shaping", "Conditioning treatment", "Oil infusion"] }
|
||||
]}
|
||||
title="Our Signature Services"
|
||||
description="From classic shaves to modern fade techniques, discover our expert grooming services tailored to your personal vision."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "James W.",
|
||||
role: "Creative Director",
|
||||
company: "DesignLab",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-bearded-barber-man-apron-smiling-cheerfully-showing-victory-sing-standing-white-wall_141793-48512.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Marcus R.",
|
||||
role: "Architect",
|
||||
company: "UrbanBuild",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-blond-bearded-male-dressed-black-leather-jacket_613910-11915.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "David L.",
|
||||
role: "Entrepreneur",
|
||||
company: "TechStart",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-handsome-stylish-redhead-biker-black-leather-jacket-holds-motorcycle-helmet-posing-studio-isolated-dark-background_613910-5351.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Samuel B.",
|
||||
role: "Photographer",
|
||||
company: "SnapWorks",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hipster-man-barber-shop-professional-hairdresser-uses-brush-almost-finished-hairstyle_613910-3886.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Alex P.",
|
||||
role: "Designer",
|
||||
company: "ArtCore",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-bearded-barber-man-apron-smiling-cheerfully-showing-victory-sing-standing-white-wall_141793-48512.jpg?_wi=2",
|
||||
},
|
||||
]}
|
||||
title="Voices from the Chair"
|
||||
description="Hear what our clients have to say about the LionzVision experience."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "1", name: "James W.", role: "Creative Director", company: "DesignLab", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/professional-bearded-barber-man-apron-smiling-cheerfully-showing-victory-sing-standing-white-wall_141793-48512.jpg" },
|
||||
{ id: "2", name: "Marcus R.", role: "Architect", company: "UrbanBuild", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-blond-bearded-male-dressed-black-leather-jacket_613910-11915.jpg" },
|
||||
{ id: "3", name: "David L.", role: "Entrepreneur", company: "TechStart", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-handsome-stylish-redhead-biker-black-leather-jacket-holds-motorcycle-helmet-posing-studio-isolated-dark-background_613910-5351.jpg" },
|
||||
{ id: "4", name: "Samuel B.", role: "Photographer", company: "SnapWorks", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/hipster-man-barber-shop-professional-hairdresser-uses-brush-almost-finished-hairstyle_613910-3886.jpg" },
|
||||
{ id: "5", name: "Alex P.", role: "Designer", company: "ArtCore", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/professional-bearded-barber-man-apron-smiling-cheerfully-showing-victory-sing-standing-white-wall_141793-48512.jpg" }
|
||||
]}
|
||||
title="Voices from the Chair"
|
||||
description="Hear what our clients have to say about the LionzVision experience."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Booking"
|
||||
title="Ready for your next cut?"
|
||||
description="Secure your spot at LionzVision and step up your grooming game."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Booking"
|
||||
title="Ready for your next cut?"
|
||||
description="Secure your spot at LionzVision and step up your grooming game."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{
|
||||
title: "LionzVision",
|
||||
items: [
|
||||
{
|
||||
label: "Contact Us",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
label: "Our Story",
|
||||
href: "#about",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2024 LionzVision Barbershop. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{ title: "LionzVision", items: [{ label: "Contact Us", href: "#contact" }, { label: "Our Story", href: "#about" }] },
|
||||
{ title: "Support", items: [{ label: "FAQ", href: "#" }, { label: "Terms", href: "#" }] }
|
||||
]}
|
||||
copyrightText="© 2024 LionzVision Barbershop. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user