TEMPFIX: Hardcoded VS data

app/[locale]/academics/awards/page.tsx

@@ -1,9 +1,107 @@
-import { WorkInProgressStatus } from '~/components/status';
+import { ReactNode } from 'react';
 
-export default function Programmes({
+import Heading from '~/components/heading';
+import ImageHeader from '~/components/image-header';
+import { getTranslations } from '~/i18n/translations';
+import { cn } from '~/lib/utils';
+
+export default async function Programmes({
   params: { locale },
 }: {
   params: { locale: string };
 }) {
-  return <WorkInProgressStatus locale={locale} />;
+  const text = (await getTranslations(locale)).Awards;
+
+  return (
+    <>
+      <ImageHeader title="Awards" src="slideshow/image02.jpg" />
+      <main className="container">
+        {text.awards.map((award, i) => (
+          <AwardsCard
+            text={{
+              about: text.aboutTitle,
+              description: text.descriptionTitle,
+              criterion: text.criterionTitle,
+            }}
+            index={i}
+            key={i}
+            title={award.title}
+            about={award.about}
+            description={award.description}
+          >
+            {award.criterion && (
+              <>
+                <div className="mb-4">
+                  <strong>{award.criterion[0]}</strong>:
+                </div>
+                <h6 className="mb-2 text-lg font-semibold">
+                  {award.criterion[1]}
+                </h6>
+                {award.criterion.length > 2 && (
+                  <ul className="ml-10 list-decimal space-y-2">
+                    {award.criterion.slice(2).map((item, index) => (
+                      <li key={index}>{item}</li>
+                    ))}
+                  </ul>
+                )}
+              </>
+            )}
+          </AwardsCard>
+        ))}
+      </main>
+    </>
+  );
+}
+
+interface AwardCardProps {
+  title: string;
+  about: string;
+  description?: string;
+  children?: ReactNode;
+  index: number;
+  text: {
+    about: string;
+    description: string;
+    criterion: string;
+  };
+}
+
+function AwardsCard({
+  title,
+  about,
+  children,
+  description,
+  index,
+  text,
+}: AwardCardProps) {
+  return (
+    <>
+      <Heading
+        glyphDirection={index % 2 ? 'rtl' : 'ltr'}
+        heading="h4"
+        text={title}
+      />
+      <section
+        className={cn(
+          'container mt-5 rounded-md border border-primary-500 p-5 shadow-lg',
+          index % 2 === 0 && 'bg-neutral-50'
+        )}
+      >
+        <h4 className="mt-4 text-xl font-semibold">{text.about}</h4>
+        <p className="text-gray-800 text-base">{about}</p>
+        {children && (
+          <>
+            <h4 className="mt-4 text-xl font-semibold">{text.criterion}</h4>
+            <div className="text-gray-800 text-base">{children}</div>
+          </>
+        )}
+        {description && (
+          <>
+            <h4 className="mt-4 text-xl font-semibold">{text.criterion}</h4>
+            <p className="text-gray-800 text-base">{description}</p>
+          </>
+        )}
+      </section>
+    </>
+  );
 }

app/[locale]/academics/convocation/[year]/page.tsx

@@ -0,0 +1,63 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+import Heading from '~/components/heading';
+import ImageHeader from '~/components/image-header';
+import { getTranslations } from '~/i18n/translations';
+import { cn } from '~/lib/utils';
+
+import { getConvocationData } from '../utils';
+
+export default async function Page({
+  params: { locale, year },
+}: {
+  params: { locale: string; year: string };
+}) {
+  const text = (await getTranslations(locale)).Convocation;
+
+  const data = getConvocationData(year);
+
+  return (
+    <>
+      <ImageHeader
+        title={`${year} Convocation`}
+        src={`https://nitkkr.ac.in/wp-content/uploads/2022/12/IMG_0496-scaled.jpg`}
+      />
+
+      <Heading
+        className="container"
+        glyphDirection="dual"
+        heading="h3"
+        id=""
+        text={text.notification}
+      />
+      <section className="container w-full rounded-md border border-primary-500">
+        <ul className={cn('w-full space-y-5 py-5')}>
+          {data.notifications.map((note, i) => (
+            <li
+              key={i}
+              className={cn(
+                'group w-full rounded-lg p-5 transition-all duration-300',
+                i % 2 === 0
+                  ? 'bg-background hover:bg-neutral-200'
+                  : 'bg-primary-500 hover:bg-primary-700'
+              )}
+            >
+              <Link
+                href={note.href}
+                className={cn(
+                  'line-clamp-1 max-w-full text-ellipsis text-lg font-semibold transition-colors duration-300',
+                  i % 2 === 0
+                    ? 'text-primary-500 hover:text-primary-700'
+                    : 'hover:text-background-light text-background'
+                )}
+              >
+                {note.title}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </section>
+    </>
+  );
+}

app/[locale]/academics/convocation/page.tsx

@@ -1,9 +1,57 @@
-import { WorkInProgressStatus } from '~/components/status';
+import Link from 'next/link';
 
-export default function Convocation({
+import { cn } from '~/lib/utils';
+import Heading from '~/components/heading';
+
+export default async function Convocation({
   params: { locale },
 }: {
   params: { locale: string };
 }) {
-  return <WorkInProgressStatus locale={locale} />;
+  return (
+    <main className="container h-screen">
+      <Heading glyphDirection={'dual'} heading={'h1'} text={'Convocations'} />
+      <ul
+        className={cn(
+          'container mb-2 sm:mb-4 lg:mb-6 xl:mb-8',
+          'grid grid-cols-1 gap-2',
+          'sm:grid-cols-2 sm:gap-4',
+          'lg:grid-cols-3 lg:gap-6',
+          'xl:grid-cols-4 xl:gap-8'
+        )}
+      >
+        {['19th', '18th', '17th', '16th'].map((convocation, i) => (
+          <li key={i}>
+            <Link
+              className={cn(
+                'flex items-center gap-2 md:gap-3',
+                'group bg-neutral-50 font-serif hover:bg-primary-500',
+                'rounded p-2 drop-shadow hover:drop-shadow-lg xl:p-3'
+              )}
+              href={`/${locale}/academics/convocation/${convocation}`}
+            >
+              <h5
+                className={cn(
+                  'size-8 p-1',
+                  'sm:h-12 sm:min-w-12 sm:p-3',
+                  'lg:h-20 lg:min-w-20 lg:p-5',
+                  'rounded bg-primary-700 fill-neutral-50 text-neutral-50 drop-shadow group-hover:bg-neutral-50 group-hover:text-primary-700'
+                )}
+              >
+                {convocation}
+              </h5>
+              <h5
+                className={cn(
+                  'text-primary-700 group-hover:text-neutral-50',
+                  'transition-colors duration-200'
+                )}
+              >
+                Convocation
+              </h5>
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </main>
+  );
 }