Merge version_5 into main #5
189
src/app/page.tsx
189
src/app/page.tsx
@@ -10,55 +10,25 @@ import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCar
|
||||
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
|
||||
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
import { Award, Sparkles, Zap } from "lucide-react";
|
||||
import { Award, Sparkles, Zap, MessageCircle } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
const galleryImages = [
|
||||
{
|
||||
id: "1", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-1.jpg", alt: "Elegante barbershop interior - luxury seating"
|
||||
},
|
||||
{
|
||||
id: "2", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-2.jpg", alt: "Master barber at work - precision cutting"
|
||||
},
|
||||
{
|
||||
id: "3", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-3.jpg", alt: "Traditional hot shave service"
|
||||
},
|
||||
{
|
||||
id: "4", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-4.jpg", alt: "Premium grooming products display"
|
||||
},
|
||||
{
|
||||
id: "5", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-5.jpg", alt: "Elegant waiting area with leather seating"
|
||||
},
|
||||
{
|
||||
id: "6", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-6.jpg", alt: "Barber mirrors and station setup"
|
||||
},
|
||||
{
|
||||
id: "7", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-7.jpg", alt: "Client receiving beard grooming"
|
||||
},
|
||||
{
|
||||
id: "8", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-8.jpg", alt: "Professional barber tools collection"
|
||||
},
|
||||
{
|
||||
id: "9", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-9.jpg", alt: "Luxurious haircut service"
|
||||
},
|
||||
{
|
||||
id: "10", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-10.jpg", alt: "Barbershop exterior storefront"
|
||||
},
|
||||
{
|
||||
id: "11", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-11.jpg", alt: "Master barber consultation with client"
|
||||
},
|
||||
{
|
||||
id: "12", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-12.jpg", alt: "Premium aftershave product application"
|
||||
},
|
||||
{
|
||||
id: "13", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-13.jpg", alt: "Classical barbershop ambiance"
|
||||
},
|
||||
{
|
||||
id: "14", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-14.jpg", alt: "Client satisfaction moment"
|
||||
},
|
||||
{
|
||||
id: "15", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-15.jpg", alt: "Elegante signature style showcase"
|
||||
}
|
||||
{ id: "1", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-1.jpg", alt: "Elegante barbershop interior - luxury seating" },
|
||||
{ id: "2", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-2.jpg", alt: "Master barber at work - precision cutting" },
|
||||
{ id: "3", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-3.jpg", alt: "Traditional hot shave service" },
|
||||
{ id: "4", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-4.jpg", alt: "Premium grooming products display" },
|
||||
{ id: "5", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-5.jpg", alt: "Elegant waiting area with leather seating" },
|
||||
{ id: "6", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-6.jpg", alt: "Barber mirrors and station setup" },
|
||||
{ id: "7", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-7.jpg", alt: "Client receiving beard grooming" },
|
||||
{ id: "8", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-8.jpg", alt: "Professional barber tools collection" },
|
||||
{ id: "9", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-9.jpg", alt: "Luxurious haircut service" },
|
||||
{ id: "10", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-10.jpg", alt: "Barbershop exterior storefront" },
|
||||
{ id: "11", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-11.jpg", alt: "Master barber consultation with client" },
|
||||
{ id: "12", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-12.jpg", alt: "Premium aftershave product application" },
|
||||
{ id: "13", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-13.jpg", alt: "Classical barbershop ambiance" },
|
||||
{ id: "14", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-14.jpg", alt: "Client satisfaction moment" },
|
||||
{ id: "15", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery-15.jpg", alt: "Elegante signature style showcase" }
|
||||
];
|
||||
|
||||
return (
|
||||
@@ -89,6 +59,16 @@ export default function LandingPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href="https://wa.me/1234567890"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="fixed bottom-6 right-6 z-50 bg-[#25D366] text-white p-4 rounded-full shadow-lg hover:scale-110 transition-transform duration-300"
|
||||
aria-label="Contact us on WhatsApp"
|
||||
>
|
||||
<MessageCircle size={28} />
|
||||
</a>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboardSplit
|
||||
logoText="ELEGANTE"
|
||||
@@ -96,7 +76,7 @@ export default function LandingPage() {
|
||||
background={{ variant: "radial-gradient" }}
|
||||
buttons={[
|
||||
{ text: "Book Appointment", href: "https://square.com/appointments" },
|
||||
{ text: "Learn More", href: "about" }
|
||||
{ text: "Learn More", href: "#about" }
|
||||
]}
|
||||
layoutOrder="default"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/barber-shop-chair.jpg"
|
||||
@@ -118,15 +98,9 @@ export default function LandingPage() {
|
||||
imageAlt="Professional barber tools"
|
||||
imagePosition="right"
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Master Craftsmen", description: "Our experienced barbers bring decades of expertise and passion to every cut.", icon: Award
|
||||
},
|
||||
{
|
||||
title: "Premium Products", description: "We use only the finest grooming products and tools from prestigious brands worldwide.", icon: Sparkles
|
||||
},
|
||||
{
|
||||
title: "Timeless Elegance", description: "Every service delivers sophisticated style that stands the test of time.", icon: Zap
|
||||
}
|
||||
{ title: "Master Craftsmen", description: "Our experienced barbers bring decades of expertise and passion to every cut.", icon: Award },
|
||||
{ title: "Premium Products", description: "We use only the finest grooming products and tools from prestigious brands worldwide.", icon: Sparkles },
|
||||
{ title: "Timeless Elegance", description: "Every service delivers sophisticated style that stands the test of time.", icon: Zap }
|
||||
]}
|
||||
buttons={[{ text: "Our Philosophy", href: "#services" }]}
|
||||
buttonAnimation="slide-up"
|
||||
@@ -143,18 +117,9 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
id: "1", title: "Classic Haircut & Style", tags: ["Popular", "45 min"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/haircut-service.jpg", imageAlt: "Professional haircut service"
|
||||
},
|
||||
{
|
||||
id: "2", title: "Beard Grooming & Sculpting", tags: ["Premium", "30 min"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/beard-grooming.jpg", imageAlt: "Beard grooming service"
|
||||
},
|
||||
{
|
||||
id: "3", title: "Traditional Hot Shave", tags: ["Luxury", "35 min"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/hot-shave-service.jpg", imageAlt: "Luxury shave service"
|
||||
}
|
||||
{ id: "1", title: "Classic Haircut & Style", tags: ["Popular", "45 min"], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/haircut-service.jpg", imageAlt: "Professional haircut service" },
|
||||
{ id: "2", title: "Beard Grooming & Sculpting", tags: ["Premium", "30 min"], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/beard-grooming.jpg", imageAlt: "Beard grooming service" },
|
||||
{ id: "3", title: "Traditional Hot Shave", tags: ["Luxury", "35 min"], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/hot-shave-service.jpg", imageAlt: "Luxury shave service" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -169,11 +134,7 @@ export default function LandingPage() {
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
||||
{galleryImages.map((image) => (
|
||||
<div key={image.id} className="relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
|
||||
<img
|
||||
src={image.src}
|
||||
alt={image.alt}
|
||||
className="w-full h-64 object-cover hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
<img src={image.src} alt={image.alt} className="w-full h-64 object-cover hover:scale-105 transition-transform duration-300" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -189,15 +150,9 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
membersAnimation="slide-up"
|
||||
members={[
|
||||
{
|
||||
id: "1", name: "Marcus Valentino", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/marcus-valentino.jpg", imageAlt: "Marcus Valentino"
|
||||
},
|
||||
{
|
||||
id: "2", name: "Antonio Silva", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/antonio-silva.jpg", imageAlt: "Antonio Silva"
|
||||
},
|
||||
{
|
||||
id: "3", name: "Giovanni Rossi", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/giovanni-rossi.jpg", imageAlt: "Giovanni Rossi"
|
||||
}
|
||||
{ id: "1", name: "Marcus Valentino", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/marcus-valentino.jpg", imageAlt: "Marcus Valentino" },
|
||||
{ id: "2", name: "Antonio Silva", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/antonio-silva.jpg", imageAlt: "Antonio Silva" },
|
||||
{ id: "3", name: "Giovanni Rossi", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/giovanni-rossi.jpg", imageAlt: "Giovanni Rossi" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -210,18 +165,10 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", title: "Excellence in Every Detail", quote: "The precision and attention to detail at Elegante is unmatched. My haircuts are always perfect, and the service is incredibly welcoming.", name: "David Chen", role: "Executive Director", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/david-chen.jpg", imageAlt: "David Chen"
|
||||
},
|
||||
{
|
||||
id: "2", title: "A True Grooming Experience", quote: "Finally found a barber shop that respects tradition while embracing modern style. The hot shave experience is absolutely luxurious.", name: "James Mitchell", role: "Entrepreneur", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/james-mitchell.jpg", imageAlt: "James Mitchell"
|
||||
},
|
||||
{
|
||||
id: "3", title: "Exceptional Craftsmanship", quote: "The barbers here are true artists. They understand what you want and deliver beyond expectations every single time.", name: "Robert Thompson", role: "Business Owner", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/robert-thompson.jpg", imageAlt: "Robert Thompson"
|
||||
},
|
||||
{
|
||||
id: "4", title: "Worth Every Penny", quote: "Premium pricing for premium service. The atmosphere, expertise, and results make Elegante the only barber shop I visit.", name: "Michael Anderson", role: "Professional", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/michael-anderson.jpg", imageAlt: "Michael Anderson"
|
||||
}
|
||||
{ id: "1", title: "Excellence in Every Detail", quote: "The precision and attention to detail at Elegante is unmatched. My haircuts are always perfect, and the service is incredibly welcoming.", name: "David Chen", role: "Executive Director", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/david-chen.jpg", imageAlt: "David Chen" },
|
||||
{ id: "2", title: "A True Grooming Experience", quote: "Finally found a barber shop that respects tradition while embracing modern style. The hot shave experience is absolutely luxurious.", name: "James Mitchell", role: "Entrepreneur", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/james-mitchell.jpg", imageAlt: "James Mitchell" },
|
||||
{ id: "3", title: "Exceptional Craftsmanship", quote: "The barbers here are true artists. They understand what you want and deliver beyond expectations every single time.", name: "Robert Thompson", role: "Business Owner", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/robert-thompson.jpg", imageAlt: "Robert Thompson" },
|
||||
{ id: "4", title: "Worth Every Penny", quote: "Premium pricing for premium service. The atmosphere, expertise, and results make Elegante the only barber shop I visit.", name: "Michael Anderson", role: "Professional", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/michael-anderson.jpg", imageAlt: "Michael Anderson" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -235,24 +182,12 @@ export default function LandingPage() {
|
||||
animationType="smooth"
|
||||
faqsAnimation="slide-up"
|
||||
faqs={[
|
||||
{
|
||||
id: "1", title: "How do I book an appointment?", content: "You can book an appointment through our Square booking system or call us directly. We recommend booking in advance, especially for weekends, as our master barbers maintain a full schedule."
|
||||
},
|
||||
{
|
||||
id: "2", title: "What is the average appointment duration?", content: "Classic haircuts take 45 minutes, beard grooming 30 minutes, and traditional hot shaves 35 minutes. We never rush to ensure perfection in every service."
|
||||
},
|
||||
{
|
||||
id: "3", title: "Do you offer walk-in services?", content: "While we accommodate walk-ins when possible, we strongly encourage appointments to guarantee your preferred time slot and barber."
|
||||
},
|
||||
{
|
||||
id: "4", title: "What products do you use?", content: "We exclusively use premium grooming products from prestigious international brands to ensure the best results for your hair and skin."
|
||||
},
|
||||
{
|
||||
id: "5", title: "Are you suitable for first-time clients?", content: "Absolutely! We welcome gentlemen of all grooming experience levels. Our barbers will consult with you to understand your style preferences and deliver exactly what you envision."
|
||||
},
|
||||
{
|
||||
id: "6", title: "What is your cancellation policy?", content: "We require 24 hours notice for cancellations. Late cancellations may incur a fee. We appreciate your understanding as we keep slots reserved for our valued clients."
|
||||
}
|
||||
{ id: "1", title: "How do I book an appointment?", content: "You can book an appointment through our Square booking system or call us directly. We recommend booking in advance, especially for weekends, as our master barbers maintain a full schedule." },
|
||||
{ id: "2", title: "What is the average appointment duration?", content: "Classic haircuts take 45 minutes, beard grooming 30 minutes, and traditional hot shaves 35 minutes. We never rush to ensure perfection in every service." },
|
||||
{ id: "3", title: "Do you offer walk-in services?", content: "While we accommodate walk-ins when possible, we strongly encourage appointments to guarantee your preferred time slot and barber." },
|
||||
{ id: "4", title: "What products do you use?", content: "We exclusively use premium grooming products from prestigious international brands to ensure the best results for your hair and skin." },
|
||||
{ id: "5", title: "Are you suitable for first-time clients?", content: "Absolutely! We welcome gentlemen of all grooming experience levels. Our barbers will consult with you to understand your style preferences and deliver exactly what you envision." },
|
||||
{ id: "6", title: "What is your cancellation policy?", content: "We require 24 hours notice for cancellations. Late cancellations may incur a fee. We appreciate your understanding as we keep slots reserved for our valued clients." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -280,31 +215,9 @@ export default function LandingPage() {
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Navigate", items: [
|
||||
{ label: "Home", href: "#hero" },
|
||||
{ label: "Services", href: "#services" },
|
||||
{ label: "Gallery", href: "#gallery" },
|
||||
{ label: "Team", href: "#team" },
|
||||
{ label: "About", href: "#about" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Connect", items: [
|
||||
{ label: "Contact", href: "#contact" },
|
||||
{ label: "Book Now", href: "https://square.com/appointments" },
|
||||
{ label: "Testimonials", href: "#testimonials" },
|
||||
{ label: "FAQ", href: "#faq" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Cancellation Policy", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" }
|
||||
]
|
||||
}
|
||||
{ title: "Navigate", items: [{ label: "Home", href: "#hero" }, { label: "Services", href: "#services" }, { label: "Gallery", href: "#gallery" }, { label: "Team", href: "#team" }, { label: "About", href: "#about" }] },
|
||||
{ title: "Connect", items: [{ label: "Contact", href: "#contact" }, { label: "Book Now", href: "https://square.com/appointments" }, { label: "Testimonials", href: "#testimonials" }, { label: "FAQ", href: "#faq" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }, { label: "Cancellation Policy", href: "#" }, { label: "Cookie Policy", href: "#" }] }
|
||||
]}
|
||||
bottomLeftText="© 2025 Elegante Barbershop. Crafted for the discerning gentleman."
|
||||
bottomRightText="Luxury Grooming Since 1995"
|
||||
@@ -312,4 +225,4 @@ export default function LandingPage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user