mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-16 13:19:39 +02:00
refactor(landing): simplify apps page to responsive grid with real app URLs
Replace bloated multi-section layout (Available/Beta/Coming Soon with gradients,
feature lists, mana usage info) with a clean brick grid of all 22 apps linking
directly to {app}.mana.how. Responsive: 2 cols mobile → 6 cols large desktop.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS
parent
2ce95d67c8
commit
353f284085
1 changed files with 95 additions and 286 deletions
|
|
@ -2,301 +2,110 @@
|
|||
import Layout from '../../layouts/Layout.astro';
|
||||
import Navbar from '../../components/navigation/Navbar.astro';
|
||||
import Footer from '../../components/navigation/Footer.astro';
|
||||
import Section from '../../components/content/Section.astro';
|
||||
import Container from '../../components/layout/Container.astro';
|
||||
import Grid from '../../components/layout/Grid.astro';
|
||||
import Card from '../../components/ui/Card.astro';
|
||||
import Button from '../../components/ui/Button.astro';
|
||||
import Heading from '../../components/typography/Heading.astro';
|
||||
import Text from '../../components/typography/Text.astro';
|
||||
import HeroSection from '../../components/content/HeroSection.astro';
|
||||
import { getCollection } from 'astro:content';
|
||||
import { Icon } from 'astro-icon/components';
|
||||
|
||||
const apps = await getCollection('apps');
|
||||
const germanApps = apps.filter(app => app.slug.endsWith('-de'));
|
||||
const availableApps = germanApps
|
||||
.filter(app => app.data.status === 'available')
|
||||
.sort((a, b) => a.data.order - b.data.order);
|
||||
const comingSoonApps = germanApps
|
||||
.filter(app => app.data.status === 'coming-soon')
|
||||
.sort((a, b) => a.data.order - b.data.order);
|
||||
const betaApps = germanApps
|
||||
.filter(app => app.data.status === 'beta')
|
||||
.sort((a, b) => a.data.order - b.data.order);
|
||||
const apps = [
|
||||
// AI-Powered
|
||||
{ name: 'ManaChat', emoji: '💬', tagline: 'KI Chat Assistent', url: 'https://chat.mana.how' },
|
||||
{ name: 'ManaPicture', emoji: '🎨', tagline: 'KI Bildgenerierung', url: 'https://picture.mana.how' },
|
||||
{ name: 'Presi', emoji: '📊', tagline: 'KI Präsentationen', url: 'https://presi.mana.how' },
|
||||
{ name: 'Questions', emoji: '🔍', tagline: 'KI Research Assistent', url: 'https://questions.mana.how' },
|
||||
{ name: 'Context', emoji: '📄', tagline: 'Dokument-Workspace', url: 'https://context.mana.how' },
|
||||
{ name: 'Playground', emoji: '🧪', tagline: 'LLM Playground', url: 'https://playground.mana.how' },
|
||||
|
||||
// Productivity
|
||||
{ name: 'ManaTodo', emoji: '✅', tagline: 'Aufgabenverwaltung', url: 'https://todo.mana.how' },
|
||||
{ name: 'ManaCalendar', emoji: '📅', tagline: 'Kalenderverwaltung', url: 'https://calendar.mana.how' },
|
||||
{ name: 'ManaContacts', emoji: '👥', tagline: 'Kontaktverwaltung', url: 'https://contacts.mana.how' },
|
||||
{ name: 'ManaDeck', emoji: '🎴', tagline: 'KI Karteikarten', url: 'https://manadeck.mana.how' },
|
||||
{ name: 'ManaStorage', emoji: '☁️', tagline: 'Cloud-Speicher', url: 'https://storage.mana.how' },
|
||||
{ name: 'Inventar', emoji: '📦', tagline: 'Inventarverwaltung', url: 'https://inventar.mana.how' },
|
||||
|
||||
// Creative & Media
|
||||
{ name: 'Mukke', emoji: '🎵', tagline: 'Musikproduktion', url: 'https://mukke.mana.how' },
|
||||
{ name: 'Photos', emoji: '📸', tagline: 'Fotoverwaltung', url: 'https://photos.mana.how' },
|
||||
|
||||
// Lifestyle & Utility
|
||||
{ name: 'ManaClock', emoji: '⏰', tagline: 'Uhren & Timer', url: 'https://clock.mana.how' },
|
||||
{ name: 'Zitare', emoji: '💡', tagline: 'Tägliche Inspiration', url: 'https://zitare.mana.how' },
|
||||
{ name: 'NutriPhi', emoji: '🥗', tagline: 'Ernährungs-Tracker', url: 'https://nutriphi.mana.how' },
|
||||
{ name: 'Planta', emoji: '🌱', tagline: 'Pflanzenpflege', url: 'https://planta.mana.how' },
|
||||
{ name: 'SkilltTree', emoji: '🌳', tagline: 'Skill-Tracking', url: 'https://skilltree.mana.how' },
|
||||
{ name: 'CityCorners', emoji: '🏙️', tagline: 'Stadtführer Konstanz', url: 'https://citycorners.mana.how' },
|
||||
{ name: 'Traces', emoji: '🗺️', tagline: 'Stadt-Erkundung', url: 'https://traces.mana.how' },
|
||||
|
||||
// Communication
|
||||
{ name: 'Matrix', emoji: '💬', tagline: 'Matrix Chat Client', url: 'https://matrix.mana.how' },
|
||||
];
|
||||
---
|
||||
|
||||
<Layout title="Apps mit Mana - Alle KI-Tools im Überblick">
|
||||
<div class="bg-gradient-to-b from-blue-50/30 via-white to-blue-50/30 dark:from-gray-900 dark:via-gray-900 dark:to-gray-900">
|
||||
<Navbar />
|
||||
|
||||
<!-- Hero Section -->
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 -bottom-32">
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-blue-50/50 to-transparent dark:from-gray-900 dark:to-transparent"></div>
|
||||
<div class="absolute top-0 right-0 w-96 h-96 bg-mana-blue/10 dark:bg-mana-blue/5 rounded-full blur-3xl"></div>
|
||||
<div class="absolute bottom-0 left-0 w-96 h-96 bg-blue-500/10 dark:bg-blue-500/5 rounded-full blur-3xl"></div>
|
||||
</div>
|
||||
|
||||
<HeroSection
|
||||
title="Apps & Tools mit Mana"
|
||||
subtitle="Ein Credit-System, unzählige Möglichkeiten. Entdecken Sie alle verfügbaren KI-Tools und Apps, die Sie mit Ihren Mana-Credits nutzen können."
|
||||
background="none"
|
||||
minHeight="small"
|
||||
spacing="small"
|
||||
containerClass="py-16 relative z-10"
|
||||
centered={true}
|
||||
debug={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Available Apps -->
|
||||
<Section spacing="xlarge" class="relative">
|
||||
<div class="absolute inset-0 -top-32 -bottom-32"></div>
|
||||
<div class="absolute top-0 left-1/4 w-96 h-96 bg-blue-500/15 dark:bg-blue-500/5 rounded-full blur-3xl"></div>
|
||||
<div class="absolute bottom-0 right-1/4 w-96 h-96 bg-mana-blue/15 dark:bg-mana-blue/5 rounded-full blur-3xl"></div>
|
||||
|
||||
<Container class="relative z-10">
|
||||
<div class="text-center mb-16">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-green-500/10 to-emerald-500/10 rounded-2xl mb-4">
|
||||
<Icon name="mdi:apps" class="w-8 h-8 text-green-600 dark:text-green-500" />
|
||||
</div>
|
||||
<Heading as="h2" size="2" class="mb-4 text-center">
|
||||
Verfügbare Apps
|
||||
</Heading>
|
||||
<Text size="xl" class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto text-center">
|
||||
Sofort einsatzbereit mit Ihren Mana-Credits
|
||||
<Layout title="Alle Apps - mana.how">
|
||||
<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>
|
||||
|
||||
<Grid cols={3} gap="large" class="max-w-6xl mx-auto">
|
||||
{availableApps.map((app) => (
|
||||
<div class="group relative h-full">
|
||||
<div class="absolute -inset-0.5 bg-gradient-to-r from-green-500/0 via-green-500/20 to-green-500/0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 blur"></div>
|
||||
<div class="relative h-full bg-white/90 backdrop-blur-sm dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700 group-hover:border-green-500/50 transition-all duration-300">
|
||||
<div class="flex items-start justify-between mb-6">
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-green-500/20 to-emerald-500/20 rounded-2xl blur-xl group-hover:from-green-500/30 group-hover:to-emerald-500/30 transition-all duration-300"></div>
|
||||
<div class="relative w-16 h-16 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-700 dark:to-gray-600 rounded-2xl flex items-center justify-center text-4xl">
|
||||
{app.data.icon}
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gradient-to-r from-green-500 to-emerald-500 text-white px-3 py-1 rounded-full text-sm font-medium shadow-sm">
|
||||
<Icon name="mdi:check-circle" class="w-3 h-3 inline mr-1" />
|
||||
Verfügbar
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Heading as="h3" size="5" class="mb-3 group-hover:text-green-600 transition-colors">{app.data.title}</Heading>
|
||||
<Text size="sm" class="text-gray-600 dark:text-gray-400 mb-4">
|
||||
{app.data.description}
|
||||
</Text>
|
||||
|
||||
<!-- Category Badge -->
|
||||
<div class="mb-4">
|
||||
<span class="inline-block bg-gradient-to-r from-blue-50 to-cyan-50 dark:from-gray-700 dark:to-gray-700 px-3 py-1 rounded-full text-xs font-medium border border-blue-100 dark:border-gray-600">
|
||||
{app.data.category}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Mana Usage Info -->
|
||||
<div class="bg-gradient-to-r from-mana-blue/5 to-blue-500/5 dark:from-gray-700 dark:to-gray-700 rounded-xl p-4 mb-6 border border-mana-blue/10 dark:border-gray-600">
|
||||
<Text size="sm" weight="semibold" class="mb-2">Mana-Verbrauch:</Text>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<Text size="sm" class="text-gray-600 dark:text-gray-400">Durchschnitt:</Text>
|
||||
<Text size="sm" weight="semibold" class="text-mana-blue">
|
||||
{app.data.manaUsage.average} Mana
|
||||
</Text>
|
||||
</div>
|
||||
<div class="text-center mt-2">
|
||||
<Text size="xs" class="text-gray-500 dark:text-gray-500">
|
||||
pro {app.data.manaUsage.unit === 'per-minute' ? 'Minute' :
|
||||
app.data.manaUsage.unit === 'per-request' ? 'Anfrage' :
|
||||
app.data.manaUsage.unit === 'per-image' ? 'Bild' :
|
||||
app.data.manaUsage.unit === 'per-token' ? 'Token' : 'Aktion'}
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Features -->
|
||||
<ul class="space-y-2 mb-8">
|
||||
{app.data.features.slice(0, 3).map((feature) => (
|
||||
<li class="flex items-start gap-3">
|
||||
<div class="flex-shrink-0 w-5 h-5 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center mt-0.5">
|
||||
<Icon name="mdi:check" class="w-3 h-3 text-green-600 dark:text-green-400" />
|
||||
</div>
|
||||
<Text size="sm" class="text-gray-700 dark:text-gray-300">{feature}</Text>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<!-- CTA with new style -->
|
||||
<a
|
||||
href={`/apps/${app.slug.replace('-de', '')}`}
|
||||
class="inline-flex items-center justify-center w-full px-6 py-3 rounded-lg font-medium transition-all duration-300 border-2 border-gray-300 dark:border-gray-600 hover:border-green-500 dark:hover:border-green-500 hover:bg-green-500/5"
|
||||
>
|
||||
<Icon name="mdi:arrow-right-circle" class="w-5 h-5 mr-2" />
|
||||
Details ansehen
|
||||
</a>
|
||||
</div>
|
||||
</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>
|
||||
))}
|
||||
</Grid>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<!-- Beta Apps -->
|
||||
{betaApps.length > 0 && (
|
||||
<Section spacing="xlarge" class="relative">
|
||||
<div class="absolute inset-0 -top-32 -bottom-32 bg-gradient-to-b from-transparent via-yellow-50/30 to-transparent dark:from-transparent dark:via-yellow-500/3 dark:to-transparent"></div>
|
||||
<div class="absolute top-1/3 right-0 w-[500px] h-[500px] bg-yellow-500/20 dark:bg-yellow-500/5 rounded-full blur-3xl"></div>
|
||||
<div class="absolute bottom-1/3 left-0 w-[500px] h-[500px] bg-orange-500/20 dark:bg-orange-500/5 rounded-full blur-3xl"></div>
|
||||
|
||||
<Container class="relative z-10">
|
||||
<div class="text-center mb-16">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-yellow-500/10 to-orange-500/10 rounded-2xl mb-4">
|
||||
<Icon name="mdi:flask" class="w-8 h-8 text-yellow-600 dark:text-yellow-500" />
|
||||
</div>
|
||||
<Heading as="h2" size="2" class="mb-4 text-center">
|
||||
Beta Apps
|
||||
</Heading>
|
||||
<Text size="xl" class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto text-center">
|
||||
Testen Sie unsere neuesten Innovationen
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<Grid cols={3} gap="large" class="max-w-5xl mx-auto">
|
||||
{betaApps.map((app) => (
|
||||
<div class="group relative h-full">
|
||||
<div class="absolute -inset-0.5 bg-gradient-to-r from-yellow-500/0 via-yellow-500/20 to-yellow-500/0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 blur"></div>
|
||||
<div class="relative h-full bg-white/90 backdrop-blur-sm dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700 group-hover:border-yellow-500/50 transition-all duration-300">
|
||||
<div class="flex items-start justify-between mb-6">
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-yellow-500/20 to-orange-500/20 rounded-2xl blur-xl group-hover:from-yellow-500/30 group-hover:to-orange-500/30 transition-all duration-300"></div>
|
||||
<div class="relative w-16 h-16 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-700 dark:to-gray-600 rounded-2xl flex items-center justify-center text-4xl opacity-80">
|
||||
{app.data.icon}
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gradient-to-r from-yellow-500 to-orange-500 text-white px-3 py-1 rounded-full text-sm font-medium shadow-sm">
|
||||
<Icon name="mdi:beta" class="w-3 h-3 inline mr-1" />
|
||||
Beta
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Heading as="h3" size="5" class="mb-3 group-hover:text-yellow-600 transition-colors">{app.data.title}</Heading>
|
||||
<Text size="sm" class="text-gray-600 dark:text-gray-400 mb-8">
|
||||
{app.data.description}
|
||||
</Text>
|
||||
|
||||
<a
|
||||
href={`/apps/${app.slug.replace('-de', '')}`}
|
||||
class="inline-flex items-center justify-center w-full px-6 py-3 rounded-lg font-medium transition-all duration-300 border-2 border-gray-300 dark:border-gray-600 hover:border-yellow-500 dark:hover:border-yellow-500 hover:bg-yellow-500/5"
|
||||
>
|
||||
<Icon name="mdi:flask-outline" class="w-5 h-5 mr-2" />
|
||||
Beta testen
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</Grid>
|
||||
</Container>
|
||||
</Section>
|
||||
)}
|
||||
|
||||
<!-- Coming Soon -->
|
||||
{comingSoonApps.length > 0 && (
|
||||
<Section spacing="xlarge" class="relative">
|
||||
<div class="absolute inset-0 -top-32 -bottom-32"></div>
|
||||
<div class="absolute top-0 left-1/4 w-96 h-96 bg-purple-500/15 dark:bg-purple-500/5 rounded-full blur-3xl"></div>
|
||||
<div class="absolute bottom-0 right-1/4 w-96 h-96 bg-pink-500/15 dark:bg-pink-500/5 rounded-full blur-3xl"></div>
|
||||
|
||||
<Container class="relative z-10">
|
||||
<div class="text-center mb-16">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-purple-500/10 to-pink-500/10 rounded-2xl mb-4">
|
||||
<Icon name="mdi:rocket-launch-outline" class="w-8 h-8 text-purple-600 dark:text-purple-500" />
|
||||
</div>
|
||||
<Heading as="h2" size="2" class="mb-4 text-center">
|
||||
Demnächst verfügbar
|
||||
</Heading>
|
||||
<Text size="xl" class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto text-center">
|
||||
Freuen Sie sich auf diese kommenden Tools
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<Grid cols={4} gap="medium" class="max-w-5xl mx-auto">
|
||||
{comingSoonApps.map((app) => (
|
||||
<div class="group relative">
|
||||
<div class="absolute -inset-0.5 bg-gradient-to-r from-purple-500/0 via-purple-500/10 to-purple-500/0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 blur"></div>
|
||||
<div class="relative bg-white/60 backdrop-blur-sm dark:bg-gray-800/60 rounded-2xl p-6 border border-gray-200 dark:border-gray-700 text-center opacity-75 group-hover:opacity-100 transition-all duration-300">
|
||||
<div class="inline-flex items-center justify-center w-12 h-12 bg-gradient-to-br from-purple-500/10 to-pink-500/10 rounded-xl mb-3 group-hover:scale-110 transition-transform">
|
||||
<span class="text-2xl opacity-60">{app.data.icon}</span>
|
||||
</div>
|
||||
<Text weight="semibold" class="mb-1">{app.data.title}</Text>
|
||||
<Text size="sm" class="text-gray-500 dark:text-gray-500">Bald verfügbar</Text>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</Grid>
|
||||
</Container>
|
||||
</Section>
|
||||
)}
|
||||
|
||||
<!-- CTA Section -->
|
||||
<Section spacing="xlarge" class="relative">
|
||||
<div class="absolute -inset-y-32 left-1/2 -translate-x-1/2 w-[200vw]"></div>
|
||||
<div class="absolute bottom-0 right-1/3 w-[600px] h-[600px] bg-mana-blue/25 dark:bg-mana-blue/8 rounded-full blur-3xl"></div>
|
||||
<div class="absolute top-0 left-1/3 w-[600px] h-[600px] bg-blue-500/25 dark:bg-blue-500/8 rounded-full blur-3xl"></div>
|
||||
|
||||
<Container class="relative z-10">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="relative group">
|
||||
<div class="relative bg-white/95 backdrop-blur-sm dark:bg-gray-800 rounded-3xl p-12 md:p-16 text-center border border-gray-200 dark:border-gray-700 shadow-xl">
|
||||
<div class="relative inline-block mb-8">
|
||||
<div class="absolute inset-0 bg-mana-blue/20 rounded-full blur-2xl scale-150"></div>
|
||||
<div class="relative w-20 h-20 bg-gradient-to-br from-mana-blue to-blue-600 rounded-2xl flex items-center justify-center transform rotate-3 group-hover:rotate-6 transition-transform duration-300">
|
||||
<Icon name="mdi:apps" class="w-10 h-10 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Heading as="h2" size="2" class="mb-4 text-center">
|
||||
Starten Sie jetzt mit Mana
|
||||
</Heading>
|
||||
|
||||
<Text size="xl" class="mb-10 text-gray-600 dark:text-gray-400 max-w-2xl mx-auto text-center">
|
||||
Ein System, alle Tools. Keine Abos, keine Verschwendung.
|
||||
Entdecken Sie die Zukunft der KI-Nutzung.
|
||||
</Text>
|
||||
|
||||
<a
|
||||
href="/start"
|
||||
class="inline-flex items-center justify-center px-8 py-4 bg-gradient-to-r from-mana-blue to-blue-600 hover:from-blue-600 hover:to-mana-blue text-white rounded-lg text-lg font-medium shadow-lg hover:shadow-xl transition-all duration-300"
|
||||
>
|
||||
<Icon name="mdi:rocket-launch" class="w-5 h-5 mr-2" />
|
||||
Kostenlos starten mit 150 Mana
|
||||
</a>
|
||||
|
||||
<div class="flex items-center justify-center gap-8 pt-8 mt-8 border-t border-gray-100 dark:border-gray-700">
|
||||
<div class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
|
||||
<Icon name="mdi:check-circle" class="w-5 h-5 text-green-500" />
|
||||
<Text size="sm">Keine Kreditkarte</Text>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
|
||||
<Icon name="mdi:infinity" class="w-5 h-5 text-blue-500" />
|
||||
<Text size="sm">Credits verfallen nie</Text>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
|
||||
<Icon name="mdi:flash" class="w-5 h-5 text-purple-500" />
|
||||
<Text size="sm">20+ KI-Tools</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<Footer />
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
</Layout>
|
||||
</Layout>
|
||||
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue