landing page complete ✅

apps/web-v2/components.json

@@ -0,0 +1,17 @@
+{
+ "$schema": "https://ui.shadcn.com/schema.json",
+ "style": "default",
+ "rsc": true,
+ "tsx": true,
+ "tailwind": {
+ "config": "tailwind.config.ts",
+ "css": "src/app/globals.css",
+ "baseColor": "zinc",
+ "cssVariables": true,
+ "prefix": ""
+ },
+ "aliases": {
+ "components": "@/components",
+ "utils": "@/lib/utils"
+ }
+}

apps/web-v2/env.d.ts

@@ -1,4 +1,47 @@
 // Generated by Wrangler
 // by running `wrangler types --env-interface CloudflareEnv env.d.ts`
 
-interface CloudflareEnv {}
+interface CloudflareEnv {
+ RATELIMITER: RateLimitBinding;
+}
+
+export interface RateLimitBinding {
+ limit: LimitFunc;
+}
+
+export interface LimitFunc {
+ (options: LimitOptions): Promise<RateLimitResult>;
+}
+
+interface RateLimitResult {
+ success: boolean;
+}
+
+export interface LimitOptions {
+ key: string;
+}
+
+export interface RateLimitResponse {
+ key: string;
+ success: boolean;
+}
+
+export interface RateLimitOptions {
+ continueOnRateLimit: boolean;
+}
+
+export type RateLimitKeyFunc = {
+ (c: Context): string;
+};
+
+declare global {
+ namespace NodeJS {
+ interface ProcessEnv {
+ // [key: string]: string | undefined;
+ RATELIMITER: RateLimitBinding;
+ CLOUDFLARE_TURNSTILE_TOKEN: string;
+ }
+ }
+}
+
+export {};

apps/web-v2/package.json

@@ -13,9 +13,15 @@
  "cf-typegen": "wrangler types --env-interface CloudflareEnv env.d.ts"
  },
  "dependencies": {
+ "@radix-ui/react-toast": "^1.1.5",
+ "class-variance-authority": "^0.7.0",
+ "clsx": "^2.1.1",
+ "lucide-react": "^0.378.0",
+ "next": "14.1.0",
  "react": "^18",
  "react-dom": "^18",
- "next": "14.1.0"
+ "tailwind-merge": "^2.3.0",
+ "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
  "@cloudflare/next-on-pages": "1",

apps/web-v2/src/app/(landing)/Cta.tsx

@@ -0,0 +1,44 @@
+import Image from "next/image";
+import React from "react";
+import EmailInput from "./EmailInput";
+
+function Cta() {
+ return (
+ <section
+ id="try"
+ className="relative mb-32 mt-40 flex w-full flex-col items-center justify-center gap-8"
+ >
+ <div className="absolute left-0 z-[-1] h-full w-full">
+ {/* a blue gradient line that's slightly tilted with blur (a lotof blur)*/}
+ <div className="overflow-hidden">
+ <div
+ className="absolute left-0 h-32 w-full overflow-hidden bg-[#369DFD] bg-opacity-70 blur-[337.4px]"
+ style={{ transform: "rotate(-30deg)" }}
+ />
+ </div>
+ </div>
+ <Image
+ src="/landing-ui-2.png"
+ alt="Landing page background"
+ width={1512}
+ height={1405}
+ priority
+ draggable="false"
+ className="absolute z-[-2] hidden select-none rounded-3xl bg-black md:block lg:w-[80%]"
+ />
+ <h1 className="z-20 mt-4 text-center text-5xl font-light text-white">
+ Your bookmarks are collecting dust.
+ </h1>
+ <div className="text-center text-sm text-zinc-500">
+ Launching July 1st, 2024
+ </div>
+ <p className="text-soft-foreground-text z-20 text-center">
+ Time to change that. <br /> Sign up for the waitlist and be the first to
+ try Supermemory
+ </p>
+ <EmailInput />
+ </section>
+ );
+}
+
+export default Cta;

apps/web-v2/src/app/(landing)/EmailInput.tsx

@@ -1,15 +1,77 @@
-import React from "react";
+"use client";
+
+import { FormEvent, useState } from "react";
+import formSubmitAction from "./formSubmitAction";
+import { useToast } from "@/components/ui/use-toast";
 
 function EmailInput() {
+ const [email, setEmail] = useState("");
+ const { toast } = useToast();
+
  return (
- <div className="z-20 w-full rounded-2xl bg-gradient-to-br from-gray-200/70 to-transparent p-[0.7px] md:w-1/2">
- <input
- type="email"
- className="flex w-full items-center rounded-2xl bg-[#37485E] px-4 py-2 focus:outline-none"
- placeholder="Enter your email"
- autoFocus
- />
- </div>
+ <form
+ onSubmit={async (e: FormEvent<HTMLFormElement>) => {
+ e.preventDefault();
+
+ const value = await formSubmitAction(email, "token" as string);
+
+ if (value.success) {
+ setEmail("");
+ toast({
+ title: "You are now on the waitlist! 🎉",
+ description:
+ "We will notify you when we launch. Check your inbox and spam folder for a surprise! 🎁",
+ });
+ } else {
+ console.error("email submission failed: ", value.value);
+ toast({
+ variant: "destructive",
+ title: "Uh oh! Something went wrong.",
+ description: `${value.value}`,
+ });
+ }
+ }}
+ className="flex w-full items-center justify-center gap-2"
+ >
+ <div
+ className={`transition-width z-20 rounded-2xl bg-gradient-to-br from-gray-200/70 to-transparent p-[0.7px] duration-300 ease-in-out ${email ? "w-[90%] md:w-[42%]" : "w-full md:w-1/2"}`}
+ >
+ <input
+ type="email"
+ name="email"
+ className={`transition-width flex w-full items-center rounded-2xl bg-[#37485E] px-4 py-2 duration-300 focus:outline-none`}
+ placeholder="Enter your email"
+ value={email}
+ required
+ onChange={(e) => setEmail(e.target.value)}
+ />
+ </div>
+ <div
+ className="cf-turnstile"
+ data-sitekey="0x4AAAAAAAakohhUeXc99J7E"
+ ></div>
+ {email && (
+ <button
+ type="submit"
+ className="transition-width rounded-xl bg-gray-700 p-2 text-white duration-300"
+ >
+ <svg
+ xmlns="http:https://www.w3.org/2000/svg"
+ fill="none"
+ viewBox="0 0 24 24"
+ strokeWidth={1.5}
+ stroke="currentColor"
+ className="h-6 w-6"
+ >
+ <path
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5"
+ />
+ </svg>
+ </button>
+ )}
+ </form>
  );
 }