|
| 1 | +import Image from 'next/image'; |
| 2 | +import Link from 'next/link'; |
| 3 | +import { MdEmail, MdOutlineLocalPhone } from 'react-icons/md'; |
| 4 | + |
| 5 | +import { cn } from '~/lib/utils'; |
| 6 | +import { Button } from '~/components/buttons'; |
| 7 | +import Heading from '~/components/heading'; |
| 8 | +import { getTranslations } from '~/i18n/translations'; |
| 9 | +import { getS3Url } from '~/server/s3'; |
| 10 | + |
| 11 | +export default async function OBCPWD({ |
| 12 | + params: { locale }, |
| 13 | +}: { |
| 14 | + params: { locale: string }; |
| 15 | +}) { |
| 16 | + const text = await getTranslations(locale); |
| 17 | + |
| 18 | + const facultyIncharge = [ |
| 19 | + {...text.Institute.cells.obcpwd.liaisonOfficer}, |
| 20 | + ]; |
| 21 | + const cellFunctions = text.Institute.cells.obcpwd.cellFunctions; |
| 22 | + |
| 23 | + return ( |
| 24 | + <> |
| 25 | + {/* Header */} |
| 26 | + <article |
| 27 | + 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]" |
| 28 | + style={{ |
| 29 | + backgroundImage: `linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.3)), url('${getS3Url()}/training-and-placement/header.jpg')`, |
| 30 | + }} |
| 31 | + > |
| 32 | + <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-center w-[90%] max-w-5xl"> |
| 33 | + <h1 className="mx-2 my-auto text-3xl text-[#FFFFFF] lg:text-3xl xl:text-4xl font-serif font-normal "> |
| 34 | + {text.Institute.cells.obcpwd.title} |
| 35 | + </h1> |
| 36 | + </div> |
| 37 | + </article> |
| 38 | + |
| 39 | + <main className="container mt-12"> |
| 40 | + {/* description */} |
| 41 | + <article className="space-y-6 rounded-lg p-6 drop-shadow font-sans font-normal text-lg"> |
| 42 | + {text.Institute.cells.obcpwd.description.map((paragraph, index) => ( |
| 43 | + <p key={index} className="text-justify leading-relaxed"> |
| 44 | + {paragraph} |
| 45 | + </p> |
| 46 | + ))} |
| 47 | + </article> |
| 48 | + {/*cell functions*/} |
| 49 | + <div> |
| 50 | + <Heading |
| 51 | + glyphDirection="rtl" |
| 52 | + heading="h2" |
| 53 | + text={text.Institute.cells.obcpwd.cellFunctionsHeading} |
| 54 | + className="mt-12" |
| 55 | + /> |
| 56 | + <section> |
| 57 | + <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"> |
| 58 | + {cellFunctions.map((functionItem, index) => ( |
| 59 | + <li key={index} className="text-justify leading-tight flex"> |
| 60 | + <span className="mr-1.5">•</span> |
| 61 | + <span>{functionItem}</span> |
| 62 | + </li> |
| 63 | + ))} |
| 64 | + </ul> |
| 65 | + </section> |
| 66 | + <section className="mt-8 bg-[#FFFFFF] p-4 rounded-lg border border-primary-500 drop-shadow font-sans font-normal text-lg"> |
| 67 | + {text.Institute.cells.obcpwd.complaint} |
| 68 | + </section> |
| 69 | + </div> |
| 70 | + {/* LIAISON OFFICER */} |
| 71 | + <div> |
| 72 | + <Heading |
| 73 | + glyphDirection="ltr" |
| 74 | + heading="h2" |
| 75 | + text={text.Institute.cells.obcpwd.liaisonOfficerHeading} |
| 76 | + className="mt-12" |
| 77 | + /> |
| 78 | + <ul className="flex w-full flex-col items-center"> |
| 79 | + {facultyIncharge.map((faculty, idx) => ( |
| 80 | + <li |
| 81 | + key={idx} |
| 82 | + className="flex w-[90%] max-w-3xl rounded-lg border border-primary-500 bg-neutral-50 p-1 " |
| 83 | + > |
| 84 | + {/* Image - smaller on mobile */} |
| 85 | + <div className="flex-shrink-0 flex items-center justify-center"> |
| 86 | + <Image |
| 87 | + src={faculty.image} |
| 88 | + alt={faculty.name} |
| 89 | + width={300} |
| 90 | + height={340} |
| 91 | + 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" |
| 92 | + /> |
| 93 | + </div> |
| 94 | + |
| 95 | + {/* Content section - adjusted for mobile row layout */} |
| 96 | + <section className="ml-2 xs:ml-3 sm:ml-6 md:ml-8 flex flex-col justify-center"> |
| 97 | + {/* Name in red - reduced margin bottom */} |
| 98 | + <h2 className="text-lg xs:text-xl sm:text-2xl md:text-3xl font-medium text-red-600 mb-0"> |
| 99 | + {faculty.name} |
| 100 | + </h2> |
| 101 | + |
| 102 | + {/* Title and position - reduced spacing */} |
| 103 | + <div className="mb-0.5 xs:mb-1 sm:mb-2"> {/* Reduced margin from mb-1/mb-2/mb-4 */} |
| 104 | + <p className="text-sm xs:text-base sm:text-xl md:text-xl font-normal text-gray-700 leading-tight"> {/* Added leading-tight */} |
| 105 | + {faculty.title} |
| 106 | + </p> |
| 107 | + {!faculty.title.includes("Head") && ( |
| 108 | + <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 */} |
| 109 | + (Head of the Department) |
| 110 | + </p> |
| 111 | + )} |
| 112 | + </div> |
| 113 | + |
| 114 | + {/* Contact info */} |
| 115 | + <div className="space-y-0.5 xs:space-y-1 sm:space-y-2"> |
| 116 | + {/* Email with icon */} |
| 117 | + <span className="flex items-center"> |
| 118 | + <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"> |
| 119 | + <MdEmail className="text-primary-700 text-base xs:text-lg sm:text-xl" /> |
| 120 | + </span> |
| 121 | + <a |
| 122 | + href={`mailto:${faculty.email}`} |
| 123 | + 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 " |
| 124 | + > |
| 125 | + {faculty.email} |
| 126 | + </a> |
| 127 | + </span> |
| 128 | + |
| 129 | + {/* Phone with icon */} |
| 130 | + <span className="flex items-center"> |
| 131 | + <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"> |
| 132 | + <MdOutlineLocalPhone className="text-primary-700 text-base xs:text-lg sm:text-xl" /> |
| 133 | + </span> |
| 134 | + <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"> |
| 135 | + {faculty.phone} |
| 136 | + </span> |
| 137 | + </span> |
| 138 | + </div> |
| 139 | + </section> |
| 140 | + </li> |
| 141 | + ))} |
| 142 | + </ul> |
| 143 | + </div> |
| 144 | + |
| 145 | + {/* TODO: MAKE IT EXACTLY LIKE THE DESIGN , ADD RELEVENT BACKGROUND */} |
| 146 | + |
| 147 | + </main> |
| 148 | + </> |
| 149 | + ); |
| 150 | +} |
0 commit comments