import React, { useMemo, useState } from «react»;
import { motion } from «framer-motion»;
import {
CalendarClock,
Recycle,
Car,
ClipboardCheck,
MapPin,
Phone,
Mail,
Clock,
BadgeCheck,
ShieldCheck,
Sparkles,
BookOpen,
CreditCard,
MessageCircle,
Search,
ArrowRight,
} from «lucide-react»;
import { Button } from «@/components/ui/button»;
import { Card, CardContent, CardHeader, CardTitle } from «@/components/ui/card»;
import { Badge } from «@/components/ui/badge»;
import { Input } from «@/components/ui/input»;
import { Separator } from «@/components/ui/separator»;
// Autoescuela RF — landing completa (single-page)
// Personaliza: teléfono, email, dirección, horarios y precios.
const BRAND = {
name: «Autoescuela RF»,
tagline: «Matricúlate y empieza con las clases prácticas»,
sub: «Clases adaptadas a tu horario · Clases de reciclaje»,
phone: «+34 600 000 000»,
email: «info@autoescuelarf.es»,
address: «Marratxí (Mallorca)»,
hours: «L–V 10:00–13:30 · 16:30–20:00»,
};
const fadeUp = {
hidden: { opacity: 0, y: 18 },
show: { opacity: 1, y: 0, transition: { duration: 0.5 } },
};
function Container({ children }: { children: React.ReactNode }) {
return
{children};
}
function Pill({ icon: Icon, text }: { icon: any; text: string }) {
return (
{text}
);
}
function SectionTitle({ eyebrow, title, desc }: { eyebrow?: string; title: string; desc?: string }) {
return (
{eyebrow ? ( {eyebrow}
) : null}
{desc ?
{desc} : null}
);
}
function Nav() {
const links = [
{ label: «Servicios», href: «#servicios» },
{ label: «Método», href: «#metodo» },
{ label: «Precios», href: «#precios» },
{ label: «FAQ», href: «#faq» },
{ label: «Contacto», href: «#contacto» },
];
return (
RF
{BRAND.name}Marratxí · Mallorca
<div className="hidden items-center gap-6 md:flex">
{links.map((l) => (
<a key={l.href} href={l.href} className="text-sm opacity-80 hover:opacity-100">
{l.label}
</a>
))}
</div>
<div className="flex items-center gap-2">
<Button asChild variant="secondary" className="hidden sm:inline-flex">
<a href={`tel:${BRAND.phone.replace(/\s/g, "")}`}>
<Phone className="mr-2 h-4 w-4" /> Llamar
</a>
</Button>
<Button asChild>
<a href="#contacto">
Reservar <ArrowRight className="ml-2 h-4 w-4" />
</a>
</Button>
</div>
</div>
</Container>
</div>);
}
function Hero() {
return (
<Container>
<div className="grid gap-10 py-12 sm:py-16 lg:grid-cols-2 lg:items-center">
<motion.div initial="hidden" whileInView="show" viewport={{ once: true, margin: "-80px" }} variants={fadeUp} className="space-y-6">
<div className="flex flex-wrap gap-2">
<Badge variant="secondary" className="rounded-full">Permiso B</Badge>
<Badge variant="secondary" className="rounded-full">Clases adaptadas</Badge>
<Badge variant="secondary" className="rounded-full">Reciclaje</Badge>
</div>
<h1 className="text-balance text-3xl font-semibold leading-tight sm:text-5xl">
{BRAND.tagline}
</h1>
<p className="max-w-xl text-pretty text-base opacity-80 sm:text-lg">
Autoescuela unipersonal con profesor con <span className="font-medium">16 años de experiencia</span>,
coche moderno con ayudas a la conducción y preparación teórica con editoriales líderes.
</p>
<div className="flex flex-wrap gap-3">
<Pill icon={CalendarClock} text="Clases a tu horario" />
<Pill icon={Recycle} text="Clases de reciclaje" />
<Pill icon={BadgeCheck} text="Seguimiento real" />
</div>
<div className="flex flex-col gap-3 sm:flex-row">
<Button asChild size="lg" className="rounded-2xl">
<a href="#contacto">
Reserva tu primera clase <ArrowRight className="ml-2 h-4 w-4" />
</a>
</Button>
<Button asChild size="lg" variant="secondary" className="rounded-2xl">
<a href="#precios">
Ver precios <CreditCard className="ml-2 h-4 w-4" />
</a>
</Button>
</div>
<div className="flex flex-wrap items-center gap-4 text-sm opacity-80">
<div className="inline-flex items-center gap-2"><MapPin className="h-4 w-4" /> {BRAND.address}</div>
<div className="inline-flex items-center gap-2"><Clock className="h-4 w-4" /> {BRAND.hours}</div>
</div>
</motion.div>
<motion.div
initial={{ opacity: 0, scale: 0.98 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true, margin: "-80px" }}
transition={{ duration: 0.6 }}
className="relative"
>
<Card className="rounded-3xl shadow-sm">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<ShieldCheck className="h-5 w-5" /> Tu plan, claro desde el día 1
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div className="grid gap-3 sm:grid-cols-2">
<div className="rounded-2xl border bg-muted/40 p-4">
<div className="text-sm font-medium">Evaluación inicial</div>
<div className="text-sm opacity-75">Objetivos y calendario realista.</div>
</div>
<div className="rounded-2xl border bg-muted/40 p-4">
<div className="text-sm font-medium">Teoría + test</div>
<div className="text-sm opacity-75">AEOl y CNAE (ajústalo si usas otros).</div>
</div>
<div className="rounded-2xl border bg-muted/40 p-4">
<div className="text-sm font-medium">Prácticas eficientes</div>
<div className="text-sm opacity-75">Correcciones y seguimiento.</div>
</div>
<div className="rounded-2xl border bg-muted/40 p-4">
<div className="text-sm font-medium">Examen sin sorpresas</div>
<div className="text-sm opacity-75">Simulacros y checklist.</div>
</div>
</div>
<Separator />
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<div className="text-sm opacity-80">¿Tienes prisa? Ajustamos el plan a tu disponibilidad.</div>
<Button asChild variant="secondary" className="rounded-2xl">
<a href={`https://wa.me/${BRAND.phone.replace(/\D/g, "")}`} target="_blank" rel="noreferrer">
WhatsApp <MessageCircle className="ml-2 h-4 w-4" />
</a>
</Button>
</div>
</CardContent>
</Card>
<div className="pointer-events-none absolute -bottom-8 -left-8 hidden h-24 w-24 rounded-3xl border bg-background shadow-sm lg:block" />
<div className="pointer-events-none absolute -right-6 -top-6 hidden h-20 w-20 rounded-3xl border bg-background shadow-sm lg:block" />
</motion.div>
</div>
</Container>
</section>);
}
function Servicios() {
const items = [
{
icon: Car,
title: «Clases prácticas»,
desc: «Coche moderno con ayudas a la conducción y doble mando. Trabajo de maniobras, ciudad y carretera.»,
},
{
icon: CalendarClock,
title: «Clases adaptadas a tu horario»,
desc: «Bloques flexibles (mañana/tarde). Reserva por WhatsApp y cambios rápidos.»,
},
{
icon: Recycle,
title: «Clases de reciclaje»,
desc: «Para recuperar confianza, perfeccionar maniobras o volver a conducir después de tiempo.»,
},
{
icon: BookOpen,
title: «Teoría + test»,
desc: «Plataforma de test con seguimiento y simulacros. Explicaciones claras y objetivos semanales.»,
},
{
icon: ClipboardCheck,
title: «Gestión de examen»,
desc: «Gestión de tasas, presentación, renovaciones y cambios de expediente (según tu caso).»,
},
{
icon: BadgeCheck,
title: «Acompañamiento 1 a 1»,
desc: «Autoescuela unipersonal: trato directo y planificación realista hasta aprobar.»,
},
];
return (
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
{items.map((it) => (
<Card key={it.title} className="rounded-3xl shadow-sm">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-base">
<it.icon className="h-5 w-5" /> {it.title}
</CardTitle>
</CardHeader>
<CardContent>
<p className="text-sm opacity-80">{it.desc}</p>
</CardContent>
</Card>
))}
</div>
<div className="rounded-3xl border bg-muted/30 p-6 sm:p-8">
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div>
<div className="text-lg font-semibold">{BRAND.sub}</div>
<div className="text-sm opacity-80">Cuéntame tu disponibilidad y montamos el calendario.</div>
</div>
<div className="flex gap-2">
<Button asChild className="rounded-2xl">
<a href="#contacto">Pedir info</a>
</Button>
<Button asChild variant="secondary" className="rounded-2xl">
<a href={`tel:${BRAND.phone.replace(/\s/g, "")}`}>Llamar</a>
</Button>
</div>
</div>
</div>
</div>
</Container>
</section>);
}
function Metodo() {
const steps = [
{
title: «1) Diagnóstico»,
desc: «Vemos tu punto de partida (teoría y conducción) y fijamos objetivos realistas.»,
},
{
title: «2) Teoría con ritmo»,
desc: «Plan semanal + test + simulacros. Resolvemos dudas rápido por WhatsApp.»,
},
{
title: «3) Prácticas inteligentes»,
desc: «Menos “dar vueltas”, más corrección: maniobras, lectura de tráfico y anticipación.»,
},
{
title: «4) Preparación de examen»,
desc: «Checklist final, recorridos tipo, control de nervios y estrategia de examen.»,
},
];
return (
<div className="grid gap-4 lg:grid-cols-4">
{steps.map((s) => (
<Card key={s.title} className="rounded-3xl shadow-sm">
<CardHeader>
<CardTitle className="text-base">{s.title}</CardTitle>
</CardHeader>
<CardContent>
<p className="text-sm opacity-80">{s.desc}</p>
</CardContent>
</Card>
))}
</div>
<div className="grid gap-4 lg:grid-cols-3">
<Card className="rounded-3xl shadow-sm lg:col-span-2">
<CardHeader>
<CardTitle className="text-base">Lo que más valoran los alumnos</CardTitle>
</CardHeader>
<CardContent>
<ul className="grid gap-3 text-sm opacity-85 sm:grid-cols-2">
<li className="flex gap-2"><BadgeCheck className="h-5 w-5" /> Claridad: qué hacer y por qué.</li>
<li className="flex gap-2"><BadgeCheck className="h-5 w-5" /> Horarios flexibles de verdad.</li>
<li className="flex gap-2"><BadgeCheck className="h-5 w-5" /> Prácticas con objetivos.</li>
<li className="flex gap-2"><BadgeCheck className="h-5 w-5" /> Trato directo (sin intermediarios).</li>
</ul>
</CardContent>
</Card>
<Card className="rounded-3xl border-dashed shadow-sm">
<CardHeader>
<CardTitle className="text-base">¿Vienes de otra autoescuela?</CardTitle>
</CardHeader>
<CardContent className="space-y-3">
<p className="text-sm opacity-80">
Te ayudo con el <span className="font-medium">cambio de expediente</span> y un plan de prácticas
para retomar rápido.
</p>
<Button asChild variant="secondary" className="w-full rounded-2xl">
<a href="#contacto">Consultar mi caso</a>
</Button>
</CardContent>
</Card>
</div>
</div>
</Container>
</section>);
}
type PriceRow = { concepto: string; detalle: string; precio: string };
function Precios() {
const rows: PriceRow[] = [
{ concepto: «Matrícula», detalle: «Alta + acceso a teoría/test», precio: «—» },
{ concepto: «Bono 10 clases», detalle: «10 prácticas (50 min)», precio: «—» },
{ concepto: «Práctica suelta», detalle: «1 práctica (50 min)», precio: «—» },
{ concepto: «Precio examen», detalle: «Presentación a examen», precio: «—» },
{ concepto: «Gastos gestión examen», detalle: «Tramitación y coordinación», precio: «—» },
{ concepto: «Tasa DGT», detalle: «Según convocatoria/vigencia», precio: «—» },
{ concepto: «Renovación», detalle: «Extensión de tasa/vigencia», precio: «—» },
{ concepto: «Reactivación test», detalle: «Reapertura acceso plataforma», precio: «—» },
{ concepto: «Cambio de expediente», detalle: «Traslado desde otra autoescuela», precio: «—» },
];
return (
<Card className="rounded-3xl shadow-sm">
<CardHeader>
<CardTitle className="text-base">Tarifas (plantilla editable)</CardTitle>
</CardHeader>
<CardContent>
<div className="overflow-x-auto">
<table className="w-full min-w-[720px] text-left text-sm">
<thead>
<tr className="border-b">
<th className="py-3 pr-4 font-medium">Concepto</th>
<th className="py-3 pr-4 font-medium">Detalle</th>
<th className="py-3 pr-2 text-right font-medium">Precio</th>
</tr>
</thead>
<tbody>
{rows.map((r) => (
<tr key={r.concepto} className="border-b last:border-b-0">
<td className="py-3 pr-4">{r.concepto}</td>
<td className="py-3 pr-4 opacity-80">{r.detalle}</td>
<td className="py-3 pr-2 text-right font-medium">{r.precio}</td>
</tr>
))}
</tbody>
</table>
</div>
<Separator className="my-6" />
<div className="grid gap-3 sm:grid-cols-3">
<div className="rounded-2xl border bg-muted/30 p-4">
<div className="text-sm font-medium">Opción rápida</div>
<div className="text-sm opacity-80">Matrícula + bono 10 + calendario.</div>
</div>
<div className="rounded-2xl border bg-muted/30 p-4">
<div className="text-sm font-medium">Opción flexible</div>
<div className="text-sm opacity-80">Prácticas sueltas según avance.</div>
</div>
<div className="rounded-2xl border bg-muted/30 p-4">
<div className="text-sm font-medium">Reciclaje</div>
<div className="text-sm opacity-80">Paquete a medida por objetivo.</div>
</div>
</div>
</CardContent>
</Card>
</div>
</Container>
</section>);
}
function FAQ() {
const faqs = [
{
q: «¿Puedo empezar por prácticas?»,
a: «Sí. Si ya tienes la teoría aprobada o vienes de otra autoescuela, ajustamos el plan para arrancar con prácticas.»,
},
{
q: «¿Cómo reservo o cambio una clase?»,
a: «Por WhatsApp o llamada. Intento dar alternativas rápidas para adaptarnos a tu agenda.»,
},
{
q: «¿Hacéis clases de reciclaje?»,
a: «Sí. Trabajo objetivos concretos: aparcar, rotondas, autovía, conducción nocturna, etc.»,
},
{
q: «¿Cuánto tarda un alumno medio en estar listo?»,
a: «Depende de tu disponibilidad y punto de partida. Tras la primera evaluación te doy una estimación realista.»,
},
{
q: «¿Qué necesito para matricularme?»,
a: «DNI/NIE, reconocimiento médico (si aplica) y tus datos. Si vienes de otra autoescuela, hablamos del expediente.»,
},
];
return (
<div className="grid gap-4 lg:grid-cols-2">
{faqs.map((f) => (
<Card key={f.q} className="rounded-3xl shadow-sm">
<CardHeader>
<CardTitle className="text-base">{f.q}</CardTitle>
</CardHeader>
<CardContent>
<p className="text-sm opacity-80">{f.a}</p>
</CardContent>
</Card>
))}
</div>
</div>
</Container>
</section>);
}
function Contacto() {
const [query, setQuery] = useState(«»);
const templates = useMemo(() => {
const base = «Hola, quiero información para el permiso B. «;
if (!query.trim()) return base + «Mi disponibilidad es: __.»;
return base + query.trim();
}, [query]);
return (
<Card className="rounded-3xl shadow-sm">
<CardContent className="space-y-4 p-6">
<div className="grid gap-3">
<div className="flex items-center gap-2 text-sm">
<Phone className="h-4 w-4" />
<a className="font-medium underline-offset-4 hover:underline" href={`tel:${BRAND.phone.replace(/\s/g, "")}`}>
{BRAND.phone}
</a>
</div>
<div className="flex items-center gap-2 text-sm">
<Mail className="h-4 w-4" />
<a className="font-medium underline-offset-4 hover:underline" href={`mailto:${BRAND.email}`}>
{BRAND.email}
</a>
</div>
<div className="flex items-center gap-2 text-sm">
<MapPin className="h-4 w-4" />
<span className="opacity-80">{BRAND.address}</span>
</div>
<div className="flex items-center gap-2 text-sm">
<Clock className="h-4 w-4" />
<span className="opacity-80">{BRAND.hours}</span>
</div>
</div>
<Separator />
<div className="space-y-2">
<div className="text-sm font-medium">Mensaje rápido (WhatsApp)</div>
<div className="flex gap-2">
<Input
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Ej: Solo puedo tardes. Vengo de otra autoescuela."
className="rounded-2xl"
/>
<Button
type="button"
variant="secondary"
className="rounded-2xl"
onClick={() => setQuery("")}
title="Limpiar"
>
<Search className="h-4 w-4" />
</Button>
</div>
<Button
asChild
className="w-full rounded-2xl"
>
<a
href={`https://wa.me/${BRAND.phone.replace(/\D/g, "")}?text=${encodeURIComponent(templates)}`}
target="_blank"
rel="noreferrer"
>
Enviar WhatsApp <MessageCircle className="ml-2 h-4 w-4" />
</a>
</Button>
<p className="text-xs opacity-70">
Consejo: escribe tu disponibilidad (días/horas) y si necesitas reciclaje o cambio de expediente.
</p>
</div>
</CardContent>
</Card>
</div>
<div className="space-y-4">
<Card className="rounded-3xl shadow-sm">
<CardHeader>
<CardTitle className="text-base">Checklist para empezar</CardTitle>
</CardHeader>
<CardContent>
<div className="grid gap-3 text-sm">
<div className="flex gap-2"><BadgeCheck className="h-5 w-5" /> DNI/NIE</div>
<div className="flex gap-2"><BadgeCheck className="h-5 w-5" /> Foto (si aplica)</div>
<div className="flex gap-2"><BadgeCheck className="h-5 w-5" /> Reconocimiento médico (si procede)</div>
<div className="flex gap-2"><BadgeCheck className="h-5 w-5" /> Si vienes de otra autoescuela: datos del expediente</div>
</div>
<Separator className="my-6" />
<div className="rounded-2xl border bg-muted/30 p-4">
<div className="text-sm font-medium">Compromiso RF</div>
<p className="mt-1 text-sm opacity-80">
Explico lo que hacemos, lo repetimos las veces que haga falta y avanzamos con objetivos.
Menos incertidumbre, más control.
</p>
</div>
</CardContent>
</Card>
<div className="rounded-3xl border bg-muted/20 p-6">
<div className="flex items-start gap-3">
<div className="grid h-10 w-10 place-items-center rounded-2xl border bg-background shadow-sm">
<span className="text-sm font-semibold">RF</span>
</div>
<div>
<div className="text-sm font-semibold">¿Listo para empezar?</div>
<div className="text-sm opacity-80">Te respondo hoy con un plan y disponibilidad.</div>
</div>
</div>
<div className="mt-4 flex flex-col gap-2 sm:flex-row">
<Button asChild className="rounded-2xl">
<a href={`https://wa.me/${BRAND.phone.replace(/\D/g, "")}`} target="_blank" rel="noreferrer">
WhatsApp
</a>
</Button>
<Button asChild variant="secondary" className="rounded-2xl">
<a href={`mailto:${BRAND.email}`}>Email</a>
</Button>
</div>
</div>
</div>
</div>
</Container>
</section>);
}
function Footer() {
return (
{BRAND.name}
© {new Date().getFullYear()} · {BRAND.address}
ServiciosMétodoPreciosFAQContacto
);
}
export default function AutoescuelaRFPage() {
return (
);
}