Merge pull request #8 from dartilesm/feature/landing-page

Create the wait list landing page

apps/chat-with-pdf/app/components/sidebar/app-sidebar.tsx

@@ -1,24 +1,13 @@
 "use client";
 
 import {
-  AudioWaveform,
   BadgeCheck,
   Bell,
-  BookOpen,
-  Bot,
   ChevronsUpDown,
-  Command,
   CreditCard,
-  Frame,
-  GalleryVerticalEnd,
   LogOut,
-  Map,
-  PieChart,
   Plus,
-  Settings2,
   Sparkles,
-  SparklesIcon,
-  SquareTerminal,
 } from "lucide-react";
 
 import { createClient } from "@/lib/supabase/client";

apps/landing/actions/resend-create-contact.ts

@@ -0,0 +1,35 @@
+"use server";
+
+import { Ratelimit } from "@upstash/ratelimit";
+import { kv } from "@vercel/kv";
+import { headers } from "next/headers";
+import { Resend } from "resend";
+
+const resend = new Resend(process.env.RESEND_API_KEY);
+
+const ratelimit = new Ratelimit({
+  redis: kv,
+  // rate limit to 10 requests per 24 hours
+  limiter: Ratelimit.slidingWindow(10, "24h"),
+});
+
+export async function resendCreateContact(email: string) {
+  const ip = headers().get("x-forwarded-for") ?? "127.0.0.1";
+  const { success } = await ratelimit.limit(ip);
+
+  if (!success) {
+    return {
+      data: null,
+      error: {
+        message:
+          "You already registered too many emails. Please try again later.",
+      },
+    };
+  }
+
+  const res = await resend.contacts.create({
+    email,
+    audienceId: process.env.RESEND_GENERAL_AUDIENCE_ID!,
+  });
+  return res;
+}

apps/landing/app/components/hero.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { TextRotate } from "@/components/shared/text-rotate";
+import { WaitListForm } from "@/components/wait-list-form";
+import LogoHorizontal from "@/public/logo-horizontal.svg";
+import { useEffect, useState } from "react";
+
+const dynamicTexts = ["optimize it", "simplify it", "accelerate it"];
+
+export default function Hero() {
+  const [currentDynamicText, setCurrentDynamicText] = useState<string>(
+    dynamicTexts[0]!,
+  );
+
+  useEffect(handleTextChange, []);
+
+  function handleTextChange() {
+    const timeout = setTimeout(() => {
+      // Change the text incrementally
+      setCurrentDynamicText((_currentDynamicText) => {
+        const currentIndex = dynamicTexts.indexOf(_currentDynamicText);
+        const nextIndex =
+          currentIndex + 1 >= dynamicTexts.length ? 0 : currentIndex + 1;
+        return dynamicTexts[nextIndex]!;
+      });
+      handleTextChange();
+    }, 5000);
+
+    return () => clearTimeout(timeout);
+  }
+
+  return (
+    <div className="flex w-full flex-col items-center justify-center">
+      <div className="absolute top-0 z-[-2] h-screen w-screen bg-neutral-950 bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(120,119,198,0.3),rgba(255,255,255,0))]"></div>
+      <div className="z-10 flex w-full max-w-3xl flex-col justify-center px-5 xl:px-0">
+        <div className="animate-in fade-in slide-in-from-bottom-10 flex aspect-square h-10 items-center justify-center rounded-md transition-colors duration-1000">
+          <LogoHorizontal className="fill-accent-foreground h-full w-auto" />
+        </div>
+        <h1 className="animate-in fade-in slide-in-from-bottom-10 mt-6 bg-gradient-to-br from-white to-gray-400 bg-clip-text text-center text-4xl font-bold tracking-tighter text-transparent drop-shadow-sm duration-1000 [text-wrap:balance] md:text-6xl md:leading-[5rem]">
+          Let AI{" "}
+          <div className="relative inline-block">
+            <div className="relative">
+              <TextRotate className="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 bg-clip-text text-transparent [text-shadow:_0_1px_10px_rgb(59_130_246_/_30%)]">
+                {currentDynamicText}
+              </TextRotate>
+            </div>
+          </div>
+        </h1>
+        <p
+          className="animate-in fade-in slide-in-from-bottom-10 delay-250 mt-6 text-center text-gray-500 duration-1000 [text-wrap:balance] md:text-xl"
+          style={{ animationFillMode: "forwards" }}
+        >
+          Makify is a collection of tools with AI to make your life easier than
+          ever. Join the waitlist to get early access.
+        </p>
+        <div className="animate-in fade-in slide-in-from-bottom-10 fill-mode-forwards mx-auto mt-6 flex items-center justify-center space-x-5 delay-300 duration-1000">
+          <WaitListForm />
+        </div>
+      </div>
+    </div>
+  );
+}

apps/landing/app/components/layout/nav.tsx

@@ -0,0 +1,5 @@
+import Navbar from "./navbar";
+
+export default async function Nav() {
+  return <Navbar />;
+}

apps/landing/app/components/layout/navbar.tsx

@@ -0,0 +1,52 @@
+import { Button } from "@makify/ui";
+import Link from "next/link";
+
+export default function NavBar() {
+  return (
+    <div
+      className={`fixed top-0 z-30 flex w-full justify-center transition-all`}
+    >
+      <div className="mx-5 flex h-16 w-full max-w-screen-xl items-center justify-between">
+        <div className="flex flex-row gap-8"></div>
+        <div>
+          <div className="flex items-center gap-4">
+            <Button variant="ghost" size="icon" asChild>
+              <Link
+                href="https://x.com/intent/follow?screen_name=makifyapp"
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="X (Twitter)"
+              >
+                <svg
+                  className="fill-muted-foreground h-5 w-5"
+                  fill="currentColor"
+                  viewBox="0 0 24 24"
+                  aria-hidden="true"
+                >
+                  <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+                </svg>
+              </Link>
+            </Button>
+            <Button variant="ghost" size="icon" asChild>
+              <Link
+                href="https://www.linkedin.com/in/dartiles/"
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="LinkedIn"
+              >
+                <svg
+                  className="fill-muted-foreground h-5 w-5"
+                  fill="currentColor"
+                  viewBox="0 0 24 24"
+                  aria-hidden="true"
+                >
+                  <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
+                </svg>
+              </Link>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}