Merge version_3 into main #6

Merged
bender merged 2 commits from version_3 into main 2026-03-09 22:15:14 +00:00
2 changed files with 26 additions and 137 deletions

View File

@@ -1,17 +1,11 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import { Inter } from "next/font/google";
import "./globals.css";
const geist = Geist({
variable: "--font-geist-sans", subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono", subsets: ["latin"],
});
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Florida Fadez - Fort Lauderdale Barbershop", description: "Premium barbershop offering precision fades, clean cuts, and professional grooming at Gateway Shopping Center in Fort Lauderdale."};
title: "Florida Fadez - Fort Lauderdale Barbershop", description: "Premium barbershop in Fort Lauderdale offering precision fades, sharp lineups, and professional grooming services."};
export default function RootLayout({
children,
@@ -19,113 +13,8 @@ export default function RootLayout({
children: React.ReactNode;
}) {
return (
<html lang="en" suppressHydrationWarning>
<body className={`${geist.variable} ${geistMono.variable}`}>
{children}
<script>
{`
const style = document.createElement('style');
style.textContent = \`
@keyframes barberPole {
0% {
background-position: 0% 0%;
}
100% {
background-position: 200% 0%;
}
}
.barber-pole-loading {
background: linear-gradient(
45deg,
var(--primary-cta) 25%,
var(--card) 25%,
var(--card) 50%,
var(--primary-cta) 50%,
var(--primary-cta) 75%,
var(--card) 75%,
var(--card)
);
background-size: 40px 40px;
animation: barberPole 3s linear infinite;
}
@keyframes fadeInSmooth {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideUpElegant {
from {
opacity: 0;
transform: translateY(24px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes scaleInSoft {
from {
opacity: 0;
transform: scale(0.96);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes revealBlurSmooth {
from {
opacity: 0;
filter: blur(8px);
}
to {
opacity: 1;
filter: blur(0);
}
}
[data-animation="fade-in"] {
animation: fadeInSmooth 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
[data-animation="slide-up"] {
animation: slideUpElegant 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
[data-animation="scale-in"] {
animation: scaleInSoft 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
[data-animation="reveal-blur"] {
animation: revealBlurSmooth 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
[data-stagger="true"] > * {
animation-fill-mode: both;
}
[data-stagger="true"] > *:nth-child(1) { animation-delay: 0.05s; }
[data-stagger="true"] > *:nth-child(2) { animation-delay: 0.1s; }
[data-stagger="true"] > *:nth-child(3) { animation-delay: 0.15s; }
[data-stagger="true"] > *:nth-child(4) { animation-delay: 0.2s; }
[data-stagger="true"] > *:nth-child(5) { animation-delay: 0.25s; }
[data-stagger="true"] > *:nth-child(6) { animation-delay: 0.3s; }
[data-stagger="true"] > *:nth-child(n+7) { animation-delay: 0.35s; }
\`;
document.head.appendChild(style);
`}
</script>
<html lang="en">
<body className={inter.className}>{children}
<script
dangerouslySetInnerHTML={{
__html: `
@@ -1495,4 +1384,4 @@ export default function RootLayout({
</body>
</html>
);
}
}

View File

@@ -40,7 +40,7 @@ export default function LandingPage() {
/>
</div>
<div id="hero" data-section="hero" data-animation="fade-in">
<div id="hero" data-section="hero">
<HeroCentered
title="Fort Lauderdale's #1 Barbershop for Clean Fades & Fresh Cuts"
description="Precision fades, sharp lineups, and professional grooming in the heart of Fort Lauderdale. Experience premium barbershop culture at Gateway Shopping Center."
@@ -66,7 +66,7 @@ export default function LandingPage() {
/>
</div>
<div id="socialproof" data-section="socialproof" data-animation="slide-up">
<div id="socialproof" data-section="socialproof">
<SocialProofOne
title="Why Clients Choose Florida Fadez"
description="Join over 62 satisfied customers who trust us with their grooming needs"
@@ -83,30 +83,30 @@ export default function LandingPage() {
/>
</div>
<div id="services" data-section="services" data-animation="slide-up" data-stagger="true">
<div id="services" data-section="services">
<ProductCardOne
title="Our Premium Barbershop Services"
description="Precision cuts and grooming services tailored to your style. Every service performed by experienced professionals."
tag="Professional Services"
description="Professional barber services with certified technicians boasting 6+ years of experience each. Every cut and groom is performed by highly trained professionals committed to precision and customer satisfaction."
tag="Certified Barbers • Premium Quality"
tagIcon={undefined}
products={[
{
id: "1", name: "Fade Haircuts", price: "Starting at $25", imageSrc: "http://img.b2bpic.net/free-photo/funny-worker-amusing-colleague-office-telling-joke_482257-102093.jpg", imageAlt: "Professional fade haircut styling"
id: "1", name: "Fade Haircuts", price: "$25", imageSrc: "http://img.b2bpic.net/free-photo/funny-worker-amusing-colleague-office-telling-joke_482257-102093.jpg", imageAlt: "Professional fade haircut styling"
},
{
id: "2", name: "Classic Haircuts", price: "Starting at $20", imageSrc: "http://img.b2bpic.net/free-photo/combing-gray-hair-senior-client-barbershop_23-2148181900.jpg", imageAlt: "Classic barbershop haircut"
id: "2", name: "Classic Haircuts", price: "$20", imageSrc: "http://img.b2bpic.net/free-photo/combing-gray-hair-senior-client-barbershop_23-2148181900.jpg", imageAlt: "Classic barbershop haircut"
},
{
id: "3", name: "Skin Fades", price: "Starting at $30", imageSrc: "http://img.b2bpic.net/free-photo/young-man-trimming-his-beard-mirror_23-2149409583.jpg", imageAlt: "Expert skin fade technique"
id: "3", name: "Skin Fades", price: "$30", imageSrc: "http://img.b2bpic.net/free-photo/young-man-trimming-his-beard-mirror_23-2149409583.jpg", imageAlt: "Expert skin fade technique"
},
{
id: "4", name: "Beard Trim & Shape", price: "Starting at $15", imageSrc: "http://img.b2bpic.net/free-photo/crop-hands-cutting-beard-customer_23-2147778865.jpg", imageAlt: "Professional beard grooming"
id: "4", name: "Beard Trim & Shape", price: "$15", imageSrc: "http://img.b2bpic.net/free-photo/crop-hands-cutting-beard-customer_23-2147778865.jpg", imageAlt: "Professional beard grooming"
},
{
id: "5", name: "Lineups / Edge Ups", price: "Starting at $10", imageSrc: "http://img.b2bpic.net/free-photo/young-hairdresser-shaving-male-customer-s-beard-with-comb-hair-clipper-barbershop_181624-40011.jpg", imageAlt: "Sharp lineup and edge work"
id: "5", name: "Lineups / Edge Ups", price: "$10", imageSrc: "http://img.b2bpic.net/free-photo/young-hairdresser-shaving-male-customer-s-beard-with-comb-hair-clipper-barbershop_181624-40011.jpg", imageAlt: "Sharp lineup and edge work"
},
{
id: "6", name: "Hair Styling", price: "Starting at $15", imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205924.jpg", imageAlt: "Premium hair styling service"
id: "6", name: "Hair Styling", price: "$15", imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205924.jpg", imageAlt: "Premium hair styling service"
}
]}
gridVariant="three-columns-all-equal-width"
@@ -117,7 +117,7 @@ export default function LandingPage() {
/>
</div>
<div id="whyus" data-section="whyus" data-animation="reveal-blur">
<div id="whyus" data-section="whyus">
<TextAbout
tag="Why Choose Florida Fadez"
tagIcon={undefined}
@@ -132,7 +132,7 @@ export default function LandingPage() {
/>
</div>
<div id="team" data-section="team" data-animation="slide-up" data-stagger="true">
<div id="team" data-section="team">
<TeamCardTwo
title="Meet Our Expert Barbers"
description="Meet the talented professionals behind Florida Fadez. Each barber brings years of experience and passion for precision grooming."
@@ -165,14 +165,14 @@ export default function LandingPage() {
}
]}
gridVariant="four-items-2x2-equal-grid"
animationType="scale-rotate"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
ariaLabel="Meet the Florida Fadez barber team"
/>
</div>
<div id="testimonials" data-section="testimonials" data-animation="slide-up" data-stagger="true">
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwo
title="What Our Clients Say"
description="Real reviews from satisfied customers who trust Florida Fadez with their grooming"
@@ -198,14 +198,14 @@ export default function LandingPage() {
id: "6", name: "Robert Jackson", role: "Referral Customer", testimonial: "My friend recommended Florida Fadez and I'm so glad he did. Best barbers in the area. Quality work every single time. Five stars all day!", imageSrc: "http://img.b2bpic.net/free-photo/group-therapy-session-with-sticky-notes_23-2148856270.jpg", imageAlt: "Robert Jackson testimonial"
}
]}
animationType="depth-3d"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
ariaLabel="Customer testimonials for Florida Fadez Barbershop"
/>
</div>
<div id="booking" data-section="booking" data-animation="scale-in">
<div id="booking" data-section="booking">
<ContactText
text="Ready for Your Fresh Cut? Book your appointment today at Florida Fadez. Call now or schedule online for the premium barbershop experience in Fort Lauderdale."
animationType="background-highlight"
@@ -219,7 +219,7 @@ export default function LandingPage() {
/>
</div>
<div id="contact" data-section="contact" data-animation="slide-up" data-stagger="true">
<div id="contact" data-section="contact">
<MetricCardEleven
title="Visit Florida Fadez"
description="Located in the heart of Fort Lauderdale at Gateway Shopping Center. Open daily with convenient hours for your schedule."
@@ -236,14 +236,14 @@ export default function LandingPage() {
id: "3", value: "Easy Booking", title: "+1 561-466-6306", description: "Call to schedule or inquire about services", imageSrc: "http://img.b2bpic.net/free-photo/close-up-details-hairdresser-salon_23-2149205857.jpg", imageAlt: "Professional barbershop chairs"
}
]}
animationType="blur-reveal"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
ariaLabel="Contact information and location for Florida Fadez"
/>
</div>
<div id="footer" data-section="footer" data-animation="fade-in">
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/hairdresser-cutting-man-s-hair-barber-shop_23-2149186469.jpg"
imageAlt="Premium barbershop atmosphere at Florida Fadez"