62 lines
3.6 KiB
TypeScript
62 lines
3.6 KiB
TypeScript
import { MapPin, Phone, QrCode } from "lucide-react";
|
|
import Image from "next/image";
|
|
import { business } from "@/config/business";
|
|
import type { Messages } from "@/messages";
|
|
import AnimatedSection from "./AnimatedSection";
|
|
import PhysicsButton from "./PhysicsButton";
|
|
|
|
export default function ContactSection({ t, whatsappUrl }: { t: Messages; whatsappUrl: string }) {
|
|
return (
|
|
<AnimatedSection id="contact" className="px-4 pb-16 pt-6 sm:px-6 sm:py-20">
|
|
<div className="mx-auto grid max-w-7xl gap-6 lg:grid-cols-[1.08fr_0.92fr]">
|
|
<div className="rounded-[3rem] bg-white p-8 shadow-glass sm:p-12">
|
|
<p className="mb-4 text-xs font-semibold uppercase tracking-[0.28em] text-optical/75">{t.contact.eyebrow}</p>
|
|
<h2 className="text-4xl font-semibold tracking-[-0.055em] text-ink sm:text-6xl">{t.contact.title}</h2>
|
|
<p className="mt-6 max-w-2xl text-base leading-8 text-ink/62 sm:text-lg">{t.contact.body}</p>
|
|
<div className="mt-9 flex flex-col gap-3 sm:flex-row">
|
|
<PhysicsButton href={whatsappUrl} external className="rounded-full bg-ink px-7 py-4 text-sm font-semibold text-white shadow-soft transition-colors hover:bg-optical">
|
|
{t.contact.whatsapp}
|
|
</PhysicsButton>
|
|
<PhysicsButton href={`tel:${business.phone}`} className="rounded-full border border-ink/10 bg-smoke px-7 py-4 text-sm font-semibold text-ink transition-colors hover:bg-white">
|
|
{t.contact.call}
|
|
</PhysicsButton>
|
|
<PhysicsButton href={business.mapUrl} external className="rounded-full border border-ink/10 bg-smoke px-7 py-4 text-sm font-semibold text-ink transition-colors hover:bg-white">
|
|
{t.contact.visit}
|
|
</PhysicsButton>
|
|
</div>
|
|
|
|
<div className="mt-10 grid gap-4 sm:grid-cols-2">
|
|
<Info label={t.contact.phoneLabel} value={business.phone} icon={<Phone size={18} />} />
|
|
<Info label={t.contact.whatsappLabel} value={business.whatsapp} icon={<Phone size={18} />} />
|
|
<Info label={t.contact.addressLabel} value={business.displayAddress} icon={<MapPin size={18} />} wide />
|
|
<Info label={t.contact.hoursLabel} value={t.contact.hoursValue} icon={<QrCode size={18} />} wide accent />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="glass flex flex-col justify-between rounded-[3rem] p-7">
|
|
<div className="relative z-[3] aspect-square overflow-hidden rounded-[2.2rem] bg-white p-8 shadow-sm">
|
|
<span className="floating-sheen" />
|
|
<Image src={business.assets.mapQr} alt={t.contact.qr} fill sizes="(min-width: 1024px) 38vw, 90vw" className="object-contain p-10" />
|
|
</div>
|
|
<div className="relative z-[3] mt-6 rounded-[2rem] bg-white/70 p-6">
|
|
<p className="text-sm font-semibold text-ink">{t.contact.qr}</p>
|
|
<p className="mt-3 text-sm leading-7 text-ink/58">{business.displayAddress}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AnimatedSection>
|
|
);
|
|
}
|
|
|
|
function Info({ label, value, icon, wide = false, accent = false }: { label: string; value: string; icon: React.ReactNode; wide?: boolean; accent?: boolean }) {
|
|
return (
|
|
<div className={`rounded-[1.6rem] border p-5 ${wide ? "sm:col-span-2" : ""} ${accent ? "border-optical/20 bg-optical/10 sm:p-6" : "border-ink/8 bg-smoke/80"}`}>
|
|
<div className="mb-3 flex items-center gap-2 text-optical">
|
|
{icon}
|
|
<p className="text-xs font-semibold uppercase tracking-[0.18em]">{label}</p>
|
|
</div>
|
|
<p className={`${accent ? "text-lg leading-8 text-ink sm:text-xl" : "text-sm leading-7 text-ink/72"} font-semibold`}>{value}</p>
|
|
</div>
|
|
);
|
|
}
|