Add triangle pattern image and Neue Haas Grotesk font integration

src/app/agenda/page.tsx

@@ -2,8 +2,8 @@ import EventCard from "@/components/EventCard";
 import { AgendaData } from "@/data/AgendaData";
 import { DM_Sans } from "next/font/google";
 import Image from "next/image";
-import AgendaIcon from "/public/agenda-title.svg";
-import AsteriskArt from "/public/Asterisk 4.png";
+import AgendaIcon from "/public/agm.png";
+import AsteriskArt from "/public/Asterisk 5.png";
 
 const dm_Sans = DM_Sans({
   weight: ["400", "500", "600"],
@@ -12,49 +12,76 @@ const dm_Sans = DM_Sans({
 
 export default function Home() {
   return (
-    <main className="relative bg-white sm:pt-10">
-      <div className=" overflow-clip relative max-w-[500px] sm:max-w-[540px] mx-auto pb-10 px-4 sm:px-8 bg-white sm:border-[1px] border-gray-100 sm:rounded-lg sm:shadow-xl pt-10 sm:pt-10">
-        <Image
-          src={AsteriskArt}
-          alt="Asterisk icon"
-          width={200}
-          height={200}
-          className="absolute -top-[70px] sm:-top-[110px] -right-[75px] sm:-right-[110px] w-[200px] sm:w-[340px] animate-spin"
+    <main
+      className="relative min-h-screen bg-pink-100 sm:pt-10 pb-10"
+      style={{
+        background:
+          "radial-gradient(circle at top left, #9DADEB 0%, #002FED 100%)",
+        boxShadow: "0 10px 30px rgba(0,47,237,0.2)",
+      }}
+    >
+      {/* Triangle pattern overlay */}
+      <div
+        className="absolute inset-0 w-full h-full opacity-15 z-0 pointer-events-none"
+        style={{
+          backgroundImage: "url('/triangle-pattern.png')",
+          backgroundSize: "300px",
+          backgroundRepeat: "repeat",
+          mixBlendMode: "overlay",
+        }}
+      />
+      {/* Noise texture overlay */}
+
+      <div
+        className="overflow-clip relative max-w-lg mx-auto pb-10 px-4 sm:px-8 sm:border border-gray-100 sm:rounded-xl sm:shadow-2xl pt-10 sm:pt-10 backdrop-blur-sm bg-gradient-to-br from-[#002FED] to-[rgba(157,173,235,0.6)] hover:shadow-2xl transition-all duration-300 z-10"
+        style={{
+          background:
+            "radial-gradient(circle at top left, #9DADEB 0%, #002FED 100%)",
+          boxShadow: "0 10px 30px rgba(0,47,237,0.2)",
+        }}
+      >
+        <div
+          className="absolute inset-0 bg-noise opacity-10 mix-blend-overlay pointer-events-none"
+          style={{
+            backgroundImage: "url('/grain_bg.png')",
+            backgroundRepeat: "cover",
+            backgroundSize: "full 200px",
+          }}
         />
-        <div className={`${dm_Sans.className} text-left bg-white`}>
+        <div
+          className={`${dm_Sans.className} text-left bg-none rounded-lg p-4 `}
+        >
           <Image
             src={AgendaIcon}
             alt="Agenda"
             className="w-[200px] sm:w-[250px] mb-3 transition-all duration-300 ease-in-out"
-          />
-
+          />{" "}
           <div className={`${dm_Sans.className}`}>
-            <p className="flex flex-col items-start space-y-2 mb-3 text-black leading-0 text-[25px] font-[400]">
+            <p className="flex flex-col items-start space-y-2 mb-3 text-white leading-0 text-[25px] font-[400]">
               Event Outline
             </p>
 
             <div className="flex flex-col gap-2">
               <div className="flex flex-row flex-wrap gap-2">
-                <div className="px-3 py-1 border-2 border-black-background rounded-full bg-white text-black font-[500]">
+                <div className="px-3 py-1 border-2 border-pink-100-background rounded-full  text-white font-[500]">
                   1 PM – 4 PM
                 </div>
-                <div className="px-3 py-1 border-2 border-black-background rounded-full bg-gradient-to-r from-[#4591FF] to-[#D4E4FA] text-black font-[500]">
+                <div className="px-3 py-1 border-2 border-white-background rounded-full  text-white font-[500]">
                   13 February
                 </div>
               </div>
               <div className="flex flex-row flex-wrap gap-2 w-full">
-                <div className=" px-3 py-1 border-2 border-black-background rounded-full bg-gradient-to-r from-[#FFDD00] to-[#F6F9C1] text-black font-[500]">
+                <div className=" px-3 py-1 border-2 border-white-background rounded-full  text-white font-[500]">
                   Main Auditorium
                 </div>
               </div>
             </div>
           </div>
-        </div>
-
+        </div>{" "}
         <div
-          className={`${dm_Sans.className} flex flex-row justify-center mt-6 mb-6`}></div>
-
-        <div className="flex flex-col gap-y-4">
+          className={`${dm_Sans.className} flex flex-row justify-center mt-6 mb-6`}
+        ></div>
+        <div className="flex flex-col gap-y-4 p-4 backdrop-blur-sm bg-white/40 rounded-lg">
           {AgendaData.map((event, index) => (
             <EventCard
               key={index}
@@ -71,7 +98,7 @@ export default function Home() {
       </div>
 
       {/* <div className="relative bg-[#13131391]"></div> */}
-      <div className=" bg-white">
+      <div className="bg-white mt-8 rounded-t-lg shadow-lg relative z-10">
         <div className="max-w-[500px] py-5 mx-auto flex flex-row items-center justify-center px-[150px] ">
           <Image
             src={"/logo/fcsc-logo.svg"}
@@ -81,7 +108,7 @@ export default function Home() {
             className="mr-4"
           />
           <Image src={"/logo/sesc-logo.svg"} width={80} height={80} alt="" />
-          <div className="w-[1px] h-10 bg-black"></div>
+          <div className="w-[1px] h-10 bg-pink-100"></div>
         </div>
       </div>
     </main>

src/app/fonts.ts

@@ -0,0 +1,28 @@
+import localFont from 'next/font/local';
+
+export const neueHaasGrotesk = localFont({
+  src: [
+    {
+      path: '../../public/fonts/NeueHaasDisplayLight.woff2',
+      weight: '300',
+      style: 'normal',
+    },
+    {
+      path: '../../public/fonts/NeueHaasDisplayRoman.woff2',
+      weight: '400',
+      style: 'normal',
+    },
+    {
+      path: '../../public/fonts/NeueHaasDisplayMedium.woff2',
+      weight: '500',
+      style: 'normal',
+    },
+    {
+      path: '../../public/fonts/NeueHaasDisplayBold.woff2',
+      weight: '700',
+      style: 'normal',
+    },
+  ],
+  display: 'swap',
+  variable: '--font-neue-haas',
+});

src/components/EventCard.tsx

@@ -28,32 +28,30 @@ export default function EventCard({
 }: Props) {
   return (
     <div
-      className={`text-black ${
+      className={`text-pink-100 ${
         !isLast && "border-b-[1px]"
-      } border-gray-200 w-full flex flex-row pt-2 pb-6 px-1`}>
+      } border-gray-200 w-full flex flex-row pt-2 pb-6 px-1`}
+    >
       <div
-        className={`${dm_Sans.className} text-[22px] w-[100px] flex-shrink-0 mr-4 font-[400] -mt-[2px]`}>
+        className={`${dm_Sans.className} text-[22px] w-[100px] flex-shrink-0 mr-4 font-[400] -mt-[2px]`}
+      >
         {time}
       </div>
       <div className="flex-1 flex flex-col">
         <div className="mb-4">
           <h2
-            className={`${dm_Sans.className} text-[20px] font-[600] leading-tight tracking-tight`}>
+            className={`${dm_Sans.className} text-[20px] font-[600] leading-tight tracking-tight`}
+          >
             {title}
           </h2>
           <p className={`${dm_Sans.className} text-sm`}>{description}</p>
         </div>
         <div className="flex items-center">
           {imageURL && (
             <div
-              className={`overflow-x-clip relative min-w-[70px] w-[70px] h-[70px] border-[2px] border-[black] rounded-full ${
-                [
-                  "bg-gradient-to-r from-[#F571EA] to-[#F8D4FA]",
-                  "bg-gradient-to-r from-[#48FF57] to-[#D1FAD4]",
-                  "bg-gradient-to-r from-[#4591FF] to-[#D4E4FA]",
-                  "bg-gradient-to-r from-[#FFDD00] to-[#F6F9C1]",
-                ][index % 4]
-              }`}>
+              className={`overflow-x-clip relative min-w-[70px] w-[70px] h-[70px] border-[2px] border-[black] rounded-full 
+              }`}
+            >
               <Image
                 src={imageURL}
                 width={100}
@@ -68,7 +66,8 @@ export default function EventCard({
               {name}
             </p>
             <p
-              className={`${dm_Sans.className} text-[15px] font-[100] -mt-[1px]`}>
+              className={`${dm_Sans.className} text-[15px] font-[100] -mt-[1px]`}
+            >
               {position}
             </p>
           </div>

src/data/AgendaData.ts

@@ -1,88 +1,88 @@
 export const AgendaData = [
   {
-    title: "Opening & Speech by Dr. Kalpani Manathunga",
+    title: "Welcome Speech",
     time: "1:00 PM",
-    imageURL: "/faces/kalpani.png",
-    name: "Dr. Kalpani Manathunga",
-    position: "HOD, SE Department SLIIT",
+    imageURL: "/faces/msthilini.png",
+    name: "Ms. Thilini",
+    position: "Master of Ceremony",
   },
   {
-    title: "Staff Introduction",
+    title: "Year Resolution by Previous Year's President",
     time: "1:10 PM",
+    imageURL: "/faces/dinal.png",
+    name: "Pasindu Dinal",
+    position: "President, SESC 2024/25",
+  },
+  {
+    title: "Showreel Video 2024/25",
+    time: "1:20 PM",
+  },
+  {
+    title: "Year Plan for 2025/26",
+    time: "1:25 PM",
+    imageURL: "/faces/pawan.png", 
+    name: "Pawan Senpura",
+    position: "New President, SESC 2025/26",
+  },
+  {
+    title: "Speech by Dr. Kalpani Manathunga",
+    time: "1:40 PM",
+    imageURL: "/faces/kalpani.png",
+    name: "Dr. Kalpani Manathunga",
+    position: "HOD, SE Department SLIIT",
   },
   {
     title: "Speech by Prof. Nuwan Kodagoda",
-    time: "1:15 PM",
+    time: "1:55 PM",
     imageURL: "/faces/nuwan.png",
     name: "Prof. Nuwan Kodagoda",
     position: "Pro Vice Chancellor, SLIIT",
   },
   {
-    title: "Address by Prof. Pradeep Abeygunawardhana",
-    time: "1:30 PM",
-    imageURL: "/faces/pradeep.png", //face needs to be changed
-    name: " Prof. Pradeep Abeygunawardhana",
-    position: "Dean, Faculty Of Computing, SLIIT",
+    title: "Awarding Appreciation Letters for Past Volunteers",
+    time: "2:10 PM",
   },
   {
-    title: "Entertainment Session",
-    time: "1:40 PM",
+    title: "Speech by Sandithi - Volunteer Experience",
+    time: "2:25 PM",
+    imageURL: "/faces/sandamali.png", 
+    name: "Sandithi",
+    position: "Past Volunteer, SESC",
   },
-  /*{
-    title: "Speech by Mr. Ashan Priyadarshana",
-    time: "1:45 PM",
-    imageURL: "/faces/", //face needs to be changed
-    name: "Mr. Ashan Priyadarshana",
-    position: "Tech Lead, Sysco Labs",
-  },*/
   {
-    title: "Speech by Ms. Madhumini Gunaratne",
-    time: "2:05 PM",
-    imageURL: "/faces/madumini.png", //face needs to be changed
-    name: "Ms. Madhumini Gunaratne",
-    position: "Research Assistant, Faculty Of Computing, SLIIT",
+    title: "Speech by Asiri",
+    time: "2:35 PM",
+    imageURL: "/faces/ashan.png", // Use appropriate image if available
+    name: "Asiri",
+    position: "Senior Member",
   },
   {
-    title: "Speech by Mr. Ashan Priyadarshana",
-    time: "2:20 PM",
-    imageURL: "/faces/ashan.png",
-    name: "Mr. Ashan Priyadarshana",
-    position: "Tech Lead, Sysco Labs",
-  },
-  {
-    title: "Speech by Mr. Saman Gunawardena",
-    time: "2:40 PM",
-    imageURL: "/faces/saman.png",
-    name: "Mr. Saman Gunawardena",
-    position: "Senior Manager Industrial Liaison and Placement",
+    title: "Speech by Prof. Pradeep Abeygunawardhana",
+    time: "2:50 PM",
+    imageURL: "/faces/pradeep.png",
+    name: "Prof. Pradeep Abeygunawardhana",
+    position: "Dean, Faculty Of Computing, SLIIT",
   },
   {
-    title: "Speech by Mr. Pasindu Dinal",
-    time: "2:55 PM",
-    imageURL: "/faces/dinal.png",
-    name: "Pasindu Dinal",
-    position: "President, SESC 2024/25",
+    title: "Awarding Service Letters for Past Members",
+    time: "3:05 PM",
   },
   {
-    title: "Speech by Ms. Subhashini Wijerathna",
-    time: "3:10 PM",
-    imageURL: "/faces/subhashini.png",
-    name: "Ms. Subhashini Wijerathna",
-    position:
-      "Associate Manager in Software Engineering, VitalHub Innovations Lab",
+    title: "Speech by President of FCSC",
+    time: "3:20 PM",
+    imageURL: "/faces/gokul.png", // Use appropriate image if available
+    name: "President of FCSC",
+    position: "Faculty of Computing Student Community",
   },
   {
-    title: "Speech by Ms. Sandamali Vidanagamage",
-    time: "3:10 PM",
-    imageURL: "/faces/sandamali.png",
-    name: " Ms. Sandamali Vidanagamage",
-    position: "Manager in Software Engineering, VitalHub Innovations Lab",
+    title: "Awarding Appointment Letters for New Members",
+    time: "3:35 PM",
   },
   {
     title: "Vote of Thanks",
-    time: "3:40 PM",
-    imageURL: "/faces/pawan.png",
-    name: "Pawan Senpura",
-    position: "Dev Relation, SESC 2024/25",
+    time: "3:50 PM",
+    imageURL: "/faces/danushka.png", // Use appropriate image if available
+    name: "Sathnindu",
+    position: "Secretary, SESC 2025/26",
   },
 ];

tailwind.config.ts

@@ -8,6 +8,9 @@ const config: Config = {
   ],
   theme: {
     extend: {
+      fontFamily: {
+        'neue-haas': ['var(--font-neue-haas)'],
+      },
       colors: {
         black: {
           background: "#131313",
@@ -18,6 +21,9 @@ const config: Config = {
         green: {
           100: "#DBFD51",
         },
+        pink: {
+          100: "#FFEAEA",
+        },
       },
       keyframes: {
         spin: {
@@ -28,6 +34,10 @@ const config: Config = {
       animation: {
         spin: "spin 40s linear infinite",
       },
+      backgroundImage: {
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'noise': 'url("/grain_bg.png")',
+      },
     },
   },
   plugins: [],