Hoard/GUI/src/routes/Home.vue

<script setup lang="ts">
const valueProps = [
  {
    icon: 'mdi-folder-multiple-outline',
    title: 'Dateien zuerst',
    text: 'Ordner, Dateiliste und Vorschau sind der Kern. Kein überladenes Dashboard-Gefühl.',
  },
  {
    icon: 'mdi-file-document-edit-outline',
    title: 'Markdown direkt im Browser',
    text: 'Dokumente bearbeiten, lesen und strukturieren ohne Tool-Wechsel.',
  },
  {
    icon: 'mdi-server-outline',
    title: 'Self-hosted Kontrolle',
    text: 'Dateimetadaten in PostgreSQL, Dateien in MinIO, alles auf deinem Server.',
  },
]

const coreFeatures = [
  {
    icon: 'mdi-folder-open-outline',
    title: 'Ordnernavigation wie gewohnt',
    text: 'Schnell durch Verzeichnisse klicken, Inhalte erfassen und sauber organisieren.',
  },
  {
    icon: 'mdi-image-outline',
    title: 'PDF- und Bildvorschau',
    text: 'Dateien öffnen und direkt einsehen, ohne externe Viewer oder Downloads.',
  },
  {
    icon: 'mdi-account-lock-outline',
    title: 'Klare Benutzerlogik',
    text: 'Keine offene Registrierung. Accounts werden bewusst und kontrolliert verwaltet.',
  },
  {
    icon: 'mdi-lightning-bolt-outline',
    title: 'Schlankes MVP-Setup',
    text: 'Fokus auf das Wesentliche: stabil, wartbar und realistisch für Solo-Entwicklung.',
  },
]

const workflowSteps = [
  {
    number: '01',
    title: 'Anmelden',
    text: 'Melde dich mit einem vorhandenen Konto an und starte direkt in deiner Dateiablage.',
  },
  {
    number: '02',
    title: 'Dateien strukturieren',
    text: 'Lege Ordner an, lade Dateien hoch und halte deine Arbeitsbereiche aufgeräumt.',
  },
  {
    number: '03',
    title: 'Inhalte bearbeiten',
    text: 'Markdown, Bilder und PDFs direkt in der App ansehen und bearbeiten.',
  },
]

const techStack = ['Vue 3', 'ASP.NET Core', 'PostgreSQL', 'MinIO', 'md-editor-v3', 'Cookie Auth']
</script>

<template>
  <v-container fluid class="landing-page hoard-page">
    <section class="hero hoard-panel hoard-panel-gradient">
      <div class="hero-copy">
        <p class="hero-kicker hoard-kicker">Self-hosted Datei-Workspace</p>
        <h1>Hoard ist deine ruhige Startseite für Dateien, Ordner und Markdown.</h1>
        <p class="hero-lead">
          Eine einfache, Google-Drive-inspirierte Web-App für Teams, die volle Kontrolle über
          Daten, Struktur und Workflow behalten wollen.
        </p>

        <div class="hero-actions hoard-action-row">
          <v-btn color="primary" size="large" prepend-icon="mdi-login" to="/login">
            Zum Login
          </v-btn>
          <v-btn variant="outlined" size="large" prepend-icon="mdi-file-document-outline" to="/impressum">
            Mehr erfahren
          </v-btn>
        </div>

        <div class="hero-tags">
          <span class="hero-tag">Light-first UX</span>
          <span class="hero-tag">Mehrbenutzerfähig</span>
          <span class="hero-tag">Ohne SaaS-Abhängigkeit</span>
        </div>
      </div>

      <div class="hero-preview hoard-panel">
        <header class="preview-head">
          <p class="preview-title">Beispielansicht</p>
          <span class="preview-pill">Workspace</span>
        </header>
        <div class="preview-list">
          <article class="preview-row">
            <v-icon icon="mdi-folder-outline" size="18" />
            <div>
              <p class="row-title">Dokumentation</p>
              <p class="row-meta">Ordner · vor 3 Tagen aktualisiert</p>
            </div>
          </article>
          <article class="preview-row">
            <v-icon icon="mdi-file-document-outline" size="18" />
            <div>
              <p class="row-title">roadmap.md</p>
              <p class="row-meta">Markdown · 18 KB</p>
            </div>
          </article>
          <article class="preview-row">
            <v-icon icon="mdi-file-pdf-box" size="18" />
            <div>
              <p class="row-title">api-reference.pdf</p>
              <p class="row-meta">PDF · 1.2 MB</p>
            </div>
          </article>
        </div>
      </div>
    </section>

    <section class="value-grid">
      <article v-for="item in valueProps" :key="item.title" class="value-card hoard-panel">
        <v-icon :icon="item.icon" size="22" />
        <h2>{{ item.title }}</h2>
        <p>{{ item.text }}</p>
      </article>
    </section>

    <section class="feature-section hoard-panel">
      <header class="section-head">
        <p class="section-kicker hoard-kicker">Für den Produktivalltag</p>
        <h2>Weniger Tool-Chaos, mehr Fokus auf Inhalte</h2>
      </header>
      <div class="feature-grid">
        <article v-for="feature in coreFeatures" :key="feature.title" class="feature-card">
          <v-icon :icon="feature.icon" size="20" />
          <h3>{{ feature.title }}</h3>
          <p>{{ feature.text }}</p>
        </article>
      </div>
    </section>

    <section class="workflow-section">
      <header class="section-head">
        <p class="section-kicker hoard-kicker">So funktioniert Hoard</p>
        <h2>In drei klaren Schritten produktiv starten</h2>
      </header>
      <div class="workflow-grid">
        <article v-for="step in workflowSteps" :key="step.number" class="workflow-card hoard-panel">
          <p class="workflow-number">{{ step.number }}</p>
          <h3>{{ step.title }}</h3>
          <p>{{ step.text }}</p>
        </article>
      </div>
    </section>

    <section class="stack-section hoard-panel">
      <div class="stack-copy">
        <p class="section-kicker hoard-kicker">Technische Basis</p>
        <h2>Schlank gebaut für ein realistisches MVP</h2>
        <p class="stack-text">
          Hoard kombiniert einen modernen Frontend-Stack mit einem pragmatischen Backend-Setup,
          damit Weiterentwicklung und Betrieb auch solo gut machbar bleiben.
        </p>
      </div>
      <div class="stack-list">
        <span v-for="item in techStack" :key="item" class="stack-pill">{{ item }}</span>
      </div>
    </section>
  </v-container>
</template>

<style scoped>
.landing-page {
  --hoard-page-width: 1180px;
}

.hero {
  --hoard-gradient-angle: 120deg;
  --hoard-gradient-start: color-mix(in srgb, var(--color-primary-100) 34%, var(--color-surface) 66%);
  --hoard-gradient-end: var(--color-surface);
  --hoard-gradient-end-stop: 52%;

  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-6);
  padding: var(--space-8);
}

.workflow-number,
.preview-title,
.row-title,
.row-meta,
.stack-text {
  margin: 0;
}

h1 {
  margin-bottom: var(--space-4);
  max-width: 20ch;
  font-size: clamp(2rem, 2.5vw + 1rem, 3rem);
  line-height: 1.08;
}

.hero-lead {
  margin-bottom: var(--space-5);
  max-width: 50ch;
  color: var(--color-text-secondary);
  font-size: 15px;
}

.hero-actions {
  margin-bottom: var(--space-4);
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.hero-preview {
  align-self: center;
  padding: var(--space-5);
  width: 100%;
  background-color: color-mix(in srgb, var(--color-surface-alt) 86%, var(--color-surface) 14%);
}

.preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.preview-title {
  color: var(--color-text);
  font-weight: 600;
}

.preview-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px var(--space-2);
  border-radius: 999px;
  color: var(--color-primary-700);
  font-size: var(--font-size-xs);
  font-weight: 600;
  background-color: var(--color-primary-100);
}

.preview-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.preview-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--color-border) 75%, var(--color-surface) 25%);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

.row-title {
  color: var(--color-text);
  font-size: var(--font-size-md);
  font-weight: 500;
}

.row-meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.value-card {
  padding: var(--space-5);
}

.value-card h2,
.section-head h2 {
  margin: var(--space-3) 0 var(--space-2);
  font-size: clamp(1.25rem, 1.2vw + 0.8rem, 1.8rem);
}

.value-card p,
.feature-card p,
.workflow-card p,
.stack-text {
  color: var(--color-text-secondary);
}

.feature-section,
.stack-section {
  padding: var(--space-6);
}

.section-head {
  margin-bottom: var(--space-5);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.feature-card {
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--color-border) 75%, var(--color-surface) 25%);
  border-radius: var(--radius-md);
  background-color: color-mix(in srgb, var(--color-surface) 80%, var(--color-surface-alt) 20%);
}

.feature-card h3,
.workflow-card h3,
.stack-copy h2 {
  margin: var(--space-2) 0;
}

.workflow-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.workflow-card {
  padding: var(--space-5);
}

.workflow-number {
  color: var(--color-primary-700);
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.stack-section {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
}

.stack-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.stack-pill {
  padding: 6px var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: 500;
  background-color: color-mix(in srgb, var(--color-surface-alt) 75%, var(--color-surface) 25%);
}

@media (width <= 1100px) {
  .hero,
  .stack-section {
    grid-template-columns: 1fr;
  }

  .hero-preview {
    max-width: 720px;
  }
}

@media (width <= 960px) {
  .hero,
  .feature-section,
  .stack-section {
    padding: var(--space-5);
  }

  .value-grid,
  .feature-grid,
  .workflow-grid {
    grid-template-columns: 1fr;
  }

  h1 {
    max-width: none;
  }
}
</style>