feat(technologies): add full stack directory and home preview

components/technologies-content.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { Card, Typography } from "poyraz-ui/atoms";
+import { TechnologyBadge } from "@/components/technology-badge";
+import { TECHNOLOGY_STACK } from "@/data/technology-stack";
+
+export function TechnologiesContent() {
+  const t = useTranslations("Technologies");
+
+  return (
+    <section className="flex h-full flex-col gap-10">
+      <header className="border-b border-border py-4 sm:py-5">
+        <Typography
+          variant="h2"
+          component="h1"
+          className="font-secondary text-2xl font-semibold leading-none tracking-[-0.045em] text-foreground"
+        >
+          {t("title")}
+        </Typography>
+        <Typography
+          variant="small"
+          className="mt-2 max-w-2xl text-xs leading-5 text-muted-foreground sm:text-sm"
+        >
+          {t("description")}
+        </Typography>
+      </header>
+
+      <div className="grid gap-3 md:grid-cols-2">
+        {TECHNOLOGY_STACK.map((group) => (
+          <Card
+            key={group.id}
+            role="region"
+            className="rounded-sm border-border p-4"
+            aria-labelledby={`technology-group-${group.id}`}
+          >
+            <Typography
+              id={`technology-group-${group.id}`}
+              variant="large"
+              component="h2"
+              className="text-sm font-semibold tracking-[-0.02em]"
+            >
+              {t(`categories.${group.id}`)}
+            </Typography>
+
+            <div className="mt-3 flex flex-wrap gap-2">
+              {group.items.map((technology) => (
+                <TechnologyBadge
+                  key={technology.id}
+                  technology={technology}
+                />
+              ))}
+            </div>
+          </Card>
+        ))}
+      </div>
+    </section>
+  );
+}