Add read more button on track prize card

components/TrackPrizeCard/index.tsx

@@ -1,3 +1,5 @@
+"use client";
+import React, { useState } from "react";
 import Image, { StaticImageData } from "next/image";
 import Link from "next/link";
 import AnimatedTitle from "@/components/AnimatedTitle";
@@ -19,36 +21,68 @@ const TrackPrizeCard: React.FC<TrackPrizeCardProps> = ({
   link,
   prizeDescription,
 }) => {
-
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const toggleDescription = () => {
+    setIsExpanded(!isExpanded);
+  };
+
   return (
     <>
       <AnimatedTitle delay={0.2} viewport={true}>
-        <Link href={link} target="_blank" rel="noreferrer" key={index} className="flex justify-center">
-          <div className={`w-full font-gotham text-white ${index % 3 == 0 ? "hover:-rotate-3" : "hover:rotate-3"} hover:scale-105 transition-all ease-in-out duration-500 max-w-[350px] md:w-[310px] lg:w-[330px] xl:w-[355px]`}>
-            <Image
-              src={prizeimgsrc}
-              className="w-full h-[96px] xl:h-[96px] rounded-[12px] outline-none object-cover"
-              placeholder="blur"
-              alt={prize}
-            />
-            <div
-              className="flex justify-between items-start py-[22px] rounded-b-[20px]"
-            >
-              <div className="flex flex-col">
-                <p className="sm:text-[24px] text-xl font-black my-[4px] sm:h-[68px]">{prizeTitle}</p>
-                <p className="sm:text-[20px] text-xl font-black text-[#FF939E]">{prize}</p>
-                <p
-                  className="sm:text-[12px] text-xl text-[#BBBBBB] mt-2"
-                >
-                  {prizeDescription}
-                </p>
+        <div className="flex justify-center">
+          <div
+            className="w-full font-gotham text-white hover:scale-105 transition-all ease-in-out duration-500 max-w-[350px] md:w-[310px] lg:w-[330px] xl:w-[355px]"
+          >
+            <Link href={link} target="_blank" rel="noreferrer" key={index}>
+              <Image
+                src={prizeimgsrc}
+                className="w-full h-[96px] xl:h-[96px] rounded-[12px] outline-none object-cover"
+                placeholder="blur"
+                alt={prize}
+              />
+              <div className="flex justify-between items-start pt-[22px]">
+                <div className="flex flex-col">
+                  <p className="sm:text-[24px] text-xl font-black my-[4px] sm:h-[68px]">
+                    {prizeTitle}
+                  </p>
+                  <p className="sm:text-[20px] text-xl font-black sm:h-[48px] text-[#FF939E]">
+                    {prize}
+                  </p>
+                </div>
               </div>
-            </div>
+            </Link>
+            <p className="sm:text-[16px] text-lg text-[#BBBBBB] mt-2">
+              {isExpanded
+                ? prizeDescription
+                : `${prizeDescription.slice(0, 150)}...`}
+
+              {
+                isExpanded ? (
+                  <>
+                    <br></br>
+                    <button
+                      onClick={toggleDescription}
+                      className="font-bold underline"
+                    >
+                      Read less
+                    </button>
+                  </>
+                ) : (
+                  <button
+                    onClick={toggleDescription}
+                    className="font-bold underline"
+                  >
+                    Read more
+                  </button>
+                )
+              }
+            </p>
           </div>
-        </Link>
+        </div>
       </AnimatedTitle>
     </>
   );
 };
 
-export default TrackPrizeCard;
+export default TrackPrizeCard;

data/sponsorData.js

@@ -84,25 +84,25 @@ export const normalSponsorsData = [
     sponsor: "Mongo DB",
     category: "Track Sponsor",
     sponsorimgsrc: mongoDB,
-    site: "https://www.mongodb.com/",
+    site: "https://mlh.link/mongodb",
   },
   {
     sponsor: "Midnight",
     category: "Track Sponsor",
     sponsorimgsrc: midnight,
-    site: "https://midnight.network/",
+    site: "https://mlh.link/midnight",
   },
   {
     sponsor: "Cloudflare",
     category: "Track Sponsor",
     sponsorimgsrc: cloudflare,
-    site: "https://www.cloudflare.com/",
+    site: "https://mlh.link/cloudflare",
   },
   {
     sponsor: "Google Cloud",
     category: "Track Sponsor",
     sponsorimgsrc: googlecloud,
-    site: "https://cloud.google.com/apis",
+    site: "https://mlh.link/gemini-quickstart",
   },
 ];
 

data/sponsorTrackPrizesData.js

@@ -9,27 +9,27 @@ export const sponsorTrackPrizesData = [
     prizeTitle: "Best Use of Midnight",
     prize: "JBL Tune 510BT Wireless Headphones",
     link: "https://mlh.link/midnight",
-    prizeDescription: "Midnight is a data protection blockchain powered by zero-knowledge technology. It balances data protection, ownership, and utilization, enabling developers to build secure DApps. Use TypeScript or similar libraries to get started and win wireless headphones for your team!",
+    prizeDescription: "Midnight is a data protection blockchain that offers programmable data protection capabilities powered by zero-knowledge technology to address the delicate balance between data protection, ownership, and utilization. This ensures that developers can leverage blockchain technology without exposing confidential information or losing control over their data. To build on Midnight, all you need is familiarity with TypeScript or a similar JavaScript based library. The service is free to use and their developer documentation has all the information you need to get started. Build a DApp using Midnight this weekend for a chance to win wireless headphones for you and each of your team mates!",
   },
   {
     prizeimgsrc: mongodb,
     prizeTitle: "Best Use of MongoDB Atlas",
     prize: "M5GO IoT Starter Kit",
     link: "https://mlh.link/mongodb",
-    prizeDescription: "MongoDB Atlas is a modern cloud database with a free tier and $50 student credit. Manage your data effortlessly and access free resources from MongoDB University. Build a hack using Atlas to win an M5GO IoT Starter Kit for your team!",
+    prizeDescription: "MongoDB Atlas takes the leading modern database and makes it accessible in the cloud! Get started with a $50 credit for students or sign up for the Atlas free forever tier (no credit card required). Along with a suite of services and functionalities, you'll have everything you need to manage all of your data, and you can get a headstart with free resources from MongoDB University! Build a hack using MongoDB Atlas for a chance to win a M5GO IoT Starter Kit for you and each member of your team.",
   },
   {
     prizeimgsrc: cloudflare,
     prizeTitle: "Best AI Application Built with Cloudflare",
     prize: "Arduino Kit",
     link: "https://mlh.link/cloudflare",
-    prizeDescription: "Cloudflare offers tools to build, deploy, and deliver trusted apps. Use Workers AI for GenAI features like text-to-image or voice-to-text. Build an AI app with Cloudflare's free tier to win Arduino Kits for your team!",
+    prizeDescription: "Cloudflare is one of the world's largest networks enabling hackers like you to build, deploy, and deliver trusted applications, no matter where you are! With Cloudflare, you'll have all the building blocks to create a full-stack application; from C3 (create Cloudflare command line) instance deployment to object storage. You can even run GenAI (LLMs, text to image, Voice to text etc..) in the cloud and leverage your AI functionality via API requests using Cloudlfare's Workers AI! Enjoy Cloudflare's generous free tier to get started at no cost! This weekend, we want you to build an AI Application utilizing Cloudflare's numerous services for a chance to win Arduino Kits for you and your team!",
   },
   {
     prizeimgsrc: googlecloud,
     prizeTitle: "Best Use of Gemini API",
     prize: "Assorted Prizes",
     link: "https://mlh.link/gemini-quickstart",
-    prizeDescription: "Google Gemini API enables AI-powered apps with human-like language understanding and creative content generation. Build innovative projects like chatbots or research summarizers to win exciting prizes this weekend!",
+    prizeDescription: "It's time to push the boundaries of what's possible with AI using Google Gemini. Check out the Gemini API to build AI-powered apps that make your friends say WHOA. So, what can Gemini do for your hackathon project? Understand language like a human and build a chatbot that gives personalized advice. Analyze info like a supercomputer and create an app that summarizes complex research papers. Generate creative content like code, scripts, music, and more. Think of the possibilities… what will you build with the Google Gemini API this weekend?",
   },
 ];