Polish pass: remove testimonial, mailto CTA, refine spacing and typography: Contact.tsx
This commit is contained in:
parent
6c70533a2a
commit
ccaaffe04b
1 changed files with 22 additions and 27 deletions
|
|
@ -24,18 +24,18 @@ function LinkedinIcon({ size = 20, className = "" }: { size?: number; className?
|
|||
|
||||
export default function Contact() {
|
||||
return (
|
||||
<section id="contact" className="py-28 md:py-36 bg-white">
|
||||
<section id="contact" className="py-24 md:py-32 bg-white">
|
||||
<div className="max-w-6xl mx-auto px-6">
|
||||
<ScrollReveal>
|
||||
<div className="max-w-3xl mx-auto text-center mb-16">
|
||||
<div className="w-10 h-px bg-accent mx-auto mb-6" />
|
||||
<div className="max-w-2xl mx-auto text-center mb-14">
|
||||
<div className="w-8 h-px bg-accent mx-auto mb-6" />
|
||||
<p className="font-mono text-[10px] tracking-[0.3em] uppercase text-accent mb-4">
|
||||
Contact
|
||||
</p>
|
||||
<h2 className="text-3xl md:text-4xl font-semibold text-primary leading-tight mb-6">
|
||||
<h2 className="text-3xl md:text-4xl font-semibold text-primary leading-tight mb-5">
|
||||
Let's build something.
|
||||
</h2>
|
||||
<p className="text-muted leading-relaxed">
|
||||
<p className="text-muted leading-relaxed text-[15px]">
|
||||
Whether you're planning a new broadcast facility, upgrading
|
||||
existing infrastructure, or exploring cloud and IP-based production
|
||||
workflows, I'd love to discuss your project.
|
||||
|
|
@ -43,15 +43,15 @@ export default function Contact() {
|
|||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-5 max-w-3xl mx-auto mb-16">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 max-w-2xl mx-auto mb-14">
|
||||
<ScrollReveal delay={0}>
|
||||
<a
|
||||
href="mailto:zgaetano@wilddragon.net"
|
||||
className="group flex flex-col items-center p-8 rounded-xl border border-neutral-200/80 hover:border-accent/20 hover:shadow-lg hover:shadow-neutral-200/50 transition-all duration-300 bg-white"
|
||||
className="group flex flex-col items-center p-7 rounded-xl border border-neutral-200/80 hover:border-accent/20 hover:shadow-md hover:shadow-neutral-200/60 transition-all duration-300 bg-white"
|
||||
>
|
||||
<div className="w-12 h-12 rounded-full bg-neutral-50 border border-neutral-100 flex items-center justify-center mb-4 group-hover:bg-accent/5 group-hover:border-accent/20 transition-all duration-300">
|
||||
<div className="w-11 h-11 rounded-full bg-neutral-50 border border-neutral-100 flex items-center justify-center mb-4 group-hover:bg-accent/5 group-hover:border-accent/20 transition-all duration-300">
|
||||
<Mail
|
||||
size={18}
|
||||
size={16}
|
||||
className="text-neutral-400 group-hover:text-accent transition-colors duration-300"
|
||||
strokeWidth={1.5}
|
||||
/>
|
||||
|
|
@ -66,29 +66,25 @@ export default function Contact() {
|
|||
href="https://www.linkedin.com/in/zachary-gaetano-05962386/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="group flex flex-col items-center p-8 rounded-xl border border-neutral-200/80 hover:border-accent/20 hover:shadow-lg hover:shadow-neutral-200/50 transition-all duration-300 bg-white"
|
||||
className="group flex flex-col items-center p-7 rounded-xl border border-neutral-200/80 hover:border-accent/20 hover:shadow-md hover:shadow-neutral-200/60 transition-all duration-300 bg-white"
|
||||
>
|
||||
<div className="w-12 h-12 rounded-full bg-neutral-50 border border-neutral-100 flex items-center justify-center mb-4 group-hover:bg-accent/5 group-hover:border-accent/20 transition-all duration-300">
|
||||
<div className="w-11 h-11 rounded-full bg-neutral-50 border border-neutral-100 flex items-center justify-center mb-4 group-hover:bg-accent/5 group-hover:border-accent/20 transition-all duration-300">
|
||||
<LinkedinIcon
|
||||
size={18}
|
||||
size={16}
|
||||
className="text-neutral-400 group-hover:text-accent transition-colors duration-300"
|
||||
/>
|
||||
</div>
|
||||
<span className="text-sm font-medium text-primary mb-1">
|
||||
LinkedIn
|
||||
</span>
|
||||
<span className="text-sm font-medium text-primary mb-1">LinkedIn</span>
|
||||
<span className="text-xs text-muted">Zachary Gaetano</span>
|
||||
</a>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={160}>
|
||||
<div className="flex flex-col items-center p-8 rounded-xl border border-neutral-200/80 bg-white">
|
||||
<div className="w-12 h-12 rounded-full bg-neutral-50 border border-neutral-100 flex items-center justify-center mb-4">
|
||||
<MapPin size={18} className="text-neutral-400" strokeWidth={1.5} />
|
||||
<div className="flex flex-col items-center p-7 rounded-xl border border-neutral-100 bg-white">
|
||||
<div className="w-11 h-11 rounded-full bg-neutral-50 border border-neutral-100 flex items-center justify-center mb-4">
|
||||
<MapPin size={16} className="text-neutral-300" strokeWidth={1.5} />
|
||||
</div>
|
||||
<span className="text-sm font-medium text-primary mb-1">
|
||||
Location
|
||||
</span>
|
||||
<span className="text-sm font-medium text-primary mb-1">Location</span>
|
||||
<span className="text-xs text-muted">Washington, DC Area</span>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
|
@ -97,8 +93,7 @@ export default function Contact() {
|
|||
{/* CTA Banner */}
|
||||
<ScrollReveal delay={200}>
|
||||
<div className="relative overflow-hidden rounded-2xl bg-primary p-10 md:p-14 text-center">
|
||||
{/* Subtle pattern */}
|
||||
<div className="absolute inset-0 opacity-[0.04]">
|
||||
<div className="absolute inset-0 opacity-[0.03]">
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
|
|
@ -108,19 +103,19 @@ export default function Contact() {
|
|||
/>
|
||||
</div>
|
||||
<div className="relative z-10">
|
||||
<h3 className="text-2xl md:text-3xl font-semibold text-white mb-4">
|
||||
<h3 className="text-2xl md:text-3xl font-semibold text-white mb-3">
|
||||
Ready to start your next project?
|
||||
</h3>
|
||||
<p className="text-neutral-400 mb-8 max-w-lg mx-auto">
|
||||
<p className="text-neutral-500 mb-8 max-w-md mx-auto text-[15px] leading-relaxed">
|
||||
From initial concept through commissioning and training, I bring
|
||||
a complete lifecycle approach to every facility I design.
|
||||
</p>
|
||||
<a
|
||||
href="mailto:zgaetano@wilddragon.net"
|
||||
className="inline-flex items-center gap-2 px-8 py-3.5 bg-accent text-white text-sm font-medium rounded-md hover:bg-accent-light transition-all duration-200 hover:shadow-lg hover:shadow-accent/20 group"
|
||||
className="inline-flex items-center gap-2 px-7 py-3 bg-accent text-white text-sm font-medium rounded-md hover:bg-accent-light transition-all duration-200 hover:shadow-lg hover:shadow-accent/20 group"
|
||||
>
|
||||
Start a Conversation
|
||||
<ArrowRight size={15} className="group-hover:translate-x-1 transition-transform duration-200" />
|
||||
<ArrowRight size={14} className="group-hover:translate-x-1 transition-transform duration-200" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue