Merge version_1 into main #1
491
src/app/page.tsx
491
src/app/page.tsx
@@ -16,358 +16,167 @@ import TextAbout from '@/components/sections/about/TextAbout';
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="bounce-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
defaultButtonVariant="bounce-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "pricing",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Andrea Barber & Beauty"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Andrea Barber & Beauty"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Andrea Barber Shop & Estetica"
|
||||
description="Experience professional grooming and beauty treatments in the heart of our studio. Where style meets excellence."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/barber-cutting-client-s-hair-his-shop_23-2149186530.jpg"
|
||||
imageAlt="barbershop interior modern professional"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/male-barber-sitting-his-shop_23-2149186516.jpg",
|
||||
alt: "Male barber sitting at his shop",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/barber-doing-haircut-bearded-aged-client-hair-salon_23-2148182013.jpg",
|
||||
alt: "Barber doing haircut bearded aged client in hair salon",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/medium-shot-man-getting-his-hair-washed_23-2149220571.jpg",
|
||||
alt: "Medium shot man getting his hair washed",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/full-shot-man-getting-haircut_23-2149220553.jpg",
|
||||
alt: "Full shot man getting haircut",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/cosmetics-palettes-table_23-2147783933.jpg",
|
||||
alt: "Cosmetics palettes on table",
|
||||
},
|
||||
]}
|
||||
avatarText="Join 500+ satisfied clients"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Professional Grooming",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Precision Styling",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Premium Skincare",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Hot Towel Shave",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Expert Beauty",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Andrea Barber Shop & Estetica"
|
||||
description="Experience professional grooming and beauty treatments in the heart of our studio. Where style meets excellence."
|
||||
buttons={[{ text: "Book Now", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/barber-cutting-client-s-hair-his-shop_23-2149186530.jpg"
|
||||
imageAlt="barbershop interior modern professional"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/male-barber-sitting-his-shop_23-2149186516.jpg", alt: "Male barber sitting at his shop" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/barber-doing-haircut-bearded-aged-client-hair-salon_23-2148182013.jpg", alt: "Barber doing haircut bearded aged client in hair salon" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/medium-shot-man-getting-his-hair-washed_23-2149220571.jpg", alt: "Medium shot man getting his hair washed" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/full-shot-man-getting-haircut_23-2149220553.jpg", alt: "Full shot man getting haircut" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/cosmetics-palettes-table_23-2147783933.jpg", alt: "Cosmetics palettes on table" },
|
||||
]}
|
||||
avatarText="Join 500+ satisfied clients"
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "Professional Grooming" },
|
||||
{ type: "text", text: "Precision Styling" },
|
||||
{ type: "text", text: "Premium Skincare" },
|
||||
{ type: "text", text: "Hot Towel Shave" },
|
||||
{ type: "text", text: "Expert Beauty" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={true}
|
||||
title="Unico nel suo genere: Artigianato e Bellezza"
|
||||
buttons={[
|
||||
{
|
||||
text: "Learn More",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={true}
|
||||
title="Unico nel suo genere: Artigianato e Bellezza"
|
||||
buttons={[{ text: "Learn More" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Precision Haircut",
|
||||
subtitle: "Expert styling for all hair types.",
|
||||
category: "Hair",
|
||||
value: "€30",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Beard Grooming",
|
||||
subtitle: "Hot towel shave and beard contouring.",
|
||||
category: "Beard",
|
||||
value: "€20",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Estetica",
|
||||
subtitle: "Skincare and beauty treatments.",
|
||||
category: "Beauty",
|
||||
value: "€45",
|
||||
},
|
||||
]}
|
||||
title="Our Services"
|
||||
description="Premium grooming and beauty treatments tailored to you."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ id: "f1", title: "Precision Haircut", subtitle: "Expert styling for all hair types.", category: "Hair", value: "€30" },
|
||||
{ id: "f2", title: "Beard Grooming", subtitle: "Hot towel shave and beard contouring.", category: "Beard", value: "€20" },
|
||||
{ id: "f3", title: "Estetica", subtitle: "Skincare and beauty treatments.", category: "Beauty", value: "€45" },
|
||||
]}
|
||||
title="Our Services"
|
||||
description="Premium grooming and beauty treatments tailored to you."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardThree
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Pomade Gold",
|
||||
price: "€18",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-selfcare-products_23-2149313063.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Beard Oil",
|
||||
price: "€22",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-her-hair-washed-beauty-salon_23-2149167389.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Shampoo",
|
||||
price: "€15",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/product-branding-packaging_23-2150965835.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Texture Clay",
|
||||
price: "€19",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/ecofriendly-beauty-product_23-2150669105.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Aftershave",
|
||||
price: "€25",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-using-dry-shampoo-home_23-2150706337.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Comb Set",
|
||||
price: "€10",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/product-branding-packaging_23-2150965827.jpg",
|
||||
},
|
||||
]}
|
||||
title="Shop Professional"
|
||||
description="Products we use, products you can take home."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardThree
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "p1", name: "Pomade Gold", price: "€18", imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-selfcare-products_23-2149313063.jpg" },
|
||||
{ id: "p2", name: "Beard Oil", price: "€22", imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-her-hair-washed-beauty-salon_23-2149167389.jpg" },
|
||||
{ id: "p3", name: "Shampoo", price: "€15", imageSrc: "http://img.b2bpic.net/free-photo/product-branding-packaging_23-2150965835.jpg" },
|
||||
{ id: "p4", name: "Texture Clay", price: "€19", imageSrc: "http://img.b2bpic.net/free-photo/ecofriendly-beauty-product_23-2150669105.jpg" },
|
||||
{ id: "p5", name: "Aftershave", price: "€25", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-using-dry-shampoo-home_23-2150706337.jpg" },
|
||||
{ id: "p6", name: "Comb Set", price: "€10", imageSrc: "http://img.b2bpic.net/free-photo/product-branding-packaging_23-2150965827.jpg" },
|
||||
]}
|
||||
title="Shop Professional"
|
||||
description="Products we use, products you can take home."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "b1",
|
||||
price: "€30",
|
||||
name: "Basic Cut",
|
||||
features: [
|
||||
"Style Consultation",
|
||||
"Wash & Condition",
|
||||
"Precision Cut",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Select",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "b2",
|
||||
price: "€50",
|
||||
name: "Full Service",
|
||||
features: [
|
||||
"Haircut & Styling",
|
||||
"Beard Trim",
|
||||
"Scalp Treatment",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Select",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "b3",
|
||||
price: "€75",
|
||||
name: "Luxury Groom",
|
||||
features: [
|
||||
"Full Haircut",
|
||||
"Hot Towel Facial",
|
||||
"Premium Products",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Select",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Membership & Services"
|
||||
description="Fair and transparent pricing for top-tier service."
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{ id: "b1", price: "€30", name: "Basic Cut", features: ["Style Consultation", "Wash & Condition", "Precision Cut"], buttons: [{ text: "Select" }] },
|
||||
{ id: "b2", price: "€50", name: "Full Service", features: ["Haircut & Styling", "Beard Trim", "Scalp Treatment"], buttons: [{ text: "Select" }] },
|
||||
{ id: "b3", price: "€75", name: "Luxury Groom", features: ["Full Haircut", "Hot Towel Facial", "Premium Products"], buttons: [{ text: "Select" }] },
|
||||
]}
|
||||
title="Membership & Services"
|
||||
description="Fair and transparent pricing for top-tier service."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={true}
|
||||
testimonial="The best barbershop experience in town. Andrea is extremely skilled and professional."
|
||||
rating={5}
|
||||
author="Marco Rossi"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/happy-people-working-photography-studio_23-2148424423.jpg",
|
||||
alt: "Marco Rossi",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/process-creating-stand-up-comedy_23-2151058839.jpg",
|
||||
alt: "Satisfied client 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/man-holding-professional-camera_23-2148503561.jpg",
|
||||
alt: "Satisfied client 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/people-recording-their-house-tour_23-2151139118.jpg",
|
||||
alt: "Satisfied client 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/man-taking-photo-woman-model_23-2148532620.jpg",
|
||||
alt: "Satisfied client 4",
|
||||
},
|
||||
]}
|
||||
ratingAnimation="blur-reveal"
|
||||
avatarsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={true}
|
||||
testimonial="The best barbershop experience in town. Andrea is extremely skilled and professional."
|
||||
rating={5}
|
||||
author="Marco Rossi"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/happy-people-working-photography-studio_23-2148424423.jpg", alt: "Marco Rossi" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/process-creating-stand-up-comedy_23-2151058839.jpg", alt: "Satisfied client 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/man-holding-professional-camera_23-2148503561.jpg", alt: "Satisfied client 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/people-recording-their-house-tour_23-2151139118.jpg", alt: "Satisfied client 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/man-taking-photo-woman-model_23-2148532620.jpg", alt: "Satisfied client 4" },
|
||||
]}
|
||||
ratingAnimation="blur-reveal"
|
||||
avatarsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Do I need an appointment?",
|
||||
content: "Yes, we highly recommend booking in advance.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "What payment methods do you accept?",
|
||||
content: "We accept cash and all major credit cards.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Can I buy gift cards?",
|
||||
content: "Yes, please ask at the front desk.",
|
||||
},
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Answers to help you prepare for your visit."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "q1", title: "Do I need an appointment?", content: "Yes, we highly recommend booking in advance." },
|
||||
{ id: "q2", title: "What payment methods do you accept?", content: "We accept cash and all major credit cards." },
|
||||
{ id: "q3", title: "Can I buy gift cards?", content: "Yes, please ask at the front desk." },
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Answers to help you prepare for your visit."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Visit Us"
|
||||
title="Get in touch today"
|
||||
description="Ready for a refresh? Contact us to book an appointment."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Visit Us"
|
||||
title="Get in touch today"
|
||||
description="Ready for a refresh? Contact us to book an appointment."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="Andrea Barber & Beauty"
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation",
|
||||
items: [
|
||||
{
|
||||
label: "Home",
|
||||
href: "#hero",
|
||||
},
|
||||
{
|
||||
label: "Services",
|
||||
href: "#features",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="Andrea Barber & Beauty"
|
||||
columns={[
|
||||
{ title: "Navigation", items: [{ label: "Home", href: "#hero" }, { label: "Services", href: "#features" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms", href: "#" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user