Merge version_1 into main #1
353
src/app/page.tsx
353
src/app/page.tsx
@@ -17,250 +17,131 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="background-highlight"
|
||||
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">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Portfolio",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Lens & Frame"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Portfolio", id: "features" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Lens & Frame"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Capturing Moments, Creating Stories."
|
||||
description="Professional videography and photography services for brands and individuals. Delivering high-impact visuals that resonate."
|
||||
kpis={[
|
||||
{
|
||||
value: "100+",
|
||||
label: "Projects Completed",
|
||||
},
|
||||
{
|
||||
value: "50+",
|
||||
label: "Happy Clients",
|
||||
},
|
||||
{
|
||||
value: "10+",
|
||||
label: "Years Experience",
|
||||
},
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
buttons={[
|
||||
{
|
||||
text: "View Portfolio",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
text: "Get in Touch",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/man-photographer-sitting-floor-studio-professional-photographer-work_627829-6975.jpg"
|
||||
imageAlt="Cinematic production setup"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/confident-african-american-businessman-black-classic-jacket-isolated-dark-background_613910-17869.jpg",
|
||||
alt: "Client 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-stylish-woman-posing-fashionable-outfit_23-2149021786.jpg",
|
||||
alt: "Client 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/man-posing-black-white-side-view_23-2149411415.jpg",
|
||||
alt: "Client 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-beautiful-young-business-woman_158595-4750.jpg",
|
||||
alt: "Client 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg",
|
||||
alt: "Client 5",
|
||||
},
|
||||
]}
|
||||
avatarText="Trusted by 50+ clients"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Cinematic",
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Photography",
|
||||
icon: Camera,
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Storytelling",
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Videography",
|
||||
icon: Film,
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Creative",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{
|
||||
variant: "gradient-bars"}}
|
||||
title="Capturing Moments, Creating Stories."
|
||||
description="Professional videography and photography services for brands and individuals. Delivering high-impact visuals that resonate."
|
||||
kpis={[
|
||||
{ value: "100+", label: "Projects Completed" },
|
||||
{ value: "50+", label: "Happy Clients" },
|
||||
{ value: "10+", label: "Years Experience" },
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
buttons={[
|
||||
{ text: "View Portfolio", href: "#features" },
|
||||
{ text: "Get in Touch", href: "#contact" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/man-photographer-sitting-floor-studio-professional-photographer-work_627829-6975.jpg"
|
||||
imageAlt="Cinematic production setup"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/confident-african-american-businessman-black-classic-jacket-isolated-dark-background_613910-17869.jpg", alt: "Client 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-stylish-woman-posing-fashionable-outfit_23-2149021786.jpg", alt: "Client 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/man-posing-black-white-side-view_23-2149411415.jpg", alt: "Client 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-beautiful-young-business-woman_158595-4750.jpg", alt: "Client 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg", alt: "Client 5" },
|
||||
]}
|
||||
avatarText="Trusted by 50+ clients"
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "Cinematic" },
|
||||
{ type: "text-icon", text: "Photography", icon: Camera },
|
||||
{ type: "text", text: "Storytelling" },
|
||||
{ type: "text-icon", text: "Videography", icon: Film },
|
||||
{ type: "text", text: "Creative" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={true}
|
||||
tag="About Us"
|
||||
title="Visual Storytellers"
|
||||
description="We believe in the power of an image and the emotion of a video. Every frame is composed with intention, passion, and a commitment to quality."
|
||||
subdescription="Whether it's a corporate event, a lifestyle shoot, or creative brand film, we approach every project with a unique perspective and technical expertise."
|
||||
icon={Camera}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/beautiful-pretty-young-woman-wearing-black-office-dress-bw-headscarf-sitting-desk-with-pc-computer-while-creating-advertising-private-kindergarten-creativity-art-business-work-concept_344912-93.jpg"
|
||||
imageAlt="Portrait in creative studio"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={true}
|
||||
tag="About Us"
|
||||
title="Visual Storytellers"
|
||||
description="We believe in the power of an image and the emotion of a video. Every frame is composed with intention, passion, and a commitment to quality."
|
||||
subdescription="Whether it's a corporate event, a lifestyle shoot, or creative brand film, we approach every project with a unique perspective and technical expertise."
|
||||
icon={Camera}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/beautiful-pretty-young-woman-wearing-black-office-dress-bw-headscarf-sitting-desk-with-pc-computer-while-creating-advertising-private-kindergarten-creativity-art-business-work-concept_344912-93.jpg"
|
||||
imageAlt="Portrait in creative studio"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardEight
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Photography",
|
||||
description: "High-end portrait, event, and commercial photography.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/newlyweds-laughing_1153-48.jpg",
|
||||
imageAlt: "Portrait photography",
|
||||
},
|
||||
{
|
||||
title: "Videography",
|
||||
description: "Cinematic storytelling, corporate videos, and social content.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blogger_23-2148349536.jpg",
|
||||
imageAlt: "Videography setup",
|
||||
},
|
||||
{
|
||||
title: "Creative Direction",
|
||||
description: "Collaborative brainstorming and visual strategy for brands.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/couple-checking-photos-camera-outdoor-shoot_53876-123660.jpg",
|
||||
imageAlt: "Landscape photography",
|
||||
},
|
||||
]}
|
||||
title="Our Services"
|
||||
description="Diverse creative solutions tailored to your specific vision."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardEight
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Photography", description: "High-end portrait, event, and commercial photography.", imageSrc: "http://img.b2bpic.net/free-photo/newlyweds-laughing_1153-48.jpg", imageAlt: "Portrait photography" },
|
||||
{ title: "Videography", description: "Cinematic storytelling, corporate videos, and social content.", imageSrc: "http://img.b2bpic.net/free-photo/blogger_23-2148349536.jpg", imageAlt: "Videography setup" },
|
||||
{ title: "Creative Direction", description: "Collaborative brainstorming and visual strategy for brands.", imageSrc: "http://img.b2bpic.net/free-photo/couple-checking-photos-camera-outdoor-shoot_53876-123660.jpg", imageAlt: "Landscape photography" },
|
||||
]}
|
||||
title="Our Services"
|
||||
description="Diverse creative solutions tailored to your specific vision."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Alex Rivers",
|
||||
handle: "@alexrivers",
|
||||
testimonial: "Exquisite work. Captured exactly the mood we needed.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/confident-african-american-businessman-black-classic-jacket-isolated-dark-background_613910-17869.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Sarah Chen",
|
||||
handle: "@sarahc",
|
||||
testimonial: "Professional, punctual, and highly creative.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-woman-posing-fashionable-outfit_23-2149021786.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Mark D.",
|
||||
handle: "@markd",
|
||||
testimonial: "Highly recommended for any commercial filming needs.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-posing-black-white-side-view_23-2149411415.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Elena V.",
|
||||
handle: "@elenav",
|
||||
testimonial: "Stunning visuals and great communication throughout.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-young-business-woman_158595-4750.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "John P.",
|
||||
handle: "@johnp",
|
||||
testimonial: "The best investment for our marketing collateral.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg",
|
||||
},
|
||||
]}
|
||||
title="Client Feedback"
|
||||
description="Trusted by visionary clients."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Alex Rivers", handle: "@alexrivers", testimonial: "Exquisite work. Captured exactly the mood we needed.", imageSrc: "http://img.b2bpic.net/free-photo/confident-african-american-businessman-black-classic-jacket-isolated-dark-background_613910-17869.jpg" },
|
||||
{ id: "2", name: "Sarah Chen", handle: "@sarahc", testimonial: "Professional, punctual, and highly creative.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-woman-posing-fashionable-outfit_23-2149021786.jpg" },
|
||||
{ id: "3", name: "Mark D.", handle: "@markd", testimonial: "Highly recommended for any commercial filming needs.", imageSrc: "http://img.b2bpic.net/free-photo/man-posing-black-white-side-view_23-2149411415.jpg" },
|
||||
{ id: "4", name: "Elena V.", handle: "@elenav", testimonial: "Stunning visuals and great communication throughout.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-young-business-woman_158595-4750.jpg" },
|
||||
{ id: "5", name: "John P.", handle: "@johnp", testimonial: "The best investment for our marketing collateral.", imageSrc: "http://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg" },
|
||||
]}
|
||||
title="Client Feedback"
|
||||
description="Trusted by visionary clients."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Let's Collaborate"
|
||||
description="Ready to bring your vision to life? Get in touch today."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email",
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Tell us about your project",
|
||||
rows: 4,
|
||||
required: true,
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/empty-architectural-office-filled-with-manufacturing-tools_482257-82937.jpg"
|
||||
imageAlt="Contact us image"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Let's Collaborate"
|
||||
description="Ready to bring your vision to life? Get in touch today."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Your Email", required: true },
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "Tell us about your project", rows: 4, required: true }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/empty-architectural-office-filled-with-manufacturing-tools_482257-82937.jpg"
|
||||
imageAlt="Contact us image"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Lens & Frame"
|
||||
leftLink={{
|
||||
text: "Privacy Policy",
|
||||
href: "#",
|
||||
}}
|
||||
rightLink={{
|
||||
text: "Instagram",
|
||||
href: "https://instagram.com",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Lens & Frame"
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "Instagram", href: "https://instagram.com" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user