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 */
-}

apps/website/src/components/dynamic/DynamicPageRenderer.tsx

@@ -9,6 +9,7 @@ import { getCategoryImage } from '@homaroma/types'
 import ProductCard from '../ProductCard'
 import { localizedFromRecord, resolveCategoryName, resolveLocalized, toRecord } from '../../lib/localization'
 import { useLang } from '../../hooks/useLang'
+import { useTranslation } from 'react-i18next'
 import { Swiper, SwiperSlide } from 'swiper/react'
 import { Autoplay } from 'swiper/modules'
 import 'swiper/css'
@@ -56,18 +57,7 @@ function renderAccentTitle(text: string, accentClassName = 'ui-accent-text') {
   })
 }
 
-function heroLearnMoreText(lang: string) {
-  const labels: Record<string, string> = {
-    th: 'ดูรายละเอียดเพิ่มเติม',
-    en: 'Learn More',
-    ja: '詳しく見る',
-    zh: '了解更多',
-    vi: 'Tìm hiểu thêm',
-    ko: '자세히 보기',
-  }
 
-  return labels[lang] ?? labels.en
-}
 
 function AnnouncementBar({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
   const i18nLang = useLang()
@@ -103,6 +93,7 @@ function AnnouncementBar({ payload, lang }: { payload: Record<string, unknown>,
 }
 
 function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
+  const { t } = useTranslation()
   const i18nLang = useLang()
   const resolvedLang = lang === 'all' ? i18nLang : lang
   const tagline = localizedFromRecord(payload, 'tagline', resolvedLang)
@@ -149,7 +140,7 @@ function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang
               href="#categories"
               className="ui-hero-link group"
             >
-              {heroLearnMoreText(resolvedLang)}
+              {t('dynamic.heroLearnMore', { lng: resolvedLang })}
               <span className="transition-transform group-hover:translate-x-1">→</span>
             </a>
           </div>
@@ -169,6 +160,7 @@ function CategoriesSection({
   lang: string
 }) {
   const i18nLang = useLang()
+  const { t } = useTranslation()
   const resolvedLang = lang === 'all' ? i18nLang : lang
   const title = localizedFromRecord(payload, 'title', resolvedLang) || 'Our Collections'
   const subtitle = localizedFromRecord(payload, 'subtitle', resolvedLang)
@@ -176,14 +168,6 @@ function CategoriesSection({
   const payloadCategories = getCategoriesFromPayload(payload)
   const sourceCategories = payloadCategories.length ? payloadCategories : categories
   const displayed = categoryIds.length ? sourceCategories.filter((category) => categoryIds.includes(category.id)) : sourceCategories
-  const productsLabel: Record<string, string> = {
-    th: 'สินค้า',
-    en: 'Products',
-    ja: '商品',
-    zh: '商品',
-    vi: 'Sản phẩm',
-    ko: '상품',
-  }
 
   return (
     <section id="categories" className="bg-surface-page ui-section-band">
@@ -214,7 +198,7 @@ function CategoriesSection({
                   <span className="block text-lg font-semibold">{name}</span>
                   {category._count && (
                     <span className="text-sm text-white/90">
-                      {category._count.products} {productsLabel[resolvedLang] ?? productsLabel.en}
+                      {category._count.products} {t('dynamic.products', { lng: resolvedLang })}
                     </span>
                   )}
                 </div>
@@ -228,27 +212,12 @@ function CategoriesSection({
 }
 
 function ProductsSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
+  const { t } = useTranslation()
   const i18nLang = useLang()
   const resolvedLang = lang === 'all' ? i18nLang : lang
   const title = localizedFromRecord(payload, 'title', resolvedLang) || 'Featured Picks'
   const subtitle = localizedFromRecord(payload, 'subtitle', resolvedLang)
   const products = getProducts(payload)
-  const viewAllLabel: Record<string, string> = {
-    th: 'ดูทั้งหมด →',
-    en: 'View All Collection →',
-    ja: 'すべて見る →',
-    zh: '查看全部 →',
-    vi: 'Xem tất cả →',
-    ko: '전체 보기 →',
-  }
-  const emptyLabel: Record<string, string> = {
-    th: 'ไม่พบสินค้าในหมวดนี้',
-    en: 'No products found in this section.',
-    ja: 'このセクションには商品がありません。',
-    zh: '此区域中没有找到产品。',
-    vi: 'Không tìm thấy sản phẩm nào trong mục này.',
-    ko: '이 섹션에서 찾을 수 있는 상품이 없습니다.',
-  }
 
   return (
     <section className="bg-surface-page ui-section-band">
@@ -259,7 +228,7 @@ function ProductsSection({ payload, lang }: { payload: Record<string, unknown>,
             {subtitle && <p className="mt-2 ui-section-subtitle">{subtitle}</p>}
           </div>
           <Link href="/shop" className="ui-section-link">
-            {viewAllLabel[resolvedLang] ?? viewAllLabel.en}
+            {t('dynamic.viewAll', { lng: resolvedLang })}
           </Link>
         </div>
         {products.length ? (
@@ -268,7 +237,7 @@ function ProductsSection({ payload, lang }: { payload: Record<string, unknown>,
           </div>
         ) : (
           <p className="ui-section-card bg-surface-card p-8 text-center text-muted-text">
-            {emptyLabel[resolvedLang] ?? emptyLabel.en}
+            {t('dynamic.emptyProducts', { lng: resolvedLang })}
           </p>
         )}
       </div>
@@ -450,6 +419,7 @@ function EditorialCarouselSection({ payload, lang }: { payload: Record<string, u
 }
 
 function HeroArticleSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
+  const { t } = useTranslation()
   const i18nLang = useLang()
   const resolvedLang = lang === 'all' ? i18nLang : lang
   const title = localizedFromRecord(payload, 'title', resolvedLang) || 'Scent Guide Article'
@@ -466,14 +436,6 @@ function HeroArticleSection({ payload, lang }: { payload: Record<string, unknown
     : typeof payload.publishDate === 'string'
       ? payload.publishDate
       : ''
-  const authorPrefix: Record<string, string> = {
-    th: 'โดย',
-    en: 'By',
-    ja: '著者',
-    zh: '作者',
-    vi: 'Bởi',
-    ko: '작성자',
-  }
 
   return (
     <section className="ui-hero-shell min-h-[60vh] px-6 py-24 text-center md:min-h-[76vh]">
@@ -489,7 +451,7 @@ function HeroArticleSection({ payload, lang }: { payload: Record<string, unknown
         {subtitle && <p className="mx-auto max-w-2xl text-lg text-surface-card md:text-xl">{subtitle}</p>}
         {(author || date) && (
           <p className="text-xs font-bold uppercase tracking-[0.22em] text-surface-card">
-            {[author && `${authorPrefix[resolvedLang] ?? authorPrefix.en} ${author}`, date].filter(Boolean).join(' / ')}
+            {[author && `${t('dynamic.authorBy', { lng: resolvedLang })} ${author}`, date].filter(Boolean).join(' / ')}
           </p>
         )}
       </div>
@@ -498,23 +460,16 @@ function HeroArticleSection({ payload, lang }: { payload: Record<string, unknown
 }
 
 function ScentNotesBreakdownSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
+  const { t } = useTranslation()
   const i18nLang = useLang()
   const resolvedLang = lang === 'all' ? i18nLang : lang
   const title = localizedFromRecord(payload, 'title', resolvedLang) || 'Scent Notes'
   const description = localizedFromRecord(payload, 'description', resolvedLang)
-  const noteLabels: Record<string, Record<string, string>> = {
-    th: { top: 'กลิ่นเปิด', heart: 'กลิ่นกลาง', base: 'กลิ่นฐาน' },
-    en: { top: 'Top Notes', heart: 'Heart Notes', base: 'Base Notes' },
-    ja: { top: 'トップノート', heart: 'ミドルノート', base: 'ベースノート' },
-    zh: { top: '前调', heart: '中调', base: '后调' },
-    vi: { top: 'Hương đầu', heart: 'Hương giữa', base: 'Hương cuối' },
-    ko: { top: '탑 노트', heart: '미들 노트', base: '베이스 노트' },
-  }
-  const labels = noteLabels[resolvedLang] ?? noteLabels.en
+  
   const notes = [
-    [labels.top, optionalText(payload.topNotes, resolvedLang) || 'The initial, lighter smells of the fragrance.'],
-    [labels.heart, optionalText(payload.heartNotes ?? payload.middleNotes, resolvedLang) || 'The core of the fragrance, emerging just after the top notes.'],
-    [labels.base, optionalText(payload.baseNotes, resolvedLang) || 'The deepest, richest scents that linger the longest.'],
+    [t('dynamic.notes.top', { lng: resolvedLang }), optionalText(payload.topNotes, resolvedLang) || 'The initial, lighter smells of the fragrance.'],
+    [t('dynamic.notes.heart', { lng: resolvedLang }), optionalText(payload.heartNotes ?? payload.middleNotes, resolvedLang) || 'The core of the fragrance, emerging just after the top notes.'],
+    [t('dynamic.notes.base', { lng: resolvedLang }), optionalText(payload.baseNotes, resolvedLang) || 'The deepest, richest scents that linger the longest.'],
   ]
 
   return (
@@ -611,27 +566,20 @@ function AccordionSection({ payload, lang }: { payload: Record<string, unknown>,
 }
 
 function ContactInfoSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
+  const { t } = useTranslation()
   const i18nLang = useLang()
   const resolvedLang = lang === 'all' ? i18nLang : lang
-  const labels: Record<string, Record<string, string>> = {
-    th: { address: 'ที่อยู่', email: 'อีเมล', line: 'Line', hours: 'เวลาทำการ' },
-    en: { address: 'Address', email: 'Email', line: 'Line', hours: 'Business Hours' },
-    ja: { address: '住所', email: 'メール', line: 'Line', hours: '営業時間' },
-    zh: { address: '地址', email: '电子邮件', line: 'Line', hours: '营业时间' },
-    vi: { address: 'Địa chỉ', email: 'Email', line: 'Line', hours: 'Giờ làm việc' },
-    ko: { address: '주소', email: '이메일', line: 'Line', hours: '운영 시간' },
-  }
-  const resolvedLabels = labels[resolvedLang] ?? labels.en
+  
   const title = localizedFromRecord(payload, 'title', resolvedLang)
   const address = localizedFromRecord(payload, 'address', resolvedLang)
   const email = typeof payload.email === 'string' ? payload.email : ''
   const line = typeof payload.line === 'string' ? payload.line : ''
   const hours = localizedFromRecord(payload, 'hours', resolvedLang)
   const items = [
-    { key: 'address', label: resolvedLabels.address, value: address, Icon: MapPin },
-    { key: 'email', label: resolvedLabels.email, value: email, Icon: Mail },
-    { key: 'line', label: resolvedLabels.line, value: line, Icon: MessageCircle },
-    { key: 'hours', label: resolvedLabels.hours, value: hours, Icon: Clock },
+    { key: 'address', label: t('dynamic.contactInfo.address', { lng: resolvedLang }), value: address, Icon: MapPin },
+    { key: 'email', label: t('dynamic.contactInfo.email', { lng: resolvedLang }), value: email, Icon: Mail },
+    { key: 'line', label: t('dynamic.contactInfo.line', { lng: resolvedLang }), value: line, Icon: MessageCircle },
+    { key: 'hours', label: t('dynamic.contactInfo.hours', { lng: resolvedLang }), value: hours, Icon: Clock },
   ] as const
 
   return (
@@ -667,105 +615,46 @@ function ContactInfoSection({ payload, lang }: { payload: Record<string, unknown
 }
 
 function ContactFormSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
+  const { t } = useTranslation()
   const i18nLang = useLang()
   const resolvedLang = lang === 'all' ? i18nLang : lang
   const [formData, setFormData] = useState({ name: '', email: '', message: '' })
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [isSuccess, setIsSuccess] = useState(false)
+  const [error, setError] = useState<string | null>(null)
 
   const title = localizedFromRecord(payload, 'title', resolvedLang)
   const subtitle = localizedFromRecord(payload, 'subtitle', resolvedLang)
 
-  const labels: Record<string, Record<string, string>> = {
-    th: {
-      title: 'ติดต่อเรา',
-      subtitle: 'ส่งข้อความถึงทีมงานของเรา เรายินดีให้บริการและพร้อมตอบทุกข้อสงสัย',
-      successTitle: 'ส่งข้อความสำเร็จ',
-      successBody: 'ขอบคุณที่ติดต่อเรา ทีมงานจะรีบตอบกลับโดยเร็วที่สุด',
-      name: 'ชื่อ-นามสกุล',
-      namePlaceholder: 'กรอกชื่อของคุณ',
-      email: 'อีเมล',
-      message: 'ข้อความ',
-      messagePlaceholder: 'พิมพ์ข้อความของคุณที่นี่...',
-      submit: 'ส่งข้อความ',
-    },
-    en: {
-      title: 'Contact Us',
-      subtitle: 'Send a message to our team and we will get back to you soon.',
-      successTitle: 'Message sent successfully',
-      successBody: 'Thanks for reaching out. Our team will reply as soon as possible.',
-      name: 'Full Name',
-      namePlaceholder: 'Enter your name',
-      email: 'Email',
-      message: 'Message',
-      messagePlaceholder: 'Type your message here...',
-      submit: 'Send Message',
-    },
-    ja: {
-      title: 'お問い合わせ',
-      subtitle: 'チームへメッセージをお送りください。できるだけ早くご返信します。',
-      successTitle: '送信に成功しました',
-      successBody: 'お問い合わせありがとうございます。担当者ができるだけ早く返信します。',
-      name: '氏名',
-      namePlaceholder: 'お名前を入力してください',
-      email: 'メール',
-      message: 'メッセージ',
-      messagePlaceholder: 'ここにメッセージを入力してください...',
-      submit: '送信',
-    },
-    zh: {
-      title: '联系我们',
-      subtitle: '给我们的团队留言，我们会尽快回复您。',
-      successTitle: '发送成功',
-      successBody: '感谢您的联系，我们会尽快回复。',
-      name: '姓名',
-      namePlaceholder: '请输入您的姓名',
-      email: '邮箱',
-      message: '留言',
-      messagePlaceholder: '在这里输入您的留言...',
-      submit: '发送消息',
-    },
-    vi: {
-      title: 'Liên hệ',
-      subtitle: 'Gửi tin nhắn cho đội ngũ của chúng tôi, chúng tôi sẽ phản hồi sớm nhất.',
-      successTitle: 'Gửi tin nhắn thành công',
-      successBody: 'Cảm ơn bạn đã liên hệ, đội ngũ của chúng tôi sẽ phản hồi sớm nhất có thể.',
-      name: 'Họ và tên',
-      namePlaceholder: 'Nhập tên của bạn',
-      email: 'Email',
-      message: 'Tin nhắn',
-      messagePlaceholder: 'Nhập tin nhắn của bạn tại đây...',
-      submit: 'Gửi tin nhắn',
-    },
-    ko: {
-      title: '문의하기',
-      subtitle: '팀에 메시지를 보내주시면 최대한 빨리 답변드리겠습니다.',
-      successTitle: '메시지 전송 완료',
-      successBody: '문의해 주셔서 감사합니다. 가능한 빨리 답변드리겠습니다.',
-      name: '이름',
-      namePlaceholder: '이름을 입력하세요',
-      email: '이메일',
-      message: '메시지',
-      messagePlaceholder: '여기에 메시지를 입력하세요...',
-      submit: '메시지 보내기',
-    }
-  }
-
-  const copy = labels[resolvedLang] ?? labels.en
-
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     setIsSubmitting(true)
+    setError(null)
+    setIsSuccess(false)
     
-    // Simulate API call
-    setTimeout(() => {
-      setIsSubmitting(false)
+    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(formData)
+      });
+      
+      const data = await res.json().catch(() => ({}));
+      
+      if (!res.ok || data.error) {
+        throw new Error(data.error || 'Failed to send message');
+      }
+
       setIsSuccess(true)
       setFormData({ name: '', email: '', message: '' })
-      
-      // Reset success message after 3 seconds
       setTimeout(() => setIsSuccess(false), 3000)
-    }, 1000)
+    } catch (err: any) {
+      console.error(err);
+      setError(err.message || 'An unexpected error occurred. Please try again.');
+    } finally {
+      setIsSubmitting(false);
+    }
   }
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
@@ -778,28 +667,33 @@ function ContactFormSection({ payload, lang }: { payload: Record<string, unknown
       <div className="mx-auto max-w-3xl">
         <div className="mb-12 text-center">
           <h2 className="mb-4 text-3xl font-semibold text-text-main md:text-4xl">
-            {title || copy.title}
+            {title || t('contactForm.title', { lng: resolvedLang })}
           </h2>
           <p className="mx-auto max-w-xl text-lg text-muted-text">
-            {subtitle || copy.subtitle}
+            {subtitle || t('contactForm.subtitle', { lng: resolvedLang })}
           </p>
         </div>
 
         <div className="rounded-3xl border border-line-primary/20 bg-surface-card p-8 shadow-card md:p-12">
+          {error && (
+            <div className="mb-6 rounded-lg bg-rose-50 p-4 text-rose-500 text-sm border border-rose-200">
+              {error}
+            </div>
+          )}
           {isSuccess ? (
             <div className="py-12 text-center">
               <div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-brand-success/20 text-brand-success">
                 <Send size={32} />
               </div>
-              <h3 className="mb-2 text-2xl font-semibold text-text-main">{copy.successTitle}</h3>
-              <p className="text-muted-text">{copy.successBody}</p>
+              <h3 className="mb-2 text-2xl font-semibold text-text-main">{t('contactForm.successTitle', { lng: resolvedLang })}</h3>
+              <p className="text-muted-text">{t('contactForm.successBody', { lng: resolvedLang })}</p>
             </div>
           ) : (
             <form onSubmit={handleSubmit} className="space-y-6">
               <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
                 <div className="space-y-2">
                   <label htmlFor="name" className="block text-sm font-medium text-text-main">
-                    {copy.name}
+                    {t('contactForm.name', { lng: resolvedLang })}
                   </label>
                   <input
                     type="text"
@@ -808,13 +702,13 @@ function ContactFormSection({ payload, lang }: { payload: Record<string, unknown
                     required
                     value={formData.name}
                     onChange={handleChange}
-                    className="w-full rounded-xl border border-line-primary/30 bg-surface-page px-4 py-3 text-text-main outline-none transition-all focus:border-brand-primary focus:ring-2 focus:ring-brand-primary/20"
-                    placeholder={copy.namePlaceholder}
+                    placeholder={t('contactForm.namePlaceholder', { lng: resolvedLang })}
+                    className="ui-form-shell"
                   />
                 </div>
                 <div className="space-y-2">
                   <label htmlFor="email" className="block text-sm font-medium text-text-main">
-                    {copy.email}
+                    {t('contactForm.email', { lng: resolvedLang })}
                   </label>
                   <input
                     type="email"
@@ -823,7 +717,7 @@ function ContactFormSection({ payload, lang }: { payload: Record<string, unknown
                     required
                     value={formData.email}
                     onChange={handleChange}
-                    className="w-full rounded-xl border border-line-primary/30 bg-surface-page px-4 py-3 text-text-main outline-none transition-all focus:border-brand-primary focus:ring-2 focus:ring-brand-primary/20"
+                    className="ui-form-shell"
                     placeholder="example@email.com"
                   />
                 </div>
@@ -831,17 +725,17 @@ function ContactFormSection({ payload, lang }: { payload: Record<string, unknown
               
               <div className="space-y-2">
                 <label htmlFor="message" className="block text-sm font-medium text-text-main">
-                  {copy.message}
+                  {t('contactForm.message', { lng: resolvedLang })}
                 </label>
                 <textarea
                   id="message"
                   name="message"
                   required
+                  rows={4}
                   value={formData.message}
                   onChange={handleChange}
-                  rows={5}
-                  className="w-full resize-none rounded-xl border border-line-primary/30 bg-surface-page px-4 py-3 text-text-main outline-none transition-all focus:border-brand-primary focus:ring-2 focus:ring-brand-primary/20"
-                  placeholder={copy.messagePlaceholder}
+                  placeholder={t('contactForm.messagePlaceholder', { lng: resolvedLang })}
+                  className="ui-form-shell resize-none"
                 />
               </div>
 
@@ -855,7 +749,7 @@ function ContactFormSection({ payload, lang }: { payload: Record<string, unknown
                 ) : (
                   <>
                     <Send size={18} />
-                    {copy.submit}
+                    {t('contactForm.submit', { lng: resolvedLang })}
                   </>
                 )}
               </button>

apps/website/src/locales/en/translation.json

@@ -34,5 +34,35 @@
     "followUs": "Follow Us",
     "contactUs": "Contact Us",
     "rights": "All rights reserved."
+  },
+  "dynamic": {
+    "heroLearnMore": "Learn More",
+    "products": "Products",
+    "viewAll": "View All Collection →",
+    "emptyProducts": "No products found in this section.",
+    "authorBy": "By",
+    "notes": {
+      "top": "Top Notes",
+      "heart": "Heart Notes",
+      "base": "Base Notes"
+    },
+    "contactInfo": {
+      "address": "Address",
+      "email": "Email",
+      "line": "Line",
+      "hours": "Business Hours"
+    }
+  },
+  "contactForm": {
+    "title": "Contact Us",
+    "subtitle": "Send a message to our team and we will get back to you soon.",
+    "successTitle": "Message sent successfully",
+    "successBody": "Thanks for reaching out. Our team will reply as soon as possible.",
+    "name": "Full Name",
+    "namePlaceholder": "Enter your name",
+    "email": "Email",
+    "message": "Message",
+    "messagePlaceholder": "Type your message here...",
+    "submit": "Send Message"
   }
 }

apps/website/src/locales/ja/translation.json

@@ -57,5 +57,35 @@
     "moreRelated": "関連する {{category}}",
     "reviews": "レビュー",
     "viewDetails": "詳細を見る →"
+  },
+  "dynamic": {
+    "heroLearnMore": "詳しく見る",
+    "products": "商品",
+    "viewAll": "すべて見る →",
+    "emptyProducts": "このセクションには商品がありません。",
+    "authorBy": "著者",
+    "notes": {
+      "top": "トップノート",
+      "heart": "ミドルノート",
+      "base": "ベースノート"
+    },
+    "contactInfo": {
+      "address": "住所",
+      "email": "メール",
+      "line": "Line",
+      "hours": "営業時間"
+    }
+  },
+  "contactForm": {
+    "title": "お問い合わせ",
+    "subtitle": "チームへメッセージをお送りください。できるだけ早くご返信します。",
+    "successTitle": "送信に成功しました",
+    "successBody": "お問い合わせありがとうございます。担当者ができるだけ早く返信します。",
+    "name": "氏名",
+    "namePlaceholder": "お名前を入力してください",
+    "email": "メール",
+    "message": "メッセージ",
+    "messagePlaceholder": "ここにメッセージを入力してください...",
+    "submit": "送信"
   }
 }

apps/website/src/locales/ko/translation.json

@@ -57,5 +57,35 @@
     "moreRelated": "더 많은 {{category}}",
     "reviews": "리뷰",
     "viewDetails": "상세 보기 →"
+  },
+  "dynamic": {
+    "heroLearnMore": "자세히 보기",
+    "products": "상품",
+    "viewAll": "전체 보기 →",
+    "emptyProducts": "이 섹션에서 찾을 수 있는 상품이 없습니다.",
+    "authorBy": "작성자",
+    "notes": {
+      "top": "탑 노트",
+      "heart": "미들 노트",
+      "base": "베이스 노트"
+    },
+    "contactInfo": {
+      "address": "주소",
+      "email": "이메일",
+      "line": "Line",
+      "hours": "운영 시간"
+    }
+  },
+  "contactForm": {
+    "title": "문의하기",
+    "subtitle": "팀에 메시지를 보내주시면 최대한 빨리 답변드리겠습니다.",
+    "successTitle": "메시지 전송 완료",
+    "successBody": "문의해 주셔서 감사합니다. 가능한 빨리 답변드리겠습니다.",
+    "name": "이름",
+    "namePlaceholder": "이름을 입력하세요",
+    "email": "이메일",
+    "message": "메시지",
+    "messagePlaceholder": "여기에 메시지를 입력하세요...",
+    "submit": "메시지 보내기"
   }
 }

apps/website/src/locales/th/translation.json

@@ -34,5 +34,35 @@
     "followUs": "ติดตามเรา",
     "contactUs": "ติดต่อสอบถาม",
     "rights": "สงวนลิขสิทธิ์."
+  },
+  "dynamic": {
+    "heroLearnMore": "ดูรายละเอียดเพิ่มเติม",
+    "products": "สินค้า",
+    "viewAll": "ดูทั้งหมด →",
+    "emptyProducts": "ไม่พบสินค้าในหมวดนี้",
+    "authorBy": "โดย",
+    "notes": {
+      "top": "กลิ่นเปิด",
+      "heart": "กลิ่นกลาง",
+      "base": "กลิ่นฐาน"
+    },
+    "contactInfo": {
+      "address": "ที่อยู่",
+      "email": "อีเมล",
+      "line": "Line",
+      "hours": "เวลาทำการ"
+    }
+  },
+  "contactForm": {
+    "title": "ติดต่อเรา",
+    "subtitle": "ส่งข้อความถึงทีมงานของเรา เรายินดีให้บริการและพร้อมตอบทุกข้อสงสัย",
+    "successTitle": "ส่งข้อความสำเร็จ",
+    "successBody": "ขอบคุณที่ติดต่อเรา ทีมงานจะรีบตอบกลับโดยเร็วที่สุด",
+    "name": "ชื่อ-นามสกุล",
+    "namePlaceholder": "กรอกชื่อของคุณ",
+    "email": "อีเมล",
+    "message": "ข้อความ",
+    "messagePlaceholder": "พิมพ์ข้อความของคุณที่นี่...",
+    "submit": "ส่งข้อความ"
   }
 }

apps/website/src/locales/vi/translation.json

@@ -57,5 +57,35 @@
     "moreRelated": "Thêm {{category}}",
     "reviews": "Đánh giá",
     "viewDetails": "Xem chi tiết →"
+  },
+  "dynamic": {
+    "heroLearnMore": "Tìm hiểu thêm",
+    "products": "Sản phẩm",
+    "viewAll": "Xem tất cả →",
+    "emptyProducts": "Không tìm thấy sản phẩm nào trong mục này.",
+    "authorBy": "Bởi",
+    "notes": {
+      "top": "Hương đầu",
+      "heart": "Hương giữa",
+      "base": "Hương cuối"
+    },
+    "contactInfo": {
+      "address": "Địa chỉ",
+      "email": "Email",
+      "line": "Line",
+      "hours": "Giờ làm việc"
+    }
+  },
+  "contactForm": {
+    "title": "Liên hệ",
+    "subtitle": "Gửi tin nhắn cho đội ngũ của chúng tôi, chúng tôi sẽ phản hồi sớm nhất.",
+    "successTitle": "Gửi tin nhắn thành công",
+    "successBody": "Cảm ơn bạn đã liên hệ, đội ngũ của chúng tôi sẽ phản hồi sớm nhất có thể.",
+    "name": "Họ và tên",
+    "namePlaceholder": "Nhập tên của bạn",
+    "email": "Email",
+    "message": "Tin nhắn",
+    "messagePlaceholder": "Nhập tin nhắn của bạn tại đây...",
+    "submit": "Gửi tin nhắn"
   }
 }

apps/website/src/locales/zh/translation.json

@@ -57,5 +57,35 @@
     "moreRelated": "更多 {{category}}",
     "reviews": "评价",
     "viewDetails": "查看详情 →"
+  },
+  "dynamic": {
+    "heroLearnMore": "了解更多",
+    "products": "商品",
+    "viewAll": "查看全部 →",
+    "emptyProducts": "此区域中没有找到产品。",
+    "authorBy": "作者",
+    "notes": {
+      "top": "前调",
+      "heart": "中调",
+      "base": "后调"
+    },
+    "contactInfo": {
+      "address": "地址",
+      "email": "电子邮件",
+      "line": "Line",
+      "hours": "营业时间"
+    }
+  },
+  "contactForm": {
+    "title": "联系我们",
+    "subtitle": "给我们的团队留言，我们会尽快回复您。",
+    "successTitle": "发送成功",
+    "successBody": "感谢您的联系，我们会尽快回复。",
+    "name": "姓名",
+    "namePlaceholder": "请输入您的姓名",
+    "email": "邮箱",
+    "message": "留言",
+    "messagePlaceholder": "在这里输入您的留言...",
+    "submit": "发送消息"
   }
 }