From dfae6bae2f4ce793ff08706ce3cca67c4b7b562a Mon Sep 17 00:00:00 2001
From: Evandro Fonseca Junior <asemlk54@hotmail.com>
Date: Mon, 12 Jan 2026 16:44:37 -0300
Subject: [PATCH] feat(contact): enhance form submission and improve user
 experience

- Updated the Contact component to include a WhatsApp integration for project requests, streamlining communication.
- Improved form handling with clearer placeholder text and refined emoji-based message templates for better user engagement.
- Adjusted submission delay for a more responsive user experience and enhanced button labeling for clarity.
---
 app/components/Contact.tsx | 98 +++++++++++++++++++-------------------
 1 file changed, 50 insertions(+), 48 deletions(-)

diff --git a/app/components/Contact.tsx b/app/components/Contact.tsx
index 0176481..867e4ed 100644
--- a/app/components/Contact.tsx
+++ b/app/components/Contact.tsx
@@ -1,12 +1,14 @@
 "use client";
 
 import React, { useState } from "react";
-import { motion } from "framer-motion"; // Ajustado para o padrão mais estável
+import { motion } from "framer-motion";
 import { Send, User, Mail, MessageSquare, Sparkles } from "lucide-react";
-// Importamos o componente original.
-// Nota: Se o erro de tipo persistir, corrigiremos a interface aqui no wrapper.
 import { ShimmerButton as MagicShimmerButton } from "@/components/magicui/shimmer-button";
 
+// --- 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"; 
+
 interface FormData {
   name: string;
   email: string;
@@ -15,15 +17,12 @@ interface FormData {
 }
 
 /**
- * Wrapper Component para corrigir o erro de tipagem TS2322
- * Aqui garantimos que o componente aceite as cores e tamanhos
+ * Wrapper Component: Resolve o erro de tipagem TS2322 (IntrinsicAttributes)
+ * Estendemos a interface para aceitar propriedades de estilo customizadas.
  */
-interface ExtendedShimmerProps {
-  children: React.ReactNode;
-  className?: string;
+interface ExtendedShimmerProps extends React.ComponentProps<typeof MagicShimmerButton> {
   shimmerColor?: string;
   shimmerSize?: string;
-  onClick?: () => void;
   type?: "button" | "submit" | "reset";
   disabled?: boolean;
 }
@@ -39,9 +38,7 @@ const CustomShimmerButton = ({
     <MagicShimmerButton
       {...props}
       className={className}
-      // Passamos como variáveis CSS se o componente original suportar,
-      // ou apenas omitimos se o componente da MagicUI for estático.
-      // @ts-ignore - Ignoramos se a lib original tiver tipos restritos
+      // @ts-ignore - Ignora restrição de tipos da lib original se necessário
       shimmerColor={shimmerColor}
       shimmerSize={shimmerSize}
     >
@@ -63,10 +60,36 @@ export default function Contact() {
     e.preventDefault();
     setIsSubmitting(true);
 
-    // Simulação de latência de rede (Princípio de UX Feedback)
-    await new Promise((resolve) => setTimeout(resolve, 1500));
+    await new Promise((resolve) => setTimeout(resolve, 800));
 
-    console.log("Payload de Engenharia enviado:", formData);
+    // Definimos os emojis via Unicode Escape para máxima compatibilidade
+    const icons = {
+      rocket: "\u{1F680}",
+      person: "\u{1F464}",
+      email: "\u{1F4E7}",
+      tools: "\u{1F6E0}",
+      chat: "\u{1F4AC}"
+    };
+
+    const messageTemplate = `${icons.rocket} *NOVA REQUISICAO DE PROJETO*
+
+*Origem:* Portfolio Profissional
+*Prioridade:* Alta (Lead Qualificado)
+
+---
+${icons.person} *CLIENTE:* ${formData.name}
+${icons.email} *EMAIL:* ${formData.email}
+${icons.tools} *AREA:* ${formData.subject.toUpperCase()}
+
+${icons.chat} *DESCRICAO:*
+"${formData.message}"
+---
+_Mensagem gerada via Evandro.dev | Garuva, SC_`;
+
+    const encodedMessage = encodeURIComponent(messageTemplate);
+    const whatsappUrl = `https://wa.me/${WHATSAPP_NUMBER}?text=${encodedMessage}`;
+
+    window.open(whatsappUrl, "_blank", "noopener,noreferrer");
     setIsSubmitting(false);
   };
 
@@ -79,7 +102,6 @@ export default function Contact() {
     <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">
-          {/* Nome */}
           <div className="space-y-2">
             <label className={labelStyles}>
               <User className="w-3 h-3" /> Nome_Completo
@@ -87,16 +109,13 @@ export default function Contact() {
             <input
               required
               type="text"
-              placeholder="Digite seu nome"
+              placeholder="Ex: Alan Turing"
               className={inputStyles}
               value={formData.name}
-              onChange={(e) =>
-                setFormData({ ...formData, name: e.target.value })
-              }
+              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
             />
           </div>
 
-          {/* Email */}
           <div className="space-y-2">
             <label className={labelStyles}>
               <Mail className="w-3 h-3" /> Endpoint_Email
@@ -104,17 +123,14 @@ export default function Contact() {
             <input
               required
               type="email"
-              placeholder="seuemail@gmail.com"
+              placeholder="contato@empresa.com"
               className={inputStyles}
               value={formData.email}
-              onChange={(e) =>
-                setFormData({ ...formData, email: e.target.value })
-              }
+              onChange={(e) => setFormData({ ...formData, email: e.target.value })}
             />
           </div>
         </div>
 
-        {/* Tipo de Requisição */}
         <div className="space-y-2">
           <label className={labelStyles}>
             <Sparkles className="w-3 h-3" /> Tipo_de_Requisicao
@@ -122,18 +138,15 @@ export default function Contact() {
           <select
             className={inputStyles}
             value={formData.subject}
-            onChange={(e) =>
-              setFormData({ ...formData, subject: e.target.value })
-            }
+            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</option>
+            <option value="consultancy">Consultoria Técnica Sênior</option>
           </select>
         </div>
 
-        {/* Mensagem */}
         <div className="space-y-2">
           <label className={labelStyles}>
             <MessageSquare className="w-3 h-3" /> Descricao_do_Projeto
@@ -141,21 +154,14 @@ export default function Contact() {
           <textarea
             required
             rows={5}
-            placeholder="Descreva os requisitos técnicos e objetivos do seu sistema..."
+            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 })
-            }
+            onChange={(e) => setFormData({ ...formData, message: e.target.value })}
           />
         </div>
 
-        {/* Botão de Submissão */}
-        <motion.div
-          whileHover={{ scale: 1.01 }}
-          whileTap={{ scale: 0.99 }}
-          className="pt-4"
-        >
+        <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"
@@ -163,17 +169,13 @@ export default function Contact() {
             shimmerSize="0.2em"
             disabled={isSubmitting}
           >
-            {/* CONTAINER INTERNO (FAIL-SAFE): 
-    Forçamos um novo contexto flex-row aqui. 
-    O 'w-full' e 'h-full' garantem que ele ocupe todo o botão.
-  */}
             <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">
-                    Enviar request
+                    Executar Request
                   </span>
                   <Send className="w-4 h-4 text-white" />
                 </>
@@ -184,10 +186,10 @@ export default function Contact() {
 
         <footer className="pt-4">
           <p className="text-[10px] text-center text-slate-600 font-mono uppercase tracking-tighter">
-            Qualidade ponta-ponta garantida | Garuva, SC
+            Engenharia de Software de Alta Performance | Garuva, SC
           </p>
         </footer>
       </form>
     </section>
   );
-}
+}
\ No newline at end of file