From 87f57a85e1362955e21f425ead144114912b29fe Mon Sep 17 00:00:00 2001
From: yusufipk <50673822-yusufipk@users.noreply.replit.com>
Date: Wed, 17 Dec 2025 14:21:55 +0000
Subject: [PATCH] Add placeholder images for desktop environments to the
 application

Adds an `image` field to the `desktopEnvironments` in `distros.json` and updates the `DECard` component to display these images, falling back to a default icon if an image is not found.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: e522d728-b28a-437f-b576-83935afe7ea0
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: ad671a81-adaf-4a94-80c6-c25afcaf1677
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/55e426a8-5a2b-421b-8bd4-30481ae0063b/e522d728-b28a-437f-b576-83935afe7ea0/LmuYLyP
Replit-Helium-Checkpoint-Created: true
---
 client/src/components/DECard.tsx | 42 ++++++++++++++++++++++++--------
 client/src/data/distros.json     | 36 ++++++++++++++++++---------
 2 files changed, 56 insertions(+), 22 deletions(-)

diff --git a/client/src/components/DECard.tsx b/client/src/components/DECard.tsx
index 8093c68..07afa99 100644
--- a/client/src/components/DECard.tsx
+++ b/client/src/components/DECard.tsx
@@ -10,11 +10,14 @@ interface DECardProps {
     resourceUsage: string;
     customization: string;
     colorPalette: string[];
+    image?: string;
   };
   onSwipe: (direction: 'left' | 'right' | 'super') => void;
   isTop: boolean;
 }
 
+const deImages: Record<string, string> = {};
+
 const styleIcons: Record<string, typeof Monitor> = {
   'modern': Settings,
   'minimalist': Feather,
@@ -113,16 +116,35 @@ export default function DECard({ de, onSwipe, isTop }: DECardProps) {
           GEÇ
         </motion.div>
 
-        <div className="relative z-10 flex flex-col items-center justify-center p-12 text-center">
-          <div 
-            className="mb-6 flex h-24 w-24 items-center justify-center rounded-2xl"
-            style={{
-              background: `linear-gradient(135deg, ${primaryColor}, ${secondaryColor})`,
-              boxShadow: `0 10px 40px ${primaryColor}50`,
-            }}
-          >
-            <StyleIcon className="h-12 w-12 text-white" />
-          </div>
+        <div className="relative z-10 flex flex-col items-center justify-center p-8 text-center">
+          {de.image ? (
+            <div 
+              className="mb-6 w-full max-w-lg h-48 rounded-xl overflow-hidden"
+              style={{
+                boxShadow: `0 10px 40px ${primaryColor}50`,
+              }}
+            >
+              <img 
+                src={`/de_screenshots/${de.image}`}
+                alt={de.name}
+                className="w-full h-full object-cover"
+                onError={(e) => {
+                  e.currentTarget.style.display = 'none';
+                  e.currentTarget.parentElement!.style.display = 'none';
+                }}
+              />
+            </div>
+          ) : (
+            <div 
+              className="mb-6 flex h-24 w-24 items-center justify-center rounded-2xl"
+              style={{
+                background: `linear-gradient(135deg, ${primaryColor}, ${secondaryColor})`,
+                boxShadow: `0 10px 40px ${primaryColor}50`,
+              }}
+            >
+              <StyleIcon className="h-12 w-12 text-white" />
+            </div>
+          )}
 
           <h2 
             className="mb-3 font-['Space_Grotesk'] text-4xl font-bold"
diff --git a/client/src/data/distros.json b/client/src/data/distros.json
index 4a6e12e..9b82b9b 100644
--- a/client/src/data/distros.json
+++ b/client/src/data/distros.json
@@ -636,7 +636,8 @@
       "style": "modern",
       "resourceUsage": "medium-high",
       "customization": "extreme",
-      "colorPalette": ["#1D99F3", "#3DAEE9", "#0D5A8F"]
+      "colorPalette": ["#1D99F3", "#3DAEE9", "#0D5A8F"],
+      "image": "kde.png"
     },
     {
       "id": "gnome",
@@ -645,7 +646,8 @@
       "style": "minimalist",
       "resourceUsage": "medium-high",
       "customization": "limited",
-      "colorPalette": ["#4A86CF", "#3584E4", "#1C71D8"]
+      "colorPalette": ["#4A86CF", "#3584E4", "#1C71D8"],
+      "image": "gnome.png"
     },
     {
       "id": "xfce",
@@ -654,7 +656,8 @@
       "style": "traditional",
       "resourceUsage": "low",
       "customization": "moderate",
-      "colorPalette": ["#2EB8E6", "#00AAD4", "#007EA8"]
+      "colorPalette": ["#2EB8E6", "#00AAD4", "#007EA8"],
+      "image": "xfce.png"
     },
     {
       "id": "cinnamon",
@@ -663,7 +666,8 @@
       "style": "traditional",
       "resourceUsage": "medium",
       "customization": "good",
-      "colorPalette": ["#87CF3E", "#6BBD2B", "#4E9A1A"]
+      "colorPalette": ["#87CF3E", "#6BBD2B", "#4E9A1A"],
+      "image": "cinnamon.png"
     },
     {
       "id": "mate",
@@ -672,7 +676,8 @@
       "style": "traditional",
       "resourceUsage": "low-medium",
       "customization": "good",
-      "colorPalette": ["#6CAD54", "#4E8A3A", "#356425"]
+      "colorPalette": ["#6CAD54", "#4E8A3A", "#356425"],
+      "image": "mate.png"
     },
     {
       "id": "lxqt",
@@ -681,7 +686,8 @@
       "style": "minimal",
       "resourceUsage": "very-low",
       "customization": "moderate",
-      "colorPalette": ["#0099CC", "#0077AA", "#005588"]
+      "colorPalette": ["#0099CC", "#0077AA", "#005588"],
+      "image": "lxqt.png"
     },
     {
       "id": "budgie",
@@ -690,7 +696,8 @@
       "style": "modern",
       "resourceUsage": "medium",
       "customization": "moderate",
-      "colorPalette": ["#6BCA81", "#4CAF50", "#388E3C"]
+      "colorPalette": ["#6BCA81", "#4CAF50", "#388E3C"],
+      "image": "budgie.png"
     },
     {
       "id": "pantheon",
@@ -699,7 +706,8 @@
       "style": "mac-like",
       "resourceUsage": "medium",
       "customization": "very-limited",
-      "colorPalette": ["#64BAFF", "#3689E6", "#0D52BF"]
+      "colorPalette": ["#64BAFF", "#3689E6", "#0D52BF"],
+      "image": "pantheon.png"
     },
     {
       "id": "cosmic",
@@ -708,7 +716,8 @@
       "style": "modern",
       "resourceUsage": "medium",
       "customization": "good",
-      "colorPalette": ["#FAA41A", "#48B9C7", "#574F4A"]
+      "colorPalette": ["#FAA41A", "#48B9C7", "#574F4A"],
+      "image": "cosmic.png"
     },
     {
       "id": "dde",
@@ -717,7 +726,8 @@
       "style": "beautiful",
       "resourceUsage": "medium-high",
       "customization": "moderate",
-      "colorPalette": ["#0082FC", "#006DD9", "#0052A3"]
+      "colorPalette": ["#0082FC", "#006DD9", "#0052A3"],
+      "image": "dde.png"
     },
     {
       "id": "i3",
@@ -726,7 +736,8 @@
       "style": "minimal-tiling",
       "resourceUsage": "very-low",
       "customization": "extreme",
-      "colorPalette": ["#285577", "#1C3D5A", "#122A40"]
+      "colorPalette": ["#285577", "#1C3D5A", "#122A40"],
+      "image": "i3.png"
     },
     {
       "id": "hyprland",
@@ -735,7 +746,8 @@
       "style": "minimal-tiling",
       "resourceUsage": "low",
       "customization": "extreme",
-      "colorPalette": ["#00D4AA", "#00B894", "#009874"]
+      "colorPalette": ["#00D4AA", "#00B894", "#009874"],
+      "image": "hyprland.png"
     }
   ],
   "criticalQuestions": [