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

components/home-technology-stack.tsx

@@ -1,61 +1,62 @@
 "use client";
 
 import { Icon } from "@iconify/react";
-import { useLocale, useTranslations } from "next-intl";
-import { Badge, Typography } from "poyraz-ui/atoms";
+import { useTranslations } from "next-intl";
+import {
+  Button,
+  ButtonIcon,
+  ButtonLabel,
+  Typography,
+} from "poyraz-ui/atoms";
 import { TECHNOLOGY_STACK } from "@/data/technology-stack";
-import { getLocalizedValue } from "@/lib/locale";
+import { Link } from "@/i18n/routing";
+import { TechnologyBadge } from "@/components/technology-badge";
 
 export function HomeTechnologyStack() {
   const t = useTranslations("Home");
-  const locale = useLocale();
+  const technologies = TECHNOLOGY_STACK.flatMap((group) => group.items);
 
   return (
     <section
-      className="space-y-4 pb-4 pt-12 md:pt-14"
+      className="space-y-4 pt-12 md:pt-14"
       aria-labelledby="home-technology-stack-title"
     >
-      <Typography
-        id="home-technology-stack-title"
-        variant="h3"
-        component="h2"
-        className="tracking-[-0.035em]"
-      >
-        {t("technologiesTitle")}
-      </Typography>
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <Typography
+          id="home-technology-stack-title"
+          variant="h3"
+          component="h2"
+          className="tracking-[-0.035em]"
+        >
+          {t("technologiesTitle")}
+        </Typography>
 
-      <div className="grid gap-x-8 gap-y-6 md:grid-cols-2">
-        {TECHNOLOGY_STACK.map((group) => (
-          <div key={group.id} className="space-y-2.5 border-t border-border pt-3">
-            <Typography
-              variant="small"
-              component="h3"
-              className="text-xs font-medium uppercase tracking-[0.08em] text-muted-foreground"
-            >
-              {t(`technologyCategories.${group.id}`)}
-            </Typography>
+        <Button
+          asChild
+          size="sm"
+          radius="sm"
+          effect="swap"
+          swapTarget="both"
+        >
+          <Link href="/technologies">
+            <ButtonLabel>{t("allTechnologies")}</ButtonLabel>
+            <ButtonIcon>
+              <Icon icon="mdi:arrow-right" width={15} height={15} />
+            </ButtonIcon>
+          </Link>
+        </Button>
+      </div>
 
-            <div className="flex flex-wrap gap-2">
-              {group.items.map((technology) => (
-                <Badge
-                  key={technology.id}
-                  variant="secondary"
-                  radius="sm"
-                  className="gap-1.5 px-2.5 py-1 text-xs font-medium text-foreground"
-                >
-                  <Icon
-                    icon={technology.icon}
-                    width={14}
-                    height={14}
-                    aria-hidden="true"
-                    className="shrink-0"
-                  />
-                  <span>{getLocalizedValue(technology.label, locale)}</span>
-                </Badge>
-              ))}
-            </div>
-          </div>
-        ))}
+      <div className="relative max-h-14 overflow-hidden border-t border-border pt-3">
+        <div className="flex flex-wrap gap-2" aria-label={t("technologiesTitle")}>
+          {technologies.map((technology) => (
+            <TechnologyBadge key={technology.id} technology={technology} />
+          ))}
+        </div>
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-x-0 bottom-0 h-6 bg-gradient-to-t from-background via-background/85 to-transparent backdrop-blur-[2px]"
+        />
       </div>
     </section>
   );

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>
+  );
+}

components/technology-badge.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { Icon } from "@iconify/react";
+import { useLocale } from "next-intl";
+import { Badge } from "poyraz-ui/atoms";
+import type { TechnologyStackItem } from "@/data/technology-stack";
+import { getLocalizedValue } from "@/lib/locale";
+
+export function TechnologyBadge({
+  technology,
+}: {
+  technology: TechnologyStackItem;
+}) {
+  const locale = useLocale();
+
+  return (
+    <Badge
+      variant="secondary"
+      radius="sm"
+      className="shrink-0 gap-1.5 px-2.5 py-1 text-xs font-medium text-foreground"
+    >
+      <Icon
+        icon={technology.icon}
+        width={14}
+        height={14}
+        aria-hidden="true"
+        className="shrink-0"
+      />
+      <span>{getLocalizedValue(technology.label, locale)}</span>
+    </Badge>
+  );
+}