feat: add WaterDrop animation component and integrate into Signin page layout

frontend/app/signin/forgot-password-modal.tsx

@@ -18,7 +18,7 @@ export default function ForgotPasswordModal() {
     <div className="mt-5">
       <Dialog>
         <DialogTrigger asChild>
-          <Button className=" whitespace-nowrap flex items-start ml-24 bg-transparent border-none hover:bg-transparent shadow-none">
+          <Button className=" whitespace-nowrap flex  ml-20 bg-transparent border-none hover:bg-transparent shadow-none">
             <h1 className="text-green-600">Forgot password?</h1>
           </Button>
         </DialogTrigger>

frontend/app/signin/page.tsx

@@ -1,6 +1,7 @@
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import ForgotPasswordModal from "./forgot-password-modal";
+import WaterDrop from "./waterdrop";
 
 import Link from "next/link";
 import Image from "next/image";
@@ -8,9 +9,26 @@ import Image from "next/image";
 export default function Signin() {
   return (
     <div>
-      <div className="grid grid-cols-[1fr_1.5fr] gap-0  h-screen">
-        <div className=" bg-red-200"></div>
-        <div className="bg-green-200 flex justify-center items-center">
+      <div className="grid grid-cols-[1.25fr_1fr] gap-0  h-screen overflow-hidden">
+        <div className="flex justify-center">
+          <div className="flex items-center">
+            <Image
+              src="/water-pot.png"
+              alt="Water Pot"
+              width={500}
+              height={500}
+            />
+            <div className="absolute top-[500px] left-[750px] overflow-hidden">
+              <WaterDrop />
+            </div>
+            <div className="absolute top-[500px] left-[720px] overflow-hidden">
+              <WaterDrop />
+            </div>
+          </div>
+          <div></div>
+        </div>
+
+        <div className="flex justify-center items-center">
           {/* login box */}
           <div className="w-[560px] h-[600px] bg-yellow-200">
             <div className="flex flex-col gap-5  justify-center items-center">
@@ -57,7 +75,7 @@ export default function Signin() {
               <ForgotPasswordModal />
             </div>
             <div className="flex justify-center mt-5">
-              <Button>Submit</Button>
+              <Button className="rounded-full w-20 h-12">Submit</Button>
             </div>
           </div>
         </div>

frontend/app/signin/waterdrop.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+const WaterDrop = () => {
+  return (
+    <div className="relative w-6 h-[400px] overflow-hidden">
+      {/* Water Drop animation */}
+      <div className="absolute w-6 h-6 bg-blue-500 rounded-full animate-drop overflow-hidden"></div>
+    </div>
+  );
+};
+
+export default WaterDrop;

frontend/tailwind.config.ts

@@ -56,6 +56,25 @@ export default {
         md: "calc(var(--radius) - 2px)",
         sm: "calc(var(--radius) - 4px)",
       },
+      keyframes: {
+        dropAnimation: {
+          "0%": {
+            transform: "translateY(-50px)",
+            borderRadius: "50%",
+            width: "1.5rem",
+            height: "1.5rem",
+          },
+          "100%": {
+            transform: "translateY(100vh)",
+            borderRadius: "50% 50% 50% 50%",
+            width: "1rem",
+            height: "2rem",
+          },
+        },
+      },
+      animation: {
+        drop: "dropAnimation 2s ease-in-out infinite",
+      },
     },
   },
   plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],