284 lines
15 KiB
TypeScript
284 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
|
import HeroBillboardTestimonial from "@/components/sections/hero/HeroBillboardTestimonial";
|
|
import FeatureCardTwelve from "@/components/sections/feature/FeatureCardTwelve";
|
|
import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
|
|
import ProductCardOne from "@/components/sections/product/ProductCardOne";
|
|
import PricingCardEight from "@/components/sections/pricing/PricingCardEight";
|
|
import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
|
|
import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
|
|
import ContactText from "@/components/sections/contact/ContactText";
|
|
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
|
import { Award, Crown, Sparkles, Star, TrendingUp, Users, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-stagger"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="medium"
|
|
sizing="mediumLarge"
|
|
background="circleGradient"
|
|
cardStyle="inset"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="bold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
brandName="MH."
|
|
navItems={[
|
|
{ name: "Servicios", id: "services" },
|
|
{ name: "Planes", id: "pricing" },
|
|
{ name: "Seguridad", id: "security" },
|
|
{ name: "Contacto", id: "contact" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardTestimonial
|
|
title="Tu web no debería costarte clientes."
|
|
description="Diseño, desarrollo y seguridad web premium para marcas que quieren liderar, no sobrevivir."
|
|
tag="Digital Luxury"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AU6rAxkWRMUQTFzKwgTjWFsSqZ/ultra-premium-luxury-digital-interface-s-1772635191188-f9744b7e.png"
|
|
imageAlt="MH. Premium Digital Experience"
|
|
mediaAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Elevar Mi Presencia Digital", href: "contact" },
|
|
{ text: "Ver Planes", href: "pricing" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
background={{ variant: "glowing-orb" }}
|
|
testimonials={[
|
|
{
|
|
name: "Carlos Mendez", handle: "CEO, TechFlow", testimonial: "MH. transformó nuestra presencia digital completamente. Ahora competimos en otro nivel.", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AU6rAxkWRMUQTFzKwgTjWFsSqZ/professional-portrait-photo-of-a-success-1772635185595-f8bdd17d.png"
|
|
},
|
|
{
|
|
name: "Sofia Rodriguez", handle: "Directora Marketing, InnovateLab", testimonial: "La seguridad y velocidad de nuestra web mejoró drásticamente. Confianza absoluta.", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AU6rAxkWRMUQTFzKwgTjWFsSqZ/professional-portrait-photo-of-a-young-p-1772635186829-e50ce945.png"
|
|
},
|
|
{
|
|
name: "Miguel Torres", handle: "Founder, GrowthCo", testimonial: "No es solo una web. Es un activo que realmente genera conversiones. Increíble ROI.", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AU6rAxkWRMUQTFzKwgTjWFsSqZ/professional-portrait-photo-of-a-busines-1772635185319-10f7b25a.png"
|
|
}
|
|
]}
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="problem-solution" data-section="problem-solution">
|
|
<FeatureCardTwelve
|
|
title="No compites en precio. Compites en percepción."
|
|
description="Cada aspecto de tu web debe transmitir: autoridad, seguridad, profesionalismo y diferenciación."
|
|
textboxLayout="default"
|
|
animationType="blur-reveal"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: "problems", label: "Realidad Actual", title: "Los dolores que te cierran oportunidades", items: [
|
|
"Web lenta que pierde clientes", "Diseño amateur sin conversión", "Vulnerable a ataques digitales", "Marca invisible en el mercado", "Sin soporte técnico confiable"
|
|
]
|
|
},
|
|
{
|
|
id: "solutions", label: "MH. Solution", title: "Transformamos cada problema en oportunidad", items: [
|
|
"Desarrollo ultra-optimizado", "Diseño estratégico de conversión", "Seguridad avanzada profesional", "Marca diferenciada y premium", "Soporte y mantenimiento dedicado"
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TestimonialAboutCard
|
|
tag="Sobre MH."
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
title="No creamos webs. Creamos activos digitales de alto valor."
|
|
description="MH. es una marca personal especializada en estrategia digital"
|
|
subdescription="Expertise en desarrollo premium y transformación digital"
|
|
icon={Zap}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AU6rAxkWRMUQTFzKwgTjWFsSqZ/clean-organized-3d-digital-interface-sho-1772635186571-dc3a4001.png"
|
|
imageAlt="MH. Premium Development"
|
|
mediaAnimation="slide-up"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<ProductCardOne
|
|
title="Servicios Premium"
|
|
description="Soluciones completas para tu presencia digital de alto impacto"
|
|
tag="Specialized Services"
|
|
tagAnimation="blur-reveal"
|
|
textboxLayout="default"
|
|
animationType="scale-rotate"
|
|
useInvertedBackground={false}
|
|
gridVariant="three-columns-all-equal-width"
|
|
products={[
|
|
{
|
|
id: "1", name: "Desarrollo Web Desde 0", price: "Estratégico", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AU6rAxkWRMUQTFzKwgTjWFsSqZ/ultra-premium-luxury-digital-interface-s-1772635191188-f9744b7e.png"
|
|
},
|
|
{
|
|
id: "2", name: "Optimización de Velocidad", price: "Performance", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AU6rAxkWRMUQTFzKwgTjWFsSqZ/clean-organized-3d-digital-interface-sho-1772635186571-dc3a4001.png"
|
|
},
|
|
{
|
|
id: "3", name: "Seguridad Web Avanzada", price: "Protección", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AU6rAxkWRMUQTFzKwgTjWFsSqZ/abstract-3d-representation-of-digital-ch-1772635186848-dd5b1178.jpg"
|
|
},
|
|
{
|
|
id: "4", name: "Rediseño Estratégico", price: "Evolución", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AU6rAxkWRMUQTFzKwgTjWFsSqZ/ultra-premium-luxury-digital-interface-s-1772635191188-f9744b7e.png"
|
|
},
|
|
{
|
|
id: "5", name: "Conversión + SEO", price: "Resultados", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AU6rAxkWRMUQTFzKwgTjWFsSqZ/clean-organized-3d-digital-interface-sho-1772635186571-dc3a4001.png"
|
|
},
|
|
{
|
|
id: "6", name: "Mantenimiento Continuo", price: "Tranquilidad", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AU6rAxkWRMUQTFzKwgTjWFsSqZ/abstract-3d-representation-of-digital-ch-1772635186848-dd5b1178.jpg"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardEight
|
|
title="Planes de Inversión Digital"
|
|
description="No es gasto. Es inversión estratégica en tu activo más importante."
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={true}
|
|
tag="Transparent Pricing"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="opacity"
|
|
plans={[
|
|
{
|
|
id: "base", badge: "Para Comenzar", badgeIcon: Zap,
|
|
price: "550€", subtitle: "Presencia profesional que transmite seriedad", buttons: [{ text: "Comenzar Ahora", href: "contact" }],
|
|
features: [
|
|
"Web profesional responsive", "Diseño moderno estratégico", "SEO básico optimizado", "Certificado SSL incluido", "1 mes de soporte técnico"
|
|
]
|
|
},
|
|
{
|
|
id: "pro", badge: "Más Popular", badgeIcon: Crown,
|
|
price: "1150€", subtitle: "Para negocios que quieren crecer competitivamente", buttons: [{ text: "Impulsar Negocio", href: "contact" }],
|
|
features: [
|
|
"Todo lo del Plan Base", "Animaciones avanzadas 3D", "Optimización extrema de velocidad", "Seguridad mejorada profesional", "Integraciones estratégicas", "3 meses de soporte premium"
|
|
]
|
|
},
|
|
{
|
|
id: "elite", badge: "Máxima Autoridad", badgeIcon: Star,
|
|
price: "1850€", subtitle: "Domina tu mercado. Compite en percepción, no en precio.", buttons: [{ text: "Acceso Elite", href: "contact" }],
|
|
features: [
|
|
"Diseño totalmente personalizado", "Web 3D interactiva inmersiva", "Seguridad avanzada profesional", "Protección contra ataques", "Optimización extrema", "Soporte prioritario 24/7", "Análisis estratégico profundo", "Consultoría digital incluida"
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardTwo
|
|
title="Impacto Comprobado"
|
|
description="Resultados reales de transformación digital con MH."
|
|
textboxLayout="default"
|
|
animationType="scale-rotate"
|
|
useInvertedBackground={false}
|
|
tag="Proven Results"
|
|
tagIcon={TrendingUp}
|
|
tagAnimation="blur-reveal"
|
|
gridVariant="uniform-all-items-equal"
|
|
metrics={[
|
|
{
|
|
id: "1", value: "98%", description: "Velocidad de carga optimizada"
|
|
},
|
|
{
|
|
id: "2", value: "+320%", description: "Aumento en conversiones"
|
|
},
|
|
{
|
|
id: "3", value: "24/7", description: "Protección de seguridad"
|
|
},
|
|
{
|
|
id: "4", value: "∞", description: "Escalabilidad garantizada"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
title="Historias de Transformación"
|
|
description="Marcas que elevaron su presencia digital y sus resultados"
|
|
textboxLayout="default"
|
|
animationType="blur-reveal"
|
|
useInvertedBackground={true}
|
|
tag="Client Success"
|
|
tagIcon={Users}
|
|
tagAnimation="slide-up"
|
|
gridVariant="uniform-all-items-equal"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Ana García", role: "Fundadora", company: "Digital Ventures", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AU6rAxkWRMUQTFzKwgTjWFsSqZ/professional-portrait-photo-of-a-success-1772635185595-f8bdd17d.png"
|
|
},
|
|
{
|
|
id: "2", name: "Jorge López", role: "CEO", company: "TechSolutions", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AU6rAxkWRMUQTFzKwgTjWFsSqZ/professional-portrait-photo-of-a-young-p-1772635186829-e50ce945.png"
|
|
},
|
|
{
|
|
id: "3", name: "María Fernández", role: "Directora", company: "Innovation Lab", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AU6rAxkWRMUQTFzKwgTjWFsSqZ/professional-portrait-photo-of-a-busines-1772635185319-10f7b25a.png"
|
|
},
|
|
{
|
|
id: "4", name: "David Martinez", role: "Emprendedor", company: "StartupXYZ", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AU6rAxkWRMUQTFzKwgTjWFsSqZ/professional-portrait-photo-of-a-creativ-1772635186477-a997d416.png"
|
|
},
|
|
{
|
|
id: "5", name: "Laura Ruiz", role: "Product Manager", company: "GrowthCo", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AU6rAxkWRMUQTFzKwgTjWFsSqZ/professional-portrait-photo-of-an-entrep-1772635185610-610d2b7f.png"
|
|
},
|
|
{
|
|
id: "6", name: "Carlos Sánchez", role: "Empresario", company: "Digital Hub", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AU6rAxkWRMUQTFzKwgTjWFsSqZ/professional-portrait-photo-of-a-young-b-1772635185254-a73e9c00.png"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="security" data-section="security">
|
|
<ContactText
|
|
text="🛡 Una web vulnerable no es una opción. La confianza se construye con seguridad."
|
|
animationType="reveal-blur"
|
|
background={{ variant: "radial-gradient" }}
|
|
useInvertedBackground={true}
|
|
buttons={[]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
text="Si tu marca es seria, tu web también debería serlo. Transformemos tu presencia en un activo que genera resultados."
|
|
animationType="entrance-slide"
|
|
background={{ variant: "sparkles-gradient" }}
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "Agendar Consulta", href: "contact" },
|
|
{ text: "Ver Portafolio", href: "services" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="MH."
|
|
leftLink={{ text: "Privacidad", href: "#" }}
|
|
rightLink={{ text: "Términos", href: "#" }}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|