Landing page (#1031)

* feat:tailwindcss config and basic component layouts

* feat:placeholder content structure for new landing page

* wip: desktop ui design

* feat: new landing page design - desktop mode

* feat: mobile responsive design

* fix: mobile accordion and images/icons hidden

* fix: updated assets, reference links and design for mobile and desktop

docusaurus.config.js

@@ -324,6 +324,17 @@ const config = {
         ],
       },
     ],
+    async function myPlugin(context, options) {
+      return {
+        name: "docusaurus-tailwindcss",
+        configurePostCss(postcssOptions) {
+          // Appends TailwindCSS and AutoPrefixer.
+          postcssOptions.plugins.push(require("tailwindcss"));
+          postcssOptions.plugins.push(require("autoprefixer"));
+          return postcssOptions;
+        },
+      };
+    },
   ],
 
   // plugins: ['@docusaurus/plugin-google-gtag'],

package.json

@@ -46,6 +46,9 @@
   "devDependencies": {
     "@docusaurus/module-type-aliases": "^2.4.0",
     "@tsconfig/docusaurus": "^1.0.5",
+    "autoprefixer": "10.4.14",
+    "postcss": "8.4.27",
+    "tailwindcss": "^3.3.3",
     "typescript": "^4.6.3"
   }
 }

src/components/ui/Button.tsx

@@ -0,0 +1,41 @@
+import Link from "@docusaurus/Link";
+import React from "react";
+
+const Button = ({
+  isButton = false,
+  children,
+  outlined = false,
+  href = null,
+  to = "/",
+  className = "",
+  id = "",
+}) => {
+  const classNames = {
+    isButton:
+      "inline-block border-none outline-none px-8 py-2 text-white rounded-md font-heading text-md font-medium hover:text-white no-underline text-center",
+    filled: "primary-gradient",
+    outlined: "border-gradient bg-[#1b1b1d]",
+    inline: "text-tertiary underline",
+  };
+  const linkProps = {
+    [href ? "href" : "to"]: href ? href : to,
+    [href ? "rel" : "data-prop"]: "noopener noreferrer nofollow",
+    [href ? "target" : "data-prop"]: "_blank",
+  };
+
+  return (
+    <Link
+      className={`cursor-pointer
+        ${isButton ? classNames.isButton : classNames.inline}
+        ${isButton ? (outlined ? classNames.outlined : classNames.filled) : ""}
+        ${className}
+      `}
+      id={id}
+      {...linkProps}
+    >
+      {children}
+    </Link>
+  );
+};
+
+export default Button;

src/components/ui/Heading.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+
+const Heading = ({ type, className = "", children }) => {
+  switch (type) {
+    case 1:
+      return (
+        <h1
+          className={`font-heading text-4xl font-bold text-gradient ${className}`}
+        >
+          {children}
+        </h1>
+      );
+    case 2:
+      return (
+        <h2
+          className={`font-heading text-3xl font-bold text-gradient ${className}`}
+        >
+          {children}
+        </h2>
+      );
+    case 3:
+      return (
+        <h3 className={`font-heading text-2xl font-bold ${className}`}>
+          {children}
+        </h3>
+      );
+    case 4:
+      return (
+        <h4
+          className={`font-heading text-xl font-light uppercase text-gray-300 ${className}`}
+        >
+          {children}
+        </h4>
+      );
+    case 5:
+      return (
+        <h5 className={`font-heading text-lg font-semibold ${className}`}>
+          {children}
+        </h5>
+      );
+    case 6:
+      return (
+        <h6 className={`font-heading text-base font-medium ${className}`}>
+          {children}
+        </h6>
+      );
+
+    default:
+      return <Heading type={1}>{children}</Heading>;
+  }
+};
+
+export default Heading;

src/components/ui/Hero.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+const Hero = ({ children }) => {
+  return (
+    <h1 className="my-2 text-3xl font-medium tracking-tight dark:text-white sm:my-6 md:leading-none lg:text-5xl text-gradient">
+      {children}
+    </h1>
+  );
+};
+
+export default Hero;

src/components/ui/SubHeading.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+const SubHeading = ({ children, className = "" }) => {
+  return (
+    <h3
+      className={`font-heading text-lg font-normal text-gray-200 ${className}`}
+    >
+      {children}
+    </h3>
+  );
+};
+
+export default SubHeading;