48 lines
1.8 KiB
JavaScript
48 lines
1.8 KiB
JavaScript
import React from 'react';
|
|
import { BGPattern } from './ui/bg-pattern';
|
|
import RepairForm from './form-layout';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogTrigger,
|
|
} from "@/components/ui/dialog";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
const Hero = () => {
|
|
return (
|
|
<section id="inicio" className="relative overflow-hidden min-h-screen flex flex-col justify-center pt-16">
|
|
{/* Patron de fondo del hero */}
|
|
<BGPattern variant="grid" mask="fade-edges" fill="rgba(255, 255, 255, 0.05)" />
|
|
|
|
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
|
|
<h1 className="text-5xl md:text-7xl font-bold tracking-tight mb-8">
|
|
Gestiona tu taller con <br className="hidden md:block" />
|
|
<span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-light via-brand to-brand-dark">
|
|
precisión absoluta
|
|
</span>
|
|
</h1>
|
|
|
|
<p className="max-w-2xl mx-auto text-lg md:text-xl text-text-muted mb-10">
|
|
Trazabilidad completa de reparaciones, control de inventario y comunicación profesional con tus clientes, todo en una sola plataforma.
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
<Dialog>
|
|
<DialogTrigger asChild>
|
|
<Button size="lg" className="w-full sm:w-auto px-8 bg-brand hover:bg-brand-light text-white font-medium">
|
|
Comenzar Ahora
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent className="w-[95vw] sm:max-w-4xl lg:max-w-6xl bg-background border-border p-0 overflow-hidden rounded-xl">
|
|
<RepairForm />
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Hero;
|