Compare commits
15 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 431eabaeaa | |||
| 9b5a19b485 | |||
| c6cbf764ef | |||
| 01f4f8e46e | |||
| 025b9c8f07 | |||
| fc465de7d1 | |||
| b3eaeb4691 | |||
| c425e793a5 | |||
| fda2c8658c | |||
| f8e934c4e5 | |||
| 29e47a3457 | |||
| c0c6211344 | |||
| cd1ce02d29 | |||
| c63bb30046 | |||
| f555b74371 |
178
src/app/page.tsx
178
src/app/page.tsx
@@ -5,10 +5,10 @@ import ReactLenis from "lenis/react";
|
|||||||
import ContactText from '@/components/sections/contact/ContactText';
|
import ContactText from '@/components/sections/contact/ContactText';
|
||||||
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
|
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
|
||||||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||||
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
|
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
||||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||||
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
|
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
|
||||||
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
||||||
import TextAbout from '@/components/sections/about/TextAbout';
|
import TextAbout from '@/components/sections/about/TextAbout';
|
||||||
import { Award, CheckCircle, Scissors, Star, User, Zap } from "lucide-react";
|
import { Award, CheckCircle, Scissors, Star, User, Zap } from "lucide-react";
|
||||||
|
|
||||||
@@ -30,66 +30,27 @@ export default function LandingPage() {
|
|||||||
<div id="nav" data-section="nav">
|
<div id="nav" data-section="nav">
|
||||||
<NavbarStyleFullscreen
|
<NavbarStyleFullscreen
|
||||||
navItems={[
|
navItems={[
|
||||||
{
|
{ name: "Our Story", id: "about" },
|
||||||
name: "Our Story", id: "about"},
|
{ name: "Services", id: "services" },
|
||||||
{
|
{ name: "The Team", id: "team" },
|
||||||
name: "Services", id: "services"},
|
{ name: "Reviews", id: "reviews" },
|
||||||
{
|
{ name: "Location", id: "location" },
|
||||||
name: "The Team", id: "team"},
|
|
||||||
{
|
|
||||||
name: "Reviews", id: "reviews"},
|
|
||||||
{
|
|
||||||
name: "Location", id: "location"},
|
|
||||||
]}
|
]}
|
||||||
brandName="SH CUTZ"
|
brandName="SH CUTZ "
|
||||||
button={{
|
button={{ text: "Book Now", href: "#booking" }}
|
||||||
text: "Book Now", href: "#booking"}}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="hero" data-section="hero">
|
<div id="hero" data-section="hero">
|
||||||
<HeroOverlayTestimonial
|
<HeroBillboard
|
||||||
title="Precision. Craft. Character."
|
title="Precision. Craft. Character."
|
||||||
description="Where every cut is a conversation, and every client leaves looking their best. Est. The Danforth, Toronto."
|
description="Where every cut is a conversation, and every client leaves looking their best. Est. The Danforth, Toronto."
|
||||||
testimonials={[
|
background={{ variant: "sparkles-gradient" }}
|
||||||
{
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3C0TjRXebOoJge9Z6e1toMB7ddV/uploaded-1775523797814-4ztdzzfy.jpg"
|
||||||
name: "Shubham A.", handle: "Local Client", testimonial: "He really takes his time to understand what you want. Best cut in the city.", rating: 5,
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/hairstyle-supplies_1157-7704.jpg?_wi=1", imageAlt: "modern luxury barbershop interior dark"},
|
|
||||||
{
|
|
||||||
name: "Paul S.", handle: "Local Client", testimonial: "I left feeling fresh and confident. Amazing service.", rating: 5,
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/hairstyle-supplies_1157-7704.jpg?_wi=2", imageAlt: "barber cutting hair professional"},
|
|
||||||
{
|
|
||||||
name: "Kyle P.", handle: "Local Client", testimonial: "Best haircut I've had in years. Will be a regular.", rating: 5,
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/hipster-style-bearded-man-white-shirt-studio-black-background_158595-1828.jpg?_wi=1", imageAlt: "professional barber smiling"},
|
|
||||||
{
|
|
||||||
name: "Nirmal S.K.", handle: "Local Client", testimonial: "The attention to detail and vibe here are unmatched.", rating: 5,
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/pleased-young-afro-american-male-barber-wearing-uniform-holding-barber-tools-pointing-them_141793-116999.jpg?_wi=1", imageAlt: "modern barber workspace portrait"},
|
|
||||||
{
|
|
||||||
name: "Dion A.", handle: "Local Client", testimonial: "Very particular with details for a sharp, clean look.", rating: 5,
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/young-bearded-man-getting-haircut-by-hairdresser-while-sitting-chair-barbershop-barber-soul_627829-6410.jpg", imageAlt: "man with stylish haircut"},
|
|
||||||
]}
|
|
||||||
buttons={[
|
buttons={[
|
||||||
{
|
{ text: "Book Appointment", href: "#booking" },
|
||||||
text: "Book Appointment", href: "#booking"},
|
{ text: "View Services", href: "#services" },
|
||||||
{
|
|
||||||
text: "View Services", href: "#services"},
|
|
||||||
]}
|
]}
|
||||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3C0TjRXebOoJge9Z6e1toMB7ddV/uploaded-1775523888150-xc9a85ne.jpg"
|
|
||||||
showDimOverlay={true}
|
|
||||||
showBlur={true}
|
|
||||||
avatars={[
|
|
||||||
{
|
|
||||||
src: "http://img.b2bpic.net/free-photo/young-bearded-man-getting-haircut-by-hairdresser-while-sitting-chair-barbershop-barber-soul_627829-6410.jpg", alt: "Client 1"},
|
|
||||||
{
|
|
||||||
src: "http://img.b2bpic.net/free-photo/barber-putting-cape-clients-neck_107420-94792.jpg", alt: "Client 2"},
|
|
||||||
{
|
|
||||||
src: "http://img.b2bpic.net/free-photo/stylish-bearded-male-sunglasses-grey-background_613910-10286.jpg", alt: "Client 3"},
|
|
||||||
{
|
|
||||||
src: "http://img.b2bpic.net/free-photo/headshot-thoughtful-handsome-man-looking-intrigued-squinting-thinking-about-something-standin_1258-163720.jpg", alt: "Client 4"},
|
|
||||||
{
|
|
||||||
src: "http://img.b2bpic.net/free-photo/positive-hipster-male-dressed-black-t-shirt-holds-head-with-tattooed-arms_613910-9176.jpg", alt: "Client 5"},
|
|
||||||
]}
|
|
||||||
avatarText="Join our 500+ happy clients"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -97,10 +58,7 @@ export default function LandingPage() {
|
|||||||
<TextAbout
|
<TextAbout
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
title="More Than Just A Haircut."
|
title="More Than Just A Haircut."
|
||||||
buttons={[
|
buttons={[{ text: "Visit Our Shop", href: "#location" }]}
|
||||||
{
|
|
||||||
text: "Visit Our Shop", href: "#location"},
|
|
||||||
]}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -111,42 +69,18 @@ export default function LandingPage() {
|
|||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
features={[
|
features={[
|
||||||
{
|
{
|
||||||
title: "Classic Haircut", description: "Tailored to your style and preferences with a professional touch.", media: {
|
title: "Classic Haircut", description: "Tailored to your style and preferences with a professional touch.", media: { imageSrc: "http://img.b2bpic.net/free-photo/barber-putting-cape-clients-neck_107420-94792.jpg?_wi=1", imageAlt: "Classic haircut" },
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/barber-putting-cape-clients-neck_107420-94792.jpg", imageAlt: "Classic haircut"},
|
items: [{ icon: Scissors, text: "Precise cut" }, { icon: User, text: "Personalized consultation" }],
|
||||||
items: [
|
|
||||||
{
|
|
||||||
icon: Scissors,
|
|
||||||
text: "Precise cut"},
|
|
||||||
{
|
|
||||||
icon: User,
|
|
||||||
text: "Personalized consultation"},
|
|
||||||
],
|
|
||||||
reverse: false,
|
reverse: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Skin Fade", description: "Clean, sharp, and signature precision for a modern aesthetic.", media: {
|
title: "Skin Fade", description: "Clean, sharp, and signature precision for a modern aesthetic.", media: { imageSrc: "http://img.b2bpic.net/free-photo/stylish-bearded-male-sunglasses-grey-background_613910-10286.jpg", imageAlt: "Skin fade" },
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-bearded-male-sunglasses-grey-background_613910-10286.jpg", imageAlt: "Skin fade"},
|
items: [{ icon: Zap, text: "Modern look" }, { icon: CheckCircle, text: "Sharp edges" }],
|
||||||
items: [
|
|
||||||
{
|
|
||||||
icon: Zap,
|
|
||||||
text: "Modern look"},
|
|
||||||
{
|
|
||||||
icon: CheckCircle,
|
|
||||||
text: "Sharp edges"},
|
|
||||||
],
|
|
||||||
reverse: true,
|
reverse: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Beard Grooming", description: "Sculpted to suit your jawline perfectly with premium products.", media: {
|
title: "Beard Grooming", description: "Sculpted to suit your jawline perfectly with premium products.", media: { imageSrc: "http://img.b2bpic.net/free-photo/headshot-thoughtful-handsome-man-looking-intrigued-squinting-thinking-about-something-standin_1258-163720.jpg", imageAlt: "Beard grooming" },
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/headshot-thoughtful-handsome-man-looking-intrigued-squinting-thinking-about-something-standin_1258-163720.jpg", imageAlt: "Beard grooming"},
|
items: [{ icon: Award, text: "Detail focused" }, { icon: Star, text: "Professional care" }],
|
||||||
items: [
|
|
||||||
{
|
|
||||||
icon: Award,
|
|
||||||
text: "Detail focused"},
|
|
||||||
{
|
|
||||||
icon: Star,
|
|
||||||
text: "Professional care"},
|
|
||||||
],
|
|
||||||
reverse: false,
|
reverse: false,
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
@@ -162,12 +96,9 @@ export default function LandingPage() {
|
|||||||
gridVariant="three-columns-all-equal-width"
|
gridVariant="three-columns-all-equal-width"
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
members={[
|
members={[
|
||||||
{
|
{ id: "1", name: "Semir", role: "Founder & Master Barber", description: "Mastering the craft with years of experience and sharp precision.", imageSrc: "http://img.b2bpic.net/free-photo/hipster-style-bearded-man-white-shirt-studio-black-background_158595-1828.jpg?_wi=2" },
|
||||||
id: "1", name: "Semir", role: "Founder & Master Barber", description: "Mastering the craft with years of experience and sharp precision.", imageSrc: "http://img.b2bpic.net/free-photo/hipster-style-bearded-man-white-shirt-studio-black-background_158595-1828.jpg?_wi=2"},
|
{ id: "2", name: "Efe", role: "Style Specialist", description: "Energy, style, and precision for every unique client.", imageSrc: "http://img.b2bpic.net/free-photo/pleased-young-afro-american-male-barber-wearing-uniform-holding-barber-tools-pointing-them_141793-116999.jpg?_wi=2" },
|
||||||
{
|
{ id: "3", name: "Join Us", role: "Looking for barbers", description: "We are growing. Join our team of experts.", imageSrc: "http://img.b2bpic.net/free-photo/hipster-style-bearded-man-white-shirt-studio-black-background_158595-1828.jpg?_wi=3" },
|
||||||
id: "2", name: "Efe", role: "Style Specialist", description: "Energy, style, and precision for every unique client.", imageSrc: "http://img.b2bpic.net/free-photo/pleased-young-afro-american-male-barber-wearing-uniform-holding-barber-tools-pointing-them_141793-116999.jpg?_wi=2"},
|
|
||||||
{
|
|
||||||
id: "3", name: "Join Us", role: "Looking for barbers", description: "We are growing. Join our team of experts.", imageSrc: "http://img.b2bpic.net/free-photo/hipster-style-bearded-man-white-shirt-studio-black-background_158595-1828.jpg?_wi=3"},
|
|
||||||
]}
|
]}
|
||||||
title="The Craftsmen"
|
title="The Craftsmen"
|
||||||
description="Meet the team that keeps the Danforth looking sharp."
|
description="Meet the team that keeps the Danforth looking sharp."
|
||||||
@@ -175,39 +106,27 @@ export default function LandingPage() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="reviews" data-section="reviews">
|
<div id="reviews" data-section="reviews">
|
||||||
<TestimonialCardFifteen
|
<TestimonialCardTwo
|
||||||
|
title="What Our Clients Say"
|
||||||
|
description="Real stories from those who trust us with their look."
|
||||||
|
animationType="blur-reveal"
|
||||||
|
textboxLayout="default"
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
testimonial="I left feeling fresh and confident. Amazing service from Sam and the team. Highly recommend this place."
|
testimonials={[
|
||||||
rating={5}
|
{ id: "1", name: "Paul S.", role: "Local Client", testimonial: "I left feeling fresh and confident. Amazing service from Sam and the team. Highly recommend this place.", imageSrc: "http://img.b2bpic.net/free-photo/barber-putting-cape-clients-neck_107420-94792.jpg?_wi=2" },
|
||||||
author="Paul S."
|
{ id: "2", name: "Shubham A.", role: "Local Client", testimonial: "He really takes his time to understand what you want. Best cut in the city.", imageSrc: "http://img.b2bpic.net/free-photo/hairstyle-supplies_1157-7704.jpg?_wi=1" }
|
||||||
avatars={[
|
|
||||||
{
|
|
||||||
src: "http://img.b2bpic.net/free-photo/young-bearded-man-getting-haircut-by-hairdresser-while-sitting-chair-barbershop-barber-soul_627829-6410.jpg", alt: "Client 1"},
|
|
||||||
{
|
|
||||||
src: "http://img.b2bpic.net/free-photo/barber-putting-cape-clients-neck_107420-94792.jpg", alt: "Client 2"},
|
|
||||||
{
|
|
||||||
src: "http://img.b2bpic.net/free-photo/stylish-bearded-male-sunglasses-grey-background_613910-10286.jpg", alt: "Client 3"},
|
|
||||||
{
|
|
||||||
src: "http://img.b2bpic.net/free-photo/headshot-thoughtful-handsome-man-looking-intrigued-squinting-thinking-about-something-standin_1258-163720.jpg", alt: "Client 4"},
|
|
||||||
{
|
|
||||||
src: "http://img.b2bpic.net/free-photo/positive-hipster-male-dressed-black-t-shirt-holds-head-with-tattooed-arms_613910-9176.jpg", alt: "Client 5"},
|
|
||||||
]}
|
]}
|
||||||
ratingAnimation="slide-up"
|
|
||||||
avatarsAnimation="slide-up"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="contact" data-section="contact">
|
<div id="contact" data-section="contact">
|
||||||
<ContactText
|
<ContactText
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
background={{
|
background={{ variant: "canvas-reveal" }}
|
||||||
variant: "canvas-reveal"}}
|
|
||||||
text="Ready to get looking sharp? Book your appointment at SH Cutz today."
|
text="Ready to get looking sharp? Book your appointment at SH Cutz today."
|
||||||
buttons={[
|
buttons={[
|
||||||
{
|
{ text: "Call Now", href: "tel:+1416" },
|
||||||
text: "Call Now", href: "tel:+1416"},
|
{ text: "Email Us", href: "mailto:shcutz@gmail.com" },
|
||||||
{
|
|
||||||
text: "Email Us", href: "mailto:shcutz@gmail.com"},
|
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -219,32 +138,23 @@ export default function LandingPage() {
|
|||||||
columns={[
|
columns={[
|
||||||
{
|
{
|
||||||
title: "Navigate", items: [
|
title: "Navigate", items: [
|
||||||
{
|
{ label: "Our Story", href: "#about" },
|
||||||
label: "Our Story", href: "#about"},
|
{ label: "Services", href: "#services" },
|
||||||
{
|
{ label: "The Team", href: "#team" },
|
||||||
label: "Services", href: "#services"},
|
{ label: "Reviews", href: "#reviews" },
|
||||||
{
|
{ label: "Location", href: "#location" },
|
||||||
label: "The Team", href: "#team"},
|
|
||||||
{
|
|
||||||
label: "Reviews", href: "#reviews"},
|
|
||||||
{
|
|
||||||
label: "Location", href: "#location"},
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Hours", items: [
|
title: "Hours", items: [
|
||||||
{
|
{ label: "Mon-Sat: 9am-7pm", href: "#" },
|
||||||
label: "Mon-Sat: 9am-7pm", href: "#"},
|
{ label: "Sun: 10am-5pm", href: "#" },
|
||||||
{
|
|
||||||
label: "Sun: 10am-5pm", href: "#"},
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Connect", items: [
|
title: "Connect", items: [
|
||||||
{
|
{ label: "Book Now", href: "#booking" },
|
||||||
label: "Book Now", href: "#booking"},
|
{ label: "Privacy Policy", href: "#" },
|
||||||
{
|
|
||||||
label: "Privacy Policy", href: "#"},
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
|
|||||||
@@ -11,14 +11,14 @@
|
|||||||
--background-accent: #ffffff; */
|
--background-accent: #ffffff; */
|
||||||
|
|
||||||
--background: #1A1A18;
|
--background: #1A1A18;
|
||||||
--card: #2C2C28;
|
--card: #9a9292;
|
||||||
--foreground: #F5F0E8;
|
--foreground: #dedada;
|
||||||
--primary-cta: #C9A84C;
|
--primary-cta: #C9A84C;
|
||||||
--primary-cta-text: #1A1A18;
|
--primary-cta-text: #1A1A18;
|
||||||
--secondary-cta: #3E3E38;
|
--secondary-cta: #3E3E38;
|
||||||
--secondary-cta-text: #F5F0E8;
|
--secondary-cta-text: #F5F0E8;
|
||||||
--accent: #6B6860;
|
--accent: #78746d;
|
||||||
--background-accent: #1A1A18;
|
--background-accent: #000000;
|
||||||
|
|
||||||
/* 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);
|
||||||
|
|||||||
Reference in New Issue
Block a user