From 40a163393a3551b049744d5a0153e00d2f56e710 Mon Sep 17 00:00:00 2001
From: Debatreya <debatreyadas@gmail.com>
Date: Thu, 17 Apr 2025 01:57:05 +0530
Subject: [PATCH 1/5] feat(update/director): Update in Directors Message

---
 app/[locale]/director-message/page.tsx | 215 ++++++++++++++++++++++++-
 1 file changed, 214 insertions(+), 1 deletion(-)

diff --git a/app/[locale]/director-message/page.tsx b/app/[locale]/director-message/page.tsx
index 725f8201..edfa2b49 100644
--- a/app/[locale]/director-message/page.tsx
+++ b/app/[locale]/director-message/page.tsx
@@ -1,7 +1,68 @@
+import Image from 'next/image';
+import { FaPhone } from 'react-icons/fa6';
+import { MdEmail } from 'react-icons/md';
+
 import Heading from '~/components/heading';
 import { getTranslations } from '~/i18n/translations';
 import { getS3Url } from '~/server/s3';
 
+// CONSTANTS FOR DIRECTOR MESSAGE PAGE
+// DIRECTOR's CARDS
+const directorCard = {
+  image: `${getS3Url()}/assets/director.jpeg`,
+  alt: "Director's Image",
+  title: 'Director',
+  name: 'Professor B.V. Ramana Reddy',
+  position: 'Director',
+  institute: 'National Institute of Technology, Kurukshetra',
+  contact: {
+    phone: ['01744-233201', '01744-233204', '01744-238083'],
+    fax: '01744-238494',
+    mobile: '+91 74978 22212',
+    email: 'director@nitkkr.ac.in',
+  },
+};
+
+// DIRECTOR's OFFICE
+const directorOfficeCards = [
+  {
+    image: `${getS3Url()}/assets/office.jpeg`,
+    alt: "Director's Office Image 1",
+    name: 'Arun Goel',
+    position: 'Professor (Head of the Department)',
+    email: 'drarun_goel@yahoo.co.in',
+    phone: ['01744-233349', '01744-233300'],
+  },
+  {
+    image: `${getS3Url()}/assets/office.jpeg`,
+    alt: "Director's Office Image 2",
+    name: 'Arun Goel',
+    position: 'Professor (Head of the Department)',
+    email: 'drarun_goel@yahoo.co.in',
+    phone: ['01744-233349', '01744-233300'],
+  },
+  {
+    image: `${getS3Url()}/assets/office.jpeg`,
+    alt: "Director's Office Image 3",
+    name: 'Arun Goel',
+    position: 'Professor (Head of the Department)',
+    email: 'drarun_goel@yahoo.co.in',
+    phone: ['01744-233349', '01744-233300'],
+  },
+  {
+    image: `${getS3Url()}/assets/office.jpeg`,
+    alt: "Director's Office Image 4",
+    name: 'Arun Goel',
+    position: 'Professor (Head of the Department)',
+    email: 'drarun_goel@yahoo.co.in',
+    phone: ['01744-233349', '01744-233300'],
+  },
+];
+const directorOffice = {
+  title: "Director's Office",
+  cards: directorOfficeCards,
+};
+
 export default async function DirectorCorner({
   params: { locale },
 }: {
@@ -10,6 +71,92 @@ export default async function DirectorCorner({
   const text = (await getTranslations(locale)).DirectorMessage;
   return (
     <>
+      {/* For DIRECTOR CARD */}
+      <section
+        className="container"
+        // CHANGE THE BACKGROUND IMAGE HERE
+        style={{
+          backgroundImage: `linear-gradient(rgba(249, 245, 235, 1) 0%, rgba(249, 245, 235, 0.85) 85%, rgba(249, 245, 235, 1) 100%), url('')`,
+        }}
+      >
+        <Heading
+          text={directorCard.title.toUpperCase()}
+          heading="h2"
+          glyphDirection="dual"
+        />
+        {/* DIRECTOR CARD */}
+        <article className="flex h-fit w-full items-center justify-center">
+          <Card
+            imageAlt={directorCard.alt}
+            imageSrc={directorCard.image}
+            name={directorCard.name}
+            designation={`${directorCard.position}, ${directorCard.institute}`}
+            contactDetails={[
+              {
+                label: Array.isArray(directorCard.contact.phone)
+                  ? directorCard.contact.phone.join(' ')
+                  : directorCard.contact.phone,
+                icon: 'Phone No.',
+              },
+              {
+                label: Array.isArray(directorCard.contact.fax)
+                  ? directorCard.contact.fax.join(' ')
+                  : directorCard.contact.fax,
+                icon: 'Fax No.',
+              },
+              {
+                label: Array.isArray(directorCard.contact.mobile)
+                  ? directorCard.contact.mobile.join(' ')
+                  : directorCard.contact.mobile,
+                icon: 'Mobile',
+              },
+              {
+                label: Array.isArray(directorCard.contact.email)
+                  ? directorCard.contact.email.join(' ')
+                  : directorCard.contact.email,
+                icon: 'Email-ID',
+              },
+            ]}
+          />
+        </article>
+      </section>
+      {/* For DIRECTOR OFFICE CARDS */}
+      <section
+        className="container"
+        style={{
+          backgroundImage: `linear-gradient(rgba(249, 245, 235, 1) 0%, rgba(249, 245, 235, 0.85) 85%, rgba(249, 245, 235, 1) 100%)`,
+        }}
+      >
+        <Heading
+          text={directorOffice.title.toUpperCase()}
+          heading="h3"
+          glyphDirection="rtl"
+        />
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+          {directorOffice.cards.map((card, index) => (
+            <Card
+              key={index}
+              imageAlt={card.alt}
+              imageSrc={card.image}
+              name={card.name}
+              designation={card.position}
+              contactDetails={[
+                {
+                  label: Array.isArray(card.phone)
+                    ? card.phone.join(' ')
+                    : card.phone,
+                  icon: 'Phone No.',
+                },
+                {
+                  label: card.email,
+                  icon: 'Email-ID',
+                },
+              ]}
+            />
+          ))}
+        </div>
+      </section>
+      {/* For DIRECTOR's MESSAGE */}
       <section
         className="container"
         style={{
@@ -21,7 +168,7 @@ export default async function DirectorCorner({
           heading="h3"
           glyphDirection="dual"
         />
-        <article className="flex max-md:flex-col">
+        <article className="w-full">
           <p className="text-lg  max-md:rounded-t md:w-full md:rounded-r ">
             {text.message.slice(0, 7).map((message, index) => (
               <span key={index} className="mb-5 block">
@@ -62,3 +209,69 @@ export default async function DirectorCorner({
     </>
   );
 }
+
+interface ContactDetail {
+  label: string;
+  icon?: React.ReactNode | string;
+}
+
+interface CardProps {
+  imageAlt: string;
+  imageSrc: string;
+  name: string;
+  designation: string;
+  isDepartmentHead?: boolean;
+  departmentHeadText?: string;
+  contactDetails: ContactDetail[];
+}
+
+const Card: React.FC<CardProps> = ({
+  imageAlt,
+  imageSrc,
+  name,
+  designation,
+  isDepartmentHead = false,
+  departmentHeadText = '',
+  contactDetails,
+}) => {
+  return (
+    <div className="container flex h-full w-full items-center justify-center">
+      <div className="h-fit w-fit rounded border border-primary-700 bg-neutral-50 hover:drop-shadow-md">
+        <div className="flex h-full items-center justify-center gap-4 p-2 sm:p-3 md:p-4">
+          <Image
+            alt={imageAlt}
+            className={`rounded ${
+              imageAlt === "Director's Image"
+                ? 'size-40 lg:size-44 xl:size-48 2xl:size-52'
+                : 'size-32 lg:size-36 xl:size-40 2xl:size-44'
+            }`}
+            height={0}
+            src={imageSrc}
+            width={0}
+          />
+          <main className="flex w-fit flex-col p-4">
+            <header className="mb-1 sm:mb-2 md:mb-3 lg:mb-4">
+              <h4 className="mb-0">{name}</h4>
+              <p
+                className={`${designation.toLowerCase().includes('director') ? 'font-semibold' : ''}`}
+              >
+                {designation}
+                {isDepartmentHead && ` (${departmentHeadText})`}
+              </p>
+            </header>
+            <ul>
+              {contactDetails.map((detail, index) => (
+                <li key={index} className="flex items-center gap-1">
+                  <span>
+                    <b>{detail.icon}</b>
+                  </span>
+                  :<span>{detail.label}</span>
+                </li>
+              ))}
+            </ul>
+          </main>
+        </div>
+      </div>
+    </div>
+  );
+};

From 9b489c926f49a477dd584b3a98863b5cd8889c25 Mon Sep 17 00:00:00 2001
From: Debatreya <debatreyadas@gmail.com>
Date: Thu, 24 Apr 2025 14:23:32 +0530
Subject: [PATCH 2/5] fix(overlap): Directors image overlap

---
 app/[locale]/director-message/page.tsx | 11 +++++------
 package-lock.json                      | 15 +++++++++++++++
 package.json                           |  1 +
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/app/[locale]/director-message/page.tsx b/app/[locale]/director-message/page.tsx
index edfa2b49..0e695eae 100644
--- a/app/[locale]/director-message/page.tsx
+++ b/app/[locale]/director-message/page.tsx
@@ -132,7 +132,7 @@ export default async function DirectorCorner({
           heading="h3"
           glyphDirection="rtl"
         />
-        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+        <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
           {directorOffice.cards.map((card, index) => (
             <Card
               key={index}
@@ -235,16 +235,15 @@ const Card: React.FC<CardProps> = ({
   contactDetails,
 }) => {
   return (
-    <div className="container flex h-full w-full items-center justify-center">
+    <div className="container flex h-full w-full items-center justify-center max-sm:p-0">
       <div className="h-fit w-fit rounded border border-primary-700 bg-neutral-50 hover:drop-shadow-md">
         <div className="flex h-full items-center justify-center gap-4 p-2 sm:p-3 md:p-4">
           <Image
             alt={imageAlt}
-            className={`rounded ${
-              imageAlt === "Director's Image"
-                ? 'size-40 lg:size-44 xl:size-48 2xl:size-52'
+            className={`rounded ${imageAlt === "Director's Image"
+                ? 'size-32 md:size-40 lg:size-44 xl:size-48 2xl:size-52'
                 : 'size-32 lg:size-36 xl:size-40 2xl:size-44'
-            }`}
+              }`}
             height={0}
             src={imageSrc}
             width={0}
diff --git a/package-lock.json b/package-lock.json
index 193c7795..ad4fdc08 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -41,6 +41,7 @@
         "tailwind-merge": "^2.2.1",
         "typesense": "^1.8.2",
         "usehooks-ts": "^3.0.1",
+        "yarn": "^1.22.22",
         "zod": "^3.23.8"
       },
       "devDependencies": {
@@ -9530,6 +9531,20 @@
         "node": ">= 14"
       }
     },
+    "node_modules/yarn": {
+      "version": "1.22.22",
+      "resolved": "https://registry.npmjs.org/yarn/-/yarn-1.22.22.tgz",
+      "integrity": "sha512-prL3kGtyG7o9Z9Sv8IPfBNrWTDmXB4Qbes8A9rEzt6wkJV8mUvoirjU0Mp3GGAU06Y0XQyA3/2/RQFVuK7MTfg==",
+      "hasInstallScript": true,
+      "license": "BSD-2-Clause",
+      "bin": {
+        "yarn": "bin/yarn.js",
+        "yarnpkg": "bin/yarn.js"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/package.json b/package.json
index 56d7eaa1..eafaf30d 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
     "tailwind-merge": "^2.2.1",
     "typesense": "^1.8.2",
     "usehooks-ts": "^3.0.1",
+    "yarn": "^1.22.22",
     "zod": "^3.23.8"
   },
   "devDependencies": {

From 45eb414846360750997f020aead4cfd866aaaf4b Mon Sep 17 00:00:00 2001
From: Debatreya <debatreyadas@gmail.com>
Date: Wed, 28 May 2025 23:16:14 +0530
Subject: [PATCH 3/5] feat(director): Updated backgroung img

---
 app/[locale]/director-message/page.tsx | 242 +++++++++++++------------
 1 file changed, 124 insertions(+), 118 deletions(-)

diff --git a/app/[locale]/director-message/page.tsx b/app/[locale]/director-message/page.tsx
index 0e695eae..ad16fd76 100644
--- a/app/[locale]/director-message/page.tsx
+++ b/app/[locale]/director-message/page.tsx
@@ -72,140 +72,145 @@ export default async function DirectorCorner({
   return (
     <>
       {/* For DIRECTOR CARD */}
-      <section
-        className="container"
-        // CHANGE THE BACKGROUND IMAGE HERE
+      <div
+        className="w-full bg-cover bg-center"
         style={{
-          backgroundImage: `linear-gradient(rgba(249, 245, 235, 1) 0%, rgba(249, 245, 235, 0.85) 85%, rgba(249, 245, 235, 1) 100%), url('')`,
+          backgroundImage: `url('${getS3Url()}/assets/director-bg.jpeg')`, // Use a dedicated director section bg
         }}
       >
-        <Heading
-          text={directorCard.title.toUpperCase()}
-          heading="h2"
-          glyphDirection="dual"
-        />
-        {/* DIRECTOR CARD */}
-        <article className="flex h-fit w-full items-center justify-center">
-          <Card
-            imageAlt={directorCard.alt}
-            imageSrc={directorCard.image}
-            name={directorCard.name}
-            designation={`${directorCard.position}, ${directorCard.institute}`}
-            contactDetails={[
-              {
-                label: Array.isArray(directorCard.contact.phone)
-                  ? directorCard.contact.phone.join(' ')
-                  : directorCard.contact.phone,
-                icon: 'Phone No.',
-              },
-              {
-                label: Array.isArray(directorCard.contact.fax)
-                  ? directorCard.contact.fax.join(' ')
-                  : directorCard.contact.fax,
-                icon: 'Fax No.',
-              },
-              {
-                label: Array.isArray(directorCard.contact.mobile)
-                  ? directorCard.contact.mobile.join(' ')
-                  : directorCard.contact.mobile,
-                icon: 'Mobile',
-              },
-              {
-                label: Array.isArray(directorCard.contact.email)
-                  ? directorCard.contact.email.join(' ')
-                  : directorCard.contact.email,
-                icon: 'Email-ID',
-              },
-            ]}
+        <section className="container mx-auto">
+          <Heading
+            text={directorCard.title.toUpperCase()}
+            heading="h2"
+            glyphDirection="dual"
           />
-        </article>
-      </section>
-      {/* For DIRECTOR OFFICE CARDS */}
-      <section
-        className="container"
-        style={{
-          backgroundImage: `linear-gradient(rgba(249, 245, 235, 1) 0%, rgba(249, 245, 235, 0.85) 85%, rgba(249, 245, 235, 1) 100%)`,
-        }}
-      >
-        <Heading
-          text={directorOffice.title.toUpperCase()}
-          heading="h3"
-          glyphDirection="rtl"
-        />
-        <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
-          {directorOffice.cards.map((card, index) => (
+          {/* DIRECTOR CARD */}
+          <article className="flex h-fit w-full items-center justify-center">
             <Card
-              key={index}
-              imageAlt={card.alt}
-              imageSrc={card.image}
-              name={card.name}
-              designation={card.position}
+              imageAlt={directorCard.alt}
+              imageSrc={directorCard.image}
+              name={directorCard.name}
+              designation={`${directorCard.position}, ${directorCard.institute}`}
               contactDetails={[
                 {
-                  label: Array.isArray(card.phone)
-                    ? card.phone.join(' ')
-                    : card.phone,
+                  label: Array.isArray(directorCard.contact.phone)
+                    ? directorCard.contact.phone.join(' ')
+                    : directorCard.contact.phone,
                   icon: 'Phone No.',
                 },
                 {
-                  label: card.email,
+                  label: Array.isArray(directorCard.contact.fax)
+                    ? directorCard.contact.fax.join(' ')
+                    : directorCard.contact.fax,
+                  icon: 'Fax No.',
+                },
+                {
+                  label: Array.isArray(directorCard.contact.mobile)
+                    ? directorCard.contact.mobile.join(' ')
+                    : directorCard.contact.mobile,
+                  icon: 'Mobile',
+                },
+                {
+                  label: Array.isArray(directorCard.contact.email)
+                    ? directorCard.contact.email.join(' ')
+                    : directorCard.contact.email,
                   icon: 'Email-ID',
                 },
               ]}
             />
-          ))}
-        </div>
-      </section>
-      {/* For DIRECTOR's MESSAGE */}
-      <section
-        className="container"
+          </article>
+        </section>
+      </div>
+      {/* For DIRECTOR OFFICE CARDS */}
+      <div
+        className="w-full bg-cover bg-center"
         style={{
-          backgroundImage: `linear-gradient(rgba(249, 245, 235, 1) 0%, rgba(249, 245, 235, 0.85) 85%, rgba(249, 245, 235, 1) 100%), url('${getS3Url()}/assets/temple-1.jpeg')`,
+          backgroundImage: `url('${getS3Url()}/assets/office-bg.jpeg')`, // Use a dedicated office section bg
         }}
       >
-        <Heading
-          text={text.title.toUpperCase()}
-          heading="h3"
-          glyphDirection="dual"
-        />
-        <article className="w-full">
-          <p className="text-lg  max-md:rounded-t md:w-full md:rounded-r ">
-            {text.message.slice(0, 7).map((message, index) => (
-              <span key={index} className="mb-5 block">
-                {message}
-              </span>
-            ))}
-          </p>
-        </article>
-        <article className="mx-auto flex items-center justify-center max-md:flex-col">
-          <p className="w-fit max-w-4xl text-center text-lg max-md:rounded-t md:rounded-r">
-            {text.message.slice(7, 9).map((message, index) => (
-              <span key={index} className="mb-5 block">
-                {message}
-              </span>
-            ))}
-          </p>
-        </article>
-        <article className="flex max-md:flex-col">
-          <p className="text-lg  max-md:rounded-t md:w-full md:rounded-r ">
-            {text.message.slice(9, 11).map((message, index) => (
-              <span key={index} className="mb-3 block">
-                {message}
-              </span>
+        <section className="container mx-auto py-8">
+          <Heading
+            text={directorOffice.title.toUpperCase()}
+            heading="h3"
+            glyphDirection="rtl"
+          />
+          <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
+            {directorOffice.cards.map((card, index) => (
+              <Card
+                key={index}
+                imageAlt={card.alt}
+                imageSrc={card.image}
+                name={card.name}
+                designation={card.position}
+                contactDetails={[
+                  {
+                    label: Array.isArray(card.phone)
+                      ? card.phone.join(' ')
+                      : card.phone,
+                    icon: 'Phone No.',
+                  },
+                  {
+                    label: card.email,
+                    icon: 'Email-ID',
+                  },
+                ]}
+              />
             ))}
-          </p>
-        </article>
-        <article className="mx-auto flex items-center justify-center max-md:flex-col">
-          <p className="w-fit max-w-4xl text-justify text-lg max-md:rounded-t md:rounded-r">
-            <span className="bold mb-5 block">{text.message[11]}</span>
-          </p>
-        </article>
-        <article className="flex-end flex justify-end">
-          <p className="w-fit max-w-4xl text-justify text-lg font-bold max-md:rounded-t md:rounded-r">
-            <span className="bold mb-5 block">{text.message[12]}</span>
-          </p>
-        </article>
-      </section>
+          </div>
+        </section>
+      </div>
+      {/* For DIRECTOR's MESSAGE */}
+      <div
+        className="w-full bg-cover bg-center"
+        style={{
+          backgroundImage: `linear-gradient(rgba(249, 245, 235, 0.95) 0%, rgba(249, 245, 235, 0.85) 85%, rgba(249, 245, 235, 0.95) 100%), url('${getS3Url()}/assets/temple-1.jpeg')`,
+        }}
+      >
+        <section className="container mx-auto">
+          <Heading
+            text={text.title.toUpperCase()}
+            heading="h3"
+            glyphDirection="dual"
+          />
+          <article className="w-full">
+            <p className="text-lg max-md:rounded-t md:w-full md:rounded-r ">
+              {text.message.slice(0, 7).map((message, index) => (
+                <span key={index} className="mb-5 block">
+                  {message}
+                </span>
+              ))}
+            </p>
+          </article>
+          <article className="mx-auto flex items-center justify-center max-md:flex-col">
+            <p className="w-fit max-w-4xl text-center text-lg max-md:rounded-t md:rounded-r">
+              {text.message.slice(7, 9).map((message, index) => (
+                <span key={index} className="mb-5 block">
+                  {message}
+                </span>
+              ))}
+            </p>
+          </article>
+          <article className="flex max-md:flex-col">
+            <p className="text-lg max-md:rounded-t md:w-full md:rounded-r ">
+              {text.message.slice(9, 11).map((message, index) => (
+                <span key={index} className="mb-3 block">
+                  {message}
+                </span>
+              ))}
+            </p>
+          </article>
+          <article className="mx-auto flex items-center justify-center max-md:flex-col">
+            <p className="w-fit max-w-4xl text-justify text-lg max-md:rounded-t md:rounded-r">
+              <span className="bold mb-5 block">{text.message[11]}</span>
+            </p>
+          </article>
+          <article className="flex-end flex justify-end">
+            <p className="w-fit max-w-4xl text-justify text-lg font-bold max-md:rounded-t md:rounded-r">
+              <span className="bold mb-5 block">{text.message[12]}</span>
+            </p>
+          </article>
+        </section>
+      </div>
     </>
   );
 }
@@ -240,10 +245,11 @@ const Card: React.FC<CardProps> = ({
         <div className="flex h-full items-center justify-center gap-4 p-2 sm:p-3 md:p-4">
           <Image
             alt={imageAlt}
-            className={`rounded ${imageAlt === "Director's Image"
+            className={`rounded ${
+              imageAlt === "Director's Image"
                 ? 'size-32 md:size-40 lg:size-44 xl:size-48 2xl:size-52'
                 : 'size-32 lg:size-36 xl:size-40 2xl:size-44'
-              }`}
+            }`}
             height={0}
             src={imageSrc}
             width={0}

From 4f33b0fa3b9a7b412adfe4d0f69104acb5c0254e Mon Sep 17 00:00:00 2001
From: Debatreya <debatreyadas@gmail.com>
Date: Thu, 29 May 2025 00:21:16 +0530
Subject: [PATCH 4/5] fix(package): Removed yarn 'npm uninstall yarn'

---
 package-lock.json | 15 ---------------
 package.json      |  1 -
 2 files changed, 16 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ad4fdc08..193c7795 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -41,7 +41,6 @@
         "tailwind-merge": "^2.2.1",
         "typesense": "^1.8.2",
         "usehooks-ts": "^3.0.1",
-        "yarn": "^1.22.22",
         "zod": "^3.23.8"
       },
       "devDependencies": {
@@ -9531,20 +9530,6 @@
         "node": ">= 14"
       }
     },
-    "node_modules/yarn": {
-      "version": "1.22.22",
-      "resolved": "https://registry.npmjs.org/yarn/-/yarn-1.22.22.tgz",
-      "integrity": "sha512-prL3kGtyG7o9Z9Sv8IPfBNrWTDmXB4Qbes8A9rEzt6wkJV8mUvoirjU0Mp3GGAU06Y0XQyA3/2/RQFVuK7MTfg==",
-      "hasInstallScript": true,
-      "license": "BSD-2-Clause",
-      "bin": {
-        "yarn": "bin/yarn.js",
-        "yarnpkg": "bin/yarn.js"
-      },
-      "engines": {
-        "node": ">=4.0.0"
-      }
-    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/package.json b/package.json
index eafaf30d..56d7eaa1 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,6 @@
     "tailwind-merge": "^2.2.1",
     "typesense": "^1.8.2",
     "usehooks-ts": "^3.0.1",
-    "yarn": "^1.22.22",
     "zod": "^3.23.8"
   },
   "devDependencies": {

From 13dc168c6a7cc9558e0929b2a95563284fb7dc06 Mon Sep 17 00:00:00 2001
From: Debatreya <debatreyadas@gmail.com>
Date: Sat, 31 May 2025 02:11:50 +0530
Subject: [PATCH 5/5] feat(director): Tried to resolve the requested reviews

---
 app/[locale]/director-message/page.tsx | 116 +++++++++----------------
 1 file changed, 41 insertions(+), 75 deletions(-)

diff --git a/app/[locale]/director-message/page.tsx b/app/[locale]/director-message/page.tsx
index ad16fd76..054c15b3 100644
--- a/app/[locale]/director-message/page.tsx
+++ b/app/[locale]/director-message/page.tsx
@@ -1,13 +1,9 @@
 import Image from 'next/image';
-import { FaPhone } from 'react-icons/fa6';
-import { MdEmail } from 'react-icons/md';
 
 import Heading from '~/components/heading';
 import { getTranslations } from '~/i18n/translations';
 import { getS3Url } from '~/server/s3';
 
-// CONSTANTS FOR DIRECTOR MESSAGE PAGE
-// DIRECTOR's CARDS
 const directorCard = {
   image: `${getS3Url()}/assets/director.jpeg`,
   alt: "Director's Image",
@@ -23,7 +19,7 @@ const directorCard = {
   },
 };
 
-// DIRECTOR's OFFICE
+// Placeholder data for office cards. Replace with real data as needed.
 const directorOfficeCards = [
   {
     image: `${getS3Url()}/assets/office.jpeg`,
@@ -75,7 +71,7 @@ export default async function DirectorCorner({
       <div
         className="w-full bg-cover bg-center"
         style={{
-          backgroundImage: `url('${getS3Url()}/assets/director-bg.jpeg')`, // Use a dedicated director section bg
+          backgroundImage: `url('${getS3Url()}/assets/director-bg.jpeg')`,
         }}
       >
         <section className="container mx-auto">
@@ -84,7 +80,6 @@ export default async function DirectorCorner({
             heading="h2"
             glyphDirection="dual"
           />
-          {/* DIRECTOR CARD */}
           <article className="flex h-fit w-full items-center justify-center">
             <Card
               imageAlt={directorCard.alt}
@@ -93,27 +88,19 @@ export default async function DirectorCorner({
               designation={`${directorCard.position}, ${directorCard.institute}`}
               contactDetails={[
                 {
-                  label: Array.isArray(directorCard.contact.phone)
-                    ? directorCard.contact.phone.join(' ')
-                    : directorCard.contact.phone,
+                  label: directorCard.contact.phone.join(' '),
                   icon: 'Phone No.',
                 },
                 {
-                  label: Array.isArray(directorCard.contact.fax)
-                    ? directorCard.contact.fax.join(' ')
-                    : directorCard.contact.fax,
+                  label: directorCard.contact.fax,
                   icon: 'Fax No.',
                 },
                 {
-                  label: Array.isArray(directorCard.contact.mobile)
-                    ? directorCard.contact.mobile.join(' ')
-                    : directorCard.contact.mobile,
+                  label: directorCard.contact.mobile,
                   icon: 'Mobile',
                 },
                 {
-                  label: Array.isArray(directorCard.contact.email)
-                    ? directorCard.contact.email.join(' ')
-                    : directorCard.contact.email,
+                  label: directorCard.contact.email,
                   icon: 'Email-ID',
                 },
               ]}
@@ -125,7 +112,7 @@ export default async function DirectorCorner({
       <div
         className="w-full bg-cover bg-center"
         style={{
-          backgroundImage: `url('${getS3Url()}/assets/office-bg.jpeg')`, // Use a dedicated office section bg
+          backgroundImage: `url('${getS3Url()}/assets/office-bg.jpeg')`,
         }}
       >
         <section className="container mx-auto py-8">
@@ -144,9 +131,7 @@ export default async function DirectorCorner({
                 designation={card.position}
                 contactDetails={[
                   {
-                    label: Array.isArray(card.phone)
-                      ? card.phone.join(' ')
-                      : card.phone,
+                    label: card.phone.join(' '),
                     icon: 'Phone No.',
                   },
                   {
@@ -173,41 +158,24 @@ export default async function DirectorCorner({
             glyphDirection="dual"
           />
           <article className="w-full">
-            <p className="text-lg max-md:rounded-t md:w-full md:rounded-r ">
-              {text.message.slice(0, 7).map((message, index) => (
-                <span key={index} className="mb-5 block">
-                  {message}
+            <div className="flex flex-col gap-5 text-lg max-md:rounded-t md:w-full md:rounded-r">
+              {(text.message as unknown as string[]).map((message, index) => (
+                <span
+                  key={index}
+                  className={
+                    index === 11
+                      ? 'bold mb-5 block'
+                      : index === 12
+                        ? 'bold mb-5 block text-right font-bold'
+                        : index >= 9 && index <= 10
+                          ? 'mb-3 block'
+                          : 'mb-5 block'
+                  }
+                >
+                  {message.toString()}
                 </span>
               ))}
-            </p>
-          </article>
-          <article className="mx-auto flex items-center justify-center max-md:flex-col">
-            <p className="w-fit max-w-4xl text-center text-lg max-md:rounded-t md:rounded-r">
-              {text.message.slice(7, 9).map((message, index) => (
-                <span key={index} className="mb-5 block">
-                  {message}
-                </span>
-              ))}
-            </p>
-          </article>
-          <article className="flex max-md:flex-col">
-            <p className="text-lg max-md:rounded-t md:w-full md:rounded-r ">
-              {text.message.slice(9, 11).map((message, index) => (
-                <span key={index} className="mb-3 block">
-                  {message}
-                </span>
-              ))}
-            </p>
-          </article>
-          <article className="mx-auto flex items-center justify-center max-md:flex-col">
-            <p className="w-fit max-w-4xl text-justify text-lg max-md:rounded-t md:rounded-r">
-              <span className="bold mb-5 block">{text.message[11]}</span>
-            </p>
-          </article>
-          <article className="flex-end flex justify-end">
-            <p className="w-fit max-w-4xl text-justify text-lg font-bold max-md:rounded-t md:rounded-r">
-              <span className="bold mb-5 block">{text.message[12]}</span>
-            </p>
+            </div>
           </article>
         </section>
       </div>
@@ -215,22 +183,7 @@ export default async function DirectorCorner({
   );
 }
 
-interface ContactDetail {
-  label: string;
-  icon?: React.ReactNode | string;
-}
-
-interface CardProps {
-  imageAlt: string;
-  imageSrc: string;
-  name: string;
-  designation: string;
-  isDepartmentHead?: boolean;
-  departmentHeadText?: string;
-  contactDetails: ContactDetail[];
-}
-
-const Card: React.FC<CardProps> = ({
+const Card = ({
   imageAlt,
   imageSrc,
   name,
@@ -238,6 +191,14 @@ const Card: React.FC<CardProps> = ({
   isDepartmentHead = false,
   departmentHeadText = '',
   contactDetails,
+}: {
+  imageAlt: string;
+  imageSrc: string;
+  name: string;
+  designation: string;
+  isDepartmentHead?: boolean;
+  departmentHeadText?: string;
+  contactDetails: { label: string; icon?: React.ReactNode | string }[];
 }) => {
   return (
     <div className="container flex h-full w-full items-center justify-center max-sm:p-0">
@@ -250,15 +211,20 @@ const Card: React.FC<CardProps> = ({
                 ? 'size-32 md:size-40 lg:size-44 xl:size-48 2xl:size-52'
                 : 'size-32 lg:size-36 xl:size-40 2xl:size-44'
             }`}
-            height={0}
             src={imageSrc}
-            width={0}
+            width={160}
+            height={160}
+            // You can adjust width/height as needed for your design
           />
           <main className="flex w-fit flex-col p-4">
             <header className="mb-1 sm:mb-2 md:mb-3 lg:mb-4">
               <h4 className="mb-0">{name}</h4>
               <p
-                className={`${designation.toLowerCase().includes('director') ? 'font-semibold' : ''}`}
+                className={
+                  designation.toLowerCase().includes('director')
+                    ? 'font-semibold'
+                    : ''
+                }
               >
                 {designation}
                 {isDepartmentHead && ` (${departmentHeadText})`}