chore: optimize newsletter card & add newsletter card to homepage

messages/en.json

@@ -160,7 +160,8 @@
     }
   },
   "Newsletter": {
-    "title": "Join the community",
+    "title": "Newsletter",
+    "subtitle": "Join the community",
     "description": "Subscribe to our newsletter for the latest news and updates",
     "form": {
       "email": "Email",

messages/zh.json

@@ -161,7 +161,8 @@
     }
   },
   "Newsletter": {
-    "title": "加入我们的社区",
+    "title": "邮件列表",
+    "subtitle": "加入我们的社区",
     "description": "订阅邮件列表，及时获取最新消息和更新",
     "form": {
       "email": "邮箱",

src/app/[locale]/(marketing)/(home)/page.tsx

@@ -10,6 +10,7 @@ import LogoCloud from '@/components/blocks/logo-cloud/logo-cloud';
 import PricingSection from '@/components/blocks/pricing/pricing';
 import StatsSection from '@/components/blocks/stats/stats';
 import TestimonialsSection from '@/components/blocks/testimonials/testimonials';
+import { NewsletterCard } from '@/components/newsletter/newsletter-card';
 import { constructMetadata } from '@/lib/metadata';
 import { getUrlWithLocale } from '@/lib/urls/urls';
 import type { Metadata } from 'next';
@@ -66,9 +67,11 @@ export default async function HomePage(props: HomePageProps) {
 
         <FaqSection />
 
+        <CallToActionSection />
+
         <TestimonialsSection />
 
-        <CallToActionSection />
+        <NewsletterCard />
       </div>
     </>
   );

src/components/newsletter/newsletter-card.tsx

@@ -2,22 +2,21 @@
 
 import { NewsletterForm } from '@/components/newsletter/newsletter-form';
 import { useTranslations } from 'next-intl';
+import { HeaderSection } from '../layout/header-section';
 
 export function NewsletterCard() {
   const t = useTranslations('Newsletter');
 
   return (
-    <div className="w-full px-4 py-8 md:p-16 rounded-lg bg-muted/50">
+    <div className="w-full p-16 rounded-lg bg-muted/50">
       <div className="flex flex-col items-center justify-center gap-8">
         {/* Header */}
-        <div className="space-y-4">
-          <h3 className="text-center text-3xl font-bold tracking-tight">
-            {t('title')}
-          </h3>
-          <p className="text-center text-lg text-muted-foreground">
-            {t('description')}
-          </p>
-        </div>
+        <HeaderSection
+          title={t('title')}
+          subtitle={t('subtitle')}
+          description={t('description')}
+          className="text-center"
+        />
 
         <NewsletterForm />
       </div>