feat(ui): added Hero Button

animata/button/hero-button.stories.tsx

@@ -0,0 +1,21 @@
+import HeroButton from "@/animata/button/hero-button";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Button/Hero Button",
+  component: HeroButton,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof HeroButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    text: "Get Started",
+  },
+};

animata/button/hero-button.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+
+export default function HeroButton() {
+  return (
+    <div className="flex h-[100px] items-center justify-center">
+      <button className="group relative flex h-[64.5px] w-[199.86px] items-center justify-between rounded-[5px] bg-gray-900 px-4 py-2 text-white shadow-md transition-all hover:shadow-lg">
+        {/* Arrows container on the left with hover effect */}
+        <div className="hero-button-arrows duration-350 pointer-events-none absolute left-[2px] top-[2px] z-10 flex h-[calc(100%-4px)] w-[48px] items-center justify-center overflow-hidden rounded-[4px] bg-[#DFFF4B] transition-all ease-in-out group-hover:w-[196px]">
+          {/* Arrow animation */}
+          <div className="relative flex h-10 w-10 items-center justify-center transition-opacity duration-300">
+            <div className="relative h-4 w-4">
+              <div className="absolute left-0 top-0 h-[2px] w-[2px] animate-moving-arrows-item-1 rounded-full bg-black"></div>
+              <div className="absolute left-[3px] top-0 h-[2px] w-[2px] animate-moving-arrows-item-2 rounded-full bg-black"></div>
+              <div className="absolute left-[3px] top-[3px] h-[2px] w-[2px] animate-moving-arrows-item-3 rounded-full bg-black"></div>
+              <div className="absolute left-[6px] top-[3px] h-[2px] w-[2px] animate-moving-arrows-item-4 rounded-full bg-black"></div>
+              <div className="absolute left-[6px] top-[6px] h-[2px] w-[2px] animate-moving-arrows-item-5 rounded-full bg-black"></div>
+              <div className="absolute left-[9px] top-[6px] h-[2px] w-[2px] animate-moving-arrows-item-6 rounded-full bg-black"></div>
+              <div className="absolute left-[3px] top-[9px] h-[2px] w-[2px] animate-moving-arrows-item-7 rounded-full bg-black"></div>
+              <div className="absolute left-[6px] top-[9px] h-[2px] w-[2px] animate-moving-arrows-item-8 rounded-full bg-black"></div>
+              <div className="absolute left-0 top-[12px] h-[2px] w-[2px] animate-moving-arrows-item-9 rounded-full bg-black"></div>
+              <div className="absolute left-[3px] top-[12px] h-[2px] w-[2px] animate-moving-arrows-item-10 rounded-full bg-black"></div>
+            </div>
+          </div>
+
+          {/* Additional arrows that appear on hover */}
+          <div className="absolute flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+            {Array(7)
+              .fill(null)
+              .map((_, index) => (
+                <div
+                  key={index}
+                  className="relative flex h-6 w-6 items-center justify-center transition-opacity duration-300"
+                >
+                  <div className="relative h-4 w-4">
+                    <div
+                      className={`absolute h-[2px] w-[2px] rounded-full bg-black animate-moving-arrows-item-${index + 1} left-0 top-0`}
+                    ></div>
+                    <div
+                      className={`absolute h-[2px] w-[2px] rounded-full bg-black animate-moving-arrows-item-${index + 2} left-[3px] top-0`}
+                    ></div>
+                    <div
+                      className={`absolute h-[2px] w-[2px] rounded-full bg-black animate-moving-arrows-item-${index + 3} left-[3px] top-[3px]`}
+                    ></div>
+                    <div
+                      className={`absolute h-[2px] w-[2px] rounded-full bg-black animate-moving-arrows-item-${index + 4} left-[6px] top-[3px]`}
+                    ></div>
+                    <div
+                      className={`absolute h-[2px] w-[2px] rounded-full bg-black animate-moving-arrows-item-${index + 5} left-[6px] top-[6px]`}
+                    ></div>
+                    <div
+                      className={`absolute h-[2px] w-[2px] rounded-full bg-black animate-moving-arrows-item-${index + 6} left-[9px] top-[6px]`}
+                    ></div>
+                    <div
+                      className={`absolute h-[2px] w-[2px] rounded-full bg-black animate-moving-arrows-item-${index + 7} left-[3px] top-[9px]`}
+                    ></div>
+                    <div
+                      className={`absolute h-[2px] w-[2px] rounded-full bg-black animate-moving-arrows-item-${index + 8} left-[6px] top-[9px]`}
+                    ></div>
+                    <div
+                      className={`absolute h-[2px] w-[2px] rounded-full bg-black animate-moving-arrows-item-${index + 9} left-0 top-[12px]`}
+                    ></div>
+                    <div
+                      className={`absolute h-[2px] w-[2px] rounded-full bg-black animate-moving-arrows-item-${index + 10} left-[3px] top-[12px]`}
+                    ></div>
+                  </div>
+                </div>
+              ))}
+          </div>
+        </div>
+
+        {/* Text section shifted to the right */}
+        <span className="text-md transform pl-[48px] font-medium transition-all duration-500 ease-in-out group-hover:-translate-x-2 group-hover:opacity-0">
+          Book Your Demo
+        </span>
+      </button>
+    </div>
+  );
+}

animata/container/animated-dock.stories.tsx

@@ -1,7 +1,7 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { Home, Search, Bell, User } from "lucide-react";
-import AnimatedDock from "@/animata/container/animated-dock";
+import { Bell, Home, Search, User } from "lucide-react";
 
+import AnimatedDock from "@/animata/container/animated-dock";
+import { Meta, StoryObj } from "@storybook/react";
 
 const meta = {
   title: "Container/Animated Dock",
@@ -19,7 +19,6 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-
 // Example contents for AnimatedDock
 const dockItems = [
   { title: "Home", icon: <Home />, href: "/" },
@@ -28,7 +27,6 @@ const dockItems = [
   { title: "Profile", icon: <User />, href: "/profile" },
 ];
 
-
 // Primary story for AnimatedDock (default layout)
 export const Primary: Story = {
   args: {
@@ -43,7 +41,6 @@ export const Primary: Story = {
   ),
 };
 
-
 // Story focused on the Small layout (for mobile view)
 export const Small: Story = {
   args: {
@@ -57,7 +54,6 @@ export const Small: Story = {
   ),
 };
 
-
 // Story focused on the Large layout (for desktop view)
 export const Large: Story = {
   args: {
@@ -71,7 +67,6 @@ export const Large: Story = {
   ),
 };
 
-
 // Story showing both layouts at the same time (for comparison)
 export const Multiple: Story = {
   args: {

animata/container/animated-dock.tsx

@@ -1,16 +1,17 @@
-import { cn } from "@/lib/utils"; // Import utility for conditional class names
+import React, { useRef, useState } from "react"; // Importing React hooks
+import Link from "next/link"; // Next.js Link component for navigation
 import {
   AnimatePresence, // Enables animation presence detection
-  MotionValue, // Type for motion values
   motion, // Main component for animations
+  MotionValue, // Type for motion values
   useMotionValue, // Hook to create a motion value
   useSpring, // Hook to create smooth spring animations
   useTransform, // Hook to transform motion values
 } from "framer-motion";
-import Link from "next/link"; // Next.js Link component for navigation
-import React, { useRef, useState } from "react"; // Importing React hooks
 import { Menu, X } from "lucide-react"; // Importing icons from lucide-react
 
+import { cn } from "@/lib/utils"; // Import utility for conditional class names
+
 // Interface for props accepted by the AnimatedDock component
 interface AnimatedDockProps {
   items: { title: string; icon: React.ReactNode; href: string }[]; // Array of menu items

content/docs/button/hero-button.mdx

@@ -0,0 +1,160 @@
+---
+title: Hero Button
+description: It is a Fancy button with Good hover effect
+author: Nishant
+---
+
+<ComponentPreview name="button-hero-button--docs" />
+
+## Installation
+
+<Steps>
+
+<Step>Update `tailwind.config.js`</Step>
+
+Add the following to your tailwind.config.js file.
+
+```json
+module.exports = {
+  theme: {
+    extend: {
+      keyframes: {
+        "moving-arrows-item-1": {
+          "0%": { "backgroundColor": "rgba(33, 38, 49, 0.29)" },
+          "14.3%": { "backgroundColor": "rgba(33, 38, 49, 0.42)" },
+          "28.6%": { "backgroundColor": "rgba(33, 38, 49, 0.75)" },
+          "42.9%": { "backgroundColor": "rgba(33, 38, 49, 0.84)" },
+          "57.1%": { "backgroundColor": "rgba(33, 38, 49, 0.4)" },
+          "71.4%": { "backgroundColor": "rgba(33, 38, 49, 0.26)" },
+          "85.7%": { "backgroundColor": "rgba(33, 38, 49, 0.02)" },
+          "100%": { "backgroundColor": "rgba(33, 38, 49, 0.29)" },
+        },
+        "moving-arrows-item-2": {
+          "0%": { "backgroundColor": "rgba(33, 38, 49, 0.26)" },
+          "14.3%": { "backgroundColor": "rgba(33, 38, 49, 0.34)" },
+          "28.6%": { "backgroundColor": "rgba(33, 38, 49, 0.69)" },
+          "42.9%": { "backgroundColor": "rgba(33, 38, 49, 0.87)" },
+          "57.1%": { "backgroundColor": "rgba(33, 38, 49, 0.56)" },
+          "71.4%": { "backgroundColor": "rgba(33, 38, 49, 0.33)" },
+          "85.7%": { "backgroundColor": "rgba(33, 38, 49, 0.12)" },
+          "100%": { "backgroundColor": "rgba(33, 38, 49, 0.26)" },
+        },
+        "moving-arrows-item-3": {
+          "0%": { "backgroundColor": "rgba(33, 38, 49, 0.02)" },
+          "14.3%": { "backgroundColor": "rgba(33, 38, 49, 0.26)" },
+          "28.6%": { "backgroundColor": "rgba(33, 38, 49, 0.45)" },
+          "42.9%": { "backgroundColor": "rgba(33, 38, 49, 0.67)" },
+          "57.1%": { "backgroundColor": "rgba(33, 38, 49, 0.72)" },
+          "71.4%": { "backgroundColor": "rgba(33, 38, 49, 0.42)" },
+          "85.7%": { "backgroundColor": "rgba(33, 38, 49, 0.19)" },
+          "100%": { "backgroundColor": "rgba(33, 38, 49, 0.02)" },
+        },
+        "moving-arrows-item-4": {
+          "0%": { "backgroundColor": "rgba(33, 38, 49, 0.1)" },
+          "14.3%": { "backgroundColor": "rgba(33, 38, 49, 0.22)" },
+          "28.6%": { "backgroundColor": "rgba(33, 38, 49, 0.34)" },
+          "42.9%": { "backgroundColor": "rgba(33, 38, 49, 0.64)" },
+          "57.1%": { "backgroundColor": "rgba(33, 38, 49, 0.86)" },
+          "71.4%": { "backgroundColor": "rgba(33, 38, 49, 0.65)" },
+          "85.7%": { "backgroundColor": "rgba(33, 38, 49, 0.35)" },
+          "100%": { "backgroundColor": "rgba(33, 38, 49, 0.1)" },
+        },
+        "moving-arrows-item-5": {
+          "0%": { "backgroundColor": "rgba(33, 38, 49, 0.25)" },
+          "14.3%": { "backgroundColor": "rgba(33, 38, 49, 0.34)" },
+          "28.6%": { "backgroundColor": "rgba(33, 38, 49, 0.6)" },
+          "42.9%": { "backgroundColor": "rgba(33, 38, 49, 0.77)" },
+          "57.1%": { "backgroundColor": "rgba(33, 38, 49, 0.5)" },
+          "71.4%": { "backgroundColor": "rgba(33, 38, 49, 0.34)" },
+          "85.7%": { "backgroundColor": "rgba(33, 38, 49, 0.1)" },
+          "100%": { "backgroundColor": "rgba(33, 38, 49, 0.25)" },
+        },
+        "moving-arrows-item-6": {
+          "0%": { "backgroundColor": "rgba(33, 38, 49, 0.18)" },
+          "14.3%": { "backgroundColor": "rgba(33, 38, 49, 0.28)" },
+          "28.6%": { "backgroundColor": "rgba(33, 38, 49, 0.46)" },
+          "42.9%": { "backgroundColor": "rgba(33, 38, 49, 0.68)" },
+          "57.1%": { "backgroundColor": "rgba(33, 38, 49, 0.82)" },
+          "71.4%": { "backgroundColor": "rgba(33, 38, 49, 0.63)" },
+          "85.7%": { "backgroundColor": "rgba(33, 38, 49, 0.28)" },
+          "100%": { "backgroundColor": "rgba(33, 38, 49, 0.18)" },
+        },
+        "moving-arrows-item-7": {
+          "0%": { "backgroundColor": "rgba(33, 38, 49, 0.32)" },
+          "14.3%": { "backgroundColor": "rgba(33, 38, 49, 0.42)" },
+          "28.6%": { "backgroundColor": "rgba(33, 38, 49, 0.72)" },
+          "42.9%": { "backgroundColor": "rgba(33, 38, 49, 0.82)" },
+          "57.1%": { "backgroundColor": "rgba(33, 38, 49, 0.45)" },
+          "71.4%": { "backgroundColor": "rgba(33, 38, 49, 0.34)" },
+          "85.7%": { "backgroundColor": "rgba(33, 38, 49, 0.15)" },
+          "100%": { "backgroundColor": "rgba(33, 38, 49, 0.32)" },
+        },
+        "moving-arrows-item-8": {
+          "0%": { "backgroundColor": "rgba(33, 38, 49, 0.12)" },
+          "14.3%": { "backgroundColor": "rgba(33, 38, 49, 0.21)" },
+          "28.6%": { "backgroundColor": "rgba(33, 38, 49, 0.3)" },
+          "42.9%": { "backgroundColor": "rgba(33, 38, 49, 0.6)" },
+          "57.1%": { "backgroundColor": "rgba(33, 38, 49, 0.83)" },
+          "71.4%": { "backgroundColor": "rgba(33, 38, 49, 0.72)" },
+          "85.7%": { "backgroundColor": "rgba(33, 38, 49, 0.32)" },
+          "100%": { "backgroundColor": "rgba(33, 38, 49, 0.12)" },
+        },
+        "moving-arrows-item-9": {
+          "0%": { "backgroundColor": "rgba(33, 38, 49, 0.25)" },
+          "14.3%": { "backgroundColor": "rgba(33, 38, 49, 0.4)" },
+          "28.6%": { "backgroundColor": "rgba(33, 38, 49, 0.6)" },
+          "42.9%": { "backgroundColor": "rgba(33, 38, 49, 0.78)" },
+          "57.1%": { "backgroundColor": "rgba(33, 38, 49, 0.62)" },
+          "71.4%": { "backgroundColor": "rgba(33, 38, 49, 0.32)" },
+          "85.7%": { "backgroundColor": "rgba(33, 38, 49, 0.12)" },
+          "100%": { "backgroundColor": "rgba(33, 38, 49, 0.25)" },
+        },
+        "moving-arrows-item-10": {
+          "0%": { "backgroundColor": "rgba(33, 38, 49, 0.1)" },
+          "14.3%": { "backgroundColor": "rgba(33, 38, 49, 0.3)" },
+          "28.6%": { "backgroundColor": "rgba(33, 38, 49, 0.55)" },
+          "42.9%": { "backgroundColor": "rgba(33, 38, 49, 0.79)" },
+          "57.1%": { "backgroundColor": "rgba(33, 38, 49, 0.66)" },
+          "71.4%": { "backgroundColor": "rgba(33, 38, 49, 0.32)" },
+          "85.7%": { "backgroundColor": "rgba(33, 38, 49, 0.22)" },
+          "100%": { "backgroundColor": "rgba(33, 38, 49, 0.1)" },
+        },
+      }
+    animation: {
+        "moving-arrows-item-1": "moving-arrows-item-1 1.5s linear infinite",
+        "moving-arrows-item-2": "moving-arrows-item-2 1.5s linear infinite",
+        "moving-arrows-item-3": "moving-arrows-item-3 1.5s linear infinite",
+        "moving-arrows-item-4": "moving-arrows-item-4 1.5s linear infinite",
+        "moving-arrows-item-5": "moving-arrows-item-5 1.5s linear infinite",
+        "moving-arrows-item-6": "moving-arrows-item-6 1.5s linear infinite",
+        "moving-arrows-item-7": "moving-arrows-item-7 1.5s linear infinite",
+        "moving-arrows-item-8": "moving-arrows-item-8 1.5s linear infinite",
+        "moving-arrows-item-9": "moving-arrows-item-9 1.5s linear infinite",
+        "moving-arrows-item-10": "moving-arrows-item-10 1.5s linear infinite",
+      },
+    }
+  }
+}
+```
+
+<Step>Run the following command</Step>
+
+It will create a new file `hero-button.tsx` inside the `components/animata/button` directory.
+
+```bash
+mkdir -p components/animata/button && touch components/animata/button/hero-button.tsx
+```
+
+<Step>Paste the code</Step>{" "}
+
+Open the newly created file and paste the following code:
+
+```jsx file=<rootDir>/animata/button/hero-button.tsx
+
+```
+
+</Steps>
+
+## Credits
+
+Built by [NishantSinghhhhh](https://github.com/NishantSinghhhhh)