Merge version_1 into main
Merge version_1 into main
This commit was merged in pull request #1.
This commit is contained in:
399
src/app/page.tsx
399
src/app/page.tsx
@@ -29,290 +29,139 @@ export default function LandingPage() {
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Features",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Motion and Frame"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="Motion and Frame"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
logoText="Motion and Frame"
|
||||
description="Where story meets precision. We craft cinematic motion for brands that demand perfection."
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Project",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/modern-luxury-authentic-dining-room-interior-design-with-picture-frame_53876-128701.jpg"
|
||||
imageAlt="cinematic creative studio space warm light"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{ variant: "gradient-bars" }}
|
||||
logoText="Motion and Frame"
|
||||
description="Where story meets precision. We craft cinematic motion for brands that demand perfection."
|
||||
buttons={[{ text: "Start Project", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/modern-luxury-authentic-dining-room-interior-design-with-picture-frame_53876-128701.jpg"
|
||||
imageAlt="cinematic creative studio space warm light"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "Visual Storytellers",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/table-with-content-creator-stuff-camera-microphone-tripod-headphones-working-from-home_1268-17410.jpg",
|
||||
alt: "film production studio professional gear",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
content: " at the Edge of Craft.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{ type: "text", content: "Visual Storytellers" },
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-photo/table-with-content-creator-stuff-camera-microphone-tripod-headphones-working-from-home_1268-17410.jpg", alt: "film production studio professional gear" },
|
||||
{ type: "text", content: " at the Edge of Craft." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardEight
|
||||
textboxLayout="inline-image"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Fluid Motion",
|
||||
description: "Seamless camera movement and dynamic editing transitions.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/lights-prisms-effect-close-up_23-2148917876.jpg",
|
||||
imageAlt: "smooth motion blur abstract photography",
|
||||
},
|
||||
{
|
||||
title: "Precision Framing",
|
||||
description: "Every shot composed with mathematical precision and cinematic intent.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/video-camera-film-reels_23-2147807400.jpg",
|
||||
imageAlt: "precision film camera gear overhead",
|
||||
},
|
||||
{
|
||||
title: "Color Grading",
|
||||
description: "Sophisticated post-production color science that defines your brand's look.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/line-shaped-neon-lights-background_23-2147815446.jpg",
|
||||
imageAlt: "digital motion editing software concept",
|
||||
},
|
||||
]}
|
||||
title="Professional Cinematography Services"
|
||||
description="Our expertise spans across high-end visual storytelling, technical precision, and aesthetic curation."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardEight
|
||||
textboxLayout="inline-image"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Fluid Motion", description: "Seamless camera movement and dynamic editing transitions.", imageSrc: "http://img.b2bpic.net/free-photo/lights-prisms-effect-close-up_23-2148917876.jpg", imageAlt: "smooth motion blur abstract photography" },
|
||||
{ title: "Precision Framing", description: "Every shot composed with mathematical precision and cinematic intent.", imageSrc: "http://img.b2bpic.net/free-photo/video-camera-film-reels_23-2147807400.jpg", imageAlt: "precision film camera gear overhead" },
|
||||
{ title: "Color Grading", description: "Sophisticated post-production color science that defines your brand's look.", imageSrc: "http://img.b2bpic.net/free-photo/line-shaped-neon-lights-background_23-2147815446.jpg", imageAlt: "digital motion editing software concept" }
|
||||
]}
|
||||
title="Professional Cinematography Services"
|
||||
description="Our expertise spans across high-end visual storytelling, technical precision, and aesthetic curation."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
icon: Award,
|
||||
title: "Awards Won",
|
||||
value: "24+",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
icon: Film,
|
||||
title: "Films Completed",
|
||||
value: "150+",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
icon: Clock,
|
||||
title: "Hours of Footage",
|
||||
value: "5000+",
|
||||
},
|
||||
]}
|
||||
title="Our Impact"
|
||||
description="Numbers behind the frames we create for our clients."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", icon: Award, title: "Awards Won", value: "24+" },
|
||||
{ id: "m2", icon: Film, title: "Films Completed", value: "150+" },
|
||||
{ id: "m3", icon: Clock, title: "Hours of Footage", value: "5000+" }
|
||||
]}
|
||||
title="Our Impact"
|
||||
description="Numbers behind the frames we create for our clients."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Lumina Media",
|
||||
"Apex Creative",
|
||||
"Visionary Films",
|
||||
"Echo Productions",
|
||||
"Nova Studio",
|
||||
"Zenith Arts",
|
||||
"Atlas Media",
|
||||
]}
|
||||
title="Trusted by Visionaries"
|
||||
description="Industry-leading brands trust our studio for their visual storytelling needs."
|
||||
/>
|
||||
</div>
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={["Lumina Media", "Apex Creative", "Visionary Films", "Echo Productions", "Nova Studio", "Zenith Arts", "Atlas Media"]}
|
||||
title="Trusted by Visionaries"
|
||||
description="Industry-leading brands trust our studio for their visual storytelling needs."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Elena Rossi",
|
||||
role: "Creative Director",
|
||||
testimonial: "Motion and Frame transformed our campaign into a cinematic experience.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg",
|
||||
imageAlt: "creative industry professional portrait",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Marcus Chen",
|
||||
role: "Brand Manager",
|
||||
testimonial: "The precision and attention to detail in every frame is unparalleled.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-model-smiling-urban-building-shiny-background_23-2147869624.jpg",
|
||||
imageAlt: "advertising director professional portrait",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Sophie Dubois",
|
||||
role: "Head of Production",
|
||||
testimonial: "Truly professional in their approach and creative output.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/male-white-shirt-holds-photo-camera-isolated-grey_613910-463.jpg",
|
||||
imageAlt: "film editor professional portrait",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Jordan Smith",
|
||||
role: "Founder",
|
||||
testimonial: "They captured the exact emotion we needed for our launch video.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-man-darkroom_23-2149893830.jpg",
|
||||
imageAlt: "art director professional portrait",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Alex Rivier",
|
||||
role: "Executive Producer",
|
||||
testimonial: "A reliable partner for high-stakes visual projects.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/successful-businessman-imagines-great-career_1163-5478.jpg",
|
||||
imageAlt: "marketing executive portrait modern style",
|
||||
},
|
||||
]}
|
||||
title="Client Perspectives"
|
||||
description="Voices from those who have partnered with our creative studio."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Elena Rossi", role: "Creative Director", testimonial: "Motion and Frame transformed our campaign into a cinematic experience.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg", imageAlt: "creative industry professional portrait" },
|
||||
{ id: "t2", name: "Marcus Chen", role: "Brand Manager", testimonial: "The precision and attention to detail in every frame is unparalleled.", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-model-smiling-urban-building-shiny-background_23-2147869624.jpg", imageAlt: "advertising director professional portrait" },
|
||||
{ id: "t3", name: "Sophie Dubois", role: "Head of Production", testimonial: "Truly professional in their approach and creative output.", imageSrc: "http://img.b2bpic.net/free-photo/male-white-shirt-holds-photo-camera-isolated-grey_613910-463.jpg", imageAlt: "film editor professional portrait" },
|
||||
{ id: "t4", name: "Jordan Smith", role: "Founder", testimonial: "They captured the exact emotion we needed for our launch video.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-man-darkroom_23-2149893830.jpg", imageAlt: "art director professional portrait" },
|
||||
{ id: "t5", name: "Alex Rivier", role: "Executive Producer", testimonial: "A reliable partner for high-stakes visual projects.", imageSrc: "http://img.b2bpic.net/free-photo/successful-businessman-imagines-great-career_1163-5478.jpg", imageAlt: "marketing executive portrait modern style" }
|
||||
]}
|
||||
title="Client Perspectives"
|
||||
description="Voices from those who have partnered with our creative studio."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "How does the project process work?",
|
||||
content: "We follow a discovery, concept, shoot, and polish cycle tailored to your vision.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Do you work with remote clients?",
|
||||
content: "Yes, we handle end-to-end production with seamless collaboration tools.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "What is the typical turnaround time?",
|
||||
content: "Varies by project scale, typically 4-8 weeks for high-end cinematic work.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/3d-render-modern-home-office_1048-17374.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
title="Production Insights"
|
||||
description="Answers to commonly asked questions about our creative workflow."
|
||||
faqsAnimation="slide-up"
|
||||
imageAlt="clean creative desk interior design"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "How does the project process work?", content: "We follow a discovery, concept, shoot, and polish cycle tailored to your vision." },
|
||||
{ id: "f2", title: "Do you work with remote clients?", content: "Yes, we handle end-to-end production with seamless collaboration tools." },
|
||||
{ id: "f3", title: "What is the typical turnaround time?", content: "Varies by project scale, typically 4-8 weeks for high-end cinematic work." }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/3d-render-modern-home-office_1048-17374.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
faqsAnimation="slide-up"
|
||||
title="Production Insights"
|
||||
description="Answers to commonly asked questions about our creative workflow."
|
||||
imageAlt="clean creative desk interior design"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Begin Your Project"
|
||||
description="Let's bring your vision to life. Share the details and we'll be in touch."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/low-angle-perspective-waiting-room_122409-38.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
imageAlt="minimalist creative agency wall interior"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
tag="Contact Us"
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
title="Begin Your Project"
|
||||
description="Let's bring your vision to life. Share the details and we'll be in touch."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/low-angle-perspective-waiting-room_122409-38.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
imageAlt="minimalist creative agency wall interior"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Portfolio",
|
||||
href: "#portfolio",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Services",
|
||||
items: [
|
||||
{
|
||||
label: "Cinematography",
|
||||
href: "#services",
|
||||
},
|
||||
{
|
||||
label: "Post Production",
|
||||
href: "#services",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Connect",
|
||||
items: [
|
||||
{
|
||||
label: "Twitter",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Motion and Frame"
|
||||
copyrightText="© 2025 Motion and Frame. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{ title: "Company", items: [{ label: "About", href: "#about" }, { label: "Portfolio", href: "#portfolio" }] },
|
||||
{ title: "Services", items: [{ label: "Cinematography", href: "#services" }, { label: "Post Production", href: "#services" }] },
|
||||
{ title: "Connect", items: [{ label: "Twitter", href: "#" }, { label: "Instagram", href: "#" }] }
|
||||
]}
|
||||
logoText="Motion and Frame"
|
||||
copyrightText="© 2025 Motion and Frame. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user