152 lines
8.8 KiB
TypeScript
152 lines
8.8 KiB
TypeScript
import { mdiCellphoneCog, mdiLogin, mdiQrcodeScan, mdiRobotExcitedOutline, mdiShieldAccountOutline, mdiWhatsapp } from '@mdi/js';
|
|
import type { ReactElement } from 'react';
|
|
import Head from 'next/head';
|
|
import BaseButton from '../components/BaseButton';
|
|
import CardBox from '../components/CardBox';
|
|
import LayoutGuest from '../layouts/Guest';
|
|
import Logo from '../components/Logo';
|
|
import { getPageTitle } from '../config';
|
|
|
|
const services = [
|
|
'creacion de aplicaciones',
|
|
'instalacion de Sistema Windows',
|
|
'diseño de paginas web',
|
|
'creacion de aplicaciones',
|
|
];
|
|
|
|
const steps = [
|
|
{ title: 'Escanea o entra', text: 'El cliente llega desde QR, landing o bot y abre su pedido.' },
|
|
{ title: 'Describe el fallo', text: 'Se capturan equipo, síntomas, contacto y preferencia de pago.' },
|
|
{ title: 'Paga y recibe estado', text: 'Transfermóvil/Enzona quedan listos con referencia y cola de WhatsApp.' },
|
|
];
|
|
|
|
export default function Starter() {
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>{getPageTitle('Floresoftware Ideas')}</title>
|
|
<meta name="description" content="Taller tecnológico de reparación de móviles con pedidos, pagos, QR, WhatsApp e inteligencia artificial." />
|
|
</Head>
|
|
|
|
<main className="min-h-screen overflow-hidden bg-slate-950 text-white">
|
|
<section className="relative isolate px-6 py-8 md:px-10 lg:px-16">
|
|
<div className="absolute inset-0 -z-10 bg-[radial-gradient(circle_at_top_left,rgba(34,211,238,0.35),transparent_32%),radial-gradient(circle_at_80%_20%,rgba(217,70,239,0.28),transparent_30%),linear-gradient(135deg,#020617_0%,#06263a_46%,#1e1034_100%)]" />
|
|
<div className="absolute left-1/2 top-20 -z-10 h-72 w-72 rounded-full bg-cyan-400/20 blur-3xl" />
|
|
|
|
<header className="mx-auto flex max-w-7xl items-center justify-between gap-4 rounded-full border border-white/10 bg-white/10 px-4 py-3 backdrop-blur-xl">
|
|
<div className="flex items-center gap-3">
|
|
<div className="overflow-hidden rounded-2xl border border-white/15 bg-white shadow-lg shadow-cyan-300/20">
|
|
<Logo className="h-12 w-20 object-cover object-center" />
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-black leading-tight">Floresoftware Ideas</p>
|
|
<p className="text-xs text-cyan-100/70">Mobile Repair SaaS</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<BaseButton href="/login" label="Login" color="lightDark" icon={mdiLogin} small />
|
|
<BaseButton href="/dashboard" label="Admin" color="info" icon={mdiShieldAccountOutline} small />
|
|
</div>
|
|
</header>
|
|
|
|
<div className="mx-auto grid max-w-7xl items-center gap-10 py-16 lg:grid-cols-[1.05fr_0.95fr] lg:py-24">
|
|
<div>
|
|
<div className="mb-6 inline-flex items-center gap-2 rounded-full border border-cyan-200/20 bg-cyan-300/10 px-4 py-2 text-sm font-bold text-cyan-100">
|
|
<span className="h-2 w-2 rounded-full bg-emerald-300 shadow-lg shadow-emerald-300/70" />
|
|
Taller moderno con QR, pagos y WhatsApp
|
|
</div>
|
|
<h1 className="max-w-4xl text-5xl font-black tracking-tight md:text-7xl">
|
|
crear app, instalacion de SO Windows, y <span className="bg-gradient-to-r from-cyan-200 via-fuchsia-200 to-emerald-200 bg-clip-text text-transparent">moviles</span>
|
|
</h1>
|
|
<p className="mt-6 max-w-2xl text-lg leading-8 text-slate-200/80">
|
|
Landing pública + portal de clientes + panel admin para convertir consultas en pedidos, generar referencias de Transfermóvil/Enzona y preparar avisos al WhatsApp del taller.
|
|
</p>
|
|
<div className="mt-8 flex flex-col gap-3 sm:flex-row">
|
|
<BaseButton href="/repair-intake" label="Crear pedido ahora" color="success" icon={mdiCellphoneCog} />
|
|
<BaseButton href="https://wa.me/5359177041" target="_blank" label="WhatsApp taller" color="info" icon={mdiWhatsapp} outline />
|
|
</div>
|
|
<div className="mt-8 grid max-w-2xl gap-3 sm:grid-cols-2">
|
|
{services.map((service) => (
|
|
<div key={service} className="rounded-2xl border border-white/10 bg-white/10 px-4 py-3 text-sm font-semibold text-slate-100 backdrop-blur">
|
|
{service}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<CardBox className="border-0 bg-white/10 p-0 text-white shadow-2xl shadow-fuchsia-950/40 backdrop-blur-xl" hasComponentLayout>
|
|
<div className="rounded-3xl border border-white/10 bg-slate-950/75 p-5">
|
|
<div className="mb-5 overflow-hidden rounded-[2rem] border border-cyan-200/20 bg-white shadow-2xl shadow-cyan-500/20">
|
|
<Logo className="h-auto w-full object-cover" />
|
|
</div>
|
|
<div className="mb-5 flex items-center justify-between">
|
|
<div>
|
|
<p className="text-xs font-bold uppercase tracking-[0.24em] text-cyan-300">Pedido demo</p>
|
|
<h2 className="text-2xl font-black">iPhone 11 · Pantalla</h2>
|
|
</div>
|
|
<span className="rounded-full bg-emerald-300 px-3 py-1 text-xs font-black text-slate-950">Nuevo</span>
|
|
</div>
|
|
|
|
<div className="grid gap-3 sm:grid-cols-2">
|
|
<div className="rounded-3xl bg-white/10 p-4">
|
|
<p className="text-xs text-slate-400">Pago</p>
|
|
<p className="mt-1 text-lg font-black">Transfermóvil</p>
|
|
<p className="text-xs text-cyan-100">REF-FI-24X9</p>
|
|
</div>
|
|
<div className="rounded-3xl bg-white/10 p-4">
|
|
<p className="text-xs text-slate-400">WhatsApp</p>
|
|
<p className="mt-1 text-lg font-black">+5359177041</p>
|
|
<p className="text-xs text-fuchsia-100">Mensaje en cola</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="my-5 rounded-[2rem] border border-dashed border-cyan-200/40 bg-cyan-300/10 p-6 text-center">
|
|
<svg className="mx-auto h-10 w-10 text-cyan-200" viewBox="0 0 24 24" fill="currentColor"><path d={mdiQrcodeScan} /></svg>
|
|
<p className="mt-3 text-3xl font-black tracking-[0.28em]">QR</p>
|
|
<p className="mt-2 text-sm text-slate-300">Escanea para crear un pedido desde el móvil.</p>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
{steps.map((step, index) => (
|
|
<div key={step.title} className="flex gap-3 rounded-2xl bg-white/10 p-4">
|
|
<span className="grid h-8 w-8 shrink-0 place-items-center rounded-full bg-fuchsia-300 text-sm font-black text-slate-950">{index + 1}</span>
|
|
<div>
|
|
<p className="font-black">{step.title}</p>
|
|
<p className="text-sm text-slate-300">{step.text}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</CardBox>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="border-y border-white/10 bg-white/[0.03] px-6 py-12 md:px-10 lg:px-16">
|
|
<div className="mx-auto grid max-w-7xl gap-6 md:grid-cols-3">
|
|
<div className="rounded-3xl border border-white/10 bg-white/10 p-6">
|
|
<svg className="h-8 w-8 text-cyan-300" viewBox="0 0 24 24" fill="currentColor"><path d={mdiRobotExcitedOutline} /></svg>
|
|
<h3 className="mt-4 text-xl font-black">Bot con IA</h3>
|
|
<p className="mt-2 text-sm leading-6 text-slate-300">Preparado para responder preguntas y convertir chats en solicitudes estructuradas.</p>
|
|
</div>
|
|
<div className="rounded-3xl border border-white/10 bg-white/10 p-6">
|
|
<svg className="h-8 w-8 text-fuchsia-300" viewBox="0 0 24 24" fill="currentColor"><path d={mdiQrcodeScan} /></svg>
|
|
<h3 className="mt-4 text-xl font-black">QR de recepción</h3>
|
|
<p className="mt-2 text-sm leading-6 text-slate-300">Un punto de entrada simple para mostrador, redes sociales, tarjetas y stickers.</p>
|
|
</div>
|
|
<div className="rounded-3xl border border-white/10 bg-white/10 p-6">
|
|
<svg className="h-8 w-8 text-emerald-300" viewBox="0 0 24 24" fill="currentColor"><path d={mdiShieldAccountOutline} /></svg>
|
|
<h3 className="mt-4 text-xl font-black">Panel admin</h3>
|
|
<p className="mt-2 text-sm leading-6 text-slate-300">Gestiona clientes, equipos, pagos, facturas y estados desde el backoffice.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</>
|
|
);
|
|
}
|
|
|
|
Starter.getLayout = function getLayout(page: ReactElement) {
|
|
return <LayoutGuest>{page}</LayoutGuest>;
|
|
};
|