design changes to reachus & sponsor

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

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"

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

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>
               ))}

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

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 

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 

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>
   );
 }

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

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>