From 53a55dc69125918db3b6b1fc5fee0df636b1218a Mon Sep 17 00:00:00 2001
From: Ahmed Cool Projects
 <72823374+AhmedCoolProjects@users.noreply.github.com>
Date: Sun, 20 Nov 2022 03:13:23 +0100
Subject: [PATCH] Fixing Home Page Design (#1561)

## Description

<!-- Insert PR description-->

## Type of change

<!--- Please check the type of change your PR introduces: --->
- [x] :sunflower: Feature
- [ ] :bug: Bugfix
- [ ] :world_map: Documentation
- [ ] :robot: Test
- [ ] :computer: CI/Deployment
- [ ] :hamster: Trivial/Minor

## Issue(s)

<!-- Can reference multiple issues. Use one of the following "magic words" - "closes, fixes" to auto-close the Github issue. -->
* #<issue>

## Test Plan

<!-- How will this be tested prior to merging.-->
- [ ] :muscle: Manual
- [ ] :zap: Unit test
- [ ] :green_heart: E2E
---
 docs/src/components/parts/Cookies.js       |  2 +-
 docs/src/components/parts/FirstSection.js  | 22 ++++----
 docs/src/components/parts/FourthSection.js |  2 +-
 docs/src/components/parts/SecondSection.js | 18 +++----
 docs/src/components/parts/ThirdSection.js  | 62 +++++++++++-----------
 docs/src/css/custom.scss                   |  6 +++
 docs/tailwind.config.js                    | 58 +++++++++++++++++++-
 7 files changed, 116 insertions(+), 54 deletions(-)

diff --git a/docs/src/components/parts/Cookies.js b/docs/src/components/parts/Cookies.js
index 773eda90a..83b8a26c7 100644
--- a/docs/src/components/parts/Cookies.js
+++ b/docs/src/components/parts/Cookies.js
@@ -10,7 +10,7 @@ export default function Cookies() {
   return (
     <div
       id="cookies"
-      className="cookie-popup fixed max-w-lg bottom-3 right-3 left-3 sm:left-0 sm:right-0 mx-auto bg-white dark:bg-slate-900 shadow dark:shadow-gray-800 rounded-md pt-6 pb-2 px-6 z-50"
+      className="cookie-popup !tracking-wide fixed max-w-lg bottom-3 right-3 left-3 sm:left-0 sm:right-0 mx-auto bg-white dark:bg-slate-900 shadow dark:shadow-gray-800 rounded-md pt-6 pb-2 px-6 z-50"
     >
       <p className="text-slate-400">
         This website uses cookies to provide you with a great user experience.
diff --git a/docs/src/components/parts/FirstSection.js b/docs/src/components/parts/FirstSection.js
index 17a75cdeb..8ddbcaf98 100644
--- a/docs/src/components/parts/FirstSection.js
+++ b/docs/src/components/parts/FirstSection.js
@@ -3,7 +3,7 @@ import "animate.css";
 
 export default function FirstSection() {
   return (
-    <section className="relative home-wrapper items-center overflow-hidden">
+    <section className="relative !tracking-wide flex flex-col home-wrapper items-center overflow-hidden">
       <div
         className="bg-[#151C3D] absolute"
         style={{
@@ -11,7 +11,7 @@ export default function FirstSection() {
           right: 0,
           zIndex: 1,
           top: "-30%",
-          height: "65rem",
+          height: "62rem",
           width: "140rem",
           transform: "rotate(-12deg)",
         }}
@@ -20,11 +20,11 @@ export default function FirstSection() {
         style={{
           zIndex: "1 !important",
         }}
-        className="container !z-10"
+        className="!container relative !z-10"
       >
-        <div className="grid !z-10 grid-cols-1 md:mt-44 mt-32 text-center">
+        <div className="grid !z-10 grid-cols-1 mt-28 text-center">
           <div className="wow !z-10 animate__animated animate__fadeIn">
-            <h4 className="font-bold !z-10 !leading-relaxed text-4xl lg:text-5xl mb-5">
+            <h4 className="font-bold !text-white !z-10 !leading-normal text-4xl lg:text-5xl mb-5">
               Free, Secure, and Open-Source
               <br /> Backup for Microsoft 365
             </h4>
@@ -51,18 +51,18 @@ export default function FirstSection() {
             }}
           >
             <img
-              src="img/cloudbackup.svg"
-              className="w-[80%] inline-block"
+              src="assets/images/cloudbackup.svg"
+              className="w-[70%] inline-block object-contain"
               alt="Cloud backup and storage"
             />
           </div>
         </div>
 
-        <div className="bg-indigo-600 w-8 h-16 !z-10 absolute left-2 lg:bottom-28 md:bottom-36 sm:bottom-40 bottom-16"></div>
-        <div className="bg-indigo-600/20 w-8 h-16 !z-10 absolute left-12 lg:bottom-32 md:bottom-40 sm:bottom-44 bottom-20"></div>
+        <div className="bg-indigo-600 w-8 h-16 !z-10 absolute left-8 lg:bottom-28 md:bottom-36 sm:bottom-40 bottom-16"></div>
+        <div className="bg-indigo-600/20 w-8 h-16 !z-10 absolute left-20 lg:bottom-32 md:bottom-40 sm:bottom-44 bottom-20"></div>
 
-        <div className="bg-indigo-600/20 !z-10 w-8 h-16 absolute right-12 xl:bottom-[420px] lg:bottom-[315px] md:bottom-[285px] sm:bottom-80 bottom-32"></div>
-        <div className="bg-indigo-600 w-8 h-16 !z-10 absolute right-2 xl:bottom-[440px] lg:bottom-[335px] md:bottom-[305px] sm:bottom-[340px] bottom-36"></div>
+        <div className="bg-indigo-600/20 !z-10 w-8 h-16 absolute right-20 xl:bottom-[420px] lg:bottom-[315px] md:bottom-[285px] sm:bottom-80 bottom-32"></div>
+        <div className="bg-indigo-600 w-8 h-16 !z-10 absolute right-8 xl:bottom-[440px] lg:bottom-[335px] md:bottom-[305px] sm:bottom-[340px] bottom-36"></div>
       </div>
     </section>
   );
diff --git a/docs/src/components/parts/FourthSection.js b/docs/src/components/parts/FourthSection.js
index d8ca22a59..4ffaeb642 100644
--- a/docs/src/components/parts/FourthSection.js
+++ b/docs/src/components/parts/FourthSection.js
@@ -4,7 +4,7 @@ import { Icon } from "@iconify/react";
 
 export default function FourthSection() {
   return (
-    <section className="relative md:py-16 py-12 md:pt-0 pt-0">
+    <section className="relative !tracking-wide  md:py-16 py-12 md:pt-0 pt-0">
       <div className="absolute bottom-0 left-0 !z-0 right-0 sm:h-2/3 h-4/5 bg-gradient-to-b from-indigo-500 to-indigo-600"></div>
 
       <div className="container !z-50">
diff --git a/docs/src/components/parts/SecondSection.js b/docs/src/components/parts/SecondSection.js
index 68a033c42..c2c69b03a 100644
--- a/docs/src/components/parts/SecondSection.js
+++ b/docs/src/components/parts/SecondSection.js
@@ -3,21 +3,21 @@ import "animate.css";
 
 export default function SecondSection() {
   return (
-    <section className="relative items-center overflow-hidden">
-      <div className="container relative">
-        <div className="grid content-center relative w-full md:mt-24 mt-16 text-center">
-          <div className="wow animate__animated relative !w-full animate__fadeIn">
-            <div className="flex items-center bg-gray-200 rounded-t-lg h-6">
-              <div className="align-middle">
+    <section className="relative flex !tracking-wide  flex-col items-center overflow-hidden">
+      <div className="!container relative">
+        <div className="flex flex-col content-center items-center justify-start relative md:mt-24 mt-16 text-center">
+          <div className="wow w-[95%] sm:w-[80%] animate__animated relative  animate__fadeIn">
+            <div className="flex flex-row items-center bg-gray-200 rounded-t-lg h-6">
+              <div className="align-middle flex flex-col items-center justify-center">
                 <img className="h-4 px-2" src="assets/images/powershell.svg" />
               </div>
             </div>
             <div
               className="!p-2 relative rounded-b-lg overflow-clip"
               style={{
-                borderLeft: "1px solid #e5e7eb",
-                borderRight: "1px solid #e5e7eb",
-                borderBottom: "1px solid #e5e7eb",
+                borderLeft: "2px solid #e5e7eb",
+                borderRight: "2px solid #e5e7eb",
+                borderBottom: "2px solid #e5e7eb",
               }}
             >
               <video className="w-full" muted loop autoPlay playsInline>
diff --git a/docs/src/components/parts/ThirdSection.js b/docs/src/components/parts/ThirdSection.js
index 04b225d27..484738eda 100644
--- a/docs/src/components/parts/ThirdSection.js
+++ b/docs/src/components/parts/ThirdSection.js
@@ -16,13 +16,13 @@ export default function ThirdSection() {
   });
 
   return (
-    <section className="relative md:py-24 py-16 overflow-hidden">
+    <section className="relative md:py-24 !tracking-wide py-16 overflow-hidden">
       <div className="container">
         <div
           className="grid grid-cols-1 pb-8 text-center wow animate__animated animate__fadeInUp"
           data-wow-delay=".1s"
         >
-          <h3 className="mb-6 mt-8 md:text-4xl text-3xl md:leading-normal leading-normal font-bold">
+          <h3 className="mb-6 mt-8 md:text-4xl text-white text-3xl md:leading-normal leading-normal font-bold">
             Key Features
           </h3>
 
@@ -37,7 +37,7 @@ export default function ThirdSection() {
             className="col-start-1 wow animate__animated animate__fadeInUp"
             data-wow-delay=".1s"
           >
-            <div className="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
+            <div className="flex transition-all duration-500 scale-hover shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
               <div className="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3">
                 <i data-feather="share-2" className="h-5 w-5 rotate-45"></i>
               </div>
@@ -53,7 +53,7 @@ export default function ThirdSection() {
             className="col-start-1 wow animate__animated animate__fadeInUp"
             data-wow-delay=".1s"
           >
-            <div className="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
+            <div className="flex transition-all duration-500 scale-hover shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
               <div className="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3">
                 <i data-feather="zap" className="h-5 w-5 rotate-45"></i>
               </div>
@@ -67,7 +67,7 @@ export default function ThirdSection() {
             className="col-start-1 wow animate__animated animate__fadeInUp"
             data-wow-delay=".1s"
           >
-            <div className="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
+            <div className="flex transition-all duration-500 scale-hover shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
               <div className="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3">
                 <i data-feather="activity" className="h-5 w-5 rotate-45"></i>
               </div>
@@ -81,7 +81,7 @@ export default function ThirdSection() {
             className="lg:col-start-2 md:col-start-1  wow animate__animated animate__fadeInUp"
             data-wow-delay=".3s"
           >
-            <div className="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
+            <div className="flex transition-all duration-500 scale-hover shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
               <div className="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3">
                 <i data-feather="lock" className="h-5 w-5 rotate-45"></i>
               </div>
@@ -94,10 +94,10 @@ export default function ThirdSection() {
           </div>
 
           <div
-            className="lg:col-start-2 md:col-start-1 wow animate__animated animate__fadeInUp"
+            className="lg:col-start-2 md:col-start-2 md:order-last wow animate__animated animate__fadeInUp"
             data-wow-delay=".3s"
           >
-            <div className="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
+            <div className="flex transition-all duration-500 scale-hover shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
               <div className="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3">
                 <i data-feather="copy" className="h-5 w-5 rotate-45"></i>
               </div>
@@ -111,7 +111,7 @@ export default function ThirdSection() {
             className="lg:col-start-2 md:col-start-2 md:order-last wow animate__animated animate__fadeInUp"
             data-wow-delay=".3s"
           >
-            <div className="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
+            <div className="flex transition-all duration-500 scale-hover shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
               <div className="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3">
                 <i data-feather="minimize-2" className="h-5 w-5 rotate-45"></i>
               </div>
@@ -125,7 +125,7 @@ export default function ThirdSection() {
             className="lg:col-start-3 md:col-start-2 wow animate__animated animate__fadeInUp"
             data-wow-delay=".5s"
           >
-            <div className="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
+            <div className="flex transition-all duration-500 scale-hover shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
               <div className="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3">
                 <i data-feather="code" className="h-5 w-5 rotate-45"></i>
               </div>
@@ -139,7 +139,7 @@ export default function ThirdSection() {
             className="lg:col-start-3 md:col-start-2 wow animate__animated animate__fadeInUp"
             data-wow-delay=".5s"
           >
-            <div className="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
+            <div className="flex transition-all duration-500 scale-hover shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
               <div className="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3">
                 <i
                   data-feather="upload-cloud"
@@ -158,7 +158,7 @@ export default function ThirdSection() {
             className="lg:col-start-3 md:col-start-2 wow animate__animated animate__fadeInUp"
             data-wow-delay=".5s"
           >
-            <div className="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
+            <div className="flex transition-all duration-500 scale-hover shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
               <div className="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3">
                 <i
                   data-feather="check-circle"
@@ -439,7 +439,7 @@ export default function ThirdSection() {
 
       <div className="container md:mb-8 mb-4 md:mt-24 mt-16 wow animate__animated animate__fadeInUp">
         <div className="grid grid-cols-1 pb-8 text-center">
-          <h3 className="mb-6 mt-8 md:text-4xl text-3xl md:leading-normal leading-normal font-bold">
+          <h3 className="mb-6 mt-8 text-white md:text-4xl text-3xl md:leading-normal leading-normal font-bold">
             Frequently Asked Questions
           </h3>
         </div>
@@ -458,13 +458,13 @@ export default function ThirdSection() {
 
           <div className="md:col-span-6">
             <div className="accordion space-y-3" id="accordionExample">
-              <div className="accordion-item relative  shadow dark:shadow-gray-800 rounded-md overflow-hidden">
+              <div className="accordion-item !text-white relative  shadow dark:shadow-gray-800 rounded-md overflow-hidden">
                 <h2
-                  className="accordion-header !cursor-pointer font-semibold"
+                  className="accordion-header mb-0 !cursor-pointer font-semibold"
                   id="headingOne"
                 >
                   <button
-                    className="transition accordion-button border-none outline-none collapsed focus:outline-none !bg-transparent flex justify-between items-center p-5 w-full font-medium text-left"
+                    className="transition accordion-button-custom text-white !text-base !cursor-pointer border-none outline-none collapsed focus:outline-none !bg-transparent flex justify-between items-center p-5 w-full font-medium text-left"
                     type="button"
                     data-bs-toggle="collapse"
                     data-bs-target="#collapseOne"
@@ -488,13 +488,13 @@ export default function ThirdSection() {
                   </div>
                 </div>
               </div>
-              <div className="accordion-item relative  shadow dark:shadow-gray-800 rounded-md overflow-hidden">
+              <div className="accordion-item !text-white relative  shadow dark:shadow-gray-800 rounded-md overflow-hidden">
                 <h2
-                  className="accordion-header !cursor-pointer font-semibold"
+                  className="accordion-header mb-0 !cursor-pointer font-semibold"
                   id="heading2"
                 >
                   <button
-                    className="transition accordion-button border-none outline-none collapsed focus:outline-none !bg-transparent flex justify-between items-center p-5 w-full font-medium text-left"
+                    className="transition accordion-button-custom text-white !text-base !cursor-pointer border-none outline-none collapsed focus:outline-none !bg-transparent flex justify-between items-center p-5 w-full font-medium text-left"
                     type="button"
                     data-bs-toggle="collapse"
                     data-bs-target="#collapse2"
@@ -521,13 +521,13 @@ export default function ThirdSection() {
                   </div>
                 </div>
               </div>
-              <div className="accordion-item relative  shadow dark:shadow-gray-800 rounded-md overflow-hidden">
+              <div className="accordion-item !text-white relative  shadow dark:shadow-gray-800 rounded-md overflow-hidden">
                 <h2
-                  className="accordion-header !cursor-pointer font-semibold"
+                  className="accordion-header mb-0 !cursor-pointer font-semibold"
                   id="heading3"
                 >
                   <button
-                    className="transition accordion-button border-none outline-none collapsed focus:outline-none !bg-transparent flex justify-between items-center p-5 w-full font-medium text-left"
+                    className="transition accordion-button-custom text-white !text-base !cursor-pointer border-none outline-none collapsed focus:outline-none !bg-transparent flex justify-between items-center p-5 w-full font-medium text-left"
                     type="button"
                     data-bs-toggle="collapse"
                     data-bs-target="#collapse3"
@@ -553,13 +553,13 @@ export default function ThirdSection() {
                   </div>
                 </div>
               </div>
-              <div className="accordion-item relative  shadow dark:shadow-gray-800 rounded-md overflow-hidden">
+              <div className="accordion-item !text-white relative shadow dark:shadow-gray-800 rounded-md overflow-hidden">
                 <h2
-                  className="accordion-header !cursor-pointer font-semibold"
+                  className="accordion-header mb-0 font-semibold"
                   id="heading4"
                 >
                   <button
-                    className="transition accordion-button border-none outline-none collapsed focus:outline-none !bg-transparent flex justify-between items-center p-5 w-full font-medium text-left"
+                    className="transition accordion-button-custom text-white !text-base !cursor-pointer border-none outline-none collapsed focus:outline-none !bg-transparent flex justify-between items-center p-5 w-full font-medium text-left"
                     type="button"
                     data-bs-toggle="collapse"
                     data-bs-target="#collapse4"
@@ -599,13 +599,13 @@ export default function ThirdSection() {
                   </div>
                 </div>
               </div>
-              <div className="accordion-item relative  shadow dark:shadow-gray-800 rounded-md overflow-hidden">
+              <div className="accordion-item !text-white relative  shadow dark:shadow-gray-800 rounded-md overflow-hidden">
                 <h2
-                  className="accordion-header !cursor-pointer font-semibold"
+                  className="accordion-header mb-0 !cursor-pointer font-semibold"
                   id="heading5"
                 >
                   <button
-                    className="transition accordion-button border-none outline-none collapsed focus:outline-none !bg-transparent flex justify-between items-center p-5 w-full font-medium text-left"
+                    className="transition accordion-button-custom text-white !text-base !cursor-pointer border-none outline-none collapsed focus:outline-none !bg-transparent flex justify-between items-center p-5 w-full font-medium text-left"
                     type="button"
                     data-bs-toggle="collapse"
                     data-bs-target="#collapse5"
@@ -629,13 +629,13 @@ export default function ThirdSection() {
                   </div>
                 </div>
               </div>
-              <div className="accordion-item relative  shadow dark:shadow-gray-800 rounded-md overflow-hidden">
+              <div className="accordion-item !text-white relative  shadow dark:shadow-gray-800 rounded-md overflow-hidden">
                 <h2
-                  className="accordion-header !cursor-pointer font-semibold"
+                  className="accordion-header mb-0 !cursor-pointer font-semibold"
                   id="heading6"
                 >
                   <button
-                    className="transition accordion-button border-none outline-none collapsed focus:outline-none !bg-transparent flex justify-between items-center p-5 w-full font-medium text-left"
+                    className="transition accordion-button-custom text-white !text-base !cursor-pointer border-none outline-none collapsed focus:outline-none !bg-transparent flex justify-between items-center p-5 w-full font-medium text-left"
                     type="button"
                     data-bs-toggle="collapse"
                     data-bs-target="#collapse6"
diff --git a/docs/src/css/custom.scss b/docs/src/css/custom.scss
index 3f742255b..79d44b477 100644
--- a/docs/src/css/custom.scss
+++ b/docs/src/css/custom.scss
@@ -34,6 +34,12 @@ html{
 @tailwind utilities;
 @tailwind components;
 
+@layer utilities {
+  .scale-hover:hover {
+    transform: scale(1.05);
+  }
+}
+
 .custom-bg_{
   background: url("../../static/assets/images/cta.jpg")
 }
diff --git a/docs/tailwind.config.js b/docs/tailwind.config.js
index 864035606..c114fa7bf 100644
--- a/docs/tailwind.config.js
+++ b/docs/tailwind.config.js
@@ -2,7 +2,63 @@
 module.exports = {
   content: ["./src/**/*.{js,jsx,ts,tsx}"],
   theme: {
-    extend: {},
+    screens: {
+      xs: "540px",
+      sm: "640px",
+      md: "768px",
+      lg: "1024px",
+      xl: "1280px",
+      "2xl": "1536px",
+    },
+    fontFamily: {
+      nunito: ['"Nunito", sans-serif'],
+    },
+    container: {
+      center: true,
+      padding: {
+        DEFAULT: "12px",
+        sm: "1rem",
+        lg: "45px",
+        xl: "5rem",
+        "2xl": "13rem",
+      },
+    },
+    extend: {
+      colors: {
+        dark: "#3c4858",
+        black: "#161c2d",
+        "dark-footer": "#192132",
+      },
+
+      boxShadow: {
+        sm: "0 2px 4px 0 rgb(60 72 88 / 0.15)",
+        DEFAULT: "0 0 3px rgb(60 72 88 / 0.15)",
+        md: "0 5px 13px rgb(60 72 88 / 0.20)",
+        lg: "0 10px 25px -3px rgb(60 72 88 / 0.15)",
+        xl: "0 20px 25px -5px rgb(60 72 88 / 0.1), 0 8px 10px -6px rgb(60 72 88 / 0.1)",
+        "2xl": "0 25px 50px -12px rgb(60 72 88 / 0.25)",
+        inner: "inset 0 2px 4px 0 rgb(60 72 88 / 0.05)",
+        testi: "2px 2px 2px -1px rgb(60 72 88 / 0.15)",
+      },
+
+      spacing: {
+        0.75: "0.1875rem",
+        3.25: "0.8125rem",
+      },
+
+      maxWidth: ({ theme, breakpoints }) => ({
+        1200: "71.25rem",
+        992: "60rem",
+        768: "45rem",
+      }),
+
+      zIndex: {
+        1: "1",
+        2: "2",
+        3: "3",
+        999: "999",
+      },
+    },
   },
   plugins: [require("tw-elements/dist/plugin")],
 };