Merge branch 'master' into PR87

Author: jsvigneshkanna

README.md

@@ -6,9 +6,15 @@
 
 </div>
 
-![Screenshot](https://i.postimg.cc/1Rb75nSg/screenshot-rocks.png)
+Homepage
+![image](https://user-images.githubusercontent.com/42484705/196957568-cf73a4b6-3d1a-40dd-9452-fe73e612f5a0.png)
+
+Components selection page
+![image](https://user-images.githubusercontent.com/42484705/196957666-431c5064-b834-4612-91f1-1e18f0df523c.png)
+
+Codepen page
+![image](https://user-images.githubusercontent.com/42484705/196957932-608baf1a-8b1b-4686-b534-fc88e67d04f8.png)
 
-![Screenshot](https://i.postimg.cc/FKJ7vBVk/screenshot-rocks-1.png)
 
 # Motivation
 

components/homebanner.js

@@ -2,33 +2,61 @@
 import Image from "next/image";
 import {useState, useRef, useEffect} from "react";
 import {FaPrayingHands} from "react-icons/fa";
+import {BallTriangle} from "react-loader-spinner";
 
 const Homebanner = () => {
+  const [loading, setloading] = useState(false);
+  useEffect(() => {
+    setloading(true);
+    setTimeout(() => {
+      setloading(false);
+    }, 1500);
+  }, []);
   return (
-    <div className="banner">
-      <div className="banner_container">
-        <div className="left_container">
-          <div className="what_is">What is Tailwind CSS UI bootstrap</div>
-          <div className="what_is_ans">
-            <p>
-              This is one stop for frontend developers (sorry 🙏 fullstack
-              developers) who are designing and building their website with
-              tailwind css
-            </p>
-            <p>
-              Here you can find all UI components and layouts build exclusively
-              in tailwind CSS
-            </p>
-            <p>
-              Additional point, checkout components page - dont say this to your
-              competitors 🤫
-            </p>
-          </div>
+    <div>
+      {loading ? (
+        <div
+          style={{
+            height: "100vh",
+            backgroundColor: "rgba(0,0,0,0.99",
+            display: "flex",
+            justifyContent: "center",
+          }}
+          className="banner">
+          <BallTriangle
+            height="100"
+            width="100"
+            color="#e39a09"
+            ariaLabel="loading"
+          />
         </div>
-        <div className="right_container">
-          <img src="/home_banner.png" alt="banner" />
+      ) : (
+        <div className="banner">
+          <div className="banner_container">
+            <div className="left_container">
+              <div className="what_is">What is Tailwind CSS UI bootstrap</div>
+              <div className="what_is_ans">
+                <p>
+                  This is one stop for frontend developers (sorry 🙏 fullstack
+                  developers) who are designing and building their website with
+                  tailwind css
+                </p>
+                <p>
+                  Here you can find all UI components and layouts build
+                  exclusively in tailwind CSS
+                </p>
+                <p>
+                  Additional point, checkout components page - dont say this to
+                  your competitors
+                </p>
+              </div>
+            </div>
+            <div className="right_container">
+              <img src="/home_banner.png" alt="banner" />
+            </div>
+          </div>
         </div>
-      </div>
+      )}
     </div>
   );
 };

components/navbar.js

@@ -21,7 +21,7 @@ const Navbar = () => {
     }
   };
   return (
-    <div className="nav_container">
+    <div className="nav_container font-poppins">
       <nav>
         <Image
           src="/nav_logo.png"
@@ -32,7 +32,7 @@ const Navbar = () => {
         />
         <div className="right_contents">
           <div className="nav_links">
-            <a href="/components">Components</a>
+            <Link href="/components">Components</Link>
           </div>
           <div className="nav_links">
             <Link href="/">Documentation</Link>
@@ -47,7 +47,7 @@ const Navbar = () => {
       </nav>
       <div className={displayMenu()}>
         <div className="nav_links">
-          <a href="/components">Components</a>
+          <Link href="/components">Components</Link>
         </div>
         <div className="nav_links">
           <Link href="/">Documentation</Link>