Merge version_1 into main #2
388
src/app/page.tsx
388
src/app/page.tsx
@@ -28,294 +28,122 @@ export default function LandingPage() {
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "pricing",
|
||||
},
|
||||
{
|
||||
name: "Gallery",
|
||||
id: "gallery",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Trejo Cutzzz"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Gallery", id: "gallery" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="Trejo Cutzzz"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Trust the Process. Stay Fresh."
|
||||
description="Just starting out as a barber and building my craft. Book a cut and grow with me."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Your Cut",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/composition-shaving-objects-with-copyspace_23-2148122058.jpg?_wi=1"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-male-customer-with-beard_23-2147839828.jpg",
|
||||
alt: "Portrait of a male customer with beard",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/crop-barber-shaving-hair-unrecognizable-man_23-2147778749.jpg",
|
||||
alt: "Crop barber shaving hair of unrecognizable man",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/brown-vintage-leather-chair-stylish-barber-shop_627829-6180.jpg",
|
||||
alt: "Brown vintage leather chair at stylish barber shop",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/professional-barber-shop-chairs-close-up_23-2148353478.jpg",
|
||||
alt: "Professional barber shop chairs close-up",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-view-barbershop-concept_23-2148506210.jpg",
|
||||
alt: "Close-up view of barbershop concept",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Trust the Process. Stay Fresh."
|
||||
description="Just starting out as a barber and building my craft. Book a cut and grow with me."
|
||||
buttons={[{ text: "Book Your Cut", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/composition-shaving-objects-with-copyspace_23-2148122058.jpg"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-male-customer-with-beard_23-2147839828.jpg", alt: "Portrait of a male customer with beard" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/crop-barber-shaving-hair-unrecognizable-man_23-2147778749.jpg", alt: "Crop barber shaving hair of unrecognizable man" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/brown-vintage-leather-chair-stylish-barber-shop_627829-6180.jpg", alt: "Brown vintage leather chair at stylish barber shop" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/professional-barber-shop-chairs-close-up_23-2148353478.jpg", alt: "Professional barber shop chairs close-up" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/close-up-view-barbershop-concept_23-2148506210.jpg", alt: "Close-up view of barbershop concept" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="About Trejo"
|
||||
description="I’m Trejo, a beginner barber working to get better with every cut. My goal is clean work, sharp lines, and great customer energy."
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DdVBOoka88wUKYwZ9x3OdzZTLv/uploaded-1778611830411-rkvswulw.jpg?_wi=1"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="About Trejo"
|
||||
description="I’m Trejo, a beginner barber working to get better with every cut. My goal is clean work, sharp lines, and great customer energy."
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DdVBOoka88wUKYwZ9x3OdzZTLv/uploaded-1778611830411-rkvswulw.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "fade",
|
||||
badge: "Popular",
|
||||
price: "$15",
|
||||
subtitle: "Fade cut",
|
||||
features: [
|
||||
"Classic fade",
|
||||
"Style included",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Book now",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "lineup",
|
||||
badge: "Basic",
|
||||
price: "$10",
|
||||
subtitle: "Edge-up",
|
||||
features: [
|
||||
"Line-up",
|
||||
"Detailed finish",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Book now",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "full",
|
||||
badge: "Premium",
|
||||
price: "$20",
|
||||
subtitle: "Full Cut",
|
||||
features: [
|
||||
"Full cut",
|
||||
"Style included",
|
||||
"Beard trim",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Book now",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Services & Pricing"
|
||||
description="Prices may change as I level up my skills."
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{ id: "fade", badge: "Popular", price: "$15", subtitle: "Fade cut", features: ["Classic fade", "Style included"], buttons: [{ text: "Book now", href: "#contact" }] },
|
||||
{ id: "lineup", badge: "Basic", price: "$10", subtitle: "Edge-up", features: ["Line-up", "Detailed finish"], buttons: [{ text: "Book now", href: "#contact" }] },
|
||||
{ id: "full", badge: "Premium", price: "$20", subtitle: "Full Cut", features: ["Full cut", "Style included", "Beard trim"], buttons: [{ text: "Book now", href: "#contact" }] }
|
||||
]}
|
||||
title="Services & Pricing"
|
||||
description="Prices may change as I level up my skills."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="gallery" data-section="gallery">
|
||||
<FeatureCardTwentyFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Coming Soon",
|
||||
description: "Work in progress.",
|
||||
icon: Scissors,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/scissors-towel-beauty-salon_23-2148181999.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/teenager-girl-shows-fist-white-background-isolated-side-view_169016-55171.jpg",
|
||||
},
|
||||
],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DdVBOoka88wUKYwZ9x3OdzZTLv/uploaded-1778611830411-rkvswulw.jpg?_wi=2",
|
||||
imageAlt: "barber haircut sharp lines",
|
||||
},
|
||||
{
|
||||
title: "Coming Soon",
|
||||
description: "Stay tuned for updates.",
|
||||
icon: Zap,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-doing-his-face-care-routine_23-2149288069.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/set-razors-table_23-2147736987.jpg",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/composition-shaving-objects-with-copyspace_23-2148122058.jpg?_wi=2",
|
||||
imageAlt: "barber haircut sharp lines",
|
||||
},
|
||||
{
|
||||
title: "Coming Soon",
|
||||
description: "More styles coming.",
|
||||
icon: Star,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/process-creating-stand-up-comedy_23-2151058815.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/male-hipster-hairdresser-working-with-beard-senior-client_23-2148181893.jpg",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smart-pensive-redhead-hipster-with-full-beard-glasses-dressed-casual-clothes-poses-with-hand-chin-studio-isolated-dark-background_613910-4679.jpg",
|
||||
imageAlt: "barber haircut sharp lines",
|
||||
},
|
||||
]}
|
||||
title="Portfolio"
|
||||
description="New portfolio loading… check back as I post my latest cuts."
|
||||
/>
|
||||
</div>
|
||||
<div id="gallery" data-section="gallery">
|
||||
<FeatureCardTwentyFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Coming Soon", description: "Work in progress.", icon: Scissors, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/scissors-towel-beauty-salon_23-2148181999.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/teenager-girl-shows-fist-white-background-isolated-side-view_169016-55171.jpg" }] },
|
||||
{ title: "Coming Soon", description: "Stay tuned for updates.", icon: Zap, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/man-doing-his-face-care-routine_23-2149288069.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/set-razors-table_23-2147736987.jpg" }] },
|
||||
{ title: "Coming Soon", description: "More styles coming.", icon: Star, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/process-creating-stand-up-comedy_23-2151058815.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/male-hipster-hairdresser-working-with-beard-senior-client_23-2148181893.jpg" }] }
|
||||
]}
|
||||
title="Portfolio"
|
||||
description="New portfolio loading… check back as I post my latest cuts."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social" data-section="social">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"@trejo_cutz",
|
||||
"Bookings open",
|
||||
"Fresh cuts",
|
||||
"Daily updates",
|
||||
"Clean lines",
|
||||
"Skill growth",
|
||||
"Customer energy",
|
||||
]}
|
||||
title="Connect"
|
||||
description="Follow my journey on Instagram."
|
||||
/>
|
||||
</div>
|
||||
<div id="social" data-section="social">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={"@trejo_cutz,Bookings open,Fresh cuts,Daily updates,Clean lines,Skill growth,Customer energy".split(",")}
|
||||
title="Connect"
|
||||
description="Follow my journey on Instagram."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Pricing?",
|
||||
content: "Prices start at $10.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Booking?",
|
||||
content: "Use the contact form.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Skill level?",
|
||||
content: "I am a learner committed to excellence.",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
title="FAQ"
|
||||
description="Common questions about my services."
|
||||
faqsAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/handsome-hipster-bearded-male-sitting-armchair-barber-shop-while-hairdresser-shaves-his-beard-with-dangerous-razor_613910-18507.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "1", title: "Pricing?", content: "Prices start at $10." },
|
||||
{ id: "2", title: "Booking?", content: "Use the contact form." },
|
||||
{ id: "3", title: "Skill level?", content: "I am a learner committed to excellence." }
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
title="FAQ"
|
||||
description="Common questions about my services."
|
||||
faqsAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/handsome-hipster-bearded-male-sitting-armchair-barber-shop-while-hairdresser-shaves-his-beard-with-dangerous-razor_613910-18507.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={true}
|
||||
title="Book Your Cut"
|
||||
description="I’m still growing, so thanks for trusting me!"
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Email/Instagram Handle",
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "style",
|
||||
placeholder: "Style you want (Fade, Taper, etc.)",
|
||||
rows: 4,
|
||||
required: true,
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/master-hairdresser-prepares-face-shaving-smears-face-with-foam-hairdressing-salon_613910-18406.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={true}
|
||||
title="Book Your Cut"
|
||||
description="I’m still growing, so thanks for trusting me!"
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Email/Instagram Handle", required: true }
|
||||
]}
|
||||
textarea={{ name: "style", placeholder: "Style you want (Fade, Taper, etc.)", rows: 4, required: true }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/master-hairdresser-prepares-face-shaving-smears-face-with-foam-hairdressing-salon_613910-18406.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Links",
|
||||
items: [
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "https://instagram.com",
|
||||
},
|
||||
{
|
||||
label: "Booking",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2024 Trejo Cutzzz"
|
||||
bottomRightText="Built for growth"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[{ title: "Links", items: [{ label: "Instagram", href: "https://instagram.com" }, { label: "Booking", href: "#contact" }] }]}
|
||||
bottomLeftText="© 2024 Trejo Cutzzz"
|
||||
bottomRightText="Built for growth"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user