Update src/app/page.tsx
This commit is contained in:
137
src/app/page.tsx
137
src/app/page.tsx
@@ -2,29 +2,30 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||||
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
|
||||
import { Scissors, MapPin, Phone, Star } from "lucide-react";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
|
||||
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
|
||||
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
|
||||
import TeamCardOne from '@/components/sections/team/TeamCardOne';
|
||||
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
|
||||
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
||||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="compact"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="mediumLargeSizeLargeTitles"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
@@ -36,103 +37,101 @@ export default function LandingPage() {
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Khadija Dev"
|
||||
brandName="Sterling Barber Co."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitTestimonial
|
||||
title="Khadija - Full Stack Web Developer"
|
||||
description="Building modern, scalable, and beautiful web applications. Turning complex ideas into seamless user experiences."
|
||||
title="Sterling Barber Co. Manchester"
|
||||
description="Masterful grooming for the modern man. Located in the heart of Manchester, we provide expert cuts, precise shaves, and premium beard care."
|
||||
imageSrc="https://images.unsplash.com/photo-1599351431202-180f0b4d0083?q=80&w=2000"
|
||||
background={{ variant: "plain" }}
|
||||
mediaAnimation="slide-up"
|
||||
imageSrc="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?q=80&w=2000"
|
||||
imageAlt="Developer workspace"
|
||||
mediaAnimation="blur-reveal"
|
||||
testimonials={[
|
||||
{ name: "Sarah J.", handle: "@sarahdev", testimonial: "Khadija's code is clean and reliable. An exceptional partner.", rating: 5 }
|
||||
{
|
||||
name: "James R.", handle: "@jamesr", testimonial: "The best barber in Manchester. Consistent quality every single time.", rating: 5,
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardOne
|
||||
title="My Tech Stack"
|
||||
description="Specializing in modern frameworks and scalable architecture."
|
||||
title="Our Services"
|
||||
description="We take pride in every cut. Here is what we offer at The Astley."
|
||||
animationType="slide-up"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Frontend Development", description: "React, Next.js, TailwindCSS.", imageSrc: "https://images.unsplash.com/photo-1633356122544-f134324a6cee?q=80&w=500" },
|
||||
{ title: "Backend Architecture", description: "Node.js, PostgreSQL, Serverless.", imageSrc: "https://images.unsplash.com/photo-1558494949-ef010bbebb31?q=80&w=500" },
|
||||
{ title: "Cloud & DevOps", description: "AWS, Vercel, CI/CD pipelines.", imageSrc: "https://images.unsplash.com/photo-1667372333796-681948834465?q=80&w=500" }
|
||||
{
|
||||
title: "Classic Haircut", description: "Traditional precision cutting tailored to your style.", imageSrc: "https://images.unsplash.com/photo-1503951914875-452162b09f6f?q=80&w=500"
|
||||
},
|
||||
{
|
||||
title: "Hot Towel Shave", description: "Relaxing hot towel treatment with a clean, smooth shave.", imageSrc: "https://images.unsplash.com/photo-1626282874430-c11ae32d2898?q=80&w=500"
|
||||
},
|
||||
{
|
||||
title: "Beard Grooming", description: "Expert shaping, trimming, and conditioning for a sharp beard.", imageSrc: "https://images.unsplash.com/photo-1585747860715-2ba37e788b70?q=80&w=500"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardOne
|
||||
title="Professional Profile"
|
||||
description="Focused on efficiency, user-centric design, and high-performance applications."
|
||||
members={[{ id: "kh", name: "Khadija", role: "Full Stack Developer" }]}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
title="Meet Our Barbers"
|
||||
description="Our team of experienced barbers in Manchester is dedicated to your look."
|
||||
members={[
|
||||
{ id: "b1", name: "Alex Sterling", role: "Master Barber", imageSrc: "https://images.unsplash.com/photo-1596461404966-09ea830e27bc?q=80&w=500" },
|
||||
{ id: "b2", name: "Ben Davies", role: "Senior Barber", imageSrc: "https://images.unsplash.com/photo-1594988305421-158329947117?q=80&w=500" }
|
||||
]}
|
||||
gridVariant="one-large-left-three-stacked-right"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardThree
|
||||
title="Development Packages"
|
||||
description="Custom web solutions for your business needs."
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
title="Our Rates"
|
||||
description="Simple, transparent pricing for premium grooming."
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{ id: "p1", name: "Landing Page", price: "$500", features: ["Responsive", "SEO Optimized", "Contact Form"], buttons: [{ text: "Get Started" }] },
|
||||
{ id: "p2", name: "WebApp", price: "$1500+", features: ["Authentication", "Database", "Dashboard"], buttons: [{ text: "Discuss Project" }] }
|
||||
{ id: "c1", name: "Haircut", price: "£25", features: ["Consultation", "Precision Cut", "Style Finish"], buttons: [{ text: "Book Now" }] },
|
||||
{ id: "c2", name: "Shave", price: "£20", features: ["Hot Towel", "Pre-shave Oil", "Moisturizer"], buttons: [{ text: "Book Now" }] },
|
||||
{ id: "c3", name: "Full Grooming", price: "£40", features: ["Haircut & Beard", "Hot Towel", "Detailed Finish"], buttons: [{ text: "Book Now" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
title="What Clients Say"
|
||||
description="Trusted by forward-thinking businesses."
|
||||
kpiItems={[{ value: "50+", label: "Projects" }, { value: "5", label: "Years Exp" }, { value: "100%", label: "Happy" }]}
|
||||
testimonials={[]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
sideTitle="Frequently Asked Questions"
|
||||
faqs={[{ id: "q1", title: "How do you start?", content: "Initial discovery call followed by wireframing and prototyping." }]}
|
||||
faqsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
title="Get In Touch"
|
||||
description="Looking to build something great together?"
|
||||
inputs={[{ name: "name", type: "text", placeholder: "Your Name" }, { name: "email", type: "email", placeholder: "Email Address" }]}
|
||||
useInvertedBackground={false}
|
||||
title="Visit Our Salon"
|
||||
description="Unit 3, The Astley, 61 Houldsworth St, Manchester M1 2FA. We look forward to seeing you."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Name" },
|
||||
{ name: "email", type: "email", placeholder: "Email" }
|
||||
]}
|
||||
imageSrc="https://images.unsplash.com/photo-1507413245164-6160d8298b31?q=80&w=1000"
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="Khadija Dev"
|
||||
columns={[{ title: "Links", items: [{ label: "GitHub", href: "#" }, { label: "LinkedIn", href: "#" }] }]}
|
||||
logoText="Sterling Barber Co."
|
||||
columns={[
|
||||
{ title: "Visit Us", items: [{ label: "The Astley, Manchester", href: "#" }] },
|
||||
{ title: "Contact", items: [{ label: "+44 161 451 4597", href: "tel:+441614514597" }] }
|
||||
]}
|
||||
copyrightText="© 2024 Sterling Barber Co. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user