266 lines
18 KiB
TypeScript
266 lines
18 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
|
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
|
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
|
|
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
|
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
|
import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import { Film, Zap, Scissors, Palette, Music, Layers, Sparkles, TrendingUp, Star, BookOpen, Quote } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumLarge"
|
|
sizing="large"
|
|
background="circleGradient"
|
|
cardStyle="glass-depth"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="light"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="CineEdit Studio"
|
|
navItems={[
|
|
{ name: "Portfolio", id: "portfolio" },
|
|
{ name: "Services", id: "services" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Testimonials", id: "testimonials" }
|
|
]}
|
|
button={{ text: "Get Started", href: "#contact" }}
|
|
animateOnLoad={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboard
|
|
logoText="CineEdit"
|
|
description="Transform your vision into cinematic reality. We craft stunning video edits that tell compelling stories and captivate audiences."
|
|
buttons={[
|
|
{ text: "Watch Portfolio", href: "#portfolio" },
|
|
{ text: "Book Now", href: "#contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
background={{ variant: "sparkles-gradient" }}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ar24aDL5BSXZpizkD8eFkp6rFq/a-modern-sleek-video-editing-workspace-w-1773336335771-98c73366.png"
|
|
imageAlt="Professional video editing workspace"
|
|
videoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ar24aDL5BSXZpizkD8eFkp6rFq/a-dynamic-montage-of-video-editing-highl-1773336336371-bb402228.png"
|
|
mediaAnimation="blur-reveal"
|
|
frameStyle="browser"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TestimonialAboutCard
|
|
tag="About Us"
|
|
tagIcon={Film}
|
|
title="Elevating video production to an art form with cutting-edge editing techniques and creative storytelling."
|
|
description="Founded in 2020"
|
|
subdescription="Award-winning creative studio"
|
|
icon={Sparkles}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ar24aDL5BSXZpizkD8eFkp6rFq/a-professional-video-editing-studio-with-1773336336401-cb4748a8.png"
|
|
imageAlt="Professional video editing studio"
|
|
mediaAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="portfolio" data-section="portfolio">
|
|
<FeatureHoverPattern
|
|
title="Our Capabilities"
|
|
description="Hover over each service to explore our expertise in delivering exceptional video content."
|
|
tag="Services"
|
|
tagIcon={Zap}
|
|
features={[
|
|
{
|
|
icon: Scissors,
|
|
title: "Video Editing", description: "Professional color grading, pacing, and narrative flow for impactful storytelling.", button: { text: "Learn More" }
|
|
},
|
|
{
|
|
icon: Palette,
|
|
title: "Color Grading", description: "Cinematic color correction and grading to enhance visual impact and mood.", button: { text: "Learn More" }
|
|
},
|
|
{
|
|
icon: Music,
|
|
title: "Audio Design", description: "Custom sound design and music integration for immersive audio-visual experiences.", button: { text: "Learn More" }
|
|
},
|
|
{
|
|
icon: Layers,
|
|
title: "Motion Graphics", description: "Dynamic animations and visual effects that bring your story to life.", button: { text: "Learn More" }
|
|
},
|
|
{
|
|
icon: Film,
|
|
title: "4K Optimization", description: "Ultra-high definition processing and delivery for premium quality content.", button: { text: "Learn More" }
|
|
},
|
|
{
|
|
icon: Sparkles,
|
|
title: "Conceptualization", description: "Creative direction and storyboarding to transform your ideas into visual excellence.", button: { text: "Learn More" }
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
carouselMode="buttons"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardEleven
|
|
title="Our Impact"
|
|
description="Proven results and industry recognition across diverse projects and clients."
|
|
tag="Results"
|
|
tagIcon={TrendingUp}
|
|
metrics={[
|
|
{
|
|
id: "1", value: "500+", title: "Projects Completed", description: "Professional videos edited and delivered", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ar24aDL5BSXZpizkD8eFkp6rFq/a-stunning-portfolio-showcase-displaying-1773336336257-e391601c.png", imageAlt: "Completed video projects showcase"
|
|
},
|
|
{
|
|
id: "2", value: "50M+", title: "Total Views", description: "Combined viewership across all platforms", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ar24aDL5BSXZpizkD8eFkp6rFq/an-abstract-visualization-of-50-million--1773336336191-4b8300f8.png", imageAlt: "Video analytics and statistics"
|
|
},
|
|
{
|
|
id: "3", value: "200+", title: "Happy Clients", description: "Satisfied creators and brands worldwide", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ar24aDL5BSXZpizkD8eFkp6rFq/a-diverse-group-of-happy-clients-and-bra-1773336335989-e348a57d.png", imageAlt: "Client testimonials and reviews"
|
|
},
|
|
{
|
|
id: "4", value: "15+", title: "Awards Won", description: "Industry recognition and accolades", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ar24aDL5BSXZpizkD8eFkp6rFq/a-prestigious-display-of-15-industry-awa-1773336336591-c42b2256.png", imageAlt: "Awards and industry recognition"
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwo
|
|
title="What Our Clients Say"
|
|
description="Real feedback from creators and brands who transformed their content with us."
|
|
tag="Testimonials"
|
|
tagIcon={Star}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Alex Chen", role: "Content Creator | 500K YouTube Followers", testimonial: "CineEdit transformed my YouTube channel. Their editing took my videos to the next level. Absolutely phenomenal work!", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ar24aDL5BSXZpizkD8eFkp6rFq/a-professional-headshot-of-alex-chen-an--1773336336154-ed286e11.png", imageAlt: "Alex Chen profile"
|
|
},
|
|
{
|
|
id: "2", name: "Sarah Martinez", role: "Brand Director | 2M Instagram Followers", testimonial: "The cinematic quality and attention to detail in every frame exceeded our expectations. They're true professionals.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ar24aDL5BSXZpizkD8eFkp6rFq/a-professional-headshot-of-sarah-martine-1773336335086-205874cd.png", imageAlt: "Sarah Martinez profile"
|
|
},
|
|
{
|
|
id: "3", name: "James Wilson", role: "Documentary Filmmaker | 25K Twitter Followers", testimonial: "Working with CineEdit was seamless. Their creative vision and technical expertise brought our story to life beautifully.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ar24aDL5BSXZpizkD8eFkp6rFq/a-professional-headshot-of-james-wilson--1773336336007-9dbb983e.png", imageAlt: "James Wilson profile"
|
|
},
|
|
{
|
|
id: "4", name: "Emma Rodriguez", role: "Marketing Manager | 750K TikTok Followers", testimonial: "Our engagement rates skyrocketed after using their editing services. Highly recommended for any brand serious about video.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ar24aDL5BSXZpizkD8eFkp6rFq/a-professional-headshot-of-emma-rodrigue-1773336336826-5a4ff475.png", imageAlt: "Emma Rodriguez profile"
|
|
},
|
|
{
|
|
id: "5", name: "Michael Thompson", role: "Podcast Producer | 500K Spotify Listeners", testimonial: "Exceptional turnaround time and quality. They understood our vision instantly and executed flawlessly.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ar24aDL5BSXZpizkD8eFkp6rFq/a-professional-headshot-of-michael-thomp-1773336336350-de615d31.png", imageAlt: "Michael Thompson profile"
|
|
},
|
|
{
|
|
id: "6", name: "Lisa Park", role: "Event Coordinator | 1M LinkedIn Followers", testimonial: "Our corporate videos now look like major productions. CineEdit brings Hollywood quality to our events.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ar24aDL5BSXZpizkD8eFkp6rFq/a-professional-headshot-of-lisa-park-an--1773336335493-a4a23e43.png", imageAlt: "Lisa Park profile"
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
carouselMode="buttons"
|
|
/>
|
|
</div>
|
|
|
|
<div id="blog" data-section="blog">
|
|
<BlogCardTwo
|
|
title="Latest From Our Blog"
|
|
description="Tips, tutorials, and insights on video editing and creative storytelling."
|
|
tag="Blog"
|
|
tagIcon={BookOpen}
|
|
blogs={[
|
|
{
|
|
id: "1", category: ["Editing", "Tutorial"],
|
|
title: "Mastering Color Grading for Cinematic Impact", excerpt: "Learn professional color grading techniques that transform ordinary footage into cinematic masterpieces.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ar24aDL5BSXZpizkD8eFkp6rFq/a-professional-color-grading-tutorial-wo-1773336336906-f3ded0a4.png", imageAlt: "Color grading workspace tutorial", authorName: "Alex Chen", authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ar24aDL5BSXZpizkD8eFkp6rFq/a-casual-professional-photo-of-alex-chen-1773336336334-392550c0.png", date: "15 Jan 2025"
|
|
},
|
|
{
|
|
id: "2", category: ["Motion Graphics", "Design"],
|
|
title: "Creating Stunning Transitions for Social Media", excerpt: "Discover trending transition techniques that keep viewers engaged and boost your social media presence.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ar24aDL5BSXZpizkD8eFkp6rFq/a-dynamic-showcase-of-modern-video-trans-1773336337892-7765d445.png", imageAlt: "Motion graphics transitions showcase", authorName: "Sarah Martinez", authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ar24aDL5BSXZpizkD8eFkp6rFq/a-professional-photo-of-sarah-martinez-f-1773336335360-ac81d9cb.png", date: "12 Jan 2025"
|
|
},
|
|
{
|
|
id: "3", category: ["Audio Design", "Production"],
|
|
title: "Audio Mixing Tips for Professional Sound", excerpt: "Master the art of audio mixing to create immersive soundscapes that complement your visual storytelling.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ar24aDL5BSXZpizkD8eFkp6rFq/a-professional-audio-mixing-console-with-1773336337289-a7d2112b.png", imageAlt: "Audio mixing console and equipment", authorName: "James Wilson", authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ar24aDL5BSXZpizkD8eFkp6rFq/a-professional-author-photo-of-james-wil-1773336336917-c7afbab6.png", date: "10 Jan 2025"
|
|
},
|
|
{
|
|
id: "4", category: ["Workflow", "Tips"],
|
|
title: "Optimizing Your Editing Workflow for 4K", excerpt: "Streamline your editing process and boost productivity when working with ultra-high-definition content.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ar24aDL5BSXZpizkD8eFkp6rFq/a-professional-video-editing-workspace-o-1773336336866-a6c6e123.png", imageAlt: "Professional video editing workspace", authorName: "Emma Rodriguez", authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ar24aDL5BSXZpizkD8eFkp6rFq/a-professional-author-photo-of-emma-rodr-1773336336964-f390cc9e.png", date: "08 Jan 2025"
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
carouselMode="buttons"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
sideTitle="Frequently Asked Questions"
|
|
sideDescription="Everything you need to know about our video editing services and process."
|
|
faqs={[
|
|
{
|
|
id: "1", title: "What is your typical turnaround time?", content: "Standard projects are typically completed within 5-7 business days. Rush orders and emergency editing can be accommodated with expedited rates."
|
|
},
|
|
{
|
|
id: "2", title: "Do you offer revision requests?", content: "Absolutely! We include up to 3 rounds of revisions with every project. Additional revisions are available at an hourly rate."
|
|
},
|
|
{
|
|
id: "3", title: "What formats do you deliver in?", content: "We deliver in all major formats including MP4, MOV, ProRes, and more. We can optimize for YouTube, Instagram, TikTok, and other platforms."
|
|
},
|
|
{
|
|
id: "4", title: "Can you work with 4K footage?", content: "Yes! We specialize in 4K and ultra-high-definition content. We have the infrastructure to handle files up to 8K resolution."
|
|
},
|
|
{
|
|
id: "5", title: "Do you provide color grading services?", content: "Professional color grading is included in our standard editing package. We can also provide dedicated color grading services for additional rates."
|
|
},
|
|
{
|
|
id: "6", title: "How do we get started?", content: "Simply reach out through our contact form or email us with your project details. We'll discuss your vision and provide a customized quote within 24 hours."
|
|
}
|
|
]}
|
|
textPosition="left"
|
|
useInvertedBackground={false}
|
|
animationType="smooth"
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
columns={[
|
|
{
|
|
title: "Product", items: [
|
|
{ label: "Portfolio", href: "#portfolio" },
|
|
{ label: "Services", href: "#services" },
|
|
{ label: "Pricing", href: "#pricing" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#about" },
|
|
{ label: "Blog", href: "#blog" },
|
|
{ label: "Careers", href: "/careers" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Contact", href: "#contact" }
|
|
]
|
|
}
|
|
]}
|
|
copyrightText="© 2025 CineEdit Studio. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |