feat: enhance waitlist and contact forms with improved localization messages

- Added new success and failure messages for waitlist and contact form submissions in English and Chinese localization files.
- Introduced `WaitlistFormCard` component to streamline waitlist form handling and improve user feedback with toast notifications.
- Updated `ContactFormCard` to utilize new localization messages for form submission states, enhancing user experience.
- Improved structure and validation for both forms, ensuring better error handling and user guidance.

messages/en.json

@@ -55,19 +55,27 @@
     "title": "Contact",
     "description": "We'll help you find the right plan for your business",
     "subtitle": "We'll help you find the right plan for your business",
+    "formTitle": "Contact Us",
     "formDescription": "If you have any questions or feedback, please reach out to our team",
     "name": "Name",
     "email": "Email",
     "message": "Message",
-    "submit": "Submit"
+    "submit": "Submit",
+    "submitting": "Submitting...",
+    "success": "Message sent successfully",
+    "fail": "Failed to send message"
   },
   "WaitlistPage": {
     "title": "Waitlist",
     "description": "Join our waitlist for latest news and updates",
     "subtitle": "Join our waitlist for latest news and updates",
+    "formTitle": "Join Our Waitlist",
     "formDescription": "We will send you only one email every week, and no spam",
     "email": "Email",
-    "subscribe": "Subscribe"
+    "subscribe": "Subscribe",
+    "subscribing": "Subscribing...",
+    "success": "Subscribed successfully",
+    "fail": "Failed to subscribe"
   },
   "AuthPage": {
     "login": {

messages/zh.json

@@ -49,19 +49,27 @@
     "title": "联系我们",
     "description": "我们帮助您找到合适的计划",
     "subtitle": "我们帮助您找到合适的计划",
+    "formTitle": "联系我们",
     "formDescription": "如果您有任何问题或反馈，欢迎联系我们的团队",
     "name": "姓名",
     "email": "邮箱",
     "message": "消息",
-    "submit": "提交"
+    "submit": "提交",
+    "submitting": "提交中...",
+    "success": "消息发送成功",
+    "fail": "消息发送失败"
   },
   "WaitlistPage": {
     "title": "邮件列表",
     "description": "加入我们的邮件列表，获取最新消息和更新",
     "subtitle": "加入我们的邮件列表，获取最新消息和更新",
+    "formTitle": "加入我们的邮件列表",
     "formDescription": "我们每周只发送一封邮件，并且不会发送垃圾邮件",
     "email": "邮箱",
-    "subscribe": "订阅"
+    "subscribe": "订阅",
+    "subscribing": "订阅中...",
+    "success": "订阅成功",
+    "fail": "订阅失败"
   },
   "AuthPage": {
     "login": {

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

@@ -1,10 +1,9 @@
-import { Card } from '@/components/ui/card';
+import { WaitlistFormCard } from '@/components/waitlist/waitlist-form-card';
 import { constructMetadata } from '@/lib/metadata';
 import { getBaseUrlWithLocale } from '@/lib/urls/get-base-url';
 import { Metadata } from 'next';
 import { Locale } from 'next-intl';
 import { getTranslations } from 'next-intl/server';
-import { WaitlistForm } from './waitlist-form';
 
 export async function generateMetadata({
   params,
@@ -25,7 +24,7 @@ export default async function WaitlistPage() {
   const t = await getTranslations('WaitlistPage');
 
   return (
-    <div className="max-w-4xl mx-auto space-y-8 p-8">
+    <div className="max-w-4xl mx-auto space-y-8 py-8">
       {/* Header */}
       <div className="space-y-4">
         <h1 className="text-center text-3xl font-bold tracking-tight">
@@ -37,18 +36,7 @@ export default async function WaitlistPage() {
       </div>
 
       {/* Form */}
-      <Card className="mx-auto max-w-lg p-8 shadow-md">
-        <div className="space-y-4">
-          <p className="text-sm text-muted-foreground">
-            {t('formDescription')}
-          </p>
-        </div>
-
-        <WaitlistForm labels={{
-          email: t('email'),
-          subscribe: t('subscribe')
-        }} />
-      </Card>
+      <WaitlistFormCard />
     </div>
   );
 }

src/components/contact/contact-form-card.tsx

@@ -65,19 +65,19 @@ export function ContactFormCard() {
     try {
       // Here you would typically send the form data to your API
       console.log('Form submitted:', values);
-      
+
       // Simulate API call
       await new Promise(resolve => setTimeout(resolve, 1000));
-      
+
       // Show success message
-      toast.success('Your message has been sent successfully!');
-      
+      toast.success(t('success'));
+
       // Reset form
       form.reset();
     } catch (err) {
       console.error('Form submission error:', err);
-      setError('Failed to send your message. Please try again.');
-      toast.error('Failed to send your message. Please try again.');
+      setError(t('fail'));
+      toast.error(t('fail'));
     } finally {
       setIsSubmitting(false);
     }
@@ -86,7 +86,7 @@ export function ContactFormCard() {
   return (
     <Card className="mx-auto max-w-lg">
       <CardHeader>
-        <CardTitle className="text-lg font-bold">{t('title')}</CardTitle>
+        <CardTitle className="text-lg font-bold">{t('formTitle')}</CardTitle>
         <CardDescription>{t('formDescription')}</CardDescription>
       </CardHeader>
       <Form {...form}>
@@ -144,12 +144,12 @@ export function ContactFormCard() {
                 </FormItem>
               )}
             />
-            
+
             <FormError message={error} />
           </CardContent>
           <CardFooter className="px-6 py-4 flex justify-between items-center bg-muted">
             <Button type="submit" disabled={isSubmitting}>
-              {isSubmitting ? 'Submitting...' : t('submit')}
+              {isSubmitting ? t('submitting') : t('submit')}
             </Button>
           </CardFooter>
         </form>

src/components/waitlist/waitlist-form-card.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { FormError } from '@/components/shared/form-error';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from '@/components/ui/card';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+/**
+ * Waitlist form card component
+ * This is a client component that handles the waitlist form submission
+ */
+export function WaitlistFormCard() {
+  const t = useTranslations('WaitlistPage');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | undefined>('');
+
+  // Create a schema for waitlist form validation
+  const formSchema = z.object({
+    email: z
+      .string()
+      .email({ message: 'Please enter a valid email address' }),
+  });
+
+  // Initialize the form
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      email: '',
+    },
+  });
+
+  // Handle form submission
+  const onSubmit = async (values: z.infer<typeof formSchema>) => {
+    setIsSubmitting(true);
+    setError('');
+
+    try {
+      // Here you would typically send the form data to your API
+      console.log('Form submitted:', values);
+
+      // Simulate API call
+      await new Promise(resolve => setTimeout(resolve, 1000));
+
+      // Show success message
+      toast.success(t('success'));
+
+      // Reset form
+      form.reset();
+    } catch (err) {
+      console.error('Form submission error:', err);
+      setError(t('fail'));
+      toast.error(t('fail'));
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Card className="mx-auto max-w-lg">
+      <CardHeader>
+        <CardTitle className="text-lg font-bold">
+          {t('formTitle')}
+        </CardTitle>
+        <CardDescription>
+          {t('formDescription')}
+        </CardDescription>
+      </CardHeader>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <CardContent className="space-y-6">
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('email')}</FormLabel>
+                  <FormControl>
+                    <Input
+                      type="email"
+                      placeholder={t('email')}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormError message={error} />
+          </CardContent>
+          <CardFooter className="px-6 py-4 flex justify-between items-center bg-muted">
+            <Button type="submit" disabled={isSubmitting}>
+              {isSubmitting ? t('subscribing') : t('subscribe')}
+            </Button>
+          </CardFooter>
+        </form>
+      </Form>
+    </Card>
+  );
+}