Merge pull request #39 from RotaractMora/minor-fixes

Minor fixes

package.json

@@ -15,6 +15,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cobe": "^0.6.3",
+    "dompurify": "^3.2.1",
     "firebase": "^11.0.1",
     "firebase-admin": "^13.0.1",
     "firebase-functions": "^6.1.1",

src/app/page.tsx

@@ -42,6 +42,7 @@ import Lottie from "react-lottie-player";
 import { IContact } from "@/interfaces/IContacts";
 import { getReachUs } from "@/services/reachus.service";
 import RegistrationStatus from "@/components/ui/google-gemini-effect";
+import CodeEvelPara from "@/components/ui/code-evel-para";
 
 export const products = [
   {
@@ -172,17 +173,18 @@ const Loading =()=> {
 
 
 const Para = ({ level, name, imgURL, loadCallback }: { level: string, name: string, imgURL: string | undefined, loadCallback?: (count: number) => void }): React.ReactNode => {
+  const color = level ==="Gold"?"custom-color-gold dark:custom-dark-color-gold":(level ==="Silver"?"custom-color-silver dark:custom-dark-color-silver":"custom-color-bronze dark:custom-dark-color-bronze")
   return (
-    <div className="w-full max-w-5xl mx-auto px-4 md:px-6 lg:px-8 flex flex-col items-center h-full justify-between">
-      <h6 className="text-3xl md:text-4xl lg:text-6xl text-center font-bold dark:text-custom-color-800 text-custom-dark-color-800 p-2 py-3">
+    <div className="w-full h-full max-w-xl mx-auto px-4 md:px-6 lg:px-8 flex flex-col items-center h-full justify-between">
+      <h6 className={"text-3xl md:text-4xl lg:text-6xl text-center font-bold p-2 py-3"+ " text-"+color}>
         {`${level} Sponsor`}
       </h6>
       <Image
         src={imgURL ? imgURL : SPONSOR}
         width={300}
         height={100}
         alt="Sponsor"
-        className="p-0 rounded-lg dark:bg-black bg-white h-auto w-full max-w-[250px] md:max-w-[300px]"
+        className="p-2 my-2 rounded-lg dark:bg-black bg-white h-auto min-w-[250px] max-w-[250px] md:max-w-[300px]"
       />
       <h5 className="text-2xl md:text-3xl lg:text-5xl text-center font-bold dark:text-custom-color-900 text-custom-dark-color-900 p-3">
         {name}
@@ -261,10 +263,12 @@ export default function Home() {
 
   const events = timeline.map((t) => ({
     title: t.title,
-    content: t.description,
+    content: <CodeEvelPara htmlContent={t.description} />,
     eventDate: t.eventDate.toDate(),
     btnLink: t.btnLink,
     image: t.imgURL,
+    btnText: t.btnText,
+    isBtnDisabled: t.isBtnDisabled,
   }));
 
   const ErrorMessage = ({ message }: { message: string }) => (
@@ -332,27 +336,29 @@ export default function Home() {
       ) : isSponsorsLoading ? (
         <Loading />
       ) : sponsors.length > 0 ? (
-        <TracingBeam className="px-4 md:px-6">
+        <TracingBeam className="px-4 md:px-6 py-24">
         {sponsors
           .filter((sponsor) => ["Gold", "Silver", "Bronze"].includes(sponsor.level))
-          .map((sponsor, index) => (
+          .map((sponsor, index) => {
+
+            return (
             <CardDesign
               key={`${sponsor.level}-${index}`}
-              className="w-full max-w-5xl  mx-auto"
+              className={"w-[250px] md:w-[400px] sm:w-[300px] max-w-xl  mx-auto"}
               CardColor={sponsor.level}
             >
               <Para name={sponsor.name} imgURL={sponsor.imgURL} level={sponsor.level} />
             </CardDesign>
-          ))}
+          )}
+          )}
       </TracingBeam>
       ) : (
         <EmptyStateMessage message="Sponsors will be available soon." />
       )}
 
 <section 
         id="registrationStatus" 
-        className="scroll-mt-20 relative py-16 w-full"
-      >
+        className="scroll-mt-20 relative py-16 w-full">
         <div className="container mx-auto px-4">
           <div className="relative z-10">
             <RegistrationStatus />

src/components/blocks/footer.tsx

@@ -63,7 +63,7 @@ const Footer = () => {
                     </ul>
                 </div>
                 <hr className="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
-                <div className="sm:flex sm:items-center sm:justify-between">
+                <div className="flex items-center justify-between">
                     <FloatingDock items={floatDockItms} />
                 </div>
                 <hr className="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />

src/components/ui/card-design.tsx

@@ -80,7 +80,7 @@ export const CardDesign: React.FC<CardDesignProps> = ({
         )}
       />
 
-      <div className={cn("relative z-10 bg-zinc-900/80 rounded-3xl", className)}>
+      <div className={cn("relative h-full w-full z-10 bg-zinc-900/80 rounded-3xl", className)}>
         {children}
       </div>
     </div>

src/components/ui/code-evel-para.tsx

@@ -0,0 +1,8 @@
+import DOMPurify from 'dompurify';
+
+const CodeEvelPara = ({ htmlContent }:{htmlContent:string}) => {
+  const sanitizedHTML = DOMPurify.sanitize(htmlContent, { ALLOWED_TAGS: ['br', 'strong' , 'b' , 'h1','h2','h3','h4','h5','h6','i','u'] });
+  return <div dangerouslySetInnerHTML={{ __html: sanitizedHTML }} />;
+};
+
+export default CodeEvelPara;

src/components/ui/floating-dock.tsx

@@ -19,77 +19,18 @@ import { useRef, useState } from "react";
 
 export const FloatingDock = ({
   items,
-  desktopClassName,
-  mobileClassName,
+  classNames,
 }: {
   items: { title: string; icon: React.ReactNode; href: string }[];
-  desktopClassName?: string;
-  mobileClassName?: string;
+  classNames?: string;
 }) => {
   return (
     <>
-      <FloatingDockDesktop items={items} className={desktopClassName} />
-      <FloatingDockMobile items={items} className={mobileClassName} />
+      <FloatingDockDesktop items={items} className={classNames} />
     </>
   );
 };
 
-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-row gap-2 items-center justify-center"
-          >
-            {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,
@@ -104,7 +45,7 @@ const FloatingDockDesktop = ({
       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",
+        "mx-auto flex h-auto gap-2 item-center rounded-2xl px-4 md:gap-4",
         className
       )}
     >
@@ -183,7 +124,12 @@ function IconContainer({
               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"
+              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>