397 lines
13 KiB
TypeScript
397 lines
13 KiB
TypeScript
import { Avatar, Button, Card, Chip, ScrollShadow } from "@heroui/react"
|
|
import { createFileRoute } from "@tanstack/react-router"
|
|
import {
|
|
ChevronRight,
|
|
Cpu,
|
|
Database,
|
|
Euro,
|
|
Globe,
|
|
Layers,
|
|
LogIn,
|
|
Map as MapIcon,
|
|
Radio,
|
|
Rocket,
|
|
Shield,
|
|
Zap
|
|
} from "lucide-react"
|
|
import {
|
|
Map as MapComponent,
|
|
MapMarker,
|
|
MarkerContent,
|
|
MarkerPopup,
|
|
MarkerTooltip
|
|
} from "@/components/maps/map"
|
|
|
|
export const Route = createFileRoute("/")({ component: App })
|
|
|
|
const WebMockHeader = () => {
|
|
const locations = [
|
|
{
|
|
id: 5,
|
|
name: "EEUU",
|
|
lat: 40.76,
|
|
lng: -73.98
|
|
},
|
|
|
|
{
|
|
id: 1,
|
|
name: "Madrid",
|
|
lat: 40.4168,
|
|
lng: -3.7038
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "Barcelona",
|
|
lat: 41.3874,
|
|
lng: 2.1686
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "Sevilla",
|
|
lat: 37.3891,
|
|
lng: -5.9845
|
|
},
|
|
{
|
|
id: 4,
|
|
name: "Valencia",
|
|
lat: 39.4699,
|
|
lng: -0.3763
|
|
}
|
|
]
|
|
|
|
return (
|
|
<div className="space-y-6 animate-in fade-in zoom-in-95 duration-500">
|
|
<div className="flex justify-between items-center">
|
|
<div>
|
|
<h3 className="text-xl font-black text-white tracking-tight">
|
|
Panel de Control
|
|
</h3>
|
|
<p className="text-[10px] text-cyan-500 font-mono hidden">
|
|
ID: 550e8400-e29b-41d4-a716-446655440000
|
|
</p>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Chip size="sm" className="px-2" variant="soft">
|
|
<div className="w-2 h-2 bg-emerald-500 rounded-full animate-pulse mr-2" />{" "}
|
|
ACTIVO
|
|
</Chip>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
|
{[
|
|
{ label: "OFERTAS", val: "+300", unit: "", color: "text-white" },
|
|
{
|
|
label: "PILOTOS",
|
|
val: "+400",
|
|
unit: "",
|
|
color: "text-gray-200/60"
|
|
},
|
|
{
|
|
label: "TRAYECTOS",
|
|
val: "+400",
|
|
unit: "",
|
|
color: "text-white"
|
|
},
|
|
{
|
|
label: "PUESTOS",
|
|
val: "+300",
|
|
unit: "",
|
|
color: "text-gray-200/60"
|
|
}
|
|
].map((s, i) => (
|
|
<div key={i} className="glass p-4 rounded-2xl">
|
|
<p className="text-[9px] text-slate-500 font-bold mb-1 tracking-widest">
|
|
{s.label}
|
|
</p>
|
|
<p className={`text-xl font-black ${s.color}`}>
|
|
{s.val}
|
|
<span className="text-xs ml-1 opacity-50">{s.unit}</span>
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="relative aspect-video rounded-3xl overflow-hidden group">
|
|
<div className="absolute inset-0 bg-transparent opacity-60">
|
|
<MapComponent
|
|
zoom={1}
|
|
className="min-w-xl w-full"
|
|
center={[2.3522, 48.8566]}
|
|
>
|
|
{(locations || [])?.map((location) => (
|
|
<MapMarker
|
|
key={location.id}
|
|
longitude={location.lng}
|
|
latitude={location.lat}
|
|
>
|
|
{/* Prueba para ssl */}
|
|
<MarkerContent>
|
|
{/* <Drone size={24} color="green" className="text-green-200" /> */}
|
|
<div className="w-3 h-3 bg-accent animate-pulse rounded-full" />
|
|
</MarkerContent>
|
|
<MarkerTooltip>{location.name}</MarkerTooltip>
|
|
<MarkerPopup>
|
|
<div className="space-y-1">
|
|
<p className="font-medium text-foreground">
|
|
{location.name}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
{location.lat.toFixed(4)}, {location.lng.toFixed(4)}
|
|
</p>
|
|
</div>
|
|
</MarkerPopup>
|
|
</MapMarker>
|
|
))}
|
|
</MapComponent>
|
|
</div>
|
|
<div className="absolute bottom-6 left-6 z-10">
|
|
<Button>
|
|
<MapIcon className="size-6" />
|
|
¿Quieres ser parte de mapa?
|
|
</Button>
|
|
</div>
|
|
<div className="absolute inset-0 bg-linear-to-t from-brand-dark via-transparent to-transparent"></div>
|
|
<div className="absolute top-6 left-6 flex flex-col gap-2">
|
|
<div className="glass p-3 rounded-xl"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function App() {
|
|
const navigate = Route.useNavigate()
|
|
return (
|
|
<div className="min-h-screen bg-brand-dark text-slate-400 ">
|
|
{/* NAVBAR */}
|
|
<nav className="flex items-center justify-between px-10 py-6 border-b border-white/5 backdrop-blur-xl sticky top-0 z-50">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-2 h-2 bg-accent animate-pulse" />
|
|
<span className="font-mono text-xs tracking-[0.3em] uppercase text-muted">
|
|
<h1 className="text-lg font-light tracking-tighter">
|
|
FIND<span className="font-bold text-accent">YOUR</span>PILOT
|
|
</h1>
|
|
</span>
|
|
</div>
|
|
<div className="hidden md:flex gap-8 text-[11px] font-black uppercase tracking-[0.2em]"></div>
|
|
<Button
|
|
onPress={() => {
|
|
navigate({ to: "/access/login" })
|
|
}}
|
|
>
|
|
Acceso <LogIn />
|
|
</Button>
|
|
</nav>
|
|
|
|
{/* HERO / LANDING */}
|
|
<header className="relative pt-20 px-6 text-center lg:flex gap-4 pb-10">
|
|
<div className="lg:w-2/5">
|
|
<div className="absolute inset-0 z-0 overflow-hidden pointer-events-none">
|
|
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[600px] bg-cyan-500/10 blur-[120px] rounded-full"></div>
|
|
</div>
|
|
<div className="relative z-10 max-w-5xl mx-auto">
|
|
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[10px] font-black uppercase tracking-[0.3em] mb-8 text-accent">
|
|
<Radio size={12} className="animate-pulse" />
|
|
<span className="text-accent">v4.0.2</span>
|
|
</div>
|
|
|
|
<h1 className="text-6xl md:text-6xl font-black text-white tracking-tighter mb-8 leading-[0.9]">
|
|
ENCUENTRA A <br />
|
|
<span className="text-transparent bg-clip-text bg-linear-to-r from-accent-400 via-accent to-stone-400 px-4">
|
|
TU PILOTO
|
|
</span>
|
|
</h1>
|
|
|
|
<p className="text-lg md:text-lg text-slate-300 max-w-2xl mx-auto mb-12 font-medium">
|
|
La plataforma definitiva para la gestión de pilotos de drones.
|
|
Conecta con los mejores profesionales y lleva tus proyectos al
|
|
siguiente <span className="italic">nivel</span>.
|
|
</p>
|
|
|
|
<div className="flex flex-wrap justify-center gap-4">
|
|
<Button size="lg">
|
|
Iniciar despliegue <Rocket size={20} />
|
|
</Button>
|
|
<Button size="lg">
|
|
Más información <ChevronRight size={20} />
|
|
</Button>
|
|
</div>
|
|
<div className="relative flex overflow-hidden group mt-20">
|
|
<div className="flex animate-marquee whitespace-nowrap gap-16 items-center hover:paused py-2">
|
|
{[
|
|
{ name: "PostgreSQL", icon: <Database size={32} /> },
|
|
{ name: "React", icon: <Layers size={32} /> },
|
|
{ name: "Tailwind", icon: <Zap size={32} /> },
|
|
{ name: "TanStack", icon: <Cpu size={32} /> },
|
|
{ name: "TypeScript", icon: <Shield size={32} /> },
|
|
{ name: "Vite", icon: <Globe size={32} /> }
|
|
].map((logo, index) => (
|
|
<div
|
|
key={index}
|
|
className="flex items-center gap-4 grayscale opacity-40 hover:grayscale-0 hover:opacity-100 transition-all duration-500 cursor-pointer"
|
|
>
|
|
<div className="text-white">{logo.icon}</div>
|
|
<span className="text-xl font-black italic tracking-tighter text-white uppercase">
|
|
{logo.name}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Gradientes laterales para suavizar la entrada/salida (Fading effect) */}
|
|
<div className="pointer-events-none absolute inset-y-0 left-0 w-20 bg-linear-to-r from-transparent to-transparent z-10"></div>
|
|
<div className="pointer-events-none absolute inset-y-0 right-0 w-20 bg-linear-to-l from-transparent to-transparent z-10"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* DASHBOARD DEMO SECTION */}
|
|
<section className="w-3/5 px-6 relative items-start flex ">
|
|
<div className="max-w-5xl mx-auto w-full">
|
|
{/* Cabecera del simulador */}
|
|
<div className="flex items-center justify-between mb-4 px-4 hidden">
|
|
<div className="flex gap-2">
|
|
<div className="w-2 h-2 rounded-full bg-red-500/40" />
|
|
<div className="w-2 h-2 rounded-full bg-orange-500/40" />
|
|
<div className="w-2 h-2 rounded-full bg-emerald-500/40" />
|
|
</div>
|
|
<div className="flex items-center gap-4 text-[9px] font-mono tracking-widest text-slate-600">
|
|
<span>BUFFER: 0ms</span>
|
|
<span className="flex items-center gap-1 text-cyan-500/60">
|
|
<Database size={10} /> PG_CONNECTED
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border bg-surface border-white/10 rounded shadow-[0_0_100px_rgba(6,182,212,0.05)] overflow-hidden">
|
|
<div className="flex flex-col lg:flex-row min-h-[600px]">
|
|
<aside className="w-full lg:max-w-82 border-r border-white/5 bg-black/40 p-8 flex flex-col gap-3">
|
|
<Chip size="lg" variant="tertiary">
|
|
<h3 className="text-xl font-black text-white tracking-tight">
|
|
Ofertas
|
|
</h3>
|
|
</Chip>
|
|
<ScrollShadow className="max-h-[500px]" hideScrollBar>
|
|
<div className="flex gap-3 flex-col">
|
|
{[
|
|
{
|
|
id: "J-001",
|
|
name: "Inspección de Aerogeneradores",
|
|
price: 1200,
|
|
location: "Parque Eólico Tarifa",
|
|
description:
|
|
"Se requiere vuelo de proximidad para detección de microfisuras en palas. Obligatorio sensor térmico.",
|
|
employer: "IberEnergía S.A.",
|
|
tags: ["Térmico", "STS-01", "Alta Prioridad"],
|
|
avatar: "https://i.pravatar.cc/150?u=corp1"
|
|
},
|
|
{
|
|
id: "J-002",
|
|
name: "Ortomosaico Agrícola 50Ha",
|
|
price: 450,
|
|
location: "Valladolid, ES",
|
|
description:
|
|
"Mapeo multiespectral para análisis de estrés hídrico en viñedos. Entrega en GeoJSON.",
|
|
employer: "AgroTech Solutions",
|
|
tags: ["Multiespectral", "Mapeo"],
|
|
avatar: "https://i.pravatar.cc/150?u=corp2"
|
|
},
|
|
{
|
|
id: "J-003",
|
|
name: "Grabación FPVCinematic",
|
|
price: 800,
|
|
location: "Madrid (Circuito)",
|
|
description:
|
|
"Seguimiento de vehículos a alta velocidad para spot publicitario. Se requiere dron de 5 pulgadas.",
|
|
employer: "RedMedia",
|
|
tags: ["FPV", "ProRes"],
|
|
avatar: "https://i.pravatar.cc/150?u=corp3"
|
|
}
|
|
].map((offer) => (
|
|
<Card key={offer.id}>
|
|
<Card.Header className="flex flex-col gap-2">
|
|
<div className="flex gap-2">
|
|
<Avatar size="sm">
|
|
<Avatar.Image
|
|
alt="John Doe"
|
|
src={offer.avatar}
|
|
/>
|
|
<Avatar.Fallback>JD</Avatar.Fallback>
|
|
</Avatar>
|
|
<h1 className="text-md font-semibold text-start">
|
|
{offer.name}
|
|
</h1>
|
|
</div>
|
|
<ScrollShadow
|
|
orientation="horizontal"
|
|
className="w-[200px]"
|
|
hideScrollBar
|
|
>
|
|
<div className="flex gap-2">
|
|
{offer.tags.map((tag) => (
|
|
<Chip variant="soft" key={tag}>
|
|
{tag}
|
|
</Chip>
|
|
))}
|
|
</div>
|
|
</ScrollShadow>
|
|
</Card.Header>
|
|
<Card.Content className=" text-slate-50">
|
|
<div className="text-xs text-start">
|
|
{offer.description}
|
|
</div>
|
|
</Card.Content>
|
|
<Card.Footer className="items-center justify-between">
|
|
<Chip>
|
|
{offer.price} <Euro className="size-4" />
|
|
</Chip>
|
|
<Button size="sm" variant="secondary">
|
|
Detalles
|
|
</Button>
|
|
</Card.Footer>
|
|
</Card>
|
|
))}
|
|
<div className="flex justify-end pb-10">
|
|
<Button>Ver más</Button>
|
|
</div>
|
|
</div>
|
|
</ScrollShadow>
|
|
</aside>
|
|
|
|
{/* Main Content Area */}
|
|
<main className="flex-1 p-10 bg-linear-to-br from-transparent to-cyan-950/5">
|
|
<WebMockHeader />
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</header>
|
|
|
|
{/* FOOTER TÉCNICO */}
|
|
<footer className="border-t border-white/5 py-20 px-10">
|
|
<div className="max-w-6xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-12">
|
|
<div>
|
|
<p className="text-white font-black italic mb-4">FYP.OS</p>
|
|
<p className="text-xs leading-loose">
|
|
Gestiona tú perfil profesional, tus misiones y tus drones.
|
|
</p>
|
|
</div>
|
|
{["Schema", "Security", "Endpoints"].map((title) => (
|
|
<div key={title}>
|
|
<p className="text-[10px] font-black text-white uppercase tracking-widest mb-4">
|
|
{title}
|
|
</p>
|
|
<ul className="text-xs space-y-2 opacity-50 font-mono">
|
|
<li>{`fetch_${title.toLowerCase()}`}</li>
|
|
<li>{`push_logs_v4`}</li>
|
|
<li>{`auth_verify`}</li>
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
)
|
|
}
|