made the Dapp more responsive, alinged with figma and more responsive…

src/app/admin-dashboard/components/AdminDashboardSidebar.tsx

@@ -1,3 +1,4 @@
+import { DirectionAnimation } from "@/motion/Animation";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
@@ -6,6 +7,7 @@ interface NavItem {
   href: string;
   icon: string; // now this is a string path
   label: string;
+  id: number;
   // className?: string;
 }
 
@@ -14,21 +16,26 @@ const navItems: NavItem[] = [
     href: "/admin-dashboard",
     icon: "/svg/dashboardIcon.svg",
     label: "Dashboard",
+    id: 1,
   },
   {
     href: "/admin-dashboard/plans",
     icon: "/svg/plansIcon.svg", // "bg-[#1E0B40] border border-[#807F8D]"
     label: "Plans",
+    id: 2,
   },
   {
     href: "/admin-dashboard/claims",
     icon: "/svg/claimsIcons.svg",
     label: "Claims",
-  }, {
+    id: 3,
+  },
+  {
     href: "/admin-dashboard/support",
     icon: "/svg/supportIcon.svg",
     label: "Support",
-  }
+    id: 4,
+  },
 ];
 
 export default function AdminDashboardSidebar({
@@ -38,11 +45,14 @@ export default function AdminDashboardSidebar({
   sidebarOpen: boolean;
   setSidebarOpen: any;
 }) {
-
   const pathname = usePathname();
 
   return (
-    <nav className={`p-4 md:static fixed ${sidebarOpen ? "" : "left-[-100vw]"} transition-all left-0 top-0 bottom-0 h-full`}>
+    <nav
+      className={`p-4 md:static fixed ${
+        sidebarOpen ? "" : "left-[-100vw]"
+      } transition-all left-0 top-0 bottom-0 h-full`}
+    >
       <div className="w-64 rounded-xl h-full border border-[#413F54] bg-[#29242F] bg-[linear-gradient(180deg,rgba(41,36,47,1)_52%,rgba(20,16,26,1)_100%)] flex flex-col">
         <div className="p-6">
           <h1 className="text-2xl font-bold">
@@ -61,15 +71,26 @@ export default function AdminDashboardSidebar({
 
         {/* Navigation Items */}
         <nav className="flex-1 px-4 space-y-2">
-          {navItems.map(({ href, icon, label }) => (
-            <Link
-              key={label}
-              href={href}
-              className={`flex items-center gap-3 p-3  text-white hover:bg-[#1E0B40] rounded-md transition-colors ${pathname === href ? "bg-[#1E0B40] border border-[#807F8D]" : ""}`}
-            >
-              <Image src={icon} alt={`${label} icon`} width={20} height={20} />
-              <span>{label}</span>
-            </Link>
+          {navItems.map(({ href, icon, label, id }) => (
+            <DirectionAnimation direction="left-to-right" delay={id * 0.1}>
+              <Link
+                key={label}
+                href={href}
+                className={`flex items-center gap-3 p-3  text-white hover:bg-[#1E0B40] rounded-md transition-colors ${
+                  pathname === href
+                    ? "bg-[#1E0B40] border border-[#807F8D]"
+                    : ""
+                }`}
+              >
+                <Image
+                  src={icon}
+                  alt={`${label} icon`}
+                  width={20}
+                  height={20}
+                />
+                <span>{label}</span>
+              </Link>
+            </DirectionAnimation>
           ))}
         </nav>
 

src/app/globals.css

@@ -1,34 +1,30 @@
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-@import url('https://fonts.googleapis.com/css2?family=Manrope:[email protected]&display=swap');
-
+@import url("https://fonts.googleapis.com/css2?family=Manrope:[email protected]&display=swap");
 
 :root {
   --foreground-rgb: 255, 255, 255;
-  --background-rgb: 6, 2, 14, 1;  /* This is the RGB values for #06020E */
+  --background-rgb: 6, 2, 14, 1; /* This is the RGB values for #06020E */
 }
 
 html,
 body {
   height: 100% !important;
-  font-family: 'Manrope', sans-serif;
-}
-
-body {
   background: rgb(var(--background-rgb));
   color: white;
 }
 
+p {
+  font-family: "Manrope", sans-serif !important;
+}
+
 .scrollbar-hide {
   scrollbar-width: none;
   -ms-overflow-style: none;
 }
 
-
-
 @layer base {
   :root {
     --background: 0 0% 100%;
@@ -85,8 +81,6 @@ body {
   }
 }
 
-
-
 @layer base {
   * {
     @apply border-border;
@@ -96,3 +90,65 @@ body {
   }
 }
 
+@keyframes lineAnimation {
+  from {
+    width: 0;
+  }
+  to {
+    width: 100%;
+  }
+}
+
+@keyframes flipHorizontal {
+  0% {
+    transform: rotateY(0deg);
+  }
+  100% {
+    transform: rotateY(360deg);
+  }
+}
+
+@keyframes zoomInOut {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.3);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.zoom-pulse {
+  animation: zoomInOut 4s ease-in-out infinite;
+}
+
+.flip-horizontal-rotate {
+  animation: flipHorizontal 3s linear infinite;
+  transform-style: preserve-3d;
+  perspective: 1000px;
+}
+
+.animated-underline {
+  position: relative;
+}
+
+.animated-underline::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 0;
+  height: 2px;
+  background-color: white;
+  transition: width 0.3s ease-in-out;
+}
+
+.animated-underline:hover::after {
+  width: 100%;
+}
+
+.animated-underline.active::after {
+  width: 100%;
+}

src/app/layout.tsx

@@ -1,4 +1,3 @@
-
 import type { Metadata } from "next";
 import { Providers } from "@/components/Providers";
 import { METADATA_CONFIG } from "../../Config/app.config";
@@ -26,4 +25,4 @@ export default function RootLayout({
       </body>
     </html>
   );
-}
+}

src/app/user-dashboard/advisory/advisory.tsx

@@ -1,10 +1,164 @@
+import React, { useState, useRef, useEffect } from "react";
+import { Send } from "lucide-react";
+import { DirectionAnimation } from "@/motion/Animation";
 
+function Advisory() {
+  const [messages, setMessages] = useState([
+    {
+      text: "Hello!👋, How can I help you today? Choose an option below or type your question.",
+      sender: "bot",
+    },
+  ]);
+  const [inputValue, setInputValue] = useState("");
 
+  // Add a ref for the chat container to enable auto-scrolling
+  const chatContainerRef = useRef<HTMLDivElement>(null);
 
-function Advisory (){
-    return(
-        <h1>Advisory</h1>
-    )
+  // Auto-scroll to bottom when messages change
+  useEffect(() => {
+    if (chatContainerRef.current) {
+      chatContainerRef.current.scrollTop =
+        chatContainerRef.current.scrollHeight;
+    }
+  }, [messages]);
+
+  const handleSend = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (inputValue.trim() === "") return;
+
+    // Add user message
+    setMessages([...messages, { text: inputValue, sender: "user" }]);
+
+    // Simulate bot response
+    setTimeout(() => {
+      setMessages((prev) => [
+        ...prev,
+        {
+          text: `Thank you for your message about "${inputValue}". Our team will review your request and get back to you soon.`,
+          sender: "bot",
+        },
+      ]);
+    }, 1000);
+
+    setInputValue("");
+  };
+
+  const handleButtonClick = (option: string) => {
+    // Add user selection as a message
+    setMessages([...messages, { text: option, sender: "user" }]);
+
+    // Simulate bot response based on selection
+    let response = "";
+    switch (option) {
+      case "Support":
+        response =
+          "Our support team is here to help. Please describe your issue, and we'll assist you as soon as possible.";
+        break;
+      case "Inheritance plan":
+        response =
+          "Inheritance planning helps ensure your digital assets are passed on according to your wishes. How would you like to set up your inheritance plan?";
+        break;
+      case "Claim":
+        response =
+          "To process your claim, we'll need some additional information. Please provide details about the assets you're claiming.";
+        break;
+      case "Swap token":
+        response =
+          "You can swap tokens directly through our platform. Which tokens would you like to exchange?";
+        break;
+      default:
+        response = "How can I help you with that?";
+    }
+
+    setTimeout(() => {
+      setMessages((prev) => [...prev, { text: response, sender: "bot" }]);
+    }, 800);
+  };
+
+  return (
+    <div className="flex flex-col h-[500px] mb-10 bg-transparent">
+      <div
+        ref={chatContainerRef}
+        className="flex-1 bg-[#FFFFFF1A] p-4 overflow-y-auto"
+      >
+        <div className="max-w-3xl mx-auto space-y-4">
+          {messages.map((message, index) => (
+            <div
+              key={index}
+              className={`flex ${
+                message.sender === "user" ? "justify-end" : "justify-start"
+              }`}
+            >
+              <DirectionAnimation
+                direction={
+                  message.sender === "user" ? "right-to-left" : "left-to-right"
+                }
+              >
+                <div
+                  className={`max-w-xs md:max-w-md p-3 rounded-lg ${
+                    message.sender === "user"
+                      ? "bg-[#100033] border border-[#FFFFFF1A] text-white"
+                      : "bg-[#FFFFFF1A] border border-[#FFFFFF1A]"
+                  }`}
+                >
+                  {message.text}
+                </div>
+              </DirectionAnimation>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Option buttons */}
+      <div className="p-4 border-t border-[#FFFFFF1A]">
+        <div className="max-w-3xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-2 mb-4">
+          <button
+            onClick={() => handleButtonClick("Support")}
+            className="p-2 text-sm bg-gradient-to-b from-gray-300/20 via-gray-500/20 to-gray-700/20 hover:bg-gray-700 rounded-md transition-colors"
+          >
+            Support
+          </button>
+          <button
+            onClick={() => handleButtonClick("Inheritance plan")}
+            className="p-2 text-sm bg-gradient-to-b from-gray-300/20 via-gray-500/20 to-gray-700/20 hover:bg-gray-700 rounded-md transition-colors"
+          >
+            Inheritance plan
+          </button>
+          <button
+            onClick={() => handleButtonClick("Claim")}
+            className="p-2 text-sm bg-gradient-to-b from-gray-300/20 via-gray-500/20 to-gray-700/20 hover:bg-gray-700 rounded-md transition-colors"
+          >
+            Claim
+          </button>
+          <button
+            onClick={() => handleButtonClick("Swap token")}
+            className="p-2 text-sm bg-gradient-to-b from-gray-300/20 via-gray-500/20 to-gray-700/20 hover:bg-gray-700 rounded-md transition-colors"
+          >
+            Swap token
+          </button>
+        </div>
+
+        {/* Chat input */}
+        <div className="max-w-3xl mx-auto">
+          <form onSubmit={handleSend} className="flex items-center space-x-2">
+            <input
+              type="text"
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              placeholder="Type your message here..."
+              className="flex-1 bg-[#FFFFFF1A] p-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-gray-700"
+            />
+            <button
+              type="submit"
+              className="p-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors"
+            >
+              <Send size={20} />
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
 }
 
 export default Advisory;