پروژه کامل: فرانت متصل به API + داکرایز

- اتصال کامل فرانت به API: همه محتوای سایت (پروژه‌ها، مقالات، خدمات، برند و...) از بک‌اند خوانده می‌شود (SiteProvider + useSite) - فرم تماس و خبرنامه متصل به بک‌اند و تست‌شده در مرورگر - ساختار مونوریپو: frontend/ + backend/ - Dockerfile برای هر دو بخش + docker-compose (PostgreSQL + FastAPI + nginx) - nginx با پروکسی /api — بدون نیاز به CORS در حالت داکر - README کامل فارسی
2026-08-29 13:26:58 +03:30
parent ed14435485
commit ad75f7a7bd
78 changed files with 8242 additions and 133 deletions
@@ -0,0 +1,135 @@
+import React, { useState } from 'react'
+import { CheckIcon, SendIcon } from 'lucide-react'
+import Swal from 'sweetalert2'
+import { Reveal } from '../Reveal'
+import { Button } from '../Button'
+import { API_URL } from '../../config'
+
+export function Newsletter() {
+  const [email, setEmail] = useState('')
+  const [status, setStatus] = useState<'idle' | 'error' | 'done'>('idle')
+  const [sending, setSending] = useState(false)
+
+  const showErrorAlert = (title: string, text: string) => {
+    Swal.fire({
+      icon: 'warning',
+      title: title,
+      text: text,
+      background: '#1e1a16',
+      color: '#F5F3EF',
+      iconColor: '#d5874c',
+      confirmButtonText: 'متوجه شدم',
+      buttonsStyling: false,
+      customClass: {
+        container: 'backdrop-blur-[8px] bg-ink/60',
+        popup: 'font-pinar border border-ivory/10 rounded-none shadow-lift',
+        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',
+      },
+      showClass: {
+        popup: 'swal2-show',
+        backdrop: 'swal2-backdrop-show',
+      },
+      hideClass: {
+        popup: 'swal2-hide',
+        backdrop: 'swal2-backdrop-hide',
+      }
+    })
+  }
+
+  const submit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (sending) return
+
+    const emailValue = email.trim()
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+
+    if (!emailValue) {
+      setStatus('error')
+      showErrorAlert('اطلاعات ناقص است', 'لطفاً نشانی ایمیل خود را برای عضویت در خبرنامه وارد کنید.')
+      return
+    }
+
+    if (!emailRegex.test(emailValue)) {
+      setStatus('error')
+      showErrorAlert('فرمت ایمیل نامعتبر است', 'لطفاً ایمیل خود را به درستی وارد کنید (مثال: example@domain.com).')
+      return
+    }
+
+    setSending(true)
+    try {
+      const res = await fetch(`${API_URL}/api/newsletter`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email: emailValue }),
+      })
+
+      if (!res.ok) {
+        setStatus('error')
+        const data = await res.json().catch(() => null)
+        const detail =
+          typeof data?.detail === 'string' ? data.detail : 'لطفاً ایمیل را بررسی و دوباره تلاش کنید.'
+        showErrorAlert('خطا در عضویت', detail)
+        return
+      }
+
+      setStatus('done')
+      setEmail('')
+    } catch {
+      setStatus('error')
+      showErrorAlert('خطا در اتصال به سرور', 'ارتباط با سرور برقرار نشد. لطفاً بعداً دوباره تلاش کنید.')
+    } finally {
+      setSending(false)
+    }
+  }
+
+  return (
+    <section className="bg-copper py-16" aria-labelledby="newsletter-title">
+      <div className="mx-auto grid max-w-site items-center gap-8 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">
+            خبرنامه آرامش پلازا
+          </h2>
+          <p className="mt-3 max-w-md text-sm font-light leading-8 text-char/75">
+            هر ماه یک ایمیل: پروژه‌های جدید، فرصت‌های سرمایه‌گذاری و یادداشت‌های تیم معماری.
+          </p>
+        </Reveal>
+
+        <Reveal delay={0.08}>
+          <form onSubmit={submit} className="flex flex-col gap-3 sm:flex-row" noValidate>
+            <div className="flex-1">
+              <label htmlFor="newsletter-email" className="sr-only">
+                نشانی ایمیل
+              </label>
+              <input
+                id="newsletter-email"
+                type="email"
+                dir="ltr"
+                value={email}
+                onChange={(e) => {
+                  setEmail(e.target.value)
+                  if (status !== 'idle') setStatus('idle')
+                }}
+                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"
+                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>
+              )}
+            </div>
+            
+            <Button type="submit" variant="dark-ivory" disabled={sending}>
+              <SendIcon className="h-4 w-4" />
+              {sending ? 'در حال ارسال…' : 'عضویت'}
+            </Button>
+          </form>
+        </Reveal>
+      </div>
+    </section>
+  )
+}