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