diff --git a/packages/studio-ts/src/app/page.tsx b/packages/studio-ts/src/app/page.tsx
index 6ef54a1..c1883f6 100644
--- a/packages/studio-ts/src/app/page.tsx
+++ b/packages/studio-ts/src/app/page.tsx
@@ -20,6 +20,7 @@ import logoPhobiaLight from '@/images/clients/phobia/logo-light.svg'
import logoUnseal from '@/images/clients/unseal/logo-light.svg'
import imageLaptop from '@/images/laptop.jpg'
import { type CaseStudy, type MDXEntry, loadCaseStudies } from '@/lib/mdx'
+import { WaitlistForm } from '@/components/WaitlistForm'
const clients = [
['Phobia', logoPhobiaLight],
@@ -185,13 +186,12 @@ export default async function Home() {
- Award-winning development studio based in Denmark.
+ The open source Assistant Platform
-
- We are a development studio working at the intersection of design
- and technology. It’s a really busy intersection though — a lot of
- our staff have been involved in hit and runs.
-
+ Join the waiting list
+
+
+
diff --git a/packages/studio-ts/src/app/server.tsx b/packages/studio-ts/src/app/server.tsx
new file mode 100644
index 0000000..4566581
--- /dev/null
+++ b/packages/studio-ts/src/app/server.tsx
@@ -0,0 +1,37 @@
+'use server'
+
+export type FormState = {
+ message: string
+ submitted: boolean
+}
+
+export const handleWaitlistSubmit = async (
+ prevState: FormState,
+ formData: FormData,
+) => {
+ const url = process.env.NEXT_GOOGLE_SHEETS_API!
+ let rawFormData = { email: formData.get('email') }
+
+ try {
+ const response = await fetch(url, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(rawFormData),
+ })
+
+ if (response.ok) {
+ return { message: 'Email address sent successfully!', submitted: true }
+ } else {
+ console.error(
+ 'Failed to send email address. Status code:',
+ response.status,
+ )
+ }
+ } catch (error) {
+ return { message: 'Email address not sent', submitted: false }
+ }
+
+ return { message: 'Email address not sent', submitted: false }
+}
diff --git a/packages/studio-ts/src/components/Footer.tsx b/packages/studio-ts/src/components/Footer.tsx
index 2e1a0a0..8cd1c81 100644
--- a/packages/studio-ts/src/components/Footer.tsx
+++ b/packages/studio-ts/src/components/Footer.tsx
@@ -65,50 +65,7 @@ function Navigation() {
)
}
-function ArrowIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
- return (
-
-
-
- )
-}
-function NewsletterForm() {
- return (
-
- )
-}
export function Footer() {
return (
@@ -116,9 +73,6 @@ export function Footer() {
diff --git a/packages/studio-ts/src/components/RootLayout.tsx b/packages/studio-ts/src/components/RootLayout.tsx
index 07a5fb0..f21ac28 100644
--- a/packages/studio-ts/src/components/RootLayout.tsx
+++ b/packages/studio-ts/src/components/RootLayout.tsx
@@ -81,10 +81,10 @@ function Header({
/>
-
- Contact us
+
+ Star on Github!
-
-
+ */}
diff --git a/packages/studio-ts/src/components/WaitlistForm.tsx b/packages/studio-ts/src/components/WaitlistForm.tsx
new file mode 100644
index 0000000..1ceab0c
--- /dev/null
+++ b/packages/studio-ts/src/components/WaitlistForm.tsx
@@ -0,0 +1,79 @@
+"use client"
+import { FormState, handleWaitlistSubmit } from '@/app/server'
+import { useFormState, useFormStatus } from 'react-dom'
+
+const initialState: FormState = {
+ message: '',
+ submitted: false,
+}
+
+function ArrowIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+ return (
+
+
+
+ )
+}
+
+function CheckMarkIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+ return (
+
+
+
+ )
+}
+
+export function WaitlistForm() {
+ const [state, formAction] = useFormState(handleWaitlistSubmit, initialState)
+
+ return (
+
+ )
+}
+
+function FormIconDisplay({ submitted }: { submitted: boolean | undefined }) {
+ const { pending } = useFormStatus()
+
+ return (
+
+ {submitted ? (
+
+ ) : (
+
+ )}
+
+ )
+}