238 lines
12 KiB
TypeScript
238 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import HeroPersonalLinks from '@/components/sections/hero/HeroPersonalLinks';
|
|
import MediaAbout from '@/components/sections/about/MediaAbout';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
|
|
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
|
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
|
import { Clapperboard, Sparkles, Film, Zap, Star, TrendingUp, HelpCircle, Mail, ArrowRight } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="slide-background"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="sharp"
|
|
contentWidth="medium"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="none"
|
|
cardStyle="soft-shadow"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
brandName="Move and Movie"
|
|
navItems={[
|
|
{ name: "Portfolio", id: "portfolio" },
|
|
{ name: "Services", id: "services" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{ text: "Get Started", href: "contact" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroPersonalLinks
|
|
background={{ variant: "plain" }}
|
|
title="Move and Movie"
|
|
socialLinks={[
|
|
{ icon: Film, label: "YouTube", href: "https://youtube.com" },
|
|
{ icon: Clapperboard, label: "Instagram", href: "https://instagram.com" }
|
|
]}
|
|
linkCards={[
|
|
{
|
|
icon: Sparkles,
|
|
title: "View Our Portfolio", description: "Explore our latest cinematic creations", button: { text: "View Work", href: "portfolio" }
|
|
},
|
|
{
|
|
icon: Mail,
|
|
title: "Start Your Project", description: "Let's bring your vision to life", button: { text: "Contact Us", href: "contact" }
|
|
}
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MediaAbout
|
|
title="Elevate Your Brand Story"
|
|
description="We transform ideas into visual masterpieces that tell your brand's story with cinematic precision and creative excellence."
|
|
tag="Who We Are"
|
|
tagIcon={Clapperboard}
|
|
imageSrc="https://img.b2bpic.net/free-photo/young-filmmaker-working-media-post-production-from-agency-office_482257-119708.jpg"
|
|
imageAlt="Professional video production setup"
|
|
buttons={[
|
|
{ text: "Learn More", href: "about" }
|
|
]}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="portfolio" data-section="portfolio">
|
|
<ProductCardTwo
|
|
products={[
|
|
{
|
|
id: "1", brand: "Commercial", name: "Tech Startup Brand Story", price: "Featured", rating: 5,
|
|
reviewCount: "4.8k", imageSrc: "https://img.b2bpic.net/free-photo/professional-agency-setup-cinematic-footage-creation-video-editing_482257-118951.jpg", imageAlt: "Tech startup brand story video"
|
|
},
|
|
{
|
|
id: "2", brand: "Content", name: "Social Media Campaign", price: "Series", rating: 5,
|
|
reviewCount: "3.2k", imageSrc: "https://img.b2bpic.net/free-photo/african-american-videographer-works-editing-film-footage-home_482257-120281.jpg", imageAlt: "Social media video content"
|
|
},
|
|
{
|
|
id: "3", brand: "Educational", name: "Corporate Training Video", price: "Premium", rating: 5,
|
|
reviewCount: "2.1k", imageSrc: "https://img.b2bpic.net/free-photo/young-man-video-creator-working-editing-movie-montage-project_482257-126299.jpg", imageAlt: "Corporate training video production"
|
|
}
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
title="Featured Work"
|
|
description="Explore our latest video productions and cinematic projects that showcase our creative vision."
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardTwentySix
|
|
features={[
|
|
{
|
|
title: "Commercial Production", description: "High-impact brand commercials that drive results", imageSrc: "https://img.b2bpic.net/free-photo/professional-agency-setup-cinematic-footage-creation-video-editing_482257-118951.jpg", imageAlt: "Commercial video production", buttonIcon: ArrowRight,
|
|
buttonHref: "contact"
|
|
},
|
|
{
|
|
title: "Social Media Content", description: "Engaging short-form content for all platforms", imageSrc: "https://img.b2bpic.net/free-photo/african-american-videographer-works-editing-film-footage-home_482257-120281.jpg", imageAlt: "Social media content creation", buttonIcon: ArrowRight,
|
|
buttonHref: "contact"
|
|
},
|
|
{
|
|
title: "Brand Storytelling", description: "Cinematic narratives that connect with audiences", imageSrc: "https://img.b2bpic.net/free-photo/young-man-video-creator-working-editing-movie-montage-project_482257-126299.jpg", imageAlt: "Brand storytelling video", buttonIcon: ArrowRight,
|
|
buttonHref: "contact"
|
|
},
|
|
{
|
|
title: "Event Coverage", description: "Professional event documentation and highlights", imageSrc: "https://img.b2bpic.net/free-photo/african-american-freelancer-editing-background-video-his-home-office_482257-116610.jpg", imageAlt: "Event video coverage", buttonIcon: ArrowRight,
|
|
buttonHref: "contact"
|
|
}
|
|
]}
|
|
title="Professional Video Services"
|
|
description="From concept to final cut, we deliver comprehensive video production solutions."
|
|
tag="Services"
|
|
tagIcon={Zap}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTen
|
|
testimonials={[
|
|
{
|
|
id: "1", title: "Game-changing video production", quote: "Move and Movie completely elevated our brand presence. Their cinematic approach turned our product launch into a viral success story.", name: "Sarah Mitchell", role: "CEO of TechFlow", imageSrc: "https://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg", imageAlt: "Sarah Mitchell, CEO of TechFlow"
|
|
},
|
|
{
|
|
id: "2", title: "Exceeded all expectations", quote: "The team's creativity and professionalism exceeded all expectations. Our video content increased engagement by 300%.", name: "Michael Chen", role: "Marketing Director at GrowthCo", imageSrc: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg", imageAlt: "Michael Chen, Marketing Director of GrowthCo"
|
|
}
|
|
]}
|
|
title="Client Testimonials"
|
|
description: "Hear from brands and entrepreneurs who've transformed their presence with our video production."
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardThree
|
|
metrics={[
|
|
{
|
|
id: "1", icon: TrendingUp,
|
|
title: "Brands Served", value: "50+"
|
|
},
|
|
{
|
|
id: "2", icon: Film,
|
|
title: "Videos Produced", value: "200+"
|
|
},
|
|
{
|
|
id: "3", icon: Star,
|
|
title: "Views Generated", value: "10M+"
|
|
}
|
|
]}
|
|
title="Our Impact"
|
|
description="Numbers that speak to our commitment to excellence and creative innovation."
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
faqs={[
|
|
{
|
|
id: "1", title: "How long does a typical video production take?", content: "Project timelines vary based on scope and complexity. Most projects take 2-6 weeks from concept to final delivery."
|
|
},
|
|
{
|
|
id: "2", title: "What types of videos do you produce?", content: "We specialize in commercials, brand stories, social media content, corporate training videos, and product demos."
|
|
},
|
|
{
|
|
id: "3", title: "Do you handle post-production and editing?", content: "Yes, we handle the complete production pipeline including color grading, sound design, and motion graphics."
|
|
}
|
|
]}
|
|
imageSrc: "https://img.b2bpic.net/free-photo/young-filmmaker-working-media-post-production-from-agency-office_482257-119708.jpg", imageAlt: "Video production workspace", mediaAnimation: "slide-up", title: "Frequently Asked Questions", description: "Everything you need to know about working with Move and Movie.", textboxLayout: "default", faqsAnimation: "slide-up", useInvertedBackground: false
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Ready to Create?"
|
|
tagIcon={Mail}
|
|
title="Let's Bring Your Vision to Life"
|
|
description="Whether you're launching a brand, promoting a product, or telling a story, we're here to make it unforgettable."
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={false}
|
|
onSubmit={(email) => console.log("Email submitted:", email)}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
columns={[
|
|
{
|
|
title: "Navigate", items: [
|
|
{ label: "Home", href: "#hero" },
|
|
{ label: "Portfolio", href: "#portfolio" },
|
|
{ label: "Services", href: "#services" },
|
|
{ label: "About", href: "#about" }
|
|
]
|
|
},
|
|
{
|
|
title: "Resources", items: [
|
|
{ label: "FAQ", href: "#faq" },
|
|
{ label: "Blog", href: "#" },
|
|
{ label: "Case Studies", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Connect", items: [
|
|
{ label: "Contact Us", href: "#contact" },
|
|
{ label: "Instagram", href: "https://instagram.com" },
|
|
{ label: "YouTube", href: "https://youtube.com" }
|
|
]
|
|
}
|
|
]}
|
|
logoText="Move and Movie"
|
|
copyrightText="© 2025 Move and Movie. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|