feat(projects): add OSTIM portals and stack popovers

components/home-projects-section.tsx

@@ -3,13 +3,14 @@
 import { Icon } from "@iconify/react";
 import { useLocale, useTranslations } from "next-intl";
 import { Button, ButtonIcon, ButtonLabel, Typography } from "poyraz-ui/atoms";
-import { ImageCard } from "poyraz-ui/molecules";
 import { useRouter } from "@/i18n/routing";
 import { WEB_APPS } from "@/data/projects";
 import { getLocalizedValue } from "@/lib/locale";
+import { ProjectCardWithPopover } from "@/components/project-card-with-popover";
 
 export function HomeProjectsSection() {
   const t = useTranslations("Home");
+  const tProjects = useTranslations("Projects");
   const locale = useLocale();
   const router = useRouter();
   const projects = WEB_APPS.slice(0, 5);
@@ -43,7 +44,7 @@ export function HomeProjectsSection() {
       <div className="relative overflow-hidden py-1">
         <div className="flex w-max items-stretch gap-2">
           {projects.map((project) => (
-            <ImageCard
+            <ProjectCardWithPopover
               key={project.id}
               image={project.image}
               title={project.title}
@@ -54,6 +55,10 @@ export function HomeProjectsSection() {
                   : undefined
               }
               href={project.href}
+              technologies={project.technologies}
+              architecture={getLocalizedValue(project.architecture, locale)}
+              technologiesLabel={tProjects("technologies")}
+              architectureLabel={tProjects("architecture")}
               className="aspect-square w-56 shrink-0 rounded-sm border-border md:w-[calc((100vw-8rem)/4)] md:max-w-56"
             />
           ))}

components/project-card-with-popover.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { Badge, Typography } from "poyraz-ui/atoms";
+import {
+  ImageCard,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "poyraz-ui/molecules";
+
+type ProjectCardWithPopoverProps = {
+  title: string;
+  description: string;
+  image: string;
+  badge?: string;
+  href?: string;
+  technologies: string[];
+  architecture: string;
+  technologiesLabel: string;
+  architectureLabel: string;
+  className?: string;
+};
+
+export function ProjectCardWithPopover({
+  title,
+  description,
+  image,
+  badge,
+  href,
+  technologies,
+  architecture,
+  technologiesLabel,
+  architectureLabel,
+  className,
+}: ProjectCardWithPopoverProps) {
+  const [open, setOpen] = useState(false);
+  const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const cancelClose = () => {
+    if (closeTimer.current) {
+      clearTimeout(closeTimer.current);
+      closeTimer.current = null;
+    }
+  };
+
+  const showPopover = () => {
+    cancelClose();
+    setOpen(true);
+  };
+
+  const scheduleClose = () => {
+    cancelClose();
+    closeTimer.current = setTimeout(() => setOpen(false), 120);
+  };
+
+  useEffect(() => {
+    return () => {
+      if (closeTimer.current) clearTimeout(closeTimer.current);
+    };
+  }, []);
+
+  const card = (
+    <ImageCard
+      image={image}
+      title={title}
+      description={description}
+      badge={badge}
+      className={className}
+    />
+  );
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        {href ? (
+          <a
+            href={href}
+            className="block text-inherit no-underline outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+            onPointerEnter={showPopover}
+            onPointerLeave={scheduleClose}
+            onFocus={showPopover}
+            onBlur={scheduleClose}
+          >
+            {card}
+          </a>
+        ) : (
+          <button
+            type="button"
+            className="block border-0 bg-transparent p-0 text-left text-inherit outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+            onPointerEnter={showPopover}
+            onPointerLeave={scheduleClose}
+            onFocus={showPopover}
+            onBlur={scheduleClose}
+          >
+            {card}
+          </button>
+        )}
+      </PopoverTrigger>
+
+      <PopoverContent
+        side="top"
+        align="center"
+        sideOffset={10}
+        radius="sm"
+        padding="sm"
+        className="w-80 max-w-[calc(100vw-1rem)]"
+        onPointerEnter={showPopover}
+        onPointerLeave={scheduleClose}
+        onOpenAutoFocus={(event) => event.preventDefault()}
+        onCloseAutoFocus={(event) => event.preventDefault()}
+      >
+        <div className="space-y-3">
+          <Typography variant="large" className="text-sm leading-tight">
+            {title}
+          </Typography>
+
+          <div className="space-y-1.5">
+            <Typography
+              variant="small"
+              className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground"
+            >
+              {technologiesLabel}
+            </Typography>
+            <div className="flex flex-wrap gap-1.5">
+              {technologies.map((technology) => (
+                <Badge key={technology} size="sm" variant="outline" className="rounded-sm">
+                  {technology}
+                </Badge>
+              ))}
+            </div>
+          </div>
+
+          <div className="space-y-1">
+            <Typography
+              variant="small"
+              className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground"
+            >
+              {architectureLabel}
+            </Typography>
+            <Typography variant="small" className="text-xs leading-relaxed text-muted-foreground">
+              {architecture}
+            </Typography>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

components/projects-content.tsx

@@ -9,8 +9,8 @@ import {
   Card,
   Typography,
 } from "poyraz-ui/atoms";
-import { ImageCard } from "poyraz-ui/molecules";
 import { StaggerContainer, StaggerItem } from "@/components/motion-wrapper";
+import { ProjectCardWithPopover } from "@/components/project-card-with-popover";
 import {
   EXTENSIONS,
   FIGMA_TEMPLATES,
@@ -64,6 +64,8 @@ type LocalizedProjectItem = {
   title: string;
   description: string;
   image: string;
+  technologies: string[];
+  architecture: string;
   badge?: string;
   href?: string;
 };
@@ -71,9 +73,13 @@ type LocalizedProjectItem = {
 function ProjectSection({
   title,
   items,
+  technologiesLabel,
+  architectureLabel,
 }: {
   title: string;
   items: LocalizedProjectItem[];
+  technologiesLabel: string;
+  architectureLabel: string;
 }) {
   return (
     <section className="space-y-3">
@@ -83,12 +89,16 @@ function ProjectSection({
       <StaggerContainer className="grid grid-cols-2 gap-2 lg:grid-cols-4">
         {items.map((item) => (
           <StaggerItem key={item.id}>
-            <ImageCard
+            <ProjectCardWithPopover
               image={item.image}
               title={item.title}
               description={item.description}
               badge={item.badge}
               href={item.href}
+              technologies={item.technologies}
+              architecture={item.architecture}
+              technologiesLabel={technologiesLabel}
+              architectureLabel={architectureLabel}
               className="aspect-square rounded-sm border-border"
             />
           </StaggerItem>
@@ -111,6 +121,7 @@ export async function ProjectsContent() {
     return items.map((item) => ({
       ...item,
       description: getLocalizedValue(item.description, locale),
+      architecture: getLocalizedValue(item.architecture, locale),
       badge: item.badge ? getLocalizedValue(item.badge, locale) : undefined,
     }));
   };
@@ -130,10 +141,30 @@ export async function ProjectsContent() {
         </div>
       </Card>
 
-      <ProjectSection title={t("sections.mobileApps")} items={localizeItems(MOBILE_APPS)} />
-      <ProjectSection title={t("sections.webApps")} items={localizeItems(WEB_APPS)} />
-      <ProjectSection title={t("sections.extensions")} items={localizeItems(EXTENSIONS)} />
-      <ProjectSection title={t("sections.figmaTemplates")} items={localizeItems(FIGMA_TEMPLATES)} />
+      <ProjectSection
+        title={t("sections.webApps")}
+        items={localizeItems(WEB_APPS)}
+        technologiesLabel={t("technologies")}
+        architectureLabel={t("architecture")}
+      />
+      <ProjectSection
+        title={t("sections.mobileApps")}
+        items={localizeItems(MOBILE_APPS)}
+        technologiesLabel={t("technologies")}
+        architectureLabel={t("architecture")}
+      />
+      <ProjectSection
+        title={t("sections.extensions")}
+        items={localizeItems(EXTENSIONS)}
+        technologiesLabel={t("technologies")}
+        architectureLabel={t("architecture")}
+      />
+      <ProjectSection
+        title={t("sections.figmaTemplates")}
+        items={localizeItems(FIGMA_TEMPLATES)}
+        technologiesLabel={t("technologies")}
+        architectureLabel={t("architecture")}
+      />
 
       <section className="space-y-3">
         <div className="flex flex-wrap items-center justify-between gap-3">