Feat: Merge source master and fix conflicts

Author: AnnieDebbie

README.md

@@ -6,15 +6,18 @@
 
 </div>
 
+---
+
 **Homepage**
-![image](https://user-images.githubusercontent.com/42484705/197355352-1becb11c-3e03-426c-b20c-5c14db6ac9ee.png)
+![image](https://user-images.githubusercontent.com/42484705/197696692-560c05b1-5207-41c7-adc9-d10fe403ece2.png)
 
 **Components selection page**
-![image](https://user-images.githubusercontent.com/42484705/197355398-e36d1cb5-15aa-4c47-b5dc-e56c5f7f630b.png)
+![image](https://user-images.githubusercontent.com/42484705/197696771-9aaf4f6d-1928-4d66-9d2b-01ad479d289a.png)
 
 **Codepen page**
-![image](https://user-images.githubusercontent.com/42484705/197355431-718855e6-66ab-4229-b5bb-db3fda5956ff.png)
+![image](https://user-images.githubusercontent.com/42484705/197697009-132c44c8-29b3-40f7-98d0-c54f0aa8a33b.png)
 
+---
 
 # Motivation
 
@@ -53,7 +56,7 @@ Buy us coffee or tea or even a book at [buymeacoffee 🍵](https://www.buymeacof
  `git commit -m "commit message"`
  8. Push the changes to origin
  `git push origin <branch_name>`
- 9. After that create new Pull Request in your GitHub account. (It should appeared after commits were pushed)
+ 9. After that create new Pull Request in your GitHub account. (It should appear after commits were pushed)
 
 # Contributors 🎉
 

components/aboutUs.js

@@ -1,7 +1,7 @@
 /* eslint-disable @next/next/no-img-element */
 import {useState, useEffect} from "react";
 import {BallTriangle} from "react-loader-spinner";
-import Link from "next/link";
+import {SiBuymeacoffee} from "react-icons/si";
 
 const AboutUs = () => {
   const [loading, setloading] = useState(true);
@@ -42,32 +42,61 @@ const AboutUs = () => {
       ) : (
         <div className="banner">
           <div>
-            <div className="w-full flex justify-evenly flex-wrap">
-              <div className="w-5/12 my-5 p-2 m border-white border-2 rounded">
-                <p className="w-full text-xl  text-white">
-                  Our website motivation
+            <div className="flex  flex-col justify-center items-center flex-wrap">
+              <div className="my-5 mx-3 p-6  md:w-4/5 md:mx-0 flex flex-col justify-center items-center border-white border-2 rounded-lg bg-sky-300">
+                <p className="text-xl font-bold underline underline-offset-4 text-blue-700 mb-4">
+                  Our motivation ⚡
                 </p>
                 <hr className="bg-white" />
-                <p className="w-full text-white">
+                <p className="w-full text-center text-blue-900 font-semibold">
                   We do know tailwind css is an emerging CSS framework which
                   makes our website/ app unique without styling compared to
                   other market bootstraps.
                 </p>
               </div>
-              <div className="w-5/12 my-5 p-2 m border-white border-2 rounded">
-                <p className="w-full text-xl text-white">
-                  Solution we are providing
+              <div className="my-5 mx-3 p-6  md:w-4/5 md:mx-0 flex flex-col justify-center items-center border-white border-2 rounded-lg bg-sky-300">
+                <p className="text-xl font-bold underline underline-offset-4 text-blue-700 mb-4">
+                  Solution we are providing 🧑‍💻
                 </p>
                 <hr className="bg-white" />
-                <p className="w-full text-white">
+                <p className="w-full text-center text-blue-900 font-semibold">
                   You can get almost all layouts and components built under
                   Tailwind CSS, and the best part is we can play around with
                   them in inbuilt code editor and copy the codebase too for your
                   projects.
                 </p>
               </div>
+              <div className="my-5 mx-3 p-6  md:w-4/5 md:mx-0 flex flex-col justify-center items-center border-white border-2 rounded-lg bg-sky-300">
+                <p className="text-xl font-bold underline underline-offset-4 text-blue-700 mb-4">
+                  Like our Product 😎
+                </p>
+                <hr className="bg-white" />
+                <p className="w-full text-center text-blue-900 font-semibold flex flex-col md:flex-row justify-center items-center">
+                  This contribution is not forced but welcomed, as this will
+                  help us run this software for long time, Buy us coffee or tea
+                  or even a book at{" "}
+                  <a
+                    href="https://www.buymeacoffee.com/jsvigneshkanna"
+                    target="_blank"
+                    rel="noreferrer"
+                    className="ml-4 bg-rose-500 p-2 rounded-3xl text-2xl text-white">
+                    <SiBuymeacoffee />
+                  </a>
+                </p>
+              </div>
+            </div>
+            <div>
+              <div className="flex  flex-col justify-center items-center flex-wrap">
+                <div className=" my-5 mx-3 p-6 flex flex-col justify-center items-center md:w-4/5 md:mx-0p-6 px-5 overflow-auto border-blue-700 border-2 rounded-lg">
+                  <p className=" mt-8 mb-8 text-xl text-white underline underline-offset-4">
+                    Our Contributers 🥂
+                  </p>
+                  <div
+                    id="contributors"
+                    className="overflow-auto whitespace-nowrap w-auto flex flex-wrap justify-evenly gap-1 md:gap-8"></div>
+                </div>
+              </div>
             </div>
-            <div></div>
           </div>
         </div>
       )}

components/document.js

@@ -0,0 +1,70 @@
+/* eslint-disable @next/next/no-img-element */
+import Link from "next/link";
+
+const Document = () => {
+  return (
+    <div className=" bg-slate-300 text-black min-h-screen pt-32 md:pt-40 px-4 md:px-40 font-sans">
+      <h1 className="text-2xl border-b-2 border-teal-700 font-black">
+        Documentation 📝
+      </h1>
+      <div className="py-8 flex flex-col justify-center items-start">
+        <h3 className="text-center pb-8 font-bold text-xl text-red-900 underline underline-offset-4">
+          1. Feature video 📺
+        </h3>
+        <video
+          className="w-auto rounded-3xl h-auto border-2 border-rose-500 shadow-xl shadow-blue-300"
+          controls>
+          <source src="/tailwind_bootstrap_docs.mkv" type="video/mp4"></source>
+        </video>
+      </div>
+
+      <div className="py-8 flex flex-col justify-center items-start">
+        <h3 className="text-left pb-6 font-bold text-xl text-red-900 underline underline-offset-4">
+          2. Type of components 💾
+        </h3>
+        <p className="text-left font-medium">
+          Currently we have around 10 different types of components
+        </p>
+        <p className="pt-4 font-medium">
+          Please check
+          <Link href="/components">
+            <span className="bg-sky-300 text-rose-700 px-3 py-2 rounded-lg ml-2 font-semibold">
+              here
+            </span>
+          </Link>
+        </p>
+      </div>
+
+      <div className="py-8 flex flex-col justify-center items-start pb-20">
+        <h3 className="text-left pb-6 font-bold text-xl text-red-900 underline underline-offset-4">
+          3. How to use this website ⚡
+        </h3>
+        <div className="text-left font-medium">
+          <p className="pb-3">
+            - You can search some of the required components like &apos;Buttons,
+            Forms, Navbars, Alerts&apos; from the components page.
+          </p>
+          <p className="pb-3">
+            - Go to the required component page and try different UI code from
+            embeded codepen.
+          </p>
+          <p className="pb-3">
+            - For specific components like &apos;Navbars&apos; you can open/
+            close the HTML tab to simulate the mobile responsiveness
+          </p>
+          <p className="pb-3">
+            - In addition to that, we can open the specific codepen in a new tab
+            by clicking &apos;EDIT ON CODEPEN&apos;
+          </p>
+          <p className="bg-rose-500 rounded-lg mt-4 py-2 px-4 text-white font-bold">
+            🚀 NOTE: It may take 2-3 seconds for the codepen page to load due to
+            the page is heavy in size. Any contributors who can solve this issue
+            can connect by Github
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Document;

components/faqs.js

@@ -0,0 +1,102 @@
+/* eslint-disable @next/next/no-img-element */
+import {useEffect} from "react";
+import Link from "next/link";
+
+const FAQs = () => {
+  useEffect(() => {
+    setTimeout(() => {
+      const data = {
+        q1: {
+          qus: "What is Tailwind Bootstrap",
+          ans: "Tailwind css is an emerging CSS framework which makes our website/ app unique without styling compared to other market bootstraps.",
+        },
+        q2: {
+          qus: "Who drives this website",
+          ans: 'Our Contributers Drive the website (around 50+ open source contributors - and growing in 🚀 pace), for more visit <a href="/aboutUs" target="_blank" rel="noreferrer" class="text-blue-700">Here</a>',
+        },
+        q3: {
+          qus: "What all components are there in this website",
+          ans: 'There are a lot of components on this website, you can access them from <a href="/components" target="_blank" rel="noreferrer" class="text-blue-700">Here</a>',
+        },
+        q4: {
+          qus: "Can we play around with tailwindcss codes",
+          ans: "Yes,You can. We actually have embeded codepen in each component section. You can modify the code/ styles and rerun the codepen to get required design ⚡",
+        },
+        q5: {
+          qus: "Is there any pricing or subscription",
+          ans: 'Nooooo 🙅,It is free of cost. We will atmost thrive to keep this website open sourced and free of cost to users. If you like our product very much and wish to contribute us some money which we use to enhance further, you can reach us at <a href="https://www.buymeacoffee.com/jsvigneshkanna" target="_blank" rel="noreferrer" class="text-blue-700">Here</a>',
+        },
+        q6: {
+          qus: "How can we use these UI components and where can we find documents",
+          ans: 'You can actually play around with existing component codes in each component section, copy them and use them in your codebase. For more information check <a href="/documentation" target="_blank" rel="noreferrer" class="text-blue-700">Docs</a>',
+        },
+        q7: {
+          qus: "I would like to contribute to this website, how can I proceed?",
+          ans: 'Hurray 🕺💃, You can contribute from <a href="https://github.com/jsvigneshkanna/tailwind_ui_components" class="text-blue-700">Here</a>. We are so happy, that you checked our product and like to contribute !',
+        },
+      };
+      if (document.getElementById("faqs").innerHTML == "") {
+        for (const q in data) {
+          document.getElementById(
+            "faqs",
+          ).innerHTML += `<div class="border-b font-medium border-black my-2 overflow-hidden">
+                                    <div class="flex justify-between p-3 items-center ">
+                                          <p>${data[q].qus}</p>
+                                          <p class="ml-2 border border-black rounded-full  answer_btn"><svg xmlns="http://www.w3.org/2000/svg" fill="none"
+                                                viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+                                                <path stroke-linecap="round" stroke-linejoin="round"
+                                                d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+                                                </svg></p>
+                                                </div>
+                                                <hr>
+                                                <p class="hidden p-3">${data[q].ans}</p>
+                                                </div>`;
+        }
+      }
+      Array.from(document.getElementsByClassName("answer_btn")).forEach((e) => {
+        e.addEventListener("click", (ee) => {
+          let ele = e.parentElement.parentElement.children[2];
+          let ele1 = e.parentElement.children[0];
+          let flag = false;
+          Array.from(ele.classList).forEach((classes) => {
+            if (classes == "hidden") flag = true;
+          });
+          if (flag) {
+            ele.classList.remove("hidden");
+            e.classList.add("origin-center");
+            e.classList.add("rotate-180");
+            e.classList.add("bg-blue-500");
+            e.classList.remove("border");
+            e.classList.add("text-white");
+            ele1.classList.add("text-blue-500");
+          } else {
+            ele.classList.add("hidden");
+            e.classList.remove("origin-center");
+            e.classList.remove("rotate-180");
+            e.classList.remove("bg-blue-500");
+            e.classList.add("border");
+            e.classList.remove("text-white");
+            ele1.classList.remove("text-blue-500");
+          }
+        });
+      });
+    }, 100);
+  }, []);
+
+  return (
+    <div>
+      <div className="banner">
+        <div class="pb-6 text-white">
+          <h1 class="p-3 text-center font-semibold text-lg md:text-2xl underline underline-offset-8">
+            Frequently Asked Questions
+          </h1>
+          <div
+            id="faqs"
+            class="text-black bg-stone-300 border m-auto mt-9 mx-4 md:mx-40 px-3 md:px-8 py-12 rounded-2xl border-black"></div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FAQs;

components/footer.js

@@ -1,35 +1,35 @@
 /* eslint-disable @next/next/no-img-element */
 /* eslint-disable @next/next/no-html-link-for-pages */
 
-import React from "react";
+import Link from "next/link";
 
 const Footer = () => {
   return (
     <div>
-      <footer className=" p-6 sm:p-6 bg-gradient-to-bl from-[#2a003c] to-[#010142]">
-        <div className="md:flex md:flex-row flex-col md:justify-between md:px-40 pt-0 md:pt-8">
-          <div className="mb-6 md:mb-0 mt-6 md:mt-0">
+      <footer className=" p-6 sm:p-6 bg-gradient-to-b from-[#310046] to-[#000057]">
+        <div className="md:flex md:flex-row flex-col md:justify-between md:px-40 pt-0 md:pt-4">
+          <div className="mb-4 md:mb-0 mt-4 md:mt-0">
             <a
               href="https://tailwindcsscomponents.vercel.app/"
               className="flex items-center justify-center">
               <img
-                src="/favi-tailwind.png"
-                className="md:mr-3 h-10 mr-1"
+                src="/favicon/favicon.png"
+                className="md:mr-3 h-10 mr-1 rounded-3xl"
                 alt="FlowBite Logo"></img>
-              <span className="self-center text-xl md:text-2xl font-semibold whitespace-nowrap dark:text-white">
+              <span className="text-white self-center text-xl md:text-2xl font-semibold whitespace-nowrap dark:text-white">
                 tailwind
               </span>
-              <span className="self-center text-xl md:text-2xl font-semibold whitespace-nowrap dark:text-blue-500 ml-2">
+              <span className="text-white self-center text-xl md:text-2xl font-semibold whitespace-nowrap dark:text-blue-500 ml-2">
                 BOOTSRAP
               </span>
             </a>
           </div>
-          <div className="grid grid-cols-2 gap-8 md:gap-36 place-items-center">
+          <div className="grid grid-cols-2 gap-20 md:gap-32 place-items-center">
             <div>
               <h2 className="mb-4 text-xs md:text-lg font-semibold uppercase text-white underline underline-offset-2">
                 Follow us
               </h2>
-              <ul className="text-gray-200 text-xs md:text-lg">
+              <ul className="text-gray-200 text-xs md:text-base">
                 <li className="mb-4">
                   <a
                     href="https://github.com/jsvigneshkanna/tailwind_ui_components"
@@ -54,24 +54,26 @@ const Footer = () => {
               <h2 className="mb-4 text-xs md:text-lg font-semibold uppercase text-white underline underline-offset-2">
                 Legal
               </h2>
-              <ul className="text-gray-200 text-xs md:text-lg">
+              <ul className="text-gray-200 text-xs md:text-base">
                 <li className="mb-4">
-                  <a href="" className="hover:underline hover:text-blue-300">
+                  <Link
+                    href="/legal/privacypolicy"
+                    className="hover:underline hover:text-blue-300">
                     Privacy Policy
-                  </a>
+                  </Link>
                 </li>
                 <li>
-                  <a
+                  <Link
                     href="/legal/license"
                     className="hover:underline hover:text-blue-300">
                     License
-                  </a>
+                  </Link>
                 </li>
               </ul>
             </div>
           </div>
         </div>
-        <hr className="my-6 sm:mx-auto border-gray-400 lg:my-8" />
+        <hr className="my-6 sm:mx-auto border-gray-400  lg:my-4" />
         <div className="sm:flex sm:items-center sm:justify-between md:px-40 text-center">
           <span className="text-sm text-white sm:text-center">
             © 2022{" "}