sick hero page!

app/api/mail/route.ts

@@ -3,25 +3,54 @@ import { render } from "@react-email/render"
 import WelcomeTemplate from "../../../emails"
 
 import { Resend } from "resend"
-import { NextRequest } from "next/server"
+import { NextRequest, NextResponse } from "next/server"
+import { Redis } from "@upstash/redis"
+import { Ratelimit } from "@upstash/ratelimit"
 
 const resend = new Resend(process.env.RESEND_API_KEY)
 
+const redis = new Redis({
+  url: process.env.UPSTASH_REDIS_REST_URL,
+  token: process.env.UPSTASH_REDIS_REST_TOKEN,
+})
 
+const ratelimit = new Ratelimit({
+  redis,
+  limiter: Ratelimit.fixedWindow(3, "1 m"),
+})
+
+export async function POST(request: NextRequest, response: NextResponse) {
+  const ip = request.ip ?? "127.0.0.1"
+
+  const result = await ratelimit.limit(ip)
+
+  if (!result.success) {
+    return Response.json(
+      {
+        error: "Too many requests!!",
+      },
+      {
+        status: 429,
+      }
+    )
+  }
 
-export async function POST(request: NextRequest, response: Response) {
   const { email, firstname } = await request.json()
 
-  // const { data, error } = await resend.emails.send({
-  //   from: "Lakshay <[email protected]>",
-  //   to: [email],
-  //   subject: "Thankyou for waitlisting morph2json!",
-  //   html: render(WelcomeTemplate({ userFirstname: firstname})),
-  // })
+  const { data, error } = await resend.emails.send({
+    from: "Lakshay <[email protected]>",
+    to: [email],
+    subject: "Thankyou for waitlisting morph2json!",
+    html: render(WelcomeTemplate({ userFirstname: firstname })),
+  })
+
+  if (error) {
+    return NextResponse.json(error)
+  }
 
-  // if (error) {
-  //   return Response.json(error)
-  // }
+  if (!data) {
+    return NextResponse.json({ message: "Failed to send email" })
+  }
 
-    return Response.json({message: "Email sent successfully"})
+  return NextResponse.json({ message: "Email sent successfully" })
 }

app/api/notion/waitlist/route.ts

@@ -19,6 +19,17 @@ export async function POST(request: Request) {
             },
           ],
         },
+        "First Name": {
+          type: "rich_text",
+          rich_text: [
+            {
+              type: "text",
+              text: {
+                content: body?.name,
+              },
+            },
+          ],
+        },
       },
     })
 

app/globals.css

@@ -2,3 +2,81 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 10% 3.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+body {
+  ::selection {
+    @apply bg-accent text-yellow-200;
+  }
+}

app/layout.tsx

@@ -1,22 +1,28 @@
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import "./globals.css";
+import "./globals.css"
+import type { Metadata } from "next"
+import { Figtree } from "next/font/google"
+import { Toaster } from "@/components/ui/sonner"
 
-const inter = Inter({ subsets: ["latin"] });
+const FigtreeFont = Figtree({ subsets: ["latin"] })
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
+  title:
+    "morph2json | Effortlessly Convert your raw data into a well structured JSON",
+  description:
+    "Join the waitlist to get early access to morph2json and get notified when it's ready for you to use.",
+}
 
 export default function RootLayout({
   children,
 }: Readonly<{
-  children: React.ReactNode;
+  children: React.ReactNode
 }>) {
   return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
+    <html lang="en" className="dark" suppressHydrationWarning>
+      <body className={FigtreeFont.className}>
+        {children}
+        <Toaster richColors position="top-center" />
+      </body>
     </html>
-  );
+  )
 }