Files
2026-04-22 02:36:48 +00:00

196 lines
9.3 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import { Heart, Palette, PenTool, Sparkles, TrendingUp, Users } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="small"
sizing="largeSizeMediumTitles"
background="floatingGradient"
cardStyle="solid"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="layered"
headingFontWeight="medium"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ name: "About", id: "#about" },
{ name: "Expertise", id: "#expertise" },
{ name: "Testimonials", id: "#testimonials" },
{ name: "Contact", id: "#contact" },
]}
brandName="Personal Brand"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitKpi
background={{ variant: "plain" }}
title="Elevate Your Personal Brand"
description="I help professionals cultivate an authentic, calm, and colorful brand presence that truly resonates."
kpis={[
{ value: "10+", label: "Years Experience" },
{ value: "500+", label: "Successful Projects" },
{ value: "99%", label: "Client Satisfaction" },
]}
enableKpiAnimation={true}
buttons={[{ text: "Work With Me", href: "#contact" }]}
imageSrc="http://img.b2bpic.net/free-photo/portrait-young-woman-posing-house_344912-1165.jpg"
mediaAnimation="blur-reveal"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/pretty-attractive-young-mixed-race-model-with-large-afro-wearing-navy-jacket-her-naked-body-shorts_633478-1216.jpg", alt: "Portrait 1" },
{ src: "http://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg", alt: "Portrait 2" },
{ src: "http://img.b2bpic.net/free-photo/portrait-woman-looking-smiling-camera_197531-33494.jpg", alt: "Portrait 3" },
{ src: "http://img.b2bpic.net/free-photo/closeup-happy-young-caucasian-girl-with-wide-smile-looks-camera-blurred-background-brunette-with-long-hair-wears-green-shirt-emotions-people-concept_197531-32280.jpg", alt: "Portrait 4" },
{ src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "Portrait 5" },
]}
avatarText="Trusted by over 500+ happy clients"
marqueeItems={[
{ type: "text", text: "Brand Strategy" },
{ type: "text", text: "Visual Design" },
{ type: "text", text: "Content Marketing" },
{ type: "text", text: "Creative Consulting" },
{ type: "text", text: "Growth Mindset" },
]}
/>
</div>
<div id="about" data-section="about">
<TextSplitAbout
useInvertedBackground={false}
title="My Philosophy"
description={[
"Personal branding isn't about being loud—it's about being seen for who you really are.", "I believe in bringing calm, structured expertise to colorful, unique creative projects."]}
/>
</div>
<div id="expertise" data-section="expertise">
<FeatureCardTwentyFive
textboxLayout="split"
useInvertedBackground={false}
animationType="blur-reveal"
features={[
{
title: "Brand Strategy", description: "Defining your unique voice and market positioning.", icon: Sparkles,
mediaItems: [
{ imageSrc: "http://img.b2bpic.net/free-photo/top-view-laptop-supplies_23-2148219287.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/office-supplies-keyboard-coffee-cup-colorful-workplace_23-2148041885.jpg" },
],
},
{
title: "Visual Identity", description: "Creating vibrant color palettes and professional assets.", icon: Palette,
mediaItems: [
{ imageSrc: "http://img.b2bpic.net/free-photo/global-communication-hd-wallpaper-business-network-design_53876-153352.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/work-message-lightbox-arrangement_23-2149150447.jpg" },
],
},
{
title: "Content Design", description: "Writing and designing content that speaks to your audience.", icon: PenTool,
mediaItems: [
{ imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-watering-can-with-plant_23-2148269659.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-water-rings-with-contrasted-background-drop_23-2148358164.jpg" },
],
},
]}
title="My Core Expertise"
description="Comprehensive branding solutions designed to help you stand out with clarity and color."
/>
</div>
<div id="social-proof" data-section="social-proof">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={true}
names={["InnovateLab", "GrowthCo", "TechSphere", "CreativeMind", "BridgeVision", "FutureFocus", "SummitCorp"]}
title="Trusted by Leaders"
description="Collaborating with visionaries across diverse industries."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardThree
textboxLayout="split"
useInvertedBackground={false}
animationType="blur-reveal"
metrics={[
{ id: "m1", title: "Revenue Growth", value: "150%", icon: TrendingUp },
{ id: "m2", title: "Brand Reach", value: "2M+", icon: Users },
{ id: "m3", title: "Engagement Rate", value: "12%", icon: Heart },
]}
title="Impact by Numbers"
description="Tangible results behind every colorful creative strategy."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTen
textboxLayout="split"
useInvertedBackground={true}
testimonials={[
{ id: "t1", title: "Excellent Work", quote: "My brand has never felt more authentic.", name: "Sarah Johnson", role: "CEO", imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-standing-building-looking-straight-camera_1262-20433.jpg" },
{ id: "t2", title: "Highly Recommend", quote: "Such a calm and colorful approach to strategy.", name: "Michael Chen", role: "Founder", imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1689.jpg" },
{ id: "t3", title: "Game Changer", quote: "I feel confident in my new visual direction.", name: "Emily Rodriguez", role: "Director", imageSrc: "http://img.b2bpic.net/free-photo/close-up-positive-businesswoman_1098-3531.jpg" },
{ id: "t4", title: "Very Professional", quote: "Brought life to my vision effortlessly.", name: "David Kim", role: "Consultant", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-wearing-suit-black-white_23-2149411390.jpg" },
{ id: "t5", title: "Outstanding", quote: "The best personal branding experience I've had.", name: "Alex Smith", role: "Manager", imageSrc: "http://img.b2bpic.net/free-photo/positive-middle-aged-business-leader-window_1262-5388.jpg" },
]}
title="What They Say"
description="Calm, insightful, and incredibly professional branding results."
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
textboxLayout="split"
useInvertedBackground={false}
faqsAnimation="blur-reveal"
faqs={[
{ id: "f1", title: "How long is the process?", content: "Typically 4-6 weeks for full brand strategy." },
{ id: "f2", title: "Do you offer consultations?", content: "Yes, I offer free initial discovery calls." },
{ id: "f3", title: "Is your style always colorful?", content: "I tailor colors to your personality and goals." },
]}
imageSrc="http://img.b2bpic.net/free-photo/people-practicing-social-integration-workspace_23-2149405376.jpg"
mediaAnimation="blur-reveal"
title="Common Questions"
description="Everything you need to know about working with me."
/>
</div>
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={true}
background={{ variant: "plain" }}
text="Ready to bring your personal brand to life with color and calm?"
buttons={[{ text: "Book a Discovery Call", href: "#" }]}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Personal Brand"
leftLink={{ text: "Privacy Policy", href: "#" }}
rightLink={{ text: "© 2024 Personal Brand", href: "#" }}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}