feat: add WaitlistForm, thank you page and confetti effect (#11)

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@headlessui/react": "^2.1.8",
     "@next/third-parties": "^14.2.13",
+    "canvas-confetti": "^1.9.3",
     "@notion-render/bookmark-plugin": "^0.0.2",
     "@notion-render/client": "^0.0.2",
     "@notion-render/hljs-plugin": "^0.0.2",

src/app/obrigado/page.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import React, { useEffect } from 'react'
+import Link from 'next/link'
+// @ts-expect-error: ajuste de tipagem
+import confetti from 'canvas-confetti'
+
+const ObrigadoPage = () => {
+  useEffect(() => {
+    const duration = 1 * 1000 // duração do efeito (1 segundo)
+    const end = Date.now() + duration
+
+    const frame = () => {
+      confetti({
+        particleCount: 4, // quantidade de partículas
+        spread: 60, // sobe mais reto
+        startVelocity: 90, // aumenta a força para subir mais alto
+        origin: {
+          x: Math.random(), // posição horizontal aleatória
+          y: 1, // começa do rodapé
+        },
+      })
+
+      if (Date.now() < end) {
+        requestAnimationFrame(frame)
+      }
+    }
+
+    frame()
+  }, [])
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-b from-black via-gray-900 to-black text-white">
+      <div className="p-8 bg-white/10 border border-white/20 rounded-2xl shadow-xl backdrop-blur-md text-center max-w-md w-full">
+        <h1 className="text-2xl font-bold mb-2">🎉 Bem-vindo à lista!</h1>
+        <p className="text-white/80 mb-6">
+          Parabéns pelo seu primeiro passo!<br></br> Em breve, novidades no seu email 🚀
+        </p>
+
+        <Link
+          href="/"
+          className="inline-block bg-primary hover:bg-primary-accent text-black font-semibold px-6 py-3 rounded-lg transition"
+        >
+          Voltar para o início
+        </Link>
+      </div>
+    </div>
+  )
+}
+
+export default ObrigadoPage

src/components/Hero.tsx

@@ -1,8 +1,10 @@
+'use client'
 import React from 'react'
 import Image from 'next/image'
 
 import AppStoreButton from './AppStoreButton'
 import PlayStoreButton from './PlayStoreButton'
+import WaitlistForm from './WaitlistForm'
 
 import { heroDetails } from '@/data/hero'
 
@@ -23,10 +25,17 @@ const Hero: React.FC = () => {
           {heroDetails.heading}
         </h1>
         <p className="mt-4 text-foreground max-w-lg mx-auto">{heroDetails.subheading}</p>
+
+        {/* FORMULÁRIO DA WAITLIST AQUI */}
+        <div className="mt-8 flex justify-center">
+          <WaitlistForm />
+        </div>
+
         <div className="mt-6 flex flex-col sm:flex-row items-center sm:gap-4 w-fit mx-auto">
           <AppStoreButton dark />
           <PlayStoreButton dark />
         </div>
+
         <Image
           src={heroDetails.centerImageSrc}
           width={384}

src/components/WaitlistForm.tsx

@@ -0,0 +1,53 @@
+'use client'
+import { useState, useCallback } from 'react'
+import { useRouter } from 'next/navigation'
+
+const WaitlistForm: React.FC = () => {
+  const [email, setEmail] = useState('')
+  const [loading, setLoading] = useState(false)
+  const router = useRouter()
+
+  const handleSubmit = useCallback(
+    async (e: React.FormEvent) => {
+      e.preventDefault()
+      if (!email) return
+      setLoading(true)
+
+      try {
+        // Futuramente integrar com mailchimp, formspree, etc
+        await new Promise(res => setTimeout(res, 1000))
+        router.push('/obrigado')
+      } catch (err) {
+        console.error(err)
+      } finally {
+        setLoading(false)
+      }
+    },
+    [email, router],
+  )
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className="flex flex-col sm:flex-row gap-4 p-6 bg-white/10 border border-white/20 rounded-xl shadow-xl backdrop-blur-md max-w-lg w-full"
+    >
+      <input
+        type="email"
+        required
+        placeholder="Digite seu e-mail"
+        value={email}
+        onChange={e => setEmail(e.target.value)}
+        className="flex-1 px-4 py-3 rounded-lg bg-white/20 border border-white/30 focus:border-white focus:outline-none placeholder-white/60 text-white"
+      />
+      <button
+        type="submit"
+        disabled={loading}
+        className="text-black bg-primary hover:bg-primary-accent px-6 py-3 font-semibold rounded-lg transition disabled:opacity-50"
+      >
+        {loading ? 'Enviando...' : 'Entrar na lista'}
+      </button>
+    </form>
+  )
+}
+
+export default WaitlistForm