Fixed about presentation

This commit is contained in:
cdricms
2025-02-13 10:13:32 +01:00
parent 9d6aa4c163
commit 2fa6e0b21d
3 changed files with 23 additions and 15 deletions

View File

@@ -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>

View File

@@ -50,7 +50,6 @@ export default function PhotoGallery() {
/>
</div>
))}
)
</div>
)}
<Pagination className="mt-8">

View File

@@ -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}