admin/homaroma
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

fix(spa): redesign remaining pages to light theme

Browse Source
This commit is contained in:
Your Name committed 2026-06-06 19:24:25 +07:00
1 parent d8bff72e4e
commit 15cb147c81
8 files changed
+89 -53
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/spa/src/pages/ContactPage.tsx
+14 -14
View File
@@ -35,8 +35,8 @@ export default function ContactPage() {
<Navbar categories={categories} />
{/* Header */}
<div className="pt-32 pb-16 px-6 text-center space-y-4 border-b border-white/5 bg-night-800/20">
<p className="text-cyan-glow uppercase tracking-[0.4em] text-xs font-semibold opacity-70">Get in Touch</p>
<div className="pt-32 pb-16 px-6 text-center space-y-4 border-b border-spa-stone/10 bg-white border-b border-spa-stone/10">
<p className="text-spa-forest uppercase tracking-[0.4em] text-xs font-semibold opacity-70">Get in Touch</p>
<h1 className="text-5xl font-bold">Contact Us</h1>
<p className="text-slate-400 max-w-lg mx-auto">
Have a question, custom request, or partnership idea? We'd love to hear from you.
@@ -56,32 +56,32 @@ export default function ContactPage() {
{ icon: '📍', label: 'Studio', value: 'Bangkok, Thailand', href: '#' },
].map(item => (
<a key={item.label} href={item.href} className="flex items-start gap-4 group">
<div className="glass w-10 h-10 rounded-xl flex items-center justify-center text-lg shrink-0 group-hover:bg-cyan-glow/10 transition-colors">
<div className="bg-white shadow-sm border border-spa-stone/10 w-10 h-10 rounded-xl flex items-center justify-center text-lg shrink-0 group-hover:bg-spa-forest/10 transition-colors">
{item.icon}
</div>
<div>
<p className="text-xs text-slate-500 uppercase tracking-widest">{item.label}</p>
<p className="text-white text-sm font-medium group-hover:text-cyan-glow transition-colors">{item.value}</p>
<p className="text-white text-sm font-medium group-hover:text-spa-forest transition-colors">{item.value}</p>
</div>
</a>
))}
</div>
</div>
<div className="glass rounded-2xl p-6 border border-white/5 space-y-3">
<div className="bg-white shadow-sm border border-spa-stone/10 rounded-2xl p-6 border border-spa-stone/10 space-y-3">
<h3 className="font-bold text-sm uppercase tracking-widest">Response Time</h3>
<div className="space-y-2 text-sm">
<div className="flex justify-between">
<span className="text-slate-400">Email</span>
<span className="text-cyan-glow font-medium">~2 hours</span>
<span className="text-spa-forest font-medium">~2 hours</span>
</div>
<div className="flex justify-between">
<span className="text-slate-400">LINE</span>
<span className="text-cyan-glow font-medium">~30 minutes</span>
<span className="text-spa-forest font-medium">~30 minutes</span>
</div>
<div className="flex justify-between">
<span className="text-slate-400">Instagram DM</span>
<span className="text-cyan-glow font-medium">~4 hours</span>
<span className="text-spa-forest font-medium">~4 hours</span>
</div>
</div>
<p className="text-[10px] text-slate-600 pt-2 uppercase tracking-wider">Mon–Sat, 9:00–18:00 (ICT)</p>
@@ -98,7 +98,7 @@ export default function ContactPage() {
<p className="text-slate-400">Thank you for reaching out. We'll get back to you within 2 hours.</p>
<button
onClick={() => setStatus('idle')}
className="mt-4 px-8 py-3 glass border border-white/10 hover:border-cyan-glow/30 font-bold uppercase tracking-widest text-xs transition-all rounded-lg"
className="mt-4 px-8 py-3 bg-white shadow-sm border border-spa-stone/10 border border-spa-stone/10 hover:border-spa-forest font-bold uppercase tracking-widest text-xs transition-all rounded-lg"
>
Send Another
</button>
@@ -116,7 +116,7 @@ export default function ContactPage() {
value={form.name}
onChange={handleChange}
placeholder="Your name"
className="w-full glass border border-white/10 focus:border-cyan-glow/40 rounded-xl px-4 py-3.5 bg-transparent outline-none text-sm text-white placeholder-slate-600 transition-colors"
className="w-full bg-white shadow-sm border border-spa-stone/10 border border-spa-stone/10 focus:border-spa-forest rounded-xl px-4 py-3.5 bg-transparent outline-none text-sm text-white placeholder-slate-600 transition-colors"
/>
</div>
<div className="space-y-2">
@@ -128,7 +128,7 @@ export default function ContactPage() {
value={form.email}
onChange={handleChange}
placeholder="your@email.com"
className="w-full glass border border-white/10 focus:border-cyan-glow/40 rounded-xl px-4 py-3.5 bg-transparent outline-none text-sm text-white placeholder-slate-600 transition-colors"
className="w-full bg-white shadow-sm border border-spa-stone/10 border border-spa-stone/10 focus:border-spa-forest rounded-xl px-4 py-3.5 bg-transparent outline-none text-sm text-white placeholder-slate-600 transition-colors"
/>
</div>
</div>
@@ -139,7 +139,7 @@ export default function ContactPage() {
name="subject"
value={form.subject}
onChange={handleChange}
className="w-full glass border border-white/10 focus:border-cyan-glow/40 rounded-xl px-4 py-3.5 bg-night-900 outline-none text-sm text-white transition-colors"
className="w-full bg-white shadow-sm border border-spa-stone/10 border border-spa-stone/10 focus:border-spa-forest rounded-xl px-4 py-3.5 bg-white outline-none text-sm text-white transition-colors"
>
<option value="" disabled>Select a subject</option>
{SUBJECTS.map(s => <option key={s} value={s}>{s}</option>)}
@@ -154,13 +154,13 @@ export default function ContactPage() {
onChange={handleChange}
rows={6}
placeholder="Tell us about your inquiry..."
className="w-full glass border border-white/10 focus:border-cyan-glow/40 rounded-xl px-4 py-3.5 bg-transparent outline-none text-sm text-white placeholder-slate-600 resize-none transition-colors"
className="w-full bg-white shadow-sm border border-spa-stone/10 border border-spa-stone/10 focus:border-spa-forest rounded-xl px-4 py-3.5 bg-transparent outline-none text-sm text-white placeholder-slate-600 resize-none transition-colors"
/>
</div>
<button
type="submit"
disabled={status === 'sending'}
className="w-full py-4 bg-white text-night-900 font-bold uppercase tracking-widest text-sm rounded-xl hover:bg-cyan-glow hover:shadow-[0_0_25px_rgba(102,252,241,0.4)] transition-all duration-500 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-3"
className="w-full py-4 bg-white text-spa-forest font-bold uppercase tracking-widest text-sm rounded-xl hover:bg-spa-forest text-white hover:shadow-[0_0_25px_rgba(102,252,241,0.4)] transition-all duration-500 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-3"
>
{status === 'sending' ? (
<>