From 296f6b4d60361b05163a342eb7f16385620193dd Mon Sep 17 00:00:00 2001
From: Sonika <kumari.sonika@seryfertsoft.com>
Date: Mon, 15 Apr 2024 19:20:30 +0530
Subject: [PATCH] dashboard card style changes

---
 src/Dashboard.svelte | 27 +++++++++++++--------------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/Dashboard.svelte b/src/Dashboard.svelte
index a829f4d..20aa288 100644
--- a/src/Dashboard.svelte
+++ b/src/Dashboard.svelte
@@ -1,25 +1,21 @@
 <script>
     import { onMount } from 'svelte';
-
-    let data = []; // Initialize an empty array to store the dummy data
-
+    let data = [];
     onMount(() => {
-        // Define dummy data
         data = [
-            { id: 1, title: 'Card 1', description: 'Description for Card 1' },
-            { id: 2, title: 'Card 2', description: 'Description for Card 2' },
-            { id: 3, title: 'Card 3', description: 'Description for Card 3' },
-            { id: 4, title: 'Card 4', description: 'Description for Card 4' },
-            { id: 5, title: 'Card 5', description: 'Description for Card 5' },
-            { id: 6, title: 'Card 6', description: 'Description for Card 6' }
-            // Add more dummy data objects as needed
+            { id: 1, title: 'Pikachu', description: 'Description for Pikachu', backgroundImage: 'url(https://rukminim2.flixcart.com/image/850/1000/k12go7k0/poster/8/s/n/large-pikachu-pokemons-sticker-poster-anime-poster-pokemon-original-imafkq9thzgkch8f.jpeg?q=90&crop=false)' },
+            { id: 2, title: 'Bulbasaur', description: 'Description for Bulbasaur', backgroundImage: 'url(https://images2.alphacoders.com/135/1351279.png)' },
+            { id: 3, title: 'Charmander', description: 'Description for Charmander', backgroundImage: 'url(https://editors.dexerto.com/wp-content/uploads/2023/11/15/Pokemon-TCG-Charmander.jpg)' },
+            { id: 4, title: 'Jigly Puff', description: 'Description for Jigly Puff', backgroundImage: 'url(https://assetsio.gnwcdn.com/pokemon_go_jigglypuff_thumbnail.jpg?width=1600&height=900&fit=crop&quality=100&format=png&enable=upscale&auto=webp)' },
+            { id: 5, title: 'Staryou', description: 'Description for Staryou', backgroundImage: 'url(https://facts.net/wp-content/uploads/2023/07/17-facts-about-staryu-1689335160.jpg)' },
+            { id: 6, title: 'Togepi', description: 'Description for Togapy', backgroundImage: 'url(https://www.wallpaperflare.com/static/105/845/154/pok%C3%A9mon-togepi-pokemon-character-wallpaper.jpg)' }
         ];
     });
 </script>
 
 <div class="dashboard">
     {#each data as item}
-        <div class="card">
+        <div class="card" style="background-image: {item.backgroundImage}">
             <h2>{item.title}</h2>
             <p>{item.description}</p>
             <!-- You can add more elements here to display additional data -->
@@ -44,6 +40,8 @@
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         background-color: #ffffff;
         transition: transform 0.3s ease;
+        background-size: cover; /* Cover the entire card with the background image */
+        background-position: center;
     }
 
     .card:hover {
@@ -54,11 +52,12 @@
     h2 {
         font-size: 24px;
         margin-bottom: 10px;
-        color: #333333;
+        color: #000000;
     }
 
     p {
         font-size: 16px;
-        color: #666666;
+        font-weight: 700;
+        color: #000000;
     }
 </style>