- intial gatsbyJS setup

- setting up tailwindcss and other plugins
- designing the landing page
- creating a reusable button component

src/components/shared/Button.js

@@ -0,0 +1,22 @@
+import React from "react";
+import classNames from "classnames";
+import Loader from "react-loader-spinner";
+import styles from "./Button.module.css";
+
+const Button = ({ text, isLoading, outline, className }) => {
+  const getClasses = classNames(styles.container, className, {
+    [styles.outline]: outline,
+  });
+
+  return (
+    <div className={getClasses}>
+      {isLoading ? (
+        <Loader type="ThreeDots" color="#FFF" height={18} width={28} />
+      ) : (
+        text
+      )}
+    </div>
+  );
+};
+
+export default Button;

src/components/shared/Button.module.css

@@ -0,0 +1,16 @@
+.container {
+  padding: 6px 24px;
+  @apply flex items-center cursor-pointer inline-flex rounded font-semibold bg-primary text-inverse;
+}
+
+.container:hover {
+  @apply bg-primary-dark;
+}
+
+.container.outline {
+  @apply border border-primary bg-inverse text-primary;
+}
+
+.container.outline:hover {
+  @apply bg-inverse-dark;
+}