Versão inicial do site Avanzato

2026-05-25 23:31:32 -03:00
commit 4eed31a206
155 changed files with 31304 additions and 0 deletions
@@ -0,0 +1,116 @@
+import { useEffect, useRef } from 'react';
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+import { Server, Check, ArrowRight, Cpu, Layers, FolderOpen } from 'lucide-react';
+
+gsap.registerPlugin(ScrollTrigger);
+
+const servicos = [
+  { titulo: 'Implantação de servidores', descricao: 'Instalação e configuração profissional.', icon: Server },
+  { titulo: 'Virtualização', descricao: 'VMware, Hyper-V e Proxmox.', icon: Layers },
+  { titulo: 'Servidor de arquivos', descricao: 'Gestão centralizada de documentos.', icon: FolderOpen },
+];
+
+const beneficios = [
+  'Redução de custos',
+  'Alta disponibilidade',
+];
+
+const Servidores = () => {
+  const heroRef = useRef<HTMLDivElement>(null);
+  const servicosRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const ctx = gsap.context(() => {
+      const heroItems = heroRef.current?.querySelectorAll('.animate-item');
+      if (heroItems?.length) {
+        gsap.fromTo(heroItems, { y: 50, opacity: 0 }, { y: 0, opacity: 1, duration: 0.8, stagger: 0.1, ease: 'expo.out' });
+      }
+
+      const servicoCards = servicosRef.current?.querySelectorAll('.servico-card');
+      if (servicoCards?.length) {
+        gsap.fromTo(servicoCards, { y: 50, opacity: 0 }, { y: 0, opacity: 1, duration: 0.6, stagger: 0.1, ease: 'back.out(1.7)', scrollTrigger: { trigger: servicosRef.current, start: 'top 80%' } });
+      }
+    });
+
+    return () => ctx.revert();
+  }, []);
+
+  return (
+    <div className="bg-[#0e0e0e] min-h-screen">
+      {/* Hero */}
+      <section ref={heroRef} className="pt-32 pb-20 relative overflow-hidden">
+        <div className="absolute top-0 right-0 w-[600px] h-[600px] bg-[#cbf400]/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2" />
+        <div className="container-custom relative z-10">
+          <div className="grid lg:grid-cols-2 gap-12 items-center">
+            <div>
+              <div className="animate-item flex items-center gap-2 mb-6">
+                <Cpu className="w-5 h-5 text-[#cbf400]" />
+                <span className="text-[#cbf400] font-semibold">Serviços</span>
+                <span className="text-gray-500">/</span>
+                <span className="text-white">Servidores</span>
+              </div>
+              <h1 className="animate-item text-4xl md:text-5xl lg:text-6xl font-black text-white mb-6">Servidores e <span className="text-gradient">Virtualização</span></h1>
+              <p className="animate-item text-xl text-gray-400 mb-8 leading-relaxed">Alta performance e eficiência.</p>
+              <div className="animate-item flex flex-wrap gap-4">
+                <a href="https://api.whatsapp.com/send?phone=551148101704&text=Olá!%20Gostaria%20de%20servidores" target="_blank" rel="noopener noreferrer" className="btn-primary inline-flex items-center gap-2">Solicitar proposta<ArrowRight className="w-5 h-5" /></a>
+              </div>
+            </div>
+            <div className="animate-item relative">
+              <div className="absolute -inset-4 bg-gradient-to-r from-[#cbf400]/20 to-transparent rounded-2xl blur-2xl" />
+              <img src="/service-ti.png" alt="Servidores" className="relative w-full h-auto animate-float" />
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Serviços */}
+      <section ref={servicosRef} className="py-20 bg-[#1a1a1a]">
+        <div className="container-custom">
+          <div className="text-center mb-16">
+            <h2 className="text-3xl md:text-4xl font-black text-white mb-4">Nossos Serviços</h2>
+          </div>
+          <div className="grid md:grid-cols-3 gap-6">
+            {servicos.map((s, i) => (
+              <div key={i} className="servico-card bg-[#0e0e0e] rounded-2xl p-8 border border-white/5 hover:border-[#cbf400]/30 transition-colors text-center">
+                <div className="w-16 h-16 rounded-xl bg-[#cbf400]/10 flex items-center justify-center mx-auto mb-6 text-[#cbf400]"><s.icon className="w-8 h-8" /></div>
+                <h4 className="text-xl font-bold text-white mb-3">{s.titulo}</h4>
+                <p className="text-gray-400">{s.descricao}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Benefícios */}
+      <section className="py-20 bg-[#0e0e0e]">
+        <div className="container-custom">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl md:text-4xl font-black text-white mb-4">Benefícios</h2>
+          </div>
+          <div className="flex flex-wrap justify-center gap-4">
+            {beneficios.map((b, i) => (
+              <div key={i} className="flex items-center gap-3 px-6 py-4 bg-[#1a1a1a] rounded-xl border border-white/5">
+                <Check className="w-5 h-5 text-[#cbf400]" />
+                <span className="text-gray-300">{b}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section className="py-20 bg-[#1a1a1a]">
+        <div className="container-custom">
+          <div className="bg-gradient-to-r from-[#cbf400]/10 to-transparent rounded-2xl p-12 text-center border border-[#cbf400]/20">
+            <h2 className="text-3xl md:text-4xl font-black text-white mb-4">Otimize sua infraestrutura</h2>
+            <p className="text-gray-400 mb-8">Solicite uma proposta personalizada.</p>
+            <a href="https://api.whatsapp.com/send?phone=551148101704&text=Olá!%20Gostaria%20de%20proposta%20servidores" target="_blank" rel="noopener noreferrer" className="btn-primary inline-flex items-center gap-2">Solicitar proposta<ArrowRight className="w-5 h-5" /></a>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default Servidores;