improve cards

Author: HarshCasper

src/components/ApplicationsShowcase.astro

@@ -41,7 +41,7 @@ const applications = applicationsData.applications;
 
   :global(.search-container) {
     position: relative;
-    flex: 2;
+    flex: 1;
     min-width: 300px;
   }
 
@@ -89,7 +89,6 @@ const applications = applicationsData.applications;
     color: var(--sl-color-white);
     font-size: 0.875rem;
     min-width: 140px;
-    flex-shrink: 0;
   }
 
   :global(.filter-select:focus) {
@@ -115,7 +114,6 @@ const applications = applicationsData.applications;
     color: var(--sl-color-white);
     font-size: 0.875rem;
     min-width: 120px;
-    flex-shrink: 0;
   }
 
   :global(.clear-filters) {
@@ -239,18 +237,14 @@ const applications = applicationsData.applications;
   :global(.service-icon) {
     width: 1.75rem;
     height: 1.75rem;
-    padding: 0.25rem;
-    background: var(--sl-color-bg);
-    border: 1px solid var(--sl-color-gray-6);
-    border-radius: 0.25rem;
+    padding: 0.125rem;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.2s ease;
   }
 
   :global(.service-icon:hover) {
-    border-color: var(--sl-color-accent);
     transform: scale(1.1);
   }
 
@@ -273,20 +267,18 @@ const applications = applicationsData.applications;
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
-    color: var(--sl-color-accent);
+    color: white;
     text-decoration: none;
     font-weight: 500;
     font-size: 0.875rem;
     padding: 0.5rem 0.75rem;
-    border: 1px solid var(--sl-color-accent);
     border-radius: 0.375rem;
     transition: all 0.2s ease;
     white-space: nowrap;
   }
 
   :global(.card-link:hover) {
-    background: var(--sl-color-accent);
-    color: white;
+    color: var(--sl-color-accent);
   }
 
   /* No Results */

src/components/applications/ApplicationsShowcase.tsx

@@ -208,7 +208,7 @@ export const ApplicationsShowcase: React.FC<ApplicationsShowcaseProps> = ({
           onChange={(e) => e.target.value ? toggleFilter('services', e.target.value) : null}
           className="filter-select"
         >
-          <option value="">All Services</option>
+          <option value="">Services</option>
           {uniqueServices.map((service) => (
             <option key={service} value={service}>
               {services[service] || service}
@@ -221,7 +221,7 @@ export const ApplicationsShowcase: React.FC<ApplicationsShowcaseProps> = ({
           onChange={(e) => e.target.value ? toggleFilter('platforms', e.target.value) : null}
           className="filter-select"
         >
-          <option value="">All Languages</option>
+          <option value="">Languages</option>
           {uniquePlatforms.map((platform) => (
             <option key={platform} value={platform}>
               {platforms[platform] || platform}
@@ -234,7 +234,7 @@ export const ApplicationsShowcase: React.FC<ApplicationsShowcaseProps> = ({
           onChange={(e) => e.target.value ? toggleFilter('deployments', e.target.value) : null}
           className="filter-select"
         >
-          <option value="">All Deployment</option>
+          <option value="">Deployment</option>
           {uniqueDeployments.map((deployment) => (
             <option key={deployment} value={deployment}>
               {deployments[deployment] || deployment}
@@ -247,7 +247,7 @@ export const ApplicationsShowcase: React.FC<ApplicationsShowcaseProps> = ({
           onChange={(e) => e.target.value ? toggleFilter('complexities', e.target.value) : null}
           className="filter-select"
         >
-          <option value="">All Complexity</option>
+          <option value="">Complexity</option>
           {uniqueComplexities.map((complexity) => (
             <option key={complexity} value={complexity}>
               {complexities.data[complexity] || complexity}