Locations added

frontend/app/(main)/about/page.tsx

@@ -1,6 +1,10 @@
 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,
@@ -12,197 +16,202 @@ import {
 } 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";
 
-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>
-	);
+// 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="">
-				<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 de l'association française de{" "}
-									{SITE_NAME}
-								</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 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>
-				<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">
+
+				{/* 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-1 text-muted-foreground">
-						License accessible à partir de 90€. Aide "une aide de
-						l'état" possible.
+					<p className="mt-3 text-muted-foreground text-base">
+						Adhésion à partir de [prix]€.
 					</p>
-					<p className="mt-1 text-muted-foreground">
-						equipement (gants, casque) pris en compte. Prévoir une
-						tenue sportive adaptée.
+					<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 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 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>
-			</div>
-		</>
+			</section>
+		</div>
 	);
 }