Compare commits
5 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 8dd56b5dc6 | |||
| 44729bfea5 | |||
| 3a18eca032 | |||
| 53043c0f10 | |||
| 99aaeb3460 |
382
src/app/page.tsx
382
src/app/page.tsx
@@ -2,10 +2,10 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
||||
import MediaAbout from '@/components/sections/about/MediaAbout';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
@@ -31,30 +31,12 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "pricing",
|
||||
},
|
||||
{
|
||||
name: "Team",
|
||||
id: "team",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Sobre Nosotros", id: "about" },
|
||||
{ name: "Servicios", id: "features" },
|
||||
{ name: "Precios", id: "pricing" },
|
||||
{ name: "Equipo", id: "team" },
|
||||
{ name: "Testimonios", id: "testimonials" },
|
||||
{ name: "Contacto", id: "contact" },
|
||||
]}
|
||||
brandName="Sharp Blendz"
|
||||
/>
|
||||
@@ -62,74 +44,22 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Sharp Blendz: Precision Grooming"
|
||||
description="Where tradition meets modern style. Elevate your look with our expert barbers."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Appointment",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
background={{ variant: "plain" }}
|
||||
title="Sharp Blendz: Barbería de Precisión"
|
||||
description="Donde la tradición se encuentra con el estilo moderno. Eleva tu imagen con nuestros expertos."
|
||||
buttons={[{ text: "Reservar Cita", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/professional-hairdresser-wearing-protective-face-mask-make-haircut-european-bearded-brutal-man-beauty-salon_343596-4463.jpg?_wi=1"
|
||||
imageAlt="barber shop interior modern dark"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/man-barbershop_23-2147778765.jpg",
|
||||
alt: "Man in barbershop",
|
||||
},
|
||||
{
|
||||
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/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/side-view-leather-barber-shop-chair_23-2148242807.jpg",
|
||||
alt: "Side view of leather barber shop chair",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/front-view-baber-shop-chiar_23-2148506337.jpg",
|
||||
alt: "Front view of baber shop chiar",
|
||||
},
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Precision Fades",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Hot Towel Shaves",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Beard Sculpting",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Master Barbers",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Premium Products",
|
||||
},
|
||||
]}
|
||||
imageAlt="barbería moderna"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Our Story"
|
||||
description="At Sharp Blendz, we believe in the art of the haircut. Our shop brings together seasoned professionals who are dedicated to delivering not just a cut, but a complete grooming experience that leaves you feeling your best."
|
||||
title="Nuestra Historia"
|
||||
description="En Sharp Blendz, creemos en el arte del corte. Nuestra barbería reúne a profesionales experimentados dedicados a ofrecerte no solo un corte, sino una experiencia de cuidado completa."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work_627829-7242.jpg?_wi=1"
|
||||
imageAlt="barber shop atmosphere warm modern"
|
||||
imageAlt="atmósfera de barbería"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -139,260 +69,84 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Precision Fades",
|
||||
descriptions: [
|
||||
"Clean, sharp fades tailored to your hair type and style preferences.",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-barber-finishing-haircut_23-2148298296.jpg",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Straight Razor Shaves",
|
||||
descriptions: [
|
||||
"Classic hot towel treatments and professional straight razor shaves.",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-barbershop-concept_23-2148506263.jpg",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Beard Grooming",
|
||||
descriptions: [
|
||||
"Expert beard trimming, sculpting, and maintenance for a sharp look.",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/content-client-with-hair-dye_23-2147769778.jpg",
|
||||
},
|
||||
{ id: "f1", title: "Degradados de Precisión", descriptions: ["Cortes limpios y definidos adaptados a tu estilo."], imageSrc: "http://img.b2bpic.net/free-photo/close-up-barber-finishing-haircut_23-2148298296.jpg" },
|
||||
{ id: "f2", title: "Afeitado a Navaja", descriptions: ["Tratamientos clásicos con toalla caliente."], imageSrc: "http://img.b2bpic.net/free-photo/side-view-barbershop-concept_23-2148506263.jpg" },
|
||||
{ id: "f3", title: "Cuidado de Barba", descriptions: ["Perfilado, escultura y mantenimiento profesional."], imageSrc: "http://img.b2bpic.net/free-photo/content-client-with-hair-dye_23-2147769778.jpg" },
|
||||
]}
|
||||
title="Our Services"
|
||||
description="From precision fades to classic straight razor shaves."
|
||||
title="Nuestros Servicios"
|
||||
description="De cortes degradados a afeitados clásicos con navaja."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Nuestras Tarifas"
|
||||
description="Precios transparentes para servicios de alta calidad."
|
||||
plans={[
|
||||
{
|
||||
id: "basic",
|
||||
title: "Classic Cut",
|
||||
price: "$35",
|
||||
period: "per session",
|
||||
features: [
|
||||
"Classic haircut",
|
||||
"Shampoo",
|
||||
"Neck trim",
|
||||
],
|
||||
button: {
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-hairdresser-washing-man-s-hair_23-2150665396.jpg",
|
||||
imageAlt: "Medium shot hairdresser washing man's hair",
|
||||
},
|
||||
{
|
||||
id: "premium",
|
||||
title: "The Full Blendz",
|
||||
price: "$65",
|
||||
period: "per session",
|
||||
features: [
|
||||
"Haircut & Fade",
|
||||
"Hot Towel Shave",
|
||||
"Beard Sculpt",
|
||||
],
|
||||
button: {
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-hairdresser-wearing-protective-face-mask-make-haircut-european-bearded-brutal-man-beauty-salon_343596-4463.jpg?_wi=2",
|
||||
imageAlt: "Medium shot hairdresser washing man's hair",
|
||||
},
|
||||
{
|
||||
id: "beard",
|
||||
title: "Beard Groom",
|
||||
price: "$25",
|
||||
period: "per session",
|
||||
features: [
|
||||
"Beard trim",
|
||||
"Line up",
|
||||
"Beard oil treatment",
|
||||
],
|
||||
button: {
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work_627829-7242.jpg?_wi=2",
|
||||
imageAlt: "Medium shot hairdresser washing man's hair",
|
||||
},
|
||||
{ id: "basic", title: "Corte Clásico", price: "$35", period: "por sesión", features: ["Corte clásico", "Lavado", "Perfilado"], button: { text: "Reservar", href: "#contact" } },
|
||||
{ id: "premium", title: "The Full Blendz", price: "$65", period: "por sesión", features: ["Corte y degradado", "Afeitado con toalla", "Esculpido de barba"], button: { text: "Reservar", href: "#contact" } }
|
||||
]}
|
||||
title="Pricing Packages"
|
||||
description="Transparent pricing for high-quality grooming services."
|
||||
textboxLayout="split"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardTen
|
||||
useInvertedBackground={true}
|
||||
title="Meet Our Barbers"
|
||||
tag="Expert Grooming Team"
|
||||
<TeamCardTen
|
||||
title="Nuestro Equipo"
|
||||
tag="Barberos Expertos"
|
||||
members={[]}
|
||||
memberVariant="card"
|
||||
membersAnimation="slide-up"
|
||||
members={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Marcus",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-grooming-beard-stylish-client_23-2147737040.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Elena",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/positive-bearded-black-male-with-tattoo-cross-arms-dressed-white-shirt_613910-15917.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "David",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-posing-with-crossed-arms-brick-wall_176420-14690.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Sam",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-pensive-man-with-receive-moustache-beard-trimming-procedure-barbershop_613910-15042.jpg",
|
||||
},
|
||||
]}
|
||||
memberVariant="card"
|
||||
/>
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
<TestimonialCardTwo
|
||||
title="Lo que dicen nuestros clientes"
|
||||
description="Únete a los cientos de clientes satisfechos."
|
||||
testimonials={[]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "James R.",
|
||||
role: "Regular Client",
|
||||
testimonial: "Best fade I've had in years. Professional and consistent every single time.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-finished-grooming-long-gray-beard_23-2148181941.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Chris M.",
|
||||
role: "First-time visitor",
|
||||
testimonial: "Great atmosphere and Marcus is an absolute expert with the razor.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-urban-bearded-male-posing-near-old-vintage-ladder-grey-background_613910-1293.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Alex T.",
|
||||
role: "Loyal Customer",
|
||||
testimonial: "Sharp Blendz is the only shop I trust with my beard. Highly recommended.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/photo-annoyed-man-plugs-ears-yells-demands-silence-woke-up-because-loud-noise-wears-white-casual-t-shirt-moisturizing-patches-eyes-has-bad-mood-morning-isolated-green-wall_273609-39370.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Ben W.",
|
||||
role: "Regular Client",
|
||||
testimonial: "Clean shop, great conversation, even better haircuts.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dad-teaching-his-boy-how-shave_23-2149588748.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Sam L.",
|
||||
role: "Local Resident",
|
||||
testimonial: "Elena gives the best scissor cuts in the city. Truly impressive skill.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-relaxing-sauna_23-2149283626.jpg",
|
||||
},
|
||||
]}
|
||||
title="What Our Clients Say"
|
||||
description="Join hundreds of satisfied customers who trust us with their style."
|
||||
/>
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "faq1",
|
||||
title: "Do I need an appointment?",
|
||||
content: "We recommend booking online, but we also welcome walk-ins based on availability.",
|
||||
},
|
||||
{
|
||||
id: "faq2",
|
||||
title: "How often should I get a cut?",
|
||||
content: "Most clients find every 2-3 weeks ideal for maintaining a sharp, consistent fade.",
|
||||
},
|
||||
{
|
||||
id: "faq3",
|
||||
title: "Do you carry hair products?",
|
||||
content: "Yes, we sell a curated selection of premium pomades, oils, and balms.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/young-man-barber-s-shop-getting-his-beard-trimmed_23-2149186494.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
title="Common Questions"
|
||||
description="Everything you need to know about our barber services."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
<FaqSplitMedia
|
||||
title="Preguntas Frecuentes"
|
||||
faqs={[]}
|
||||
faqsAnimation="slide-up"
|
||||
textboxLayout="split"
|
||||
description="Resolvemos todas tus dudas."
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Visit Us"
|
||||
title="Book Your Spot"
|
||||
description="Get ready for your freshest look yet. Send us a message to secure your appointment today."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/standing-frame-open-sign-business_53876-63428.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
inputPlaceholder="Enter your email for reminders"
|
||||
/>
|
||||
<ContactCenter
|
||||
tag="Contáctanos"
|
||||
title="Agenda tu cita"
|
||||
description="Visítanos en nuestra sucursal. Estamos abiertos de Lunes a Sábado de 10:00 AM a 8:00 PM. Dirección: Calle Falsa 123, Ciudad Principal. Síguenos en Instagram @sharpblendz."
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Sharp Blendz"
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Services",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
label: "Pricing",
|
||||
href: "#pricing",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<FooterMedia
|
||||
logoText="Sharp Blendz"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/barber-shop-interior_23-2149186494.jpg"
|
||||
columns={[
|
||||
{ title: "Contacto", items: [{ label: "Tel: +34 912 345 678", href: "tel:+34912345678" }, { label: "IG: @sharpblendz", href: "#" }] },
|
||||
{ title: "Información", items: [{ label: "Dirección: C/ Falsa 123", href: "#" }, { label: "Horarios: Lun-Sáb 10-20h", href: "#" }] }
|
||||
]}
|
||||
copyrightText="© 2025 Sharp Blendz. Todos los derechos reservados."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user