Blog

  • import { Shield, Wifi, MapPin, BarChart3, Truck, Clock } from "lucide-react";
    import logo from "@/assets/omnilink-logo.webp";
    import heroImage from "@/assets/omnilink-hero.webp";
    import WhatsAppButton, { getWhatsAppUrl } from "@/components/WhatsAppButton";
    
    const WHATSAPP_URL = getWhatsAppUrl("geral", "Olá! Gostaria de saber mais sobre as soluções Omnilink.");
    
    const features = [
      { icon: Shield, title: "Gestão de Risco", desc: "Proteção completa para sua frota e carga" },
      { icon: Wifi, title: "Comunicação Híbrida", desc: "Conexão contínua via satélite e celular" },
      { icon: MapPin, title: "Rastreamento", desc: "Monitoramento em tempo real 24/7" },
      { icon: BarChart3, title: "Inteligência", desc: "Dados e análises para decisões assertivas" },
      { icon: Truck, title: "Telemetria", desc: "Sensores inteligentes no veículo" },
      { icon: Clock, title: "+25 Anos", desc: "Referência em confiabilidade no mercado" },
    ];
    
    const Index = () => {
      return (
        <div className="min-h-screen bg-background">
          {/* Header */}
          <header className="fixed top-0 z-50 w-full border-b border-primary/10 bg-background/90 backdrop-blur-md">
            <div className="container flex h-16 items-center justify-between">
              <img src={logo} alt="Omnilink" className="h-10" width="150" height="40" />
              <div className="flex items-center gap-2">
                <WhatsAppButton size="default" variant="orcamento">Orçamentos</WhatsAppButton>
                <WhatsAppButton size="default" variant="suporte">Suporte 24h</WhatsAppButton>
              </div>
            </div>
          </header>
    
          {/* Hero — critical, no lazy */}
          <section className="relative flex min-h-screen items-center overflow-hidden pt-16">
            <div
              className="absolute inset-0 bg-secondary"
              aria-hidden="true"
            />
            <div className="absolute inset-0 bg-secondary/85" />
            
            <div className="container relative z-10 grid gap-10 py-20 lg:grid-cols-2 lg:gap-16">
              <div className="flex flex-col justify-center">
                <h1 className="mb-4 text-4xl font-extrabold leading-tight text-primary-foreground md:text-5xl lg:text-6xl">
                  Mais integrado, conectado e{" "}
                  <span className="text-gradient-hero">seguro.</span>
                </h1>
                <p className="mb-4 text-lg text-primary-foreground/80 md:text-xl">
                  Tecnologia que protege, conecta e transforma operações de ponta a ponta. 
                  Há mais de 25 anos, somos referência em rastreamento e gestão de risco.
                </p>
                <p className="mb-8 text-base font-semibold text-accent">
                  Fale com um especialista agora e descubra a solução ideal para sua operação.
                </p>
                <div className="flex flex-col gap-4 sm:flex-row">
                  <WhatsAppButton size="xl" variant="orcamento">
                    Solicitar Orçamento
                  </WhatsAppButton>
                  <WhatsAppButton size="xl" variant="suporte">
                    Suporte 24 Horas
                  </WhatsAppButton>
                </div>
              </div>
    
              <div className="hidden items-center justify-center lg:flex">
                <img
                  src={heroImage}
                  alt="Omnilink - Rastreamento e Gestão de Frotas"
                  className="max-w-lg drop-shadow-2xl"
                  loading="eager"
                  width="512"
                  height="512"
                  fetchPriority="high"
                />
              </div>
            </div>
          </section>
    
          {/* Features */}
          <section className="bg-muted py-20">
            <div className="container">
              <h2 className="mb-4 text-center text-3xl font-extrabold text-foreground md:text-4xl">
                Soluções que fazem a diferença
              </h2>
              <p className="mx-auto mb-12 max-w-2xl text-center text-muted-foreground">
                Nossas tecnologias atuam de forma integrada, criando um ecossistema inteligente para sua operação.
              </p>
    
              <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
                {features.map((f) => (
                  <div
                    key={f.title}
                    className="group rounded-xl border border-border bg-card p-6 shadow-sm transition-all hover:shadow-lg hover:border-primary/30"
                  >
                    <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                      <f.icon className="h-6 w-6 text-primary" />
                    </div>
                    <h3 className="mb-2 text-lg font-bold text-card-foreground">{f.title}</h3>
                    <p className="text-sm text-muted-foreground">{f.desc}</p>
                  </div>
                ))}
              </div>
            </div>
          </section>
    
          {/* CTA Final */}
          <section className="bg-secondary py-20">
            <div className="container text-center">
              <h2 className="mb-4 text-3xl font-extrabold text-secondary-foreground md:text-4xl">
                Proteja sua operação agora
              </h2>
              <p className="mx-auto mb-8 max-w-xl text-lg text-secondary-foreground/80">
                Converse com nossos especialistas e encontre a solução perfeita para sua frota. Atendimento rápido e personalizado.
              </p>
              <div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
                <WhatsAppButton size="xl" variant="orcamento">
                  Solicitar Orçamento
                </WhatsAppButton>
                <WhatsAppButton size="xl" variant="suporte">
                  Suporte 24 Horas
                </WhatsAppButton>
              </div>
            </div>
          </section>
    
          {/* Footer */}
          <footer className="bg-foreground py-8">
            <div className="container text-center">
              <img src={logo} alt="Omnilink" className="mx-auto mb-4 h-8 brightness-0 invert" width="120" height="32" loading="lazy" />
              <p className="text-sm text-primary-foreground/60">
                © {new Date().getFullYear()} Omnilink. Mais integrado, conectado e seguro.
              </p>
            </div>
          </footer>
    
          {/* Floating WhatsApp */}
          <a
            href={WHATSAPP_URL}
            target="_blank"
            rel="noopener noreferrer"
            className="fixed bottom-6 right-6 z-50 flex h-16 w-16 items-center justify-center rounded-full bg-whatsapp shadow-xl transition-transform hover:scale-110 active:scale-95 hover:bg-whatsapp-hover animate-pulse-glow"
            aria-label="Fale conosco pelo WhatsApp"
          >
            <svg viewBox="0 0 24 24" className="h-8 w-8 fill-primary-foreground">
              <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
            </svg>
          </a>
        </div>
      );
    };
    
    export default Index;
    
  • Hello world!

    Welcome to WordPress. This is your first post. Edit or delete it, then start writing!