till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-14 21:01:08 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

fix(landing): remove gaps, rounded corners, and heading from apps grid

Browse source 
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>
This commit is contained in:
Till JS 2026-03-28 21:11:53 +01:00
parent 9643c9bb3d
commit dbf7121a43
1 changed files with 14 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

46
apps/manacore/apps/landing/src/pages/apps/index.astro
View file

@ -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>