223 lines
8.3 KiB
TypeScript
223 lines
8.3 KiB
TypeScript
"use client";
|
|
|
|
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";
|
|
|
|
interface FormData {
|
|
name: string;
|
|
email: string;
|
|
subject: string;
|
|
message: string;
|
|
}
|
|
|
|
/**
|
|
* Wrapper Component: Resolve o erro de tipagem TS2322 (IntrinsicAttributes)
|
|
* Estendemos a interface para aceitar propriedades de estilo customizadas.
|
|
*/
|
|
interface ExtendedShimmerProps extends React.ComponentProps<typeof MagicShimmerButton> {
|
|
shimmerColor?: string;
|
|
shimmerSize?: string;
|
|
type?: "button" | "submit" | "reset";
|
|
disabled?: boolean;
|
|
}
|
|
|
|
const CustomShimmerButton = ({
|
|
children,
|
|
className,
|
|
shimmerColor = "#3b82f6",
|
|
shimmerSize = "0.1em",
|
|
...props
|
|
}: ExtendedShimmerProps) => {
|
|
return (
|
|
<MagicShimmerButton
|
|
{...props}
|
|
className={className}
|
|
// @ts-ignore - Ignora restrição de tipos da lib original se necessário
|
|
shimmerColor={shimmerColor}
|
|
shimmerSize={shimmerSize}
|
|
>
|
|
{children}
|
|
</MagicShimmerButton>
|
|
);
|
|
};
|
|
|
|
export default function Contact() {
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [formData, setFormData] = useState<FormData>({
|
|
name: "",
|
|
email: "",
|
|
subject: "full-stack",
|
|
message: "",
|
|
});
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setIsSubmitting(true);
|
|
|
|
await new Promise((resolve) => setTimeout(resolve, 800));
|
|
|
|
// 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 = `*NOVA SOLICITAÇÃO DE PROJETO*
|
|
|
|
*Origem:* Portfólio Profissional
|
|
*Prioridade:* Alta (Lead Qualificado)
|
|
|
|
---
|
|
*CLIENTE:* ${formData.name}
|
|
*EMAIL:* ${formData.email}
|
|
*ÁREA:* ${formData.subject.toUpperCase()}
|
|
|
|
*DESCRIÇÃO:*
|
|
"${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);
|
|
};
|
|
|
|
const inputStyles =
|
|
"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-[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 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>
|
|
|
|
<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-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>
|
|
|
|
<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>
|
|
);
|
|
} |