Fixed about presentation
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -50,7 +50,6 @@ export default function PhotoGallery() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
)
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<Pagination className="mt-8">
|
<Pagination className="mt-8">
|
||||||
|
|||||||
@@ -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}
|
||||||
|
|||||||
Reference in New Issue
Block a user