Merge version_1 into main #1
490
src/app/page.tsx
490
src/app/page.tsx
@@ -29,348 +29,172 @@ export default function LandingPage() {
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Work",
|
||||
id: "work",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Editorial Studio"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Work", id: "work" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Editorial Studio"
|
||||
button={{ text: "Contact Me", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Precision Editorial for High-Impact Storytelling"
|
||||
description="I transform raw footage into compelling narratives. Bringing clarity, emotion, and technical excellence to every frame."
|
||||
buttons={[
|
||||
{
|
||||
text: "View My Work",
|
||||
href: "#work",
|
||||
},
|
||||
{
|
||||
text: "Get In Touch",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-notebook-store-desk_23-2149142185.jpg",
|
||||
imageAlt: "editorial desk professional workspace",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/content-specialist-working-graphic-design-media-company-selecting-best-editorial-pictures-social-media-post-expert-editing-photos-advertising-agency-office-close-up-shot_482257-73457.jpg",
|
||||
imageAlt: "video editing interface closeup",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pensive-tailor-sitting-table-with-hand-chin-sewing-workshop_613910-5306.jpg",
|
||||
imageAlt: "modern film production editing",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/empty-specialized-post-processing-studio-with-editing-software-interface-pc-screens_482257-82272.jpg",
|
||||
imageAlt: "cinematic color grading screen",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/minimalist-spacious-interior-design_23-2150378903.jpg",
|
||||
imageAlt: "creative content editing desk",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/electronic-gadgets-used-podcasting_482257-91517.jpg",
|
||||
imageAlt: "film editing equipment professional",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Precision Editorial for High-Impact Storytelling"
|
||||
description="I transform raw footage into compelling narratives. Bringing clarity, emotion, and technical excellence to every frame."
|
||||
buttons={[
|
||||
{ text: "View My Work", href: "#work" },
|
||||
{ text: "Get In Touch", href: "#contact" },
|
||||
]}
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/high-angle-notebook-store-desk_23-2149142185.jpg", imageAlt: "editorial desk professional workspace" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/content-specialist-working-graphic-design-media-company-selecting-best-editorial-pictures-social-media-post-expert-editing-photos-advertising-agency-office-close-up-shot_482257-73457.jpg", imageAlt: "video editing interface closeup" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/pensive-tailor-sitting-table-with-hand-chin-sewing-workshop_613910-5306.jpg", imageAlt: "modern film production editing" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/empty-specialized-post-processing-studio-with-editing-software-interface-pc-screens_482257-82272.jpg", imageAlt: "cinematic color grading screen" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/minimalist-spacious-interior-design_23-2150378903.jpg", imageAlt: "creative content editing desk" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/electronic-gadgets-used-podcasting_482257-91517.jpg", imageAlt: "film editing equipment professional" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={true}
|
||||
tag="About Me"
|
||||
title="Editor, Storyteller, Creator"
|
||||
description="With over 8 years in the industry, I specialize in crafting narratives that resonate. My philosophy is simple: clean cuts for clean stories."
|
||||
subdescription="Whether it's long-form documentaries or high-energy marketing campaigns, I bring a meticulous eye to every project."
|
||||
icon={PenTool}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/software-developer-agency-office-coding-her-computer_482257-126122.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
imageAlt="professional headshot creative editor"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={true}
|
||||
tag="About Me"
|
||||
title="Editor, Storyteller, Creator"
|
||||
description="With over 8 years in the industry, I specialize in crafting narratives that resonate. My philosophy is simple: clean cuts for clean stories."
|
||||
subdescription="Whether it's long-form documentaries or high-energy marketing campaigns, I bring a meticulous eye to every project."
|
||||
icon={PenTool}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/software-developer-agency-office-coding-her-computer_482257-126122.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
imageAlt="professional headshot creative editor"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyOne
|
||||
useInvertedBackground={false}
|
||||
title="My Creative Workflow"
|
||||
description="Tailored solutions for every editing challenge."
|
||||
accordionItems={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Narrative Crafting",
|
||||
content: "I focus on pacing and emotional arc to ensure your audience stays engaged.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Technical Precision",
|
||||
content: "Mastering color grading, sound design, and complex visual effects for seamless delivery.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Collaborative Process",
|
||||
content: "Your vision is paramount. I ensure clear communication and fast turnaround at every stage.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/smart-medical-lab-workstation-background-with-digital-apps-computer-screen_482257-124525.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
imageAlt="editorial desk professional workspace"
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyOne
|
||||
useInvertedBackground={false}
|
||||
title="My Creative Workflow"
|
||||
description="Tailored solutions for every editing challenge."
|
||||
accordionItems={[
|
||||
{ id: "1", title: "Narrative Crafting", content: "I focus on pacing and emotional arc to ensure your audience stays engaged." },
|
||||
{ id: "2", title: "Technical Precision", content: "Mastering color grading, sound design, and complex visual effects for seamless delivery." },
|
||||
{ id: "3", title: "Collaborative Process", content: "Your vision is paramount. I ensure clear communication and fast turnaround at every stage." },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/smart-medical-lab-workstation-background-with-digital-apps-computer-screen_482257-124525.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
imageAlt="editorial desk professional workspace"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="work" data-section="work">
|
||||
<ProductCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="asymmetric-60-wide-40-narrow"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
brand: "Documentary",
|
||||
name: "Life in Focus",
|
||||
price: "Featured",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/girl-with-pigtails-white-blouse-old-library_627829-6499.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
brand: "Branded",
|
||||
name: "Echoes of Modernism",
|
||||
price: "Client-Work",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/it-s-movie-time-lettering-vintage-movie-camera_23-2148416753.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
brand: "Film",
|
||||
name: "Silent Horizon",
|
||||
price: "Indie",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/interconnected-screens-collage-showing-modern-social-media-feed-clips_482257-129691.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
brand: "Social",
|
||||
name: "The Brand Pulse",
|
||||
price: "Campaign",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-small-decorative-objects_23-2149865501.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
brand: "Music",
|
||||
name: "Midnight Flow",
|
||||
price: "Clip",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-male-with-camera-cave-taking-picture_181624-3533.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
brand: "Editorial",
|
||||
name: "Modern Muse",
|
||||
price: "Feature",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-compostable-containers-arrangement_23-2149353101.jpg",
|
||||
},
|
||||
]}
|
||||
title="Selected Editorial Work"
|
||||
description="A showcase of recent narratives, films, and branded content."
|
||||
/>
|
||||
</div>
|
||||
<div id="work" data-section="work">
|
||||
<ProductCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="asymmetric-60-wide-40-narrow"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "1", brand: "Documentary", name: "Life in Focus", price: "Featured", rating: 5, reviewCount: "48", imageSrc: "http://img.b2bpic.net/free-photo/girl-with-pigtails-white-blouse-old-library_627829-6499.jpg" },
|
||||
{ id: "2", brand: "Branded", name: "Echoes of Modernism", price: "Client-Work", rating: 5, reviewCount: "32", imageSrc: "http://img.b2bpic.net/free-photo/it-s-movie-time-lettering-vintage-movie-camera_23-2148416753.jpg" },
|
||||
{ id: "3", brand: "Film", name: "Silent Horizon", price: "Indie", rating: 5, reviewCount: "25", imageSrc: "http://img.b2bpic.net/free-photo/interconnected-screens-collage-showing-modern-social-media-feed-clips_482257-129691.jpg" },
|
||||
{ id: "4", brand: "Social", name: "The Brand Pulse", price: "Campaign", rating: 5, reviewCount: "89", imageSrc: "http://img.b2bpic.net/free-photo/still-life-small-decorative-objects_23-2149865501.jpg" },
|
||||
{ id: "5", brand: "Music", name: "Midnight Flow", price: "Clip", rating: 5, reviewCount: "41", imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-male-with-camera-cave-taking-picture_181624-3533.jpg" },
|
||||
{ id: "6", brand: "Editorial", name: "Modern Muse", price: "Feature", rating: 5, reviewCount: "15", imageSrc: "http://img.b2bpic.net/free-photo/top-view-compostable-containers-arrangement_23-2149353101.jpg" },
|
||||
]}
|
||||
title="Selected Editorial Work"
|
||||
description="A showcase of recent narratives, films, and branded content."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Miller",
|
||||
role: "Creative Director",
|
||||
company: "Studio B",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-serious-business-leader-sitting_1262-4831.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Marcus Thorne",
|
||||
role: "Film Producer",
|
||||
company: "Global Media",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/browneyed-shorthaired-young-lady-stylish-floral-summer-dress-looks-into-camera-smiles-gently-poses-cozy-room_197531-29853.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Elena Rodriguez",
|
||||
role: "Lead Editor",
|
||||
company: "Creative Lab",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-businessman-with-tie_1098-2867.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David Chen",
|
||||
role: "Content Lead",
|
||||
company: "Innovate",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-woman_23-2149022640.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Sophia Lee",
|
||||
role: "Founder",
|
||||
company: "StartUp HQ",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-business-woman-with-executive-job-working-with-management-marketing-statistics-computer-office-worker-analyzing-research-charts-data-reports_482257-41126.jpg",
|
||||
},
|
||||
]}
|
||||
title="Client Perspectives"
|
||||
description="Words from those I've had the pleasure to work with."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Sarah Miller", role: "Creative Director", company: "Studio B", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/closeup-serious-business-leader-sitting_1262-4831.jpg" },
|
||||
{ id: "2", name: "Marcus Thorne", role: "Film Producer", company: "Global Media", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/browneyed-shorthaired-young-lady-stylish-floral-summer-dress-looks-into-camera-smiles-gently-poses-cozy-room_197531-29853.jpg" },
|
||||
{ id: "3", name: "Elena Rodriguez", role: "Lead Editor", company: "Creative Lab", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-businessman-with-tie_1098-2867.jpg" },
|
||||
{ id: "4", name: "David Chen", role: "Content Lead", company: "Innovate", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-woman_23-2149022640.jpg" },
|
||||
{ id: "5", name: "Sophia Lee", role: "Founder", company: "StartUp HQ", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-business-woman-with-executive-job-working-with-management-marketing-statistics-computer-office-worker-analyzing-research-charts-data-reports_482257-41126.jpg" },
|
||||
]}
|
||||
title="Client Perspectives"
|
||||
description="Words from those I've had the pleasure to work with."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
icon: Film,
|
||||
title: "Projects Completed",
|
||||
value: "150+",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
icon: Clock,
|
||||
title: "Hours Edited",
|
||||
value: "2000+",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
icon: Award,
|
||||
title: "Awards & Distinctions",
|
||||
value: "12",
|
||||
},
|
||||
]}
|
||||
title="Impact by the Numbers"
|
||||
description="Quantifying the creative editorial results."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{ id: "m1", icon: Film, title: "Projects Completed", value: "150+" },
|
||||
{ id: "m2", icon: Clock, title: "Hours Edited", value: "2000+" },
|
||||
{ id: "m3", icon: Award, title: "Awards & Distinctions", value: "12" },
|
||||
]}
|
||||
title="Impact by the Numbers"
|
||||
description="Quantifying the creative editorial results."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "What is your typical turnaround?",
|
||||
content: "Turnaround depends on complexity, but I prioritize clear timelines to meet your launch dates.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Do you offer remote collaboration?",
|
||||
content: "Yes, I am fully equipped for remote editorial workflows and project management.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "What editing suites do you work with?",
|
||||
content: "I am proficient in Premiere Pro, DaVinci Resolve, and Final Cut Pro.",
|
||||
},
|
||||
]}
|
||||
title="Common Inquiries"
|
||||
description="Clear answers about how we can work together."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "1", title: "What is your typical turnaround?", content: "Turnaround depends on complexity, but I prioritize clear timelines to meet your launch dates." },
|
||||
{ id: "2", title: "Do you offer remote collaboration?", content: "Yes, I am fully equipped for remote editorial workflows and project management." },
|
||||
{ id: "3", title: "What editing suites do you work with?", content: "I am proficient in Premiere Pro, DaVinci Resolve, and Final Cut Pro." },
|
||||
]}
|
||||
title="Common Inquiries"
|
||||
description="Clear answers about how we can work together."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
tag="Let's Connect"
|
||||
title="Ready for your next project?"
|
||||
description="Send a message and let's bring your vision to life."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
tag="Let's Connect"
|
||||
title="Ready for your next project?"
|
||||
description="Send a message and let's bring your vision to life."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Editorial Studio"
|
||||
columns={[
|
||||
{
|
||||
title: "Portfolio",
|
||||
items: [
|
||||
{
|
||||
label: "Selected Work",
|
||||
href: "#work",
|
||||
},
|
||||
{
|
||||
label: "Services",
|
||||
href: "#features",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Connect",
|
||||
items: [
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
label: "LinkedIn",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Editorial Studio"
|
||||
columns={[
|
||||
{
|
||||
title: "Portfolio", items: [
|
||||
{ label: "Selected Work", href: "#work" },
|
||||
{ label: "Services", href: "#features" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Connect", items: [
|
||||
{ label: "Contact", href: "#contact" },
|
||||
{ label: "LinkedIn", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user