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/features.tsx

@@ -0,0 +1,79 @@
+import { ArrowRight } from "lucide-react";
+
+const Features: React.FC<
+	React.PropsWithChildren<{
+		title: string;
+		description: string;
+		cta: string;
+	}>
+> = ({ title, description, cta, children }) => {
+	return (
+		<section className="lg:md:py-24 sm:py-12 container self-center">
+			<div className="flex flex-col gap-16">
+				<div className="lg:max-w-sm">
+					<h2 className="mb-3 text-xl font-semibold md:mb-4 md:text-4xl lg:mb-6">
+						{title}
+					</h2>
+					<p className="mb-8 text-muted-foreground lg:text-lg">
+						{description}
+					</p>
+					<a
+						href="#"
+						className="group flex items-center text-xs font-medium md:text-base lg:text-lg"
+					>
+						{cta}
+						<ArrowRight className="ml-2 size-4 transition-transform group-hover:translate-x-1" />
+					</a>
+				</div>
+				<div className="grid gap-6 md:grid-cols-2 lg:gap-8">
+					{children}
+				</div>
+			</div>
+		</section>
+	);
+};
+
+export default Features;
+
+export const FeatureItem: React.FC<
+	React.PropsWithChildren<{
+		title: string;
+		image: string;
+		position: "left" | "right";
+	}>
+> = ({ title, children, image, position }) => {
+	const _image = () => (
+		<div className="md:min-h-[18rem] lg:min-h-[24rem] xl:min-h-[28rem]">
+			<img
+				src={image}
+				alt={title}
+				className="aspect-[16/9] h-full w-full object-cover object-center"
+			/>
+		</div>
+	);
+	const _content = () => (
+		<div className="flex flex-col justify-center 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-2xl lg:mb-6">
+				{title}
+			</h3>
+			<div className="text-muted-foreground lg:text-lg">{children}</div>
+		</div>
+	);
+	return (
+		<div
+			className={`flex ${position === "left" ? "flex-col" : "flex-col-reverse"} container self-center overflow-clip rounded-xl border border-border md:col-span-2 md:grid md:grid-cols-2 md:gap-6 lg:gap-8`}
+		>
+			{position === "left" ? (
+				<>
+					<_image />
+					<_content />
+				</>
+			) : (
+				<>
+					<_content />
+					<_image />
+				</>
+			)}
+		</div>
+	);
+};