From b5d5b2ea6183d0fc385bc612e7a8144b1c0ffd2b Mon Sep 17 00:00:00 2001
From: Sakindu Ransindu <sakindu.ransindu@gmail.com>
Date: Thu, 26 Dec 2024 02:56:19 +0530
Subject: [PATCH] design changes to reachus & sponsor

---
 README.md                                     |  2 ++
 src/app/admin/dashboard/reachus/page.tsx      | 10 ++++++
 src/app/admin/dashboard/sponsors/page.tsx     | 22 +++++++++++++
 src/app/page.tsx                              | 20 +++++------
 .../blocks/expandable-card-standard.tsx       |  2 +-
 .../reach-us-contact-add-update-modal.tsx     | 18 ++++++++++
 .../modals/sponsor-add-update-modal.tsx       | 33 +++++++++++++++++++
 src/components/blocks/reach-us-section.tsx    | 22 ++++++++++---
 src/components/ui/floating-navbar.tsx         | 28 ++++++++++------
 src/components/ui/google-gemini-effect.tsx    |  8 ++---
 src/components/ui/hover-border-gradient.tsx   | 26 ++++++++++-----
 src/interfaces/IContacts.ts                   |  1 +
 src/interfaces/ISponsors.ts                   |  2 ++
 13 files changed, 154 insertions(+), 40 deletions(-)

diff --git a/README.md b/README.md
index 2b53147..96aaa8c 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,5 @@
+[<img alt="Deployed with FTP Deploy Action" src="https://img.shields.io/badge/Deployed With-FTP DEPLOY ACTION-%3CCOLOR%3E?style=for-the-badge&color=0077b6">](https://github.com/SamKirkland/FTP-Deploy-Action)
+
 This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
 
 ## Getting Started
diff --git a/src/app/admin/dashboard/reachus/page.tsx b/src/app/admin/dashboard/reachus/page.tsx
index ab95340..25194cc 100644
--- a/src/app/admin/dashboard/reachus/page.tsx
+++ b/src/app/admin/dashboard/reachus/page.tsx
@@ -70,6 +70,9 @@ export default function ManageReachUsContacts() {
           <table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
             <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
               <tr>
+                <th scope="col" className="px-6 py-3">
+                  Line
+                </th>
                 <th scope="col" className="px-6 py-3">
                   Contact name
                 </th>
@@ -99,6 +102,13 @@ export default function ManageReachUsContacts() {
                   key={contact.id}
                   className="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700"
                 >
+                  <th
+                    scope="row"
+                    className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
+                  >
+                    {contact.line}
+                  </th>
+                  
                   <th
                     scope="row"
                     className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
diff --git a/src/app/admin/dashboard/sponsors/page.tsx b/src/app/admin/dashboard/sponsors/page.tsx
index a39ef52..c1da619 100644
--- a/src/app/admin/dashboard/sponsors/page.tsx
+++ b/src/app/admin/dashboard/sponsors/page.tsx
@@ -75,6 +75,12 @@ export default function ManageSponsors() {
                 <th scope="col" className="px-6 py-3">
                   Sponsor name
                 </th>
+                <th scope="col" className="px-6 py-3">
+                  Partnership
+                </th>
+                <th scope="col" className="px-6 py-3">
+                  Order
+                </th>
                 <th scope="col" className="px-6 py-3">
                   Image
                 </th>
@@ -104,6 +110,22 @@ export default function ManageSponsors() {
                   >
                     {sponsor.name}
                   </th>
+                  
+                  <td
+                    scope="row"
+                    className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
+                  >
+                    {sponsor.partnership}
+                  </td>
+
+                  <td
+                    scope="row"
+                    className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
+                  >
+                    {sponsor.order}
+                  </td>
+
+
                   <td className="px-6 py-4">
                   <div className="relative overflow-visible">
                   <Image
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 11c63ba..15c0eec 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -166,11 +166,13 @@ const Loading = () => {
 
 const Para = ({
   level,
+  partnership,
   name,
   imgURL,
   loadCallback,
 }: {
   level: string;
+  partnership: string;
   name: string;
   imgURL: string | undefined;
   loadCallback?: (count: number) => void;
@@ -186,14 +188,12 @@ const Para = ({
     <div className="w-full h-full max-w-xl mx-auto px-4 md:px-6 lg:px-8 flex flex-col items-center justify-between">
       <h6
         className={
-          "text-3xl md:text-4xl lg:text-5xl text-center font-bold p-2 py-3" +
+          "text-2xl md:text-3xl lg:text-4xl text-center font-bold p-2 py-3" +
           " text-" +
           color
         }
       >
-        {level}
-        <br />
-        Sponsor
+        {partnership}
       </h6>
 
       {/* Image Section */}
@@ -348,7 +348,7 @@ export default function Home() {
             loop={true}
             animationData={LoadingAnimation}
             play
-            style={{ width: 300, height: 300 }}
+            style={{ width: 150, height: 150 }}
             onLoopComplete={loadingTimeout}
           />
         </div>
@@ -379,7 +379,7 @@ export default function Home() {
       </div>
 
       <div className="scroll-mt-20 py-8 px-6 text-center bg-gray-100 dark:bg-gray-800">
-        <h2 className="text-2xl md:text-3xl font-bold text-center dark:text-custom-color-800 bg-gradient-to-r from-[#0f0271] to-[#15c0fe] bg-clip-text text-transparent mb-4">
+        <h2 className="text-3xl md:text-4xl font-bold text-center dark:text-custom-color-800 bg-gradient-to-r from-[#0f0271] to-[#15c0fe] bg-clip-text text-transparent mb-4">
           Thank You for Your Support!
         </h2>
         <p className="mt-4 text-base md:text-lg text-gray-600 dark:text-gray-400 leading-relaxed">
@@ -405,12 +405,7 @@ export default function Home() {
           <div className="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
             {sponsors
               .sort((a, b) => {
-                // Custom sorting: Gold first, then Silver, others later
-                if (a.level === "Gold") return -1;
-                if (b.level === "Gold") return 1;
-                if (a.level === "Silver") return -1;
-                if (b.level === "Silver") return 1;
-                return 0; // No change for other levels
+                return a.order - b.order;
               })
               .map((sponsor, index) => (
                 <CardDesign
@@ -422,6 +417,7 @@ export default function Home() {
                     name={sponsor.name}
                     imgURL={sponsor.imgURL}
                     level={sponsor.level}
+                    partnership={sponsor.partnership}
                   />
                 </CardDesign>
               ))}
diff --git a/src/components/blocks/expandable-card-standard.tsx b/src/components/blocks/expandable-card-standard.tsx
index ef53680..9902407 100644
--- a/src/components/blocks/expandable-card-standard.tsx
+++ b/src/components/blocks/expandable-card-standard.tsx
@@ -108,7 +108,7 @@ export default function ExpandableCard() {
       Registered Companies
     </motion.h2>
     </AnimatePresence>
-    <div id="company-data-list" className="p-12 max-h-screen dark:bg-custom-dark-color-600/20 bg-custom-color-600/20 overflow-y-auto [&::-webkit-scrollbar]:[width:3px] [&::-webkit-scrollbar-thumb]:bg-custom-color-600/20">
+    <div id="company-data-list" className="p-12 md:w-max mx-auto max-h-screen overflow-y-auto [&::-webkit-scrollbar]:[width:3px] [&::-webkit-scrollbar-thumb]:bg-custom-color-600/20">
       <AnimatePresence>
         {active && typeof active === "object" && (
           <motion.div
diff --git a/src/components/blocks/modals/reach-us-contact-add-update-modal.tsx b/src/components/blocks/modals/reach-us-contact-add-update-modal.tsx
index 4371f05..e22c4a5 100644
--- a/src/components/blocks/modals/reach-us-contact-add-update-modal.tsx
+++ b/src/components/blocks/modals/reach-us-contact-add-update-modal.tsx
@@ -24,6 +24,7 @@ function ReachUsContactAddUpdateModal({
   const [isVisibleToPublic, setisVisibleToPublic] = useState(contact?.isVisibleToPublic || false);
   const [contactPhotoURL, setContactPhotoURl] = useState(contact?.photo || '');
   const [uploadNewImage, setUploadNewImage] = useState( contact?.photo ? false : true);
+  const [line, setLine] = useState(contact?.line || 0);
 
   // Handle file selection or drag-and-drop
   const handleFileChange = (e: any) => {
@@ -124,6 +125,7 @@ function ReachUsContactAddUpdateModal({
           contact: contactTelContact,
           post : contactPost,
           photo: imgURL,
+          line: line,
           isVisibleToPublic: isVisibleToPublic,
       };
 
@@ -202,6 +204,22 @@ function ReachUsContactAddUpdateModal({
                     />
                   </div>
 
+                  <div>
+                  <label htmlFor="contactLine" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Contact Line</label>
+                    <select
+                      name="contactLine" 
+                      id="contactLine" 
+                      className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" 
+                      required 
+                      onChange={(e) => setLine(parseInt(e.target.value))}
+                    >
+                      <option value="4" selected={line===4}>Line 4</option>
+                      <option value="1" selected={line===1}>Line 1</option>
+                      <option value="2" selected={line===2}>Line 2</option>
+                      <option value="3" selected={line===3}>Line 3</option>
+                      </select>
+                  </div>
+
                     <div>
                     <label htmlFor="contactTelContact" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Contact Telephone</label>
                     <input 
diff --git a/src/components/blocks/modals/sponsor-add-update-modal.tsx b/src/components/blocks/modals/sponsor-add-update-modal.tsx
index 3851229..12f9db9 100644
--- a/src/components/blocks/modals/sponsor-add-update-modal.tsx
+++ b/src/components/blocks/modals/sponsor-add-update-modal.tsx
@@ -23,6 +23,8 @@ function SponsorAddUpdateModal({
   const [sponsorIsVisibleToPublic, setSponsorIsVisibleToPublic] = useState(sponsor?.isVisibleToPublic || false);
   const [sponsorImgURL, setSponsorImgURL] = useState(sponsor?.imgURL || '');
   const [uploadNewImage, setUploadNewImage] = useState( sponsor?.imgURL ? false : true);
+  const [sponsorPartnership, setSponsorPartnership] = useState(sponsor?.partnership || '');
+  const [sponsorOrder, setSponsorOrder] = useState(sponsor?.order || 0);
 
   console.log("Sponsor: ", sponsor);
 
@@ -109,6 +111,8 @@ function SponsorAddUpdateModal({
         // Sponsor data object
         const sponsorData = {
             name: sponsorName,
+            partnership: sponsorPartnership,
+            order: sponsorOrder,
             level: sponsorLevel as SponsorLevel,
             imgURL,
             isVisibleToPublic: sponsorIsVisibleToPublic,
@@ -161,6 +165,7 @@ function SponsorAddUpdateModal({
 
               <form className="p-4 md:p-5" onSubmit={handleSubmit}>
                 <div className="grid gap-4 mb-4 grid-cols-2">
+
                   <div className="col-span-2">
                     <label htmlFor="sponsorName" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Sponsor Name</label>
                     <input 
@@ -175,6 +180,34 @@ function SponsorAddUpdateModal({
                     />
                   </div>
 
+                  <div className="col-span-2">
+                    <label htmlFor="sponsorPartnership" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Partnership</label>
+                    <input 
+                      type="text" 
+                      name="sponsorPartnership" 
+                      id="sponsorPartnership" 
+                      className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" 
+                      placeholder="Parnership ex: Knowledge Partner" 
+                      required 
+                      value={sponsorPartnership}
+                      onChange={(e) => setSponsorPartnership(e.target.value)}
+                    />
+                  </div>
+
+                  <div className="col-span-2">
+                    <label htmlFor="sponsorOrder" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Order</label>
+                    <input 
+                      type="number" 
+                      name="sponsorOrder" 
+                      id="sponsorOrder" 
+                      className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" 
+                      placeholder="Order" 
+                      required 
+                      value={sponsorOrder}
+                      onChange={(e) => setSponsorOrder(parseInt(e.target.value))}
+                    />
+                  </div>
+
                   <div className="col-span-2">
                     <label htmlFor="sponsorLevel" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Category</label>
                     <select 
diff --git a/src/components/blocks/reach-us-section.tsx b/src/components/blocks/reach-us-section.tsx
index 34f2def..28dc1c4 100644
--- a/src/components/blocks/reach-us-section.tsx
+++ b/src/components/blocks/reach-us-section.tsx
@@ -4,22 +4,34 @@ import React from "react";
 import { useId } from "react";
 
 export default function ReachUsSection({ grid }: { grid: IContact[] }) {
+  const lines = [
+    grid.filter((con) => con.line === 1),
+    grid.filter((con) => con.line === 2),
+    grid.filter((con) => con.line === 3),
+    grid.filter((con) => con.line === 4)
+  ];
+
   return (
     <div className="py-10 lg:py-20 mx-8">
-      <div className="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-15 md:gap-10 sm:gap-5 max-w-7xl mx-auto">
-        {grid.map((person, index) => (
+      {lines.map((line, index) => (
+
+      <div key={"contactLine-"+index} className="flex justify-center align-center max-w-7xl mx-auto">
+        {line.map((person, index) => (
           <div
             key={person + "-" + index}
-            className="relative bg-gradient-to-b dark:from-neutral-900 from-neutral-100 dark:to-neutral-950 to-white p-6 rounded-3xl overflow-hidden shadow-xl dark:border-custom-dark-color-900 border-custom-color-900 border-2 border-solid my-3"
+            className="relative bg-gradient-to-b dark:from-neutral-900 from-neutral-100 dark:to-neutral-950 to-white p-6 rounded-3xl overflow-hidden shadow-xl dark:border-custom-dark-color-900 border-custom-color-900 border-2 border-solid my-3 mx-2"
+            style={{minWidth: "20rem"}}
           >
             <Grid size={20} />
-            <div className="flex items-center justify-between">
+            <div className="flex items-center">
               <div>
                 <img
                   src={`${person.photo}`}
                   alt={person.name}
                   className="w-20 h-20 rounded-full"
                 />
+                </div>
+                <div className="pl-5">
                 <h2 className="text-2xl font-bold dark:text-custom-color-600 text-custom-dark-color-900">
                   {person.name}
                 </h2>
@@ -54,6 +66,8 @@ export default function ReachUsSection({ grid }: { grid: IContact[] }) {
           </div>
         ))}
       </div>
+      ))}
+
     </div>
   );
 }
diff --git a/src/components/ui/floating-navbar.tsx b/src/components/ui/floating-navbar.tsx
index 5354362..0a78a12 100644
--- a/src/components/ui/floating-navbar.tsx
+++ b/src/components/ui/floating-navbar.tsx
@@ -9,6 +9,9 @@ import Image from "next/image";
 import { IThemeContextType } from "@/interfaces/IThemeContext";
 import SMALL_LOGO from "../../../public/Images/logo/RUR20_small.png";
 import { AnimatePresence, motion } from "framer-motion";
+import { HoverBorderGradient } from "./hover-border-gradient";
+import { sendGTMEvent } from "@next/third-parties/google";
+import { useRouter } from "next/navigation";
 
 export const FloatingNav = ({
   navItems,
@@ -22,8 +25,9 @@ export const FloatingNav = ({
   className?: string;
 }) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
-
+  const router = useRouter();
   const themeContext = useContext<IThemeContextType | null>(ThemeContext);
+  const portalLink = "https://rur.rotaractmora.org";
 
   if (!themeContext) {
     throw new Error(
@@ -61,25 +65,29 @@ export const FloatingNav = ({
               <Link
                 key={`link-${idx}`}
                 href={navItem.link}
-                className="text-sm font-medium text-gray-700 hover:text-blue-500 transition-all duration-200"
+                className="text-sm font-medium text-gray-700 hover:text-blue-500 transition-all duration-200 content-center"
               >
                 {navItem.name}
               </Link>
             ))}
+
+            <HoverBorderGradient onClick={() =>{
+                            sendGTMEvent({ event: 'buttonClicked', section: 'Navbar' , activity: 'portal visit'  , link: portalLink ? portalLink : '' })
+                            router.push(portalLink ? portalLink : '')
+                      }
+            } isDisabled={false} className="text-sm" >RUR Portal</HoverBorderGradient>
           </div>
         </div>
 
         {/* Mobile View */}
         <div className="flex items-center space-x-2 md:hidden">
           {/* Mobile Registration Button */}
-          <button
-            className="px-4 py-2 bg-black text-white rounded-lg 
-               dark:bg-white dark:text-black 
-               hover:bg-gray-800 dark:hover:bg-gray-200 
-               transition-colors text-sm font-medium"
-          >
-            Registration portal
-          </button>
+
+           <HoverBorderGradient onClick={() =>{
+                            sendGTMEvent({ event: 'buttonClicked', section: 'Navbar' , activity: 'portal visit'  , link: portalLink ? portalLink : '' })
+                            router.push(portalLink ? portalLink : '')
+                      }
+            } isDisabled={false} >RUR Portal</HoverBorderGradient>
 
           {/* Mobile Menu Toggle */}
           <button
diff --git a/src/components/ui/google-gemini-effect.tsx b/src/components/ui/google-gemini-effect.tsx
index bcfa4d8..5323b18 100644
--- a/src/components/ui/google-gemini-effect.tsx
+++ b/src/components/ui/google-gemini-effect.tsx
@@ -124,7 +124,7 @@ const StatusCard: React.FC<StatusCardProps> = ({title,signIn,signUp,signInUrl,si
                   sendGTMEvent({ event: 'buttonClicked', section: 'Registration_Status' , activity: title+' signUp'  , link:signUpUrl ? signUpUrl : '' })
                   router.push(signUpUrl ? signUpUrl : '')
             }
-          } isDisabled={false} className="opacity-50 cursor-not-allowed text-gray-500 hover:bg-transparent" containerClassName="border-gray-300 bg-gray-100 dark:bg-gray-700" >Register Now</HoverBorderGradient>
+          } isDisabled={false} >Register Now</HoverBorderGradient>
           </div>
         ) : (
           <div className="mt-4">
@@ -133,7 +133,7 @@ const StatusCard: React.FC<StatusCardProps> = ({title,signIn,signUp,signInUrl,si
             >
               Registration is close
             </motion.span>
-            <HoverBorderGradient isDisabled={true} onClick={() => {
+            <HoverBorderGradient isDisabled={true}  className="opacity-50 cursor-not-allowed text-gray-500" onClick={() => {
               sendGTMEvent({ event: 'buttonClicked', section: 'Registration_Status' , activity: title+' signUp' , link:signUpUrl ? signUpUrl : '' });
               router.push(signUpUrl ? signUpUrl : '');
             }
@@ -161,7 +161,7 @@ const StatusCard: React.FC<StatusCardProps> = ({title,signIn,signUp,signInUrl,si
             >
               SignIn is close
             </motion.span>
-            <HoverBorderGradient isDisabled={true} onClick={() => {
+            <HoverBorderGradient isDisabled={true}  className="opacity-50 cursor-not-allowed text-gray-500" onClick={() => {
               sendGTMEvent({ event: 'buttonClicked', section: 'Registration_Status' , activity: title+' signIn' , link:signInUrl ? signInUrl : '' });
               router.push(signInUrl ? signInUrl : '')
             }
@@ -381,7 +381,7 @@ const RegistrationStatus = () => {
             initial={{ y: -20, opacity: 0 }}
             animate={{ y: 0, opacity: 1 }}
             transition={{ delay: 0.2 }}
-            className="text-4xl md:text-7xl font-bold text-center mb-8 bg-clip-text text-transparent bg-gradient-to-b from-neutral-100 to-neutral-300"
+            className="text-4xl md:text-7xl font-bold text-center mb-8 bg-clip-text text-transparent bg-gradient-to-b from-neutral-100 to-neutral-300 pb-6"
           >
             Registration Status
           </motion.h2>
diff --git a/src/components/ui/hover-border-gradient.tsx b/src/components/ui/hover-border-gradient.tsx
index a2d1610..3ae554c 100644
--- a/src/components/ui/hover-border-gradient.tsx
+++ b/src/components/ui/hover-border-gradient.tsx
@@ -4,7 +4,7 @@ import React, { useState, useEffect } from "react";
 import { motion } from "framer-motion";
 import { cn } from "@/lib/utils";
 
-type Direction = "TOP" | "LEFT" | "BOTTOM" | "RIGHT";
+type Direction = "TOP" | "LEFT" | "BOTTOM" | "RIGHT" | "NULL" ;
 
 export function HoverBorderGradient({
   children,
@@ -26,28 +26,36 @@ export function HoverBorderGradient({
   } & React.HTMLAttributes<HTMLElement>
 >) {
   const [hovered, setHovered] = useState<boolean>(false);
-  const [direction, setDirection] = useState<Direction>("TOP");
+  const [direction, setDirection] = useState<Direction>(isDisabled?"NULL":"TOP");
 
   const rotateDirection = (currentDirection: Direction): Direction => {
     const directions: Direction[] = ["TOP", "LEFT", "BOTTOM", "RIGHT"];
     const currentIndex = directions.indexOf(currentDirection);
+    if(currentIndex <0){
+      return "NULL"
+    }
+    else{
     const nextIndex = clockwise
       ? (currentIndex - 1 + directions.length) % directions.length
       : (currentIndex + 1) % directions.length;
     return directions[nextIndex];
+    }
   };
 
   const movingMap: Record<Direction, string> = {
-    TOP: "radial-gradient(20.7% 50% at 50% 0%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)",
-    LEFT: "radial-gradient(16.6% 43.1% at 0% 50%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)",
+    TOP: 
+      "radial-gradient(20.7% 50% at 50% 0%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)",
+    LEFT: 
+      "radial-gradient(16.6% 43.1% at 0% 50%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)",
     BOTTOM:
       "radial-gradient(20.7% 50% at 50% 100%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)",
     RIGHT:
       "radial-gradient(16.2% 41.199999999999996% at 100% 50%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)",
+    NULL:
+      "",
   };
 
-  const highlight =
-    "radial-gradient(75% 181.15942028985506% at 50% 50%, #3275F8 0%, rgba(255, 255, 255, 0) 100%)";
+  const highlight = "radial-gradient(75% 181.15942028985506% at 50% 50%,rgb(136, 213, 255) 0%, rgba(255, 255, 255, 0) 100%)";
 
   useEffect(() => {
     if (!hovered) {
@@ -64,7 +72,7 @@ export function HoverBorderGradient({
       }}
       onMouseLeave={() => setHovered(false)}
       className={cn(
-        "relative flex rounded-full border  content-center bg-black/20 hover:bg-black/10 transition duration-500 dark:bg-white/20 items-center flex-col flex-nowrap gap-10 h-min justify-center overflow-visible p-px decoration-clone w-fit disabled:cursor-not-allowed",
+        "relative flex rounded-full border content-center bg-black/20 hover:bg-black/10 transition duration-500 dark:bg-white/20 items-center flex-col flex-nowrap gap-10 h-min justify-center overflow-visible p-px decoration-clone w-fit disabled:cursor-not-allowed",
         containerClassName
       )}
       disabled={isDisabled}
@@ -91,8 +99,8 @@ export function HoverBorderGradient({
         initial={{ background: movingMap[direction] }}
         animate={{
           background: hovered
-            ? [movingMap[direction], highlight]
-            : movingMap[direction],
+            ? [ highlight]
+            : [movingMap[direction] ],
         }}
         transition={{ ease: "linear", duration: duration ?? 1 }}
       />
diff --git a/src/interfaces/IContacts.ts b/src/interfaces/IContacts.ts
index 6322210..7c7ebbe 100644
--- a/src/interfaces/IContacts.ts
+++ b/src/interfaces/IContacts.ts
@@ -5,5 +5,6 @@ export interface IContact {
     contact: string;
     post: string;
     photo: string;
+    line: number;
     isVisibleToPublic: boolean;
 }
\ No newline at end of file
diff --git a/src/interfaces/ISponsors.ts b/src/interfaces/ISponsors.ts
index 31c257e..cc3a10f 100644
--- a/src/interfaces/ISponsors.ts
+++ b/src/interfaces/ISponsors.ts
@@ -5,7 +5,9 @@ export type SponsorLevel = "Gold" | "Silver" | "Bronze" | string;
 export interface ISponsor {
     id?: string;
     name: string;
+    partnership: string;
     level: SponsorLevel;
+    order: number;
     imgURL?: string;
     timestamp?: Timestamp;
     isVisibleToPublic: boolean;