stripe -> buy buttons

frontend/.astro/settings.json

@@ -1,5 +1,5 @@
 {
 	"_variables": {
-		"lastUpdateCheck": 1721747870008
+		"lastUpdateCheck": 1723115269724
 	}
 }

frontend/.env.example

@@ -1,2 +1,5 @@
 SUPABASE_URL=YOUR_SUPABASE_URL
-SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
+SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
+STRIPE_PUBLIC_KEY=YOUR_STRIPE_PUBLIC_KEY
+STRIPE_KEY=YOUR_STRIPE_KEY
+SENDFAST_PRO_URL=YOUR_SENDFAST_PRO_URL

frontend/package.json

@@ -15,9 +15,11 @@
     "@astrojs/sitemap": "^3.1.6",
     "@astrojs/tailwind": "^5.1.0",
     "@fontsource-variable/gabarito": "^5.0.5",
+    "@stripe/stripe-js": "^4.1.0",
     "@supabase/supabase-js": "^2.44.4",
     "astro": "^4.12.2",
     "lucide-astro": "^0.414.0",
+    "stripe": "^16.6.0",
     "tailwindcss": "^3.4.6",
     "typescript": "^5.5.4"
   },

frontend/src/components/Navbar.astro

@@ -17,15 +17,10 @@ import '@fontsource-variable/gabarito'
             <a class="link link-hover" title="FAQ" href="/#faq">FAQ</a>
         </div>
         <div class="flex justify-end flex-1 space-x-3">
-            <a class="btn btn-sm btn-primary">
+            <a class="btn btn-sm btn-primary" href={import.meta.env.SENDFAST_PRO_URL}>
                 Go Pro
             </a>
             <a class="btn btn-sm" href="/signin">Login</a>
         </div>
     </nav>
-</header>
-<style>
-    header {
-        font-family: 'Gabarito Variable', sans-serif;
-    }
-</style>
+</header>

frontend/src/env.d.ts

@@ -1,8 +1,11 @@
 interface ImportMetaEnv {
-  readonly SUPABASE_URL: string
-  readonly SUPABASE_ANON_KEY: string
+    readonly SUPABASE_URL: string
+    readonly SUPABASE_ANON_KEY: string
+    readonly STRIPE_PUBLIC_KEY: string
+    readonly STRIPE_KEY: string
+    readonly SENDFAST_PRO_URL: string
 }
 
 interface ImportMeta {
-  readonly env: ImportMetaEnv
+    readonly env: ImportMetaEnv
 }

frontend/src/pages/app/index.astro

@@ -0,0 +1,22 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import Navbar from "../../components/Navbar.astro";
+---
+<Layout title="Sendfa.st App">
+    <Navbar/>
+    <section id="app">
+        <div class="relative z-10  max-w-5xl mx-auto  flex flex-col items-center justify-center gap-16 lg:gap-20 px-8 py-12 lg:py-32">
+            <h1 class="text-4xl font-black">Join or create room</h1>
+            <div class="relative flex justify-center flex-col lg:flex-row items-center lg:items-stretch gap-8">
+                <div class="relative max-w-lg w-full">
+                    <button class="btn btn-primary w-full mt-4">Create room</button>
+                </div>
+                <div class="relative max-w-lg w-full">
+                    <label for="room-name" class="text-lg font-bold">Room name</label>
+                    <input id="room-name" type="text" class="w-full border border-gray-300 rounded-lg p-4" placeholder="Room name"/>
+                    <button class="btn btn-primary w-full mt-4">Join room</button>
+                </div>
+            </div>
+        </div>
+    </section>
+</Layout>