198 lines
12 KiB
TypeScript
198 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
|
|
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
|
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
|
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
import ContactFaq from '@/components/sections/contact/ContactFaq';
|
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
|
import { Film, Sparkles, Award, Lightbulb, Phone } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="small"
|
|
sizing="largeSmall"
|
|
background="noiseDiagonalGradient"
|
|
cardStyle="inset"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{ name: "Work", id: "featured-work" },
|
|
{ name: "Process", id: "process" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{ text: "Get In Touch", href: "contact" }}
|
|
brandName="Creative Director"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardTestimonial
|
|
title="Stories Worth Telling"
|
|
description="Creative director and editor crafting compelling visual narratives that transform brands and captivate audiences through strategic storytelling and meticulous editing."
|
|
tag="Portfolio"
|
|
tagIcon={Film}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "glowing-orb" }}
|
|
imageSrc="http://img.b2bpic.net/free-photo/creative-videographer-editing-movie-computer-from-home-girlfriend-sofa-background_482257-31238.jpg"
|
|
imageAlt="creative director film production video editing production studio"
|
|
mediaAnimation="slide-up"
|
|
testimonials={[
|
|
{
|
|
name: "Sarah Mitchell", handle: "Creative Director, Brand Studio", testimonial: "Exceptional vision combined with flawless execution. Transformed our brand narrative completely.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/attractive-blond-business-woman-white-shirt-grey-background_613910-11739.jpg", imageAlt: "professional headshot portrait creative professional team member"
|
|
},
|
|
{
|
|
name: "James Chen", handle: "Producer, Film House", testimonial: "The editing precision and creative choices elevated every frame. Truly visionary work.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg?_wi=1", imageAlt: "professional headshot portrait executive team member"
|
|
},
|
|
{
|
|
name: "Emma Rodriguez", handle: "CEO, Digital Agency", testimonial: "A rare combination of technical mastery and creative brilliance. Unforgettable deliverables.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg?_wi=2", imageAlt: "professional headshot portrait business professional team member"
|
|
}
|
|
]}
|
|
buttons={[
|
|
{ text: "Explore My Work", href: "#featured-work" },
|
|
{ text: "Start a Project", href: "#contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MetricSplitMediaAbout
|
|
title="Storytelling Through Craft"
|
|
description="With over a decade of experience, I specialize in transforming complex brand visions into compelling visual stories. As both a creative director and editor, I bring a unique perspective to every project—understanding narrative flow at every stage of production and post-production."
|
|
tag="Creative Vision"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
metrics={[
|
|
{ value: "150+", title: "Projects Completed" },
|
|
{ value: "25", title: "Awards Won" }
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/man-filming-technology-review-recommending-newly-launched-dj-controller_482257-124553.jpg"
|
|
imageAlt="creative director professional at work video editor filmmaker"
|
|
mediaAnimation="slide-up"
|
|
metricsAnimation="slide-up"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="featured-work" data-section="featured-work">
|
|
<FeatureCardNineteen
|
|
title="Signature Projects"
|
|
description="A curated selection of work that showcases strategic vision, creative execution, and transformative impact"
|
|
tag="Case Studies"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
id: 1,
|
|
tag: "Brand Identity", title: "Global Tech Launch", subtitle: "From concept to market impact", description: "Directed a comprehensive brand campaign for an international technology company. Led creative strategy, coordinated multi-location shoots, and oversaw post-production to create a cohesive narrative across 12 digital assets and a 60-second broadcast spot. Result: 340% increase in brand awareness.", imageSrc: "http://img.b2bpic.net/free-photo/businessman-holding-digital-tablet-with-digital-marketing-graph_9975-22063.jpg", imageAlt: "technology commercial tech campaign product launch digital marketing"
|
|
},
|
|
{
|
|
id: 2,
|
|
tag: "Documentary", title: "Human Stories Series", subtitle: "Five-part narrative documentary", description: "Creative direction and editing of an intimate documentary series exploring social impact. Directed interviews, curated visual language, and crafted emotional arcs through precise editing. Each 25-minute episode resonates deeply with viewers through authentic storytelling and cinematographic excellence.", imageSrc: "http://img.b2bpic.net/free-photo/professional-cameraman-recording-poeple-watching-football-public-place-night_1268-18138.jpg", imageAlt: "documentary filming film production interview setup cinema camera"
|
|
},
|
|
{
|
|
id: 3,
|
|
tag: "Commercial", title: "Premium Lifestyle Brand", subtitle: "Luxury campaign execution", description: "Directed and edited a high-end commercial campaign featuring cinematic aesthetics and sophisticated color grading. Creative direction established a distinctive visual language that elevated brand perception. Post-production refinements transformed raw footage into polished, award-winning content.", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-rich-woman-sitting-home_23-2149722596.jpg", imageAlt: "luxury brand premium lifestyle luxury commercial high-end product"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "View Full Portfolio", href: "#" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="process" data-section="process">
|
|
<MetricSplitMediaAbout
|
|
title="My Creative Process"
|
|
description="Every exceptional project follows a deliberate methodology. I begin with deep discovery—understanding your vision, audience, and goals. Throughout production, I maintain creative consistency while remaining adaptable. Post-production is where the real magic happens: meticulous editing, color grading, and sound design transform raw footage into a compelling narrative."
|
|
tag="Methodology"
|
|
tagIcon={Lightbulb}
|
|
tagAnimation="slide-up"
|
|
metrics={[
|
|
{ value: "100%", title: "Client Satisfaction" },
|
|
{ value: "2x", title: "Faster Turnaround" }
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/businessmen-hands-wooden-table-with-documents-drafts_176420-367.jpg"
|
|
imageAlt="creative workflow brainstorming production planning creative collaboration"
|
|
mediaAnimation="slide-up"
|
|
metricsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
testimonial="Working with this creative director was transformative. The vision, attention to detail, and ability to translate complex ideas into stunning visuals exceeded every expectation. A true creative partner."
|
|
rating={5}
|
|
author="Michael Torres, Executive Producer"
|
|
avatars={[
|
|
{ src: "http://img.b2bpic.net/free-vector/pack-male-female-avatars_23-2147666977.jpg", alt: "avatar profile picture user icon character portrait" },
|
|
{ src: "http://img.b2bpic.net/free-vector/pack-male-female-avatars_23-2147666977.jpg", alt: "avatar profile picture user icon character portrait" },
|
|
{ src: "http://img.b2bpic.net/free-vector/pack-male-female-avatars_23-2147666977.jpg", alt: "avatar profile picture user icon character portrait" },
|
|
{ src: "http://img.b2bpic.net/free-vector/pack-male-female-avatars_23-2147666977.jpg", alt: "avatar profile picture user icon character portrait" },
|
|
{ src: "http://img.b2bpic.net/free-vector/pack-male-female-avatars_23-2147666977.jpg", alt: "avatar profile picture user icon character portrait" },
|
|
{ src: "http://img.b2bpic.net/free-vector/pack-male-female-avatars_23-2147666977.jpg", alt: "avatar profile picture user icon character portrait" }
|
|
]}
|
|
ratingAnimation="slide-up"
|
|
avatarsAnimation="slide-up"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="call-to-action" data-section="call-to-action">
|
|
<ContactFaq
|
|
ctaTitle="Ready to Tell Your Story?"
|
|
ctaDescription="Let's collaborate on a project that captures your vision and resonates with your audience."
|
|
ctaButton={{ text: "Schedule a Creative Call", href: "#contact" }}
|
|
ctaIcon={Phone}
|
|
faqs={[
|
|
{
|
|
id: "1", title: "What's your typical project timeline?", content: "Project timelines vary based on scope and complexity. A typical commercial runs 4-8 weeks from concept to delivery, while longer-form content may take 8-12 weeks. We create custom timelines based on your specific needs."
|
|
},
|
|
{
|
|
id: "2", title: "Do you work with remote teams?", content: "Absolutely. I collaborate seamlessly with remote teams using industry-standard tools and clear communication protocols. Distance is never a limitation to creative excellence."
|
|
},
|
|
{
|
|
id: "3", title: "What's your revision process?", content: "I include revision rounds in every project. We work iteratively until you're completely satisfied. My goal is to ensure the final product exceeds your expectations."
|
|
},
|
|
{
|
|
id: "4", title: "Can you handle rush projects?", content: "Yes, depending on availability. Rush projects require expedited timelines and may involve premium rates, but we can accommodate urgent needs without compromising quality."
|
|
}
|
|
]}
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
accordionAnimationType="smooth"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="Creative Director"
|
|
leftLink={{ text: "Privacy Policy", href: "#" }}
|
|
rightLink={{ text: "Contact", href: "#contact" }}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|