Improved Navbar and landing page

components/layout/Header.js

@@ -3,29 +3,26 @@ import Navigation from "./Navigation";
 
 const Header = () => {
   return (
-    <header className="sticky top-0 w-full border-b-2 bg-drip-white border-drip-gray-light z-50 relative ">
+    <header className="sticky top-0 w-full border-b-2 bg-drip-white shadow-sm z-50 h-20">
       <nav className="flex flex-row items-center justify-between py-6 px-4 ">
         <div className="flex flex-row items-center gap-4">
           <Link href="/">
-            <a className="text-2xl font-bold md:text-3xl font-Cursive">
-              DripUI
+            <a className="text-2xl font-bold md:text-3xl selection:text-amber-800">
+            Drip<span className="text-blue-500">UI</span>
             </a>
           </Link>
-
           <Link href="/docs">
-            <a className="pl-3 text-sm border-l-2 md:text-lg border-drip-black/20 hover:text-drip-black/80">
+            <a className="pl-3 text-sm md:text-lg font-semibold border-drip-black/20 hover:text-drip-black/80">
               Components
             </a>
           </Link>
-
           <a
             disabled
             className="pl-2 text-sm pointer-events-none md:text-lg text-drip-black/20"
           >
             Web Designs
           </a>
         </div>
-
         <Navigation />
       </nav>
     </header>

components/layout/Navigation.js

@@ -40,7 +40,7 @@ const Navigation = () => {
           <div className={styleMobile} ref={ref}>
             <Link href="/docs/how-to-use">
               <a className="pr-3 text-sm border-b-2 border-drip-black/20 hover:text-drip-white/80">
-                How to use
+                Get Started
               </a>
             </Link>
 
@@ -53,14 +53,13 @@ const Navigation = () => {
               <i className="text-lg ri-twitter-line group-hover:-rotate-12"></i>{" "}
               Share on twitter
             </a>
-
             <a
               target="_blank"
               rel="noreferrer"
               href={GITHUB_LINK}
               className="inline-flex items-center gap-2 pr-3 text-sm group hover:text-drip-white/80"
             >
-              <i className="text-lg ri-github-line group-hover:-rotate-12"></i>
+              <i className="text-lg ri-github-line group-hover:-rotate-12 m-2"></i>
               Visit on Github
             </a>
           </div>
@@ -72,22 +71,21 @@ const Navigation = () => {
   return (
     <div className="flex flex-row gap-4 items-center">
       <Link href="/docs/how-to-use">
-        <a className="pr-3 text-sm border-r-2 md:text-lg border-drip-black/20 hover:text-drip-black/80">
-          How to use
+        <a className="pr-3 text-sm font-semibold md:text-lg border-drip-black/20 hover:text-drip-black/80">
+          Get Started
         </a>
       </Link>
       <div>
         <a
           target="_blank"
           rel="noreferrer"
-          className="inline-flex items-center text-sm md:text-lg group hover:text-drip-black/80 border-r-2 border-drip-black/20"
+          className="inline-flex items-center font-medium text-sm md:text-lg group hover:text-drip-black/80 border-drip-black/20"
           href={TWITTER_LINK}
         >
           <i className="text-lg ri-twitter-line group-hover:-rotate-12 "></i>{" "}
           Share on twitter
         </a>
       </div>
-
       <a
         target="_blank"
         rel="noreferrer"

components/other/ComponentListing.js

@@ -1,6 +1,5 @@
 import Link from "next/link";
 import { useState, useEffect } from "react";
-import { basicNavbars } from "../drip/navbar/basicNavbars";
 
 const ComponentListing = ({ featured = 0 }) => {
   const [list, setList] = useState(undefined);
@@ -40,43 +39,51 @@ const ComponentListing = ({ featured = 0 }) => {
       count: 1,
       icon: "ri-login-box-line",
       featured: true,
-    }
+    },
   ];
 
   useEffect(() => {
-    if (featured != 0) {
+    if (featured !== 0) {
       setList([...components.slice(0, featured)]);
     }
   }, [featured]);
 
   return (
-    <div className="p-4 grid grid-cols-2 gap-4 my-1 md:grid-cols-4 xl:grid-cols-6">
+    <div className="p-6 grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
       {(list || components)?.map((component) => (
         <Link
           key={component.name}
           href={`/docs/${component.count ? component.name : "#"}`}
         >
           <a
-            className={`${
+            className={`relative group p-6 bg-white shadow-md rounded-xl hover:shadow-lg transition-transform transform hover:-translate-y-1 ${
               !component.count ? "opacity-60 pointer-events-none" : ""
-            } group component-listing-a `}
+            }`}
           >
-            <i className={`${component.icon} text-3xl`}></i>
-            {component.name}
-            <span className="text-sm">
-              {component.count > 1
-                ? `${component.count} Components`
-                : component.count
-                ? `${component.count} Component`
-                : "coming soon"}
-            </span>
-
-            <i className="ri-external-link-line absolute right-3 top-2 text-[17px] group-hover:animate-spin"></i>
+            <div className="flex flex-col items-center text-center space-y-4">
+              {/* Icon */}
+              <i
+                className={`${component.icon} text-4xl text-blue-500 group-hover:scale-110 transition-transform`}
+              ></i>
+              {/* Component Name */}
+              <h3 className="text-lg font-semibold capitalize text-gray-800 group-hover:text-blue-600">
+                {component.name}
+              </h3>
+              {/* Count */}
+              <span className="text-sm text-gray-600">
+                {component.count > 1
+                  ? `${component.count} Components`
+                  : component.count
+                  ? `${component.count} Component`
+                  : "Coming Soon"}
+              </span>
+            </div>
+            {/* External Link Icon */}
+            <i className="ri-external-link-line absolute top-3 right-3 text-gray-400 group-hover:text-blue-500 group-hover:animate-spin"></i>
           </a>
         </Link>
       ))}
     </div>
   );
 };
-
 export default ComponentListing;

components/other/HeroSection.js

@@ -1,26 +1,38 @@
+import Link from "next/link";
 import Hero from "./Svg/Hero";
 import Arrow from "./Svg/icons/doodleArrow";
 
 const HeroSection = () => {
-    return ( 
-        <section className='flex flex-col sm:items-center sm:justify-center sm:flex-row'>
-          <div className='xl:ml-32'>
-            <Hero style="w-48 md:w-48 lg:w-80" />
-          </div>
-          <div className='relative flex flex-col gap-2 xl:w-1/2 text-drip-black'>
-              <h1 className='text-5xl font-bold md:text-7xl font-Cursive'>DripUI</h1>
-              <h2 className='text-3xl font-semibold md:text-4xl font-Cursive'>Tailwind CSS Components</h2>
+  return (
+    <section className="relative flex flex-col-reverse sm:flex-row items-center justify-center h-screen bg-gradient-to-b px-6 sm:px-12 lg:px-20">
 
-              {/* <h3 className='text-xl md:text-2xl md:w-[60%] font-Inter'>DripUI is a collection of free Tailwind CSS components to bootstrap your new apps, projects or landing sites!</h3> */}
-              <h3 className='text-xl md:text-2xl md:w-[60%] font-Inter'>DripUI is a collection of free UI components to help you develop your component easier and better!</h3>
-               <div className='absolute -top-12 right-24 md:left-56 -md:top-0 rotate-12 animate-pulse'>
-                <span className='text-xl italic font-semibold md:text-2xl font-Cursive '>Free Open Source </span>
-                <Arrow/>
+      {/* Hero Image */}
+      <div className="sm:w-1/2 flex justify-center items-center relative">
+        <Hero className="w-32 md:w-48 lg:w-56" />
+      </div>
+
+      {/* Text Content */}
+      <div className="flex flex-col gap-6 text-center sm:text-left sm:w-1/2 relative">
+        <h1 className="text-4xl font-bold sm:text-6xl lg:text-7xl text-drip-black leading-tight">
+          Drip<span className="text-blue-500">UI</span>
+        </h1>
+        <h2 className="text-2xl sm:text-3xl lg:text-4xl text-gray-700">
+          Tailwind CSS Components
+        </h2>
+        <p className="text-lg sm:text-xl text-gray-600 max-w-md mx-auto sm:mx-0">
+          DripUI is a collection of free, customizable Tailwind CSS components
+          designed to speed up your development process.
+        </p>
+        <div className="flex justify-center sm:justify-start mt-4">
+          <Link href="/docs/how-to-use">
+            <button className="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 shadow-lg">
+              Get Started
+            </button>
+          </Link>
+        </div>
+      </div>
+    </section>
+  );
+};
 
-              </div>     
-          </div>
-        </section>
-     );
-}
-
 export default HeroSection;