Achievements Grid

src/app/achievements/page.tsx

@@ -1,13 +1,11 @@
 import Header from "@/components/Header";
-import LeftAch from "@/components/achievements/LeftAch";
-import RightAch from "@/components/achievements/RightAch";
+import AchievementsGrid from "@/components/achievements/AchievementsGrid";
 
 const Achievements = () => {
   return (
     <div className="bg-mocktrial-lightblue">
       <Header title="Achievements" />
-      <LeftAch />
-      <RightAch />
+      <AchievementsGrid />
     </div>
   );
 };

src/components/achievements/AchievementsGrid.tsx

@@ -0,0 +1,21 @@
+import LeftAchCard from "@/components/achievements/LeftAchCard";
+import RightAchCard from "@/components/achievements/RightAchCard";
+import AchievementsData from "@/data/AchievementsData";
+
+const AchievementsGrid = () => {
+  return (
+    <div className="relative grid grid-cols-1">
+      {AchievementsData.map(({ image, text, size }, index) => (
+        <div key={index}>
+          {index % 2 === 0 ? (
+            <LeftAchCard image={image} text={text} size={size} />
+          ) : (
+            <RightAchCard image={image} text={text} size={size} />
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default AchievementsGrid;

src/components/achievements/LeftAchCard.tsx

@@ -2,26 +2,35 @@
 
 import Image, { StaticImageData } from "next/image";
 
-interface LeftAchievementsProps {
+interface Properties {
   image: StaticImageData;
   text: string;
   size: string;
 }
 
-const LeftAchievements = ({ image, text, size }: LeftAchievementsProps) => {
+const LeftAchCard = ({ image, text, size }: Properties) => {
   return (
-    <div className="bg-mocktrial-blue flex h-full w-full flex-row text-white">
-      <div className="relative w-1/2">
-        <Image src={image} alt={text} className="object-cover object-center" />
-      </div>
+    <div className="hidden md:block">
+      <div className="grid h-[65vh] grid-cols-2">
+        <div className="relative">
+          <Image
+            src={image}
+            alt="Achievement Image"
+            fill
+            className="object-cover"
+          />
+        </div>
 
-      <div className="flex w-1/2 items-center justify-center text-center">
-        <div style={{ fontSize: `${size}px` }} className="font-semibold">
-          {text}
+        <div className="bg-mocktrial-blue flex items-center justify-center text-white">
+          <p
+            className={`${size} px-6 text-center leading-tight font-semibold tracking-wide`}
+          >
+            {text}
+          </p>
         </div>
       </div>
     </div>
   );
 };
 
-export default LeftAchievements;
+export default LeftAchCard;

src/components/achievements/RightAchCard.tsx

@@ -1,3 +1,4 @@
+"use client";
 import Image, { StaticImageData } from "next/image";
 
 type Properties = {
@@ -9,7 +10,7 @@ type Properties = {
 const RightAchCard = ({ image, text, size }: Properties) => {
   return (
     <div className="hidden md:block">
-      <div className="grid h-[50vh] grid-cols-2">
+      <div className="grid h-[65vh] grid-cols-2">
         <div className="bg-mocktrial-blue flex items-center justify-center text-white">
           <p
             className={`${size} px-6 text-center leading-tight font-semibold tracking-wide`}

src/data/AchievementsData.ts

@@ -0,0 +1,41 @@
+import spamta_winner from "@/public/achievements/spamta_winner.webp";
+import indivisual_awards from "@/public/achievements/indivisual_awards.webp";
+import team_finishes from "@/public/achievements/team_finishes.webp";
+import regional_spamta_winners from "@/public/achievements/regional_spamta_winners.webp";
+import champion_series from "@/public/achievements/champion_series.webp";
+import ranked_top_25 from "@/public/achievements/ranked_top_25.webp";
+
+const achievementsData = [
+  {
+    image: spamta_winner,
+    text: "2024-2025 Spamta Winner",
+    size: "text-5xl",
+  },
+  {
+    image: indivisual_awards,
+    text: "19 Individual Awards",
+    size: "text-5xl",
+  },
+  {
+    image: team_finishes,
+    text: "6 Top 5 Team Finishes",
+    size: "text-5xl",
+  },
+  {
+    image: regional_spamta_winners,
+    text: "Regional Spamta Winner",
+    size: "text-5xl",
+  },
+  {
+    image: champion_series,
+    text: "First Bid to the opening round championship series in 7 years",
+    size: "text-4xl",
+  },
+  {
+    image: ranked_top_25,
+    text: "Rank within top 25% of team in the country",
+    size: "text-4xl",
+  },
+];
+
+export default achievementsData;