feat(home): add technology stack section

components/home-hero.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import type { ReactNode } from "react";
 import { Icon } from "@iconify/react";
 import { useLocale, useTranslations } from "next-intl";
 import { useRouter } from "@/i18n/routing";
@@ -10,10 +11,11 @@ import {
   TextEffect,
   Typography,
 } from "poyraz-ui/atoms";
-import { NewsCard } from "poyraz-ui/molecules";
 import { getResumeHref } from "@/lib/links";
+import { HomeNewsCard } from "@/components/home-news-card";
 
 type HomeHeroProps = {
+  children?: ReactNode;
   news: {
     id: string;
     category: string;
@@ -24,7 +26,7 @@ type HomeHeroProps = {
   }[];
 };
 
-export function HomeHero({ news }: HomeHeroProps) {
+export function HomeHero({ children, news }: HomeHeroProps) {
   const t = useTranslations("Home");
   const locale = useLocale();
   const router = useRouter();
@@ -89,6 +91,8 @@ export function HomeHero({ news }: HomeHeroProps) {
 
       </div>
 
+      {children}
+
       <section className="space-y-3 pt-12 md:pt-14">
         <div className="flex items-center justify-between gap-4">
           <Typography
@@ -116,15 +120,15 @@ export function HomeHero({ news }: HomeHeroProps) {
 
         <div className="relative overflow-hidden py-1">
           <div className="flex w-max items-stretch gap-3">
-            {news.map((item) => (
-              <NewsCard
+            {news.map((item, index) => (
+              <HomeNewsCard
                 key={item.id}
-                className="w-72 shrink-0 rounded-sm border-border"
                 category={item.category}
                 title={item.title}
                 date={item.date}
                 image={item.image}
                 href={item.href}
+                priority={index === 0}
               />
             ))}
           </div>

components/home-news-card.tsx

@@ -0,0 +1,52 @@
+import Image from "next/image";
+import { Badge, Card } from "poyraz-ui/atoms";
+import { Link } from "@/i18n/routing";
+
+type HomeNewsCardProps = {
+  category: string;
+  title: string;
+  date: string;
+  image: string;
+  href: string;
+  priority?: boolean;
+};
+
+export function HomeNewsCard({
+  category,
+  title,
+  date,
+  image,
+  href,
+  priority = false,
+}: HomeNewsCardProps) {
+  return (
+    <Link href={href} className="block w-72 shrink-0 text-inherit no-underline">
+      <Card
+        variant="interactive"
+        className="group h-fit self-start overflow-hidden rounded-sm border-border"
+      >
+        <div className="flex min-h-28">
+          <div className="relative w-28 shrink-0 overflow-hidden border-r border-border">
+            <Image
+              src={image}
+              alt=""
+              fill
+              sizes="112px"
+              preload={priority}
+              className="object-cover transition-transform duration-300 group-hover:scale-105"
+            />
+          </div>
+          <div className="flex min-w-0 flex-col justify-center gap-2 p-4">
+            <Badge size="sm" variant="outline">
+              {category}
+            </Badge>
+            <h3 className="line-clamp-2 text-sm font-semibold leading-snug">
+              {title}
+            </h3>
+            <span className="text-xs text-muted-foreground">{date}</span>
+          </div>
+        </div>
+      </Card>
+    </Link>
+  );
+}

components/home-technology-stack.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { Icon } from "@iconify/react";
+import { useLocale, useTranslations } from "next-intl";
+import { Badge, Typography } from "poyraz-ui/atoms";
+import { TECHNOLOGY_STACK } from "@/data/technology-stack";
+import { getLocalizedValue } from "@/lib/locale";
+
+export function HomeTechnologyStack() {
+  const t = useTranslations("Home");
+  const locale = useLocale();
+
+  return (
+    <section
+      className="space-y-4 pb-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="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>
+
+            <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>
+    </section>
+  );
+}