From 5d83f3362cbe6367b8e8a32c3d0524772572f3a1 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sat, 7 Mar 2026 17:38:23 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 160 +++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 155 insertions(+), 5 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 73b418a..32db22e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -11,7 +11,7 @@ import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCar
 import ContactText from '@/components/sections/contact/ContactText';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
 
-import { BarChart3, HelpCircle, PieChart, Calendar, Users, Smartphone, Table, TrendingUp, Lightbulb, Activity, Smile } from 'lucide-react';
+import { BarChart3, HelpCircle, PieChart, Calendar, Users, Smartphone, Table, TrendingUp, Lightbulb, Activity, Smile, Car, AlertCircle, Moon, Wifi, Clock } from 'lucide-react';
 
 export default function SurveyPage() {
   return (
@@ -44,8 +44,8 @@ export default function SurveyPage() {
 
       <div id="hero" data-section="hero">
         <HeroSplitKpi
-          title="Presentación de Resultados de Encuesta"
-          description="Esta es una presentación interactiva y animada de los resultados de nuestra encuesta descriptiva de 10 participantes. Explora datos detallados sobre edad, género, hábitos de uso de tecnología y preferencias personales. Cada sección contiene gráficos dinámicos, tablas de frecuencia y análisis profundo de los patrones observados. Depuración: Esta presentación utiliza componentes Next.js optimizados con animaciones GSAP, gestión de estado con React Context y estilos Tailwind CSS personalizados. Los datos se visualizan mediante tarjetas de producto, métricas clave y testimonios de patrones encontrados."
+          title="Resultados Encuesta"
+          description="Una presentación interactiva y animada de los resultados de nuestra encuesta de 10 participantes. Explora datos sobre edad, género, hábitos y preferencias con gráficos dinámicos."
           tag="Estadística Descriptiva"
           tagIcon={BarChart3}
           tagAnimation="slide-up"
@@ -103,7 +103,7 @@ export default function SurveyPage() {
       <div id="results" data-section="results">
         <FeatureCardSixteen
           title="Análisis de Resultados"
-          description="Comparación visual de respuestas clave de la encuesta con datos de frecuencia"
+          description="Comparación visual de respuestas clave de la encuesta con datos frecuencia"
           tag="Gráficos Interactivos"
           tagIcon={PieChart}
           tagAnimation="slide-up"
@@ -164,6 +164,156 @@ export default function SurveyPage() {
         />
       </div>
 
+      <div id="transportation" data-section="transportation">
+        <MetricCardTen
+          title="Transporte Utilizado"
+          description="Análisis de frecuencia de medios de transporte utilizados por los participantes"
+          tag="Movilidad"
+          tagIcon={Car}
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          animationType="slide-up"
+          metrics={[
+            {
+              id: "1",              title: "Automóvil",              subtitle: "Participantes que utilizan coche",              category: "Transporte Privado",              value: "5 personas",              buttons: [
+                { text: "Detalles", href: "#" }
+              ]
+            },
+            {
+              id: "2",              title: "Transporte Público",              subtitle: "Usuarios de bus, metro o tren",              category: "Transporte Masivo",              value: "3 personas",              buttons: [
+                { text: "Ver más", href: "#" }
+              ]
+            },
+            {
+              id: "3",              title: "Bicicleta",              subtitle: "Participantes que usan bicicleta",              category: "Movilidad Sostenible",              value: "2 personas",              buttons: [
+                { text: "Detalles", href: "#" }
+              ]
+            }
+          ]}
+        />
+      </div>
+
+      <div id="stress" data-section="stress">
+        <MetricCardTen
+          title="Niveles de Estrés"
+          description="Distribución de niveles de estrés reportados por los participantes"
+          tag="Bienestar"
+          tagIcon={AlertCircle}
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          animationType="slide-up"
+          metrics={[
+            {
+              id: "1",              title: "Estrés Bajo",              subtitle: "Participantes con estrés bajo",              category: "Bienestar",              value: "4 personas",              buttons: [
+                { text: "Detalles", href: "#" }
+              ]
+            },
+            {
+              id: "2",              title: "Estrés Moderado",              subtitle: "Participantes con estrés moderado",              category: "Bienestar",              value: "4 personas",              buttons: [
+                { text: "Ver más", href: "#" }
+              ]
+            },
+            {
+              id: "3",              title: "Estrés Alto",              subtitle: "Participantes con estrés alto",              category: "Bienestar",              value: "2 personas",              buttons: [
+                { text: "Detalles", href: "#" }
+              ]
+            }
+          ]}
+        />
+      </div>
+
+      <div id="sleep" data-section="sleep">
+        <MetricCardTen
+          title="Horas de Sueño"
+          description="Análisis de patrones de sueño diario reportados"
+          tag="Salud"
+          tagIcon={Moon}
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          animationType="slide-up"
+          metrics={[
+            {
+              id: "1",              title: "Menos de 6 horas",              subtitle: "Sueño insuficiente",              category: "Descanso",              value: "2 personas",              buttons: [
+                { text: "Detalles", href: "#" }
+              ]
+            },
+            {
+              id: "2",              title: "6-8 horas",              subtitle: "Sueño óptimo",              category: "Descanso",              value: "6 personas",              buttons: [
+                { text: "Ver más", href: "#" }
+              ]
+            },
+            {
+              id: "3",              title: "Más de 8 horas",              subtitle: "Sueño prolongado",              category: "Descanso",              value: "2 personas",              buttons: [
+                { text: "Detalles", href: "#" }
+              ]
+            }
+          ]}
+        />
+      </div>
+
+      <div id="internet" data-section="internet">
+        <MetricCardTen
+          title="Uso de Internet"
+          description="Frecuencia y duración del uso de internet entre participantes"
+          tag="Conectividad"
+          tagIcon={Wifi}
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          animationType="slide-up"
+          metrics={[
+            {
+              id: "1",              title: "Uso Ligero",              subtitle: "Menos de 2 horas diarias",              category: "Consumo",              value: "2 personas",              buttons: [
+                { text: "Detalles", href: "#" }
+              ]
+            },
+            {
+              id: "2",              title: "Uso Moderado",              subtitle: "2-5 horas diarias",              category: "Consumo",              value: "4 personas",              buttons: [
+                { text: "Ver más", href: "#" }
+              ]
+            },
+            {
+              id: "3",              title: "Uso Intenso",              subtitle: "Más de 5 horas diarias",              category: "Consumo",              value: "4 personas",              buttons: [
+                { text: "Detalles", href: "#" }
+              ]
+            }
+          ]}
+        />
+      </div>
+
+      <div id="freetime" data-section="freetime">
+        <MetricCardTen
+          title="Tiempo Libre"
+          description="Distribución del tiempo libre disponible por semana"
+          tag="Ocio"
+          tagIcon={Clock}
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          animationType="slide-up"
+          metrics={[
+            {
+              id: "1",              title: "Pocas Horas",              subtitle: "Menos de 5 horas por semana",              category: "Disponibilidad",              value: "3 personas",              buttons: [
+                { text: "Detalles", href: "#" }
+              ]
+            },
+            {
+              id: "2",              title: "Horas Moderadas",              subtitle: "5-15 horas por semana",              category: "Disponibilidad",              value: "4 personas",              buttons: [
+                { text: "Ver más", href: "#" }
+              ]
+            },
+            {
+              id: "3",              title: "Muchas Horas",              subtitle: "Más de 15 horas por semana",              category: "Disponibilidad",              value: "3 personas",              buttons: [
+                { text: "Detalles", href: "#" }
+              ]
+            }
+          ]}
+        />
+      </div>
+
       <div id="metrics" data-section="metrics">
         <MetricCardTen
           title="Métricas Clave"
@@ -267,4 +417,4 @@ export default function SurveyPage() {
       </div>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
-- 
2.49.1