From dbf7121a43d3efdd7161fdbe06069bc9109705ba Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Sat, 28 Mar 2026 21:11:53 +0100
Subject: [PATCH] fix(landing): remove gaps, rounded corners, and heading from
 apps grid

Clean brick layout: no spacing between cells, square corners, no title/subtitle.
Just the grid directly after navbar.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../apps/landing/src/pages/apps/index.astro   | 46 ++++++-------------
 1 file changed, 14 insertions(+), 32 deletions(-)

diff --git a/apps/manacore/apps/landing/src/pages/apps/index.astro b/apps/manacore/apps/landing/src/pages/apps/index.astro
index 484ab8cd8..33680c8a5 100644
--- a/apps/manacore/apps/landing/src/pages/apps/index.astro
+++ b/apps/manacore/apps/landing/src/pages/apps/index.astro
@@ -2,9 +2,6 @@
 import Layout from '../../layouts/Layout.astro';
 import Navbar from '../../components/navigation/Navbar.astro';
 import Footer from '../../components/navigation/Footer.astro';
-import Container from '../../components/layout/Container.astro';
-import Heading from '../../components/typography/Heading.astro';
-import Text from '../../components/typography/Text.astro';
 
 const apps = [
   // AI-Powered
@@ -45,29 +42,20 @@ const apps = [
   <div class="min-h-screen bg-white dark:bg-gray-900">
     <Navbar />
 
-    <Container class="py-12 md:py-16">
-      <div class="text-center mb-10">
-        <Heading as="h1" size="2" class="mb-3 text-center">Alle Apps</Heading>
-        <Text size="lg" class="text-gray-600 dark:text-gray-400 text-center">
-          Ein Account, {apps.length} Apps.
-        </Text>
-      </div>
-
-      <div class="app-grid">
-        {apps.map((app) => (
-          <a
-            href={app.url}
-            target="_blank"
-            rel="noopener noreferrer"
-            class="group flex flex-col items-center text-center rounded-2xl border border-gray-200 dark:border-gray-700 p-5 transition-all duration-200 hover:border-mana-blue/50 hover:shadow-lg hover:-translate-y-0.5"
-          >
-            <div class="text-4xl mb-2">{app.emoji}</div>
-            <span class="font-semibold text-sm text-gray-900 dark:text-gray-100 mb-1">{app.name}</span>
-            <span class="text-xs text-gray-500 dark:text-gray-400">{app.tagline}</span>
-          </a>
-        ))}
-      </div>
-    </Container>
+    <div class="app-grid">
+      {apps.map((app) => (
+        <a
+          href={app.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="group flex flex-col items-center justify-center text-center border border-gray-200 dark:border-gray-700 p-5 transition-all duration-200 hover:bg-gray-50 dark:hover:bg-gray-800"
+        >
+          <div class="text-4xl mb-2">{app.emoji}</div>
+          <span class="font-semibold text-sm text-gray-900 dark:text-gray-100 mb-1">{app.name}</span>
+          <span class="text-xs text-gray-500 dark:text-gray-400">{app.tagline}</span>
+        </a>
+      ))}
+    </div>
 
     <Footer />
   </div>
@@ -76,36 +64,30 @@ const apps = [
 <style>
   .app-grid {
     display: grid;
-    gap: 0.75rem;
     grid-template-columns: repeat(2, 1fr);
   }
 
-  /* Tablet */
   @media (min-width: 640px) {
     .app-grid {
       grid-template-columns: repeat(3, 1fr);
     }
   }
 
-  /* Small desktop */
   @media (min-width: 768px) {
     .app-grid {
       grid-template-columns: repeat(4, 1fr);
     }
   }
 
-  /* Desktop */
   @media (min-width: 1024px) {
     .app-grid {
       grid-template-columns: repeat(5, 1fr);
     }
   }
 
-  /* Large desktop */
   @media (min-width: 1280px) {
     .app-grid {
       grid-template-columns: repeat(6, 1fr);
-      gap: 1rem;
     }
   }
 </style>