Initial commit from remix
This commit is contained in:
gpt-engineer-app[bot]
252
src/components/EcosystemSection.tsx
Normal file
252
src/components/EcosystemSection.tsx
Normal file
@@ -0,0 +1,252 @@
|
||||
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;
|
||||
Reference in New Issue
Block a user