328 lines
16 KiB
TypeScript
328 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
|
import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleCarousel";
|
|
import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
|
|
import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
|
|
import PricingCardFive from "@/components/sections/pricing/PricingCardFive";
|
|
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
|
|
import FaqDouble from "@/components/sections/faq/FaqDouble";
|
|
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
|
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
|
import {
|
|
Camera,
|
|
Sparkles,
|
|
Radio,
|
|
Film,
|
|
Eye,
|
|
Clapperboard,
|
|
Heart,
|
|
Video,
|
|
DollarSign,
|
|
Star,
|
|
CheckCircle,
|
|
HelpCircle,
|
|
Mail,
|
|
} from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="rounded"
|
|
contentWidth="compact"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="floatingGradient"
|
|
cardStyle="solid"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
brandName="AXPvidz"
|
|
navItems={[
|
|
{ name: "Services", id: "services" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "Contact", id: "contact" },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDoubleCarousel
|
|
title="Your Extra Pair of Hands for Content Creation"
|
|
description="Professional cameraman services for live streams, vlogs, and content creation. Get that perfect third-person perspective or just someone to hold the camera while you create."
|
|
tag="Content Creator Partner"
|
|
tagIcon={Camera}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "floatingGradient" }}
|
|
leftCarouselItems={[
|
|
{
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/young-content-creator-talking-gesturing-man-filming-himself-using-camera-tripod_1268-17201.jpg?_wi=1", imageAlt: "Vlogging camera work"},
|
|
{
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/journalist-taking-interview-from-woman_23-2149029320.jpg?_wi=1", imageAlt: "Live streaming setup"},
|
|
{
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/view-vintage-camera_23-2150315166.jpg?_wi=1", imageAlt: "Third perspective filming"},
|
|
{
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/arrangement-different-traveling-elements_23-2148884923.jpg?_wi=1", imageAlt: "Professional equipment"},
|
|
]}
|
|
rightCarouselItems={[
|
|
{
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/arrangement-different-traveling-elements_23-2148884923.jpg?_wi=2", imageAlt: "Camera equipment showcase"},
|
|
{
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/cameraman-recording-wedding-ceremony-using-camera-tripod_1268-17927.jpg?_wi=1", imageAlt: "Professional cameraman"},
|
|
{
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/young-content-creator-talking-gesturing-man-filming-himself-using-camera-tripod_1268-17201.jpg?_wi=2", imageAlt: "Daily vlogging work"},
|
|
{
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/journalist-taking-interview-from-woman_23-2149029320.jpg?_wi=2", imageAlt: "Live event filming"},
|
|
]}
|
|
carouselPosition="right"
|
|
buttons={[
|
|
{ text: "Book Now", href: "#contact" },
|
|
{ text: "View Services", href: "#services" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
ariaLabel="Hero section - AXPvidz cameraman services"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardTwentyFive
|
|
title="Services I Offer"
|
|
description="Comprehensive cameraman services tailored to your content creation needs. Whether you're just starting or scaling up, I've got you covered."
|
|
tag="What I Do"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
title: "Live Streaming Support", description:
|
|
"Professional camera operation for your live streams. I bring the equipment, expertise, and steady hands to capture every moment perfectly.", icon: Radio,
|
|
mediaItems: [
|
|
{
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/journalist-taking-interview-from-woman_23-2149029320.jpg?_wi=3", imageAlt: "Live streaming setup"},
|
|
{
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/young-content-creator-talking-gesturing-man-filming-himself-using-camera-tripod_1268-17201.jpg?_wi=3", imageAlt: "Streaming equipment"},
|
|
],
|
|
},
|
|
{
|
|
title: "Daily Vlogging", description:
|
|
"Turn your daily moments into compelling video content. I'll film your vlogs with professional techniques to make your content stand out.", icon: Film,
|
|
mediaItems: [
|
|
{
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/young-content-creator-talking-gesturing-man-filming-himself-using-camera-tripod_1268-17201.jpg?_wi=4", imageAlt: "Vlogging content"},
|
|
{
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/cameraman-recording-wedding-ceremony-using-camera-tripod_1268-17927.jpg?_wi=2", imageAlt: "Professional filming"},
|
|
],
|
|
},
|
|
{
|
|
title: "Third Perspective Filming", description:
|
|
"Get that cinematic third-person view your content needs. I'll capture you from the perfect angle to showcase your vision and message.", icon: Eye,
|
|
mediaItems: [
|
|
{
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/view-vintage-camera_23-2150315166.jpg?_wi=2", imageAlt: "Third person perspective"},
|
|
{
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/arrangement-different-traveling-elements_23-2148884923.jpg?_wi=3", imageAlt: "Multi-angle setup"},
|
|
],
|
|
},
|
|
{
|
|
title: "Equipment Support", description:
|
|
"Bring your own camera? No problem. I'll operate your equipment professionally or we can use mine. Flexible solutions for your needs.", icon: Clapperboard,
|
|
mediaItems: [
|
|
{
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/arrangement-different-traveling-elements_23-2148884923.jpg?_wi=4", imageAlt: "Professional equipment"},
|
|
{
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/journalist-taking-interview-from-woman_23-2149029320.jpg?_wi=4", imageAlt: "Equipment setup"},
|
|
],
|
|
},
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Services section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TestimonialAboutCard
|
|
tag="My Story"
|
|
tagIcon={Heart}
|
|
tagAnimation="slide-up"
|
|
title="I'm Passionate About Helping You Achieve Your Dreams"
|
|
description="AXPvidz Creator"
|
|
subdescription="Content Creation Partner"
|
|
icon={Video}
|
|
imageSrc="http://img.b2bpic.net/free-photo/startup-business-teamwork-strategy-concept_53876-132213.jpg"
|
|
imageAlt="Passionate about content creation"
|
|
mediaAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
ariaLabel="About section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardFive
|
|
title="Simple, Transparent Pricing"
|
|
description="Choose the service package that works best for you. Flexible rates for creators just starting out or scaling up."
|
|
tag="Pricing"
|
|
tagIcon={DollarSign}
|
|
tagAnimation="slide-up"
|
|
plans={[
|
|
{
|
|
id: "hourly", tag: "Hourly Rate", price: "$30", period: "/hour", description:
|
|
"Perfect for short projects, quick shoots, or testing the waters. Minimum booking available.", button: { text: "Book Hourly", href: "#contact" },
|
|
featuresTitle: "What's Included:", features: [
|
|
"Professional camera operation", "My own camera or support for yours", "Flexible scheduling", "Basic editing consultation"],
|
|
},
|
|
{
|
|
id: "daily", tag: "Daily Package", tagIcon: Star,
|
|
price: "$150", period: "/day", description:
|
|
"Full-day filming for your content. Best value for comprehensive projects and series content.", button: { text: "Book Day Rate", href: "#contact" },
|
|
featuresTitle: "What's Included:", features: [
|
|
"8 hours of professional filming", "Multiple camera angles and perspectives", "Equipment included (or bring your own)", "Raw footage delivery", "Priority scheduling"],
|
|
},
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Pricing section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardSeven
|
|
title="Why Choose AXPvidz"
|
|
description="Dedicated to helping creators bring their vision to life with professional camera work and genuine passion for content."
|
|
tag="Benefits"
|
|
tagIcon={CheckCircle}
|
|
tagAnimation="slide-up"
|
|
metrics={[
|
|
{
|
|
id: "1", value: "100%", title: "Dedicated to Your Success", items: ["Your dreams matter to me", "I want to see you succeed"],
|
|
},
|
|
{
|
|
id: "2", value: "Flexible", title: "Work With Your Schedule", items: [
|
|
"Hourly or daily rates", "Bring your own equipment or use mine"],
|
|
},
|
|
{
|
|
id: "3", value: "Professional", title: "Quality Content Creation", items: [
|
|
"Third-person perspective expertise", "Professional filming techniques"],
|
|
},
|
|
{
|
|
id: "4", value: "Supportive", title: "I'm Your Partner", items: [
|
|
"Extra hands when you need them", "Support your content journey"],
|
|
},
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Why choose section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
title="Frequently Asked Questions"
|
|
description="Get answers to common questions about booking, pricing, and services."
|
|
tag="FAQ"
|
|
tagIcon={HelpCircle}
|
|
tagAnimation="slide-up"
|
|
faqs={[
|
|
{
|
|
id: "1", title:
|
|
"Do you provide your own camera or do I need to provide one?", content:
|
|
"I have professional camera equipment ready to go! However, if you already have a camera you'd like to use, I can operate that as well. We can discuss what works best for your project during our consultation."},
|
|
{
|
|
id: "2", title: "What areas do you service?", content:
|
|
"I'm available for local and travel bookings. Contact me to discuss your location and I'll let you know availability and any travel fees that may apply."},
|
|
{
|
|
id: "3", title: "Can you help with live streaming setup?", content:
|
|
"Absolutely! I specialize in live streaming support. I can handle camera operation, equipment setup, and technical troubleshooting to ensure your live stream goes smoothly."},
|
|
{
|
|
id: "4", title: "What if I need editing or post-production help?", content:
|
|
"I focus on filming and camera work, but I can provide basic editing consultation and connect you with trusted editors if needed. Let's discuss your specific needs!"},
|
|
{
|
|
id: "5", title: "Do you offer package deals for multiple days?", content:
|
|
"Yes! For multi-day projects, I can discuss special rates. The more we work together, the better I can tailor services to your needs. Contact me with your project details."},
|
|
{
|
|
id: "6", title: "How far in advance should I book?", content:
|
|
"I try to be flexible! While advance notice helps with scheduling, I'm happy to accommodate rush bookings when possible. Reach out and we'll see what we can arrange."},
|
|
]}
|
|
faqsAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="smooth"
|
|
ariaLabel="FAQ section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
tag="Ready to Create"
|
|
tagIcon={Mail}
|
|
tagAnimation="slide-up"
|
|
title="Let's Bring Your Vision to Life"
|
|
description="Reach out to book your cameraman service today. Whether you're just starting or scaling up, I'm here to help you achieve your content creation dreams."
|
|
buttons={[
|
|
{ text: "Book Now", href: "#" },
|
|
{ text: "Send Message", href: "#" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
background={{ variant: "floatingGradient" }}
|
|
useInvertedBackground={false}
|
|
ariaLabel="Contact section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
logoText="AXPvidz"
|
|
columns={[
|
|
{
|
|
items: [
|
|
{ label: "Services", href: "#services" },
|
|
{ label: "About", href: "#about" },
|
|
{ label: "Pricing", href: "#pricing" },
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "FAQ", href: "#faq" },
|
|
{ label: "Contact", href: "#contact" },
|
|
{ label: "Book Now", href: "#contact" },
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Support", href: "#contact" },
|
|
],
|
|
},
|
|
]}
|
|
ariaLabel="Site footer"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|