252 lines
9.8 KiB
TypeScript
252 lines
9.8 KiB
TypeScript
import { Card } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import {
|
|
ArrowRight,
|
|
Smartphone,
|
|
Shield,
|
|
Car,
|
|
MapPin,
|
|
Utensils,
|
|
Building,
|
|
Users,
|
|
TrendingUp,
|
|
Zap
|
|
} from "lucide-react";
|
|
|
|
const EcosystemSection = () => {
|
|
const applications = [
|
|
{
|
|
id: "tourist",
|
|
title: "App Turistas",
|
|
description: "Explora, reserva y disfruta experiencias únicas con IA y realidad aumentada",
|
|
icon: "🏖️",
|
|
iconComponent: <Smartphone className="w-6 h-6" />,
|
|
features: ["Mapas con IA", "Realidad Aumentada", "Reservas integradas", "Guías virtuales"],
|
|
userType: "Viajeros",
|
|
color: "primary",
|
|
status: "live",
|
|
users: "15K+"
|
|
},
|
|
{
|
|
id: "politur",
|
|
title: "POLITUR",
|
|
description: "Sistema de seguridad turística con geolocalización y respuesta rápida",
|
|
icon: "👮♂️",
|
|
iconComponent: <Shield className="w-6 h-6" />,
|
|
features: ["Alertas en tiempo real", "Geolocalización", "Gestión de incidentes", "Comunicación directa"],
|
|
userType: "Policía Turística",
|
|
color: "destructive",
|
|
status: "live",
|
|
users: "500+"
|
|
},
|
|
{
|
|
id: "taxi",
|
|
title: "App Taxis",
|
|
description: "Plataforma de transporte seguro con tarifas dinámicas y rutas optimizadas",
|
|
icon: "🚕",
|
|
iconComponent: <Car className="w-6 h-6" />,
|
|
features: ["Rutas con IA", "Tarifas dinámicas", "Pagos integrados", "Calificaciones bidireccionales"],
|
|
userType: "Conductores",
|
|
color: "warning",
|
|
status: "live",
|
|
users: "2K+"
|
|
},
|
|
{
|
|
id: "guides",
|
|
title: "Guías Turísticos",
|
|
description: "Conecta con guías certificados para experiencias auténticas y personalizadas",
|
|
icon: "🗺️",
|
|
iconComponent: <MapPin className="w-6 h-6" />,
|
|
features: ["Itinerarios personalizados", "Audio-guías", "Contenido multimedia", "Gestión de reservas"],
|
|
userType: "Guías Profesionales",
|
|
color: "success",
|
|
status: "live",
|
|
users: "800+"
|
|
},
|
|
{
|
|
id: "restaurants",
|
|
title: "Restaurantes POS",
|
|
description: "Sistema completo de punto de venta con menús digitales e inventario",
|
|
icon: "🍽️",
|
|
iconComponent: <Utensils className="w-6 h-6" />,
|
|
features: ["POS completo", "Menús digitales", "Gestión de inventario", "Reservas online"],
|
|
userType: "Restaurantes",
|
|
color: "secondary",
|
|
status: "beta",
|
|
users: "150+"
|
|
},
|
|
{
|
|
id: "hotels",
|
|
title: "Gestión Hotelera",
|
|
description: "Plataforma integral para hoteles con check-in digital y channel manager",
|
|
icon: "🏨",
|
|
iconComponent: <Building className="w-6 h-6" />,
|
|
features: ["Check-in digital", "Channel manager", "Gestión de habitaciones", "CRM hotelero"],
|
|
userType: "Hoteles",
|
|
color: "primary",
|
|
status: "beta",
|
|
users: "75+"
|
|
}
|
|
];
|
|
|
|
const getStatusBadge = (status: string) => {
|
|
switch (status) {
|
|
case "live":
|
|
return <Badge className="bg-success text-success-foreground">En Vivo</Badge>;
|
|
case "beta":
|
|
return <Badge className="bg-warning text-warning-foreground">Beta</Badge>;
|
|
default:
|
|
return <Badge>Próximamente</Badge>;
|
|
}
|
|
};
|
|
|
|
const getColorClasses = (color: string) => {
|
|
switch (color) {
|
|
case "primary":
|
|
return "border-primary/20 hover:border-primary/40 bg-primary/5";
|
|
case "secondary":
|
|
return "border-secondary/20 hover:border-secondary/40 bg-secondary/5";
|
|
case "success":
|
|
return "border-success/20 hover:border-success/40 bg-success/5";
|
|
case "warning":
|
|
return "border-warning/20 hover:border-warning/40 bg-warning/5";
|
|
case "destructive":
|
|
return "border-destructive/20 hover:border-destructive/40 bg-destructive/5";
|
|
default:
|
|
return "border-border hover:border-border/60";
|
|
}
|
|
};
|
|
|
|
return (
|
|
<section style={{ backgroundColor: '#f8f4f3' }} className="py-20">{/* Karibeo original background */}
|
|
<div className="max-w-7xl mx-auto px-4">
|
|
{/* Section Header */}
|
|
<div className="text-center mb-16">
|
|
<div className="inline-block px-4 py-2 bg-primary/10 text-primary rounded-full text-sm font-medium mb-4">
|
|
Ecosistema Completo
|
|
</div>
|
|
<h2 className="text-4xl md:text-5xl font-bold mb-6">
|
|
Aplicaciones Integradas{" "}
|
|
<span className="text-gradient">Para Todos</span>
|
|
</h2>
|
|
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
|
|
Una plataforma única que conecta turistas, servicios y experiencias.
|
|
Descubre cómo cada aplicación trabaja en perfecta armonía.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Applications Grid */}
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
|
|
{applications.map((app, index) => (
|
|
<Card
|
|
key={app.id}
|
|
className={`group relative overflow-hidden border-2 transition-all duration-300 hover:-translate-y-2 hover:shadow-strong ${getColorClasses(app.color)}`}
|
|
>
|
|
<div className="p-6">
|
|
{/* Header */}
|
|
<div className="flex items-start justify-between mb-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="text-4xl">{app.icon}</div>
|
|
<div>
|
|
<h3 className="text-xl font-bold">{app.title}</h3>
|
|
<p className="text-sm text-muted-foreground">{app.userType}</p>
|
|
</div>
|
|
</div>
|
|
{getStatusBadge(app.status)}
|
|
</div>
|
|
|
|
{/* Description */}
|
|
<p className="text-muted-foreground mb-6 leading-relaxed">
|
|
{app.description}
|
|
</p>
|
|
|
|
{/* Features List */}
|
|
<div className="space-y-2 mb-6">
|
|
{app.features.map((feature, idx) => (
|
|
<div key={idx} className="flex items-center gap-2 text-sm">
|
|
<Zap className="w-3 h-3 text-primary" />
|
|
<span>{feature}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Stats */}
|
|
<div className="flex items-center justify-between mb-6 p-3 bg-card rounded-lg border">
|
|
<div className="flex items-center gap-2">
|
|
<Users className="w-4 h-4 text-muted-foreground" />
|
|
<span className="text-sm text-muted-foreground">Usuarios</span>
|
|
</div>
|
|
<div className="text-lg font-bold text-primary">{app.users}</div>
|
|
</div>
|
|
|
|
{/* CTA */}
|
|
<Button className="w-full group-hover:bg-primary-dark transition-colors">
|
|
Explorar App
|
|
<ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Hover Effect Decoration */}
|
|
<div className="absolute top-0 right-0 w-20 h-20 bg-primary/10 rounded-full -translate-y-10 translate-x-10 group-hover:translate-y-0 group-hover:translate-x-0 transition-transform duration-500"></div>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
|
|
{/* Integration Benefits */}
|
|
<div className="bg-card rounded-2xl p-8 md:p-12">
|
|
<div className="text-center mb-12">
|
|
<h3 className="text-3xl font-bold mb-4">
|
|
La Potencia de la{" "}
|
|
<span className="text-secondary-gradient">Integración</span>
|
|
</h3>
|
|
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
|
|
Todas nuestras aplicaciones trabajan juntas para crear una experiencia turística sin igual.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-3 gap-8">
|
|
<div className="text-center">
|
|
<div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<TrendingUp className="w-8 h-8 text-primary" />
|
|
</div>
|
|
<h4 className="text-xl font-semibold mb-3">Datos Unificados</h4>
|
|
<p className="text-muted-foreground">
|
|
Toda la información de tu viaje en un solo lugar. Reservas, pagos y experiencias sincronizados.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="text-center">
|
|
<div className="w-16 h-16 bg-secondary/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<Shield className="w-8 h-8 text-secondary" />
|
|
</div>
|
|
<h4 className="text-xl font-semibold mb-3">Seguridad Total</h4>
|
|
<p className="text-muted-foreground">
|
|
POLITUR integrado en tiempo real. Tu seguridad es nuestra prioridad en cada paso del viaje.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="text-center">
|
|
<div className="w-16 h-16 bg-success/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<Zap className="w-8 h-8 text-success" />
|
|
</div>
|
|
<h4 className="text-xl font-semibold mb-3">Experiencia Fluida</h4>
|
|
<p className="text-muted-foreground">
|
|
Sin fricciones entre servicios. Una experiencia continua desde la llegada hasta la partida.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="text-center mt-12">
|
|
<Button size="lg" className="btn-hero text-lg px-8 py-4">
|
|
Comenzar con el Ecosistema Completo
|
|
<ArrowRight className="w-5 h-5 ml-3" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default EcosystemSection; |