oimwiodev/New-Optic
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases 1 Wiki Activity

Refine contact and trust UI

Browse Source
This commit is contained in:
OpenCode
2026-05-16 14:07:03 +01:00
parent 256c6ffb97
commit 4d3d9fd8d6
6 changed files with 24 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/ContactSection.tsx
View File

@@ -29,7 +29,7 @@ export default function ContactSection({ t, whatsappUrl }: { t: Messages; whatsa
<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} />} />
<Info label={t.contact.hoursLabel} value={t.contact.hoursValue} icon={<QrCode size={18} />} wide accent />
</div>
</div>
@@ -48,14 +48,14 @@ export default function ContactSection({ t, whatsappUrl }: { t: Messages; whatsa
);
}
function Info({ label, value, icon, wide = false }: { label: string; value: string; icon: React.ReactNode; wide?: boolean }) {
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 border-ink/8 bg-smoke/80 p-5 ${wide ? "sm:col-span-2" : ""}`}>
<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="text-sm font-semibold leading-7 text-ink/72">{value}</p>
<p className={`${accent ? "text-lg leading-8 text-ink sm:text-xl" : "text-sm leading-7 text-ink/72"} font-semibold`}>{value}</p>
</div>
);
}