From 2fa6e0b21dcde499e9aad1f45524fac09f8b8c15 Mon Sep 17 00:00:00 2001
From: cdricms <36056008+cdricms@users.noreply.github.com>
Date: Thu, 13 Feb 2025 10:13:32 +0100
Subject: [PATCH] Fixed about presentation

---
 frontend/app/(main)/about/page.tsx       | 33 +++++++++++++++---------
 frontend/app/(main)/gallery/page.tsx     |  1 -
 frontend/components/homepage-gallery.tsx |  4 +--
 3 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/frontend/app/(main)/about/page.tsx b/frontend/app/(main)/about/page.tsx
index 4bf4064..53ab661 100644
--- a/frontend/app/(main)/about/page.tsx
+++ b/frontend/app/(main)/about/page.tsx
@@ -10,7 +10,7 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
-import { Avatar, AvatarFallback, AvatarImage } from "@radix-ui/react-avatar";
+import getShortcode from "@/lib/getShortcode";
 import { CheckIcon } from "lucide-react";
 
 export default async function About() {
@@ -21,13 +21,17 @@ export default async function About() {
 			</Button>
 		</a>
 	);
+
+	const profileImage = await getShortcode("profile_image");
+
 	return (
 		<>
 			<div className="">
-				<div className="flex flex-col lg:flex-row gap-4 justify-between w-full p-12">
-					<div className="flex flex-col lg:w-1/2 xl:w-full gap-4 w-full justify-center">
-						<Card className="py-5 max-h-fit">
-							<CardHeader className="text-center p-2">
+				<div className="grid grid-cols-1 lg:grid-cols-3 gap-4 w-full p-12 items-stretch">
+					{/* Text Section - Takes 2/3 on large screens */}
+					<div className="lg:col-span-2 flex flex-col justify-center">
+						<Card className="h-full">
+							<CardHeader className="text-center p-4">
 								<CardTitle className="text-5xl">
 									Nicolas GORUK
 								</CardTitle>
@@ -38,10 +42,10 @@ export default async function About() {
 							</CardHeader>
 							<CardContent className="px-8 sm:px-10 py-14">
 								<div className="flex flex-col gap-4 justify-center">
-									<h2 className="text-pretty text-center text-xl font-semibold md:mb-0.5 lg:mb-1 lg:max-w-3xl sm:text-3xl">
+									<h2 className="text-center text-xl font-semibold sm:text-3xl">
 										Lorem ipsum, dolor sit amet
 									</h2>
-									<p className="blog-paragraph text-muted-foreground">
+									<p className="text-muted-foreground">
 										Lorem ipsum dolor sit amet consectetur
 										adipisicing elit. Debitis accusamus
 										illum, nam nemo quod delectus velit
@@ -49,10 +53,10 @@ export default async function About() {
 										aliquam atque praesentium ea placeat ad,
 										neque eveniet adipisci?
 									</p>
-									<h2 className="text-pretty text-center text-xl font-semibold md:mb-0.5 lg:mb-1 lg:max-w-3xl sm:text-3xl">
+									<h2 className="text-center text-xl font-semibold sm:text-3xl">
 										Lorem ipsum, dolor sit amet
 									</h2>
-									<p className="blog-paragraph text-muted-foreground">
+									<p className="text-muted-foreground">
 										Lorem ipsum dolor sit amet consectetur
 										adipisicing elit. Debitis accusamus
 										illum, nam nemo quod delectus velit
@@ -64,10 +68,15 @@ export default async function About() {
 							</CardContent>
 						</Card>
 					</div>
-					<div className="w-full lg:w-1/2 border rounded">
+
+					{/* Image Section - Takes 1/3 on large screens */}
+					<div className="lg:col-span-1 flex items-center">
 						<img
-							className="w-full aspect-square"
-							src="https://shadcnblocks.com/images/block/placeholder-dark-1.svg"
+							className="w-full h-full object-cover rounded"
+							src={
+								profileImage?.media?.url ??
+								"https://shadcnblocks.com/images/block/placeholder-dark-1.svg"
+							}
 							alt="president profile image"
 						/>
 					</div>
diff --git a/frontend/app/(main)/gallery/page.tsx b/frontend/app/(main)/gallery/page.tsx
index 3d30a0e..fa9493b 100644
--- a/frontend/app/(main)/gallery/page.tsx
+++ b/frontend/app/(main)/gallery/page.tsx
@@ -50,7 +50,6 @@ export default function PhotoGallery() {
 							/>
 						</div>
 					))}
-					)
 				</div>
 			)}
 			<Pagination className="mt-8">
diff --git a/frontend/components/homepage-gallery.tsx b/frontend/components/homepage-gallery.tsx
index d66f0ac..da78461 100644
--- a/frontend/components/homepage-gallery.tsx
+++ b/frontend/components/homepage-gallery.tsx
@@ -28,8 +28,8 @@ export default function HomepageGalleryItems() {
 	return (
 		<>
 			{data?.items.map((i) => (
-				<CarouselItem className="pl-[20px] md:max-w-[452px]">
-					<div className="w-full aspect-square" key={i.id}>
+				<CarouselItem key={i.id} className="pl-[20px] md:max-w-[452px]">
+					<div className="w-full aspect-square">
 						<img
 							src={i.url}
 							alt={i.alt}