x

apps/website/src/app/[lang]/category/[id]/page.tsx

@@ -122,11 +122,10 @@ export default async function CategoryPage({ params }: { params: Promise<{ id: s
               <Link
                 key={item.id}
                 href={`/category/${item.id}`}
-                className={`rounded-full px-5 py-2 text-xs font-bold uppercase tracking-widest transition ${
-                  isActive
-                    ? 'bg-text-main text-surface-card'
-                    : 'border border-line-primary/20 bg-surface-card text-muted-text hover:border-brand-primary hover:text-brand-primary'
-                }`}
+                className={`rounded-full px-5 py-2 text-xs font-bold uppercase tracking-widest transition ${isActive
+                  ? 'bg-text-main text-surface-card'
+                  : 'border border-line-primary/20 bg-surface-card text-muted-text hover:border-brand-primary hover:text-brand-primary'
+                  }`}
               >
                 {name}
               </Link>

apps/website/src/app/[lang]/contact/page.tsx

@@ -11,6 +11,7 @@ export default function ContactPage() {
   const lang = params?.lang as string || 'en'
   const [form, setForm] = useState<FormState>({ name: '', email: '', subject: '', message: '' })
   const [status, setStatus] = useState<Status>('idle')
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
   const [brandName, setBrandName] = useState('')
   const [socials, setSocials] = useState({ line: '@homaroma', ig: '@homaroma', email: 'hello@homaroma.shop' })
 
@@ -44,9 +45,33 @@ export default function ContactPage() {
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     setStatus('sending')
-    await new Promise(r => setTimeout(r, 1500))
-    setStatus('sent')
-    setForm({ name: '', email: '', subject: '', message: '' })
+    setErrorMessage(null)
+    
+    try {
+      const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3051/api';
+      const res = await fetch(`${apiUrl}/contacts`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ 
+          name: form.name, 
+          email: form.email, 
+          message: `[${form.subject}] ${form.message}` 
+        })
+      });
+      
+      const data = await res.json().catch(() => ({}));
+      
+      if (!res.ok || data.error) {
+        throw new Error(data.error || 'Failed to send message');
+      }
+
+      setStatus('sent')
+      setForm({ name: '', email: '', subject: '', message: '' })
+    } catch (err: any) {
+      console.error(err);
+      setStatus('error')
+      setErrorMessage(err.message || 'An unexpected error occurred. Please try again.')
+    }
   }
 
   return (
@@ -132,6 +157,11 @@ export default function ContactPage() {
                 <textarea required name="message" value={form.message} onChange={handleChange} rows={6} placeholder="Tell us about your inquiry..."
                   className="ui-form-shell-light resize-none" />
               </div>
+              {status === 'error' && errorMessage && (
+                <div className="rounded-lg bg-rose-50 p-4 text-rose-500 text-sm border border-rose-200">
+                  {errorMessage}
+                </div>
+              )}
               <button type="submit" disabled={status === 'sending'}
                 className="ui-form-inline-button w-full">
                 {status === 'sending' ? (

apps/website/src/app/globals.css

@@ -573,6 +573,3 @@ body:has(.announcement-bar) .global-navbar[data-scrolled="false"] {
   top: 44px; /* Adjusts Navbar down when AnnouncementBar is present at the top */
 }
 
-body:has(.announcement-bar) .global-main {
-  padding-top: 116px; /* 72px original pt + 44px AnnouncementBar */
-}