Merge version_1 into main #2
459
src/app/page.tsx
459
src/app/page.tsx
@@ -17,335 +17,158 @@ import { Award, CheckCircle, Facebook, Instagram, Shield, ShieldCheck, Zap } fro
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="expand-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="fluid"
|
||||
cardStyle="soft-shadow"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
defaultButtonVariant="expand-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="fluid"
|
||||
cardStyle="soft-shadow"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Inicio",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Nosotros",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Productos",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "Contacto",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="FIXOL"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Inicio", id: "hero" },
|
||||
{ name: "Nosotros", id: "about" },
|
||||
{ name: "Productos", id: "products" },
|
||||
{ name: "Contacto", id: "contact" },
|
||||
]}
|
||||
brandName="FIXOL"
|
||||
button={{ text: "Contacto", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Fuerza, adherencia y confianza en cada proyecto"
|
||||
description="Soluciones profesionales para pegar, recubrir y construir con la calidad de FIXOL."
|
||||
buttons={[
|
||||
{
|
||||
text: "Ver productos",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
text: "Contactar",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/worker-cuts-iron-with-tool_140725-7623.jpg"
|
||||
showDimOverlay={true}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Fuerza, adherencia y confianza en cada proyecto"
|
||||
description="Soluciones profesionales para pegar, recubrir y construir con la calidad de FIXOL."
|
||||
buttons={[{ text: "Ver productos", href: "#products" }, { text: "Contactar", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/worker-cuts-iron-with-tool_140725-7623.jpg"
|
||||
showDimOverlay={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="Somos FIXOL"
|
||||
metrics={[
|
||||
{
|
||||
icon: ShieldCheck,
|
||||
label: "Calidad",
|
||||
value: "100%",
|
||||
},
|
||||
{
|
||||
icon: Award,
|
||||
label: "Experiencia",
|
||||
value: "20+ Años",
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
label: "Eficiencia",
|
||||
value: "Rápida",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="Somos FIXOL"
|
||||
metrics={[
|
||||
{ icon: ShieldCheck, label: "Calidad", value: "100%" },
|
||||
{ icon: Award, label: "Experiencia", value: "20+ Años" },
|
||||
{ icon: Zap, label: "Eficiencia", value: "Rápida" },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="categories" data-section="categories">
|
||||
<FeatureCardTwentyThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
id: "cat-1",
|
||||
title: "Adhesivos",
|
||||
tags: [
|
||||
"Pegado de piso",
|
||||
"Porcelanato",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/elevated-view-female-potter-cleaning-paint-tiles-with-sharp-tool_23-2148155167.jpg",
|
||||
},
|
||||
{
|
||||
id: "cat-2",
|
||||
title: "Recubrimientos",
|
||||
tags: [
|
||||
"Acabados finos",
|
||||
"Muros",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/background-wall-concept-with-copy-space_23-2148801270.jpg",
|
||||
},
|
||||
{
|
||||
id: "cat-3",
|
||||
title: "Aditivos",
|
||||
tags: [
|
||||
"Resistencia",
|
||||
"Complementos",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-female-potter-s-hand-inserting-bowl-paint-bucket-with-tong_23-2148155154.jpg",
|
||||
},
|
||||
{
|
||||
id: "cat-4",
|
||||
title: "Especializados",
|
||||
tags: [
|
||||
"Premium",
|
||||
"Arquitectónicos",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/marble-concrete-background_53876-88905.jpg",
|
||||
},
|
||||
]}
|
||||
title="Categorías de Producto"
|
||||
description="Explora nuestra gama de soluciones técnicas para cualquier necesidad constructiva."
|
||||
/>
|
||||
</div>
|
||||
<div id="categories" data-section="categories">
|
||||
<FeatureCardTwentyThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ id: "cat-1", title: "Adhesivos", tags: ["Pegado de piso", "Porcelanato"], imageSrc: "http://img.b2bpic.net/free-photo/elevated-view-female-potter-cleaning-paint-tiles-with-sharp-tool_23-2148155167.jpg" },
|
||||
{ id: "cat-2", title: "Recubrimientos", tags: ["Acabados finos", "Muros"], imageSrc: "http://img.b2bpic.net/free-photo/background-wall-concept-with-copy-space_23-2148801270.jpg" },
|
||||
{ id: "cat-3", title: "Aditivos", tags: ["Resistencia", "Complementos"], imageSrc: "http://img.b2bpic.net/free-photo/close-up-female-potter-s-hand-inserting-bowl-paint-bucket-with-tong_23-2148155154.jpg" },
|
||||
{ id: "cat-4", title: "Especializados", tags: ["Premium", "Arquitectónicos"], imageSrc: "http://img.b2bpic.net/free-photo/marble-concrete-background_53876-88905.jpg" },
|
||||
]}
|
||||
title="Categorías de Producto"
|
||||
description="Explora nuestra gama de soluciones técnicas para cualquier necesidad constructiva."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Fixol Total",
|
||||
price: "Profesional",
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/brutalism-style-facebook-template_23-2150596911.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Pegaturbo",
|
||||
price: "Rápida",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/photo-concrete-texture-pattern_58702-13271.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Unicerámica",
|
||||
price: "Versátil",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/photo-concrete-texture-pattern_58702-13348.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Ligatón",
|
||||
price: "Resistente",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-sack-with-seeds-arrangement_23-2149050780.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Pegaveneciano",
|
||||
price: "Especializado",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-clay-pieces-arrangement_23-2149480221.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Textuco",
|
||||
price: "Premium",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/photo-concrete-texture-pattern_58702-13307.jpg",
|
||||
},
|
||||
]}
|
||||
title="Productos Destacados"
|
||||
description="Soluciones de alta adherencia y desempeño para los constructores más exigentes."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", name: "Fixol Total", price: "Profesional", imageSrc: "http://img.b2bpic.net/free-psd/brutalism-style-facebook-template_23-2150596911.jpg" },
|
||||
{ id: "p2", name: "Pegaturbo", price: "Rápida", imageSrc: "http://img.b2bpic.net/free-photo/photo-concrete-texture-pattern_58702-13271.jpg" },
|
||||
{ id: "p3", name: "Unicerámica", price: "Versátil", imageSrc: "http://img.b2bpic.net/free-photo/photo-concrete-texture-pattern_58702-13348.jpg" },
|
||||
{ id: "p4", name: "Ligatón", price: "Resistente", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-sack-with-seeds-arrangement_23-2149050780.jpg" },
|
||||
{ id: "p5", name: "Pegaveneciano", price: "Especializado", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-clay-pieces-arrangement_23-2149480221.jpg" },
|
||||
{ id: "p6", name: "Textuco", price: "Premium", imageSrc: "http://img.b2bpic.net/free-photo/photo-concrete-texture-pattern_58702-13307.jpg" },
|
||||
]}
|
||||
title="Productos Destacados"
|
||||
description="Soluciones de alta adherencia y desempeño para los constructores más exigentes."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="benefits" data-section="benefits">
|
||||
<MetricCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "b1",
|
||||
icon: CheckCircle,
|
||||
title: "Alta adherencia",
|
||||
value: "Seguridad",
|
||||
},
|
||||
{
|
||||
id: "b2",
|
||||
icon: Shield,
|
||||
title: "Resistencia superior",
|
||||
value: "Durabilidad",
|
||||
},
|
||||
{
|
||||
id: "b3",
|
||||
icon: Award,
|
||||
title: "Acabado profesional",
|
||||
value: "Calidad",
|
||||
},
|
||||
{
|
||||
id: "b4",
|
||||
icon: Zap,
|
||||
title: "Rendimiento confiable",
|
||||
value: "Eficiencia",
|
||||
},
|
||||
]}
|
||||
title="¿Por qué elegir FIXOL?"
|
||||
description="Nuestra garantía de calidad en cada obra."
|
||||
/>
|
||||
</div>
|
||||
<div id="benefits" data-section="benefits">
|
||||
<MetricCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{ id: "b1", icon: CheckCircle, title: "Alta adherencia", value: "Seguridad" },
|
||||
{ id: "b2", icon: Shield, title: "Resistencia superior", value: "Durabilidad" },
|
||||
{ id: "b3", icon: Award, title: "Acabado profesional", value: "Calidad" },
|
||||
{ id: "b4", icon: Zap, title: "Rendimiento confiable", value: "Eficiencia" },
|
||||
]}
|
||||
title="¿Por qué elegir FIXOL?"
|
||||
description="Nuestra garantía de calidad en cada obra."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="applications" data-section="applications">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Instalación de pisos y porcelanatos",
|
||||
content: "Soluciones técnicas para formatos grandes y pequeños con máxima adherencia.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Muros y acabados finos",
|
||||
content: "Acabados perfectos que cumplen con los estándares de arquitectos.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Albercas y zonas húmedas",
|
||||
content: "Resistencia total ante la humedad con Pegaveneciano.",
|
||||
},
|
||||
]}
|
||||
title="Soluciones para cada aplicación"
|
||||
description="Donde sea que necesites calidad, FIXOL está presente."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="applications" data-section="applications">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "Instalación de pisos y porcelanatos", content: "Soluciones técnicas para formatos grandes y pequeños con máxima adherencia." },
|
||||
{ id: "f2", title: "Muros y acabados finos", content: "Acabados perfectos que cumplen con los estándares de arquitectos." },
|
||||
{ id: "f3", title: "Albercas y zonas húmedas", content: "Resistencia total ante la humedad con Pegaveneciano." },
|
||||
]}
|
||||
title="Soluciones para cada aplicación"
|
||||
description="Donde sea que necesites calidad, FIXOL está presente."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
title: "Albañil",
|
||||
quote: "La calidad de Fixol Total es inigualable, facilita mucho mi trabajo.",
|
||||
name: "Juan Pérez",
|
||||
role: "Maestro Albañil",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/builder-man-wearing-construction-uniform-safety-helmet-with-big-smile-face-showing-thumbs-up-isolated-blue-wall_141793-15040.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
title: "Arquitecto",
|
||||
quote: "Siempre recomiendo Fixol en mis obras por su desempeño técnico.",
|
||||
name: "Carlos Ruiz",
|
||||
role: "Arquitecto",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/engineer-holding-blueprints-reading-notes-clipboard-while-standing-gray-background_1150-8305.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
title: "Distribuidor",
|
||||
quote: "Es el producto que más me piden por la confianza que genera.",
|
||||
name: "María Gómez",
|
||||
role: "Distribuidora",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-successful-architector-smiling-holding-drawings-standing-office-wall_176420-16815.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
title: "Maestro de Obra",
|
||||
quote: "FIXOL es mi marca de confianza desde hace más de diez años en todo el país.",
|
||||
name: "Pedro López",
|
||||
role: "Contratista",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/builder-man-wearing-construction-uniform-safety-helmet-with-big-smile-face-showing-thumbs-up-isolated-blue-wall_141793-15040.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
title: "Ingeniero Civil",
|
||||
quote: "La estabilidad química de sus aditivos permite resultados superiores en estructuras complejas.",
|
||||
name: "Ana Martínez",
|
||||
role: "Ingeniera Civil",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/engineer-holding-blueprints-reading-notes-clipboard-while-standing-gray-background_1150-8305.jpg?_wi=2",
|
||||
},
|
||||
]}
|
||||
title="Confianza que se construye"
|
||||
description="Lo que dicen los profesionales del sector sobre FIXOL."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "t1", title: "Albañil", quote: "La calidad de Fixol Total es inigualable, facilita mucho mi trabajo.", name: "Juan Pérez", role: "Maestro Albañil", imageSrc: "http://img.b2bpic.net/free-photo/builder-man-wearing-construction-uniform-safety-helmet-with-big-smile-face-showing-thumbs-up-isolated-blue-wall_141793-15040.jpg" },
|
||||
{ id: "t2", title: "Arquitecto", quote: "Siempre recomiendo Fixol en mis obras por su desempeño técnico.", name: "Carlos Ruiz", role: "Arquitecto", imageSrc: "http://img.b2bpic.net/free-photo/engineer-holding-blueprints-reading-notes-clipboard-while-standing-gray-background_1150-8305.jpg" },
|
||||
{ id: "t3", title: "Distribuidor", quote: "Es el producto que más me piden por la confianza que genera.", name: "María Gómez", role: "Distribuidora", imageSrc: "http://img.b2bpic.net/free-photo/young-successful-architector-smiling-holding-drawings-standing-office-wall_176420-16815.jpg" },
|
||||
{ id: "t4", title: "Maestro de Obra", quote: "FIXOL es mi marca de confianza desde hace más de diez años en todo el país.", name: "Pedro López", role: "Contratista", imageSrc: "http://img.b2bpic.net/free-photo/builder-man-wearing-construction-uniform-safety-helmet-with-big-smile-face-showing-thumbs-up-isolated-blue-wall_141793-15040.jpg" },
|
||||
{ id: "t5", title: "Ingeniero Civil", quote: "La estabilidad química de sus aditivos permite resultados superiores en estructuras complejas.", name: "Ana Martínez", role: "Ingeniera Civil", imageSrc: "http://img.b2bpic.net/free-photo/engineer-holding-blueprints-reading-notes-clipboard-while-standing-gray-background_1150-8305.jpg" },
|
||||
]}
|
||||
title="Confianza que se construye"
|
||||
description="Lo que dicen los profesionales del sector sobre FIXOL."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
text="Lleva FIXOL a tu próxima obra. ¿Necesitas un asesor o encontrar un distribuidor cercano?"
|
||||
buttons={[
|
||||
{
|
||||
text: "Hablar con un asesor",
|
||||
href: "https://wa.me/521123456789",
|
||||
},
|
||||
{
|
||||
text: "Encontrar distribuidor",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
text="Lleva FIXOL a tu próxima obra. ¿Necesitas un asesor o encontrar un distribuidor cercano?"
|
||||
buttons={[
|
||||
{ text: "Hablar con un asesor", href: "https://wa.me/521123456789" },
|
||||
{ text: "Encontrar distribuidor", href: "#" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="FIXOL"
|
||||
copyrightText="© 2025 FIXOL México. Construcción Profesional."
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Facebook,
|
||||
href: "#",
|
||||
ariaLabel: "Facebook",
|
||||
},
|
||||
{
|
||||
icon: Instagram,
|
||||
href: "#",
|
||||
ariaLabel: "Instagram",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="FIXOL"
|
||||
copyrightText="© 2025 FIXOL México. Construcción Profesional."
|
||||
socialLinks={[
|
||||
{ icon: Facebook, href: "#", ariaLabel: "Facebook" },
|
||||
{ icon: Instagram, href: "#", ariaLabel: "Instagram" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user