feat(button): create new PR for Hero Button as previous PR failed the…

animata/button/hero-button.stories.tsx

@@ -0,0 +1,23 @@
+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",
+  },
+};
+
+// terminated

animata/button/hero-button.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+
+export default function HeroButton() {
+  return (
+    <div className="flex h-[100px] items-center justify-center">
+      <button className="duration-800 group relative flex h-[55.5px] w-[199.46px] 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]">
+          {/* Always visible arrow in the center */}
+          <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 when hovered */}
+          <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 on the extreme right with animation on hover */}
+        <div className="flex items-center justify-center pl-[47px]">
+          <span className="text-md transform font-medium transition-all duration-500 ease-in-out group-hover:-translate-x-2 group-hover:opacity-0">
+            Book Your Demo
+          </span>
+        </div>
+      </button>
+    </div>
+  );
+}
+
+// terminated

content/docs/button/hero-button.mdx

@@ -0,0 +1,163 @@
+---
+title: Hero Button
+description: It is a Fancy button with Good hover effect
+author: Nishant
+---
+
+<ComponentPreview name="button-hero-button--docs" />
+
+<<<<<<< HEAD
+=======
+## Installation
+
+<Steps>
+
+<Step>Update `tailwind.config.js`</Step>
+
+>>>>>>> 571f3ca (feat(ui): corrected the change)
+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)