From 9d5f347ffb22054ccedfe55ac736989e367ef236 Mon Sep 17 00:00:00 2001
From: poyrazavsever <poyrazavsever@hotmail.com>
Date: Mon, 31 Aug 2026 20:08:04 +0300
Subject: [PATCH] perf(images): optimize cards and compact logo assets

---
 components/blog-content.tsx              |   2 +-
 components/home-projects-section.tsx     |   3 +-
 components/links-content.tsx             |   2 +-
 components/project-card-with-popover.tsx |  37 +++++++++++++-----
 components/reference-cards.tsx           |  47 ++++++++++++++++++-----
 public/logo/logo-96.webp                 | Bin 0 -> 2056 bytes
 6 files changed, 70 insertions(+), 21 deletions(-)
 create mode 100644 public/logo/logo-96.webp

diff --git a/components/blog-content.tsx b/components/blog-content.tsx
index e11334f..13968e3 100644
--- a/components/blog-content.tsx
+++ b/components/blog-content.tsx
@@ -156,7 +156,7 @@ export function BlogContent({ data, section = "blog" }: BlogContentProps) {
                   readTime={post.readTime}
                   href={post.href}
                   className="rounded-sm border-border [&_h3]:line-clamp-2 [&_h3]:min-h-[2.5rem] [&_p]:line-clamp-3"
-                  author={{ name: post.author, avatar: "/logo/logo.webp" }}
+                  author={{ name: post.author, avatar: "/logo/logo-96.webp" }}
                 />
               </StaggerItem>
             ))}
diff --git a/components/home-projects-section.tsx b/components/home-projects-section.tsx
index 45db64f..27d1d21 100644
--- a/components/home-projects-section.tsx
+++ b/components/home-projects-section.tsx
@@ -43,7 +43,7 @@ export function HomeProjectsSection() {
 
       <div className="relative overflow-hidden py-1">
         <div className="flex w-max items-stretch gap-2">
-          {projects.map((project) => (
+          {projects.map((project, index) => (
             <ProjectCardWithPopover
               key={project.id}
               image={project.image}
@@ -61,6 +61,7 @@ export function HomeProjectsSection() {
               architectureLabel={tProjects("architecture")}
               triggerClassName="w-56 shrink-0 md:w-[calc((100vw-8rem)/4)] md:max-w-56"
               className="aspect-square rounded-sm border-border"
+              priority={index === 0}
             />
           ))}
         </div>
diff --git a/components/links-content.tsx b/components/links-content.tsx
index 84928be..b399e58 100644
--- a/components/links-content.tsx
+++ b/components/links-content.tsx
@@ -131,7 +131,7 @@ export function LinksContent({
         <div className="flex flex-col gap-5 sm:flex-row sm:items-start sm:justify-between">
           <div className="flex min-w-0 items-start gap-4">
             <Avatar className="size-16 shrink-0 rounded-sm border border-border bg-background sm:size-20">
-              <AvatarImage src="/logo/logo.webp" alt="Poyraz Avsever" />
+              <AvatarImage src="/logo/logo-96.webp" alt="Poyraz Avsever" />
               <AvatarFallback className="rounded-sm bg-muted font-semibold">
                 PA
               </AvatarFallback>
diff --git a/components/project-card-with-popover.tsx b/components/project-card-with-popover.tsx
index 7b1a308..e13d28a 100644
--- a/components/project-card-with-popover.tsx
+++ b/components/project-card-with-popover.tsx
@@ -1,10 +1,10 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
+import Image from "next/image";
 import { Icon } from "@iconify/react";
-import { Badge, Typography } from "poyraz-ui/atoms";
+import { Badge, Card, Typography } from "poyraz-ui/atoms";
 import {
-  ImageCard,
   Popover,
   PopoverContent,
   PopoverTrigger,
@@ -25,6 +25,7 @@ type ProjectCardWithPopoverProps = {
   architectureLabel: string;
   className?: string;
   triggerClassName?: string;
+  priority?: boolean;
 };
 
 export function ProjectCardWithPopover({
@@ -41,6 +42,7 @@ export function ProjectCardWithPopover({
   architectureLabel,
   className,
   triggerClassName,
+  priority = false,
 }: ProjectCardWithPopoverProps) {
   const [open, setOpen] = useState(false);
   const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -69,13 +71,30 @@ export function ProjectCardWithPopover({
   }, []);
 
   const card = (
-    <ImageCard
-      image={image}
-      title={title}
-      description={description}
-      badge={badge}
-      className={className}
-    />
+    <Card
+      variant="interactive"
+      className={`group relative aspect-[4/3] overflow-hidden ${className ?? ""}`}
+    >
+      <Image
+        src={image}
+        alt=""
+        fill
+        sizes="(max-width: 767px) 224px, 224px"
+        preload={priority}
+        fetchPriority={priority ? "high" : "auto"}
+        className="object-cover transition-transform duration-500 ease-[var(--poyraz-motion-ease-out)] group-hover:scale-105"
+      />
+      <div className="absolute inset-0 bg-gradient-to-t from-overlay via-overlay/20 to-transparent transition-opacity group-hover:opacity-90" />
+      {badge ? (
+        <Badge className="absolute left-3 top-3 z-10">{badge}</Badge>
+      ) : null}
+      <div className="absolute inset-x-0 bottom-0 z-10 p-4 text-primary-foreground">
+        <h3 className="font-semibold leading-tight">{title}</h3>
+        {description ? (
+          <p className="mt-1 line-clamp-2 text-xs opacity-80">{description}</p>
+        ) : null}
+      </div>
+    </Card>
   );
   const triggerClasses = `block ${triggerClassName ?? ""} text-inherit outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2`;
 
diff --git a/components/reference-cards.tsx b/components/reference-cards.tsx
index 57e3350..5720a2d 100644
--- a/components/reference-cards.tsx
+++ b/components/reference-cards.tsx
@@ -1,5 +1,7 @@
 
-import { TestimonialCard } from "poyraz-ui/molecules";
+import Image from "next/image";
+import { Card, CardContent } from "poyraz-ui/atoms";
+import { StarRating } from "poyraz-ui/molecules";
 import { REFERENCES } from "@/data/references";
 import { useLocale } from "next-intl";
 import { getLocalizedValue } from "@/lib/locale";
@@ -27,14 +29,41 @@ export function ReferenceCards({
         const quoteText = getLocalizedValue(item.quote, locale);
 
         const card = (
-          <TestimonialCard
-            quote={quoteText}
-            author={item.author}
-            role={getLocalizedValue(item.role, locale)}
-            avatar={item.avatar}
-            rating={showRating ? item.rating : undefined}
-            className={`flex flex-col rounded-sm ${lineClamp ? "[&_blockquote]:line-clamp-4" : ""} ${hoverClassName} ${cardClassName || "w-70 shrink-0"}`}
-          />
+          <Card
+            className={`group flex h-full flex-col rounded-sm ${hoverClassName} ${cardClassName || "w-70 shrink-0"}`}
+          >
+            <CardContent className="flex h-full flex-1 flex-col p-5">
+              <span className="font-secondary text-4xl leading-none text-primary">
+                “
+              </span>
+              <blockquote
+                className={`mt-1 text-sm leading-relaxed text-secondary-foreground ${lineClamp ? "line-clamp-4" : ""}`}
+              >
+                {quoteText}
+              </blockquote>
+              {showRating && item.rating != null ? (
+                <StarRating rating={item.rating} className="mt-3" />
+              ) : null}
+              <div className="mt-auto flex items-center gap-3 border-t border-border pt-4">
+                <Image
+                  src={item.avatar}
+                  alt=""
+                  width={36}
+                  height={36}
+                  sizes="36px"
+                  className="size-9 rounded-full object-cover"
+                />
+                <div className="min-w-0">
+                  <div className="truncate text-sm font-semibold">
+                    {item.author}
+                  </div>
+                  <div className="truncate text-xs text-muted-foreground">
+                    {getLocalizedValue(item.role, locale)}
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
         );
 
         const href = item.documentHref || item.profileHref;
diff --git a/public/logo/logo-96.webp b/public/logo/logo-96.webp
new file mode 100644
index 0000000000000000000000000000000000000000..8ea7e89c091c5f1edae409050ba07552861aebf1
GIT binary patch
literal 2056
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

literal 0
HcmV?d00001