Update src/app/page.tsx
This commit is contained in:
437
src/app/page.tsx
437
src/app/page.tsx
@@ -20,315 +20,156 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Work",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="My Insta Portfolio"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Work", id: "features" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="My Insta Portfolio"
|
||||
button={{ text: "Book Session", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardScroll
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Capturing Life's Best Moments"
|
||||
description="Visual storyteller based in the city. Exploring the intersection of lifestyle and fine art photography through a unique lens."
|
||||
tag="Featured Photographer"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/selfconfident-young-calm-woman-stylish-black-silk-home-suit-looks-into-window-stands-cozy-l_197531-33674.jpg"
|
||||
imageAlt="Professional photographer holding a camera"
|
||||
tagIcon={Camera}
|
||||
buttons={[
|
||||
{
|
||||
text: "View Portfolio",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
text: "Book a Session",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardScroll
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Capturing Life's Best Moments"
|
||||
description="Visual storyteller based in the city. Exploring the intersection of lifestyle and fine art photography through a unique lens."
|
||||
tag="Featured Photographer"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/selfconfident-young-calm-woman-stylish-black-silk-home-suit-looks-into-window-stands-cozy-l_197531-33674.jpg"
|
||||
imageAlt="Professional photographer holding a camera"
|
||||
tagIcon={Camera}
|
||||
buttons={[
|
||||
{ text: "View Portfolio", href: "#features" },
|
||||
{ text: "Book a Session", href: "#contact" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={true}
|
||||
title="My Creative Journey"
|
||||
metrics={[
|
||||
{
|
||||
icon: Camera,
|
||||
label: "Shoots Completed",
|
||||
value: "250+",
|
||||
},
|
||||
{
|
||||
icon: MapPin,
|
||||
label: "Countries Visited",
|
||||
value: "15",
|
||||
},
|
||||
{
|
||||
icon: Award,
|
||||
label: "Gallery Features",
|
||||
value: "12",
|
||||
},
|
||||
{
|
||||
icon: Heart,
|
||||
label: "Happy Clients",
|
||||
value: "200+",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={true}
|
||||
title="My Creative Journey"
|
||||
metrics={[
|
||||
{ icon: Camera, label: "Shoots Completed", value: "250+" },
|
||||
{ icon: MapPin, label: "Countries Visited", value: "15" },
|
||||
{ icon: Award, label: "Gallery Features", value: "12" },
|
||||
{ icon: Heart, label: "Happy Clients", value: "200+" },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBorderGlow
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
icon: Instagram,
|
||||
title: "Lifestyle Sessions",
|
||||
description: "Authentic moments captured in their natural environment.",
|
||||
},
|
||||
{
|
||||
icon: Camera,
|
||||
title: "Portrait Photography",
|
||||
description: "Professional portraiture designed to capture your personality.",
|
||||
},
|
||||
{
|
||||
icon: Map,
|
||||
title: "Travel Documentation",
|
||||
description: "Visual storytelling for global travel brands and explorers.",
|
||||
},
|
||||
{
|
||||
icon: Film,
|
||||
title: "Event Coverage",
|
||||
description: "Professional documentation for your corporate or private events.",
|
||||
},
|
||||
{
|
||||
icon: Palette,
|
||||
title: "Commercial Work",
|
||||
description: "High-end imagery crafted for brand identity and marketing.",
|
||||
},
|
||||
]}
|
||||
title="Photography Services"
|
||||
description="Professional services tailored to capture your authentic story."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBorderGlow
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ icon: Instagram, title: "Lifestyle Sessions", description: "Authentic moments captured in their natural environment." },
|
||||
{ icon: Camera, title: "Portrait Photography", description: "Professional portraiture designed to capture your personality." },
|
||||
{ icon: Map, title: "Travel Documentation", description: "Visual storytelling for global travel brands and explorers." },
|
||||
{ icon: Film, title: "Event Coverage", description: "Professional documentation for your corporate or private events." },
|
||||
{ icon: Palette, title: "Commercial Work", description: "High-end imagery crafted for brand identity and marketing." },
|
||||
]}
|
||||
title="Photography Services"
|
||||
description="Professional services tailored to capture your authentic story."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Miller",
|
||||
role: "Creative Director",
|
||||
testimonial: "Amazing eye for detail and color.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fashion-girl-standing-studio_1157-20868.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "James Chen",
|
||||
role: "Entrepreneur",
|
||||
testimonial: "The best session I've ever had.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-smiling-photographer-girl-taking-photos-using-her-retro-camera_158538-1379.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Elena Rossi",
|
||||
role: "Artist",
|
||||
testimonial: "Incredible, professional, and kind.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-business-man-posing-with-crossed-arms_23-2149206526.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David Park",
|
||||
role: "Model",
|
||||
testimonial: "Stunning results, highly recommend.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/unpleased-young-brunette-caucasian-girl-stands-with-crossed-arms-looking-side-pink_141793-92696.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Maya Jones",
|
||||
role: "Blogger",
|
||||
testimonial: "Beautiful work every single time.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-taking-photos_23-2148523902.jpg",
|
||||
},
|
||||
]}
|
||||
title="Client Voices"
|
||||
description="Hear what our amazing clients have to say."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Sarah Miller", role: "Creative Director", testimonial: "Amazing eye for detail and color.", imageSrc: "http://img.b2bpic.net/free-photo/fashion-girl-standing-studio_1157-20868.jpg" },
|
||||
{ id: "2", name: "James Chen", role: "Entrepreneur", testimonial: "The best session I've ever had.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-smiling-photographer-girl-taking-photos-using-her-retro-camera_158538-1379.jpg" },
|
||||
{ id: "3", name: "Elena Rossi", role: "Artist", testimonial: "Incredible, professional, and kind.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-business-man-posing-with-crossed-arms_23-2149206526.jpg" },
|
||||
{ id: "4", name: "David Park", role: "Model", testimonial: "Stunning results, highly recommend.", imageSrc: "http://img.b2bpic.net/free-photo/unpleased-young-brunette-caucasian-girl-stands-with-crossed-arms-looking-side-pink_141793-92696.jpg" },
|
||||
{ id: "5", name: "Maya Jones", role: "Blogger", testimonial: "Beautiful work every single time.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-taking-photos_23-2148523902.jpg" },
|
||||
]}
|
||||
title="Client Voices"
|
||||
description="Hear what our amazing clients have to say."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Adobe",
|
||||
"Canon",
|
||||
"Sony",
|
||||
"VSCO",
|
||||
"Lightroom",
|
||||
"Unsplash",
|
||||
"Pexels",
|
||||
]}
|
||||
title="Featured Partners"
|
||||
description="Trusted by leading brands and publications in the industry."
|
||||
/>
|
||||
</div>
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={["Adobe", "Canon", "Sony", "VSCO", "Lightroom", "Unsplash", "Pexels"]}
|
||||
title="Featured Partners"
|
||||
description="Trusted by leading brands and publications in the industry."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "How do I book?",
|
||||
content: "Contact me via email to start.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Do you travel?",
|
||||
content: "Yes, I am available globally.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "What equipment?",
|
||||
content: "Full frame professional gear.",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "What's the turnaround time?",
|
||||
content: "Typically 2-3 weeks depending on the project scope.",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
title: "Do you offer prints?",
|
||||
content: "Yes, high-quality fine art prints are available upon request.",
|
||||
},
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Answers to common photography questions."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "1", title: "How do I book?", content: "Contact me via email to start." },
|
||||
{ id: "2", title: "Do you travel?", content: "Yes, I am available globally." },
|
||||
{ id: "3", title: "What equipment?", content: "Full frame professional gear." },
|
||||
{ id: "4", title: "What's the turnaround time?", content: "Typically 2-3 weeks depending on the project scope." },
|
||||
{ id: "5", title: "Do you offer prints?", content: "Yes, high-quality fine art prints are available upon request." },
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Answers to common photography questions."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="blog" data-section="blog">
|
||||
<BlogCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Photography Insights"
|
||||
description="Latest tips and behind-the-scenes content."
|
||||
blogs={[
|
||||
{
|
||||
id: "1",
|
||||
category: "Tips",
|
||||
title: "Mastering Lighting",
|
||||
excerpt: "How to use natural light better.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-repairing-photo-camera_23-2149893864.jpg",
|
||||
authorName: "Me",
|
||||
authorAvatar: "http://img.b2bpic.net/free-photo/photographer-wearing-medical-mask_23-2148503474.jpg",
|
||||
date: "Oct 2024",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
category: "Gear",
|
||||
title: "The Best Lenses",
|
||||
excerpt: "Top lenses for street photography.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-makes-patriotic-gingerbread-support-ukraine_169016-20341.jpg",
|
||||
authorName: "Me",
|
||||
authorAvatar: "http://img.b2bpic.net/free-photo/improvement-potential-excellence-diagram-graphic-concept_53876-127463.jpg",
|
||||
date: "Sep 2024",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
category: "Workflows",
|
||||
title: "Editing Fast",
|
||||
excerpt: "Streamline your Lightroom workflow.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/block-spell-education-type-colorful_1172-160.jpg",
|
||||
authorName: "Me",
|
||||
authorAvatar: "http://img.b2bpic.net/free-photo/traveling-items-arrangement-flat-lay_23-2148971041.jpg",
|
||||
date: "Aug 2024",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="blog" data-section="blog">
|
||||
<BlogCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Photography Insights"
|
||||
description="Latest tips and behind-the-scenes content."
|
||||
blogs={[
|
||||
{ id: "1", category: "Tips", title: "Mastering Lighting", excerpt: "How to use natural light better.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-repairing-photo-camera_23-2149893864.jpg", authorName: "Me", authorAvatar: "http://img.b2bpic.net/free-photo/photographer-wearing-medical-mask_23-2148503474.jpg", date: "Oct 2024" },
|
||||
{ id: "2", category: "Gear", title: "The Best Lenses", excerpt: "Top lenses for street photography.", imageSrc: "http://img.b2bpic.net/free-photo/woman-makes-patriotic-gingerbread-support-ukraine_169016-20341.jpg", authorName: "Me", authorAvatar: "http://img.b2bpic.net/free-photo/improvement-potential-excellence-diagram-graphic-concept_53876-127463.jpg", date: "Sep 2024" },
|
||||
{ id: "3", category: "Workflows", title: "Editing Fast", excerpt: "Streamline your Lightroom workflow.", imageSrc: "http://img.b2bpic.net/free-photo/block-spell-education-type-colorful_1172-160.jpg", authorName: "Me", authorAvatar: "http://img.b2bpic.net/free-photo/traveling-items-arrangement-flat-lay_23-2148971041.jpg", date: "Aug 2024" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
title="Work Together"
|
||||
description="Let's create something meaningful together. Send me a message and we'll discuss your vision."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/business-man-working-his-desk-checking-his-laptop_23-2148488667.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
tag="Let's Connect"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "radial-gradient" }}
|
||||
title="Work Together"
|
||||
description="Let's create something meaningful together. Send me a message and we'll discuss your vision."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/business-man-working-his-desk-checking-his-laptop_23-2148488667.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
tag="Let's Connect"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Social",
|
||||
items: [
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Twitter",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2024 Portfolio"
|
||||
bottomRightText="Built with passion."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{ title: "Social", items: [{ label: "Instagram", href: "#" }, { label: "Twitter", href: "#" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
|
||||
]}
|
||||
bottomLeftText="© 2024 Portfolio"
|
||||
bottomRightText="Built with passion."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user