feat: update UI to glassmorphic design and copper theme

frontend/src/components/home/Newsletter.tsx

@@ -32,11 +32,11 @@ export function Newsletter() {
       confirmButtonText: 'متوجه شدم',
       buttonsStyling: false,
       customClass: {
-        container: 'backdrop-blur-[8px] bg-ink/60',
-        popup: 'font-pinar border border-ivory/10 rounded-none shadow-lift',
+        container: 'backdrop-blur-md bg-ink/70',
+        popup: 'font-pinar border border-white/10 rounded-2xl shadow-2xl backdrop-blur-xl bg-char/95',
         title: 'font-pinar font-bold text-lg text-ivory pt-2',
         htmlContainer: 'font-pinar font-light text-sm leading-8 text-ivory/70',
-        confirmButton: 'mt-6 bg-copper text-char font-bold px-10 py-3 transition-transform duration-300 ease-lux hover:scale-105',
+        confirmButton: 'mt-6 rounded-full bg-copper text-char font-bold px-10 py-3 transition-all duration-300 ease-lux hover:scale-105 hover:shadow-[0_0_20px_rgba(197,143,92,0.5)]',
       },
       showClass: {
         popup: 'swal2-show',
@@ -96,20 +96,25 @@ export function Newsletter() {
   }
 
   return (
-    <section className="relative bg-copper py-16" aria-labelledby="newsletter-title">
+    <section className="relative overflow-hidden bg-gradient-to-r from-copper via-[#d8965e] to-copper py-20 shadow-[inset_0_1px_1px_rgba(255,255,255,0.3)]" aria-labelledby="newsletter-title">
       <SingletonPill resource="newsletter" label="ویرایش متن‌های خبرنامه" className="absolute left-4 top-4" />
-      <div className="mx-auto grid max-w-site items-center gap-8 px-6 lg:grid-cols-2 lg:px-10">
+      
+      {/* هاله نور پس‌زمینه برای عمق بصری */}
+      <div className="pointer-events-none absolute -right-20 -top-20 h-64 w-64 rounded-full bg-white/20 blur-3xl" />
+      <div className="pointer-events-none absolute -bottom-20 -left-20 h-64 w-64 rounded-full bg-black/15 blur-3xl" />
+
+      <div className="relative mx-auto grid max-w-site items-center gap-10 px-6 lg:grid-cols-2 lg:px-10">
         <Reveal>
           <h2 id="newsletter-title" className="text-2xl font-bold leading-relaxed text-char md:text-3xl">
             <InlineEdit value={newsletter.title} onSave={(v) => saveContent('title', v)} />
           </h2>
-          <p className="mt-3 max-w-md text-sm font-light leading-8 text-char/75">
+          <p className="mt-3 max-w-md text-sm font-light leading-8 text-char/80">
             <InlineEdit multiline value={newsletter.lead} onSave={(v) => saveContent('lead', v)} />
           </p>
         </Reveal>
 
         <Reveal delay={0.08}>
-          <form onSubmit={submit} className="flex flex-col gap-3 sm:flex-row" noValidate>
+          <form onSubmit={submit} className="flex flex-col gap-3.5 sm:flex-row" noValidate>
             <div className="flex-1">
               <label htmlFor="newsletter-email" className="sr-only">
                 {newsletter.placeholder}
@@ -124,26 +129,33 @@ export function Newsletter() {
                   if (status !== 'idle') setStatus('idle')
                 }}
                 placeholder={newsletter.placeholder}
-                className="w-full border border-transparent bg-char px-5 py-4 text-left text-sm font-light text-ivory placeholder:text-ivory/40 transition-all duration-300 ease-lux focus:border-ivory focus:outline-none"
+                className="w-full rounded-full border border-black/15 bg-char/90 px-6 py-4 text-left text-sm font-light text-ivory placeholder:text-ivory/40 shadow-[inset_0_2px_4px_rgba(0,0,0,0.35)] backdrop-blur-xl transition-all duration-300 ease-lux focus:border-ivory focus:bg-char focus:shadow-[0_0_20px_rgba(255,255,255,0.25)] focus:outline-none"
                 aria-invalid={status === 'error'}
               />
               {status === 'done' && (
-                <p className="mt-2 flex items-center gap-1.5 text-xs font-light text-char" role="status">
-                  <CheckIcon className="h-3.5 w-3.5" />
+                <p className="mt-2.5 flex items-center gap-1.5 px-3 text-xs font-medium text-char" role="status">
+                  <CheckIcon className="h-4 w-4" />
                   {newsletter.success_text}
                 </p>
               )}
             </div>
 
-            <Button type="submit" variant="dark-ivory" disabled={sending}>
-              <SendIcon className="h-4 w-4" />
-              {sending ? newsletter.sending_label : (
-                <InlineEdit value={newsletter.button_label} onSave={(v) => saveContent('button_label', v)} />
-              )}
+            <Button
+              type="submit"
+              variant="dark"
+              disabled={sending}
+              className="group flex items-center justify-center gap-2 rounded-full px-8 py-4 shadow-[0_8px_20px_rgba(0,0,0,0.3)] transition-all duration-300 hover:shadow-[0_12px_25px_rgba(0,0,0,0.45)] active:scale-95"
+            >
+              <SendIcon className="h-4 w-4 transition-transform duration-300 group-hover:-translate-x-1" />
+              <span>
+                {sending ? newsletter.sending_label : (
+                  <InlineEdit value={newsletter.button_label} onSave={(v) => saveContent('button_label', v)} />
+                )}
+              </span>
             </Button>
           </form>
         </Reveal>
       </div>
     </section>
   )
-}
+}