Merge version_1 into main #2
187
src/app/page.tsx
187
src/app/page.tsx
@@ -5,10 +5,12 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||
import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
|
||||
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
|
||||
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
|
||||
import TeamCardTwo from "@/components/sections/team/TeamCardTwo";
|
||||
import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
|
||||
import ContactText from "@/components/sections/contact/ContactText";
|
||||
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
||||
import { Sparkles, Scissors, Star } from "lucide-react";
|
||||
import { Sparkles, Scissors, Camera, Star } from "lucide-react";
|
||||
|
||||
export default function HomePage() {
|
||||
const navItems = [
|
||||
@@ -68,9 +70,7 @@ export default function HomePage() {
|
||||
brandName="Barber Night"
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "Book Appointment",
|
||||
href: "#contact",
|
||||
}}
|
||||
text: "Book Appointment", href: "#contact"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -84,31 +84,22 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "Book an Appointment",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Book an Appointment", href: "#contact"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
kpis={[
|
||||
{
|
||||
value: "15+",
|
||||
label: "Years Experience",
|
||||
},
|
||||
value: "15+", label: "Years Experience"},
|
||||
{
|
||||
value: "5000+",
|
||||
label: "Satisfied Clients",
|
||||
},
|
||||
value: "5000+", label: "Satisfied Clients"},
|
||||
{
|
||||
value: "10+",
|
||||
label: "Master Barbers",
|
||||
},
|
||||
value: "10+", label: "Master Barbers"},
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/low-angle-man-hair-salon_23-2150665447.jpg"
|
||||
imageAlt="Modern barber shop interior with luxury styling chairs"
|
||||
mediaAnimation="slide-up"
|
||||
imagePosition="right"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -125,55 +116,59 @@ export default function HomePage() {
|
||||
animationType="slide-up"
|
||||
products={[
|
||||
{
|
||||
id: "haircut",
|
||||
brand: "Classic",
|
||||
name: "Premium Haircut",
|
||||
price: "150 MAD",
|
||||
rating: 5,
|
||||
reviewCount: "500+",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-sparying-hair-client_23-2147778777.jpg?_wi=1",
|
||||
imageAlt: "professional barber cutting modern man haircut",
|
||||
},
|
||||
id: "haircut", brand: "Classic", name: "Premium Haircut", price: "150 MAD", rating: 5,
|
||||
reviewCount: "500+", imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-sparying-hair-client_23-2147778777.jpg", imageAlt: "professional barber cutting modern man haircut"},
|
||||
{
|
||||
id: "fade",
|
||||
brand: "Modern",
|
||||
name: "Skin Fade",
|
||||
price: "180 MAD",
|
||||
rating: 5,
|
||||
reviewCount: "450+",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-brutal-bearded-male-grey-vignette-background_613910-1309.jpg?_wi=1",
|
||||
imageAlt: "skin fade haircut technique barber professional",
|
||||
},
|
||||
id: "fade", brand: "Modern", name: "Skin Fade", price: "180 MAD", rating: 5,
|
||||
reviewCount: "450+", imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-brutal-bearded-male-grey-vignette-background_613910-1309.jpg", imageAlt: "skin fade haircut technique barber professional"},
|
||||
{
|
||||
id: "beard",
|
||||
brand: "Signature",
|
||||
name: "Beard Trim & Shape",
|
||||
price: "100 MAD",
|
||||
rating: 5,
|
||||
reviewCount: "380+",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-man-arranging-his-beard-with-shaving-machine_23-2148298347.jpg?_wi=1",
|
||||
imageAlt: "barber trimming grooming beard with precision scissors",
|
||||
},
|
||||
id: "beard", brand: "Signature", name: "Beard Trim & Shape", price: "100 MAD", rating: 5,
|
||||
reviewCount: "380+", imageSrc: "http://img.b2bpic.net/free-photo/young-man-arranging-his-beard-with-shaving-machine_23-2148298347.jpg", imageAlt: "barber trimming grooming beard with precision scissors"},
|
||||
{
|
||||
id: "combo",
|
||||
brand: "Premium",
|
||||
name: "Hair + Beard Combo",
|
||||
price: "250 MAD",
|
||||
rating: 5,
|
||||
reviewCount: "520+",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/barber-straighten-mustache-senior-client_23-2148181909.jpg?_wi=1",
|
||||
imageAlt: "barber cutting hair and beard grooming combo service",
|
||||
},
|
||||
id: "combo", brand: "Premium", name: "Hair + Beard Combo", price: "250 MAD", rating: 5,
|
||||
reviewCount: "520+", imageSrc: "http://img.b2bpic.net/free-photo/barber-straighten-mustache-senior-client_23-2148181909.jpg", imageAlt: "barber cutting hair and beard grooming combo service"},
|
||||
{
|
||||
id: "kids",
|
||||
brand: "Family",
|
||||
name: "Kids Haircut",
|
||||
price: "80 MAD",
|
||||
rating: 5,
|
||||
reviewCount: "320+",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-getting-haircut-barbershop_23-2148506184.jpg?_wi=1",
|
||||
imageAlt: "barber cutting child boy hair kids haircut",
|
||||
},
|
||||
id: "kids", brand: "Family", name: "Kids Haircut", price: "80 MAD", rating: 5,
|
||||
reviewCount: "320+", imageSrc: "http://img.b2bpic.net/free-photo/man-getting-haircut-barbershop_23-2148506184.jpg", imageAlt: "barber cutting child boy hair kids haircut"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
title="About Barber Night"
|
||||
description={[
|
||||
"Barber Night stands as Marrakech's premier destination for men's grooming excellence. With over 15 years of combined experience, our team of master barbers is dedicated to delivering exceptional haircuts, modern fades, precise beard grooming, and complete grooming transformations.", "We blend traditional barbering craftsmanship with contemporary techniques and trends. Our shop is equipped with premium tools and products, ensuring every client receives a professional, comfortable, and memorable grooming experience. Whether you're seeking a classic cut, a modern fade, or complete beard styling, our expert barbers deliver results that exceed expectations.", "Located in the heart of Marrakech, Barber Night is open for early morning appointments and late-night services to accommodate your busy schedule. We pride ourselves on quality, attention to detail, and building lasting relationships with our valued clients."
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Now", href: "#contact"},
|
||||
]}
|
||||
showBorder={true}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="gallery" data-section="gallery">
|
||||
<TeamCardTwo
|
||||
title="Barber Night Gallery"
|
||||
description="Explore our collection of expertly crafted haircuts and grooming transformations. See the artistry and precision that define our barbering excellence."
|
||||
tag="Our Work"
|
||||
tagIcon={Camera}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
gridVariant="bento-grid"
|
||||
animationType="slide-up"
|
||||
members={[
|
||||
{
|
||||
id: "1", name: "Modern Fade", role: "Premium Style", description: "Clean skin fade with sharp lines and modern styling", imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-getting-haircut_23-2149220558.jpg", imageAlt: "modern men fade haircut clean sharp lines result"},
|
||||
{
|
||||
id: "2", name: "Classic Cut", role: "Timeless Look", description: "Professional classic haircut with perfect proportions", imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-evaluating-senior-client-barbershop_23-2148181895.jpg", imageAlt: "classic men's haircut professional barbershop style"},
|
||||
{
|
||||
id: "3", name: "Beard Styling", role: "Signature Service", description: "Expertly groomed beard with defined lines", imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-bearded-man-black-glance-shirt-with-tattoo-his-chest_613910-8981.jpg", imageAlt: "expertly groomed beard men's styling professional"},
|
||||
{
|
||||
id: "4", name: "Shop Interior", role: "Premium Ambiance", description: "Modern, clean, and professional barbershop environment", imageSrc: "http://img.b2bpic.net/free-photo/side-view-leather-barber-shop-chair_23-2148242807.jpg", imageAlt: "modern luxury barbershop interior clean professional"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -191,59 +186,23 @@ export default function HomePage() {
|
||||
animationType="slide-up"
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Ahmed Hassan",
|
||||
role: "Business Executive",
|
||||
company: "Marrakech",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-mature-business-man-standing-office-cafe-leaning-counter-holding-jacket-shoulder-showing-thumb-up-like_74855-10007.jpg",
|
||||
imageAlt: "professional man portrait happy client satisfied",
|
||||
},
|
||||
id: "1", name: "Ahmed Hassan", role: "Business Executive", company: "Marrakech", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-mature-business-man-standing-office-cafe-leaning-counter-holding-jacket-shoulder-showing-thumb-up-like_74855-10007.jpg", imageAlt: "professional man portrait happy client satisfied"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Mohammed Karim",
|
||||
role: "Professional",
|
||||
company: "Marrakech",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-young-handsome-man-sitting-cafe-table_1262-975.jpg",
|
||||
imageAlt: "young man portrait happy client barbershop",
|
||||
},
|
||||
id: "2", name: "Mohammed Karim", role: "Professional", company: "Marrakech", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-young-handsome-man-sitting-cafe-table_1262-975.jpg", imageAlt: "young man portrait happy client barbershop"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Ibrahim Sayed",
|
||||
role: "Entrepreneur",
|
||||
company: "Marrakech",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1676.jpg",
|
||||
imageAlt: "professional entrepreneur man portrait satisfied happy",
|
||||
},
|
||||
id: "3", name: "Ibrahim Sayed", role: "Entrepreneur", company: "Marrakech", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1676.jpg", imageAlt: "professional entrepreneur man portrait satisfied happy"},
|
||||
{
|
||||
id: "4",
|
||||
name: "Youssef Ben Ali",
|
||||
role: "Designer",
|
||||
company: "Marrakech",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/joyful-man-white-tshirt-jacket-smiling-brown-background_197531-26657.jpg",
|
||||
imageAlt: "creative designer man portrait happy client",
|
||||
},
|
||||
id: "4", name: "Youssef Ben Ali", role: "Designer", company: "Marrakech", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/joyful-man-white-tshirt-jacket-smiling-brown-background_197531-26657.jpg", imageAlt: "creative designer man portrait happy client"},
|
||||
{
|
||||
id: "5",
|
||||
name: "Rashid El Mansouri",
|
||||
role: "Manager",
|
||||
company: "Marrakech",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1576.jpg",
|
||||
imageAlt: "manager professional man portrait happy client",
|
||||
},
|
||||
id: "5", name: "Rashid El Mansouri", role: "Manager", company: "Marrakech", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1576.jpg", imageAlt: "manager professional man portrait happy client"},
|
||||
{
|
||||
id: "6",
|
||||
name: "Samir Aouad",
|
||||
role: "Consultant",
|
||||
company: "Marrakech",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-handsome-male-barber-uniform-holding-hair-clippers-showing-yes-gesture-isolated-pink_141793-73155.jpg",
|
||||
imageAlt: "consultant man portrait happy satisfied client",
|
||||
},
|
||||
id: "6", name: "Samir Aouad", role: "Consultant", company: "Marrakech", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-handsome-male-barber-uniform-holding-hair-clippers-showing-yes-gesture-isolated-pink_141793-73155.jpg", imageAlt: "consultant man portrait happy satisfied client"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -254,13 +213,9 @@ export default function HomePage() {
|
||||
animationType="entrance-slide"
|
||||
buttons={[
|
||||
{
|
||||
text: "Book on WhatsApp",
|
||||
href: "https://wa.me/212XXXXXXXXX",
|
||||
},
|
||||
text: "Book on WhatsApp", href: "https://wa.me/212XXXXXXXXX"},
|
||||
{
|
||||
text: "Call Us Now",
|
||||
href: "tel:+212XXXXXXXXX",
|
||||
},
|
||||
text: "Call Us Now", href: "tel:+212XXXXXXXXX"},
|
||||
]}
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
|
||||
@@ -1,51 +1,36 @@
|
||||
"use client";
|
||||
|
||||
import { memo } from "react";
|
||||
import useSvgTextLogo from "./useSvgTextLogo";
|
||||
import { cls } from "@/lib/utils";
|
||||
import React from 'react';
|
||||
|
||||
interface SvgTextLogoProps {
|
||||
logoText: string;
|
||||
adjustHeightFactor?: number;
|
||||
verticalAlign?: "top" | "center";
|
||||
text?: string;
|
||||
className?: string;
|
||||
fontSize?: number;
|
||||
fontWeight?: string;
|
||||
}
|
||||
|
||||
const SvgTextLogo = memo<SvgTextLogoProps>(function SvgTextLogo({
|
||||
logoText,
|
||||
adjustHeightFactor,
|
||||
verticalAlign = "top",
|
||||
className = "",
|
||||
}) {
|
||||
const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor);
|
||||
|
||||
const SvgTextLogo: React.FC<SvgTextLogoProps> = ({
|
||||
text = 'Logo',
|
||||
className = '',
|
||||
fontSize = 32,
|
||||
fontWeight = '700',
|
||||
}) => {
|
||||
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 ${text.length * fontSize * 0.6} ${fontSize}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={className}
|
||||
>
|
||||
<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"
|
||||
}}
|
||||
y={fontSize * 0.75}
|
||||
fontSize={fontSize}
|
||||
fontWeight={fontWeight}
|
||||
fill="currentColor"
|
||||
dominantBaseline="auto"
|
||||
>
|
||||
{logoText}
|
||||
{text}
|
||||
</text>
|
||||
</svg>
|
||||
);
|
||||
});
|
||||
|
||||
SvgTextLogo.displayName = "SvgTextLogo";
|
||||
};
|
||||
|
||||
export default SvgTextLogo;
|
||||
|
||||
Reference in New Issue
Block a user