Compare commits
20 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 8313a676d2 | |||
| c4f4932fb7 | |||
| b49e234e9a | |||
| 4a9d7dda21 | |||
| fe7dfecc44 | |||
| b3239e0d25 | |||
| 38ba9efff6 | |||
| db24c79477 | |||
| 38a5b48a59 | |||
| 7900afcbe2 | |||
| 50c0b30e47 | |||
| 68a9a217ee | |||
| b65e5c6210 | |||
| e0eb29aeea | |||
| 60bab5fef8 | |||
| df09121107 | |||
| 6c42db6d11 | |||
| 27385502b2 | |||
| dd57095d64 | |||
| 60867cf3d7 |
@@ -28,7 +28,7 @@ export default function BlogPage() {
|
|||||||
<NavbarStyleCentered
|
<NavbarStyleCentered
|
||||||
brandName="Refined Barber"
|
brandName="Refined Barber"
|
||||||
navItems={[
|
navItems={[
|
||||||
{ name: "Home", id: "/" },
|
{ name: "Home", id: "hero" },
|
||||||
{ name: "Services", id: "services" },
|
{ name: "Services", id: "services" },
|
||||||
{ name: "About", id: "about" },
|
{ name: "About", id: "about" },
|
||||||
{ name: "Team", id: "team" },
|
{ name: "Team", id: "team" },
|
||||||
|
|||||||
@@ -3,6 +3,12 @@ import { Archivo } from "next/font/google";
|
|||||||
import "./globals.css";
|
import "./globals.css";
|
||||||
import { ServiceWrapper } from "@/components/ServiceWrapper";
|
import { ServiceWrapper } from "@/components/ServiceWrapper";
|
||||||
import Tag from "@/tag/Tag";
|
import Tag from "@/tag/Tag";
|
||||||
|
import { DM_Sans } from "next/font/google";
|
||||||
|
import { Inter } from "next/font/google";
|
||||||
|
import { Inter } from "next/font/google";
|
||||||
|
import { Open_Sans } from "next/font/google";
|
||||||
|
import { Public_Sans } from "next/font/google";
|
||||||
|
import { Inter } from "next/font/google";
|
||||||
|
|
||||||
const archivo = Archivo({
|
const archivo = Archivo({
|
||||||
variable: "--font-archivo", subsets: ["latin"],
|
variable: "--font-archivo", subsets: ["latin"],
|
||||||
@@ -30,6 +36,33 @@ export const metadata: Metadata = {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const dmSans = DM_Sans({
|
||||||
|
variable: "--font-dm-sans",
|
||||||
|
subsets: ["latin"],
|
||||||
|
});
|
||||||
|
const inter = Inter({
|
||||||
|
variable: "--font-inter",
|
||||||
|
subsets: ["latin"],
|
||||||
|
});
|
||||||
|
|
||||||
|
const inter = Inter({
|
||||||
|
variable: "--font-inter",
|
||||||
|
subsets: ["latin"],
|
||||||
|
});
|
||||||
|
const openSans = Open_Sans({
|
||||||
|
variable: "--font-open-sans",
|
||||||
|
subsets: ["latin"],
|
||||||
|
});
|
||||||
|
|
||||||
|
const publicSans = Public_Sans({
|
||||||
|
variable: "--font-public-sans",
|
||||||
|
subsets: ["latin"],
|
||||||
|
});
|
||||||
|
const inter = Inter({
|
||||||
|
variable: "--font-inter",
|
||||||
|
subsets: ["latin"],
|
||||||
|
});
|
||||||
|
|
||||||
export default function RootLayout({
|
export default function RootLayout({
|
||||||
children,
|
children,
|
||||||
}: Readonly<{
|
}: Readonly<{
|
||||||
@@ -38,9 +71,7 @@ export default function RootLayout({
|
|||||||
return (
|
return (
|
||||||
<html lang="en" suppressHydrationWarning>
|
<html lang="en" suppressHydrationWarning>
|
||||||
<ServiceWrapper>
|
<ServiceWrapper>
|
||||||
<body
|
<body className={`${publicSans.variable} ${inter.variable} antialiased`}>
|
||||||
className={archivo.variable}
|
|
||||||
>
|
|
||||||
<Tag />
|
<Tag />
|
||||||
{children}
|
{children}
|
||||||
|
|
||||||
|
|||||||
@@ -2,9 +2,9 @@
|
|||||||
|
|
||||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||||
import HeroCentered from '@/components/sections/hero/HeroCentered';
|
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
||||||
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
|
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
|
||||||
import SplitAbout from '@/components/sections/about/SplitAbout';
|
import AboutMetric from '@/components/sections/about/AboutMetric';
|
||||||
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
||||||
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
||||||
import TeamCardSix from '@/components/sections/team/TeamCardSix';
|
import TeamCardSix from '@/components/sections/team/TeamCardSix';
|
||||||
@@ -43,7 +43,7 @@ export default function LandingPage() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="hero" data-section="hero">
|
<div id="hero" data-section="hero">
|
||||||
<HeroCentered
|
<HeroBillboard
|
||||||
title="Premium Barbershop Experience"
|
title="Premium Barbershop Experience"
|
||||||
description="Expertly crafted grooming services in a refined atmosphere. From classic haircuts to precision beard work, we deliver timeless style with modern expertise."
|
description="Expertly crafted grooming services in a refined atmosphere. From classic haircuts to precision beard work, we deliver timeless style with modern expertise."
|
||||||
background={{
|
background={{
|
||||||
@@ -69,41 +69,39 @@ export default function LandingPage() {
|
|||||||
text: "View Services", href: "services"
|
text: "View Services", href: "services"
|
||||||
}
|
}
|
||||||
]}
|
]}
|
||||||
|
imageSrc="https://img.b2bpic.net/free-photo/handsome-man-hair-salon-facing-camera_23-2148242826.jpg"
|
||||||
|
imageAlt="Premium barbershop experience"
|
||||||
|
mediaAnimation="slide-up"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="services" data-section="services">
|
<div id="services" data-section="services">
|
||||||
<FeatureHoverPattern
|
<FeatureCardOne
|
||||||
title="Our Services"
|
title="Our Services"
|
||||||
description="A complete range of grooming services designed to keep you looking sharp"
|
description="A complete range of grooming services designed to keep you looking sharp"
|
||||||
tag="Premium Grooming"
|
tag="Premium Grooming"
|
||||||
tagIcon={Scissors}
|
tagIcon={Scissors}
|
||||||
features={[
|
features={[
|
||||||
{
|
{
|
||||||
icon: Scissors,
|
title: "Classic Haircuts", description: "Timeless styles executed with precision and attention to detail. From fades to tapers, we craft the perfect cut for you.", imageSrc: "https://img.b2bpic.net/free-photo/handsome-businessman-barber-shop_1157-21514.jpg", imageAlt: "Classic Haircuts"
|
||||||
title: "Classic Haircuts", description: "Timeless styles executed with precision and attention to detail. From fades to tapers, we craft the perfect cut for you."
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: Scissors,
|
title: "Beard Grooming", description: "Professional beard trimming, shaping, and conditioning. Maintain that distinguished look with expert care.", imageSrc: "https://img.b2bpic.net/free-photo/serious-elegant-bearded-male-wearing-classic-waistcoat-slim-bow-tie_613910-1520.jpg", imageAlt: "Beard Grooming"
|
||||||
title: "Beard Grooming", description: "Professional beard trimming, shaping, and conditioning. Maintain that distinguished look with expert care."
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: Sparkles,
|
title: "Hot Shave", description: "Traditional hot towel shaves using premium products and classic techniques for the ultimate relaxation.", imageSrc: "https://img.b2bpic.net/free-photo/portrait-pensive-man-with-receive-moustache-beard-trimming-procedure-barbershop_613910-15033.jpg", imageAlt: "Hot Shave"
|
||||||
title: "Hot Shave", description: "Traditional hot towel shaves using premium products and classic techniques for the ultimate relaxation."
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: Wand2,
|
title: "Hair Styling", description: "Modern styling with premium products. Whether it's pomade or gel, we'll give you the look you want.", imageSrc: "https://img.b2bpic.net/free-photo/studio-portrait-bearded-photographer-wearing-classic-suit-holding-retro-camera-standing-with-his-arms-crossed_613910-19282.jpg", imageAlt: "Hair Styling"
|
||||||
title: "Hair Styling", description: "Modern styling with premium products. Whether it's pomade or gel, we'll give you the look you want."
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: Heart,
|
title: "Signature Treatments", description: "Exclusive grooming treatments including scalp massage and conditioning therapy for complete wellness.", imageSrc: "https://img.b2bpic.net/free-photo/handsome-businessman-barber-shop_1157-21514.jpg", imageAlt: "Signature Treatments"
|
||||||
title: "Signature Treatments", description: "Exclusive grooming treatments including scalp massage and conditioning therapy for complete wellness."
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: Crown,
|
title: "VIP Experience", description: "Premium service package with extended time, complimentary beverages, and personalized consultation.", imageSrc: "https://img.b2bpic.net/free-photo/serious-elegant-bearded-male-wearing-classic-waistcoat-slim-bow-tie_613910-1520.jpg", imageAlt: "VIP Experience"
|
||||||
title: "VIP Experience", description: "Premium service package with extended time, complimentary beverages, and personalized consultation."
|
|
||||||
}
|
}
|
||||||
]}
|
]}
|
||||||
|
gridVariant="uniform-all-items-equal"
|
||||||
animationType="slide-up"
|
animationType="slide-up"
|
||||||
textboxLayout="default"
|
textboxLayout="default"
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
@@ -111,36 +109,16 @@ export default function LandingPage() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="about" data-section="about">
|
<div id="about" data-section="about">
|
||||||
<SplitAbout
|
<AboutMetric
|
||||||
title="Refined Barbershop Heritage"
|
title="At Refined Barber we redefine barbering by empowering clients to look and feel their absolute best"
|
||||||
description="With over 15 years in the grooming industry, we've perfected the art of classic barbering combined with modern expertise. Our shop is a sanctuary where tradition meets innovation."
|
metrics={[
|
||||||
tag="Our Story"
|
{ icon: Users, label: "Satisfied Clients", value: "2,000+" },
|
||||||
tagIcon={History}
|
{ icon: Star, label: "5-Star Rating", value: "98%" },
|
||||||
bulletPoints={[
|
{ icon: Award, label: "Years Experience", value: "15+" },
|
||||||
{
|
{ icon: Zap, label: "Monthly Appointments", value: "800+" }
|
||||||
title: "Master Craftsmen", description: "Our barbers are certified professionals with decades of combined experience in traditional and modern grooming techniques.", icon: Award
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Premium Products", description: "We use only the finest grooming products from trusted international brands to ensure superior results and client satisfaction.", icon: Zap
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Comfortable Atmosphere", description: "Step into a relaxing environment designed for comfort, featuring vintage barbershop aesthetics and modern amenities.", icon: Home
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Personalized Service", description: "Every client receives customized attention. We listen to your preferences and deliver results that exceed expectations."
|
|
||||||
}
|
|
||||||
]}
|
]}
|
||||||
imageSrc="https://img.b2bpic.net/free-photo/handsome-man-hair-salon-facing-camera_23-2148242826.jpg"
|
metricsAnimation="slide-up"
|
||||||
imageAlt="Refined barbershop interior"
|
|
||||||
mediaAnimation="slide-up"
|
|
||||||
textboxLayout="default"
|
|
||||||
useInvertedBackground={true}
|
useInvertedBackground={true}
|
||||||
imagePosition="right"
|
|
||||||
buttons={[
|
|
||||||
{
|
|
||||||
text: "Meet the Team", href: "team"
|
|
||||||
}
|
|
||||||
]}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -85,8 +85,11 @@ export default function ProductPage({ params }: ProductPageProps) {
|
|||||||
<NavbarStyleCentered
|
<NavbarStyleCentered
|
||||||
brandName="Refined Barber"
|
brandName="Refined Barber"
|
||||||
navItems={[
|
navItems={[
|
||||||
{ name: "Home", id: "/" },
|
{ name: "Home", id: "hero" },
|
||||||
{ name: "Shop", id: "/shop" }
|
{ name: "Services", id: "services" },
|
||||||
|
{ name: "About", id: "about" },
|
||||||
|
{ name: "Team", id: "team" },
|
||||||
|
{ name: "Testimonials", id: "testimonials" }
|
||||||
]}
|
]}
|
||||||
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
|
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
|
||||||
/>
|
/>
|
||||||
@@ -125,8 +128,11 @@ export default function ProductPage({ params }: ProductPageProps) {
|
|||||||
<NavbarStyleCentered
|
<NavbarStyleCentered
|
||||||
brandName="Refined Barber"
|
brandName="Refined Barber"
|
||||||
navItems={[
|
navItems={[
|
||||||
{ name: "Home", id: "/" },
|
{ name: "Home", id: "hero" },
|
||||||
{ name: "Shop", id: "/shop" }
|
{ name: "Services", id: "services" },
|
||||||
|
{ name: "About", id: "about" },
|
||||||
|
{ name: "Team", id: "team" },
|
||||||
|
{ name: "Testimonials", id: "testimonials" }
|
||||||
]}
|
]}
|
||||||
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
|
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
|
||||||
/>
|
/>
|
||||||
@@ -172,8 +178,11 @@ export default function ProductPage({ params }: ProductPageProps) {
|
|||||||
<NavbarStyleCentered
|
<NavbarStyleCentered
|
||||||
brandName="Refined Barber"
|
brandName="Refined Barber"
|
||||||
navItems={[
|
navItems={[
|
||||||
{ name: "Home", id: "/" },
|
{ name: "Home", id: "hero" },
|
||||||
{ name: "Shop", id: "/shop" }
|
{ name: "Services", id: "services" },
|
||||||
|
{ name: "About", id: "about" },
|
||||||
|
{ name: "Team", id: "team" },
|
||||||
|
{ name: "Testimonials", id: "testimonials" }
|
||||||
]}
|
]}
|
||||||
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
|
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -35,8 +35,11 @@ export default function ShopPage() {
|
|||||||
<NavbarStyleCentered
|
<NavbarStyleCentered
|
||||||
brandName="Refined Barber"
|
brandName="Refined Barber"
|
||||||
navItems={[
|
navItems={[
|
||||||
{ name: "Home", id: "/" },
|
{ name: "Home", id: "hero" },
|
||||||
{ name: "Shop", id: "/shop" }
|
{ name: "Services", id: "services" },
|
||||||
|
{ name: "About", id: "about" },
|
||||||
|
{ name: "Team", id: "team" },
|
||||||
|
{ name: "Testimonials", id: "testimonials" }
|
||||||
]}
|
]}
|
||||||
button={{ text: "Cart", onClick: () => console.log("cart") }}
|
button={{ text: "Cart", onClick: () => console.log("cart") }}
|
||||||
/>
|
/>
|
||||||
@@ -74,8 +77,11 @@ export default function ShopPage() {
|
|||||||
<NavbarStyleCentered
|
<NavbarStyleCentered
|
||||||
brandName="Refined Barber"
|
brandName="Refined Barber"
|
||||||
navItems={[
|
navItems={[
|
||||||
{ name: "Home", id: "/" },
|
{ name: "Home", id: "hero" },
|
||||||
{ name: "Shop", id: "/shop" }
|
{ name: "Services", id: "services" },
|
||||||
|
{ name: "About", id: "about" },
|
||||||
|
{ name: "Team", id: "team" },
|
||||||
|
{ name: "Testimonials", id: "testimonials" }
|
||||||
]}
|
]}
|
||||||
button={{ text: "Cart", onClick: () => console.log("cart") }}
|
button={{ text: "Cart", onClick: () => console.log("cart") }}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -11,7 +11,7 @@ html {
|
|||||||
body {
|
body {
|
||||||
background-color: var(--background);
|
background-color: var(--background);
|
||||||
color: var(--foreground);
|
color: var(--foreground);
|
||||||
font-family: var(--font-archivo), sans-serif;
|
font-family: var(--font-inter), sans-serif;
|
||||||
position: relative;
|
position: relative;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
overscroll-behavior: none;
|
overscroll-behavior: none;
|
||||||
@@ -24,5 +24,5 @@ h3,
|
|||||||
h4,
|
h4,
|
||||||
h5,
|
h5,
|
||||||
h6 {
|
h6 {
|
||||||
font-family: var(--font-archivo), sans-serif;
|
font-family: var(--font-public-sans), sans-serif;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user