Files
latosa-escrima/frontend/app/(main)/about/page.tsx
2025-02-13 11:26:11 +01:00

208 lines
6.8 KiB
TypeScript

export const dynamic = "force-dynamic"; // Prevents static rendering
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import getShortcode from "@/lib/getShortcode";
import { CheckIcon } from "lucide-react";
export default async function About() {
const make_contact_div = (
<a className="w-full" href="/contact">
<Button className="w-full" variant={"outline"}>
Prendre contact
</Button>
</a>
);
const profileImage = await getShortcode("profile_image");
return (
<>
<div className="">
<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>
<CardDescription>
Président l'association française de Latosa
Escrima
</CardDescription>
</CardHeader>
<CardContent className="px-8 sm:px-10 py-14">
<div className="flex flex-col gap-4 justify-center">
<h2 className="text-center text-xl font-semibold sm:text-3xl">
Lorem ipsum, dolor sit amet
</h2>
<p className="text-muted-foreground">
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Debitis accusamus
illum, nam nemo quod delectus velit
repellat odio dolorum sapiente soluta,
aliquam atque praesentium ea placeat ad,
neque eveniet adipisci?
</p>
<h2 className="text-center text-xl font-semibold sm:text-3xl">
Lorem ipsum, dolor sit amet
</h2>
<p className="text-muted-foreground">
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Debitis accusamus
illum, nam nemo quod delectus velit
repellat odio dolorum sapiente soluta,
aliquam atque praesentium ea placeat ad,
neque eveniet adipisci?
</p>
</div>
</CardContent>
</Card>
</div>
{/* Image Section - Takes 1/3 on large screens */}
<div className="lg:col-span-1 flex items-center">
<img
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>
</div>
<div className="max-w-2xl mx-auto text-center mb-10 lg:mb-14">
<h2 className="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0">
Tarifs
</h2>
<p className="mt-1 text-muted-foreground">
License accessible à partir de 90€. Aide "une aide de
l'état" possible.
</p>
<p className="mt-1 text-muted-foreground">
equipement (gants, casque) pris en compte. Prévoir une
tenue sportive adaptée.
</p>
</div>
<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">
Most popular
</Badge>
<CardTitle className="!mb-7">Startup</CardTitle>
<span className="font-bold text-5xl">£39</span>
</CardHeader>
<CardDescription className="text-center w-11/12 mx-auto">
All the basics for starting a new business
</CardDescription>
<CardContent>
<ul className="mt-7 space-y-2.5 text-sm">
<li className="flex space-x-2">
<CheckIcon className="flex-shrink-0 mt-0.5 h-4 w-4" />
<span className="text-muted-foreground">
2 user
</span>
</li>
<li className="flex space-x-2">
<CheckIcon className="flex-shrink-0 mt-0.5 h-4 w-4" />
<span className="text-muted-foreground">
Plan features
</span>
</li>
<li className="flex space-x-2">
<CheckIcon className="flex-shrink-0 mt-0.5 h-4 w-4" />
<span className="text-muted-foreground">
Product support
</span>
</li>
</ul>
</CardContent>
<CardFooter>
<a href="/contact" className="w-full">
<Button className="w-full">
Prendre contact
</Button>
</a>
</CardFooter>
</Card>
<Card>
<CardHeader className="text-center pb-2">
<CardTitle className="mb-7">Team</CardTitle>
<span className="font-bold text-5xl">£89</span>
</CardHeader>
<CardDescription className="text-center w-11/12 mx-auto">
Everything you need for a growing business
</CardDescription>
<CardContent>
<ul className="mt-7 space-y-2.5 text-sm">
<li className="flex space-x-2">
<CheckIcon className="flex-shrink-0 mt-0.5 h-4 w-4" />
<span className="text-muted-foreground">
5 user
</span>
</li>
<li className="flex space-x-2">
<CheckIcon className="flex-shrink-0 mt-0.5 h-4 w-4" />
<span className="text-muted-foreground">
Plan features
</span>
</li>
<li className="flex space-x-2">
<CheckIcon className="flex-shrink-0 mt-0.5 h-4 w-4" />
<span className="text-muted-foreground">
Product support
</span>
</li>
</ul>
</CardContent>
<CardFooter>{make_contact_div}</CardFooter>
</Card>
<Card>
<CardHeader className="text-center pb-2">
<CardTitle className="mb-7">Enterprise</CardTitle>
<span className="font-bold text-5xl">149</span>
</CardHeader>
<CardDescription className="text-center w-11/12 mx-auto">
Advanced features for scaling your business
</CardDescription>
<CardContent>
<ul className="mt-7 space-y-2.5 text-sm">
<li className="flex space-x-2">
<CheckIcon className="flex-shrink-0 mt-0.5 h-4 w-4" />
<span className="text-muted-foreground">
10 user
</span>
</li>
<li className="flex space-x-2">
<CheckIcon className="flex-shrink-0 mt-0.5 h-4 w-4" />
<span className="text-muted-foreground">
Plan features
</span>
</li>
<li className="flex space-x-2">
<CheckIcon className="flex-shrink-0 mt-0.5 h-4 w-4" />
<span className="text-muted-foreground">
Product support
</span>
</li>
</ul>
</CardContent>
<CardFooter>{make_contact_div}</CardFooter>
</Card>
</div>
</div>
</>
);
}