diff --git a/components/molecules/AvatarRoll/avatar-roll.tsx b/components/molecules/AvatarRoll/avatar-roll.tsx
new file mode 100644
index 0000000000..678e1ec0ab
--- /dev/null
+++ b/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 (
+
+ {rollCount.map((roll, index) => (
+
+ ))}
+
+ );
+};
+
+export default AvatarRoll;
diff --git a/components/molecules/ComponentGradient/component-gradient.tsx b/components/molecules/ComponentGradient/component-gradient.tsx
new file mode 100644
index 0000000000..9aec0bca60
--- /dev/null
+++ b/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 (
+
+
+ {/* orange gradient overlay */}
+
+
+
+
+ );
+};
+
+export default ComponentGradient;
diff --git a/components/organisms/Waitlist/waitlist.tsx b/components/organisms/Waitlist/waitlist.tsx
new file mode 100644
index 0000000000..c803f2ebdc
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+
+
+ Thanks for signing up!
+
+
+
+
+ You and 32 others are on the Open Sauced waitlist.
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default WaitlistComponent;
diff --git a/stories/molecules/avatar-roll.stories.tsx b/stories/molecules/avatar-roll.stories.tsx
new file mode 100644
index 0000000000..f793dd903b
--- /dev/null
+++ b/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 = (args) => ;
+
+export const AvatarRollDefault = AvatarRollTemplate.bind({});
diff --git a/stories/molecules/component-gradient.stories.tsx b/stories/molecules/component-gradient.stories.tsx
new file mode 100644
index 0000000000..c27c808c17
--- /dev/null
+++ b/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 = (args) => ;
+
+export const Default = ComponentGradientTemplate.bind({});
+
+Default.args = {};
diff --git a/stories/organisms/component-waitlist.stories.tsx b/stories/organisms/component-waitlist.stories.tsx
new file mode 100644
index 0000000000..9e1eeecbd2
--- /dev/null
+++ b/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 = (args) => ;
+export const Waitlist = WaitlistComponentTemplate.bind({});
diff --git a/tailwind.config.js b/tailwind.config.js
index 09103ce0e2..ab17eb5f4d 100644
--- a/tailwind.config.js
+++ b/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))"
}
}
},