218 lines
6.7 KiB
TypeScript
218 lines
6.7 KiB
TypeScript
export const dynamic = "force-dynamic"; // Prevents static rendering
|
|
|
|
import { LocationCard } from "@/components/locations/location-card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
|
|
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
|
import { Info } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { SITE_NAME } from "@/lib/constants";
|
|
import getShortcode from "@/lib/getShortcode";
|
|
import request from "@/lib/request";
|
|
import { Location } from "@/types/types";
|
|
import { CheckIcon } from "lucide-react";
|
|
|
|
// Define props interface for PricingCard
|
|
interface PricingCardProps {
|
|
title: string;
|
|
price: number;
|
|
description: string;
|
|
features: string[];
|
|
isPopular?: boolean;
|
|
ctaText?: string;
|
|
ctaLink?: string;
|
|
}
|
|
|
|
const UnderConstructionBanner = () => {
|
|
return (
|
|
<Alert variant="destructive" className="rounded-2xl shadow-md mb-4">
|
|
<Info className="h-5 w-5 text-red-500 mr-2" />
|
|
<div>
|
|
<AlertTitle>Attention</AlertTitle>
|
|
<AlertDescription>
|
|
Cette page est encore en cours de construction et les
|
|
informations listées peuvent ne pas être exactes pour le
|
|
moment.
|
|
</AlertDescription>
|
|
</div>
|
|
</Alert>
|
|
);
|
|
};
|
|
|
|
// Reusable Pricing Card Component
|
|
const PricingCard: React.FC<PricingCardProps> = ({
|
|
title,
|
|
price,
|
|
description,
|
|
features,
|
|
isPopular = false,
|
|
ctaText = "Prendre contact",
|
|
ctaLink = "/contact",
|
|
}) => (
|
|
<Card
|
|
className={`border transition-all duration-300 hover:shadow-lg flex-1 max-w-md ${
|
|
isPopular ? "border-primary shadow-lg" : "shadow-sm"
|
|
}`}
|
|
>
|
|
<CardHeader className="text-center pb-2">
|
|
{isPopular && (
|
|
<Badge className="uppercase w-max self-center mb-3 bg-gradient-to-r from-indigo-500 to-purple-500">
|
|
Le plus populaire
|
|
</Badge>
|
|
)}
|
|
<CardTitle className="mb-4 text-2xl">{title}</CardTitle>
|
|
<span className="font-bold text-4xl">{price}€</span>
|
|
</CardHeader>
|
|
<CardDescription className="text-center w-11/12 mx-auto">
|
|
{description}
|
|
</CardDescription>
|
|
<CardContent>
|
|
<ul className="mt-6 space-y-3 text-sm">
|
|
{features.map((feature, index) => (
|
|
<li key={index} className="flex space-x-2">
|
|
<CheckIcon className="flex-shrink-0 mt-0.5 h-4 w-4 text-green-500" />
|
|
<span className="text-muted-foreground">{feature}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<a href={ctaLink} className="w-full">
|
|
<Button
|
|
className={`w-full transition-all duration-300 ${
|
|
isPopular
|
|
? "bg-gradient-to-r from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600"
|
|
: "bg-gray-800 hover:bg-gray-900"
|
|
}`}
|
|
aria-label={`Contact us for ${title} plan`}
|
|
>
|
|
{ctaText}
|
|
</Button>
|
|
</a>
|
|
</CardFooter>
|
|
</Card>
|
|
);
|
|
|
|
export default async function About() {
|
|
const profileImage = await getShortcode("profile_image");
|
|
const locations = await request<Location[]>("/locations/all", {
|
|
requiresAuth: false,
|
|
});
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-b from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
|
|
{/* Hero Section */}
|
|
<div className="px-6 py-12 lg:py-16 lg:px-12">
|
|
<UnderConstructionBanner />
|
|
</div>
|
|
<section className="grid grid-cols-1 lg:grid-cols-3 gap-6 w-full px-6 py-12 lg:px-12 lg:py-16 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 shadow-md transition-all duration-300 hover:shadow-xl">
|
|
<CardHeader className="text-center p-6">
|
|
<CardTitle className="text-4xl lg:text-5xl font-bold">
|
|
Nicolas GORUK
|
|
</CardTitle>
|
|
<CardDescription className="text-lg mt-2">
|
|
Président de l'association française de{" "}
|
|
{SITE_NAME}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="px-6 sm:px-10 py-12 space-y-6">
|
|
<div className="flex flex-col gap-6 justify-center text-justify">
|
|
<h2 className="text-center text-xl font-semibold sm:text-2xl">
|
|
Notre mission
|
|
</h2>
|
|
<p className="text-muted-foreground text-base">
|
|
Chez {SITE_NAME}, nous nous engageons à
|
|
promouvoir l'excellence. Nous offrons un
|
|
environnement dynamique pour tous nos
|
|
membres, avec des événements réguliers et
|
|
des opportunités uniques.
|
|
</p>
|
|
<h2 className="text-center text-xl font-semibold sm:text-2xl">
|
|
Notre histoire
|
|
</h2>
|
|
<p className="text-muted-foreground text-base">
|
|
Fondée en [année], notre association a
|
|
grandi pour devenir un acteur clé dans
|
|
[domaine]. Nous avons organisé [nombre]
|
|
événements et touché plus de [nombre]
|
|
personnes grâce à nos initiatives.
|
|
</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-lg shadow-md transition-transform duration-300 hover:scale-105"
|
|
src={
|
|
profileImage?.media?.url ??
|
|
"https://shadcnblocks.com/images/block/placeholder-dark-1.svg"
|
|
}
|
|
alt="Portrait de Nicolas GORUK, président de l'association"
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Locations Section */}
|
|
{locations.data && locations.data.length > 0 && (
|
|
<section className="py-16 px-6 lg:px-12">
|
|
<h2 className="scroll-m-20 border-b pb-3 text-3xl font-semibold tracking-tight text-center">
|
|
Retrouvez-nous
|
|
</h2>
|
|
<div className="mt-12 flex flex-wrap gap-6 justify-center">
|
|
{locations.data.map((l: Location) => (
|
|
<LocationCard
|
|
key={`${l.street}-${l.city}`}
|
|
location={l}
|
|
/>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{/* Pricing Section */}
|
|
<section className="py-16 px-6 lg:px-12">
|
|
<div className="max-w-3xl mx-auto text-center mb-12">
|
|
<h2 className="scroll-m-20 border-b pb-3 text-3xl font-semibold tracking-tight">
|
|
Tarifs
|
|
</h2>
|
|
<p className="mt-3 text-muted-foreground text-base">
|
|
Adhésion à partir de [prix]€.
|
|
</p>
|
|
<p className="mt-2 text-muted-foreground text-base">
|
|
Équipement (gants, casque) fourni. Prévoir une tenue
|
|
sportive adaptée.
|
|
</p>
|
|
</div>
|
|
<div className="mt-12 flex flex-col sm:flex-row justify-center gap-6 lg:items-center">
|
|
<PricingCard
|
|
title="Étudiant"
|
|
price={125}
|
|
description="Tarif d'une année pour un étudiant."
|
|
features={[]}
|
|
/>
|
|
<PricingCard
|
|
title="Normal"
|
|
price={150}
|
|
description="Tarif normal pour n'importe quel individu."
|
|
features={[]}
|
|
/>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|