279 lines
16 KiB
TypeScript
279 lines
16 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
||
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
||
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
||
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
|
||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||
import { Sparkles, AlertCircle, Zap, TrendingUp, Camera, Workflow, Upload, Wand2, CheckCircle, Film, Smartphone, Globe, FileText, Tag as TagIcon, Target, Mail, Star, Crown, Building2, Share2, Video } from 'lucide-react';
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="elastic-effect"
|
||
defaultTextAnimation="background-highlight"
|
||
borderRadius="soft"
|
||
contentWidth="mediumLarge"
|
||
sizing="large"
|
||
background="fluid"
|
||
cardStyle="subtle-shadow"
|
||
primaryButtonStyle="diagonal-gradient"
|
||
secondaryButtonStyle="layered"
|
||
headingFontWeight="bold"
|
||
>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarStyleCentered
|
||
navItems={[
|
||
{ name: "Process", id: "how-it-works" },
|
||
{ name: "Pricing", id: "pricing" },
|
||
{ name: "Why Us", id: "ideal-clients" },
|
||
{ name: "Portfolio", id: "hero" },
|
||
{ name: "Contact", id: "contact" }
|
||
]}
|
||
button={{
|
||
text: "Create My Video", href: "contact"
|
||
}}
|
||
brandName="Cineframe"
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroSplitDualMedia
|
||
tag="Digital Video Production"
|
||
tagIcon={Sparkles}
|
||
title="Transform Listing Photos Into Cinematic Marketing Videos"
|
||
description="Professional listing videos created from your existing photography. No filming required. No scheduling. Delivered within 24–48 hours. Luxury listings deserve more than static images."
|
||
background={{ variant: "plain" }}
|
||
mediaItems={[
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/wooden-sauna-with-mountain-view-panoramic-calm_169016-70823.jpg", imageAlt: "Luxurious modern home showcasing elegant architecture and premium interiors"
|
||
},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/three-beautiful-girls_1157-8887.jpg", imageAlt: "Luxury yacht interior displaying premium finishes and sophisticated design"
|
||
}
|
||
]}
|
||
rating={5}
|
||
ratingText="Trusted by luxury brokers and hospitality brands"
|
||
buttons={[
|
||
{ text: "Create My Listing Video", href: "contact" },
|
||
{ text: "View Example Videos", href: "how-it-works" }
|
||
]}
|
||
buttonAnimation="opacity"
|
||
mediaAnimation="slide-up"
|
||
tagAnimation="blur-reveal"
|
||
/>
|
||
</div>
|
||
|
||
<div id="problem" data-section="problem">
|
||
<MetricSplitMediaAbout
|
||
tag="The Challenge"
|
||
tagIcon={AlertCircle}
|
||
title="Most Listings Rely Only on Photos"
|
||
description="Across real estate, luxury travel, and high-value asset sales, listings are built around static photo galleries. While photography is essential, modern buyers increasingly expect video experiences when exploring premium properties and assets. Without video content, listings receive lower engagement and fewer social media impressions. Traditional video production requires scheduling, on-site filming, travel, and significant costs."
|
||
metrics={[
|
||
{ value: "72%", title: "Increase in engagement with video content" },
|
||
{ value: "48h", title: "Turnaround time vs weeks for traditional video" }
|
||
]}
|
||
imageSrc="http://img.b2bpic.net/free-photo/female-filmmaker-working-media-post-production-from-agency-office_482257-118847.jpg"
|
||
imageAlt="Modern video production workflow with cinematic equipment"
|
||
mediaAnimation="opacity"
|
||
metricsAnimation="slide-up"
|
||
tagAnimation="blur-reveal"
|
||
useInvertedBackground={false}
|
||
/>
|
||
</div>
|
||
|
||
<div id="solution" data-section="solution">
|
||
<FeatureBento
|
||
title="Cinematic Videos From Existing Photography"
|
||
description="Using advanced animation, motion design, and professional editing, we create elegant video presentations that showcase properties and assets with movement, music, and storytelling."
|
||
tag="Our Solution"
|
||
tagIcon={Zap}
|
||
tagAnimation="blur-reveal"
|
||
features={[
|
||
{
|
||
title: "Motion Design Excellence", description: "Transform static photography into dynamic visual narratives with fluid camera movements and elegant transitions.", bentoComponent: "animated-bar-chart"
|
||
},
|
||
{
|
||
title: "Multi-Platform Delivery", description: "Receive optimized videos for websites, social media, listing platforms, and digital advertising—all from your photos.", bentoComponent: "3d-card-grid", items: [
|
||
{ name: "Website", icon: Globe },
|
||
{ name: "Instagram", icon: Share2 },
|
||
{ name: "TikTok", icon: Video },
|
||
{ name: "Listings", icon: FileText }
|
||
],
|
||
centerIcon: Sparkles
|
||
},
|
||
{
|
||
title: "Fast Turnaround", description: "Professional cinematic results delivered within 24–48 hours. Scale your marketing without the production delays.", bentoComponent: "timeline", heading: "Production Timeline", subheading: "Our proven 3-step process", items: [
|
||
{ label: "Submit Photos", detail: "Upload your listing photography" },
|
||
{ label: "Production", detail: "Our team creates cinematic magic" },
|
||
{ label: "Delivery", detail: "Ready for immediate deployment" }
|
||
],
|
||
completedLabel: "Completed"
|
||
},
|
||
{
|
||
title: "Affordable Marketing Upgrade", description: "A fraction of traditional video production costs while maintaining premium cinematic quality.", bentoComponent: "line-chart"
|
||
}
|
||
]}
|
||
textboxLayout="default"
|
||
animationType="slide-up"
|
||
useInvertedBackground={false}
|
||
buttons={[
|
||
{ text: "Learn More", href: "how-it-works" }
|
||
]}
|
||
buttonAnimation="opacity"
|
||
/>
|
||
</div>
|
||
|
||
<div id="comparison" data-section="comparison">
|
||
<PricingCardFive
|
||
title="Traditional Video vs. Our Service"
|
||
description="Compare the efficiency, cost, and scalability of our photo-to-video solution against conventional production methods."
|
||
tag="Comparison"
|
||
tagIcon={TrendingUp}
|
||
tagAnimation="blur-reveal"
|
||
textboxLayout="default"
|
||
animationType="slide-up"
|
||
useInvertedBackground={false}
|
||
plans={[
|
||
{
|
||
id: "traditional", tag: "Traditional Videography", tagIcon: Camera,
|
||
price: "$1,500", period: "per project", description: "Professional on-site filming with crew and equipment.", button: { text: "Schedule Shoot", href: "#" },
|
||
featuresTitle: "What You Get", features: [
|
||
"Requires scheduling a filming day", "Travel and on-site production costs", "Multiple days to complete editing", "Limited scalability for volume", "Inflexible timeline"
|
||
]
|
||
},
|
||
{
|
||
id: "ours", tag: "Our Photo-to-Video Service", tagIcon: Sparkles,
|
||
price: "$499", period: "per project", description: "Cinematic videos created from your existing photography.", button: { text: "Create My Video", href: "contact" },
|
||
featuresTitle: "What You Get", features: [
|
||
"Uses existing professional photos", "No filming or travel required", "Delivered within 24–48 hours", "Ideal for high listing volume", "Fraction of traditional costs", "Scalable for agencies and teams"
|
||
]
|
||
}
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="how-it-works" data-section="how-it-works">
|
||
<FeatureBento
|
||
title="How It Works"
|
||
description="A streamlined three-step process designed for simplicity and quality. Get professional cinematic videos without the complexity."
|
||
tag="Process"
|
||
tagIcon={Workflow}
|
||
tagAnimation="blur-reveal"
|
||
features={[
|
||
{
|
||
title: "Step 1: Submit Your Photos", description: "Upload your listing photography through our simple online portal. No special format or quantity requirements.", bentoComponent: "reveal-icon", icon: Upload
|
||
},
|
||
{
|
||
title: "Step 2: Production Magic", description: "Our team transforms your images into cinematic motion presentations using advanced animation and professional editing techniques.", bentoComponent: "reveal-icon", icon: Wand2
|
||
},
|
||
{
|
||
title: "Step 3: Delivery & Deploy", description: "Receive fully produced, platform-optimized videos ready for websites, social media, and listing platforms. Typically within 24–48 hours.", bentoComponent: "reveal-icon", icon: CheckCircle
|
||
},
|
||
{
|
||
title: "Your Video Package", description: "Cinematic listing video, vertical social media versions, website-ready format, optional branding overlays, and professional music.", bentoComponent: "3d-task-list", heading: "Delivery Includes", items: [
|
||
{ icon: Film, label: "Cinematic Video", time: "4K Format" },
|
||
{ icon: Smartphone, label: "Social Versions", time: "Instagram & TikTok" },
|
||
{ icon: Globe, label: "Web Optimized", time: "Multiple Formats" }
|
||
]
|
||
}
|
||
]}
|
||
textboxLayout="default"
|
||
animationType="slide-up"
|
||
useInvertedBackground={false}
|
||
/>
|
||
</div>
|
||
|
||
<div id="ideal-clients" data-section="ideal-clients">
|
||
<SocialProofOne
|
||
title="Built for High-End Listings"
|
||
description="Our service is designed for businesses that rely on visual marketing and benefit from cinematic listing presentations."
|
||
tag="Ideal For"
|
||
tagIcon={Target}
|
||
tagAnimation="blur-reveal"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
names={[
|
||
"Real Estate Agents", "Luxury Brokerages", "Airbnb Hosts", "Yacht Brokers", "Aircraft Brokers", "Property Developers", "Hospitality Brands", "Interior Designers"
|
||
]}
|
||
speed={40}
|
||
showCard={true}
|
||
/>
|
||
</div>
|
||
|
||
<div id="pricing" data-section="pricing">
|
||
<PricingCardFive
|
||
title="Service Packages"
|
||
description="Choose the perfect plan for your listing needs. Each package is designed to deliver premium cinematic quality at the right scale."
|
||
tag="Pricing"
|
||
tagIcon={TagIcon}
|
||
tagAnimation="blur-reveal"
|
||
textboxLayout="default"
|
||
animationType="slide-up"
|
||
useInvertedBackground={false}
|
||
plans={[
|
||
{
|
||
id: "starter", tag: "Starter", tagIcon: Sparkles,
|
||
price: "$499", period: "per video", description: "Perfect for individual agents and small teams with occasional listings.", button: { text: "Get Started", href: "contact" },
|
||
featuresTitle: "Includes", features: [
|
||
"Cinematic listing video (up to 10 photos)", "Horizontal format for websites", "Professional music and effects", "24-hour turnaround", "4K resolution"
|
||
]
|
||
},
|
||
{
|
||
id: "professional", tag: "Professional", tagIcon: Star,
|
||
price: "$799", period: "per video", description: "Our most popular option for active brokerages managing multiple listings.", button: { text: "Choose Plan", href: "contact" },
|
||
featuresTitle: "Includes", features: [
|
||
"Full listing video (up to 20 photos)", "Vertical social media versions (Instagram, TikTok)", "Website-ready optimized format", "Branding overlays (agent name, contact)", "Professional music selection", "24-48 hour turnaround", "4K + HD formats"
|
||
]
|
||
},
|
||
{
|
||
id: "premium", tag: "Premium", tagIcon: Crown,
|
||
price: "$1,299", period: "per video", description: "Comprehensive production for luxury properties and premium marketing campaigns.", button: { text: "Contact Us", href: "contact" },
|
||
featuresTitle: "Includes", features: [
|
||
"Extended video presentation (unlimited photos)", "Vertical social media versions (all platforms)", "Website and landing page formats", "Custom branding and overlays", "Professional voice-over option", "Music licensing and custom soundtracking", "Priority 24-hour delivery", "4K + Full HD + Mobile optimized", "Unlimited revisions"
|
||
]
|
||
},
|
||
{
|
||
id: "agency", tag: "Agency Plan", tagIcon: Building2,
|
||
price: "$2,999", period: "per month", description: "Unlimited monthly production for large teams and high-volume brokerages.", button: { text: "Schedule Demo", href: "contact" },
|
||
featuresTitle: "Includes", features: [
|
||
"Unlimited video productions (any volume)", "Priority queue for all submissions", "Dedicated account manager", "Custom branding and templates", "All social media and web formats", "Advanced analytics dashboard", "Team collaboration portal", "Flexible scaling with usage credits"
|
||
]
|
||
}
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<ContactCTA
|
||
tag="Get Started"
|
||
tagIcon={Mail}
|
||
tagAnimation="blur-reveal"
|
||
title="Elevate Your Listings With Cinematic Video"
|
||
description="Transform your existing listing photography into professional video marketing content designed to attract modern buyers and increase engagement. Start creating your first video today."
|
||
buttons={[
|
||
{ text: "Start My Listing Video", href: "#" },
|
||
{ text: "Request Demo", href: "#" }
|
||
]}
|
||
buttonAnimation="opacity"
|
||
background={{ variant: "plain" }}
|
||
useInvertedBackground={false}
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterLogoReveal
|
||
logoText="Cineframe"
|
||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||
rightLink={{ text: "Terms of Service", href: "#" }}
|
||
/>
|
||
</div>
|
||
</ThemeProvider>
|
||
);
|
||
}
|