2026-03-04 12:40:30 +00:00
4 changed files with 35 additions and 29 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,12 @@
 import type { Metadata } from "next";
+import { Poppins } from "next/font/google";
 import "./globals.css";

+const poppins = Poppins({
+  variable: "--font-poppins",  subsets: ["latin"],
+  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
+});
+
 export const metadata: Metadata = {
  title: "Turkish Barbers - Premium Barbering in Westbury",  description: "Experience authentic Turkish barbering tradition with premium craftsmanship in Westbury. Expert barbers, traditional techniques, modern styles."};

@@ -11,7 +17,7 @@ export default function RootLayout({
 }) {
  return (
    <html lang="en">
-      <body>
+      <body className={poppins.variable}>
        {children}
      
        <script
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -13,16 +13,16 @@ import { Scissors, Zap, CheckCircle, Star } from "lucide-react";
 export default function LandingPage() {
  return (
    <ThemeProvider
-      defaultButtonVariant="hover-bubble"
-      defaultTextAnimation="background-highlight"
-      borderRadius="rounded"
-      contentWidth="compact"
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="mediumLarge"
      sizing="largeSizeMediumTitles"
-      background="circleGradient"
-      cardStyle="layered-gradient"
-      primaryButtonStyle="double-inset"
-      secondaryButtonStyle="glass"
-      headingFontWeight="medium"
+      background="floatingGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="layered"
+      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
@@ -42,7 +42,7 @@ export default function LandingPage() {
        <HeroLogoBillboardSplit
          logoText="TURKISH\nBARBERS"
          description="Premium Turkish barbering tradition meets modern craftsmanship. Experience authentic grooming excellence in Westbury."
-          background={{ variant: "plain" }}
+          background={{ variant: "floatingGradient" }}
          buttons={[
            { text: "Book Now", href: "#contact" },
            { text: "Learn More", href: "#about" }
@@ -111,7 +111,7 @@ export default function LandingPage() {
          tag="Services"
          tagIcon={Zap}
          textboxLayout="default"
-          animationType="slide-up"
+          animationType="blur-reveal"
          useInvertedBackground={false}
        />
      </div>
@@ -141,7 +141,7 @@ export default function LandingPage() {
            { value: "500+", label: "Happy Clients" },
            { value: "15+", label: "Years Experience" }
          ]}
-          animationType="slide-up"
+          animationType="depth-3d"
          title="What Our Clients Say"
          description="Real experiences from satisfied customers in Westbury and surrounding areas"
          tag="Testimonials"
@@ -155,12 +155,12 @@ export default function LandingPage() {
      <div id="contact" data-section="contact">
        <ContactText
          text="Limited availability this week—reserve your slot now for premium Turkish barbering. Book today to secure your appointment."
-          animationType="entrance-slide"
+          animationType="reveal-blur"
          buttons={[
            { text: "Book Appointment", href: "tel:+441373-XXX-XXX" },
            { text: "Get Directions", href: "https://maps.google.com/?q=Turkish+Barbers+Westbury+Wiltshire" }
          ]}
-          background={{ variant: "plain" }}
+          background={{ variant: "floatingGradient" }}
          useInvertedBackground={false}
        />
      </div>
--- a/src/app/styles/base.css
+++ b/src/app/styles/base.css
@@ -11,7 +11,7 @@ html {
 body {
  background-color: var(--background);
  color: var(--foreground);
-  font-family: var(--font-inter), sans-serif;
+  font-family: var(--font-poppins), sans-serif;
  position: relative;
  min-height: 100vh;
  overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-mulish), sans-serif;
+  font-family: var(--font-poppins), sans-serif;
 }
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -2,23 +2,23 @@
  /* Base units */
  /* --vw is set by ThemeProvider */

-  /* --background: #f5f5f5;;
+  /* --background: #f5f4f0;;
  --card: #ffffff;;
-  --foreground: #1c1c1c;;
-  --primary-cta: #1f514c;;
-  --secondary-cta: #ffffff;;
-  --accent: #159c49;;
-  --background-accent: #a8e8ba;; */
+  --foreground: #1a1a1a;;
+  --primary-cta: #2c2c2c;;
+  --secondary-cta: #f5f4f0;;
+  --accent: #8a8a8a;;
+  --background-accent: #e8e6e1;; */

-  --background: #f5f5f5;;
+  --background: #f5f4f0;;
  --card: #ffffff;;
-  --foreground: #1c1c1c;;
-  --primary-cta: #1f514c;;
+  --foreground: #1a1a1a;;
+  --primary-cta: #2c2c2c;;
  --primary-cta-text: #f5f5f5;;
-  --secondary-cta: #ffffff;;
+  --secondary-cta: #f5f4f0;;
  --secondary-cta-text: #1c1c1c;;
-  --accent: #159c49;;
-  --background-accent: #a8e8ba;;
+  --accent: #8a8a8a;;
+  --background-accent: #e8e6e1;;

  /* text sizing - set by ThemeProvider */
  /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);