Skip to content

Feat/director page #410

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: staged
Choose a base branch
from
Open

Feat/director page #410

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
32cb73c
Made Director Component
kartik-vats Oct 26, 2025
3336783
update: fixed translation
kartik-vats Oct 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
147 changes: 102 additions & 45 deletions app/[locale]/director-message/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,63 +1,120 @@
import Heading from '~/components/heading';
import { getTranslations } from '~/i18n/translations';
import { getS3Url } from '~/server/s3';
import DirectorCard from '~/components/director-card';
import EmployeCard from '~/components/employe-card';
import ImageHeader from '~/components/image-header';

export default async function DirectorCorner({
params: { locale },
}: {
params: { locale: string };
}) {
const text = (await getTranslations(locale)).DirectorMessage;
const text = (await getTranslations(locale)).DirectorPage;

return (
<>
{/* ---------- HEADER ---------- */}
<ImageHeader
title={text.pageTitle}
headings={[
{ label: text.sections[0], href: '#director-profile' },
{ label: text.sections[1], href: '#brief-cv-of-director' },
{ label: text.sections[2], href: '#director-message' },
{ label: text.sections[3], href: '#director-office' },
{ label: text.sections[4], href: '#previous-directors' },
]}
src="student-activities/header.jpg"
/>

{/* ---------- DIRECTOR’S PROFILE ---------- */}
<section className="container mb-32 mt-10" id="director-profile">
<Heading
glyphDirection="dual"
heading="h2"
href="#director-profile"
text={text.title[0]}
/>
<DirectorCard
image="assets/director.jpeg"
name={text.Director.name}
position={text.Director.position}
phone={text.Director.phone}
fax={text.Director.fax}
mobile={text.Director.mobile}
email={text.Director.email}
/>
</section>

{/* ---------- BRIEF CV OF DIRECTOR ---------- */}
<section className="px-6 sm:px-10" id="brief-cv-of-director">
<Heading
glyphDirection="dual"
heading="h2"
href="#brief-cv-of-director"
text={text.title[1]}
/>
{text.cv.map((item, index) => (
<p key={index}>{item}</p>
))}
</section>

{/* ---------- DIRECTOR’S MESSAGE ---------- */}
<section className="px-6 sm:px-10" id="director-message">
<Heading
glyphDirection="dual"
heading="h2"
href="#director-message"
text={text.title[2]}
/>
{text.DirectorMessage.map((msg, index) => (
<p key={index}>{msg}</p>
))}
</section>

{/* ---------- DIRECTOR’S OFFICE / EMPLOYEES ---------- */}
<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%), url('${getS3Url()}/assets/temple-1.jpeg')`,
}}
className="flex flex-wrap justify-center gap-6 sm:gap-8"
id="director-office"
>
<Heading
text={text.title.toUpperCase()}
heading="h3"
glyphDirection="rtl"
heading="h2"
href="#director-office"
text={text.title[3]}
/>
{text.employes.map((employe, index) => (
<EmployeCard
key={index}
name={employe.name}
position={employe.position}
phone={employe.phone}
email={employe.email}
image={employe.image}
/>
))}
</section>

{/* ---------- PREVIOUS DIRECTORS ---------- */}
<section id="previous-directors">
<Heading
glyphDirection="dual"
heading="h2"
href="#previous-directors"
text={text.title[4]}
/>
<article className="flex max-md:flex-col">
<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>
{text.preDirectors.map((director, index) => (
<div key={index} className="mb-6">
<DirectorCard
name={director.name}
position={director.position}
phone={director.phone}
fax={director.fax}
mobile={director.mobile}
email={director.email}
image={director.image}
/>
</div>
))}
</section>
</>
);
Expand Down
88 changes: 13 additions & 75 deletions app/[locale]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,6 @@
import Image from 'next/image';
import { BsCalendar3, BsClockFill } from 'react-icons/bs';
import {
FaFacebook,
FaGraduationCap,
FaInstagram,
FaLinkedinIn,
} from 'react-icons/fa';
import { FaXTwitter } from 'react-icons/fa6';
import { MdDateRange } from 'react-icons/md';
import { BsLinkedin } from 'react-icons/bs';
import { MdEmail, MdPhone } from 'react-icons/md';

import Notifications from '~/app/notifications';
import { Button } from '~/components/buttons';
Expand All @@ -20,11 +13,11 @@ import {
} from '~/components/carousels';
import Heading from '~/components/heading';
import MessageCard from '~/components/message-card';
import Events from '~/app/events';
import { getTranslations } from '~/i18n/translations';
import { cn } from '~/lib/utils';
import { type events, type notifications } from '~/server/db';

import Events from './events';


export default async function Home({
params: { locale },
Expand Down Expand Up @@ -76,8 +69,8 @@ export default async function Home({
/>

{title && (
<figcaption className="absolute inset-x-0 bottom-0 justify-start bg-gradient-to-b from-transparent to-neutral-800/80 pb-8 lg:block">
<article className="container max-w-[90%]">
<figcaption className="container absolute inset-x-0 bottom-0 justify-start pb-8 lg:block">
<article className="max-w-[90%]">
<h4 className="pl-2 text-sm text-neutral-100 md:text-2xl">
{title}
</h4>
Expand All @@ -100,24 +93,14 @@ export default async function Home({
<section className="container absolute inset-x-0 bottom-0 hidden h-0 justify-end lg:flex">
<section className="absolute bottom-0 flex flex-col space-y-4 pb-8">
{[
{
href: 'https://www.facebook.com/nitkurukshetraofficialpage',
icon: FaFacebook,
},
{
href: 'https://www.instagram.com/nitkurukshetra',
icon: FaInstagram,
},
{
href: 'https://twitter.com/NITKURUKSHETRA',
icon: FaXTwitter,
},
{ href: 'mailto:[email protected]', icon: MdEmail },
{ href: 'tel:+911742238570', icon: MdPhone },
{
href: 'https://www.linkedin.com/school/national-institute-of-technology-kurukshetra-haryana',
icon: FaLinkedinIn,
icon: BsLinkedin,
},
].map(({ href, icon: Icon }, index) => (
<a href={href} key={index} target="_blank">
<a href={href} key={index}>
<Button
className="size-16 rounded-full border border-shade-light text-neutral-900 backdrop-blur-md hover:bg-shade-light/20"
variant="icon"
Expand All @@ -132,8 +115,7 @@ export default async function Home({

<Notifications category={notificationCategory} locale={locale} />
<Events category={eventsCategory} locale={locale} />

<section className="container mb-32 mt-10" id="directors-corner">
<section className="container mb-32 mt-10" id="directors-corner">
<Heading
glyphDirection="rtl"
heading="h2"
Expand All @@ -152,51 +134,7 @@ export default async function Home({
}}
/>
</section>

<section className="container mb-8">
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
{[
{
label: text.quickLinks.results,
href: 'https://nitkkr.ac.in/result-notification/',
icon: FaGraduationCap,
},
{
label: text.quickLinks.academicCalendar,
href: 'https://nitkkr.ac.in/academic-calender/',
icon: BsCalendar3,
},
{
label: text.quickLinks.examDateSheet,
href: 'https://nitkkr.ac.in/exam-date-sheet/',
icon: MdDateRange,
},
{
label: text.quickLinks.timeTable,
href: 'https://nitkkr.ac.in/institute-time-table/',
icon: BsClockFill,
},
].map(({ label, href, icon: Icon }, index) => (
<Button
key={index}
asChild
className={cn(
'flex flex-col',
'gap-2 md:gap-3 lg:gap-4',
'h-40 md:h-48'
)}
variant="secondary"
>
<a href={href} target="_blank" rel="noopener noreferrer">
<Icon className="size-12" />
<p className="font-serif font-semibold sm:text-lg md:text-xl">
{label}
</p>
</a>
</Button>
))}
</div>
</section>

</>
);
}
}
76 changes: 76 additions & 0 deletions components/director-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import Image from 'next/image';
import { FaPhone } from 'react-icons/fa6';
import { MdEmail, MdFax } from 'react-icons/md';
import { cn } from '~/lib/utils';

export default function DirectorCard({
className,
image,
name,
position,
phone,
fax,
mobile,
email,
}: {
className?: string;
image: string;
name: string;
position: string;
phone: string;
fax: string;
mobile: string;
email: string;
}) {
return (
<article
className={cn(
'flex flex-col items-center gap-6 rounded-xl border border-gray-300 p-6 shadow-md md:flex-row md:items-start md:p-8 mx-auto',
className
)}
style={{
width: '75vw',
backgroundColor: 'rgb(250, 250, 250)'
}}
>
{/* Director Image */}
<div className="flex-shrink-0 overflow-hidden rounded-lg shadow-sm">
<Image
alt={name}
className="h-auto w-[180px] rounded-lg object-cover md:w-[220px]"
height={220}
width={180}
src={image}
/>
</div>

{/* Director Info */}
<div className="flex-1 space-y-2">
<h3 className="text-xl font-bold text-red-700 md:text-2xl">{name}</h3>
<p className="text-2xl md:text-3xl text-gray-800">{position}</p>

<ul className="mt-3 space-y-1 text-sm md:text-base">
<li>
<strong>Phone No.:</strong>{' '}
<span className="text-gray-700 hover:underline">{phone}</span>
</li>
<li>
<strong>Fax No.:</strong>{' '}
<span className="text-gray-700">{fax}</span>
</li>
<li>
<strong>Mobile No.:</strong>{' '}
<span className="text-gray-700 hover:underline">{mobile}</span>
</li>
<li>
<strong>Email-ID:</strong>{' '}
<a href={`mailto:${email}`} className="text-blue-700 hover:underline">
{email}
</a>
</li>
</ul>
</div>
</article>

);
}
Loading