From 6f37311e35619068ed028df36666b6ec4c5386ef Mon Sep 17 00:00:00 2001
From: Brian Rinaldi <brian.rinaldi@gmail.com>
Date: Tue, 1 Jul 2025 14:24:00 -0400
Subject: [PATCH 1/4] Fix top alignment of cards and badges

---
 src/components/applications/ApplicationsShowcase.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/applications/ApplicationsShowcase.tsx b/src/components/applications/ApplicationsShowcase.tsx
index 99ad0c0c..d89b7433 100644
--- a/src/components/applications/ApplicationsShowcase.tsx
+++ b/src/components/applications/ApplicationsShowcase.tsx
@@ -320,6 +320,7 @@ export const ApplicationsShowcase: React.FC<ApplicationsShowcaseProps> = ({
           border-radius: 0.75rem;
           overflow: hidden;
           transition: transform 0.2s ease, box-shadow 0.2s ease;
+          margin-top: 0;
         }
 
         .app-card:hover {
@@ -411,6 +412,7 @@ export const ApplicationsShowcase: React.FC<ApplicationsShowcaseProps> = ({
           align-items: center;
           justify-content: center;
           transition: all 0.2s ease;
+          margin-top: 0;
         }
 
         .service-icon:hover {

From 354d75cf4605bcc0a1a89f9924760228ced27d4a Mon Sep 17 00:00:00 2001
From: Brian Rinaldi <brian.rinaldi@gmail.com>
Date: Tue, 1 Jul 2025 14:46:20 -0400
Subject: [PATCH 2/4] Fix search alignment

---
 .../applications/ApplicationsShowcase.tsx     | 195 ++++++++++--------
 1 file changed, 105 insertions(+), 90 deletions(-)

diff --git a/src/components/applications/ApplicationsShowcase.tsx b/src/components/applications/ApplicationsShowcase.tsx
index d89b7433..54ef32af 100644
--- a/src/components/applications/ApplicationsShowcase.tsx
+++ b/src/components/applications/ApplicationsShowcase.tsx
@@ -197,15 +197,23 @@ export const ApplicationsShowcase: React.FC<ApplicationsShowcaseProps> = ({
 
         /* Top Bar */
         .top-bar {
-          display: flex;
-          gap: 1rem;
-          align-items: center;
           margin-bottom: 1.5rem;
           padding: 1rem;
           background: var(--sl-color-bg-sidebar);
           border: 1px solid var(--sl-color-gray-6);
           border-radius: 0.5rem;
+        }
+
+        .top-bar-row {
+          display: flex;
+          gap: 1rem;
+          align-items: flex-start;
           flex-wrap: wrap;
+          margin-bottom: 1rem;
+        }
+
+        .top-bar-row:last-child {
+          margin-bottom: 0;
         }
 
         .search-container {
@@ -222,6 +230,7 @@ export const ApplicationsShowcase: React.FC<ApplicationsShowcaseProps> = ({
           background: var(--sl-color-bg);
           color: var(--sl-color-white);
           font-size: 0.875rem;
+          margin-top: 0;
         }
 
         .search-input:focus {
@@ -258,6 +267,7 @@ export const ApplicationsShowcase: React.FC<ApplicationsShowcaseProps> = ({
           color: var(--sl-color-white);
           font-size: 0.875rem;
           min-width: 140px;
+          margin-top: 0;
         }
 
         .filter-select:focus {
@@ -273,6 +283,7 @@ export const ApplicationsShowcase: React.FC<ApplicationsShowcaseProps> = ({
           color: var(--sl-color-white);
           cursor: pointer;
           white-space: nowrap;
+          margin-top: 0.375rem;
         }
 
         .sort-select {
@@ -488,7 +499,7 @@ export const ApplicationsShowcase: React.FC<ApplicationsShowcaseProps> = ({
             padding: 0 0.75rem;
           }
 
-          .top-bar {
+          .top-bar-row {
             flex-direction: column;
             align-items: stretch;
           }
@@ -521,96 +532,100 @@ export const ApplicationsShowcase: React.FC<ApplicationsShowcaseProps> = ({
       
       <div className="applications-showcase">
         <div className="top-bar">
-          <div className="search-container">
-            <input
-              type="text"
-              placeholder="Search applications..."
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              className="search-input"
-            />
-            {searchTerm && (
-              <button onClick={() => setSearchTerm('')} className="search-clear">
-                ×
+          <div className="top-bar-row">
+            <div className="search-container">
+              <input
+                type="text"
+                placeholder="Search applications..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="search-input"
+              />
+              {searchTerm && (
+                <button onClick={() => setSearchTerm('')} className="search-clear">
+                  ×
+                </button>
+              )}
+            </div>
+            
+            <select 
+              value={filters.services[0] || ''} 
+              onChange={(e) => e.target.value ? toggleFilter('services', e.target.value) : null}
+              className="filter-select"
+            >
+              <option value="">Services</option>
+              {uniqueServices.map((service) => (
+                <option key={service} value={service}>
+                  {services[service] || service}
+                </option>
+              ))}
+            </select>
+
+            <select 
+              value={filters.platforms[0] || ''} 
+              onChange={(e) => e.target.value ? toggleFilter('platforms', e.target.value) : null}
+              className="filter-select"
+            >
+              <option value="">Languages</option>
+              {uniquePlatforms.map((platform) => (
+                <option key={platform} value={platform}>
+                  {platforms[platform] || platform}
+                </option>
+              ))}
+            </select>
+
+            <select 
+              value={filters.deployments[0] || ''} 
+              onChange={(e) => e.target.value ? toggleFilter('deployments', e.target.value) : null}
+              className="filter-select"
+            >
+              <option value="">Deployment</option>
+              {uniqueDeployments.map((deployment) => (
+                <option key={deployment} value={deployment}>
+                  {deployments[deployment] || deployment}
+                </option>
+              ))}
+            </select>
+
+            <select 
+              value={filters.complexities[0] || ''} 
+              onChange={(e) => e.target.value ? toggleFilter('complexities', e.target.value) : null}
+              className="filter-select"
+            >
+              <option value="">Complexity</option>
+              {uniqueComplexities.map((complexity) => (
+                <option key={complexity} value={complexity}>
+                  {complexities.data[complexity] || complexity}
+                </option>
+              ))}
+            </select>
+
+            <label className="pro-toggle">
+              <input
+                type="checkbox"
+                checked={filters.showProOnly}
+                onChange={(e) => setFilters(prev => ({ ...prev, showProOnly: e.target.checked }))}
+              />
+              Pro Only
+            </label>
+
+            {hasActiveFilters && (
+              <button onClick={clearAllFilters} className="clear-filters">
+                Clear
               </button>
             )}
           </div>
-          
-          <select 
-            value={filters.services[0] || ''} 
-            onChange={(e) => e.target.value ? toggleFilter('services', e.target.value) : null}
-            className="filter-select"
-          >
-            <option value="">Services</option>
-            {uniqueServices.map((service) => (
-              <option key={service} value={service}>
-                {services[service] || service}
-              </option>
-            ))}
-          </select>
-
-          <select 
-            value={filters.platforms[0] || ''} 
-            onChange={(e) => e.target.value ? toggleFilter('platforms', e.target.value) : null}
-            className="filter-select"
-          >
-            <option value="">Languages</option>
-            {uniquePlatforms.map((platform) => (
-              <option key={platform} value={platform}>
-                {platforms[platform] || platform}
-              </option>
-            ))}
-          </select>
 
-          <select 
-            value={filters.deployments[0] || ''} 
-            onChange={(e) => e.target.value ? toggleFilter('deployments', e.target.value) : null}
-            className="filter-select"
-          >
-            <option value="">Deployment</option>
-            {uniqueDeployments.map((deployment) => (
-              <option key={deployment} value={deployment}>
-                {deployments[deployment] || deployment}
-              </option>
-            ))}
-          </select>
-
-          <select 
-            value={filters.complexities[0] || ''} 
-            onChange={(e) => e.target.value ? toggleFilter('complexities', e.target.value) : null}
-            className="filter-select"
-          >
-            <option value="">Complexity</option>
-            {uniqueComplexities.map((complexity) => (
-              <option key={complexity} value={complexity}>
-                {complexities.data[complexity] || complexity}
-              </option>
-            ))}
-          </select>
-
-          <label className="pro-toggle">
-            <input
-              type="checkbox"
-              checked={filters.showProOnly}
-              onChange={(e) => setFilters(prev => ({ ...prev, showProOnly: e.target.checked }))}
-            />
-            Pro Only
-          </label>
-          
-          <select 
-            value={sortBy} 
-            onChange={(e) => setSortBy(e.target.value as 'title' | 'complexity')}
-            className="sort-select"
-          >
-            <option value="title">A-Z</option>
-            <option value="complexity">By Complexity</option>
-          </select>
-
-          {hasActiveFilters && (
-            <button onClick={clearAllFilters} className="clear-filters">
-              Clear
-            </button>
-          )}
+          <div className="top-bar-row">
+            <select 
+              value={sortBy} 
+              onChange={(e) => setSortBy(e.target.value as 'title' | 'complexity')}
+              className="sort-select"
+            >
+              <option value="title">A-Z</option>
+              <option value="complexity">By Complexity</option>
+            </select>
+          </div>
         </div>
 
         <div className="results-info">

From 33a18d7b2d567ed2f43d15c38ad8bbb75eaf51dd Mon Sep 17 00:00:00 2001
From: Brian Rinaldi <brian.rinaldi@gmail.com>
Date: Tue, 1 Jul 2025 14:56:45 -0400
Subject: [PATCH 3/4] Fix icon alignment and link color

---
 src/components/applications/ApplicationsShowcase.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/applications/ApplicationsShowcase.tsx b/src/components/applications/ApplicationsShowcase.tsx
index 54ef32af..e0bedea2 100644
--- a/src/components/applications/ApplicationsShowcase.tsx
+++ b/src/components/applications/ApplicationsShowcase.tsx
@@ -332,6 +332,9 @@ export const ApplicationsShowcase: React.FC<ApplicationsShowcaseProps> = ({
           overflow: hidden;
           transition: transform 0.2s ease, box-shadow 0.2s ease;
           margin-top: 0;
+          display: flex;
+          flex-direction: column;
+          height: 100%;
         }
 
         .app-card:hover {
@@ -383,6 +386,9 @@ export const ApplicationsShowcase: React.FC<ApplicationsShowcaseProps> = ({
 
         .card-content {
           padding: 1.25rem;
+          display: flex;
+          flex-direction: column;
+          flex: 1;
         }
 
         .card-title {
@@ -405,6 +411,7 @@ export const ApplicationsShowcase: React.FC<ApplicationsShowcaseProps> = ({
           justify-content: space-between;
           align-items: center;
           gap: 1rem;
+          margin-top: auto;
         }
 
         .service-icons {
@@ -449,7 +456,7 @@ export const ApplicationsShowcase: React.FC<ApplicationsShowcaseProps> = ({
           display: inline-flex;
           align-items: center;
           gap: 0.5rem;
-          color: white;
+          color: var(--sl-color-white);
           text-decoration: none;
           font-weight: 500;
           font-size: 0.875rem;

From c165e04d56953a0360398ae5bcb6a14732eae4bf Mon Sep 17 00:00:00 2001
From: Brian Rinaldi <brian.rinaldi@gmail.com>
Date: Tue, 1 Jul 2025 15:02:37 -0400
Subject: [PATCH 4/4] Update ApplicationsShowcase.tsx

---
 .../applications/ApplicationsShowcase.tsx     | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/components/applications/ApplicationsShowcase.tsx b/src/components/applications/ApplicationsShowcase.tsx
index e0bedea2..fe610784 100644
--- a/src/components/applications/ApplicationsShowcase.tsx
+++ b/src/components/applications/ApplicationsShowcase.tsx
@@ -37,7 +37,12 @@ const ApplicationCard: React.FC<{
   deployments: Record<string, string>;
 }> = ({ app, services, platforms, deployments }) => {
   return (
-    <div className="app-card">
+    <a 
+      href={app.url} 
+      target="_blank" 
+      rel="noopener noreferrer" 
+      className="app-card"
+    >
       <div className="card-image">
         <img src={app.teaser} alt={app.title} loading="lazy" />
         <div className="card-badges">
@@ -65,17 +70,12 @@ const ApplicationCard: React.FC<{
             )}
           </div>
           
-          <a 
-            href={app.url} 
-            target="_blank" 
-            rel="noopener noreferrer" 
-            className="card-link"
-          >
+          <span className="card-link">
             View Project →
-          </a>
+          </span>
         </div>
       </div>
-    </div>
+    </a>
   );
 };
 
@@ -335,6 +335,9 @@ export const ApplicationsShowcase: React.FC<ApplicationsShowcaseProps> = ({
           display: flex;
           flex-direction: column;
           height: 100%;
+          text-decoration: none;
+          color: inherit;
+          cursor: pointer;
         }
 
         .app-card:hover {
@@ -457,7 +460,6 @@ export const ApplicationsShowcase: React.FC<ApplicationsShowcaseProps> = ({
           align-items: center;
           gap: 0.5rem;
           color: var(--sl-color-white);
-          text-decoration: none;
           font-weight: 500;
           font-size: 0.875rem;
           padding: 0.5rem 0.75rem;
@@ -466,7 +468,7 @@ export const ApplicationsShowcase: React.FC<ApplicationsShowcaseProps> = ({
           white-space: nowrap;
         }
 
-        .card-link:hover {
+        .app-card:hover .card-link {
           color: var(--sl-color-accent);
         }