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, CardHeader,
CardTitle, CardTitle,
} from "@/components/ui/card"; } from "@/components/ui/card";
import { Avatar, AvatarFallback, AvatarImage } from "@radix-ui/react-avatar"; import getShortcode from "@/lib/getShortcode";
import { CheckIcon } from "lucide-react"; import { CheckIcon } from "lucide-react";
export default async function About() { export default async function About() {
@@ -21,13 +21,17 @@ export default async function About() {
</Button> </Button>
</a> </a>
); );
const profileImage = await getShortcode("profile_image");
return ( return (
<> <>
<div className=""> <div className="">
<div className="flex flex-col lg:flex-row gap-4 justify-between w-full p-12"> <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 w-full p-12 items-stretch">
<div className="flex flex-col lg:w-1/2 xl:w-full gap-4 w-full justify-center"> {/* Text Section - Takes 2/3 on large screens */}
<Card className="py-5 max-h-fit"> <div className="lg:col-span-2 flex flex-col justify-center">
<CardHeader className="text-center p-2"> <Card className="h-full">
<CardHeader className="text-center p-4">
<CardTitle className="text-5xl"> <CardTitle className="text-5xl">
Nicolas GORUK Nicolas GORUK
</CardTitle> </CardTitle>
@@ -38,10 +42,10 @@ export default async function About() {
</CardHeader> </CardHeader>
<CardContent className="px-8 sm:px-10 py-14"> <CardContent className="px-8 sm:px-10 py-14">
<div className="flex flex-col gap-4 justify-center"> <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 Lorem ipsum, dolor sit amet
</h2> </h2>
<p className="blog-paragraph text-muted-foreground"> <p className="text-muted-foreground">
Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur
adipisicing elit. Debitis accusamus adipisicing elit. Debitis accusamus
illum, nam nemo quod delectus velit illum, nam nemo quod delectus velit
@@ -49,10 +53,10 @@ export default async function About() {
aliquam atque praesentium ea placeat ad, aliquam atque praesentium ea placeat ad,
neque eveniet adipisci? neque eveniet adipisci?
</p> </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 Lorem ipsum, dolor sit amet
</h2> </h2>
<p className="blog-paragraph text-muted-foreground"> <p className="text-muted-foreground">
Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur
adipisicing elit. Debitis accusamus adipisicing elit. Debitis accusamus
illum, nam nemo quod delectus velit illum, nam nemo quod delectus velit
@@ -64,10 +68,15 @@ export default async function About() {
</CardContent> </CardContent>
</Card> </Card>
</div> </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 <img
className="w-full aspect-square" className="w-full h-full object-cover rounded"
src="https://shadcnblocks.com/images/block/placeholder-dark-1.svg" src={
profileImage?.media?.url ??
"https://shadcnblocks.com/images/block/placeholder-dark-1.svg"
}
alt="president profile image" alt="president profile image"
/> />
</div> </div>

View File

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

View File

@@ -28,8 +28,8 @@ export default function HomepageGalleryItems() {
return ( return (
<> <>
{data?.items.map((i) => ( {data?.items.map((i) => (
<CarouselItem className="pl-[20px] md:max-w-[452px]"> <CarouselItem key={i.id} className="pl-[20px] md:max-w-[452px]">
<div className="w-full aspect-square" key={i.id}> <div className="w-full aspect-square">
<img <img
src={i.url} src={i.url}
alt={i.alt} alt={i.alt}