From 92222eb0b2d3820af83f4c7824e07ce99a206dff Mon Sep 17 00:00:00 2001
From: AadarshBaral <adarsmain101@gmail.com>
Date: Thu, 27 Jun 2024 11:32:07 +0545
Subject: [PATCH 1/3] feat: add hero section

---
 animata/hero/hero-section.stories.tsx |  21 +++++
 animata/hero/hero-section.tsx         | 109 ++++++++++++++++++++++++++
 content/docs/hero/hero-section.mdx    |  33 ++++++++
 styles/globals.css                    |   4 +
 4 files changed, 167 insertions(+)
 create mode 100644 animata/hero/hero-section.stories.tsx
 create mode 100644 animata/hero/hero-section.tsx
 create mode 100644 content/docs/hero/hero-section.mdx

diff --git a/animata/hero/hero-section.stories.tsx b/animata/hero/hero-section.stories.tsx
new file mode 100644
index 00000000..f56202f6
--- /dev/null
+++ b/animata/hero/hero-section.stories.tsx
@@ -0,0 +1,21 @@
+import HeroSection from "@/animata/hero/hero-section";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Hero/Hero Section",
+  component: HeroSection,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof HeroSection>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    className: "h-[800px]",
+  },
+};
diff --git a/animata/hero/hero-section.tsx b/animata/hero/hero-section.tsx
new file mode 100644
index 00000000..50595a75
--- /dev/null
+++ b/animata/hero/hero-section.tsx
@@ -0,0 +1,109 @@
+import { useState } from "react";
+import Image from "next/image";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import animataImage from "@/public/android-chrome-192x192.png";
+function HeroSection({ className }: { className?: string }) {
+  const [stackAlign, setStackAlign] = useState<boolean>(false);
+  const [cardStack, setCardStack] = useState<string[]>(["card3", "card2", "card1"]);
+
+  const cardStacks: Record<string, string[]> = {
+    card1: ["card3", "card2", "card1"],
+    card2: ["card3", "card1", "card2"],
+    card3: ["card1", "card2", "card3"],
+  };
+
+  const changeStackAlign = (card: string) => {
+    setStackAlign(true);
+    const newStack = cardStacks[card];
+    if (newStack) {
+      setCardStack(newStack);
+    }
+  };
+  const resetCardStack = () => {
+    setCardStack(["card3", "card2", "card1"]);
+    setStackAlign(false);
+  };
+  return (
+    <div className={cn("hero-container bg-slate-800", className)}>
+      <div className="inner-container m-auto flex h-full w-[90%] flex-col items-center justify-around md:flex-row">
+        <div className="info-container flex flex-col items-center md:w-[60%] md:items-start">
+          <div className="title-logo relative inline-block self-center p-2 md:self-start">
+            <Image
+              width={100}
+              height={100}
+              src={animataImage}
+              className="absolute -top-6 h-10 w-10 md:-top-10 md:h-16 md:w-16"
+              alt="Hero image"
+            />
+            <p className="bg-gradient-to-r from-blue-200 to-white bg-clip-text text-[40px] font-extrabold text-transparent sm:text-[60px] md:text-[70px] lg:text-[80px]">
+              ANIMATA
+            </p>
+          </div>
+          <p className="w-full text-center text-lg leading-8 text-gray-300 md:w-[80%] md:text-left">
+            Hover on the underlined word,
+            <span
+              onMouseOut={resetCardStack}
+              onMouseOver={() => changeStackAlign("card1")}
+              className="text-underline cursor-pointer"
+            >
+              {" "}
+              hover
+            </span>
+            , adipisicing elit. Harum enim
+            <span
+              onMouseOut={resetCardStack}
+              onMouseOver={() => changeStackAlign("card2")}
+              className="text-underline cursor-pointer"
+            >
+              {" "}
+              hover{" "}
+            </span>
+            aliquid veritatis
+            <span
+              onMouseOut={resetCardStack}
+              onMouseOver={() => changeStackAlign("card3")}
+              className="text-underline cursor-pointer"
+            >
+              {" "}
+              Hover,
+            </span>{" "}
+            nobis sit id optio velit. Quasi?
+          </p>
+          <div className="mt-6 flex justify-center gap-2 md:justify-start">
+            <Button className="w-32 bg-gradient-to-r from-blue-400 to-sky-300">
+              <p>Documentation</p>
+            </Button>
+            <Button className="w-32 bg-gradient-to-r from-blue-400 to-sky-300">
+              <p>Contribute</p>
+            </Button>
+          </div>
+        </div>
+        <div className="card-stack-container flex items-center justify-center md:w-[40%]">
+          <div className="cards relative flex h-[300px] w-[200px] items-center justify-center md:h-[350px] md:w-[320px]">
+            {cardStack.map((card, index) => (
+              <div
+                style={{ boxShadow: index !== 2 ? "inset 0px -10px 30px 0px #1e293b" : "none" }}
+                key={index}
+                className={cn(
+                  `absolute inset-0 text-center text-gray-800 z-${index} ${card} h-full w-full rounded-2xl transition-all duration-300 ease-in-out`,
+                  card === "card1" && stackAlign && "",
+                  card === "card2" && (!stackAlign ? "-rotate-[15deg]" : "-left-8 rotate-0"),
+                  card === "card3" && (!stackAlign ? "rotate-[15deg]" : "-left-16 rotate-0"),
+                  index === 0 && "scale-90 bg-slate-900",
+                  index === 1 && "scale-95 bg-slate-700",
+                  index === 2 && `scale-100 bg-slate-500 ${stackAlign && "bg-slate-400"}`,
+                )}
+              >
+                {card}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default HeroSection;
diff --git a/content/docs/hero/hero-section.mdx b/content/docs/hero/hero-section.mdx
new file mode 100644
index 00000000..201b8fea
--- /dev/null
+++ b/content/docs/hero/hero-section.mdx
@@ -0,0 +1,33 @@
+---
+title: Hero Section
+description: A hero section with interactivity
+labels: ["requires-interaction", "hover"]
+author: AdashBaral
+---
+
+<ComponentPreview name="hero-hero-section--docs" />
+
+## Installation
+
+<Steps>
+<Step>Run the following command</Step>
+
+It will create a new file called `hero-section.tsx` inside the `components/animata/hero` directory.
+
+```bash
+touch components/animata/hero/hero-section.tsx
+```
+
+<Step>Paste the code</Step>
+
+Open the newly created file and paste the following code:
+
+```jsx file=<rootDir>/animata/hero/hero-section.tsx
+
+```
+
+</Steps>
+
+## Credits
+
+Built by [Aadarsh Baral](https://github.com/aadarshbaral)
diff --git a/styles/globals.css b/styles/globals.css
index 63af471f..d73dec26 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -75,6 +75,10 @@
   @apply preview-dark border-zinc-700 bg-zinc-950;
 }
 
+.text-underline {
+  @apply cursor-pointer underline decoration-yellow-300 decoration-wavy;
+}
+
 .embedded:not(.dark) {
   .sbdocs-preview {
     @apply preview-light;

From 8d83fa60d304e05e6eca06500cf4f71f0b3a1d2d Mon Sep 17 00:00:00 2001
From: AadarshBaral <adarsmain101@gmail.com>
Date: Fri, 28 Jun 2024 15:25:18 +0545
Subject: [PATCH 2/3] fix: fix hero-section, fixed documentation for widgets

---
 .../image-carousel.stories.tsx}               |   8 +-
 .../image-carousel.tsx}                       |   4 +-
 animata/hero/hero-section.tsx                 | 215 +++++++++++-------
 content/docs/carousel/image-carousel.mdx      |  51 +++++
 content/docs/container/carousel.mdx           |  34 ---
 content/docs/hero/hero-section.mdx            |  18 ++
 content/docs/widget/calorie-counter.mdx       |   5 +
 content/docs/widget/direction-card.mdx        |   4 +
 content/docs/widget/sleep-tracker.mdx         |   5 +
 content/docs/widget/weather-card.mdx          |   4 +
 10 files changed, 229 insertions(+), 119 deletions(-)
 rename animata/{container/carousel.stories.tsx => carousel/image-carousel.stories.tsx} (90%)
 rename animata/{container/carousel.tsx => carousel/image-carousel.tsx} (95%)
 create mode 100644 content/docs/carousel/image-carousel.mdx
 delete mode 100644 content/docs/container/carousel.mdx

diff --git a/animata/container/carousel.stories.tsx b/animata/carousel/image-carousel.stories.tsx
similarity index 90%
rename from animata/container/carousel.stories.tsx
rename to animata/carousel/image-carousel.stories.tsx
index 220d6a1b..e4b1c3cc 100644
--- a/animata/container/carousel.stories.tsx
+++ b/animata/carousel/image-carousel.stories.tsx
@@ -1,15 +1,15 @@
-import Carousel from "@/animata/container/carousel";
+import ImageCarousel from "@/animata/carousel/image-carousel";
 import { Meta, StoryObj } from "@storybook/react";
 
 const meta = {
-  title: "Container/Carousel",
-  component: Carousel,
+  title: "Carousel/Image Carousel",
+  component: ImageCarousel,
   parameters: {
     layout: "centered",
   },
   tags: ["autodocs"],
   argTypes: {},
-} satisfies Meta<typeof Carousel>;
+} satisfies Meta<typeof ImageCarousel>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
diff --git a/animata/container/carousel.tsx b/animata/carousel/image-carousel.tsx
similarity index 95%
rename from animata/container/carousel.tsx
rename to animata/carousel/image-carousel.tsx
index 4e1b85a9..35eb2ab2 100644
--- a/animata/container/carousel.tsx
+++ b/animata/carousel/image-carousel.tsx
@@ -5,11 +5,11 @@ interface ICarouselItem {
   title: string;
   image: string;
 }
-interface ICarouselProps {
+interface IImageCarouselProps {
   items: ICarouselItem[];
 }
 
-export default function Carousel({ items: initialItems }: ICarouselProps) {
+export default function ImageCarousel({ items: initialItems }: IImageCarouselProps) {
   const [currentIndex, setCurrentIndex] = useState(1);
   const handleNext = () => {
     setCurrentIndex((prevIndex) => (prevIndex + 1) % initialItems.length);
diff --git a/animata/hero/hero-section.tsx b/animata/hero/hero-section.tsx
index 50595a75..91ed6f3c 100644
--- a/animata/hero/hero-section.tsx
+++ b/animata/hero/hero-section.tsx
@@ -1,14 +1,139 @@
 import { useState } from "react";
 import Image from "next/image";
 
-import { Button } from "@/components/ui/button";
+import { Button as UIButton } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import animataImage from "@/public/android-chrome-192x192.png";
+
+import TypingText from "../text/typing-text";
+import WaveReveal from "../text/wave-reveal";
+import Cycling from "../widget/cycling";
+import DirectionCard, { testProps } from "../widget/direction-card";
+import WaterTracker from "../widget/water-tracker";
+
+// Button Component
+function Button({ children }: { children: React.ReactNode }) {
+  return (
+    <UIButton className="w-32 bg-gradient-to-r from-blue-400 to-sky-300">
+      <p>{children}</p>
+    </UIButton>
+  );
+}
+
+// ImageWithWave Component
+function ImageWithWave() {
+  return (
+    <div className="title-logo relative inline-block self-center md:self-start">
+      <Image
+        width={100}
+        height={100}
+        src={animataImage}
+        className="-top-6 h-10 w-10 translate-y-5 animate-fadeIn fade-in-0 md:-top-10 md:h-16 md:w-16 md:translate-y-0"
+        alt="Hero image"
+      />
+      <WaveReveal
+        className="my-4 pl-[0px] text-slate-300 sm:text-[60px] md:px-0 md:text-[70px] lg:text-[80px]"
+        text="ANIMATA"
+      />
+    </div>
+  );
+}
+
+// CardLabel Component
+function CardLabel({ text }: { text: string }) {
+  return (
+    <div className="mb-3 mt-2 flex w-full justify-center rounded-xl bg-slate-800 p-2">
+      <TypingText repeat={false} className="w-full self-start text-yellow-300" text={text} />
+    </div>
+  );
+}
+
+// Card Component
+function Card({ card, index, stackAlign }: { card: string; index: number; stackAlign: boolean }) {
+  const cardContent = () => {
+    switch (card) {
+      case "card1":
+        return (
+          <>
+            <Cycling />
+            <CardLabel text="Cycling Card" />
+          </>
+        );
+      case "card2":
+        return (
+          <>
+            <DirectionCard {...testProps} />
+            <CardLabel text="Direction Card" />
+          </>
+        );
+      case "card3":
+        return (
+          <>
+            <WaterTracker dailyGoal={3000} />
+            <CardLabel text="Water Tracker" />
+          </>
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div
+      style={{ boxShadow: index !== 2 ? "inset 0px -10px 30px 0px #1e293b" : "none" }}
+      key={index}
+      className={cn(
+        `absolute inset-0 text-center text-gray-800 z-${index} ${card} my-6 flex h-full w-full flex-col items-center justify-around rounded-2xl transition-all duration-700 ease-out`,
+        card === "card1" && stackAlign && "ml-8 md:ml-0",
+        card === "card2" && (!stackAlign ? "-rotate-[15deg]" : "-left-8 ml-8 rotate-0 md:ml-0"),
+        card === "card3" && (!stackAlign ? "rotate-[15deg]" : "-left-16 ml-8 rotate-0 md:ml-0"),
+        index === 0 && "scale-90 bg-slate-900",
+        index === 1 && "scale-95 bg-slate-700",
+        index === 2 && `scale-100 bg-slate-500 ${stackAlign && "bg-slate-600"}`,
+      )}
+    >
+      <div className="component-container mt-6 flex h-full flex-col justify-around">
+        {cardContent()}
+      </div>
+    </div>
+  );
+}
+
+// InfoContainer Component
+function InfoContainer({ changeStackAlign }: { changeStackAlign: (card: string) => void }) {
+  const underlinedWord = (text: string, card: string) => (
+    <span
+      onMouseOver={() => changeStackAlign(card)}
+      className="cursor-pointer underline decoration-yellow-300 decoration-wavy"
+    >
+      {" "}
+      {text}
+    </span>
+  );
+
+  return (
+    <div className="info-container flex flex-col items-center md:w-[60%] md:items-start">
+      <ImageWithWave />
+      <p className="w-full animate-fadeIn text-center text-lg leading-8 text-gray-300 md:w-[80%] md:text-left">
+        Hand-crafted ✍️ interaction animations and effects from around the internet, designed to be{" "}
+        {underlinedWord("Beautiful", "card1")}, {underlinedWord("Functional", "card2")}, and{" "}
+        {underlinedWord("Interactive", "card3")} 🌍. Ready to copy and paste into your project to
+        enhance its aesthetic and usability.
+      </p>
+      <div className="mt-6 flex animate-fadeIn justify-center gap-2 md:justify-start">
+        <Button>Documentation</Button>
+        <Button>Contribute</Button>
+      </div>
+    </div>
+  );
+}
+
+// HeroSection Component
 function HeroSection({ className }: { className?: string }) {
-  const [stackAlign, setStackAlign] = useState<boolean>(false);
-  const [cardStack, setCardStack] = useState<string[]>(["card3", "card2", "card1"]);
+  const [stackAlign, setStackAlign] = useState(false);
+  const [cardStack, setCardStack] = useState(["card3", "card2", "card1"]);
 
-  const cardStacks: Record<string, string[]> = {
+  const cardStacks: { [key: string]: string[] } = {
     card1: ["card3", "card2", "card1"],
     card2: ["card3", "card1", "card2"],
     card3: ["card1", "card2", "card3"],
@@ -21,83 +146,15 @@ function HeroSection({ className }: { className?: string }) {
       setCardStack(newStack);
     }
   };
-  const resetCardStack = () => {
-    setCardStack(["card3", "card2", "card1"]);
-    setStackAlign(false);
-  };
+
   return (
-    <div className={cn("hero-container bg-slate-800", className)}>
-      <div className="inner-container m-auto flex h-full w-[90%] flex-col items-center justify-around md:flex-row">
-        <div className="info-container flex flex-col items-center md:w-[60%] md:items-start">
-          <div className="title-logo relative inline-block self-center p-2 md:self-start">
-            <Image
-              width={100}
-              height={100}
-              src={animataImage}
-              className="absolute -top-6 h-10 w-10 md:-top-10 md:h-16 md:w-16"
-              alt="Hero image"
-            />
-            <p className="bg-gradient-to-r from-blue-200 to-white bg-clip-text text-[40px] font-extrabold text-transparent sm:text-[60px] md:text-[70px] lg:text-[80px]">
-              ANIMATA
-            </p>
-          </div>
-          <p className="w-full text-center text-lg leading-8 text-gray-300 md:w-[80%] md:text-left">
-            Hover on the underlined word,
-            <span
-              onMouseOut={resetCardStack}
-              onMouseOver={() => changeStackAlign("card1")}
-              className="text-underline cursor-pointer"
-            >
-              {" "}
-              hover
-            </span>
-            , adipisicing elit. Harum enim
-            <span
-              onMouseOut={resetCardStack}
-              onMouseOver={() => changeStackAlign("card2")}
-              className="text-underline cursor-pointer"
-            >
-              {" "}
-              hover{" "}
-            </span>
-            aliquid veritatis
-            <span
-              onMouseOut={resetCardStack}
-              onMouseOver={() => changeStackAlign("card3")}
-              className="text-underline cursor-pointer"
-            >
-              {" "}
-              Hover,
-            </span>{" "}
-            nobis sit id optio velit. Quasi?
-          </p>
-          <div className="mt-6 flex justify-center gap-2 md:justify-start">
-            <Button className="w-32 bg-gradient-to-r from-blue-400 to-sky-300">
-              <p>Documentation</p>
-            </Button>
-            <Button className="w-32 bg-gradient-to-r from-blue-400 to-sky-300">
-              <p>Contribute</p>
-            </Button>
-          </div>
-        </div>
-        <div className="card-stack-container flex items-center justify-center md:w-[40%]">
-          <div className="cards relative flex h-[300px] w-[200px] items-center justify-center md:h-[350px] md:w-[320px]">
+    <div className={cn("hero-container dark:bg-slate-800", className)}>
+      <div className="inner-container m-auto flex h-full w-[90%] flex-col items-center justify-around dark:bg-slate-800 md:flex-row">
+        <InfoContainer changeStackAlign={changeStackAlign} />
+        <div className="card-stack-container flex animate-fadeIn items-center justify-center md:m-0 md:w-[40%]">
+          <div className="cards relative flex h-[350px] w-[280px] items-center justify-between md:h-[350px] md:w-[300px]">
             {cardStack.map((card, index) => (
-              <div
-                style={{ boxShadow: index !== 2 ? "inset 0px -10px 30px 0px #1e293b" : "none" }}
-                key={index}
-                className={cn(
-                  `absolute inset-0 text-center text-gray-800 z-${index} ${card} h-full w-full rounded-2xl transition-all duration-300 ease-in-out`,
-                  card === "card1" && stackAlign && "",
-                  card === "card2" && (!stackAlign ? "-rotate-[15deg]" : "-left-8 rotate-0"),
-                  card === "card3" && (!stackAlign ? "rotate-[15deg]" : "-left-16 rotate-0"),
-                  index === 0 && "scale-90 bg-slate-900",
-                  index === 1 && "scale-95 bg-slate-700",
-                  index === 2 && `scale-100 bg-slate-500 ${stackAlign && "bg-slate-400"}`,
-                )}
-              >
-                {card}
-              </div>
+              <Card key={index} card={card} index={index} stackAlign={stackAlign} />
             ))}
           </div>
         </div>
diff --git a/content/docs/carousel/image-carousel.mdx b/content/docs/carousel/image-carousel.mdx
new file mode 100644
index 00000000..c80b42dc
--- /dev/null
+++ b/content/docs/carousel/image-carousel.mdx
@@ -0,0 +1,51 @@
+---
+title: Image Carousel
+description: A responsive carousel for your projects
+labels: ["requires interaction", "click"]
+author: AdashBaral
+---
+
+<ComponentPreview name="carousel-image-carousel--docs" />
+
+## Installation
+
+<Steps>
+
+<Step>Update `tailwind.config.js`</Step>
+```js
+theme: {
+    extend: {
+      keyframes: {
+          fadeIn: {
+          from: { opacity: "0" },
+          to: { opacity: "1" },
+        },
+      },
+    },
+    animation: {
+      fadeIn: "fadeIn 0.5s ease-in",
+    },
+  },
+```
+
+<Step>Run the following command</Step>
+
+It will create a new file called `image-carousel.tsx` inside the `components/animata/carousel` directory.
+
+```bash
+mkdir -p components/animata/carousel && touch components/animata/carousel/image-carousel.tsx
+```
+
+<Step>Paste the code</Step>
+
+Open the newly created file and paste the following code:
+
+```jsx file=<rootDir>/animata/carousel/image-carousel.tsx
+
+```
+
+</Steps>
+
+## Credits
+
+Built by [Aadarsh Baral](https://github.com/aadarshbaral)
diff --git a/content/docs/container/carousel.mdx b/content/docs/container/carousel.mdx
deleted file mode 100644
index e979aa7a..00000000
--- a/content/docs/container/carousel.mdx
+++ /dev/null
@@ -1,34 +0,0 @@
----
-title: Carousel
-description: A responsive carousel for your projects
-labels: ["requires interaction", "click"]
-author: AdashBaral
-published: false
----
-
-<ComponentPreview name="container-carousel--docs" />
-
-## Installation
-
-<Steps>
-<Step>Run the following command</Step>
-
-It will create a new file called `carousel.tsx` inside the `components/animata/container` directory.
-
-```bash
-mkdir -p components/animata/container && touch components/animata/container/carousel.tsx
-```
-
-<Step>Paste the code</Step>
-
-Open the newly created file and paste the following code:
-
-```jsx file=<rootDir>/animata/container/carousel.tsx
-
-```
-
-</Steps>
-
-## Credits
-
-Built by [Aadarsh Baral](https://github.com/aadarshbaral)
diff --git a/content/docs/hero/hero-section.mdx b/content/docs/hero/hero-section.mdx
index 201b8fea..efee19c5 100644
--- a/content/docs/hero/hero-section.mdx
+++ b/content/docs/hero/hero-section.mdx
@@ -10,6 +10,24 @@ author: AdashBaral
 ## Installation
 
 <Steps>
+
+<Step>Update `tailwind.config.js`</Step>
+```js
+theme: {
+    extend: {
+      keyframes: {
+          fadeIn: {
+          from: { opacity: "0" },
+          to: { opacity: "1" },
+        },
+      },
+    },
+    animation: {
+      fadeIn: "fadeIn 0.5s ease-in",
+    },
+  },
+```
+
 <Step>Run the following command</Step>
 
 It will create a new file called `hero-section.tsx` inside the `components/animata/hero` directory.
diff --git a/content/docs/widget/calorie-counter.mdx b/content/docs/widget/calorie-counter.mdx
index 63b0a60b..93b12ea9 100644
--- a/content/docs/widget/calorie-counter.mdx
+++ b/content/docs/widget/calorie-counter.mdx
@@ -8,6 +8,11 @@ description: A calorie counter for your app
 ## Installation
 
 <Steps>
+
+<Step>Install dependencies</Step>
+
+This uses [DonutChart](/docs/graphs/donut-chart) for the progress bar. Install it by following the instructions [here](/docs/graphs/donut-chart#installation).
+
 <Step>Run the following command</Step>
 
 It will create a new file called `calorie-counter.tsx` inside the `components/animata/widget` directory.
diff --git a/content/docs/widget/direction-card.mdx b/content/docs/widget/direction-card.mdx
index 5bee2ab9..d9b38ed7 100644
--- a/content/docs/widget/direction-card.mdx
+++ b/content/docs/widget/direction-card.mdx
@@ -9,6 +9,10 @@ author: AdashBaral
 ## Installation
 
 <Steps>
+
+<Step>Install dependencies</Step>
+```bash npm install lucide-react ```
+
 <Step>Run the following command</Step>
 
 It will create a new file called `direction-card.tsx` inside the `components/animata/widget` directory.
diff --git a/content/docs/widget/sleep-tracker.mdx b/content/docs/widget/sleep-tracker.mdx
index cd4cb2dd..eaa6648b 100644
--- a/content/docs/widget/sleep-tracker.mdx
+++ b/content/docs/widget/sleep-tracker.mdx
@@ -9,6 +9,11 @@ author: AdashBaral
 ## Installation
 
 <Steps>
+
+<Step>Install dependencies</Step>
+
+This uses [BarChart](/docs/graphs/bar-chart) for the bar graph. Install it by following the instructions [here](/docs/graphs/bar-chart#installation).
+
 <Step>Run the following command</Step>
 
 It will create a new file called `sleep-tracker.tsx` inside the `components/animata/widget` directory.
diff --git a/content/docs/widget/weather-card.mdx b/content/docs/widget/weather-card.mdx
index f865d879..715c2d9f 100644
--- a/content/docs/widget/weather-card.mdx
+++ b/content/docs/widget/weather-card.mdx
@@ -9,6 +9,10 @@ author: AdashBaral
 ## Installation
 
 <Steps>
+
+<Step>Install dependencies</Step>
+```bash npm install lucide-react ```
+
 <Step>Run the following command</Step>
 
 It will create a new file called `weather-card.tsx` inside the `components/animata/widget` directory.

From d133a6d5a18187dcd27494fe0043a84d0d91d0de Mon Sep 17 00:00:00 2001
From: AadarshBaral <adarsmain101@gmail.com>
Date: Fri, 28 Jun 2024 15:32:29 +0545
Subject: [PATCH 3/3] style: remove text-underline class from globals.css

---
 styles/globals.css | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/styles/globals.css b/styles/globals.css
index d73dec26..4870ca49 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -58,6 +58,7 @@
     10px 10px;
   background-color: #fefefe;
 }
+
 .preview-dark {
   background-image: radial-gradient(#6a6a6a 1px, transparent 1px),
     radial-gradient(#6a6a6a 1px, transparent 1px);
@@ -75,10 +76,6 @@
   @apply preview-dark border-zinc-700 bg-zinc-950;
 }
 
-.text-underline {
-  @apply cursor-pointer underline decoration-yellow-300 decoration-wavy;
-}
-
 .embedded:not(.dark) {
   .sbdocs-preview {
     @apply preview-light;