246 lines
8.8 KiB
TypeScript
246 lines
8.8 KiB
TypeScript
"use server";
|
|
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@radix-ui/react-avatar";
|
|
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>
|
|
);
|
|
return (
|
|
<>
|
|
<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-4xl
|
|
sm:text-4xl">
|
|
Robert Louis Jean Jacke
|
|
</span>
|
|
</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">
|
|
Lorem ipsum, dolor sit amet
|
|
</h2>
|
|
<p className="blog-paragraph 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-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">
|
|
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 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 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="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="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>
|
|
</Avatar>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="w-full lg:w-2/5 sm:self-center sm:w-3/5 h-fit border rounded">
|
|
<img
|
|
className="w-full"
|
|
src="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>
|
|
</>
|
|
);
|
|
}
|