Feat(www): shuttle beta signup (#421)

* feat(www): add beta signup form

* feat: add formspree endpoint

* feat: remove socials footer from beta page

* feat: add dummy text above sign up form

* feat: placeholder gif

* feat: align dummy text left

* feat: remove gif, add text

* feat: update beta page text

* feat: update the rest of the site

www/components/BetaHero.tsx

@@ -0,0 +1,29 @@
+import { useRouter } from "next/router";
+import SignupForm from "./SignupForm";
+
+const BetaHero = () => {
+  const { basePath } = useRouter();
+  return (
+    <div className="-mt-8 flex min-h-screen w-full flex-col justify-center dark:bg-dark-700">
+      <div className="mx-auto py-5 xl:px-12">
+        <div className="p-6 sm:py-5">
+          <div className="m-auto flex max-w-3xl flex-col gap-4 text-center sm:gap-10">
+            <div className="relative m-auto flex">
+              <img
+                className="h-20 w-auto"
+                src={`${basePath}/images/logo.png`}
+                alt="Shuttle"
+              />
+              <span className="absolute bottom-[-26px] right-[-5px] scale-[.8] rounded bg-brand-orange1 px-[10px] py-[2px] text-base font-bold text-slate-100 dark:text-dark-700">
+                BETA
+              </span>
+            </div>
+            <SignupForm />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BetaHero;

www/components/Examples.tsx

@@ -40,7 +40,7 @@ export default function Examples() {
       <div className="mx-auto max-w-6xl px-4 pt-16 pb-20 sm:px-6 lg:px-8 lg:pt-24 lg:pb-28">
         <div className="text-center">
           <h2 className="text-3xl font-extrabold tracking-tight dark:text-gray-200 sm:text-4xl">
-            From code to cloud in a minute
+            The Fastest Development Experience, ever.
           </h2>
           <p className="mx-auto mt-3 max-w-2xl text-xl text-slate-500 dark:text-gray-300 sm:mt-4">
             Take your code to full-featured cloud infrastructure in under a

www/components/Features.tsx

@@ -2,29 +2,27 @@ import { CheckIcon } from "@heroicons/react/outline";
 
 const features = [
   {
-    name: "Infrastructure from Rust",
+    name: "Skip the AWS console",
     description:
-      "Traits and annotations define all your infrastructure from your service code",
+      "Configure your infrastructure directly from your Rust code. Avoid unnecessary context-switching and complicated UIs.",
   },
   {
-    name: "Serverless",
+    name: "Compile-time insurance",
     description:
-      "All the infrastructure and wiring you need is handled by the deployer runtime. No VMs or containers",
+      "Know that you are getting what you need at compile-time. Cut down on debugging time.",
   },
   {
     name: "Databases",
     description:
-      "Wiring up a service to a persistent database is as easy as deriving a trait",
+      "Wiring up a service to a persistent database is as easy as adding one line of code. And we support multiple providers.",
   },
   {
     name: "Entirely open-source",
-    description:
-      "A completely free and open-source project, with no vendor lock-in or hidden code",
+    description: "A completely free and open-source project.",
   },
   {
-    name: "Self-hosting friendly",
-    description:
-      "Deploy the entire platform under your own AWS account for extra security and isolation",
+    name: "Generous free tier",
+    description: "Start deploying your apps with no strings attached.",
   },
   {
     name: "Fast deploy times",
@@ -42,11 +40,10 @@ export default function Features() {
       <div className="mx-auto max-w-6xl py-16 px-4 sm:px-6 lg:py-24 lg:px-8">
         <div className="mx-auto max-w-3xl text-center">
           <h2 className="text-3xl font-extrabold tracking-tight dark:text-gray-200 sm:text-4xl">
-            Serverless for Rust
+            Deploy Apps with a Single Command
           </h2>
           <p className="mt-4 text-xl text-slate-500 dark:text-gray-300">
-            The only serverless platform that lets you control your
-            infrastructure from Rust code as easily as deriving a trait.
+            Control your infrastructure by adding annotations to your code.
           </p>
         </div>
         <dl className="mt-12 space-y-10 sm:grid sm:grid-cols-2 sm:gap-x-6 sm:gap-y-12 sm:space-y-0 lg:grid-cols-3 lg:gap-x-8">

www/components/Footer.tsx

@@ -100,14 +100,11 @@ export default function Footer() {
           </ExternalLink>
         ))}
       </div>
-
+      {/* 
       <div className="mx-auto max-w-2xl py-20 px-4 text-center sm:py-28 sm:px-6 lg:px-8">
         <h2 className="text-3xl font-extrabold tracking-tight dark:text-gray-200 sm:text-4xl">
           Let's make Rust the next language of cloud-native
         </h2>
-        <p className="mt-4 text-xl dark:text-gray-300">
-          We love you Go, but Rust is just better.
-        </p>
         <div className="mt-8 flex justify-center gap-3">
           {communities.map((community, index) => (
             <ExternalLink
@@ -123,32 +120,10 @@ export default function Footer() {
             </ExternalLink>
           ))}
         </div>
-      </div>
-
-      {/* <div className="mx-auto max-w-6xl py-12 px-4 sm:px-6 md:py-16 lg:px-8 lg:py-20">
-        <h2 className="text-3xl font-extrabold tracking-tight dark:text-gray-200 sm:text-4xl">
-          <span className="block">Ready to dive in?</span>
-          <span className="block dark:text-gray-300">
-            Start your free trial today.
-          </span>
-        </h2>
-        <div className="mt-8 flex justify-start gap-4">
-          <ExternalLink
-            className="rounded dark:bg-brand-900 py-3 px-8 font-bold dark:text-white transition hover:dark:bg-brand-700"
-            href={SHUTTLE_DOCS_URL}
-          >
-            Get Started
-          </ExternalLink>
-
-          <ExternalLink
-            className="rounded dark:bg-brand-purple1 py-3 px-8 font-bold dark:text-white transition hover:brightness-125"
-            href={DISCORD_URL}
-          >
-            Join Discord
-          </ExternalLink>
-        </div>
       </div> */}
 
+      {/* <Socials /> */}
+
       <footer className="mx-auto max-w-6xl py-12 px-4 sm:px-6 lg:px-8">
         <div className="-m-4 flex flex-wrap justify-between pb-8">
           {navigation.map((col, index) => (

www/components/Header.tsx

@@ -12,6 +12,7 @@ const navigation = [
   { name: "Docs", href: SHUTTLE_DOCS_URL, internal: false },
   { name: "Blog", href: "/blog", internal: true },
   { name: "Pricing", href: "/pricing", internal: true },
+  { name: "Beta", href: "/beta", internal: true },
 ];
 
 export default function Header() {

www/components/SignupForm.tsx

@@ -0,0 +1,85 @@
+import { useForm, ValidationError } from "@formspree/react";
+import {
+  CONTRIBUTING_URL,
+  DISCORD_URL,
+  FORMSPREE_ENDPOINT,
+  GITHUB_URL,
+  TWITTER_URL,
+} from "../lib/constants";
+import ExternalLink from "./ExternalLink";
+import Image from "next/image";
+const links = [
+  { name: "💻 contributing to shuttle", href: CONTRIBUTING_URL },
+  { name: "⭐️ starring the repository", href: GITHUB_URL },
+  { name: "👾 joining our discord community", href: DISCORD_URL },
+  { name: "🐦 following us on twitter", href: TWITTER_URL },
+];
+export default function SignupForm() {
+  const [state, handleSubmit] = useForm(FORMSPREE_ENDPOINT);
+
+  if (state.succeeded) {
+    return (
+      <div className="mb-4 lg:col-span-5">
+        <p className="mt-3 text-lg text-slate-500 dark:text-gray-300 sm:mt-4">
+          Thank you for registering your interest in the next iteration of
+          shuttle.
+        </p>
+        <p className="text-lg text-slate-500 dark:text-gray-300">
+          If you are looking for a way to support shuttle in the meantime, you
+          can do so by:
+        </p>
+        <div className="mt-3 flex flex-col">
+          {links.map((link) => (
+            <ExternalLink
+              key={link.name}
+              href={link.href}
+              className="mt-3 text-lg text-slate-600 hover:text-slate-900 dark:text-gray-200 hover:dark:text-white"
+            >
+              {link.name}
+            </ExternalLink>
+          ))}
+        </div>
+      </div>
+    );
+  }
+  return (
+    <>
+      <div className="mt-5">
+        <div className="mb-7 text-4xl font-bold dark:text-gray-200 sm:text-5xl md:text-6xl">
+          Build Backends. Fast.
+        </div>
+        <div className="mt-4 px-10 text-xl text-slate-500 dark:text-gray-300">
+          Sign up to our closed beta and get updated on the{" "}
+          {
+            <ExternalLink
+              key="shuttle-next"
+              href="https://shuttle.rs/blog/2022/10/21/shuttle-beta"
+              className="text-brand-orange1 hover:text-brand-orange2"
+            >
+              next iteration of shuttle
+            </ExternalLink>
+          }
+          , a serverless backend framework with the fastest build, test and
+          deploy times ever.
+        </div>
+      </div>
+      <form onSubmit={handleSubmit} className="align-center flex flex-col">
+        <input
+          id="email"
+          type="email"
+          name="email"
+          placeholder={`[email protected]`}
+          className="text-m mt-2 block w-full max-w-sm self-center rounded border border-gray-300 bg-slate-300 p-4 text-slate-700  hover:border-brand-orange1 focus:border-brand-orange1 focus:ring-brand-orange1 dark:border-gray-600 dark:bg-gray-500 dark:text-white dark:placeholder-gray-400 dark:focus:border-brand-orange1 dark:focus:ring-brand-orange1"
+        />
+        <ValidationError prefix="Email" field="email" errors={state.errors} />
+        <button
+          type="submit"
+          className="mt-6 self-center rounded bg-brand-900 py-3 px-8 font-bold text-white transition hover:bg-brand-700"
+          disabled={state.submitting}
+        >
+          Sign Up
+        </button>
+      </form>
+    </>
+  );
+}

www/components/Socials.tsx

@@ -0,0 +1,52 @@
+import {
+  faDiscord,
+  faGithub,
+  faTwitter,
+} from "@fortawesome/free-brands-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { DISCORD_URL, GITHUB_URL, TWITTER_URL } from "../lib/constants";
+import ExternalLink from "./ExternalLink";
+
+const communities = [
+  {
+    name: "Github",
+    href: GITHUB_URL,
+    icon: faGithub,
+  },
+  {
+    name: "Discord",
+    href: DISCORD_URL,
+    icon: faDiscord,
+  },
+  {
+    name: "Twitter",
+    href: TWITTER_URL,
+    icon: faTwitter,
+  },
+];
+
+export default function Socials() {
+  return (
+    <div className="mx-auto max-w-2xl py-20 px-4 text-center sm:py-28 sm:px-6 lg:px-8">
+      <h2 className="text-3xl font-extrabold tracking-tight dark:text-gray-200 sm:text-4xl">
+        Let's Build the Future of Backend Development Together
+      </h2>
+
+      <div className="mt-8 flex justify-center gap-3">
+        {communities.map((community, index) => (
+          <ExternalLink
+            key={index}
+            href={community.href}
+            className="inline-block rounded border border-current py-3 px-5 text-base font-medium text-slate-600 hover:text-slate-900 dark:text-gray-200 hover:dark:text-white"
+          >
+            <FontAwesomeIcon
+              className="-ml-1 mr-3 text-current transition"
+              icon={community.icon}
+            />
+            {community.name}
+          </ExternalLink>
+        ))}
+      </div>
+    </div>
+  );
+}

www/lib/constants.ts

@@ -1,18 +1,20 @@
 export const APP_NAME = "shuttle";
 
-export const SITE_TITLE = "Stateful Serverless for Rust";
+export const SITE_TITLE = "Build Backends. Fast.";
 
 export const SITE_DESCRIPTION =
-  "Shuttle is a web application platform that uses traits and annotations to configure your backend deployment - including databases.";
+  "Stop worrying about the infrastructure. Focus on writing code, shuttle will do the rest.";
 
 export const SITE_URL = "https://shuttle.rs/";
 
 export const TWITTER_HANDLE = "@shuttle_dev";
 
 export const GA_MEASUREMENT_ID = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID;
+export const FORMSPREE_ENDPOINT = process.env.NEXT_PUBLIC_FORMSPREE_ENDPOINT;
 
 export const GITHUB_URL = "https://github.com/shuttle-hq/shuttle";
 export const DISCORD_URL = "https://discord.gg/shuttle";
 export const TWITTER_URL = "https://twitter.com/shuttle_dev";
-export const SHUTTLE_DOCS_URL =
-  "https://docs.shuttle.rs/";
+export const SHUTTLE_DOCS_URL = "https://docs.shuttle.rs/";
+export const CONTRIBUTING_URL =
+  "https://github.com/shuttle-hq/shuttle/blob/main/CONTRIBUTING.md";

www/package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@auth0/nextjs-auth0": "^1.7.0",
+    "@formspree/react": "^2.4.0",
     "@fortawesome/fontawesome-svg-core": "^6.1.0",
     "@fortawesome/free-brands-svg-icons": "^6.1.0",
     "@fortawesome/free-regular-svg-icons": "^6.1.0",

www/pages/beta.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+import BetaHero from "../components/BetaHero";
+
+export default function ShuttleNext() {
+  return (
+    <>
+      <BetaHero />
+    </>
+  );
+}

www/pages/blog.tsx

@@ -9,6 +9,7 @@ import { SITE_URL } from "../lib/constants";
 import { GetStaticPropsResult } from "next";
 import InternalLink from "../components/InternalLink";
 import classnames from "classnames";
+import Socials from "../components/Socials";
 
 export async function getStaticProps(): Promise<GetStaticPropsResult<Props>> {
   const allPostsData = getSortedPosts();
@@ -142,6 +143,7 @@ export default function Blog(props: Props): JSX.Element {
           </ol>
         </div>
       </div>
+      <Socials />
     </>
   );
 }

www/pages/index.tsx

@@ -3,6 +3,7 @@ import Examples from "../components/Examples";
 import CodeSnippets from "../components/CodeSnippets";
 import Features from "../components/Features";
 import Hero from "../components/Hero";
+import Socials from "../components/Socials";
 
 export default function Home() {
   return (
@@ -11,6 +12,7 @@ export default function Home() {
       <Features />
       <Examples />
       <CodeSnippets />
+      <Socials />
     </>
   );
 }