feat: Implement waitlist page (#210)

Fix #152

components/molecules/AvatarRoll/avatar-roll.tsx

@@ -0,0 +1,47 @@
+import Avatar from "components/atoms/Avatar/avatar";
+
+interface AvatarRollProps {
+  avatarCount?: number;
+}
+
+const AvatarRoll = ({ avatarCount = 9 }: AvatarRollProps): JSX.Element => {
+  const rollCount = Array.apply(null, Array(avatarCount));
+
+  return (
+    <div className="flex gap-3 items-center">
+      {rollCount.map((roll, index) => (
+        <div
+          key={index}
+          className={`${
+            index === 0 || index === 8
+              ? "opacity-20"
+              : index === 1 || index === 7
+                ? "opacity-40"
+                : index === 2 || index === 6
+                  ? "opacity-60"
+                  : index === 3 || index === 5
+                    ? "opacity-80"
+                    : "opacity-100"
+          }`}
+        >
+          <Avatar
+            size={
+              index === 0 || index === 8
+                ? 24
+                : index === 1 || index === 7
+                  ? 32
+                  : index === 2 || index === 6
+                    ? 40
+                    : index === 3 || index === 5
+                      ? 44
+                      : 48
+            }
+            avatarURL="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1064&q=80"
+          />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default AvatarRoll;

components/molecules/ComponentGradient/component-gradient.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+interface ComponentGradientProps {
+  children: React.ReactNode;
+  css?: string;
+}
+
+const ComponentGradient = ({ children, css }: ComponentGradientProps) => {
+  return (
+
+    <div className="relative overflow-hidden flex justify-center bg-gradient-to-b h-screen from-gradient-dark-one to-gradient-dark-two">
+      {/* orange gradient overlay */}
+      <div className="text-white  absolute blur-4xl -bottom-97  w-99 h-98 bg-gradient-radial from-gradient-orange-two to-gradient-orange-one  rounded-full">
+      </div>
+      <section>{children}</section>
+    </div>
+  );
+};
+
+export default ComponentGradient;

components/organisms/Waitlist/waitlist.tsx

@@ -0,0 +1,47 @@
+import ComponentGradient from "../../molecules/ComponentGradient/component-gradient";
+import HeaderLogo from "components/molecules/HeaderLogo/header-logo";
+import Text from "components/atoms/Typography/text";
+import Title from "components/atoms/Typography/title";
+import Button from "components/atoms/Button/button";
+import {FiArrowLeft} from "react-icons/fi";
+import {FaGithub} from "react-icons/fa";
+import AvatarRoll from "components/molecules/AvatarRoll/avatar-roll";
+const WaitlistComponent = () => {
+  return (
+    <ComponentGradient>
+      <div className="z-10">
+        <div className="py-3 flex justify-center">
+          <HeaderLogo withBg={false} />
+        </div>
+        <div className="mt-24">
+          <div className="text-center">
+            <Text className="!text-2xl !font-semibold !text-dark-orange-9 tracking-tight z-10">
+              Thanks for signing up!
+            </Text>
+          </div>
+          <div className="max-w-2xl mt-7 px-9 font-semibold">
+            <Title className="text-center tracking-tight leading-10 !text-light-slate-1" level={1}>
+              You and 32 others are on the Open Sauced waitlist.
+            </Title>
+          </div>
+          <div className="flex mt-8 justify-center">
+            <AvatarRoll avatarCount={9} />
+          </div>
+          <div className="flex mt-8 flex-col items-center">
+            <Button
+              className="!text-lg hover:!border-dark-orange-9 focus-visible:!ring-dark-orange-3 focus-visible:!ring-2 hover:!bg-dark-orange-3  !bg-dark-orange-2 !border-dark-orange-7 !font-semibold"
+              type="outline"
+            >
+              <FaGithub className="mr-2"/> Share on Twitter
+            </Button>
+            <Button className="hover:!bg-dark-orange-3  mt-3" type="link">
+              <FiArrowLeft className="mr-1 font-bold" /> Go back home
+            </Button>
+          </div>
+        </div>
+      </div>
+    </ComponentGradient>
+  );
+};
+
+export default WaitlistComponent;

stories/molecules/avatar-roll.stories.tsx

@@ -0,0 +1,11 @@
+import { ComponentStory } from "@storybook/react";
+import AvatarRoll from "components/molecules/AvatarRoll/avatar-roll";
+
+const StoryConfig = {
+  title: "Design System/Molecules/AvatarRoll"
+};
+export default StoryConfig;
+
+const AvatarRollTemplate: ComponentStory<typeof AvatarRoll> = (args) => <AvatarRoll {...args} />;
+
+export const AvatarRollDefault = AvatarRollTemplate.bind({});

stories/molecules/component-gradient.stories.tsx

@@ -0,0 +1,12 @@
+import { ComponentStory } from "@storybook/react";
+import ComponentGradient from "components/molecules/ComponentGradient/component-gradient";
+
+const StoryConfig = {
+  title: "Design System/Molecules/ComponentGradient"
+};
+export default StoryConfig;
+const ComponentGradientTemplate: ComponentStory<typeof ComponentGradient> = (args) => <ComponentGradient {...args} />;
+
+export const Default = ComponentGradientTemplate.bind({});
+
+Default.args = {};

stories/organisms/component-waitlist.stories.tsx

@@ -0,0 +1,9 @@
+import WaitlistComponent from "components/organisms/Waitlist/waitlist";
+
+const StoryConfig = {
+  title: "Design System/Organisms/WaitlistComponent"
+};
+export default StoryConfig;
+
+const WaitlistComponentTemplate: React.FC<typeof WaitlistComponent> = (args) => <WaitlistComponent {...args} />;
+export const Waitlist = WaitlistComponentTemplate.bind({});

tailwind.config.js

@@ -12,7 +12,21 @@ module.exports = {
         "2xl": "1440px"
         // => @media (min-width: 1440px) { ... }
       },
+      blur: {
+        "4xl": "5rem"
+      },
+      spacing:{
+        "98": "29rem",
+        "97":"28rem",
+        "99":"56rem"
+      },
       colors: {
+        gradient: {
+          "dark-two": "hsl(26, 54%, 15%)",
+          "dark-one": "hsl(23, 75%, 5%)",
+          "orange-one": "	hsl(33, 100%, 50%)",
+          "orange-two": "	hsl(19, 100%, 50%)"
+        },
         light: {
           slate: {
             1: "hsl(206, 30.0%, 98.8%)",
@@ -187,8 +201,11 @@ module.exports = {
         }
       },
       boxShadow: {
-        login: "0px 64px 100px -80px #FF5F13, 0px 16px 56px rgba(181, 107, 72, 0.19)",
-        superlative: "0px 22px 24px -8px rgba(0, 0, 0, 0.05), 0px 4px 8px rgba(0, 0, 0, 0.1)"
+        "login": "0px 64px 100px -80px #FF5F13, 0px 16px 56px rgba(181, 107, 72, 0.19)",
+        "superlative": "0px 22px 24px -8px rgba(0, 0, 0, 0.05), 0px 4px 8px rgba(0, 0, 0, 0.1)"
+      },
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))"
       }
     }
   },