Rename ssr to website, website to spa, add spa nginx config

apps/website/src/app/contact/page.tsx

@@ -0,0 +1,123 @@
+"use client";
+import { useState } from 'react'
+
+type FormState = { name: string; email: string; subject: string; message: string }
+type Status = 'idle' | 'sending' | 'sent' | 'error'
+const SUBJECTS = ['Product Inquiry', 'Order Support', 'Custom Blending', 'Wholesale', 'Partnership', 'Other']
+
+
+
+export default function ContactPage() {
+  const [form, setForm] = useState<FormState>({ name: '', email: '', subject: '', message: '' })
+  const [status, setStatus] = useState<Status>('idle')
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+    setForm(prev => ({ ...prev, [e.target.name]: e.target.value }))
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setStatus('sending')
+    await new Promise(r => setTimeout(r, 1500))
+    setStatus('sent')
+    setForm({ name: '', email: '', subject: '', message: '' })
+  }
+
+  return (
+    <div className="min-h-screen">
+      {/* 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>
+        <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.</p>
+      </div>
+
+      <div className="max-w-6xl mx-auto px-6 py-16 grid md:grid-cols-5 gap-16">
+        {/* Contact Info */}
+        <div className="md:col-span-2 space-y-8">
+          <div>
+            <h2 className="font-bold text-xl mb-6">Reach Us Directly</h2>
+            <div className="space-y-5">
+              {[
+                { icon: '📧', label: 'Email', value: 'hello@irelax.co.th', href: 'mailto:hello@irelax.co.th' },
+                { icon: '📱', label: 'LINE Official', value: '@irelaxessential', href: '#' },
+                { icon: '📸', label: 'Instagram', value: '@irelax.essential', href: '#' },
+                { 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">{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>
+                  </div>
+                </a>
+              ))}
+            </div>
+          </div>
+          <div className="glass rounded-2xl p-6 border border-white/5 space-y-3">
+            <h3 className="font-bold text-sm uppercase tracking-widest">Response Time</h3>
+            <div className="space-y-2 text-sm">
+              {[['Email', '~2 hours'], ['LINE', '~30 minutes'], ['Instagram DM', '~4 hours']].map(([k, v]) => (
+                <div key={k} className="flex justify-between">
+                  <span className="text-slate-400">{k}</span>
+                  <span className="text-cyan-glow font-medium">{v}</span>
+                </div>
+              ))}
+            </div>
+            <p className="text-[10px] text-slate-600 pt-2 uppercase tracking-wider">Mon–Sat, 9:00–18:00 (ICT)</p>
+          </div>
+        </div>
+
+        {/* Contact Form */}
+        <div className="md:col-span-3">
+          {status === 'sent' ? (
+            <div className="h-full flex items-center justify-center">
+              <div className="text-center space-y-5 py-16">
+                <div className="text-6xl animate-bounce">✉️</div>
+                <h2 className="text-2xl font-bold">Message Sent!</h2>
+                <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">
+                  Send Another
+                </button>
+              </div>
+            </div>
+          ) : (
+            <form onSubmit={handleSubmit} className="space-y-5">
+              <div className="grid md:grid-cols-2 gap-5">
+                <div className="space-y-2">
+                  <label className="text-xs uppercase tracking-widest text-slate-400">Full Name *</label>
+                  <input required type="text" name="name" 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" />
+                </div>
+                <div className="space-y-2">
+                  <label className="text-xs uppercase tracking-widest text-slate-400">Email *</label>
+                  <input required type="email" name="email" 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" />
+                </div>
+              </div>
+              <div className="space-y-2">
+                <label className="text-xs uppercase tracking-widest text-slate-400">Subject *</label>
+                <select required 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">
+                  <option value="" disabled>Select a subject</option>
+                  {SUBJECTS.map(s => <option key={s} value={s}>{s}</option>)}
+                </select>
+              </div>
+              <div className="space-y-2">
+                <label className="text-xs uppercase tracking-widest text-slate-400">Message *</label>
+                <textarea required name="message" value={form.message} 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" />
+              </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">
+                {status === 'sending' ? (
+                  <><svg className="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" /><path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" /></svg>Sending...</>
+                ) : 'Send Message →'}
+              </button>
+            </form>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}