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

style: tighten contact us page layout and sidebar spacing

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

24
apps/portal/src/features/support/views/PublicContactView.tsx
View File

@ -8,11 +8,11 @@ export function PublicContactView() {
return (
<div className="max-w-6xl mx-auto px-4 pb-0">
{/* Header */}
<div className="text-center mb-12 pt-8">
<div className="text-center mb-10 pt-8">
<div className="inline-flex items-center justify-center w-16 h-16 bg-primary/10 rounded-2xl mb-4 text-primary">
<Send className="h-8 w-8" />
</div>
<h1 className="text-4xl sm:text-5xl font-extrabold text-foreground mb-4 tracking-tight">
<h1 className="text-4xl sm:text-5xl font-extrabold text-foreground mb-3 tracking-tight">
Get in Touch
</h1>
<p className="text-lg text-muted-foreground max-w-2xl mx-auto leading-relaxed">
@ -22,20 +22,20 @@ export function PublicContactView() {
</div>
{/* Two-column layout: Form + Sidebar */}
<div className="grid grid-cols-1 lg:grid-cols-3 gap-10 mb-16">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-14">
{/* Contact Form - takes 2/3 width */}
<div className="lg:col-span-2">
<ContactForm />
</div>
{/* Sidebar - takes 1/3 width */}
<div className="space-y-6">
<div className="space-y-4">
{/* Phone */}
<a
href="tel:0120-660-470"
className="group flex items-center gap-4 bg-card rounded-2xl border border-border/60 p-5 hover:border-primary/40 hover:shadow-md transition-all duration-200"
className="group flex items-center gap-4 bg-card rounded-2xl border border-border/60 p-4 hover:border-primary/40 hover:shadow-md transition-all duration-200"
>
<div className="h-11 w-11 rounded-xl bg-primary/10 flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-white transition-colors shrink-0">
<div className="h-10 w-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-white transition-colors shrink-0">
<Phone className="h-5 w-5" />
</div>
<div>
@ -48,8 +48,8 @@ export function PublicContactView() {
</a>
{/* Live Chat */}
<div className="flex items-center gap-4 bg-card rounded-2xl border border-border/60 p-5">
<div className="h-11 w-11 rounded-xl bg-blue-500/10 flex items-center justify-center text-blue-500 shrink-0">
<div className="flex items-center gap-4 bg-card rounded-2xl border border-border/60 p-4">
<div className="h-10 w-10 rounded-xl bg-blue-500/10 flex items-center justify-center text-blue-500 shrink-0">
<MessageSquare className="h-5 w-5" />
</div>
<div>
@ -61,9 +61,9 @@ export function PublicContactView() {
{/* Email */}
<a
href="mailto:support@assist-solutions.jp"
className="group flex items-center gap-4 bg-card rounded-2xl border border-border/60 p-5 hover:border-emerald-500/40 hover:shadow-md transition-all duration-200"
className="group flex items-center gap-4 bg-card rounded-2xl border border-border/60 p-4 hover:border-emerald-500/40 hover:shadow-md transition-all duration-200"
>
<div className="h-11 w-11 rounded-xl bg-emerald-500/10 flex items-center justify-center text-emerald-500 group-hover:bg-emerald-500 group-hover:text-white transition-colors shrink-0">
<div className="h-10 w-10 rounded-xl bg-emerald-500/10 flex items-center justify-center text-emerald-500 group-hover:bg-emerald-500 group-hover:text-white transition-colors shrink-0">
<Mail className="h-5 w-5" />
</div>
<div>
@ -75,7 +75,7 @@ export function PublicContactView() {
</a>
{/* Business Hours */}
<div className="bg-muted/30 rounded-2xl p-5">
<div className="bg-muted/30 rounded-2xl p-4">
<div className="flex items-center gap-3 mb-3">
<Clock className="h-5 w-5 text-muted-foreground" />
<h3 className="font-bold text-foreground text-sm">Business Hours</h3>
@ -84,7 +84,7 @@ export function PublicContactView() {
</div>
{/* Office Location */}
<div className="bg-card rounded-2xl border border-border/60 p-5">
<div className="bg-card rounded-2xl border border-border/60 p-4">
<div className="flex items-center gap-3 mb-3">
<MapPin className="h-5 w-5 text-primary" />
<h3 className="font-bold text-foreground text-sm">Our Office</h3>