From 9ff81bd6de73b29e3d50949ab91859a75913dee8 Mon Sep 17 00:00:00 2001
From: yusufipk <50673822-yusufipk@users.noreply.replit.com>
Date: Wed, 17 Dec 2025 14:57:37 +0000
Subject: [PATCH] Enlarge desktop environment cards and improve screenshot
 visibility

Update DECard component to increase card width, screenshot area, and decrease button sizes for better visual hierarchy.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: c4fc7b07-53a2-4929-bc12-f392104bb085
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: c7ec94b8-8251-441b-8b3b-1a02fc187f46
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/55e426a8-5a2b-421b-8bd4-30481ae0063b/c4fc7b07-53a2-4929-bc12-f392104bb085/a2ci8g4
Replit-Helium-Checkpoint-Created: true
---
 client/src/components/DECard.tsx | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/client/src/components/DECard.tsx b/client/src/components/DECard.tsx
index 1f3d110..00403f6 100644
--- a/client/src/components/DECard.tsx
+++ b/client/src/components/DECard.tsx
@@ -78,7 +78,7 @@ export default function DECard({ de, onSwipe, isTop }: DECardProps) {
       data-testid={`de-card-${de.id}`}
     >
       <div 
-        className="relative w-[700px] max-w-[85vw] rounded-3xl overflow-hidden"
+        className="relative w-[800px] max-w-[90vw] rounded-3xl overflow-hidden"
         style={{
           background: `linear-gradient(135deg, ${primaryColor}20, ${secondaryColor}30)`,
         }}
@@ -114,9 +114,9 @@ export default function DECard({ de, onSwipe, isTop }: DECardProps) {
           GEÇ
         </motion.div>
 
-        <div className="relative z-10 flex flex-row items-stretch">
+        <div className="relative z-10 flex flex-row items-stretch min-h-[320px]">
           {de.screenshot && (
-            <div className="w-[320px] flex-shrink-0 overflow-hidden rounded-l-3xl">
+            <div className="w-[420px] flex-shrink-0 overflow-hidden rounded-l-3xl">
               <img
                 src={`/de_screenshots/${de.screenshot}`}
                 alt={`${de.name} screenshot`}
@@ -126,7 +126,7 @@ export default function DECard({ de, onSwipe, isTop }: DECardProps) {
                 }}
               />
               <div 
-                className="absolute inset-0 w-[320px]"
+                className="absolute inset-0 w-[420px]"
                 style={{
                   background: `linear-gradient(90deg, transparent 60%, ${primaryColor}40 100%)`,
                 }}
@@ -134,31 +134,31 @@ export default function DECard({ de, onSwipe, isTop }: DECardProps) {
             </div>
           )}
           
-          <div className="flex flex-1 flex-col items-center justify-center p-8 text-center">
+          <div className="flex flex-1 flex-col items-center justify-center p-6 text-center">
             <div 
-              className="mb-4 flex h-16 w-16 items-center justify-center rounded-xl"
+              className="mb-3 flex h-12 w-12 items-center justify-center rounded-lg"
               style={{
                 background: `linear-gradient(135deg, ${primaryColor}, ${secondaryColor})`,
-                boxShadow: `0 8px 30px ${primaryColor}50`,
+                boxShadow: `0 6px 20px ${primaryColor}50`,
               }}
             >
-              <StyleIcon className="h-8 w-8 text-white" />
+              <StyleIcon className="h-6 w-6 text-white" />
             </div>
 
             <h2 
-              className="mb-2 font-['Space_Grotesk'] text-3xl font-bold"
+              className="mb-1 font-['Space_Grotesk'] text-2xl font-bold"
               style={{ color: primaryColor }}
             >
               {de.name}
             </h2>
 
-            <p className="mb-6 max-w-sm text-base text-gray-300">
+            <p className="mb-4 max-w-xs text-sm text-gray-300">
               {de.description}
             </p>
 
-            <div className="flex flex-wrap justify-center gap-2">
+            <div className="flex flex-wrap justify-center gap-1.5">
               <span 
-                className="rounded-full px-3 py-1.5 text-xs font-medium"
+                className="rounded-full px-2.5 py-1 text-[10px] font-medium"
                 style={{ 
                   backgroundColor: `${primaryColor}30`,
                   color: primaryColor,
@@ -167,7 +167,7 @@ export default function DECard({ de, onSwipe, isTop }: DECardProps) {
                 {styleLabels[de.style] || de.style}
               </span>
               <span 
-                className="rounded-full px-3 py-1.5 text-xs font-medium"
+                className="rounded-full px-2.5 py-1 text-[10px] font-medium"
                 style={{ 
                   backgroundColor: `${secondaryColor}30`,
                   color: secondaryColor,
@@ -176,7 +176,7 @@ export default function DECard({ de, onSwipe, isTop }: DECardProps) {
                 {resourceLabels[de.resourceUsage] || de.resourceUsage}
               </span>
               <span 
-                className="rounded-full px-3 py-1.5 text-xs font-medium bg-white/10 text-gray-300"
+                className="rounded-full px-2.5 py-1 text-[10px] font-medium bg-white/10 text-gray-300"
               >
                 Özelleştirme: {de.customization}
               </span>