253 lines
11 KiB
TypeScript
253 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { ArrowUpRight, Mail, MapPin } from "lucide-react";
|
|
import type { FormEvent } from "react";
|
|
import { useEffect, useState } from "react";
|
|
import { trackWhatsAppOpen } from "@/lib/analytics";
|
|
import { buildWhatsAppUrl, getWhatsAppDisplayNumber } from "@/lib/whatsapp";
|
|
import WhatsAppLink from "./WhatsAppLink";
|
|
|
|
// WhatsApp brand silhouette from Simple Icons (simple-icons/simple-icons).
|
|
function WhatsAppMark({ className }: { className: string }) {
|
|
return (
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
className={className}
|
|
aria-hidden="true"
|
|
focusable="false"
|
|
>
|
|
<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>
|
|
);
|
|
}
|
|
|
|
export default function Contact() {
|
|
const [whatsAppDisplay, setWhatsAppDisplay] = useState("WhatsApp");
|
|
useEffect(() => {
|
|
setWhatsAppDisplay(getWhatsAppDisplayNumber());
|
|
}, []);
|
|
|
|
const fieldClassName =
|
|
"mt-sp-2 w-full min-w-0 rounded-lg border border-white/15 bg-black/25 px-sp-4 py-sp-3 font-display text-base leading-6 text-white placeholder:text-white/40 focus-visible:border-[var(--slash)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--slash)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--ink)]";
|
|
const labelClassName = "block font-display text-sm font-medium text-white/85";
|
|
const [formData, setFormData] = useState({
|
|
name: "",
|
|
email: "",
|
|
subject: "Sistemas web sob medida",
|
|
message: "",
|
|
});
|
|
|
|
const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
if (!e.currentTarget.reportValidity()) return;
|
|
const messageTemplate = `Olá, Evandro! Quero conversar sobre um projeto.\n\nNome: ${formData.name}\nE-mail: ${formData.email}\nTipo de projeto: ${formData.subject}\n\nContexto, objetivo e prazo:\n${formData.message}\n\nContato iniciado pelo site evandro.dev.br.`;
|
|
window.open(
|
|
buildWhatsAppUrl(messageTemplate),
|
|
"_blank",
|
|
"noopener,noreferrer",
|
|
);
|
|
trackWhatsAppOpen({ service: "Contato", placement: "contact_form" });
|
|
};
|
|
|
|
return (
|
|
<section
|
|
id="contact"
|
|
aria-labelledby="contact-title"
|
|
className="ds-section ds-section-dark"
|
|
>
|
|
<div className="ds-section-shell grid items-start gap-sp-10 lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)] lg:gap-sp-16">
|
|
<div className="min-w-0">
|
|
<p className="ds-eyebrow">Contato</p>
|
|
<h2
|
|
id="contact-title"
|
|
className="ds-section-title mt-sp-4 max-w-[19ch] text-balance"
|
|
>
|
|
Vamos conversar sobre o que sua empresa precisa.
|
|
</h2>
|
|
<p className="mt-sp-5 max-w-[44ch] font-display text-base leading-8 text-white/70">
|
|
Conte o que você quer resolver. Pode ser um projeto novo, uma
|
|
melhoria ou uma integração. Não precisa chegar com a solução
|
|
definida.
|
|
</p>
|
|
<div className="mt-sp-8 border-l-2 border-[var(--slash)] pl-sp-5">
|
|
<h3 className="font-display text-lg font-semibold text-white">
|
|
Você fala direto com quem desenvolve.
|
|
</h3>
|
|
<p className="mt-sp-2 max-w-[44ch] font-display text-sm leading-7 text-white/65">
|
|
Sou Evandro. A primeira conversa é para entender sua necessidade;
|
|
escopo, prazo e proposta vêm depois.
|
|
</p>
|
|
</div>
|
|
<div className="mt-sp-8 divide-y divide-white/10 border-y border-white/10">
|
|
<WhatsAppLink
|
|
service="Contato"
|
|
placement="contact_direct"
|
|
className="group flex min-h-20 items-center gap-sp-4 rounded-sm py-sp-5 text-white no-underline"
|
|
>
|
|
<span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-[#25d366]/10 text-[#25d366]">
|
|
<WhatsAppMark className="h-6 w-6" />
|
|
</span>
|
|
<span className="min-w-0 flex-1 font-display">
|
|
<span className="block text-sm font-semibold text-white group-hover:text-[#25d366]">
|
|
Prefere conversar direto?
|
|
</span>
|
|
<span className="mt-1 block text-sm text-white/65">
|
|
WhatsApp · {whatsAppDisplay}
|
|
</span>
|
|
</span>
|
|
<ArrowUpRight
|
|
className="h-5 w-5 shrink-0 text-white/50 group-hover:text-[#25d366]"
|
|
aria-hidden="true"
|
|
/>
|
|
</WhatsAppLink>
|
|
<a
|
|
href="mailto:[email protected]"
|
|
className="group flex min-h-16 items-center gap-sp-4 rounded-sm py-sp-5 text-white/65 no-underline hover:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[var(--slash)]"
|
|
>
|
|
<Mail className="h-5 w-5 shrink-0" aria-hidden="true" />
|
|
<span className="min-w-0 break-all font-display text-sm">
|
|
evandrofonsecajunior@gmail.com
|
|
</span>
|
|
<ArrowUpRight
|
|
className="ml-auto h-4 w-4 shrink-0"
|
|
aria-hidden="true"
|
|
/>
|
|
</a>
|
|
</div>
|
|
<p className="mt-sp-5 flex items-start gap-sp-3 font-display text-sm leading-6 text-white/55">
|
|
<MapPin className="mt-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
|
|
Garuva, Santa Catarina. Atendimento remoto em todo o Brasil.
|
|
</p>
|
|
</div>
|
|
|
|
<form
|
|
onSubmit={handleSubmit}
|
|
aria-labelledby="contact-form-title"
|
|
className="min-w-0 rounded-2xl border border-white/12 bg-white/[0.035] p-sp-5 sm:p-sp-8"
|
|
>
|
|
<div className="mb-sp-6 flex items-start gap-sp-4 border-b border-white/10 pb-sp-6">
|
|
<span className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-[#25d366] text-[#071b10]">
|
|
<WhatsAppMark className="h-7 w-7" />
|
|
</span>
|
|
<div>
|
|
<h3
|
|
id="contact-form-title"
|
|
className="font-display text-xl font-semibold leading-7 text-white"
|
|
>
|
|
Prepare sua mensagem
|
|
</h3>
|
|
<p className="mt-1 font-display text-sm leading-6 text-white/65">
|
|
Você revisa no WhatsApp antes de enviar.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-sp-5">
|
|
<div className="grid gap-sp-5 xl:grid-cols-2">
|
|
<div>
|
|
<label htmlFor="contact-name" className={labelClassName}>
|
|
Nome completo
|
|
</label>
|
|
<input
|
|
id="contact-name"
|
|
name="name"
|
|
required
|
|
type="text"
|
|
autoComplete="name"
|
|
placeholder="Como posso te chamar?"
|
|
value={formData.name}
|
|
onChange={(e) =>
|
|
setFormData({ ...formData, name: e.target.value })
|
|
}
|
|
className={fieldClassName}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="contact-email" className={labelClassName}>
|
|
E-mail
|
|
</label>
|
|
<input
|
|
id="contact-email"
|
|
name="email"
|
|
required
|
|
type="email"
|
|
autoComplete="email"
|
|
placeholder="[email protected]"
|
|
value={formData.email}
|
|
onChange={(e) =>
|
|
setFormData({ ...formData, email: e.target.value })
|
|
}
|
|
className={fieldClassName}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="contact-subject" className={labelClassName}>
|
|
Tipo de projeto
|
|
</label>
|
|
<select
|
|
id="contact-subject"
|
|
name="subject"
|
|
value={formData.subject}
|
|
onChange={(e) =>
|
|
setFormData({ ...formData, subject: e.target.value })
|
|
}
|
|
className={`${fieldClassName} [color-scheme:dark]`}
|
|
>
|
|
<option value="Sistemas web sob medida">
|
|
Sistemas web sob medida
|
|
</option>
|
|
<option value="Aplicativos">Aplicativos</option>
|
|
<option value="Integrações e automações">
|
|
Integrações e automações
|
|
</option>
|
|
<option value="Evolução de um sistema existente">
|
|
Evolução de um sistema existente
|
|
</option>
|
|
<option value="Ainda preciso definir">
|
|
Ainda preciso definir
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="contact-message" className={labelClassName}>
|
|
Contexto do projeto
|
|
</label>
|
|
<textarea
|
|
id="contact-message"
|
|
name="message"
|
|
required
|
|
rows={4}
|
|
autoComplete="off"
|
|
placeholder="O que você precisa resolver? Qual resultado espera e existe um prazo?"
|
|
aria-describedby="contact-privacy-note"
|
|
value={formData.message}
|
|
onChange={(e) =>
|
|
setFormData({ ...formData, message: e.target.value })
|
|
}
|
|
className={`${fieldClassName} min-h-32 resize-y`}
|
|
/>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
className="flex min-h-14 w-full items-center justify-center gap-sp-3 rounded-lg bg-[#25d366] px-sp-4 py-sp-4 font-display text-base font-semibold leading-6 text-[#071b10] transition-colors hover:bg-[#54e58b] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#25d366] motion-reduce:transition-none"
|
|
>
|
|
<WhatsAppMark className="h-6 w-6 shrink-0" />
|
|
Continuar no WhatsApp
|
|
<ArrowUpRight className="h-5 w-5 shrink-0" aria-hidden="true" />
|
|
</button>
|
|
<p
|
|
id="contact-privacy-note"
|
|
className="font-display text-xs leading-6 text-white/55"
|
|
>
|
|
Nada é enviado automaticamente. O WhatsApp abre com a mensagem
|
|
para você revisar. Não inclua senhas nem dados pessoais de
|
|
clientes.
|
|
</p>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|