ankhbayar/Assist_Design
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

style: improve landing page contact section hierarchy and compactness

Browse Source
This commit is contained in:
barsa 2026-03-04 15:03:52 +09:00
parent 6de5e1a735
commit cdaac57c26
1 changed files with 28 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
apps/portal/src/features/landing-page/components/ContactSection.tsx
View File

@ -21,39 +21,47 @@ export function ContactSection() {
<h2 className="text-2xl sm:text-3xl font-extrabold text-foreground">
Tell Us What You Need
</h2>
<div className="rounded-2xl bg-card border border-border/60 shadow-sm p-6 sm:p-8">
<div className="grid grid-cols-1 lg:grid-cols-[1.1fr_0.9fr] gap-10 lg:gap-12">
<div className="rounded-2xl bg-card border border-border/60 shadow-sm p-5 sm:p-7">
<div className="grid grid-cols-1 lg:grid-cols-[1.1fr_0.9fr] gap-8 lg:gap-10">
{/* Left: Form + Contact Methods */}
<div className="space-y-6">
<div className="space-y-5">
<div className="flex items-center gap-2 text-primary font-bold text-lg">
<Mail className="h-5 w-5" />
<span>By Online Form (Anytime)</span>
</div>
<ContactForm className="border-0 p-0 rounded-none bg-transparent" />
<div className="flex flex-col gap-3 pt-2">
<div className="inline-flex items-center gap-2 text-primary font-semibold">
<MessageSquare className="h-5 w-5" />
<span>By Chat (Anytime)</span>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-1">
<div className="rounded-xl bg-muted/30 p-4 space-y-1.5">
<div className="inline-flex items-center gap-2 text-primary font-semibold text-sm">
<MessageSquare className="h-4 w-4" />
<span>By Chat (Anytime)</span>
</div>
<p className="text-xs text-muted-foreground leading-relaxed">
Click the &ldquo;Chat Button&rdquo; at the bottom right to reach our team.
</p>
</div>
<p className="text-sm text-muted-foreground">
Click the bottom right &ldquo;Chat Button&rdquo; to reach our team anytime.
</p>
<div className="inline-flex items-center gap-2 text-primary font-semibold">
<PhoneCall className="h-5 w-5" />
<span>By Phone (9:30-18:00 JST)</span>
</div>
<div className="text-sm text-muted-foreground">
<p className="font-semibold text-foreground">Toll Free within Japan</p>
<p className="text-lg font-bold text-primary">0120-660-470</p>
<p className="font-semibold text-foreground mt-1">From Overseas</p>
<p className="text-lg font-bold text-primary">+81-3-3560-1006</p>
<div className="rounded-xl bg-muted/30 p-4 space-y-1.5">
<div className="inline-flex items-center gap-2 text-primary font-semibold text-sm">
<PhoneCall className="h-4 w-4" />
<span>By Phone (9:30-18:00 JST)</span>
</div>
<div className="text-xs text-muted-foreground">
<p className="font-medium text-foreground">
Toll Free:{" "}
<span className="text-sm font-bold text-primary">0120-660-470</span>
</p>
<p className="font-medium text-foreground mt-0.5">
Overseas:{" "}
<span className="text-sm font-bold text-primary">+81-3-3560-1006</span>
</p>
</div>
</div>
</div>
</div>
{/* Right: Map + Address */}
<div className="space-y-6">
<div className="space-y-5">
<div className="w-full rounded-2xl overflow-hidden shadow-md border border-border/60 bg-card aspect-[4/3]">
<iframe
title="Assist Solutions Corp Map"