Merge version_1 into main #1
245
src/app/page.tsx
245
src/app/page.tsx
@@ -32,22 +32,10 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Portfolio",
|
||||
id: "portfolio",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Portfolio", id: "portfolio" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Lens & Light"
|
||||
/>
|
||||
@@ -55,33 +43,15 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Cinematic Storytelling for Your Brand"
|
||||
description="Professional videography services that turn your vision into high-impact visual stories. Dedicated to quality, detail, and authentic connection."
|
||||
tag="Expert Videography"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-reporter-preparing-interview_23-2149183613.jpg",
|
||||
imageAlt: "cinematic videographer filming",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-reporter-preparing-interview_23-2149183613.jpg", imageAlt: "cinematic videographer filming"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bright-lights-dark-room_23-2147786121.jpg",
|
||||
imageAlt: "cinema camera lens closeup",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-cameraman-doing-his-job_23-2149037890.jpg",
|
||||
imageAlt: "Close up on cameraman doing his job",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/sideways-man-photographer-looking-through-camera-copy-space_23-2148424406.jpg",
|
||||
imageAlt: "Sideways man photographer looking through camera and copy space",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-filming-with-professional-camera_23-2149066352.jpg",
|
||||
imageAlt: "Man filming with a professional camera",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bright-lights-dark-room_23-2147786121.jpg", imageAlt: "cinema camera lens closeup"}
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
rating={5}
|
||||
@@ -93,19 +63,9 @@ export default function LandingPage() {
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "Capturing moments that matter.",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/smart-blonde-female-photographer-trendy-clothes-posing-while-leaning-professional-camera-with-tripod-studio-looks-camera-isolated-gray-background_613910-18613.jpg",
|
||||
alt: "filmmaker portrait studio",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
content: "I am a filmmaker committed to authenticity, precision, and the art of the perfect frame. Let’s create something timeless.",
|
||||
},
|
||||
{ type: "text", content: "Capturing moments that matter." },
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-photo/smart-blonde-female-photographer-trendy-clothes-posing-while-leaning-professional-camera-with-tripod-studio-looks-camera-isolated-gray-background_613910-18613.jpg", alt: "filmmaker portrait studio" },
|
||||
{ type: "text", content: "I am a filmmaker committed to authenticity, precision, and the art of the perfect frame. Let’s create something timeless." },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -117,48 +77,9 @@ export default function LandingPage() {
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Brand Campaign",
|
||||
price: "View Project",
|
||||
variant: "2024",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mesmerizing-view-frozen-ground-field-sunset_181624-14140.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Corporate Interview",
|
||||
price: "View Project",
|
||||
variant: "2024",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/employee-talking-man-video-call-communication-startup-office-business-woman-using-remote-video-conference-have-conversation-about-project-planning-with-colleague-online-meeting_482257-35268.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Artistic Video",
|
||||
price: "View Project",
|
||||
variant: "2023",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/couple-taking-photos-light-movie-projector_23-2149377327.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Product Commercial",
|
||||
price: "View Project",
|
||||
variant: "2023",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-young-man-filming-his-video-blog-episode_171337-5513.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Event Highlight",
|
||||
price: "View Project",
|
||||
variant: "2023",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/round-circle-logo-label-template_53876-21275.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Travel Cinematic",
|
||||
price: "View Project",
|
||||
variant: "2024",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/aerial-shot-eltz-castle-surrounded-by-trees-wierschem-germany_181624-3193.jpg",
|
||||
},
|
||||
{ id: "p1", name: "Brand Campaign", price: "View Project", variant: "2024", imageSrc: "http://img.b2bpic.net/free-photo/mesmerizing-view-frozen-ground-field-sunset_181624-14140.jpg" },
|
||||
{ id: "p2", name: "Corporate Interview", price: "View Project", variant: "2024", imageSrc: "http://img.b2bpic.net/free-photo/employee-talking-man-video-call-communication-startup-office-business-woman-using-remote-video-conference-have-conversation-about-project-planning-with-colleague-online-meeting_482257-35268.jpg" },
|
||||
{ id: "p3", name: "Artistic Video", price: "View Project", variant: "2023", imageSrc: "http://img.b2bpic.net/free-photo/couple-taking-photos-light-movie-projector_23-2149377327.jpg" }
|
||||
]}
|
||||
title="Portfolio Showcase"
|
||||
description="Selected works reflecting diverse production styles and visual aesthetics."
|
||||
@@ -170,31 +91,8 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Film Production",
|
||||
description: "Full-cycle production from pre-planning to final color grading.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/collage-about-movie-time-with-film-roll_23-2149946310.jpg",
|
||||
},
|
||||
{
|
||||
title: "Advanced Color Grading",
|
||||
description: "Professional color science applied to every frame to match your brand style.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/photographer-using-headphones-listen-favorite-songs-while-using-retouching-software_482257-82252.jpg",
|
||||
},
|
||||
{
|
||||
title: "Sound Design",
|
||||
description: "Immersive audio engineering to elevate your video production.",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/audio-control-panel_23-2147496553.jpg",
|
||||
},
|
||||
{
|
||||
title: "4K Editing",
|
||||
description: "Ultra-high definition editing services for professional output.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-camera-with-photo-film_23-2150985292.jpg",
|
||||
},
|
||||
{
|
||||
title: "Consulting",
|
||||
description: "Strategic guidance for your video production pipeline.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-creative-office-media-agency-with-multi-monitor-computer-setup-used-image-retouching-professional-post-processing-photography-studio-with-editing-software-interface-pc-screens_482257-73687.jpg",
|
||||
},
|
||||
{ title: "Film Production", description: "Full-cycle production from pre-planning to final color grading.", imageSrc: "http://img.b2bpic.net/free-photo/collage-about-movie-time-with-film-roll_23-2149946310.jpg" },
|
||||
{ title: "Advanced Color Grading", description: "Professional color science applied to every frame to match your brand style.", imageSrc: "http://img.b2bpic.net/free-photo/photographer-using-headphones-listen-favorite-songs-while-using-retouching-software_482257-82252.jpg" }
|
||||
]}
|
||||
title="My Professional Services"
|
||||
description="Comprehensive video production tailored to your specific needs."
|
||||
@@ -208,27 +106,8 @@ export default function LandingPage() {
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "150+",
|
||||
title: "Projects Completed",
|
||||
description: "Successful film projects delivered",
|
||||
icon: Award,
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "20M+",
|
||||
title: "Views Generated",
|
||||
description: "Total audience reach across platforms",
|
||||
icon: Eye,
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "100%",
|
||||
title: "Client Satisfaction",
|
||||
description: "Commitment to project excellence",
|
||||
icon: CheckCircle,
|
||||
},
|
||||
{ id: "m1", value: "150+", title: "Projects Completed", description: "Successful film projects delivered", icon: Award },
|
||||
{ id: "m2", value: "20M+", title: "Views Generated", description: "Total audience reach across platforms", icon: Eye }
|
||||
]}
|
||||
title="Production Milestones"
|
||||
description="Numbers behind the creative work."
|
||||
@@ -239,42 +118,12 @@ export default function LandingPage() {
|
||||
<TestimonialCardSix
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Alex River",
|
||||
handle: "@alexriver",
|
||||
testimonial: "Amazing eye for detail, the final product exceeded expectations.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/business-lady-looking-copyspace-with-interest_1262-2957.jpg",
|
||||
},
|
||||
id: "t1", name: "Alex River", handle: "@alexriver", testimonial: "Amazing eye for detail, the final product exceeded expectations.", imageSrc: "http://img.b2bpic.net/free-photo/business-lady-looking-copyspace-with-interest_1262-2957.jpg"},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Sarah J.",
|
||||
handle: "@sarahj",
|
||||
testimonial: "Professional, efficient, and creatively brilliant.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-smiling-brunette-asian-woman-sitting-with-graphic-pen-looking-happy-drawing_1258-199033.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Mark D.",
|
||||
handle: "@markd",
|
||||
testimonial: "The best videographer I've collaborated with. Seamless process.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Emma K.",
|
||||
handle: "@emmak",
|
||||
testimonial: "Incredible sound design and color grading work.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-confident-asian-man-with-arms-crossed_1262-884.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "John B.",
|
||||
handle: "@johnb",
|
||||
testimonial: "Turned our small project into a cinematic masterpiece.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-positive-businesswoman_1098-3531.jpg",
|
||||
},
|
||||
id: "t2", name: "Sarah J.", handle: "@sarahj", testimonial: "Professional, efficient, and creatively brilliant.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-smiling-brunette-asian-woman-sitting-with-graphic-pen-looking-happy-drawing_1258-199033.jpg"}
|
||||
]}
|
||||
title="Client Feedback"
|
||||
description="Hear from those who trusted me with their vision."
|
||||
@@ -286,21 +135,8 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "faq-1",
|
||||
title: "What is your turnaround time?",
|
||||
content: "Typically 2-3 weeks depending on project scale.",
|
||||
},
|
||||
{
|
||||
id: "faq-2",
|
||||
title: "Do you travel?",
|
||||
content: "Yes, I travel globally for creative productions.",
|
||||
},
|
||||
{
|
||||
id: "faq-3",
|
||||
title: "What gear do you use?",
|
||||
content: "I use industry-leading cinema cameras and professional post-production software.",
|
||||
},
|
||||
{ id: "faq-1", title: "What is your turnaround time?", content: "Typically 2-3 weeks depending on project scale." },
|
||||
{ id: "faq-2", title: "Do you travel?", content: "Yes, I travel globally for creative productions." }
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Answers to common queries about my workflow and services."
|
||||
@@ -311,18 +147,11 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
background={{ variant: "radial-gradient" }}
|
||||
tag="Get in touch"
|
||||
title="Ready to tell your story?"
|
||||
description="Let's collaborate on your next project. Fill out the form or reach out via email."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Me",
|
||||
href: "mailto:hello@lensandlight.com",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Contact Me", href: "mailto:hello@lensandlight.com" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -332,31 +161,11 @@ export default function LandingPage() {
|
||||
logoText="Lens & Light"
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation",
|
||||
items: [
|
||||
{
|
||||
label: "Portfolio",
|
||||
href: "#portfolio",
|
||||
},
|
||||
{
|
||||
label: "Services",
|
||||
href: "#services",
|
||||
},
|
||||
],
|
||||
title: "Navigation", items: [{ label: "Portfolio", href: "#portfolio" }, { label: "Services", href: "#services" }]
|
||||
},
|
||||
{
|
||||
title: "Social",
|
||||
items: [
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "https://instagram.com",
|
||||
},
|
||||
{
|
||||
label: "Twitter",
|
||||
href: "https://twitter.com",
|
||||
},
|
||||
],
|
||||
},
|
||||
title: "Social", items: [{ label: "Instagram", href: "https://instagram.com" }, { label: "Twitter", href: "https://twitter.com" }]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user