Setup docker for production and development

Change ./init.sh to be an executable then run it.

The default inner container ports are as followed:
- Postgres: 5432:5432
- Backend: 3001:3000
- Frontend: 3000:3000

- Frontend dev: 8000

The backend image needs to be built:

docker compose up -d --build

frontend/components/blog.tsx

@@ -0,0 +1,118 @@
+import { ArrowRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+
+export interface BlogInterface {
+	id: string;
+	slug: string;
+	title: string;
+	content: string;
+	label: string;
+	author: string;
+	published: string;
+}
+
+export interface BlogSummaryInterface extends BlogInterface {
+	summary: string;
+	image: string;
+	href: string;
+}
+
+export const posts: BlogSummaryInterface[] = [
+	{
+		id: "a1b2c3d4-e5f6-7g8h-9i0j-k1l2m3n4o5p6",
+		slug: "tech-advancements-2025",
+		title: "Tech Advancements in 2025",
+		content:
+			"The year 2025 promises groundbreaking technologies that will reshape industries. In this article, we explore the key advancements that could transform how we work, live, and communicate.",
+		label: "Technology",
+		author: "d3f5e6g7-h8i9j0k1-l2m3n4o5p6q7",
+		published: "2025-01-14",
+		summary:
+			"A look at the tech trends to expect in 2025 and beyond, from AI to quantum computing.",
+		image: "https://via.placeholder.com/600x400?text=Tech+2025",
+		href: "history/tech-advancements-2025",
+	},
+	{
+		id: "f7g8h9i0-j1k2l3m4-n5o6p7q8r9s0t1u2v3",
+		slug: "sustainable-fashion-2025",
+		title: "Sustainable Fashion in 2025",
+		content:
+			"Sustainability is no longer a trend, but a movement within the fashion industry. This article discusses how eco-friendly practices are influencing fashion designs and consumer behavior in 2025.",
+		label: "Fashion",
+		author: "w4x5y6z7-a8b9c0d1-e2f3g4h5i6j7",
+		published: "2025-01-12",
+		summary:
+			"Exploring how sustainable fashion is evolving in 2025 with innovative materials and ethical brands.",
+		image: "https://via.placeholder.com/600x400?text=Sustainable+Fashion",
+		href: "history/sustainable-fashion-2025",
+	},
+	{
+		id: "v1w2x3y4-z5a6b7c8-d9e0f1g2h3i4j5k6l7",
+		slug: "mental-health-awareness-2025",
+		title: "Mental Health Awareness in 2025",
+		content:
+			"As mental health awareness continues to grow, 2025 brings new challenges and opportunities to address psychological well-being. This article focuses on emerging trends in mental health support and public perception.",
+		label: "Health",
+		author: "m8n9o0p1-q2r3s4t5-u6v7w8x9y0z1a2b3",
+		published: "2025-01-10",
+		summary:
+			"Highlighting the importance of mental health awareness in 2025, focusing on new treatments and societal changes.",
+		image: "https://via.placeholder.com/600x400?text=Mental+Health+2025",
+		href: "/history/mental-health-awareness-2025",
+	},
+];
+
+const Blog = () => {
+	return (
+		<section className="self-center lg:md:py-24 sm:py-12">
+			<div className="container flex flex-col items-center gap-16 lg:px-16">
+				<div className="text-center">
+					<h2 className="mb-3 text-pretty text-3xl font-semibold md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-5xl">
+						En savoir plus sur ce sport
+					</h2>
+					<p className="mb-8 text-muted-foreground md:text-base lg:max-w-2xl lg:text-lg">
+						Lorem ipsum dolor sit amet consectetur adipisicing elit.
+						Elig doloremque mollitia fugiat omnis! Porro facilis quo
+						animi consequatur. Explicabo.
+					</p>
+					<Button variant="link" className="w-full sm:w-auto">
+						Explore all posts
+						<ArrowRight className="ml-2 size-4" />
+					</Button>
+				</div>
+				<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8">
+					{posts.map((post) => (
+						<a
+							key={post.id}
+							href={post.href}
+							className="flex flex-col overflow-clip rounded-xl border border-border"
+						>
+							<div>
+								<img
+									src={post.image}
+									alt={post.title}
+									className="aspect-[16/9] h-full w-full object-cover object-center"
+								/>
+							</div>
+							<div className="px-6 py-8 md:px-8 md:py-10 lg:px-10 lg:py-12">
+								<h3 className="mb-3 text-lg font-semibold md:mb-4 md:text-xl lg:mb-6">
+									{post.title}
+								</h3>
+								<p className="mb-3 text-muted-foreground md:mb-4 lg:mb-6">
+									{post.summary}
+								</p>
+								<p className="flex items-center hover:underline">
+									Read more
+									<ArrowRight className="ml-2 size-4" />
+								</p>
+							</div>
+						</a>
+					))}
+				</div>
+			</div>
+		</section>
+	);
+};
+
+export default Blog;