Merge version_3 into main #3
160
src/app/page.tsx
160
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>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user