cdricms/latosa-escrima
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Responsive about

Browse Source
This commit is contained in:
gom-by
2025-01-21 13:47:07 +01:00
parent 48e761667f
commit 9fb5d0188d
2 changed files with 82 additions and 699 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
frontend/app/(main)/about/page.tsx
View File

@@ -23,21 +23,26 @@ export default async function About() {
);
return (
<>
<div className="px-24 py-28 lg:py-32">
<div className="flex flex-row gap-4 justify-center w-full pb-24">
<div className="flex flex-col gap-4 w-3/5 justify-center">
<Card className="pt-10 pb-5 max-h-fit">
<div className="px-4 py-8 lg:px-24 lg:py-32">
<div className="
flex flex-col lg:flex-row gap-4
justify-center w-full pb-24">
<div className="
flex flex-col gap-4 w-full
lg:w-3/5 justify-center">
<Card className="py-5 sm:mx-10 max-h-fit">
<CardHeader className="text-center p-2">
<CardTitle className="m-5">
Entraîneur depuis 60 ans
</CardTitle>
<span className="font-bold text-5xl">
<span className="font-bold text-4xl
sm:text-4xl">
Robert Louis Jean Jacke
</span>
</CardHeader>
<CardContent className="px-28 py-14">
<div className="flex gap-4 flex-col justify-center">
<h2 className="text-pretty text-xl font-semibold md:mb-0.5 md:text-4xl lg:mb-1 lg:max-w-3xl lg:text-3xl">
<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">
Lorem ipsum, dolor sit amet
</h2>
<p className="blog-paragraph text-muted-foreground">
@@ -48,7 +53,7 @@ export default async function About() {
praesentium ea placeat ad, neque eveniet
adipisci?
</p>
<h2 className="text-pretty text-xl font-semibold md:mb-0.5 md:text-4xl lg:mb-1 lg:max-w-3xl lg:text-3xl">
<h2 className="text-pretty text-center text-xl font-semibold md:mb-0.5 lg:mb-1 lg:max-w-3xl sm:text-3xl">
Lorem ipsum, dolor sit amet
</h2>
<p className="blog-paragraph text-muted-foreground">
@@ -62,28 +67,44 @@ export default async function About() {
</div>
</CardContent>
</Card>
<div className="max-w-full text-center" >
<h2 className="text-pretty text-xl font-semibold md:mb-0.5 md:text-4xl lg:mb-1 lg:max-w-3xl lg:text-3xl">
<div className="max-w-full my-8 text-center lg:hidden" >
<h2 className="text-pretty text-xl font-semibold mb-4 sm:mb-8 sm:text-3xl lg:mb-1 lg:max-w-3xl">
Mes associés
</h2>
<div className="relative items-center justify-center flex flex-row gap-14 w-full">
<Avatar className="w-20 h-20 m-4">
<AvatarImage className="rounded-full z-10" src="https://github.com/shadcn.png" alt="@shadcn" />
<div className="absolute border rounded-xl py-0.5 px-5 w-fit opacity-100 top-20 left-[calc(50%+11em)] translate-x-[-50%] bg-white z-50">
Marc Zuckenberg
<div className="relative flex flex-col lg:flex-row items-center justify-center overflow-y-visible gap-6 w-full">
<Avatar className="flex flex-row gap-9 w-20 h-20 m-1">
<AvatarImage className="rounded-full z-50 ld:md:z-10" src="https://github.com/shadcn.png" alt="@shadcn" />
<div className="
md:absolute border self-center rounded-xl font-bold
text-center
py-4 px-8 lg:md:px-5 w-fit opacity-100 lg:md:top-20
md:left-[calc(50%-11em)] translate-x-[-50%] lg:left-[calc(50% -4em)]
sm:translate-x-[100%] lg:translate-x-[50%] z-40 lg:md:z-50">
Richard Vagneur
</div>
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<Avatar className="w-20 h-20 m-4">
<AvatarImage className="rounded-full z-10" src="https://github.com/shadcn.png" alt="@shadcn" />
<div className="absolute border rounded-xl py-0.5 px-5 w-fit opacity-100 top-20 left-[calc(50%)] translate-x-[-50%] bg-white z-50">
<Avatar className="flex flex-row translate-x-[-8em] gap-9 w-20 h-20 m-1">
<AvatarImage className="rounded-full z-50 ld:md:z-10" src="https://github.com/shadcn.png" alt="@shadcn" />
<div className="
md:absolute border rounded-xl font-bold text-center
py-4 px-8 lg:md:px-5 w-fit opacity-100 lg:md:top-20
md:left-[calc(50%)] translate-x-[-50%] z-40 lg:md:z-50
sm:translate-x-[-50%] lg:translate-x-[-50%] self-center">
Robert Lewis
</div>
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<Avatar className="w-20 h-20 m-4">
<AvatarImage className="rounded-full z-10" src="https://github.com/shadcn.png" alt="@shadcn" />
<div className="absolute border rounded-xl py-0.5 px-5 w-fit opacity-100 top-20 left-[calc(50%-11em)] translate-x-[-50%] bg-white z-50">
<Avatar className="flex flex-row gap-9 w-20 h-20 m-1">
<AvatarImage className="rounded-full z-50 ld:md:z-10" src="https://github.com/shadcn.png" alt="@shadcn" />
<div className="
md:absolute border rounded-xl font-bold text-center
py-4 px-8 lg:md:px-5 w-fit opacity-100 lg:md:top-20
md:left-[calc(50%-11em)] translate-x-[-50%] z-40
lg:md:z-50 sm:translate-x-[125%] sm:self-center
lg:translate-x-[-100%]">
Marria Caré
</div>
<AvatarFallback>CN</AvatarFallback>
@@ -91,9 +112,9 @@ export default async function About() {
</div>
</div>
</div>
<div className="container w-2/5 h-fit border rounded">
<div className="w-full lg:w-2/5 sm:self-center sm:w-3/5 h-fit border rounded">
<img
className=""
className="w-full"
src="https://shadcnblocks.com/images/block/placeholder-dark-1.svg"
alt="president profile image"
/>
@@ -111,7 +132,7 @@ export default async function About() {
equipement (gants, casque) pris en compte. Prévoir une tenue sportive adaptée.
</p>
</div>
<div className="mt-12 flex flex-row justify-center gap-6 lg:items-center">
<div className="mt-12 flex flex-col sm:flex-row px-12 justify-center gap-6 lg:items-center">
<Card className="border-primary">
<CardHeader className="text-center pb-2">
<Badge className="uppercase w-max self-center mb-3">