241 lines
15 KiB
TypeScript
241 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
|
import TextAbout from '@/components/sections/about/TextAbout';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
|
|
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FooterBase from '@/components/sections/footer/FooterBase';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="expand-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="medium"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="blurBottom"
|
|
cardStyle="subtle-shadow"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="Avstar Studios"
|
|
navItems={[
|
|
{ name: "Portafolio", id: "portfolio" },
|
|
{ name: "Servicios", id: "services" },
|
|
{ name: "FAQ", id: "faq" },
|
|
{ name: "Contacto", id: "contact" },
|
|
]}
|
|
button={{ text: "CONSULTORÍA", href: "#contact" }}
|
|
animateOnLoad={true}
|
|
navItemClassName="text-foreground font-normal tracking-wide"
|
|
buttonClassName="bg-primary-cta text-primary-cta-text hover:bg-opacity-90 font-semibold uppercase tracking-wider"
|
|
buttonTextClassName="text-xs font-bold"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDualMedia
|
|
title="Elevamos el Estándar Visual"
|
|
description="Producción audiovisual de lujo para marcas que exigen excelencia absoluta en cada fotograma."
|
|
tag="Audiovisual Premium"
|
|
background={{ variant: "plain" }}
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-vector/geometrical-shapes-flyer-design_1375-63.jpg", imageAlt: "Geometric camera frame animation with thin lines"},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa1OzX9CYlGDR6vsxTx1aHepdE/uploaded-1772816516521-r8a5d6ex.png", imageAlt: "Avstar Studios logo mark in red"},
|
|
]}
|
|
rating={5}
|
|
ratingText="Estándar de lujo establecido"
|
|
buttons={[
|
|
{
|
|
text: "VER PORTAFOLIO", href: "#portfolio"},
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
buttonAnimation="slide-up"
|
|
tagAnimation="slide-up"
|
|
containerClassName="bg-background"
|
|
titleClassName="text-4xl md:text-6xl font-bold text-foreground tracking-tight"
|
|
descriptionClassName="text-lg text-foreground opacity-90 font-light"
|
|
tagClassName="text-foreground font-semibold uppercase tracking-widest"
|
|
buttonClassName="bg-primary-cta text-primary-cta-text hover:bg-opacity-90 font-bold uppercase tracking-wider px-8 py-3"
|
|
buttonTextClassName="text-sm font-bold"
|
|
ratingTextClassName="text-sm text-foreground font-medium"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
tag="Por Qué Avstar"
|
|
title="No hacemos vídeos, creamos el estándar de lujo de Avstar Studios"
|
|
useInvertedBackground={false}
|
|
tagAnimation="slide-up"
|
|
containerClassName="py-32 px-6"
|
|
titleClassName="text-5xl md:text-6xl font-bold text-foreground leading-tight tracking-tight"
|
|
tagClassName="text-foreground font-semibold uppercase tracking-widest text-sm"
|
|
/>
|
|
</div>
|
|
|
|
<div id="portfolio" data-section="portfolio">
|
|
<ProductCardThree
|
|
title="Portafolio de Proyectos"
|
|
description="Una cuidadosa selección de nuestros trabajos en producción audiovisual de lujo. Cada proyecto representa nuestro compromiso con la excelencia visual."
|
|
tag="4K Cinematography"
|
|
products={[
|
|
{
|
|
id: "1", name: "Lujo Inmobiliario", price: "Consultar", imageSrc: "http://img.b2bpic.net/free-photo/young-caucasian-pretty-blonde-hair-woman-outdoor-kitchen-villa-female-with-light-makeup-summer-white-dress-straw-hat-vacation_343596-2522.jpg?_wi=1", imageAlt: "Luxury real estate project showcase"},
|
|
{
|
|
id: "2", name: "Clínicas Élite", price: "Consultar", imageSrc: "http://img.b2bpic.net/free-photo/senior-people-attending-videocall-meeting-with-relatives-hospital-grandparents-using-laptop-computer-chat-with-family-online-remote-videoconference-internet-conversation_482257-33895.jpg?_wi=1", imageAlt: "Elite dental clinic project"},
|
|
{
|
|
id: "3", name: "Narrativa Corporativa", price: "Consultar", imageSrc: "http://img.b2bpic.net/free-photo/close-up-camera-recording-food-industry-workers-cooking-delicious-vegetable-gourmet-dish-restaurant-kitchen-gastronomy-experts-broadcasting-meal-preparing-process-tv-culinary-show-program_482257-40150.jpg?_wi=1", imageAlt: "Corporate storytelling project"},
|
|
{
|
|
id: "4", name: "Inmobiliario Premium", price: "Consultar", imageSrc: "http://img.b2bpic.net/free-photo/thoughtful-woman-black-silk-robe-sits-windowsill-before-beautiful-new-york-cityscape_8353-1454.jpg?_wi=1", imageAlt: "Premium real estate showcase"},
|
|
]}
|
|
gridVariant="two-columns-alternating-heights"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
containerClassName="py-32 px-6 bg-background"
|
|
textBoxTitleClassName="text-5xl md:text-6xl font-bold text-foreground tracking-tight"
|
|
textBoxDescriptionClassName="text-lg text-foreground opacity-90"
|
|
gridClassName="gap-8 md:gap-12"
|
|
cardNameClassName="text-xl font-semibold text-foreground mt-4"
|
|
imageClassName="w-full h-80 md:h-96 object-cover rounded-lg"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardNine
|
|
title="Nuestros Servicios"
|
|
description="Especializados en la producción audiovisual de máxima calidad para sectores de lujo."
|
|
tag="Expertise"
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Lujo Inmobiliario", description: "Producción cinematográfica de propiedades de lujo con equipamiento 4K, drones de alta gama y postproducción de nivel Hollywood.", phoneOne: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-caucasian-pretty-blonde-hair-woman-outdoor-kitchen-villa-female-with-light-makeup-summer-white-dress-straw-hat-vacation_343596-2522.jpg?_wi=2", imageAlt: "Luxury real estate project"},
|
|
phoneTwo: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/thoughtful-woman-black-silk-robe-sits-windowsill-before-beautiful-new-york-cityscape_8353-1454.jpg?_wi=2", imageAlt: "Premium real estate project"},
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Clínicas Dentales Élite", description: "Contenido audiovisual especializado para clínicas dentales de alto nivel, enfatizando profesionalismo, tecnología y confianza.", phoneOne: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/senior-people-attending-videocall-meeting-with-relatives-hospital-grandparents-using-laptop-computer-chat-with-family-online-remote-videoconference-internet-conversation_482257-33895.jpg?_wi=2", imageAlt: "Elite dental clinic project"},
|
|
phoneTwo: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/diverse-medical-staff-working-reception-counter-filling-checkup-report-papers-making-appointments-nurse-receptionist-doing-registration-work-hospital-waiting-room_482257-51640.jpg", imageAlt: "Dental clinic reception project"},
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Narrativa Corporativa Premium", description: "Storytelling audiovisual de marcas de lujo con enfoque en autenticidad, elegancia y posicionamiento de mercado.", phoneOne: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-camera-recording-food-industry-workers-cooking-delicious-vegetable-gourmet-dish-restaurant-kitchen-gastronomy-experts-broadcasting-meal-preparing-process-tv-culinary-show-program_482257-40150.jpg?_wi=2", imageAlt: "Corporate brand storytelling project"},
|
|
phoneTwo: {
|
|
imageSrc: "http://img.b2bpic.net/free-psd/get-glam-landing-page-template_23-2148986054.jpg", imageAlt: "Luxury corporate event project"},
|
|
},
|
|
]}
|
|
showStepNumbers={true}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
containerClassName="py-32 bg-background"
|
|
textBoxTitleClassName="text-5xl md:text-6xl font-bold text-foreground tracking-tight"
|
|
textBoxDescriptionClassName="text-lg text-foreground opacity-90 max-w-2xl"
|
|
featureTitleClassName="text-3xl md:text-4xl font-bold text-foreground"
|
|
featureDescriptionClassName="text-lg text-foreground opacity-85 leading-relaxed"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
title="Preguntas Frecuentes"
|
|
description="Todo lo que necesitas saber sobre nuestros servicios de producción audiovisual."
|
|
tag="FAQ"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "¿Cuál es tu proceso de producción?", content: "Nuestro proceso comienza con una consulta detallada para entender tu visión. Luego, realizamos preproducción exhaustiva, producción con equipamiento de clase mundial, y postproducción de nivel cinematográfico. Cada proyecto es tratado como una obra de arte."},
|
|
{
|
|
id: "2", title: "¿Qué incluye un proyecto típico?", content: "Cada proyecto incluye: concepto creativo, storyboard, producción de múltiples jornadas, cinematografía 4K, drones profesionales, color grading avanzado, edición y composición. Personalizamos el alcance según tus necesidades específicas."},
|
|
{
|
|
id: "3", title: "¿Cuál es el timeline estándar?", content: "Los proyectos típicamente requieren 4-8 semanas desde la consulta inicial hasta la entrega final, dependiendo de la complejidad. Ofrecemos opciones expedidas para proyectos urgentes sin comprometer la calidad."},
|
|
{
|
|
id: "4", title: "¿Trabajan internacionalmente?", content: "Sí. Contamos con experiencia en producciones internacionales. Hemos trabajado con clientes en múltiples países, adaptándonos a diferentes contextos culturales y regulaciones locales."},
|
|
{
|
|
id: "5", title: "¿Qué equipo utilizan?", content: "Utilizamos equipamiento de gama profesional: cámaras RED y ARRI, drones de cinematografía, lentes de cine premium, y suites de postproducción con las herramientas más avanzadas de la industria."},
|
|
{
|
|
id: "6", title: "¿Cómo comenzar una colaboración?", content: "Contáctanos para una consultoría inicial sin compromiso. Discutimos tu proyecto, presupuesto y objetivos. Si ambos sentimos que es una buena alianza, procederemos con una propuesta detallada."},
|
|
]}
|
|
textboxLayout="default"
|
|
faqsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
containerClassName="py-32 px-6 bg-background"
|
|
textBoxTitleClassName="text-5xl md:text-6xl font-bold text-foreground tracking-tight mb-4"
|
|
textBoxDescriptionClassName="text-lg text-foreground opacity-90 mb-16"
|
|
faqsContainerClassName="bg-card rounded-lg p-8 md:p-12"
|
|
columnClassName="space-y-6"
|
|
accordionTitleClassName="text-lg font-semibold text-foreground"
|
|
accordionContentClassName="text-foreground opacity-85 leading-relaxed"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
text="Estamos listos para elevar tu visión a nuevas alturas. Solicita una consultoría con nuestro equipo de directores y productores."
|
|
animationType="entrance-slide"
|
|
buttons={[
|
|
{
|
|
text: "SOLICITAR CONSULTORÍA", href: "#"},
|
|
]}
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={false}
|
|
containerClassName="py-32 px-6 bg-background"
|
|
textClassName="text-4xl md:text-5xl font-bold text-foreground tracking-tight"
|
|
buttonClassName="bg-primary-cta text-primary-cta-text hover:bg-opacity-90 font-bold uppercase tracking-wider px-12 py-4"
|
|
buttonTextClassName="text-sm font-bold"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
logoText="Avstar Studios"
|
|
copyrightText="© 2025 | Avstar Studios. Creadores del Estándar Visual de Lujo."
|
|
columns={[
|
|
{
|
|
title: "Servicios", items: [
|
|
{ label: "Lujo Inmobiliario", href: "#services" },
|
|
{ label: "Clínicas Élite", href: "#services" },
|
|
{ label: "Narrativa Corporativa", href: "#services" },
|
|
],
|
|
},
|
|
{
|
|
title: "Empresa", items: [
|
|
{ label: "Portafolio", href: "#portfolio" },
|
|
{ label: "Acerca de", href: "#about" },
|
|
{ label: "FAQ", href: "#faq" },
|
|
],
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacidad", href: "#" },
|
|
{ label: "Términos", href: "#" },
|
|
{ label: "Contacto", href: "#contact" },
|
|
],
|
|
},
|
|
]}
|
|
containerClassName="bg-card border-t border-accent"
|
|
logoTextClassName="text-xl font-bold text-foreground"
|
|
columnsClassName="grid grid-cols-3 gap-8"
|
|
columnTitleClassName="font-semibold text-foreground text-sm uppercase tracking-widest mb-4"
|
|
columnItemClassName="text-foreground opacity-75 hover:opacity-100 transition-opacity text-sm"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|