removed dummy text, fixed events link and description responsiveness

src/components/about/Mission.js

@@ -13,7 +13,7 @@ const Mission = ({ title, img, texts }) => {
       {texts.map((text, index) => (
         <div
           key={index}
-          className="font-montserrat text-white flex items-center text-center text-base lg:text-lg font-semibold mt-8 "
+          className="font-montserrat text-white flex items-end text-center text-base lg:text-lg font-semibold mt-8 "
         >
           <p>{text}</p>
         </div>

src/components/events/Event.js

@@ -1,16 +1,46 @@
+import { LuExternalLink } from "react-icons/lu";
+import Link from "next/link";
+import { useState } from "react";
+import { FaChevronDown } from "react-icons/fa";
+
 const Event = ({ month, day, start, title, location, description }) => {
+  const [expand, setExpand] = useState(false);
+
   return (
     <div className="flex justify-center drop-shadow-2xl w-full">
       <div className="font-urbanist flex justify-center flex-col bg-gradient-to-r from-[#010101] via-[#010101]  to-[#393B42] text-[#ffffff] rounded-l-2xl w-3/12">
         <div className=" mt-3 text-center md:text-5xl font-black ">{month}</div>
-        <div className="text-center md:text-4xl font-black pt-2">{day}</div>
+        <div className="text-center md:text-5xl font-black pt-2">{day}</div>
         <div className="text-center md:text-xl font-black py-2">{start}</div>
       </div>
       <div className="bg-white rounded-r-2xl w-9/12 text-[#303030] p-3">
         <div className="text-4xl ml-5 font-black">{title}</div>
-        <div className="font-sans ml-5 flex text-left text-xl">{location}</div>
-        <div className="font-sans ml-5 mb-2 mt-3 mr-2 text-lg">
-          {description}
+        {location && (
+          <div className="font-sans ml-5 flex text-left text-xl">
+            {location.startsWith("http") ? (
+              <Link
+                className="flex flex-row items-center text-hsp-orange underline"
+                href={location}
+              >
+                <LuExternalLink className="text-hsp-orange" /> &nbsp;Zoom
+              </Link>
+            ) : (
+              location
+            )}
+          </div>
+        )}
+        <div className="font-sans ml-5 mb-2 mt-3 mr-2 text-lg break-all">
+          {expand ? description : `${description.slice(0, 250)}...`}
+          {description.length > 250 && (
+            <div className="flex justify-end">
+              <FaChevronDown
+                className={`text-hsp-orange ml-2 cursor-pointer transition duration-300 ${
+                  expand ? "rotate-180" : "rotate-0"
+                }`}
+                onClick={() => setExpand(!expand)}
+              />
+            </div>
+          )}
         </div>
       </div>
     </div>

src/data/Mission.js

@@ -8,7 +8,6 @@ const texts = [
     img: Image1,
     para: [
       "HSP seeks to promote public awareness and interest in the field through various outreach activities, such as recorded demonstrations, tabling, and educational events.",
-      "Lorem ipsum dolor sit amet. Cum aspernatur illo a cupiditate dolorem quo illum maiores et corporis quae in molestias laborum nam corporis sunt. Non beatae ducimus qui animi quaerat ut placeat recusandae in perspiciatis",
     ],
   },
   {
@@ -23,8 +22,8 @@ const texts = [
     title: "our vision",
     img: Image3,
     para: [
-      "HSP is committed to maintaining an inclusive and welcoming environment that values diversity of thought and respects the rights and dignity of all its members. HSP shall operate in accordance with the relevant laws and regulations and shall be guided by its Constitution and Bylaws.",
-      "Lorem ipsum dolor sit amet. Cum aspernatur illo a cupiditate dolorem quo illum maiores",
+      "HSP is committed to maintaining an inclusive and welcoming environment that values diversity of thought and respects the rights and dignity of all its members.",
+      "HSP shall operate in accordance with the relevant laws and regulations and shall be guided by its Constitution and Bylaws.",
     ],
   },
 ];