222 lines
14 KiB
TypeScript
222 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
|
import HeroCarouselLogo from "@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo";
|
|
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
|
|
import ProductCardThree from "@/components/sections/product/ProductCardThree";
|
|
import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
|
|
import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
|
|
import PricingCardThree from "@/components/sections/pricing/PricingCardThree";
|
|
import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import { Film, Scissors, Zap, Brain, Sparkles, Star, Mail, Check } from "lucide-react";
|
|
|
|
export default function HomePage() {
|
|
const navItems = [
|
|
{ name: "Home", id: "home" },
|
|
{ name: "Work", id: "work" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Services", id: "services" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "Contact", id: "contact" },
|
|
];
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumSmall"
|
|
sizing="mediumLarge"
|
|
background="circleGradient"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="light"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple navItems={navItems} brandName="Cinematic Edit" />
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroCarouselLogo
|
|
logoText="I Craft Cinematic Edits That Capture Attention"
|
|
description="Transform raw footage into stunning visual stories. Video editing, motion design, and AI-powered content creation for creators who demand perfection."
|
|
buttons={[
|
|
{
|
|
text: "View Work", href: "/work"},
|
|
{
|
|
text: "Start a Project", href: "/contact"},
|
|
]}
|
|
slides={[
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWd5CVi6eS00aQna2oL1acQvBq/a-modern-professional-video-editing-work-1773766752141-83329cb8.png", imageAlt: "Cinematic editing workspace"},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWd5CVi6eS00aQna2oL1acQvBq/abstract-motion-graphics-animation-scene-1773766751442-213461fb.png", imageAlt: "Motion graphics animation"},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWd5CVi6eS00aQna2oL1acQvBq/futuristic-ai-content-creation-interface-1773766751471-e9aabd7a.png", imageAlt: "AI content creation"},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWd5CVi6eS00aQna2oL1acQvBq/professional-color-grading-scene-with-vi-1773766753743-57465b68.png", imageAlt: "Color grading process"},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWd5CVi6eS00aQna2oL1acQvBq/modern-professional-video-production-stu-1773766754345-55836e47.png", imageAlt: "Professional editing suite"},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWd5CVi6eS00aQna2oL1acQvBq/final-video-delivery-showcase-with-multi-1773766751320-0bf27606.png", imageAlt: "Video delivery showcase"},
|
|
]}
|
|
autoplayDelay={5000}
|
|
showDimOverlay={true}
|
|
ariaLabel="Premium video editing and content creation hero section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="stats" data-section="stats">
|
|
<MetricCardEleven
|
|
metrics={[
|
|
{
|
|
id: "projects", value: "200+", title: "Projects Completed", description: "Professional video productions delivered", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWd5CVi6eS00aQna2oL1acQvBq/visual-representation-of-200-completed-v-1773766751927-ba621f3d.png?_wi=1", imageAlt: "200+ completed projects"},
|
|
{
|
|
id: "experience", value: "5+", title: "Years Experience", description: "Mastering the craft of cinematic storytelling", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWd5CVi6eS00aQna2oL1acQvBq/experience-badge-or-award-showing-5-year-1773766753527-ff7ea0eb.png?_wi=1", imageAlt: "5+ years experience"},
|
|
{
|
|
id: "views", value: "3M+", title: "Total Views", description: "Audience engagement across platforms", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWd5CVi6eS00aQna2oL1acQvBq/3-million-views-milestone-visualization--1773766752572-4462e7b7.png?_wi=1", imageAlt: "3M+ total views"},
|
|
]}
|
|
animationType="slide-up"
|
|
title="Impact & Experience"
|
|
description="Proven track record of delivering premium content"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
ariaLabel="Portfolio statistics and key achievements"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TestimonialAboutCard
|
|
tag="About Me"
|
|
tagIcon={Film}
|
|
tagAnimation="slide-up"
|
|
title="Video Editor · Motion Designer · AI Creator"
|
|
description="I specialize in transforming raw footage into compelling visual narratives. With expertise in professional editing software and cutting-edge AI tools, I deliver cinematic quality across all formats."
|
|
subdescription="Combining technical mastery with creative vision to produce content that captures attention and drives engagement."
|
|
icon={Sparkles}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWd5CVi6eS00aQna2oL1acQvBq/professional-portrait-of-a-video-editor--1773766752432-5ac3e3fc.png?_wi=1"
|
|
imageAlt="Professional video editor portrait"
|
|
mediaAnimation="slide-up"
|
|
useInvertedBackground={true}
|
|
ariaLabel="About section with editor profile"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureHoverPattern
|
|
title="What I Do"
|
|
description="Premium services tailored to elevate your visual content and brand presence."
|
|
features={[
|
|
{
|
|
icon: Scissors,
|
|
title: "Video Editing", description: "Professional color grading, sound design, and cinematic cuts across all formats. From corporate videos to social content."},
|
|
{
|
|
icon: Zap,
|
|
title: "Motion Graphics", description: "Dynamic title sequences, animated explainers, and visual effects that elevate your message."},
|
|
{
|
|
icon: Brain,
|
|
title: "AI Content Strategy", description: "Leverage cutting-edge AI tools for rapid content creation, smart automation, and data-driven production workflows."},
|
|
]}
|
|
animationType="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Services offered"
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardThree
|
|
title="Simple, Transparent Pricing"
|
|
description="Flexible packages for individual creators, brands, and agencies. Choose based on project scope, revision needs, and creative features."
|
|
plans={[
|
|
{
|
|
id: "basic", name: "BASIC", price: "$299", features: [
|
|
"Up to 5 min video • 1 revision", "Standard color grading", "No VFX or motion graphics", "MP4 & ProRes delivery", "48-hour turnaround"],
|
|
buttons: [
|
|
{
|
|
text: "Get Started", href: "/contact"},
|
|
],
|
|
},
|
|
{
|
|
id: "pro", name: "PRO", price: "$599", badge: "Most Popular", badgeIcon: Sparkles,
|
|
features: [
|
|
"Up to 15 min video • Unlimited revisions", "Advanced color grading & VFX", "Motion graphics & transitions", "Priority 24-hour support", "All delivery formats"],
|
|
buttons: [
|
|
{
|
|
text: "Start Now", href: "/contact"},
|
|
],
|
|
},
|
|
{
|
|
id: "premium", name: "PREMIUM", price: "Custom", features: [
|
|
"Full-length projects • Unlimited revisions", "Complete creative control & AI automation", "Custom VFX, animation & graphics", "Dedicated project manager", "Ongoing support & consultation"],
|
|
buttons: [
|
|
{
|
|
text: "Let's Talk", href: "/contact"},
|
|
],
|
|
},
|
|
]}
|
|
animationType="scale-rotate"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
ariaLabel="Pricing plans and services"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardThirteen
|
|
title="Client Reviews"
|
|
description="Trusted by creators, brands, and agencies worldwide for exceptional video editing and content production."
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Johnson", handle: "@creativebrand", testimonial: "Exceptional editing work. Transformed our raw footage into a viral-worthy video. Professional, responsive, and detail-oriented.", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWd5CVi6eS00aQna2oL1acQvBq/professional-headshot-of-a-creative-dire-1773766750644-70675d0e.png?_wi=1", imageAlt: "Sarah Johnson", icon: Star,
|
|
},
|
|
{
|
|
id: "2", name: "Michael Chen", handle: "@techstartup_co", testimonial: "Best video editor we've worked with. Understood our brand vision immediately and delivered beyond expectations. Highly recommended.", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWd5CVi6eS00aQna2oL1acQvBq/professional-headshot-of-a-tech-entrepre-1773766751651-d708be01.png?_wi=1", imageAlt: "Michael Chen", icon: Star,
|
|
},
|
|
{
|
|
id: "3", name: "Emily Rodriguez", handle: "@luxurybrand_official", testimonial: "The cinematic quality and attention to detail are unmatched. Every frame feels premium. Worth every penny.", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWd5CVi6eS00aQna2oL1acQvBq/professional-portrait-of-a-luxury-brand--1773766752414-056a6d78.png?_wi=1", imageAlt: "Emily Rodriguez", icon: Star,
|
|
},
|
|
{
|
|
id: "4", name: "David Kim", handle: "@productionhouse_la", testimonial: "Fast turnaround without sacrificing quality. AI integration suggestions saved us weeks of work. True professional.", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWd5CVi6eS00aQna2oL1acQvBq/professional-headshot-of-a-production-co-1773766751360-253b42ad.png?_wi=1", imageAlt: "David Kim", icon: Star,
|
|
},
|
|
{
|
|
id: "5", name: "Jessica Lee", handle: "@contentcreator_pro", testimonial: "Transformed my YouTube channel aesthetic. The consistency and polish really elevated my content. Game-changer.", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWd5CVi6eS00aQna2oL1acQvBq/professional-headshot-of-a-content-creat-1773766751133-f9a30af8.png?_wi=1", imageAlt: "Jessica Lee", icon: Star,
|
|
},
|
|
{
|
|
id: "6", name: "Alex Thompson", handle: "@filmproduction_team", testimonial: "Collaborated on multiple projects now. Always delivers cinematic quality with fast iterations. Absolute pro.", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWd5CVi6eS00aQna2oL1acQvBq/professional-headshot-of-a-film-producti-1773766750913-d56c8fec.png?_wi=1", imageAlt: "Alex Thompson", icon: Star,
|
|
},
|
|
]}
|
|
showRating={true}
|
|
animationType="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Client testimonials"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<div className="mx-auto px-4 md:px-6">
|
|
{/* ContactCTA will be rendered on the /contact page. This is a placeholder for the home page. */}
|
|
<div className="text-center py-12">
|
|
<p className="text-foreground">Ready to start your next project?</p>
|
|
<p className="text-accent text-lg mt-2">
|
|
<Link href="/contact" className="underline hover:no-underline">
|
|
Get in touch with us
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|