Merge version_2 into main #3
444
src/app/page.tsx
444
src/app/page.tsx
@@ -7,273 +7,211 @@ import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
|
||||
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
||||
import SplitAbout from '@/components/sections/about/SplitAbout';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||||
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
||||
import { Cog, Feather, Sparkles, Users } from "lucide-react";
|
||||
|
||||
import { Cog, Feather, Sparkles, LayoutList } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="compact"
|
||||
sizing="medium"
|
||||
background="aurora"
|
||||
cardStyle="gradient-mesh"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="bold"
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="compact"
|
||||
sizing="medium"
|
||||
background="aurora"
|
||||
cardStyle="gradient-mesh"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Portada",
|
||||
id: "home",
|
||||
},
|
||||
{
|
||||
name: "Introducción",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Máquinas",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Impacto",
|
||||
id: "metrics",
|
||||
},
|
||||
{
|
||||
name: "FAQs",
|
||||
id: "faq",
|
||||
},
|
||||
]}
|
||||
brandName="Clasificación Textil"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Portada", id: "home"},
|
||||
{
|
||||
name: "Índice", id: "indice"},
|
||||
{
|
||||
name: "Introducción", id: "introduccion"},
|
||||
{
|
||||
name: "Máquinas", id: "maquinas"},
|
||||
{
|
||||
name: "Impacto", id: "impacto"},
|
||||
{
|
||||
name: "Conclusión", id: "conclusion"},
|
||||
]}
|
||||
brandName="Clasificación Textil"
|
||||
button={{ text: "Conoce Más", href: "#conclusion" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="home" data-section="home">
|
||||
<HeroBillboardScroll
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Clasificación de Máquinas Textiles: El Proceso de Hilatura"
|
||||
description="Explorando la ingeniería detrás de la producción de hilos, desde la fibra cruda hasta el producto final, que impulsa la moda y la industria del mañana."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/close-up-satin-blue-curled-ribbon_23-2147877846.jpg"
|
||||
imageAlt="Modern textile factory with spinning machines"
|
||||
buttons={[
|
||||
{
|
||||
text: "Descubrir Máquinas",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
text: "Saber Más",
|
||||
href: "#about",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="home" data-section="home">
|
||||
<HeroBillboardScroll
|
||||
background={{
|
||||
variant: "plain"}}
|
||||
title="Clasificación de Máquinas Textiles: Hilatura Moderna"
|
||||
description="Descubre la innovación que transforma la fibra en hilo, impulsando la moda y la industria textil con eficiencia y precisión."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/close-up-satin-blue-curled-ribbon_23-2147877846.jpg?_wi=1"
|
||||
imageAlt="Modern textile factory with spinning machines"
|
||||
buttons={[
|
||||
{
|
||||
text: "Explorar Máquinas", href: "#maquinas"},
|
||||
{
|
||||
text: "Ver Impacto", href: "#impacto"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={false}
|
||||
tag="Introducción"
|
||||
title="Comprendiendo la Hilatura Moderna"
|
||||
description="La hilatura es un arte milenario transformado por la tecnología. Desde la prehistoria hasta la industria 4.0, el proceso de convertir fibras en hilos ha sido crucial para la humanidad. Esta sección detalla la evolución y la importancia contemporánea de la hilatura."
|
||||
subdescription="Un viaje por la tecnología textil que impulsa la moda y la industria del mañana, destacando la eficiencia y la innovación."
|
||||
icon={Sparkles}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139243.jpg"
|
||||
imageAlt="Historical and modern spinning machines comparison"
|
||||
mediaAnimation="reveal-blur"
|
||||
/>
|
||||
</div>
|
||||
<div id="indice" data-section="indice">
|
||||
<FeatureCardSeven
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
tag="Índice"
|
||||
title="Nuestra Guía Completa de Hilatura"
|
||||
description="Un recorrido esencial por el mundo de la producción de hilos, desde sus fundamentos hasta su impacto global."
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
title: "Portada", description: "Visión general del proceso de hilatura.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-satin-blue-curled-ribbon_23-2147877846.jpg?_wi=2", imageAlt: "Overview of the spinning process"},
|
||||
{
|
||||
id: 2,
|
||||
title: "Introducción", description: "Historia y relevancia actual de la hilatura.", imageSrc: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139243.jpg?_wi=1", imageAlt: "History and current relevance"},
|
||||
{
|
||||
id: 3,
|
||||
title: "Máquinas Clave", description: "Descripción de equipos esenciales.", imageSrc: "http://img.b2bpic.net/free-photo/photo-fabric-texture-pattern_58702-16012.jpg?_wi=1", imageAlt: "Key spinning machines"},
|
||||
{
|
||||
id: 4,
|
||||
title: "Impacto Global", description: "Influencia en la industria textil.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-businesswoman-owner-working_23-2148828333.jpg?_wi=1", imageAlt: "Global textile industry impact"},
|
||||
{
|
||||
id: 5,
|
||||
title: "Conclusión", description: "Síntesis y futuro del sector.", imageSrc: "http://img.b2bpic.net/free-photo/incense-sticks_53876-138614.jpg?_wi=1", imageAlt: "Summary and future outlook"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSeven
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
title: "Máquina Cardadora",
|
||||
description: "Separa, limpia y alinea las fibras, creando una napa uniforme lista para el siguiente paso en el proceso de hilatura.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/photo-fabric-texture-pattern_58702-16012.jpg",
|
||||
imageAlt: "Textile carding machine",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Máquina Manuar",
|
||||
description: "Estira y paraleliza las fibras, reduciendo el espesor de la napa y mejorando su uniformidad para una hilatura de mayor calidad.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-businesswoman-owner-working_23-2148828333.jpg",
|
||||
imageAlt: "Textile drawing frame",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Máquina de Mecha",
|
||||
description: "Produce una mecha fina y retorcida, preparando la fibra para el estirado final en la hiladora y asegurando la consistencia.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/incense-sticks_53876-138614.jpg",
|
||||
imageAlt: "Textile roving frame",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Hiladora de Anillo",
|
||||
description: "Uno de los métodos más tradicionales, proporciona resistencia y uniformidad al hilo mediante estirado y torsión controlados.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/glassblower-polishing-grinding-glassware_107420-74254.jpg",
|
||||
imageAlt: "Textile ring spinning machine",
|
||||
},
|
||||
]}
|
||||
title="Máquinas Clave en la Producción de Hilo"
|
||||
description="Un vistazo a la maquinaria esencial que transforma las fibras en hilos de alta calidad para diversas aplicaciones textiles, garantizando eficiencia y precisión."
|
||||
tag="Proceso de Hilatura"
|
||||
/>
|
||||
</div>
|
||||
<div id="introduccion" data-section="introduccion">
|
||||
<SplitAbout
|
||||
useInvertedBackground={false}
|
||||
tag="Introducción"
|
||||
title="La Hilatura: Un Arte Tecnológico"
|
||||
description="La transformación de fibras en hilo, un proceso milenario que hoy define la vanguardia textil. Eficiencia, precisión e innovación son sus pilares."
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Evolución", description: "Desde sus orígenes hasta la era digital, la hilatura es clave para la moda y la industria del futuro.", icon: Sparkles
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139243.jpg?_wi=2"
|
||||
imageAlt="Historical and modern spinning machines comparison"
|
||||
mediaAnimation="blur-reveal"
|
||||
textboxLayout="default"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "metric1",
|
||||
icon: Cog,
|
||||
title: "Producción Global",
|
||||
value: "+30% en 10 Años",
|
||||
},
|
||||
{
|
||||
id: "metric2",
|
||||
icon: Feather,
|
||||
title: "Eficiencia Energética",
|
||||
value: "-20% Consumo",
|
||||
},
|
||||
{
|
||||
id: "metric3",
|
||||
icon: Users,
|
||||
title: "Empleo",
|
||||
value: "> 10M de Trabajadores",
|
||||
},
|
||||
]}
|
||||
title="La Hilatura: Motor de la Industria Textil"
|
||||
description="El constante avance en las máquinas de hilatura no solo optimiza la producción, sino que también impulsa la innovación y la sostenibilidad en todo el sector a nivel global."
|
||||
tag="Impacto Industrial"
|
||||
/>
|
||||
</div>
|
||||
<div id="maquinas" data-section="maquinas">
|
||||
<FeatureCardSeven
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
title: "Máquina Cardadora", description: "Separa, limpia y alinea fibras. Napa uniforme.", imageSrc: "http://img.b2bpic.net/free-photo/photo-fabric-texture-pattern_58702-16012.jpg?_wi=2", imageAlt: "Textile carding machine"},
|
||||
{
|
||||
id: 2,
|
||||
title: "Máquina Manuar", description: "Estira y paraleliza fibras. Reduce espesor.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-businesswoman-owner-working_23-2148828333.jpg?_wi=2", imageAlt: "Textile drawing frame"},
|
||||
{
|
||||
id: 3,
|
||||
title: "Máquina de Mecha", description: "Produce mecha fina y retorcida. Prepara fibra.", imageSrc: "http://img.b2bpic.net/free-photo/incense-sticks_53876-138614.jpg?_wi=2", imageAlt: "Textile roving frame"},
|
||||
{
|
||||
id: 4,
|
||||
title: "Hiladora de Anillo", description: "Estira y tuerce para hilo resistente y uniforme.", imageSrc: "http://img.b2bpic.net/free-photo/glassblower-polishing-grinding-glassware_107420-74254.jpg", imageAlt: "Textile ring spinning machine"},
|
||||
]}
|
||||
title="Equipos Esenciales del Proceso"
|
||||
description="Detalle de la maquinaria que convierte la fibra en hilo de alta calidad, garantizando un rendimiento óptimo."
|
||||
tag="Máquinas para Hilatura"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="socialProof" data-section="socialProof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Textil Futura",
|
||||
"Hilos de Calidad SA",
|
||||
"Innovación Fibra",
|
||||
"Maquinaria Textil Avanzada",
|
||||
"Tejidos Sostenibles",
|
||||
"Global Yarn Solutions",
|
||||
"Manufacturas Modernas",
|
||||
]}
|
||||
logos={[
|
||||
"http://img.b2bpic.net/free-vector/logo-flat-design-template_52683-77172.jpg",
|
||||
"http://img.b2bpic.net/free-vector/abstract-lineal-logo-pack_23-2148445979.jpg",
|
||||
"http://img.b2bpic.net/free-vector/gradient-electronics-logo-collection_52683-65200.jpg",
|
||||
"http://img.b2bpic.net/free-vector/flat-seamstress-labels-collection_23-2149373307.jpg",
|
||||
"http://img.b2bpic.net/free-vector/flat-design-compostable-labels-stamps_23-2149414583.jpg",
|
||||
"http://img.b2bpic.net/free-vector/mother-earth-day-vintage-banners-with-red-details_23-2147606618.jpg",
|
||||
"http://img.b2bpic.net/free-vector/flat-design-labor-day-label-collection-theme_23-2148606320.jpg",
|
||||
]}
|
||||
title="Líderes en Innovación Textil"
|
||||
description="Nuestra metodología de clasificación es utilizada y reconocida por instituciones educativas y empresas destacadas del sector, consolidando su valor."
|
||||
tag="Reconocimiento"
|
||||
showCard={true}
|
||||
/>
|
||||
</div>
|
||||
<div id="impacto" data-section="impacto">
|
||||
<MetricCardThree
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "metric1", icon: Cog,
|
||||
title: "Producción", value: "+30% Global"},
|
||||
{
|
||||
id: "metric2", icon: Feather,
|
||||
title: "Eficiencia", value: "-20% Energía"},
|
||||
{
|
||||
id: "metric3", icon: LayoutList,
|
||||
title: "Empleo", value: "> 10M Crecimiento"},
|
||||
]}
|
||||
title="Motor de la Innovación Textil"
|
||||
description="La hilatura moderna no solo optimiza la producción, sino que impulsa la sostenibilidad y el avance tecnológico global."
|
||||
tag="Impacto en la Industria"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "faq1",
|
||||
title: "¿Qué es el proceso de hilatura?",
|
||||
content: "Es la secuencia de operaciones que transforma las fibras textiles, ya sean naturales o sintéticas, en un hilo continuo y uniforme, apto para la fabricación de tejidos y otros productos.",
|
||||
},
|
||||
{
|
||||
id: "faq2",
|
||||
title: "¿Por qué es importante la clasificación?",
|
||||
content: "La clasificación detallada permite entender la función específica de cada máquina, optimizar los procesos de producción, facilitar el mantenimiento y la innovación tecnológica, y formar a nuevos profesionales de manera eficaz.",
|
||||
},
|
||||
{
|
||||
id: "faq3",
|
||||
title: "¿Cuál es la máquina más crítica en la hilatura?",
|
||||
content: "Si bien todas son importantes, la cardadora es fundamental para iniciar el proceso de preparación de fibras, y la hiladora de anillo o rotor es crítica para la formación final de un hilo de alta calidad.",
|
||||
},
|
||||
{
|
||||
id: "faq4",
|
||||
title: "¿Cómo afecta la tecnología 4.0 a la hilatura?",
|
||||
content: "La Industria 4.0 integra automatización, internet de las cosas (IoT) y análisis de datos en tiempo real para mejorar la eficiencia, reducir defectos, personalizar la producción de hilos y optimizar la cadena de suministro.",
|
||||
},
|
||||
]}
|
||||
sideTitle="¿Tienes Preguntas?"
|
||||
sideDescription="Encuentra respuestas claras y concisas a las consultas más comunes sobre la clasificación y el funcionamiento de las máquinas de hilatura textil."
|
||||
faqsAnimation="reveal-blur"
|
||||
textPosition="left"
|
||||
/>
|
||||
</div>
|
||||
<div id="conclusion" data-section="conclusion">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "concl1", title: "Innovación Sostenible", content: "La integración de procesos ecológicos y materiales reciclados define la nueva era de la hilatura, buscando un impacto ambiental mínimo."},
|
||||
{
|
||||
id: "concl2", title: "Automatización Avanzada", content: "La robótica y la IA optimizan cada etapa, desde la selección de fibra hasta la producción de hilos especializados, aumentando la eficiencia y calidad."},
|
||||
{
|
||||
id: "concl3", title: "Mercados Globales", content: "La demanda de hilos técnicos y de alto rendimiento impulsa la inversión en I+D, abriendo nuevas fronteras para la industria textil a nivel mundial."},
|
||||
]}
|
||||
sideTitle="El Futuro de la Hilatura"
|
||||
sideDescription="La industria textil avanza, y con ella, la hilatura. Adaptarse a las nuevas tecnologías y enfocarse en la sostenibilidad es clave para el éxito."
|
||||
faqsAnimation="blur-reveal"
|
||||
textPosition="left"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Explorar",
|
||||
items: [
|
||||
{
|
||||
label: "Portada",
|
||||
href: "#home",
|
||||
},
|
||||
{
|
||||
label: "Introducción",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Máquinas",
|
||||
href: "#features",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Recursos",
|
||||
items: [
|
||||
{
|
||||
label: "Impacto",
|
||||
href: "#metrics",
|
||||
},
|
||||
{
|
||||
label: "FAQs",
|
||||
href: "#faq",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contacto",
|
||||
items: [
|
||||
{
|
||||
label: "Email",
|
||||
href: "mailto:info@textil.com",
|
||||
},
|
||||
{
|
||||
label: "LinkedIn",
|
||||
href: "https://linkedin.com/company/textil-clasificacion",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Clasificación Textil"
|
||||
copyrightText="© 2025 | Clasificación Textil. Todos los derechos reservados."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Explorar", items: [
|
||||
{
|
||||
label: "Portada", href: "#home"},
|
||||
{
|
||||
label: "Índice", href: "#indice"},
|
||||
{
|
||||
label: "Introducción", href: "#introduccion"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Recursos", items: [
|
||||
{
|
||||
label: "Máquinas", href: "#maquinas"},
|
||||
{
|
||||
label: "Impacto", href: "#impacto"},
|
||||
{
|
||||
label: "Conclusión", href: "#conclusion"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contacto", items: [
|
||||
{
|
||||
label: "Email", href: "mailto:info@textil.com"},
|
||||
{
|
||||
label: "LinkedIn", href: "https://linkedin.com/company/textil-clasificacion"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Clasificación Textil"
|
||||
copyrightText="© 2025 | Clasificación Textil. Todos los derechos reservados."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #ffffff;
|
||||
--card: #f9f9f9;
|
||||
--foreground: #120a00e6;
|
||||
--primary-cta: #FF7B05;
|
||||
--primary-cta-text: #ffffff;
|
||||
--secondary-cta: #f9f9f9;
|
||||
--secondary-cta-text: #120a00e6;
|
||||
--accent: #e2e2e2;
|
||||
--background-accent: #FF7B05;
|
||||
--background: #fcf6ec;
|
||||
--card: #f3ede2;
|
||||
--foreground: #2e2521;
|
||||
--primary-cta: #2e2521;
|
||||
--primary-cta-text: #fcf6ec;
|
||||
--secondary-cta: #ffffff;
|
||||
--secondary-cta-text: #2e2521;
|
||||
--accent: #b2a28b;
|
||||
--background-accent: #b2a28b;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user