revamp stocks page

src/routes/stocks/+page.svelte

@@ -85,6 +85,14 @@
 						<div class="stock-currency">{stock.currency}</div>
 						<div class="stock-price">{formatCurrency(stock.price, stock.currency)}</div>
 					</div>
+					<a
+						class="view-button"
+						href="https://www.google.com/search?q={stock.code}+{stock.name}+stock"
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						View
+					</a>
 				</div>
 			{/each}
 		</div>
@@ -95,11 +103,13 @@
 
 <style>
     .filter-card {
-        margin: 1rem 0;
-        padding: 20px;
-        background-color: #fafafa;
-        border-radius: 12px;
-        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+        margin: 1.5rem auto;
+        padding: 1rem 1.5rem;
+        background: linear-gradient(to right, #f9f9f9, #ffffff);
+        border-radius: 1rem;
+        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
+        width: 90%;
+        max-width: none;
         display: flex;
         justify-content: center;
     }
@@ -107,94 +117,110 @@
     .input-field {
         width: 100%;
         max-width: 100%;
-        padding: 10px 15px;
+        padding: 0.75rem 1rem;
         font-size: 1rem;
-        border: 1px solid #ddd;
-        border-radius: 8px;
+        border: 1px solid #ccc;
+        border-radius: 0.75rem;
         outline: none;
-        transition: box-shadow 0.2s;
+        transition: border-color 0.2s, box-shadow 0.2s;
+        background-color: #fff;
     }
 
-    input[type='text']:focus {
-        border-color: #007bff;
+    .input-field:focus {
+        border-color: #4a90e2;
+        box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
     }
 
     .result {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
-        justify-content: center;
-        padding-bottom: 2rem;
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
+        gap: 1.5rem;
+        padding: 2rem;
     }
 
     .card {
-        background-color: #fafafa;
-        border: 1px solid #eee;
-        border-radius: 12px;
-        width: 275px;
-        height: 115px;
-        padding: 1rem;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
-        transition: transform 0.2s ease;
+				max-width: 275px;
+        background: #ffffff;
+        border-radius: 1rem;
+        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.05);
+        padding: 1.25rem;
+        transition: transform 0.3s ease, box-shadow 0.3s ease;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
+        border: 1px solid transparent;
     }
 
     .card:hover {
-        transform: translateY(-8px);
+        transform: translateY(-6px);
+        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
+        border-color: #eee;
     }
 
     .stock-info {
         display: flex;
         justify-content: space-between;
-        align-items: center;
-        margin-bottom: 10px;
+        align-items: flex-start;
+        border-bottom: 1px solid #f0f0f0;
+        padding-bottom: 0.75rem;
     }
 
     .stock-code {
-        font-size: 1.5rem;
-        font-weight: bold;
-        color: #333;
+        font-size: 1.4rem;
+        font-weight: 700;
+        color: #2c3e50;
     }
 
     .stock-name {
-        font-size: 1.1rem;
-        color: #555;
+        font-size: 1rem;
+        color: #7f8c8d;
         text-align: right;
-    }
-
-    .stock-info:after {
-        content: '';
-        display: block;
-        width: 100%;
-        height: 1px;
-        background-color: #ddd;
-        margin-top: 10px;
+        max-width: 60%;
+        line-height: 1.2;
     }
 
     .stock-details {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        margin-top: 15px;
+        margin-top: 0.75rem;
     }
 
     .stock-currency {
-        font-size: 1rem;
-        color: #888;
+        font-size: 0.9rem;
+        color: #999;
     }
 
     .stock-price {
-        font-size: 1.5rem;
+        font-size: 1.3rem;
         font-weight: bold;
-        color: #27ae60;
+        color: #2ecc71;
+    }
+
+    .view-button {
+        margin-top: 1rem;
+        align-self: flex-end;
+        padding: 0.5rem 1rem;
+        background-color: #3498db;
+        color: white;
+        font-size: 0.9rem;
+        border: none;
+        border-radius: 0.5rem;
+        cursor: pointer;
+        transition: background-color 0.2s ease;
+        text-decoration: none;
+        text-align: center;
+    }
+
+    .view-button:hover {
+        background-color: #2980b9;
     }
 
     p {
         text-align: center;
-        color: #999;
+        color: #aaa;
         font-size: 1rem;
         margin-top: 2rem;
     }
+
 </style>