bender/5ca9486f-48ee-4477-bde5-985286da1dd9
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: bender:version_2
Branches Tags
bender:main bender:version_3 bender:version_2 bender:version_1
...
pull from: bender:version_3
Branches Tags
bender:main bender:version_3 bender:version_2 bender:version_1

10 Commits
version_2 ... version_3

Author SHA1 Message Date
bender
54ae002d71 Update theme colors 2026-03-09 22:21:18 +00:00
bender
714e6f6bfc Update theme colors 2026-03-09 22:20:42 +00:00
bender
62733925de Update theme colors 2026-03-09 22:20:10 +00:00
bender
8b9e7856f8 Update theme colors 2026-03-09 22:19:03 +00:00
bender
9452c0151e Update src/app/page.tsx 2026-03-09 22:15:10 +00:00
bender
90390e8115 Update src/app/layout.tsx 2026-03-09 22:15:09 +00:00
bender
e954c9cd12 Merge version_2 into main 
Merge version_2 into main
 2026-03-09 22:10:45 +00:00
bender
fa2acfadb1 Merge version_2 into main 
Merge version_2 into main
 2026-03-09 22:09:14 +00:00
bender
e83f4fce1c Merge version_2 into main 
Merge version_2 into main
 2026-03-09 22:05:32 +00:00
bender
2fa03398f3 Merge version_2 into main 
Merge version_2 into main
 2026-03-09 22:04:34 +00:00
3 changed files with 35 additions and 146 deletions
Expand all files Collapse all files

121
src/app/layout.tsx
View File

@@ -1,17 +1,11 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google"; import { Inter } from "next/font/google";
import "./globals.css"; import "./globals.css";
const geist = Geist({ const inter = Inter({ subsets: ["latin"] });
variable: "--font-geist-sans", subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono", subsets: ["latin"],
});
export const metadata: Metadata = { 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({ export default function RootLayout({
children, children,
@@ -19,113 +13,8 @@ export default function RootLayout({
children: React.ReactNode; children: React.ReactNode;
}) { }) {
return ( return (
<html lang="en" suppressHydrationWarning> <html lang="en">
<body className={`${geist.variable} ${geistMono.variable}`}> <body className={inter.className}>{children}
{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>
<script <script
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: ` __html: `

40
src/app/page.tsx
View File

@@ -40,7 +40,7 @@ export default function LandingPage() {
/> />
</div> </div>
<div id="hero" data-section="hero" data-animation="fade-in"> <div id="hero" data-section="hero">
<HeroCentered <HeroCentered
title="Fort Lauderdale's #1 Barbershop for Clean Fades & Fresh Cuts" 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." 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>
<div id="socialproof" data-section="socialproof" data-animation="slide-up"> <div id="socialproof" data-section="socialproof">
<SocialProofOne <SocialProofOne
title="Why Clients Choose Florida Fadez" title="Why Clients Choose Florida Fadez"
description="Join over 62 satisfied customers who trust us with their grooming needs" description="Join over 62 satisfied customers who trust us with their grooming needs"
@@ -83,30 +83,30 @@ export default function LandingPage() {
/> />
</div> </div>
<div id="services" data-section="services" data-animation="slide-up" data-stagger="true"> <div id="services" data-section="services">
<ProductCardOne <ProductCardOne
title="Our Premium Barbershop Services" title="Our Premium Barbershop Services"
description="Precision cuts and grooming services tailored to your style. Every service performed by experienced professionals." 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="Professional Services" tag="Certified Barbers • Premium Quality"
tagIcon={undefined} tagIcon={undefined}
products={[ 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" gridVariant="three-columns-all-equal-width"
@@ -117,7 +117,7 @@ export default function LandingPage() {
/> />
</div> </div>
<div id="whyus" data-section="whyus" data-animation="reveal-blur"> <div id="whyus" data-section="whyus">
<TextAbout <TextAbout
tag="Why Choose Florida Fadez" tag="Why Choose Florida Fadez"
tagIcon={undefined} tagIcon={undefined}
@@ -132,7 +132,7 @@ export default function LandingPage() {
/> />
</div> </div>
<div id="team" data-section="team" data-animation="slide-up" data-stagger="true"> <div id="team" data-section="team">
<TeamCardTwo <TeamCardTwo
title="Meet Our Expert Barbers" title="Meet Our Expert Barbers"
description="Meet the talented professionals behind Florida Fadez. Each barber brings years of experience and passion for precision grooming." 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" gridVariant="four-items-2x2-equal-grid"
animationType="scale-rotate" animationType="slide-up"
textboxLayout="default" textboxLayout="default"
useInvertedBackground={true} useInvertedBackground={true}
ariaLabel="Meet the Florida Fadez barber team" ariaLabel="Meet the Florida Fadez barber team"
/> />
</div> </div>
<div id="testimonials" data-section="testimonials" data-animation="slide-up" data-stagger="true"> <div id="testimonials" data-section="testimonials">
<TestimonialCardTwo <TestimonialCardTwo
title="What Our Clients Say" title="What Our Clients Say"
description="Real reviews from satisfied customers who trust Florida Fadez with their grooming" 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" 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" textboxLayout="default"
useInvertedBackground={false} useInvertedBackground={false}
ariaLabel="Customer testimonials for Florida Fadez Barbershop" ariaLabel="Customer testimonials for Florida Fadez Barbershop"
/> />
</div> </div>
<div id="booking" data-section="booking" data-animation="scale-in"> <div id="booking" data-section="booking">
<ContactText <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." 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" animationType="background-highlight"
@@ -219,7 +219,7 @@ export default function LandingPage() {
/> />
</div> </div>
<div id="contact" data-section="contact" data-animation="slide-up" data-stagger="true"> <div id="contact" data-section="contact">
<MetricCardEleven <MetricCardEleven
title="Visit Florida Fadez" title="Visit Florida Fadez"
description="Located in the heart of Fort Lauderdale at Gateway Shopping Center. Open daily with convenient hours for your schedule." 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" 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" textboxLayout="default"
useInvertedBackground={false} useInvertedBackground={false}
ariaLabel="Contact information and location for Florida Fadez" ariaLabel="Contact information and location for Florida Fadez"
/> />
</div> </div>
<div id="footer" data-section="footer" data-animation="fade-in"> <div id="footer" data-section="footer">
<FooterMedia <FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/hairdresser-cutting-man-s-hair-barber-shop_23-2149186469.jpg" imageSrc="http://img.b2bpic.net/free-photo/hairdresser-cutting-man-s-hair-barber-shop_23-2149186469.jpg"
imageAlt="Premium barbershop atmosphere at Florida Fadez" imageAlt="Premium barbershop atmosphere at Florida Fadez"

18
src/app/styles/variables.css
View File

@@ -10,15 +10,15 @@
--accent: #ffffff; --accent: #ffffff;
--background-accent: #ffffff; */ --background-accent: #ffffff; */
--background: #f5f5f5; --background: #020617;
--card: #ffffff; --card: #0f172a;
--foreground: #1c1c1c; --foreground: #e2e8f0;
--primary-cta: #1c1c1c; --primary-cta: #c4d8f9;
--primary-cta-text: #f5f5f5; --primary-cta-text: #020617;
--secondary-cta: #ffffff; --secondary-cta: #041633;
--secondary-cta-text: #1c1c1c; --secondary-cta-text: #e2e8f0;
--accent: #15479c; --accent: #2d30f3;
--background-accent: #a8cce8; --background-accent: #1d4ed8;
/* text sizing - set by ThemeProvider */ /* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem); /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);