OBC & PWD Cell Page

app/[locale]/header.tsx

@@ -63,29 +63,11 @@ export default async function Header({ locale }: { locale: string }) {
         },
         // For now IKS and IIC are added as temp units, will change this once a "CELL" design is ready
         {
-          title: 'IKS Cell',
-          href: '/institute/cells/iks',
+          title: 'Institute Cells',
+          href: '/institute#cells',
           description:
             'Explore the minds that work hard to maintain our institute’s high reputation and proper functioning!',
         },
-        {
-          title: 'IIC Cell',
-          href: '/institute/cells/iic',
-          description:
-            'Explore the minds that work hard to maintain our institute’s high reputation and proper functioning!',
-        },
-        {
-          title: 'IPR Cell',
-          href: '/institute/cells/ipr',
-          description:
-            'The Intellectual Property Rights Cell promotes awareness and assists in protecting innovations, ideas, and creative works.',
-        },
-        {
-          title: 'SC & ST Cell',
-          href: '/institute/cells/scst',
-          description:
-            'The SC & ST Cell is dedicated to promoting the welfare and interests of students from Scheduled Castes and Scheduled Tribes, ensuring equal opportunities and support.',
-        }
       ],
     },
     {

app/[locale]/institute/cells/obcpwd/page.tsx

@@ -0,0 +1,150 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import { MdEmail, MdOutlineLocalPhone } from 'react-icons/md';
+
+import { cn } from '~/lib/utils';
+import { Button } from '~/components/buttons';
+import Heading from '~/components/heading';
+import { getTranslations } from '~/i18n/translations';
+import { getS3Url } from '~/server/s3';
+
+export default async function OBCPWD({
+  params: { locale },
+}: {
+  params: { locale: string };
+}) {
+  const text = await getTranslations(locale);
+
+  const facultyIncharge = [
+    {...text.Institute.cells.obcpwd.liaisonOfficer},
+  ];
+  const cellFunctions = text.Institute.cells.obcpwd.cellFunctions;
+
+  return (
+    <>
+      {/* Header */}
+      <article
+        className="sm:h-76 md:h-84 lg:h-94 relative flex h-56 w-full bg-cover bg-center xl:h-[448px] 2xl:h-[540px]"
+        style={{
+          backgroundImage: `linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.3)), url('${getS3Url()}/training-and-placement/header.jpg')`,
+        }}
+      >
+        <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-center w-[90%] max-w-5xl">
+          <h1 className="mx-2 my-auto text-3xl text-[#FFFFFF]  lg:text-3xl xl:text-4xl font-serif font-normal ">
+            {text.Institute.cells.obcpwd.title}
+          </h1>
+        </div>
+      </article>
+
+      <main className="container mt-12">
+        {/* description */}
+        <article className="space-y-6 rounded-lg p-6 drop-shadow font-sans font-normal text-lg">
+          {text.Institute.cells.obcpwd.description.map((paragraph, index) => (
+            <p key={index} className="text-justify leading-relaxed">
+              {paragraph}
+            </p>
+          ))}
+        </article>
+        {/*cell functions*/}
+        <div>
+          <Heading
+            glyphDirection="rtl"
+            heading="h2"
+            text={text.Institute.cells.obcpwd.cellFunctionsHeading}
+            className="mt-12"
+          />
+          <section>
+            <ul className="mt-8 space-y-4 bg-[#FFFFFF] p-4 rounded-lg border border-primary-500 drop-shadow font-sans font-normal text-lg">
+            {cellFunctions.map((functionItem, index) => (
+              <li key={index} className="text-justify leading-tight flex">
+                <span className="mr-1.5">•</span>
+                <span>{functionItem}</span>
+              </li>
+            ))}
+            </ul>
+          </section>
+          <section className="mt-8 bg-[#FFFFFF] p-4 rounded-lg border border-primary-500 drop-shadow font-sans font-normal text-lg">
+            {text.Institute.cells.obcpwd.complaint}
+          </section> 
+        </div>
+        {/*  LIAISON OFFICER */}
+        <div>
+          <Heading
+            glyphDirection="ltr"
+            heading="h2"
+            text={text.Institute.cells.obcpwd.liaisonOfficerHeading}
+            className="mt-12"
+          />
+          <ul className="flex w-full flex-col items-center">
+            {facultyIncharge.map((faculty, idx) => (
+              <li
+                key={idx}
+                className="flex w-[90%] max-w-3xl  rounded-lg border border-primary-500 bg-neutral-50 p-1 "
+              >
+                {/* Image - smaller on mobile */}
+                <div className="flex-shrink-0 flex items-center justify-center">
+                  <Image
+                    src={faculty.image}
+                    alt={faculty.name}
+                    width={300}
+                    height={340}
+                    className="h-full w-24 xs:h-24 xs:w-24 sm:h-36 sm:w-36 md:h-52 md:w-52 rounded-md object-cover" 
+                  />
+                </div>
+
+                {/* Content section - adjusted for mobile row layout */}
+                <section className="ml-2 xs:ml-3 sm:ml-6 md:ml-8 flex flex-col justify-center">
+                  {/* Name in red - reduced margin bottom */}
+                  <h2 className="text-lg xs:text-xl sm:text-2xl md:text-3xl font-medium text-red-600 mb-0">
+                    {faculty.name}
+                  </h2>
+
+                  {/* Title and position - reduced spacing */}
+                  <div className="mb-0.5 xs:mb-1 sm:mb-2"> {/* Reduced margin from mb-1/mb-2/mb-4 */}
+                    <p className="text-sm xs:text-base sm:text-xl md:text-xl font-normal text-gray-700 leading-tight"> {/* Added leading-tight */}
+                      {faculty.title}
+                    </p>
+                    {!faculty.title.includes("Head") && (
+                      <p className="text-sm xs:text-base sm:text-xl md:text-2xl font-normal text-gray-700 leading-tight mt-0"> {/* Added leading-tight and mt-0 */}
+                        (Head of the Department)
+                      </p>
+                    )}
+                  </div>
+
+                  {/* Contact info */}
+                  <div className="space-y-0.5 xs:space-y-1 sm:space-y-2">
+                    {/* Email with icon */}
+                    <span className="flex items-center">
+                      <span className="inline-flex h-5 w-5 xs:h-6 xs:w-6 sm:h-7 sm:w-7 items-center justify-center text-red-600">
+                        <MdEmail className="text-primary-700 text-base xs:text-lg sm:text-xl" />
+                      </span>
+                      <a 
+                        href={`mailto:${faculty.email}`}
+                        className="hover:text-primary-700 hover:underline break-all ml-1 xs:ml-1.5 sm:ml-2 text-xs xs:text-sm sm:text-base md:text-lg text-gray-700 "
+                      >
+                        {faculty.email}
+                      </a>
+                    </span>
+
+                    {/* Phone with icon */}
+                    <span className="flex items-center">
+                      <span className="inline-flex h-5 w-5 xs:h-6 xs:w-6 sm:h-7 sm:w-7 items-center justify-center text-red-600">
+                        <MdOutlineLocalPhone className="text-primary-700 text-base xs:text-lg sm:text-xl" />
+                      </span>
+                      <span className="ml-1 xs:ml-1.5 sm:ml-2 text-xs xs:text-sm sm:text-base md:text-lg text-gray-700">
+                        {faculty.phone}
+                      </span>
+                    </span>
+                  </div>
+                </section>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        {/*  TODO: MAKE IT EXACTLY LIKE THE DESIGN , ADD RELEVENT BACKGROUND */}
+
+      </main>
+    </>
+  );
+}

app/[locale]/institute/page.tsx

@@ -318,6 +318,18 @@ export default async function Institute({
               icon: MdPhotoLibrary,
               annotation: '(IIC)',
             },
+            {
+              label: text.cells.scst.title,
+              href: `/${locale}/institute/cells/scst`,
+              icon: MdPhotoLibrary,
+              annotation: '(SC & ST)',
+            },
+            {
+              label: text.cells.obcpwd.title,
+              href: `/${locale}/institute/cells/obcpwd`,
+              icon: MdPhotoLibrary,
+              annotation: '(OBC & PWD)',
+            },
           ].map(({ label, href, icon: Icon, annotation }, index) => (
             <Button
               asChild

i18n/en.ts

@@ -677,13 +677,35 @@ const text: Translations = {
             link: 'https://www.aicte.gov.in/bureaus/administration/scst-cell'
           }
         ],
+      },
+      obcpwd: {
+        title: 'OBC & PWD Cell',
+        description: [
+          'NIT Kurukshetra is committed to maintaining a work environment where students, faculty, and staff members from different communities can work together harmoniously. It is the institute\'s endeavor to ensure that no discrimination takes place in the workplace. The Institute has appointed a Liaison Officer for the OBC Cell, who can be contacted in the event of any caste-based discrimination.'
+        ],
+        cellFunctionsHeading: 'CELL FUNCTIONS',
+        cellFunctions: [
+          'To ensure proper implementation of various schemes of MHRD, GoI, and the State Government concerning scholarships, stipends, etc., for the welfare of reserved categories.',
+          'Grievance Redressal: for any grievance(s) regarding academic, administrative, or social issues. The cell takes necessary action and provides advice/help to resolve the matter.',
+          'To take follow-up measures to achieve the objectives and targets laid down by MHRD, Government of India.'
+        ],
+        complaint:
+          'In case you want to register a formal complaint, please fill out the form in the complaint book, available in the OBC Cell, Administrative Building, NIT Kurukshetra. The committee will review discrimination complaints received from OBC students, faculty, and staff members and resolve them accordingly.',
+        liaisonOfficerHeading: 'LIAISON OFFICER',
+        liaisonOfficer: {
+          image: 'fallback/user-image.jpg',
+          name: 'Arun Goel',
+          title: 'Professor & Head of Department',
+          email: 'drarun_goel@yahoo.co.in',
+          phone: '01744-233349, 01744-233300'
+        }
       }
     },
   },
   NotFound: {
     title: '404',
     description: 'Not found ',
-    backHome: 'Looks like you’re lost let’s get you back home',
+    backHome: 'Looks like you\'re lost let\'s get you back home',
   },
   Profile: {
     tabs: {

i18n/hi.ts

@@ -626,6 +626,30 @@ const text: Translations = {
             link: 'https://www.aicte.gov.in/bureaus/administration/scst-cell'
           }
         ],
+      },
+      obcpwd: {
+        title: 'अन्य पिछड़ा वर्ग एवं दिव्यांगजन प्रकोष्ठ',
+        description:
+          [
+          'एनआईटी कुरुक्षेत्र इस बात के लिए प्रतिबद्ध है कि एक ऐसा कार्य वातावरण स्थापित किया जाए, जहाँ विभिन्न समुदायों से आने वाले छात्र, संकाय सदस्य एवं स्टाफ सद्भावपूर्ण ढंग से कार्य कर सकें। संस्थान का यह पूर्ण प्रयास है कि कार्यस्थल पर किसी भी प्रकार का भेदभाव न हो। जाति-आधारित भेदभाव की किसी भी घटना के संदर्भ में, ओबीसी सेल के लिए नियुक्त लायज़न अधिकारी से संपर्क किया जा सकता है।'
+          ],
+        cellFunctionsHeading:'प्रकोष्ठ के कार्य',
+        cellFunctions:
+          [
+          'आरक्षित वर्गों के कल्याण हेतु छात्रवृत्ति, वजीफे आदि से संबंधित भारत सरकार के एमएचआरडी तथा राज्य सरकार की विभिन्न योजनाओं के उचित क्रियान्वयन को सुनिश्चित करना।',
+          'शिकायत निवारण: शैक्षणिक, प्रशासनिक या सामाजिक समस्याओं से संबंधित किसी भी शिकायत के लिए। प्रकोष्ठ आवश्यक कार्यवाही करता है तथा समस्या के समाधान हेतु मार्गदर्शन/सहायता प्रदान करता है।',
+          'भारत सरकार के एमएचआरडी द्वारा निर्धारित उद्देश्यों और लक्ष्यों की प्राप्ति के लिए आवश्यक अनुवर्ती कार्यवाहियों को अपनाना।'
+          ],     
+
+        complaint: 'यदि आप किसी प्रकार की औपचारिक शिकायत दर्ज करना चाहते हैं, तो कृपया शिकायत पुस्तिका में उपलब्ध फॉर्म को भरें, जो एनआईटी कुरुक्षेत्र के प्रशासनिक भवन स्थित ओबीसी प्रकोष्ठ में उपलब्ध है। समिति को प्राप्त ओबीसी छात्र, संकाय सदस्य एवं स्टाफ से संबंधित भेदभाव की शिकायतों की जांच की जाएगी तथा ऐसी शिकायतों का समाधान किया जाएगा।',
+        liaisonOfficerHeading: 'संपर्क अधिकारी',
+        liaisonOfficer : {
+          image: 'fallback/user-image.jpg',
+          name: 'Arun Goel',
+          title: 'प्रोफेसर (विभागाध्यक्ष)',
+          email: 'drarun_goel@yahoo.co.in',
+          phone: '01744-233349, 01744-233300'
+        }
       }
     },
   },

i18n/translations.ts

@@ -360,6 +360,21 @@ export interface Translations {
         importantLinksHeading: string;
         importantLinks: { title: string; link: string }[];
       };
+      obcpwd: {
+        title: string;
+        description: string[];
+        cellFunctionsHeading: string;
+        cellFunctions: string[];
+        complaint: string;
+        liaisonOfficerHeading: string;
+        liaisonOfficer: {
+          image: string;
+          name: string;
+          title: string;
+          email: string;
+          phone: string;
+        };
+      };
     };
   };
   Hostels: {