298 lines
19 KiB
TypeScript
298 lines
19 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
|
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
|
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
|
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
|
import { Award, Cake, Calendar, Camera, CheckCircle, GraduationCap, Heart, Sparkles, Star, User, Users } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="compact"
|
|
sizing="largeSmall"
|
|
background="blurBottom"
|
|
cardStyle="glass-depth"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
navItems={[
|
|
{
|
|
name: "Sobre mí", id: "#about"},
|
|
{
|
|
name: "Servicios", id: "#services"},
|
|
{
|
|
name: "Portafolio", id: "#portfolio"},
|
|
{
|
|
name: "Testimonios", id: "#testimonials"},
|
|
{
|
|
name: "Contacto", id: "#contact"},
|
|
]}
|
|
brandName="CJ Photography"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardScroll
|
|
background={{
|
|
variant: "radial-gradient"}}
|
|
title="Capturando momentos que duran para siempre"
|
|
description="Fotografía profesional para quinceañeras, cumpleaños, graduaciones, sesiones personales, parejas y eventos especiales en Miami, Weston, Pembroke Pines, Miramar y el sur de Florida."
|
|
buttons={[
|
|
{
|
|
text: "RESERVAR SESIÓN", href: "#contact"},
|
|
{
|
|
text: "VER PORTAFOLIO", href: "#portfolio"},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/woman-taking-photos-digital-camera-park_107420-96477.jpg"
|
|
imageAlt="Couple laughing during a photoshoot in South Florida"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TestimonialAboutCard
|
|
useInvertedBackground={true}
|
|
tag="SOBRE MÍ"
|
|
title="Hola, soy Constanza"
|
|
description="Soy una fotógrafa apasionada por capturar recuerdos únicos y momentos especiales. Mi objetivo es crear fotografías naturales, auténticas y llenas de emoción para que puedas conservar tus mejores recuerdos para siempre."
|
|
subdescription="Trabajo en Miami y todo el sur de Florida, llevando mi cámara a donde tú necesites. Cada sesión es única, cada foto cuenta una historia, y cada cliente se convierte en parte de mi familia fotográfica."
|
|
icon={Camera}
|
|
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-man-taking-photos_23-2149204063.jpg"
|
|
imageAlt="Portrait of Constanza, the photographer, smiling with her camera"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentyFive
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Quinceañeras", description: "Inmortalizamos la magia y el encanto de tu fiesta de quince con fotografías que resaltan tu belleza y felicidad.", icon: Sparkles,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/front-view-girl-girl-wearing-silver-crown_23-2149861232.jpg", imageAlt: "Quinceañera in a beautiful dress"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-her-friends-prom_23-2149106089.jpg", imageAlt: "Quinceañera dancing with family"},
|
|
]
|
|
},
|
|
{
|
|
title: "Graduaciones", description: "Celebra tu logro académico con sesiones profesionales que capturan la emoción y el orgullo de este día tan especial.", icon: Award,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/front-view-male-student-red-checkered-shirt-with-backpack-holding-yellow-files-blue-wall_140725-42584.jpg", imageAlt: "Graduate celebrating with cap and gown"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/red-beautiful-park-road-brunette_1304-3443.jpg", imageAlt: "Graduates throwing caps in the air"},
|
|
]
|
|
},
|
|
{
|
|
title: "Retratos Personales", description: "Sesiones individuales para realzar tu personalidad y estilo, ideales para modelos, actores o simplemente para un cambio de imagen.", icon: User,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-young-female-wearing-formal-suit_23-2148880263.jpg", imageAlt: "Stylish young woman portrait"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-man-posing-spotlight_23-2151916027.jpg", imageAlt: "Handsome man portrait"},
|
|
]
|
|
},
|
|
{
|
|
title: "Parejas y Amigos", description: "Capturamos la química y el amor en cada imagen, creando recuerdos duraderos para parejas, amigos o compromisos.", icon: Heart,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/man-hugging-his-girlfriend-street_1153-2086.jpg", imageAlt: "Romantic couple walking on the beach"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/girl-with-paper-moustache_23-2147773182.jpg", imageAlt: "Couple laughing in a park"},
|
|
]
|
|
},
|
|
{
|
|
title: "Cumpleaños", description: "Desde los primeros pasos hasta las grandes celebraciones, inmortalizamos cada detalle y emoción de tus cumpleaños.", icon: Cake,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/rocket-made-from-school-supplies-green-chalkboard-back-s_1232-3286.jpg", imageAlt: "Child's birthday party with cake"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/bride-groom-having-their-wedding-with-guests-beach_23-2149043984.jpg", imageAlt: "Adult birthday celebration"},
|
|
]
|
|
},
|
|
{
|
|
title: "Eventos Especiales", description: "Cobertura profesional para bodas, eventos corporativos, bautizos y cualquier ocasión que merezca ser recordada para siempre.", icon: Calendar,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/graduate-woman-showing-winner-gesture-casual-clothes-uniform-looking-lucky-front-view_176474-51106.jpg?_wi=1", imageAlt: "Corporate event photography"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/tattooed-redhead-girl-wearing-trendy-clothes-sitting-stairs-outside_613910-5284.jpg?_wi=1", imageAlt: "Wedding ceremony with happy couple"},
|
|
]
|
|
},
|
|
]}
|
|
title="Nuestros Servicios de Fotografía"
|
|
description="Ofrecemos una variedad de sesiones fotográficas adaptadas a cada ocasión especial, capturando la esencia de tus momentos más preciados."
|
|
tag="SERVICIOS"
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardEight
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
plans={[
|
|
{
|
|
id: "mini", badge: "Popular", badgeIcon: Sparkles,
|
|
price: "$25 desde", subtitle: "Ideal para una experiencia rápida", buttons: [
|
|
{
|
|
text: "RESERVAR"},
|
|
],
|
|
features: [
|
|
"30 minutos de sesión", "10 fotos editadas", "Entrega digital", "1 locación"],
|
|
},
|
|
{
|
|
id: "individual", badge: "Recomendado", badgeIcon: CheckCircle,
|
|
price: "$50 desde", subtitle: "Para un retrato personal completo", buttons: [
|
|
{
|
|
text: "RESERVAR"},
|
|
],
|
|
features: [
|
|
"1 hora de sesión", "25 fotos editadas", "Entrega digital", "1-2 looks"],
|
|
},
|
|
{
|
|
id: "couple-friends", badge: "Amistades", badgeIcon: Users,
|
|
price: "$60 desde", subtitle: "Captura tu conexión especial", buttons: [
|
|
{
|
|
text: "RESERVAR"},
|
|
],
|
|
features: [
|
|
"1 hora de sesión", "30 fotos editadas", "Entrega digital", "Múltiples poses"],
|
|
},
|
|
{
|
|
id: "graduation", badge: "Logro", badgeIcon: GraduationCap,
|
|
price: "$75 desde", subtitle: "Celebra tu éxito académico", buttons: [
|
|
{
|
|
text: "RESERVAR"},
|
|
],
|
|
features: [
|
|
"1 hora de sesión", "30 fotos editadas", "Entrega digital", "Fotos con toga"],
|
|
},
|
|
{
|
|
id: "birthday", badge: "Festivo", badgeIcon: Cake,
|
|
price: "$100 desde", subtitle: "Inmortaliza tu día especial", buttons: [
|
|
{
|
|
text: "RESERVAR"},
|
|
],
|
|
features: [
|
|
"2 horas de sesión", "50 fotos editadas", "Entrega digital", "Momentos especiales"],
|
|
},
|
|
{
|
|
id: "special-events", badge: "Premium", badgeIcon: Star,
|
|
price: "Cotización", subtitle: "Cobertura personalizada para grandes ocasiones", buttons: [
|
|
{
|
|
text: "CONSULTAR"},
|
|
],
|
|
features: [
|
|
"Eventos 3-4h desde $150", "Quinceañeras desde $250", "Paquete a medida", "Cobertura completa"],
|
|
},
|
|
]}
|
|
title="Elige tu sesión perfecta"
|
|
description="Encuentra el plan ideal para tus necesidades, desde mini sesiones hasta cobertura completa de eventos especiales."
|
|
tag="SERVICIOS"
|
|
/>
|
|
</div>
|
|
|
|
<div id="portfolio" data-section="portfolio">
|
|
<ProductCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "p-quinceanera", name: "Sesión de Quinceañera", price: "Desde $250", imageSrc: "http://img.b2bpic.net/free-photo/pretty-girls-looking-camera_23-2148480293.jpg", imageAlt: "Quinceañera in a beautiful dress"},
|
|
{
|
|
id: "p-graduation", name: "Graduación 2024", price: "Desde $75", imageSrc: "http://img.b2bpic.net/free-photo/graduate-woman-showing-winner-gesture-casual-clothes-uniform-looking-lucky-front-view_176474-51106.jpg?_wi=2", imageAlt: "Student celebrating graduation"},
|
|
{
|
|
id: "p-individual", name: "Sesión Individual", price: "Desde $50", imageSrc: "http://img.b2bpic.net/free-photo/tattooed-redhead-girl-wearing-trendy-clothes-sitting-stairs-outside_613910-5284.jpg?_wi=2", imageAlt: "Stylish woman in a personal photoshoot"},
|
|
{
|
|
id: "p-couple", name: "Sesión de Pareja", price: "Desde $60", imageSrc: "http://img.b2bpic.net/free-photo/elegant-couple-winter-park_1157-17674.jpg", imageAlt: "Couple in a romantic photoshoot"},
|
|
{
|
|
id: "p-birthday", name: "Cumpleaños Especial", price: "Desde $100", imageSrc: "http://img.b2bpic.net/free-photo/kids-blowing-out-birthday-candles-having-fun_23-2147897741.jpg", imageAlt: "Child celebrating birthday with cake"},
|
|
{
|
|
id: "p-event", name: "Evento Especial", price: "Cotización", imageSrc: "http://img.b2bpic.net/free-photo/glance-path-lies-garlands-made-threads-with-chrysanthemum-buds_1304-3347.jpg", imageAlt: "Elegant event photography"},
|
|
]}
|
|
title="Historias contadas en imágenes"
|
|
description="Explora una colección de momentos capturados, cada imagen cuenta una historia única y especial que espera ser descubierta."
|
|
tag="PORTAFOLIO"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFive
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "t-maria", name: "María G.", date: "Junio 2024", title: "Madre de Quinceañera", quote: "Constanza capturó cada momento de la quinceañera de mi hija de manera absolutamente perfecta. Las fotos quedaron increíbles, naturales y llenas de emoción. ¡Toda la familia quedó enamorada!", tag: "QUINCEAÑERA · MIRAMAR", avatarSrc: "http://img.b2bpic.net/free-photo/handsome-business-man-wearing-suit-looking-camera-smiling-broadly-with-happy-face-standing-white-background_141793-54115.jpg", avatarAlt: "Avatar of María G.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-father-daughter-playing-with-tiara-wand_23-2148854017.jpg", imageAlt: "Image related to Quinceañera event"},
|
|
{
|
|
id: "t-sofia", name: "Sofía R.", date: "Mayo 2024", title: "Estudiante Graduada", quote: "Contraté a CJ Photography para mi sesión de graduación y fue la mejor decisión. Super profesional, puntual y con un ojo increíble para los ángulos. Mis fotos quedaron de revista.", tag: "GRADUACIÓN · MIAMI", avatarSrc: "http://img.b2bpic.net/free-photo/beautiful-happy-african-female-graduate-smiling-showing-okay-holding-books_176420-14340.jpg", avatarAlt: "Avatar of Sofía R.", imageSrc: "http://img.b2bpic.net/free-photo/young-female-graduate-uniform-showing-winner-gesture-looking-confident_176474-82395.jpg", imageAlt: "Image related to Graduation event"},
|
|
{
|
|
id: "t-alejandro", name: "Alejandro P.", date: "Abril 2024", title: "Cliente de Mini Sesión", quote: "La mini sesión superó todas mis expectativas. Por el precio pensé que sería algo simple, pero la calidad fue extraordinaria. Definitivamente volvemos para la sesión familiar completa.", tag: "MINI SESIÓN · WESTON", avatarSrc: "http://img.b2bpic.net/free-photo/friendly-entrepreneur-posing-modern-office_74855-3442.jpg", avatarAlt: "Avatar of Alejandro P.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-orange-dress-jacket-sitting-ground-looking-garden_176474-8462.jpg", imageAlt: "Image related to Mini Session outdoor"},
|
|
{
|
|
id: "t-valentina-diego", name: "Valentina & Diego", date: "Marzo 2024", title: "Pareja", quote: "Constanza hizo que toda la sesión de pareja fuera relajada y divertida. Logró fotos súper naturales donde realmente se ve el amor. ¡Las usamos para nuestra boda!", tag: "SESIÓN DE PAREJA · PEMBROKE PINES", avatarSrc: "http://img.b2bpic.net/free-photo/happy-smiling-couple-diversity-love-moment-together_1150-9312.jpg", avatarAlt: "Avatar of Valentina & Diego", imageSrc: "http://img.b2bpic.net/free-photo/couple-spending-time-together-nature_23-2149453318.jpg", imageAlt: "Image related to Couple Photoshoot"},
|
|
{
|
|
id: "t-lucia", name: "Lucía M.", date: "Febrero 2024", title: "Madre de Cumpleañera", quote: "El cumpleaños de mi niña quedó inmortalizado de la manera más hermosa. Constanza tiene un talento especial para capturar la alegría y la espontaneidad. Servicio 100% recomendado.", tag: "CUMPLEAÑOS · MIAMI BEACH", avatarSrc: "http://img.b2bpic.net/free-photo/young-couple-man-woman-happy-man-hugging-his-beloved-girlfriend-smiling-while-wrapping-her-into-warm-blanket-standing-green-background_141793-66754.jpg", avatarAlt: "Avatar of Lucía M.", imageSrc: "http://img.b2bpic.net/free-photo/pretty-little-girl-holiday-hat-holding-bunch-baloons-shouting-with-hand-near-mouth-birthday-party-concept-standing-orange-background_141793-45707.jpg", imageAlt: "Image related to Birthday celebration"},
|
|
{
|
|
id: "t-carmen", name: "Carmen S.", date: "Enero 2024", title: "Cliente de Evento", quote: "Muy profesional y dedicada a su trabajo. Llegó a tiempo, dirigió perfectamente la sesión y entregó las fotos editadas en tiempo récord. ¡El resultado fue espectacular! Ya la recomendé a todas mis amigas.", tag: "EVENTO · CORAL GABLES", avatarSrc: "http://img.b2bpic.net/free-photo/front-view-woman-looking-camera-office_23-2148218515.jpg", avatarAlt: "Avatar of Carmen S.", imageSrc: "http://img.b2bpic.net/free-photo/yellow-lights-shine-around-white-bower-darkness_1304-3769.jpg", imageAlt: "Image related to Event photography"},
|
|
]}
|
|
title="Lo que dicen mis clientes"
|
|
description="La satisfacción de nuestros clientes es nuestra mayor recompensa. Descubre sus experiencias con CJ Photography."
|
|
tag="TESTIMONIOS"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "plain"}}
|
|
tag="CONTACTO"
|
|
title="Reserva tu sesión hoy"
|
|
description="¿Lista para crear recuerdos inolvidables? Escríbeme por cualquiera de estos canales y con gusto te ayudo a planificar la sesión perfecta para ti."
|
|
buttons={[
|
|
{
|
|
text: "WhatsApp: +1 (754) 249-5038", href: "https://wa.me/17542495038"},
|
|
{
|
|
text: "Instagram: @cjphotographyfl", href: "https://instagram.com/cjphotographyfl"},
|
|
{
|
|
text: "TikTok: @cjphotographyfl", href: "https://tiktok.com/@cjphotographyfl"},
|
|
{
|
|
text: "Correo Electrónico: hello@cjphotography.com", href: "mailto:hello@cjphotography.com"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="CJ Photography"
|
|
leftLink={{
|
|
text: "Servicio en todo el sur de Florida", href: "#services"}}
|
|
rightLink={{
|
|
text: "© 2024 CJ Photography. Todos los derechos reservados.", href: "#"}}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|