RotaractMora · SakinduRansindu · Nov 17, 2024 · Nov 16, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-element-to-jsx-string": "^15.0.0",
+    "react-icons": "^5.3.0",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
     "three": "^0.170.0"

diff --git a/public/Images/logo/RUR.png b/public/Images/logo/RUR.png
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -350,6 +350,8 @@ export default function Home() {
             )
         }
 
+
+
 
         <div id="reach_us">
           <GridBackground title="Reach Us">

diff --git a/src/components/blocks/footer.tsx b/src/components/blocks/footer.tsx
@@ -1,31 +1,73 @@
-// add tsx component 
+
+import { FloatingDock  } from "../ui/floating-dock";
+import { FaLinkedin , FaInstagram, FaFacebook, FaYoutube, FaAt } from "react-icons/fa";
+import { SiRotaryinternational } from "react-icons/si";
+import  LOGO_SMALL  from "../../../public/Images/logo/RUR20_small.png";
+import Image from "next/image";
 
 const Footer = () => {
+
+    const floatDockItms = [
+        {
+            icon: <SiRotaryinternational className="h-6 w-6 dark:text-custom-color-700 text-custom-color-600 hover:text-custom-dark-color-900 dark:hover:text-custom-color-900" />,
+            href: "https://rotaractmora.org",
+            title: "Rotaract Mora",
+        },
+        {
+            icon: <FaFacebook className="h-6 w-6 dark:text-custom-color-700 text-custom-color-600 hover:text-custom-dark-color-900 dark:hover:text-custom-color-900" />,
+            href: "https://www.facebook.com/uom.rur/",
+            title: "Facebook",
+        },
+        {
+            icon: <FaInstagram className="h-6 w-6 dark:text-custom-color-700 text-custom-color-600 hover:text-custom-dark-color-900 dark:hover:text-custom-color-900" />,
+            href: "https://www.instagram.com/rotaractmora/",
+            title: "Instagram",
+        },
+        {
+            icon: <FaYoutube className="h-6 w-6 dark:text-custom-color-700 text-custom-color-600 hover:text-custom-dark-color-900 dark:hover:text-custom-color-900" />,
+            href: "https://www.youtube.com/user/rotaractmora",
+            title: "Youtube",
+        },
+        {
+            icon: <FaLinkedin className="h-6 w-6 dark:text-custom-color-700 text-custom-color-600 hover:text-custom-dark-color-900 dark:hover:text-custom-color-900" />,
+            href: "https://www.linkedin.com/company/rotaract-club-of-university-of-moratuwa",
+            title: "Linkedin",
+        },
+        {
+            icon: <FaAt className="h-6 w-6 dark:text-custom-color-700 text-custom-color-600 hover:text-custom-dark-color-900 dark:hover:text-custom-color-900" />,
+            href: "mailto:areyouready@rotaractmora.org",
+            title: "Email",
+        }
+    ];
   return (
         <footer className="bg-light-gradient rounded-lg shadow dark:bg-dark-gradient m-1">
             <div className="w-full max-w-screen-xl mx-auto p-4 md:py-8">
                 <div className="sm:flex sm:items-center sm:justify-between">
-                    <a href="https://flowbite.com/" className="flex items-center mb-4 sm:mb-0 space-x-3 rtl:space-x-reverse">
-                        <img src="https://flowbite.com/docs/images/logo.svg" className="h-8" alt="Flowbite Logo" />
-                        <span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
-                    </a>
+                    <div className="flex items-center mb-4 sm:mb-0 space-x-3 rtl:space-x-reverse">
+                        <Image src={LOGO_SMALL} className="h-8" alt="Flowbite Logo" />
+                        <span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Are You Ready 2025</span>
+                    </div>
                     <ul className="flex flex-wrap items-center mb-6 text-sm font-medium text-gray-500 sm:mb-0 dark:text-gray-400">
                         <li>
-                            <a href="#" className="hover:underline me-4 md:me-6">About</a>
+                            <a href="#timeline" className="hover:underline me-4 md:me-6">Timeline</a>
                         </li>
                         <li>
-                            <a href="#" className="hover:underline me-4 md:me-6">Privacy Policy</a>
+                            <a href="#sponsors" className="hover:underline me-4 md:me-6">Sponsors</a>
                         </li>
                         <li>
-                            <a href="#" className="hover:underline me-4 md:me-6">Licensing</a>
+                            <a href="#reach_us" className="hover:underline me-4 md:me-6">Reach Us</a>
                         </li>
                         <li>
-                            <a href="#" className="hover:underline">Contact</a>
+                            <a href="/admin" className="hover:underline">Admin</a>
                         </li>
                     </ul>
                 </div>
                 <hr className="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
-                <span className="block text-sm text-gray-500 sm:text-center dark:text-gray-400">© 2023 <a href="https://flowbite.com/" className="hover:underline">Flowbite™</a>. All Rights Reserved.</span>
+                <div className="sm:flex sm:items-center sm:justify-between">
+                    <FloatingDock items={floatDockItms} />
+                </div>
+                <hr className="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
+                <span className="block text-sm text-gray-500 sm:text-center dark:text-gray-400">© 2024 <a href="https://rotaractmora.org" className="hover:underline">Rotaract Mora</a>. All Rights Reserved.</span>
             </div>
         </footer>
   );

diff --git a/src/components/ui/floating-dock.tsx b/src/components/ui/floating-dock.tsx
@@ -0,0 +1,201 @@
+/**
+ * Note: Use position fixed according to your needs
+ * Desktop navbar is better positioned at the bottom
+ * Mobile navbar is better positioned at bottom right.
+ **/
+
+import { cn } from "@/lib/utils";
+import { IconLayoutNavbarCollapse } from "@tabler/icons-react";
+import {
+  AnimatePresence,
+  MotionValue,
+  motion,
+  useMotionValue,
+  useSpring,
+  useTransform,
+} from "framer-motion";
+import Link from "next/link";
+import { useRef, useState } from "react";
+
+export const FloatingDock = ({
+  items,
+  desktopClassName,
+  mobileClassName,
+}: {
+  items: { title: string; icon: React.ReactNode; href: string }[];
+  desktopClassName?: string;
+  mobileClassName?: string;
+}) => {
+  return (
+    <>
+      <FloatingDockDesktop items={items} className={desktopClassName} />
+      <FloatingDockMobile items={items} className={mobileClassName} />
+    </>
+  );
+};
+
+const FloatingDockMobile = ({
+  items,
+  className,
+}: {
+  items: { title: string; icon: React.ReactNode; href: string }[];
+  className?: string;
+}) => {
+  const [open, setOpen] = useState(false);
+  return (
+    <div className={cn("relative block md:hidden", className)}>
+      <AnimatePresence>
+        {open && (
+          <motion.div
+            layoutId="nav"
+            className="absolute bottom-full mb-2 inset-x-0 flex flex-col gap-2"
+          >
+            {items.map((item, idx) => (
+              <motion.div
+                key={item.title}
+                initial={{ opacity: 0, y: 10 }}
+                animate={{
+                  opacity: 1,
+                  y: 0,
+                }}
+                exit={{
+                  opacity: 0,
+                  y: 10,
+                  transition: {
+                    delay: idx * 0.05,
+                  },
+                }}
+                transition={{ delay: (items.length - 1 - idx) * 0.05 }}
+              >
+                <Link
+                  href={item.href}
+                  key={item.title}
+                  className="h-10 w-10 rounded-full bg-gray-50 dark:bg-neutral-900 flex items-center justify-center"
+                >
+                  <div className="h-4 w-4">{item.icon}</div>
+                </Link>
+              </motion.div>
+            ))}
+          </motion.div>
+        )}
+      </AnimatePresence>
+      <button
+        type="button"
+        title="Toggle Navigation"
+        onClick={() => setOpen(!open)}
+        className="h-10 w-10 rounded-full bg-gray-50 dark:bg-neutral-800 flex items-center justify-center"
+      >
+        <IconLayoutNavbarCollapse className="h-5 w-5 text-neutral-500 dark:text-neutral-400" />
+      </button>
+    </div>
+  );
+};
+
+const FloatingDockDesktop = ({
+  items,
+  className,
+}: {
+  items: { title: string; icon: React.ReactNode; href: string }[];
+  className?: string;
+}) => {
+  let mouseX = useMotionValue(Infinity);
+  return (
+    <motion.div
+      onMouseMove={(e) => mouseX.set(e.pageX)}
+      onMouseLeave={() => mouseX.set(Infinity)}
+      className={cn(
+        "mx-auto hidden md:flex h-16 gap-4 items-end  rounded-2xl px-4 pb-3",
+        className
+      )}
+    >
+      {items.map((item) => (
+        <IconContainer mouseX={mouseX} key={item.title} {...item} />
+      ))}
+    </motion.div>
+  );
+};
+
+function IconContainer({
+  mouseX,
+  title,
+  icon,
+  href,
+}: {
+  mouseX: MotionValue;
+  title: string;
+  icon: React.ReactNode;
+  href: string;
+}) {
+  let ref = useRef<HTMLDivElement>(null);
+
+  let distance = useTransform(mouseX, (val) => {
+    let bounds = ref.current?.getBoundingClientRect() ?? { x: 0, width: 0 };
+
+    return val - bounds.x - bounds.width / 2;
+  });
+
+  let widthTransform = useTransform(distance, [-150, 0, 150], [40, 80, 40]);
+  let heightTransform = useTransform(distance, [-150, 0, 150], [40, 80, 40]);
+
+  let widthTransformIcon = useTransform(distance, [-150, 0, 150], [20, 40, 20]);
+  let heightTransformIcon = useTransform(
+    distance,
+    [-150, 0, 150],
+    [20, 40, 20]
+  );
+
+  let width = useSpring(widthTransform, {
+    mass: 0.1,
+    stiffness: 150,
+    damping: 12,
+  });
+  let height = useSpring(heightTransform, {
+    mass: 0.1,
+    stiffness: 150,
+    damping: 12,
+  });
+
+  let widthIcon = useSpring(widthTransformIcon, {
+    mass: 0.1,
+    stiffness: 150,
+    damping: 12,
+  });
+  let heightIcon = useSpring(heightTransformIcon, {
+    mass: 0.1,
+    stiffness: 150,
+    damping: 12,
+  });
+
+  const [hovered, setHovered] = useState(false);
+
+  return (
+    <Link href={href}>
+      <motion.div
+        ref={ref}
+        style={{ width, height }}
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+        className="aspect-square rounded-full bg-gray-200 dark:bg-neutral-800 flex items-center justify-center relative"
+      >
+        <AnimatePresence>
+          {hovered && (
+            <motion.div
+              initial={{ opacity: 0, y: 10, x: "-50%" }}
+              animate={{ opacity: 1, y: 0, x: "-50%" }}
+              exit={{ opacity: 0, y: 2, x: "-50%" }}
+              className="px-2 py-0.5 whitespace-pre rounded-md bg-gray-100 border dark:bg-neutral-800 dark:border-neutral-900 dark:text-white border-gray-200 text-neutral-700 absolute left-1/2 -translate-x-1/2 -top-8 w-fit text-xs"
+            >
+              {title}
+            </motion.div>
+          )}
+        </AnimatePresence>
+        <motion.div
+          style={{ width: widthIcon, height: heightIcon }}
+          className="flex items-center justify-center"
+        >
+          {icon}
+        </motion.div>
+      </motion.div>
+    </Link>
+  );
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -350,6 +350,8 @@ export default function Home() { @@
                 )
             }
             <div id="reach_us">
               <GridBackground title="Reach Us">
@@ Expand Down @@