266 lines
19 KiB
TypeScript
266 lines
19 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
|
import TextAbout from '@/components/sections/about/TextAbout';
|
|
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
|
|
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
|
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
|
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
|
|
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
import {
|
|
Award,
|
|
CalendarCheck,
|
|
Camera,
|
|
CheckCircle,
|
|
Crop,
|
|
Download,
|
|
Film,
|
|
Headphones,
|
|
Instagram,
|
|
LifeBuoy,
|
|
Lightbulb,
|
|
Linkedin,
|
|
Mic,
|
|
Music,
|
|
PencilRuler,
|
|
Rocket,
|
|
Sparkles,
|
|
Twitter,
|
|
Upload,
|
|
Volume2,
|
|
} from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="medium"
|
|
sizing="medium"
|
|
background="aurora"
|
|
cardStyle="layered-gradient"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
navItems={[{ name: "Home", id: "/" }, { name: "About", id: "#about" }, { name: "Services", id: "#features-detailed" }, { name: "Contact", id: "#contact" }]}
|
|
brandName="Pro Studio"
|
|
button={{ text: "Get a Quote", href: "#contact" }}
|
|
className="bg-card/90 backdrop-blur-sm shadow-lg"
|
|
navItemClassName="text-foreground hover:text-primary-cta transition-colors duration-300"
|
|
buttonClassName="bg-primary-cta text-secondary-cta px-6 py-2 rounded-pill hover:bg-accent hover:text-primary-cta transition-all duration-300"
|
|
buttonTextClassName="font-medium text-base"
|
|
/>
|
|
</div>
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitKpi
|
|
title="Bringing Your Vision to Life"
|
|
description="We are a full-service production studio specializing in video, audio, and creative content that captivates audiences and delivers results."
|
|
background={{ variant: "glowing-orb" }}
|
|
kpis={[{ value: "15+", label: "Years Experience" }, { value: "500+", label: "Projects Delivered" }, { value: "98%", label: "Client Satisfaction" }]}
|
|
enableKpiAnimation={true}
|
|
tag="Your Story, Our Expertise"
|
|
buttons={[{ text: "View Our Work", href: "#services" }, { text: "Get a Free Consultation", href: "#contact" }]}
|
|
imageSrc="https://img.b2bpic.net/free-photo/medium-shot-people-radio-station_23-2148802324.jpg?_wi=1"
|
|
imageAlt="Professional production studio set up"
|
|
mediaAnimation="slide-up"
|
|
imagePosition="right"
|
|
className="py-24 md:py-32 lg:py-40"
|
|
titleClassName="text-4xl md:text-6xl font-extrabold leading-tight"
|
|
descriptionClassName="text-lg md:text-xl max-w-2xl mx-auto"
|
|
tagClassName="text-sm font-semibold text-primary-cta"
|
|
buttonClassName="px-8 py-3 rounded-pill text-lg"
|
|
buttonTextClassName="font-semibold"
|
|
marqueeItems={[
|
|
{ type: "image", src: "https://picsum.photos/id/1018/100/50", alt: "Client Logo 1" },
|
|
{ type: "image", src: "https://picsum.photos/id/1025/100/50", alt: "Client Logo 2" },
|
|
{ type: "image", src: "https://picsum.photos/id/1032/100/50", alt: "Client Logo 3" },
|
|
{ type: "image", src: "https://picsum.photos/id/1035/100/50", alt: "Client Logo 4" },
|
|
{ type: "image", src: "https://picsum.photos/id/1043/100/50", alt: "Client Logo 5" },
|
|
{ type: "image", src: "https://picsum.photos/id/1047/100/50", alt: "Client Logo 6" },
|
|
{ type: "image", src: "https://picsum.photos/id/1049/100/50", alt: "Client Logo 7" },
|
|
{ type: "image", src: "https://picsum.photos/id/106/100/50", alt: "Client Logo 8" },
|
|
{ type: "image", src: "https://picsum.photos/id/107/100/50", alt: "Client Logo 9" },
|
|
{ type: "image", src: "https://picsum.photos/id/108/100/50", alt: "Client Logo 10" }
|
|
]}
|
|
marqueeSpeed={40}
|
|
showMarqueeCard={false}
|
|
marqueeImageClassName="max-h-12 w-auto object-contain py-2"
|
|
/>
|
|
</div>
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
tag="Who We Are"
|
|
title="Crafting compelling narratives through exceptional production quality."
|
|
useInvertedBackground={true}
|
|
buttons={[{ text: "Learn More About Us", href: "#contact" }]}
|
|
className="py-20 md:py-28 lg:py-36 bg-background-accent"
|
|
containerClassName="max-w-4xl"
|
|
titleClassName="text-3xl md:text-5xl font-bold leading-tight"
|
|
buttonClassName="px-8 py-3 rounded-pill text-lg"
|
|
buttonTextClassName="font-semibold"
|
|
/>
|
|
</div>
|
|
<div id="features" data-section="features">
|
|
<FeatureCardNineteen
|
|
features={[
|
|
{
|
|
id: 1,
|
|
tag: "Concept & Strategy", title: "Discovery & Planning", subtitle: "Laying the groundwork for success.", description: "Every great project begins with a clear vision. We collaborate closely with you to understand your objectives, audience, and message, developing a strategic roadmap that ensures your content resonates.", imageSrc: "https://img.b2bpic.net/free-photo/team-young-colleagues-having-meeting-cafe_273609-16259.jpg", imageAlt: "Team brainstorming creative concepts."
|
|
},
|
|
{
|
|
id: 2,
|
|
tag: "Production & Filming", title: "Bringing Ideas to Life", subtitle: "High-quality execution, every take.", description: "From dazzling visuals to crystal-clear audio, our experienced crew utilizes state-of-the-art equipment and techniques to capture every detail. We manage all aspects of filming, sound recording, and on-set direction.", imageSrc: "https://img.b2bpic.net/free-photo/professional-cameraman-recording-poeple-watching-football-public-place-night_1268-18138.jpg?_wi=1", imageAlt: "Film crew on set with professional camera equipment."
|
|
},
|
|
{
|
|
id: 3,
|
|
tag: "Post-Production & Refinement", title: "Polishing the Masterpiece", subtitle: "Turning raw footage into captivating stories.", description: "Our post-production team meticulously edits, color grades, and mixes audio to transform raw footage into a polished, impactful final product. We handle everything from visual effects to sound design to deliver cinematic quality.", imageSrc: "https://img.b2bpic.net/free-photo/producer-songwriter-mixing-mastering-tracks-with-stereo-gear_482257-121217.jpg?_wi=1", imageAlt: "Video editor working on a multi-screen setup."
|
|
}
|
|
]}
|
|
title="Our Seamless Production Process"
|
|
description="From initial concept to final delivery, we guide you through every step with expertise and precision."
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
tag="How We Work"
|
|
className="py-20 md:py-28 lg:py-36"
|
|
textBoxTitleClassName="text-3xl md:text-5xl font-bold leading-tight"
|
|
textBoxDescriptionClassName="text-lg max-w-2xl mx-auto"
|
|
cardTagClassName="text-primary-cta font-semibold"
|
|
cardTitleClassName="text-2xl md:text-3xl font-bold"
|
|
cardDescriptionClassName="text-base text-foreground/70"
|
|
/>
|
|
</div>
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardOne
|
|
metrics={[
|
|
{ id: "1", value: "99", title: "% Accuracy", description: "In project delivery and client brief adherence.", icon: CheckCircle },
|
|
{ id: "2", value: "1000", title: "Projects", description: "Successfully completed for diverse clients.", icon: Sparkles },
|
|
{ id: "3", value: "70", title: "Awards", description: "Recognizing our creative and technical excellence.", icon: Award }
|
|
]}
|
|
carouselMode="buttons"
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="depth-3d"
|
|
title="Our Impact: Driven by Excellence"
|
|
description="Numbers that speak volumes about our dedication to quality and client success."
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
className="py-20 md:py-28 lg:py-36 bg-background-accent"
|
|
cardClassName="bg-card/70 backdrop-blur-md"
|
|
textBoxTitleClassName="text-3xl md:text-5xl font-bold leading-tight"
|
|
textBoxDescriptionClassName="text-lg max-w-2xl mx-auto"
|
|
valueClassName="text-6xl md:text-7xl font-extrabold"
|
|
titleClassName="text-2xl md:text-3xl font-bold"
|
|
descriptionClassName="text-base text-foreground/70"
|
|
/>
|
|
</div>
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFive
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Johnson, CEO of Apex Innovations", date: "Date: October 26, 2023", title: "Exceeded Our Expectations!", quote: "\"The team at Pro Studio transformed our complex ideas into a visually stunning and impactful brand video. Their professionalism and creativity are unparalleled. We saw a significant increase in engagement almost immediately.\"", tag: "Brand Video Production", avatarSrc: "https://img.b2bpic.net/free-photo/successful-businesswoman-ready-challenges_1163-4336.jpg", imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-people-radio-station_23-2148802324.jpg?_wi=2", imageAlt: "Client Sarah Johnson in a meeting"
|
|
},
|
|
{
|
|
id: "2", name: "Michael Chen, Marketing Director at GlobalTech", date: "Date: September 15, 2023", title: "A True Partner in Content Creation", quote: "\"Working with Pro Studio was a game-changer for our product launch. They handled everything from scripting to final delivery, and the results were phenomenal. They truly understand what it takes to produce compelling content.\"", tag: "Product Launch Content", avatarSrc: "https://img.b2bpic.net/free-photo/successful-businessman-imagines-great-career_1163-5478.jpg", imageSrc: "https://img.b2bpic.net/free-photo/side-view-people-working-together_23-2149636267.jpg", imageAlt: "Client Michael Chen giving a presentation"
|
|
},
|
|
{
|
|
id: "3", name: "Emily Rodriguez, Founder of Creativista Media", date: "Date: August 01, 2023", title: "Incredible Vision and Execution", quote: "\"Pro Studio's ability to grasp our artistic vision and translate it into a beautiful short film was extraordinary. Their attention to detail and passion for storytelling shone through every frame. Highly recommend!\"", tag: "Short Film Production", avatarSrc: "https://img.b2bpic.net/free-photo/portrait-young-pretty-woman-sitting-table-trench-coat-working-laptop-co-working-office-wearing-glasses-smiling-happy-positive-workplace_285396-65.jpg", imageSrc: "https://img.b2bpic.net/free-photo/professional-cameraman-recording-poeple-watching-football-public-place-night_1268-18138.jpg?_wi=2", imageAlt: "Client Emily Rodriguez directing a shoot"
|
|
},
|
|
{
|
|
id: "4", name: "David Kim, Lead Developer at Nexus Games", date: "Date: July 10, 2023", title: "Flawless Audio Design for Our Game", quote: "\"We needed immersive sound design for our new game, and Pro Studio delivered beyond our wildest hopes. The audio quality and atmospheric effects are top-notch, elevating the entire player experience. They are masters of sound.\"", tag: "Game Audio Production", avatarSrc: "https://img.b2bpic.net/free-photo/dark-blonde-bearded-man-crosses-his-hands-chest-posing-black-shirt_8353-1116.jpg", imageSrc: "https://img.b2bpic.net/free-photo/producer-songwriter-mixing-mastering-tracks-with-stereo-gear_482257-121217.jpg?_wi=2", imageAlt: "Client David Kim reviewing game audio"
|
|
}
|
|
]}
|
|
title="What Our Clients Say"
|
|
description="Hear directly from the businesses and individuals who have experienced the Pro Studio difference."
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
className="py-20 md:py-28 lg:py-36"
|
|
textBoxTitleClassName="text-3xl md:text-5xl font-bold leading-tight"
|
|
textBoxDescriptionClassName="text-lg max-w-2xl mx-auto"
|
|
cardTagClassName="text-primary-cta font-semibold"
|
|
cardTitleClassName="text-xl md:text-2xl font-bold"
|
|
cardQuoteClassName="text-base text-foreground/70 italic"
|
|
cardNameClassName="font-semibold text-lg"
|
|
cardDateClassName="text-sm text-foreground/60"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features-detailed" data-section="features-detailed">
|
|
<FeatureCardTen
|
|
features={[
|
|
{
|
|
id: "01", title: "Pre-Production & Concept Development", description: "We delve deep into your project's core, crafting compelling scripts, detailed storyboards, and comprehensive production plans that align perfectly with your vision and objectives.", media: { imageSrc: "https://img.b2bpic.net/free-photo/some-important-notes-must-be-written-down_329181-10278.jpg", imageAlt: "Creative team brainstorming ideas on a whiteboard" },
|
|
items: [{ icon: Lightbulb, text: "Scriptwriting & Storyboarding" }, { icon: PencilRuler, text: "Concept & Creative Direction" }, { icon: CalendarCheck, text: "Detailed Production Planning" }],
|
|
reverse: false
|
|
},
|
|
{
|
|
id: "02", title: "High-Quality Video Production", description: "Our seasoned cinematographers and crew utilize cutting-edge cameras, lighting, and sound equipment to capture breathtaking visuals and crystal-clear audio, ensuring every shot is perfect.", media: { imageSrc: "https://img.b2bpic.net/free-photo/professional-cameraman-recording-poeple-watching-football-public-place-night_1268-18138.jpg?_wi=3", imageAlt: "Filming on a professional movie set" },
|
|
items: [{ icon: Camera, text: "4K/8K Cinematography" }, { icon: Mic, text: "Professional Audio Recording" }, { icon: Film, text: "Multi-Camera Setups" }],
|
|
reverse: true
|
|
},
|
|
{
|
|
id: "03", title: "Immersive Audio Production & Sound Design", description: "From voiceovers and custom scores to intricate soundscapes, our audio experts create a rich sonic experience that elevates your content and deeply engages your audience.", media: { imageSrc: "https://img.b2bpic.net/free-photo/man-recording-studio-music-production_1303-20391.jpg", imageAlt: "Sound engineer working in an audio recording studio" },
|
|
items: [{ icon: Headphones, text: "Voiceover & ADR" }, { icon: Music, text: "Original Music Composition" }, { icon: Volume2, text: "Advanced Sound Mixing & Mastering" }],
|
|
reverse: false
|
|
},
|
|
{
|
|
id: "04", title: "Dynamic Post-Production & VFX", description: "Our editors meticulously craft your story, enhancing it with professional color grading, seamless visual effects, motion graphics, and a polished final edit that captivates viewers.", media: { imageSrc: "https://img.b2bpic.net/free-photo/focused-editor-woman-works-video-montage-creative-software_482257-120176.jpg", imageAlt: "Video editor working on complex visual effects" },
|
|
items: [{ icon: Crop, text: "Precision Editing & Color Grading" }, { icon: Sparkles, text: "Visual Effects (VFX) & Motion Graphics" }, { icon: Upload, text: "Multi-Format Delivery" }],
|
|
reverse: true
|
|
},
|
|
{
|
|
id: "05", title: "Seamless Project Delivery & Support", description: "We ensure your final product is delivered on time, in the correct format, and optimized for your chosen platforms. Our support doesn't end at delivery; we're here for any adjustments and future needs.", media: { imageSrc: "https://img.b2bpic.net/free-photo/corporate-business-people_23-2148827020.jpg", imageAlt: "Client and production team shaking hands over a delivered project" },
|
|
items: [{ icon: Rocket, text: "Optimized Platform Delivery" }, { icon: Download, text: "Digital Asset Management" }, { icon: LifeBuoy, text: "Ongoing Client Support" }],
|
|
reverse: false
|
|
}
|
|
]}
|
|
title="Our Comprehensive Services"
|
|
description="Explore our end-to-end production capabilities designed to bring any creative project to fruition with unparalleled quality."
|
|
tag="What We Offer"
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={true}
|
|
className="py-20 md:py-28 lg:py-36 bg-background-accent"
|
|
textBoxTitleClassName="text-3xl md:text-5xl font-bold leading-tight"
|
|
textBoxDescriptionClassName="text-lg max-w-2xl mx-auto"
|
|
featureTitleClassName="text-2xl md:text-3xl font-bold"
|
|
featureDescriptionClassName="text-base text-foreground/70"
|
|
listItemClassName="text-foreground/80"
|
|
/>
|
|
</div>
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
text="Ready to Elevate Your Story? Let's Create Something Unforgettable."
|
|
animationType="entrance-slide"
|
|
buttons={[{ text: "Start a Project", href: "#contact" }, { text: "Call Us Today", href: "tel:+1234567890" }]}
|
|
background={{ variant: "sparkles-gradient" }}
|
|
useInvertedBackground={false}
|
|
className="py-20 md:py-28 lg:py-36"
|
|
contentClassName="bg-card/70 backdrop-blur-md"
|
|
textClassName="text-3xl md:text-5xl font-bold leading-tight"
|
|
buttonClassName="px-8 py-3 rounded-pill text-lg"
|
|
buttonTextClassName="font-semibold"
|
|
/>
|
|
</div>
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="Pro Studio"
|
|
copyrightText="© 2023 Pro Studio. All rights reserved."
|
|
socialLinks={[{ icon: Twitter, href: "https://twitter.com/prostudio", ariaLabel: "Twitter" }, { icon: Linkedin, href: "https://linkedin.com/company/prostudio", ariaLabel: "LinkedIn" }, { icon: Instagram, href: "https://instagram.com/prostudio", ariaLabel: "Instagram" }]}
|
|
className="py-16 md:py-24 bg-background-accent"
|
|
cardClassName="bg-card/70 backdrop-blur-md"
|
|
logoClassName="text-2xl font-bold text-foreground"
|
|
copyrightTextClassName="text-sm text-foreground/70"
|
|
socialIconClassName="text-foreground/80 hover:text-primary-cta transition-colors duration-300"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|