.

Author: faikit

app/(default)/(home)/page.tsx

@@ -22,11 +22,17 @@ import {
 } from "@/components/ui/drawer"
 
 
+
 import { Landing } from "./landing"
 import { Embodied, E2EAD } from "@/components/app-drawer"
+
+
+
 import { publications } from "@/data/publications"
 import { events } from "@/data/events"
 
+
+
 export default function Home() {
 
     return (

app/(default)/layout.tsx

@@ -22,6 +22,7 @@ import {
 
 
 import { WeChat, WeChatGroup } from "@/components/app-drawer"
+import { EmailSubscribe } from "@/components/mailing"
 
 
 
@@ -137,6 +138,10 @@ export default function RootLayout({
 
                 </div>
 
+                <div className="w-full max-w-7xl text-xs">
+                    <EmailSubscribe />
+                </div>
+
                 <div className="w-full max-w-7xl text-xs">
                     OpenDriveLab © 2021 - 2025
                 </div>

components/mailing.tsx

@@ -0,0 +1,65 @@
+'use client'
+import { useState, useEffect } from 'react'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
+const emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+export function EmailSubscribe() {
+  const [email, setEmail] = useState('')
+  const [valid, setValid] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [placeholder, setPlaceholder] = useState('enter your email');
+  useEffect(() => {
+    const isValid = emailRegex.test(email.trim())
+    setValid(isValid && email.trim() !== '')
+  }, [email])
+
+  const handleSubmit = async () => {
+    if (!valid) return
+    setLoading(true)
+
+    const payload = {
+      email,
+      message: '',
+      organization: '',
+      first_name: '',
+      last_name: '',
+    }
+
+    try {
+      const res = await fetch('https://drivelab.openxlab.org.cn/gw/drivelab-register-api-service/signup/', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+      })
+
+      if (res.ok) {
+            setEmail('')
+            setPlaceholder('subscribed!');
+      } else {
+      }
+    } catch (err) {
+    } finally {
+      setLoading(false)
+    }
+  }
+
+    return (
+        <div className="w-full flex flex-col md:flex-row gap-3 md:items-center">
+            <span>
+                Subscribe & stay tuned!
+            </span>
+            <div className="flex gap-3 items-center">
+                <Input
+                    type="email"
+                    placeholder={placeholder}
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    className='rounded-sm text-xs md:text-xs h-5 max-w-xs'
+                />
+                <Button onClick={handleSubmit} disabled={!valid || loading} className='text-xs h-5 p-2 hover:cursor-pointer font-normal rounded-sm'>
+                    {loading ? '...' : 'subscribe'}
+                </Button>
+            </div>
+        </div>
+    )
+}

package-lock.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@next/third-parties": "^15.3.2",
+    "@radix-ui/react-alert-dialog": "^1.1.14",
     "@radix-ui/react-aspect-ratio": "^1.1.2",
     "@radix-ui/react-collapsible": "^1.1.11",
     "@radix-ui/react-dialog": "^1.1.14",