Merge version_1 into main #2
@@ -23,7 +23,7 @@ export default function ContactPage() {
|
||||
borderRadius="pill"
|
||||
contentWidth="compact"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="grid"
|
||||
background="circleGradient"
|
||||
cardStyle="layered-gradient"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="glass"
|
||||
@@ -43,15 +43,11 @@ export default function ContactPage() {
|
||||
animationType="entrance-slide"
|
||||
buttons={[
|
||||
{
|
||||
text: "Call (559) 596-9222",
|
||||
href: "tel:+15595969222",
|
||||
},
|
||||
text: "Call (559) 596-9222", href: "tel:+15595969222"},
|
||||
{
|
||||
text: "Visit Us",
|
||||
href: "#footer",
|
||||
},
|
||||
text: "Visit Us", href: "#footer"},
|
||||
]}
|
||||
background={{ variant: "grid" }}
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
@@ -63,19 +59,13 @@ export default function ContactPage() {
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Facebook,
|
||||
href: "https://facebook.com",
|
||||
ariaLabel: "Facebook",
|
||||
},
|
||||
href: "https://facebook.com", ariaLabel: "Facebook"},
|
||||
{
|
||||
icon: Instagram,
|
||||
href: "https://instagram.com",
|
||||
ariaLabel: "Instagram",
|
||||
},
|
||||
href: "https://instagram.com", ariaLabel: "Instagram"},
|
||||
{
|
||||
icon: Phone,
|
||||
href: "tel:+15595969222",
|
||||
ariaLabel: "Call Us",
|
||||
},
|
||||
href: "tel:+15595969222", ariaLabel: "Call Us"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -18,9 +18,7 @@ export default function GalleryPage() {
|
||||
];
|
||||
|
||||
const navButton = {
|
||||
text: "Book a Cut",
|
||||
href: "contact",
|
||||
};
|
||||
text: "Book a Cut", href: "contact"};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
@@ -29,7 +27,7 @@ export default function GalleryPage() {
|
||||
borderRadius="pill"
|
||||
contentWidth="compact"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="grid"
|
||||
background="circleGradient"
|
||||
cardStyle="layered-gradient"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="glass"
|
||||
@@ -51,48 +49,30 @@ export default function GalleryPage() {
|
||||
tagAnimation="slide-up"
|
||||
features={[
|
||||
{
|
||||
title: "Classic Haircuts",
|
||||
description: "Timeless styles executed with precision. Clean lines and expert fading showcase our traditional barbering expertise.",
|
||||
icon: Scissors,
|
||||
title: "Classic Haircuts", description: "Timeless styles executed with precision. Clean lines and expert fading showcase our traditional barbering expertise.", icon: Scissors,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ixcvty&_wi=3",
|
||||
imageAlt: "Professional haircut with clean lines",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ixcvty", imageAlt: "Professional haircut with clean lines"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rjxg28&_wi=3",
|
||||
imageAlt: "Detailed haircut styling",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rjxg28", imageAlt: "Detailed haircut styling"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Skin Fades",
|
||||
description: "Modern precision fades with smooth blending. Our signature service delivering ultra-clean, sharp results.",
|
||||
icon: Scissors,
|
||||
title: "Skin Fades", description: "Modern precision fades with smooth blending. Our signature service delivering ultra-clean, sharp results.", icon: Scissors,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=oif0sf&_wi=3",
|
||||
imageAlt: "Clean skin fade haircut",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=oif0sf", imageAlt: "Clean skin fade haircut"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ru3uks&_wi=3",
|
||||
imageAlt: "Professional fade styling",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ru3uks", imageAlt: "Professional fade styling"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Beard Work",
|
||||
description: "Sculpted beard designs with meticulous attention to shape and texture. Custom beard styling for every face.",
|
||||
icon: Scissors,
|
||||
title: "Beard Work", description: "Sculpted beard designs with meticulous attention to shape and texture. Custom beard styling for every face.", icon: Scissors,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=l3f3dk&_wi=3",
|
||||
imageAlt: "Professional beard trim",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=l3f3dk", imageAlt: "Professional beard trim"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zp9zuw&_wi=3",
|
||||
imageAlt: "Detailed beard styling",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zp9zuw", imageAlt: "Detailed beard styling"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
@@ -101,9 +81,7 @@ export default function GalleryPage() {
|
||||
useInvertedBackground={true}
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Your Cut",
|
||||
href: "contact",
|
||||
},
|
||||
text: "Book Your Cut", href: "contact"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
@@ -115,17 +93,12 @@ export default function GalleryPage() {
|
||||
animationType="entrance-slide"
|
||||
buttons={[
|
||||
{
|
||||
text: "Call (559) 596-9222",
|
||||
href: "tel:+15595969222",
|
||||
},
|
||||
text: "Call (559) 596-9222", href: "tel:+15595969222"},
|
||||
{
|
||||
text: "Visit Us",
|
||||
href: "#footer",
|
||||
},
|
||||
text: "Visit Us", href: "#footer"},
|
||||
]}
|
||||
background={{
|
||||
variant: "grid",
|
||||
}}
|
||||
variant: "plain"}}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
@@ -137,19 +110,13 @@ export default function GalleryPage() {
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Facebook,
|
||||
href: "https://facebook.com",
|
||||
ariaLabel: "Facebook",
|
||||
},
|
||||
href: "https://facebook.com", ariaLabel: "Facebook"},
|
||||
{
|
||||
icon: Instagram,
|
||||
href: "https://instagram.com",
|
||||
ariaLabel: "Instagram",
|
||||
},
|
||||
href: "https://instagram.com", ariaLabel: "Instagram"},
|
||||
{
|
||||
icon: Phone,
|
||||
href: "tel:+15595969222",
|
||||
ariaLabel: "Call Us",
|
||||
},
|
||||
href: "tel:+15595969222", ariaLabel: "Call Us"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
246
src/app/page.tsx
246
src/app/page.tsx
@@ -10,7 +10,7 @@ import TestimonialCardThirteen from "@/components/sections/testimonial/Testimoni
|
||||
import ContactText from "@/components/sections/contact/ContactText";
|
||||
import FooterCard from "@/components/sections/footer/FooterCard";
|
||||
import Link from "next/link";
|
||||
import { Scissors, Sparkles, Award, Home, Clock, Star, Facebook, Instagram, Phone } from "lucide-react";
|
||||
import { Scissors, Sparkles, Award, Home, Clock, Star, Facebook, Instagram, Phone, Zap, Barcode, Users, Maximize } from "lucide-react";
|
||||
|
||||
export default function HomePage() {
|
||||
const navItems = [
|
||||
@@ -22,9 +22,7 @@ export default function HomePage() {
|
||||
];
|
||||
|
||||
const navButton = {
|
||||
text: "Book a Cut",
|
||||
href: "contact",
|
||||
};
|
||||
text: "Book a Cut", href: "contact"};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
@@ -33,7 +31,7 @@ export default function HomePage() {
|
||||
borderRadius="pill"
|
||||
contentWidth="compact"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="grid"
|
||||
background="circleGradient"
|
||||
cardStyle="layered-gradient"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="glass"
|
||||
@@ -59,63 +57,36 @@ export default function HomePage() {
|
||||
mediaAnimation="slide-up"
|
||||
testimonials={[
|
||||
{
|
||||
name: "Marcus T.",
|
||||
handle: "Regular Customer",
|
||||
testimonial: "Friendly environment and great service. Best barbers in town!",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ns1qmq&_wi=1",
|
||||
},
|
||||
name: "Marcus T.", handle: "Regular Customer", testimonial: "Friendly environment and great service. Best barbers in town!", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ns1qmq"},
|
||||
{
|
||||
name: "David L.",
|
||||
handle: "Regular Customer",
|
||||
testimonial: "Best place in Orosi for a clean fade. Highly recommend!",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=wudi38&_wi=1",
|
||||
},
|
||||
name: "David L.", handle: "Regular Customer", testimonial: "Best place in Orosi for a clean fade. Highly recommend!", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=wudi38"},
|
||||
{
|
||||
name: "James R.",
|
||||
handle: "Regular Customer",
|
||||
testimonial: "You don't wait long and the barbers are great. Always professional.",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fcia99&_wi=1",
|
||||
},
|
||||
name: "James R.", handle: "Regular Customer", testimonial: "You don't wait long and the barbers are great. Always professional.", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fcia99"},
|
||||
{
|
||||
name: "Antonio G.",
|
||||
handle: "Regular Customer",
|
||||
testimonial: "Excellent attention to detail and friendly crew. Worth every penny!",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3psxnm&_wi=1",
|
||||
},
|
||||
name: "Antonio G.", handle: "Regular Customer", testimonial: "Excellent attention to detail and friendly crew. Worth every penny!", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3psxnm"},
|
||||
]}
|
||||
testimonialRotationInterval={5000}
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{
|
||||
text: "Book a Cut",
|
||||
href: "contact",
|
||||
},
|
||||
text: "Book a Cut", href: "contact"},
|
||||
{
|
||||
text: "View Gallery",
|
||||
href: "/gallery",
|
||||
},
|
||||
text: "View Gallery", href: "/gallery"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
background={{
|
||||
variant: "grid",
|
||||
}}
|
||||
variant: "plain"}}
|
||||
avatars={[
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=316n84",
|
||||
alt: "Customer",
|
||||
},
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=316n84", alt: "Customer"},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zany5p",
|
||||
alt: "Customer",
|
||||
},
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zany5p", alt: "Customer"},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4jxi6m",
|
||||
alt: "Customer",
|
||||
},
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4jxi6m", alt: "Customer"},
|
||||
]}
|
||||
avatarText="4.9★ - 34 Reviews"
|
||||
/>
|
||||
@@ -130,78 +101,48 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
features={[
|
||||
{
|
||||
title: "Haircut",
|
||||
description: "Classic haircuts tailored to your style. Expert fading and detailing for a sharp, polished look.",
|
||||
icon: Scissors,
|
||||
title: "Haircut", description: "Classic haircuts tailored to your style. Expert fading and detailing for a sharp, polished look.", icon: Scissors,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ixcvty&_wi=1",
|
||||
imageAlt: "Professional haircut with clean lines",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ixcvty", imageAlt: "Professional haircut with clean lines"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rjxg28&_wi=1",
|
||||
imageAlt: "Detailed haircut styling",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rjxg28", imageAlt: "Detailed haircut styling"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Skin Fade",
|
||||
description: "Precision skin fades with smooth blending. Our specialty for an ultra-clean, modern look.",
|
||||
icon: Scissors,
|
||||
title: "Skin Fade", description: "Precision skin fades with smooth blending. Our specialty for an ultra-clean, modern look.", icon: Zap,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=oif0sf&_wi=1",
|
||||
imageAlt: "Clean skin fade haircut",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=oif0sf", imageAlt: "Clean skin fade haircut"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ru3uks&_wi=1",
|
||||
imageAlt: "Professional fade styling",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ru3uks", imageAlt: "Professional fade styling"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Beard Trim",
|
||||
description: "Sculpted beard trims with careful attention to shape and texture. Keep your beard looking sharp.",
|
||||
icon: Scissors,
|
||||
title: "Beard Trim", description: "Sculpted beard trims with careful attention to shape and texture. Keep your beard looking sharp.", icon: Barcode,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=l3f3dk&_wi=1",
|
||||
imageAlt: "Professional beard trim",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=l3f3dk", imageAlt: "Professional beard trim"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zp9zuw&_wi=1",
|
||||
imageAlt: "Detailed beard styling",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zp9zuw", imageAlt: "Detailed beard styling"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Kids Haircut",
|
||||
description: "Friendly, welcoming environment for kids. Quick, comfortable cuts designed for young customers.",
|
||||
icon: Scissors,
|
||||
title: "Kids Haircut", description: "Friendly, welcoming environment for kids. Quick, comfortable cuts designed for young customers.", icon: Users,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=bb3awj&_wi=1",
|
||||
imageAlt: "Kids haircut service",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=bb3awj", imageAlt: "Kids haircut service"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=skngot&_wi=1",
|
||||
imageAlt: "Professional kids styling",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=skngot", imageAlt: "Professional kids styling"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Line Up",
|
||||
description: "Sharp, precise edge work to perfect your look. Quick line-up touch-ups available.",
|
||||
icon: Scissors,
|
||||
title: "Line Up", description: "Sharp, precise edge work to perfect your look. Quick line-up touch-ups available.", icon: Maximize,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=v6ubcf&_wi=1",
|
||||
imageAlt: "Precision line-up service",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=v6ubcf", imageAlt: "Precision line-up service"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ry8yfa&_wi=1",
|
||||
imageAlt: "Detailed edge work",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ry8yfa", imageAlt: "Detailed edge work"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
@@ -210,9 +151,7 @@ export default function HomePage() {
|
||||
useInvertedBackground={true}
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "contact",
|
||||
},
|
||||
text: "Book Now", href: "contact"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
@@ -227,26 +166,18 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Experienced Barbers",
|
||||
description: "Our team brings years of expertise in classic and modern barbering techniques.",
|
||||
icon: Award,
|
||||
title: "Experienced Barbers", description: "Our team brings years of expertise in classic and modern barbering techniques.", icon: Award,
|
||||
},
|
||||
{
|
||||
title: "Welcoming Environment",
|
||||
description: "Step into a comfortable, clean shop where you'll feel right at home.",
|
||||
icon: Home,
|
||||
title: "Welcoming Environment", description: "Step into a comfortable, clean shop where you'll feel right at home.", icon: Home,
|
||||
},
|
||||
{
|
||||
title: "Quick Service",
|
||||
description: "Efficient, professional cuts without the long wait. Most customers are in and out in 30 minutes.",
|
||||
icon: Clock,
|
||||
title: "Quick Service", description: "Efficient, professional cuts without the long wait. Most customers are in and out in 30 minutes.", icon: Clock,
|
||||
},
|
||||
{
|
||||
title: "Loyal Community",
|
||||
description: "Serving Orosi families and friends for years. We value our regular customers.",
|
||||
},
|
||||
title: "Loyal Community", description: "Serving Orosi families and friends for years. We value our regular customers."},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=d4yvfm&_wi=1"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=d4yvfm"
|
||||
imageAlt="Gunthers Barbershop interior with classic barber chairs"
|
||||
mediaAnimation="slide-up"
|
||||
imagePosition="right"
|
||||
@@ -254,9 +185,7 @@ export default function HomePage() {
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{
|
||||
text: "Visit Us Today",
|
||||
href: "/contact",
|
||||
},
|
||||
text: "Visit Us Today", href: "/contact"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
@@ -269,25 +198,13 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
value: "4.9★",
|
||||
description: "Average rating from 34 verified customer reviews on Google and local directories.",
|
||||
},
|
||||
id: "1", value: "4.9★", description: "Average rating from 34 verified customer reviews on Google and local directories."},
|
||||
{
|
||||
id: "2",
|
||||
value: "1000+",
|
||||
description: "Satisfied customers served. Many are loyal regulars who return every month.",
|
||||
},
|
||||
id: "2", value: "1000+", description: "Satisfied customers served. Many are loyal regulars who return every month."},
|
||||
{
|
||||
id: "3",
|
||||
value: "15+",
|
||||
description: "Years of combined barbering experience from our professional team members.",
|
||||
},
|
||||
id: "3", value: "15+", description: "Years of combined barbering experience from our professional team members."},
|
||||
{
|
||||
id: "4",
|
||||
value: "30min",
|
||||
description: "Average service time. Quick, efficient cuts without sacrificing quality.",
|
||||
},
|
||||
id: "4", value: "30min", description: "Average service time. Quick, efficient cuts without sacrificing quality."},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
useInvertedBackground={true}
|
||||
@@ -303,53 +220,23 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Marcus Thompson",
|
||||
handle: "Regular Customer",
|
||||
testimonial: "Friendly environment and great service. I've been coming here for 3 years and the quality never dips. Highly recommend!",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ns1qmq&_wi=2",
|
||||
},
|
||||
id: "1", name: "Marcus Thompson", handle: "Regular Customer", testimonial: "Friendly environment and great service. I've been coming here for 3 years and the quality never dips. Highly recommend!", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ns1qmq"},
|
||||
{
|
||||
id: "2",
|
||||
name: "David Lopez",
|
||||
handle: "Regular Customer",
|
||||
testimonial: "Best place in Orosi for a clean fade. The precision and attention to detail is unmatched. Worth every penny!",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=wudi38&_wi=2",
|
||||
},
|
||||
id: "2", name: "David Lopez", handle: "Regular Customer", testimonial: "Best place in Orosi for a clean fade. The precision and attention to detail is unmatched. Worth every penny!", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=wudi38"},
|
||||
{
|
||||
id: "3",
|
||||
name: "James Rodriguez",
|
||||
handle: "Regular Customer",
|
||||
testimonial: "You don't wait long and the barbers are great. Quick turnaround without compromising quality. Love it!",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fcia99&_wi=2",
|
||||
},
|
||||
id: "3", name: "James Rodriguez", handle: "Regular Customer", testimonial: "You don't wait long and the barbers are great. Quick turnaround without compromising quality. Love it!", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fcia99"},
|
||||
{
|
||||
id: "4",
|
||||
name: "Antonio Garcia",
|
||||
handle: "Regular Customer",
|
||||
testimonial: "Excellent attention to detail and friendly crew. Always professional and welcoming. My go-to spot!",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3psxnm&_wi=2",
|
||||
},
|
||||
id: "4", name: "Antonio Garcia", handle: "Regular Customer", testimonial: "Excellent attention to detail and friendly crew. Always professional and welcoming. My go-to spot!", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3psxnm"},
|
||||
{
|
||||
id: "5",
|
||||
name: "Carlos Mendez",
|
||||
handle: "Regular Customer",
|
||||
testimonial: "Best barbers in town. They take time to understand what you want and execute perfectly every time.",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dzmkrc&_wi=1",
|
||||
},
|
||||
id: "5", name: "Carlos Mendez", handle: "Regular Customer", testimonial: "Best barbers in town. They take time to understand what you want and execute perfectly every time.", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dzmkrc"},
|
||||
{
|
||||
id: "6",
|
||||
name: "Miguel Santos",
|
||||
handle: "Regular Customer",
|
||||
testimonial: "Clean shop, skilled barbers, fair prices. This is THE place to go for a quality cut in Orosi.",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=68nmev&_wi=1",
|
||||
},
|
||||
id: "6", name: "Miguel Santos", handle: "Regular Customer", testimonial: "Clean shop, skilled barbers, fair prices. This is THE place to go for a quality cut in Orosi.", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=68nmev"},
|
||||
]}
|
||||
showRating={true}
|
||||
animationType="slide-up"
|
||||
@@ -365,17 +252,12 @@ export default function HomePage() {
|
||||
animationType="entrance-slide"
|
||||
buttons={[
|
||||
{
|
||||
text: "Call (559) 596-9222",
|
||||
href: "tel:+15595969222",
|
||||
},
|
||||
text: "Call (559) 596-9222", href: "tel:+15595969222"},
|
||||
{
|
||||
text: "Visit Us",
|
||||
href: "#footer",
|
||||
},
|
||||
text: "Visit Us", href: "#footer"},
|
||||
]}
|
||||
background={{
|
||||
variant: "grid",
|
||||
}}
|
||||
variant: "plain"}}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
@@ -387,19 +269,13 @@ export default function HomePage() {
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Facebook,
|
||||
href: "https://facebook.com",
|
||||
ariaLabel: "Facebook",
|
||||
},
|
||||
href: "https://facebook.com", ariaLabel: "Facebook"},
|
||||
{
|
||||
icon: Instagram,
|
||||
href: "https://instagram.com",
|
||||
ariaLabel: "Instagram",
|
||||
},
|
||||
href: "https://instagram.com", ariaLabel: "Instagram"},
|
||||
{
|
||||
icon: Phone,
|
||||
href: "tel:+15595969222",
|
||||
ariaLabel: "Call Us",
|
||||
},
|
||||
href: "tel:+15595969222", ariaLabel: "Call Us"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -25,7 +25,7 @@ export default function ServicesPage() {
|
||||
borderRadius="pill"
|
||||
contentWidth="compact"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="grid"
|
||||
background="circleGradient"
|
||||
cardStyle="layered-gradient"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="glass"
|
||||
@@ -48,78 +48,48 @@ export default function ServicesPage() {
|
||||
tagAnimation="slide-up"
|
||||
features={[
|
||||
{
|
||||
title: "Haircut",
|
||||
description: "Classic haircuts tailored to your style. Expert fading and detailing for a sharp, polished look.",
|
||||
icon: Scissors,
|
||||
title: "Haircut", description: "Classic haircuts tailored to your style. Expert fading and detailing for a sharp, polished look.", icon: Scissors,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ixcvty&_wi=2",
|
||||
imageAlt: "Professional haircut with clean lines",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ixcvty", imageAlt: "Professional haircut with clean lines"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rjxg28&_wi=2",
|
||||
imageAlt: "Detailed haircut styling",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rjxg28", imageAlt: "Detailed haircut styling"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Skin Fade",
|
||||
description: "Precision skin fades with smooth blending. Our specialty for an ultra-clean, modern look.",
|
||||
icon: Zap,
|
||||
title: "Skin Fade", description: "Precision skin fades with smooth blending. Our specialty for an ultra-clean, modern look.", icon: Zap,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=oif0sf&_wi=2",
|
||||
imageAlt: "Clean skin fade haircut",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=oif0sf", imageAlt: "Clean skin fade haircut"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ru3uks&_wi=2",
|
||||
imageAlt: "Professional fade styling",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ru3uks", imageAlt: "Professional fade styling"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Beard Trim",
|
||||
description: "Sculpted beard trims with careful attention to shape and texture. Keep your beard looking sharp.",
|
||||
icon: Barcode,
|
||||
title: "Beard Trim", description: "Sculpted beard trims with careful attention to shape and texture. Keep your beard looking sharp.", icon: Barcode,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=l3f3dk&_wi=2",
|
||||
imageAlt: "Professional beard trim",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=l3f3dk", imageAlt: "Professional beard trim"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zp9zuw&_wi=2",
|
||||
imageAlt: "Detailed beard styling",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zp9zuw", imageAlt: "Detailed beard styling"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Kids Haircut",
|
||||
description: "Friendly, welcoming environment for kids. Quick, comfortable cuts designed for young customers.",
|
||||
icon: Users,
|
||||
title: "Kids Haircut", description: "Friendly, welcoming environment for kids. Quick, comfortable cuts designed for young customers.", icon: Users,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=bb3awj&_wi=2",
|
||||
imageAlt: "Kids haircut service",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=bb3awj", imageAlt: "Kids haircut service"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=skngot&_wi=2",
|
||||
imageAlt: "Professional kids styling",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=skngot", imageAlt: "Professional kids styling"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Line Up",
|
||||
description: "Sharp, precise edge work to perfect your look. Quick line-up touch-ups available.",
|
||||
icon: Maximize,
|
||||
title: "Line Up", description: "Sharp, precise edge work to perfect your look. Quick line-up touch-ups available.", icon: Maximize,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=v6ubcf&_wi=2",
|
||||
imageAlt: "Precision line-up service",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=v6ubcf", imageAlt: "Precision line-up service"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ry8yfa&_wi=2",
|
||||
imageAlt: "Detailed edge work",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ry8yfa", imageAlt: "Detailed edge work"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
@@ -140,22 +110,16 @@ export default function ServicesPage() {
|
||||
tagAnimation="slide-up"
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Master Barbers",
|
||||
description: "Highly skilled professionals trained in traditional and contemporary barbering techniques.",
|
||||
icon: Award,
|
||||
title: "Master Barbers", description: "Highly skilled professionals trained in traditional and contemporary barbering techniques.", icon: Award,
|
||||
},
|
||||
{
|
||||
title: "Premium Tools",
|
||||
description: "We use only the finest clippers, razors, and products to ensure the best results.",
|
||||
icon: Scissors,
|
||||
title: "Premium Tools", description: "We use only the finest clippers, razors, and products to ensure the best results.", icon: Scissors,
|
||||
},
|
||||
{
|
||||
title: "Personal Attention",
|
||||
description: "Every cut is customized to your face shape, hair type, and personal style preferences.",
|
||||
icon: Home,
|
||||
title: "Personal Attention", description: "Every cut is customized to your face shape, hair type, and personal style preferences.", icon: Home,
|
||||
},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=d4yvfm&_wi=2"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=d4yvfm"
|
||||
imageAlt="Professional barbershop environment"
|
||||
mediaAnimation="slide-up"
|
||||
imagePosition="left"
|
||||
@@ -174,7 +138,7 @@ export default function ServicesPage() {
|
||||
{ text: "Call (559) 596-9222", href: "tel:+15595969222" },
|
||||
{ text: "Back Home", href: "/" },
|
||||
]}
|
||||
background={{ variant: "grid" }}
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -1,51 +1,41 @@
|
||||
"use client";
|
||||
import React, { SVGProps } from "react";
|
||||
|
||||
import { memo } from "react";
|
||||
import useSvgTextLogo from "./useSvgTextLogo";
|
||||
import { cls } from "@/lib/utils";
|
||||
|
||||
interface SvgTextLogoProps {
|
||||
logoText: string;
|
||||
adjustHeightFactor?: number;
|
||||
verticalAlign?: "top" | "center";
|
||||
className?: string;
|
||||
export interface SvgTextLogoProps extends SVGProps<SVGSVGElement> {
|
||||
text: string;
|
||||
fontSize?: number;
|
||||
fontWeight?: number | string;
|
||||
fontFamily?: string;
|
||||
letterSpacing?: number;
|
||||
}
|
||||
|
||||
const SvgTextLogo = memo<SvgTextLogoProps>(function SvgTextLogo({
|
||||
logoText,
|
||||
adjustHeightFactor,
|
||||
verticalAlign = "top",
|
||||
className = "",
|
||||
}) {
|
||||
const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor);
|
||||
|
||||
export function SvgTextLogo({
|
||||
text,
|
||||
fontSize = 24,
|
||||
fontWeight = 700,
|
||||
fontFamily = "system-ui, -apple-system, sans-serif", letterSpacing = 0,
|
||||
...props
|
||||
}: SvgTextLogoProps) {
|
||||
return (
|
||||
<svg
|
||||
ref={svgRef}
|
||||
viewBox={viewBox}
|
||||
className={cls("w-full", className)}
|
||||
style={{ aspectRatio: aspectRatio }}
|
||||
preserveAspectRatio="none"
|
||||
role="img"
|
||||
aria-label={`${logoText} logo`}
|
||||
viewBox="0 0 200 50"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<text
|
||||
ref={textRef}
|
||||
x="0"
|
||||
y={verticalAlign === "center" ? "50%" : "0"}
|
||||
className="font-bold fill-current"
|
||||
style={{
|
||||
fontSize: "20px",
|
||||
letterSpacing: "-0.02em",
|
||||
dominantBaseline: verticalAlign === "center" ? "middle" : "text-before-edge"
|
||||
}}
|
||||
x="50%"
|
||||
y="50%"
|
||||
textAnchor="middle"
|
||||
dominantBaseline="central"
|
||||
fontSize={fontSize}
|
||||
fontWeight={fontWeight}
|
||||
fontFamily={fontFamily}
|
||||
letterSpacing={letterSpacing}
|
||||
fill="currentColor"
|
||||
>
|
||||
{logoText}
|
||||
{text}
|
||||
</text>
|
||||
</svg>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
SvgTextLogo.displayName = "SvgTextLogo";
|
||||
|
||||
export default SvgTextLogo;
|
||||
export default SvgTextLogo;
|
||||
Reference in New Issue
Block a user