feat: Adiciona a estrutura inicial do portfólio com componentes para experiência, hero, sobre, habilidades, projetos, modalidades de trabalho e contato.

app/components/Contact.tsx

@@ -4,10 +4,11 @@ import React, { useState } from "react";
 import { motion } from "framer-motion";
 import { Send, User, Mail, MessageSquare, Sparkles } from "lucide-react";
 import { ShimmerButton as MagicShimmerButton } from "@/components/magicui/shimmer-button";
+import Squares from "@/components/Squares";
 
 // --- CONFIGURAÇÃO DE ENGENHARIA ---
 // Substitua pelo seu número real: CódigoPaís + DDD + Número (sem espaços ou símbolos)
-const WHATSAPP_NUMBER = "5547992742365"; 
+const WHATSAPP_NUMBER = "5547992742365";
 
 interface FormData {
   name: string;
@@ -71,17 +72,17 @@ export default function Contact() {
       chat: "\u{1F4AC}"
     };
 
-    const messageTemplate = `*NOVA REQUISICAO DE PROJETO*
+    const messageTemplate = `*NOVA SOLICITAÇÃO DE PROJETO*
 
-*Origem:* Portfolio Profissional
+*Origem:* Portfólio Profissional
 *Prioridade:* Alta (Lead Qualificado)
 
 ---
  *CLIENTE:* ${formData.name}
  *EMAIL:* ${formData.email}
- *AREA:* ${formData.subject.toUpperCase()}
+ *ÁREA:* ${formData.subject.toUpperCase()}
 
- *DESCRICAO:*
+ *DESCRIÇÃO:*
 "${formData.message}"
 ---
 _Mensagem gerada via Evandro.dev | Garuva, SC_`;
@@ -94,102 +95,129 @@ _Mensagem gerada via Evandro.dev | Garuva, SC_`;
   };
 
   const inputStyles =
-    "w-full bg-slate-950/50 border border-slate-800 rounded-xl px-4 py-3 text-slate-200 placeholder:text-slate-600 focus:border-blue-500/50 focus:ring-2 focus:ring-blue-500/10 outline-none transition-all duration-300 font-mono text-sm";
+    "w-full bg-black/40 border border-white/5 rounded-xl px-4 py-3 text-slate-200 placeholder:text-slate-600 focus:border-blue-500/50 focus:ring-2 focus:ring-blue-500/10 focus:bg-black/60 outline-none transition-all duration-300 font-mono text-sm backdrop-blur-sm group-hover:border-white/10";
   const labelStyles =
-    "text-xs font-bold text-slate-500 uppercase tracking-widest mb-2 flex items-center gap-2";
+    "text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2 flex items-center gap-2 transition-colors group-hover:text-slate-400";
 
   return (
-    <section id="contact" className="w-full max-w-2xl mx-auto p-6">
-      <form onSubmit={handleSubmit} className="space-y-6">
-        <div className="grid md:grid-cols-2 gap-6">
-          <div className="space-y-2">
-            <label className={labelStyles}>
-              <User className="w-3 h-3" /> Nome_Completo
-            </label>
-            <input
-              required
-              type="text"
-              placeholder="Ex: Alan Turing"
-              className={inputStyles}
-              value={formData.name}
-              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-            />
+    <section id="contact" className="w-full py-24 relative">
+
+
+      <div className="w-full max-w-4xl mx-auto px-6 relative z-10">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+          className="relative bg-zinc-900/40 backdrop-blur-xl border border-white/10 rounded-3xl p-8 md:p-12 shadow-2xl overflow-hidden"
+        >
+          <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500/0 via-blue-500/50 to-blue-500/0" />
+
+          <div className="mb-10 text-center space-y-2">
+            <h2 className="text-3xl md:text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-b from-white to-white/60">
+              Vamos Construir o Futuro
+            </h2>
+            <p className="text-slate-400 text-sm md:text-base max-w-lg mx-auto">
+              Descreva seu desafio técnico. Retorno com uma arquitetura sólida em até 24h.
+            </p>
           </div>
 
-          <div className="space-y-2">
-            <label className={labelStyles}>
-              <Mail className="w-3 h-3" /> Endpoint_Email
-            </label>
-            <input
-              required
-              type="email"
-              placeholder="[email protected]"
-              className={inputStyles}
-              value={formData.email}
-              onChange={(e) => setFormData({ ...formData, email: e.target.value })}
-            />
-          </div>
-        </div>
+          <form onSubmit={handleSubmit} className="space-y-8 relative">
+            <div className="grid md:grid-cols-2 gap-8">
+              <div className="space-y-3 group">
+                <label className={labelStyles}>
+                  <User className="w-3 h-3 text-blue-500" /> NOME COMPLETO
+                </label>
+                <input
+                  required
+                  type="text"
+                  placeholder="Ex: Alan Turing"
+                  className={inputStyles}
+                  value={formData.name}
+                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                />
+              </div>
 
-        <div className="space-y-2">
-          <label className={labelStyles}>
-            <Sparkles className="w-3 h-3" /> Tipo_de_Requisicao
-          </label>
-          <select
-            className={inputStyles}
-            value={formData.subject}
-            onChange={(e) => setFormData({ ...formData, subject: e.target.value })}
-          >
-            <option value="full-stack">Desenvolvimento Full-Stack</option>
-            <option value="cloud">Cloud & Infrastructure</option>
-            <option value="iot">Internet of Things (IoT)</option>
-            <option value="consultancy">Consultoria Técnica Sênior</option>
-          </select>
-        </div>
-
-        <div className="space-y-2">
-          <label className={labelStyles}>
-            <MessageSquare className="w-3 h-3" /> Descricao_do_Projeto
-          </label>
-          <textarea
-            required
-            rows={5}
-            placeholder="Descreva os requisitos técnicos e objetivos do sistema..."
-            className={`${inputStyles} resize-none`}
-            value={formData.message}
-            onChange={(e) => setFormData({ ...formData, message: e.target.value })}
-          />
-        </div>
-
-        <motion.div whileHover={{ scale: 1.01 }} whileTap={{ scale: 0.99 }} className="pt-4">
-          <CustomShimmerButton
-            type="submit"
-            className="w-full h-14 rounded-xl shadow-2xl"
-            shimmerColor="#3b82f6"
-            shimmerSize="0.2em"
-            disabled={isSubmitting}
-          >
-            <div className="flex flex-row items-center justify-center gap-3 w-full h-full">
-              {isSubmitting ? (
-                <div className="w-6 h-6 border-2 border-white/30 border-t-white rounded-full animate-spin" />
-              ) : (
-                <>
-                  <span className="text-white font-bold tracking-widest uppercase text-sm leading-none">
-                    Executar Request
-                  </span>
-                  <Send className="w-4 h-4 text-white" />
-                </>
-              )}
+              <div className="space-y-3 group">
+                <label className={labelStyles}>
+                  <Mail className="w-3 h-3 text-blue-500" /> E-MAIL CORPORATIVO
+                </label>
+                <input
+                  required
+                  type="email"
+                  placeholder="[email protected]"
+                  className={inputStyles}
+                  value={formData.email}
+                  onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+                />
+              </div>
             </div>
-          </CustomShimmerButton>
-        </motion.div>
 
-        <footer className="pt-4">
-          <p className="text-[10px] text-center text-slate-600 font-mono uppercase tracking-tighter">
-            Engenharia de Software de Alta Performance | Garuva, SC
-          </p>
-        </footer>
-      </form>
+            <div className="space-y-3 group">
+              <label className={labelStyles}>
+                <Sparkles className="w-3 h-3 text-blue-500" /> TIPO DE PROJETO
+              </label>
+              <div className="relative">
+                <select
+                  className={`${inputStyles} appearance-none cursor-pointer`}
+                  value={formData.subject}
+                  onChange={(e) => setFormData({ ...formData, subject: e.target.value })}
+                >
+                  <option value="full-stack">Desenvolvimento Full-Stack</option>
+                  <option value="cloud">Cloud & Infrastructure</option>
+                  <option value="iot">Internet of Things (IoT)</option>
+                  <option value="consultancy">Consultoria Técnica Sênior</option>
+                </select>
+                <div className="absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none text-slate-500">
+                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m6 9 6 6 6-6" /></svg>
+                </div>
+              </div>
+            </div>
+
+            <div className="space-y-3 group">
+              <label className={labelStyles}>
+                <MessageSquare className="w-3 h-3 text-blue-500" /> DETALHES DO PROJETO
+              </label>
+              <textarea
+                required
+                rows={5}
+                placeholder="Descreva os requisitos técnicos e objetivos do sistema..."
+                className={`${inputStyles} resize-none`}
+                value={formData.message}
+                onChange={(e) => setFormData({ ...formData, message: e.target.value })}
+              />
+            </div>
+
+            <motion.div whileHover={{ scale: 1.01 }} whileTap={{ scale: 0.99 }} className="pt-6">
+              <CustomShimmerButton
+                type="submit"
+                className="w-full h-14 rounded-xl shadow-lg shadow-blue-500/20"
+                shimmerColor="#60a5fa"
+                shimmerSize="0.1em"
+                disabled={isSubmitting}
+              >
+                <div className="flex flex-row items-center justify-center gap-3 w-full h-full">
+                  {isSubmitting ? (
+                    <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                  ) : (
+                    <>
+                      <span className="text-white font-bold tracking-widest uppercase text-xs md:text-sm">
+                        Iniciar Protocolo de Contato
+                      </span>
+                      <Send className="w-4 h-4 text-white" />
+                    </>
+                  )}
+                </div>
+              </CustomShimmerButton>
+            </motion.div>
+
+            <footer className="pt-2">
+              <p className="text-[10px] text-center text-slate-600 font-mono uppercase tracking-widest opacity-60">
+                Secured by End-to-End Encryption
+              </p>
+            </footer>
+          </form>
+        </motion.div>
+      </div>
     </section>
   );
 }