feat: Hero Section

components/Button/Button.stories.tsx

@@ -12,11 +12,11 @@ const meta: Meta<typeof Button> = {
   },
   argTypes: {
     intent: {
-      options: ["primary", "secondary"],
+      options: ["primary", "secondary", "hero1"],
       control: { type: "select" },
     },
     size: {
-      options: ["sm", "lg"],
+      options: ["sm", "lg", "hero1"],
       control: { type: "select" },
     },
   },

components/Button/Button.tsx

@@ -9,8 +9,6 @@ const button = cva(
     "items-center",
     "rounded-xl",
     "text-center",
-    "border",
-    "border-blue-400",
     "transition-colors",
     "delay-50",
   ],
@@ -18,11 +16,13 @@ const button = cva(
     variants: {
       intent: {
         primary: ["bg-blue-400", "text-white", "hover:enabled:bg-blue-700"],
-        secondary: ["bg-transparent", "text-blue-400", "hover:enabled:bg-blue-400", "hover:enabled:text-white"],
+        secondary: ["bg-transparent", "text-white", "hover:bg-slate-100", "rounded-3xl", "hover:text-vizoleG2", "border-solid", "border-2", "border-slate-100"],
+        hero1:["text-white", "bg-gradient-to-br", "from-vizoleG1", "via-vizole-G2", "to-vizoleG3", "hover:bg-gradient-to-bl", "focus:ring-4", "focus:outline-none", "focus:ring-green-200", "dark:focus:ring-green-800", "font-medium", "rounded-3xl", "text-sm", "text-center", "me-2", "mb-2"]
       },
       size: {
         sm: ["min-w-20", "h-full", "min-h-10", "text-sm", "py-1.5", "px-4"],
         lg: ["min-w-32", "h-full", "min-h-12", "text-lg", "py-2.5", "px-6"],
+        hero1:["min-w-15", "h-full", "min-h-5" , "text-sm","px-5", "py-2"]
       },
       underline: { true: ["underline"], false: [] },
     },

components/Navbar/Navbar.tsx

@@ -0,0 +1,50 @@
+interface NavbarProps {
+    logoSrc: string; // Path to your logo image
+  }
+  
+  const Navbar: React.FC<NavbarProps> = ({ logoSrc }) => {
+    return (
+      <nav className="fixed top-0 left-0 w-full h-20 bg-transparent flex items-center justify-between px-4 z-50">
+        <a href="/">
+          <img src={logoSrc} alt="Your Logo" className="h-20" />
+        </a>
+        <ul className="hidden md:flex space-x-4 text-lg font-medium">
+          <li>
+            <a href="/" className="hover:text-gray-700">
+              Home
+            </a>
+          </li>
+          <li>
+            <a href="/services" className="hover:text-gray-700">
+              Services
+            </a>
+          </li>
+          <li>
+            <a href="/portfolio" className="hover:text-gray-700">
+              Portfolio
+            </a>
+          </li>
+          <li>
+            <a href="/about-us" className="hover:text-gray-700">
+              About Us
+            </a>
+          </li>
+          <li>
+            <a href="/contact-us" className="hover:text-gray-700">
+              Contact Us
+            </a>
+          </li>
+        </ul>
+        <div className="flex md:hidden items-center">
+          <button className="px-4 py-2 text-white bg-blue-500 hover:bg-blue-700 rounded-md">
+            Sign In
+          </button>
+          <button className="px-4 py-2 ml-2 text-white bg-green-500 hover:bg-green-700 rounded-md">
+            Sign Up
+          </button>
+        </div>
+      </nav>
+    );
+  };
+  
+  export default Navbar;

components/Slider/Slider.tsx

@@ -0,0 +1,50 @@
+import {
+    FigmaLogoIcon,
+    FramerLogoIcon,
+    SketchLogoIcon,
+    TwitterLogoIcon,
+    GitHubLogoIcon,
+    VercelLogoIcon,
+    NotionLogoIcon,
+    DiscordLogoIcon,
+    InstagramLogoIcon,
+    LinkedInLogoIcon,
+  } from "@radix-ui/react-icons";
+
+  const LOGOS = [
+    <FigmaLogoIcon width={50} height={50} className="text-white" />,
+    <FramerLogoIcon width={50} height={50} className="text-white" />,
+    <SketchLogoIcon width={50} height={50} className=" text-white" />,
+    <TwitterLogoIcon width={50} height={50} className="text-white" />,
+    <GitHubLogoIcon width={50} height={50} className="text-white" />,
+    <VercelLogoIcon width={50} height={50} className="text-white" />,
+    <NotionLogoIcon width={50} height={50} className="text-white" />,
+    <DiscordLogoIcon width={50} height={50} className="text-white" />,
+    <InstagramLogoIcon width={50} height={50} className="text-white" />,
+    <LinkedInLogoIcon width={50} height={50} className="text-white" />,
+  ];
+
+  export const InfiniteSlider = () => {
+    return (
+      <div className="relative m-auto w-full overflow-hidden bg-transparent before:absolute before:left-0 before:top-0 before:z-[2] before:h-full before:w-[100px] before:bg-[linear-gradient(to_right,homeBg_0%,rgba(255,255,255,0)_100%)] before:content-[''] after:absolute after:right-0 after:top-0 after:z-[2] after:h-full after:w-[100px] after:-scale-x-100 after:bg-[linear-gradient(to_right,homeBg_0%,rgba(0,0,0,120)_100%)] after:content-['']">
+        <div className="animate-infinite-slider flex w-[calc(250px*10)]">
+          {LOGOS.map((logo, index) => (
+            <div
+              className="slide flex w-[125px] items-center justify-center"
+              key={index}
+            >
+              {logo}
+            </div>
+          ))}
+          {LOGOS.map((logo, index) => (
+            <div
+              className="slide flex w-[125px] items-center justify-center"
+              key={index}
+            >
+              {logo}
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  };