emmas-schatzkiste/design_handoff_emmas_schatzkiste/design/Startseite.dc.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./support.js"></script>
</head>
<body>
<x-dc>
<helmet>
<link rel="stylesheet" href="./_ds/emmas-schatzkiste-design-system-3da4b643-9f78-4b1c-927d-8b058aa8403e/styles.css" />
<script src="https://unpkg.com/lucide@0.451.0/dist/umd/lucide.js"></script>
<script src="./image-slot.js"></script>
<script src="./_ds/emmas-schatzkiste-design-system-3da4b643-9f78-4b1c-927d-8b058aa8403e/_ds_bundle.js"></script>
</helmet>

<div style="background:var(--surface-page)">

  <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.SiteHeader" items="{{ navItems }}" active="Start" on-navigate="{{ onNavigate }}" hint-size="100%,64px"></x-import>

  <section style="position:relative; background:var(--surface-band-cool); overflow:hidden; min-height:clamp(540px, 64vw, 680px); display:grid">
    <img src="https://images.pexels.com/photos/3661386/pexels-photo-3661386.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=1800" alt="Kinder spielen mit Holzspielzeug" style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:74% 45%" />
    <span style="position:absolute; inset:0; background:linear-gradient(98deg, var(--surface-card) 0, var(--surface-card) 430px, rgba(255,255,255,0.9) 560px, rgba(255,255,255,0) 820px)"></span>
    <div style="position:relative; align-self:center; width:100%; max-width:var(--page-max); margin:0 auto; padding:var(--space-10) var(--page-pad-x)">
      <div style="display:grid; gap:var(--space-5); justify-items:start; max-width:min(100%, 540px)">
        <img src="./assets/logo-shop.jpeg" alt="Emma's Schatzkiste — Baby &amp; Kind Second Hand" style="width:100%; max-width:200px; mix-blend-mode:multiply" />
        <h1 style="font:var(--text-display-xl); font-size:clamp(32px,7.5vw,56px); line-height:1.05; display:grid; justify-items:start; gap:2px">
          <span style="color:var(--sky-500); display:inline-block; transform:rotate(-2.5deg)">Gebraucht,</span>
          <span style="color:var(--sun-600); display:inline-block; transform:rotate(1.5deg) translateX(14px)">geliebt,</span>
          <span style="color:var(--coral-500); display:inline-block; transform:rotate(-1deg)">weitergegeben!</span>
        </h1>
        <p style="font:var(--text-body-l); color:var(--ink-700); max-width:34ch">Baby- und Kindersachen aus zweiter Hand — preiswert, gut erhalten, mitten in Rottenburg.</p>
        <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.Button" as="a" href="./Hilfe Verein.dc.html" size="l" icon="{{ iconArrow }}" hint-size="280px,48px">Hilfe Verein ansehen</x-import>
        <div style="display:flex; flex-wrap:wrap; gap:var(--space-4); margin-top:var(--space-2)">
          <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.TrustBadge" icon="{{ iconSparkles }}" title="Einzelstücke" sub="nur 1× vorhanden" hint-size="180px,52px"></x-import>
          <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.TrustBadge" icon="{{ iconCheck }}" title="Sehr gut erhalten" sub="wir prüfen jedes Teil" hint-size="200px,52px"></x-import>
        </div>
      </div>
    </div>
  </section>

  <section style="max-width:var(--page-max); margin:0 auto; padding:var(--space-16) var(--page-pad-x) var(--space-12)">
    <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.SectionHeader" title="Wie alles angefangen hat" icon="{{ iconHeart }}" hint-size="100%,44px"></x-import>
    <div style="display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:var(--gutter-grid); align-items:start">
      <p style="font:var(--text-body-l); color:var(--text-body); max-width:52ch">Im September haben wir den Second-Hand-Laden übernommen — eine Herzensangelegenheit. Kinder und Jugendliche sollen Spielsachen bekommen, die ein zweites Leben verdient haben: nachhaltig, familienfreundlich und für jeden Geldbeutel.</p>
      <p style="font:var(--text-body-l); color:var(--text-body); max-width:52ch">Bei uns findest du Einzelstücke — vom Strampler bis zum Bobbycar. Jedes Teil gibt es nur 1× vorhanden, und jedes hat schon eine Geschichte hinter sich.</p>
    </div>
  </section>

  <section style="max-width:560px; margin:0 auto; padding:var(--space-8) var(--page-pad-x) var(--space-16); display:grid; gap:var(--space-5); justify-items:center">
    <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.ImagePlaceholder" slot-id="opa-martin" label="Bild von Opa Martin hier ablegen" tone="sun" ratio="1 / 1" radius="var(--radius-xl)" style="width:100%" hint-size="100%,420px"></x-import>
    <span style="font:var(--text-display-m); color:var(--sky-500)">Opa Martin</span>
  </section>

  <section style="max-width:var(--page-max); margin:0 auto; padding:0 var(--page-pad-x) var(--space-16)">
    <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.SectionHeader" title="Für Familien" icon="{{ iconFamily }}" hint-size="100%,44px"></x-import>
    <div style="display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:var(--gutter-grid)">
      <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.InfoTile" title="Preise für Familien" body="Second-Hand-Preise, die zum Familienbudget passen." tone="cool" hint-size="100%,150px"></x-import>
      <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.InfoTile" title="Sehr gut erhalten" body="Auch aus zweiter Hand: geprüft, sauber, in gutem Zustand." tone="band" hint-size="100%,150px"></x-import>
      <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.InfoTile" title="Wir suchen mit" body="Sag uns, was du brauchst — wir helfen beim Suchen." tone="soft" hint-size="100%,150px"></x-import>
    </div>
  </section>

  <sc-if value="{{ audioSichtbar }}" hint-placeholder-val="{{ true }}">
  <section style="max-width:var(--page-max); margin:0 auto; padding:0 var(--page-pad-x) var(--space-16)">
    <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.SectionHeader" title="Unser Lied" icon="{{ iconMusic }}" hint-size="100%,44px"></x-import>
    <div style="display:grid; max-width:520px; margin:0 auto">
      <div style="background:var(--surface-card); border:1px solid var(--line-soft); border-radius:var(--radius-l); box-shadow:var(--shadow-card); padding:var(--space-5); display:grid; gap:var(--space-4)">
        <div style="display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap">
          <span style="font:var(--text-subheading); color:var(--sky-500)">Lied vom Laden</span>
          <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.Badge" tone="warning" hint-size="110px,22px">Audio folgt</x-import>
        </div>
        <div style="display:flex; align-items:center; gap:var(--space-4)">
          <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.IconButton" label="Abspielen" disabled="{{ true }}" size="{{ 44 }}" hint-size="44px,44px">
            <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.Icon" name="play" size="{{ 18 }}" hint-size="18px,18px"></x-import>
          </x-import>
          <div style="flex:1; display:grid; gap:var(--space-2)">
            <span style="height:8px; border-radius:var(--radius-pill); background:var(--surface-sunk)"></span>
            <span style="font:var(--text-small); color:var(--text-muted)">0:00</span>
          </div>
        </div>
        <p style="font:var(--text-small); color:var(--text-muted)">Sobald die Datei da ist, spielt der Player sie hier ab.</p>
      </div>
    </div>
  </section>
  </sc-if>

  <section style="max-width:var(--page-max); margin:0 auto var(--space-16); padding:0 var(--page-pad-x)">
    <div style="background:var(--surface-band); border-radius:var(--radius-band); padding:var(--space-10); display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:var(--space-8); align-items:center">
      <div style="display:grid; gap:var(--space-4); justify-items:start">
        <span style="font:var(--text-label); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--sun-600)">Hilfe. Herz. Hoffnung.</span>
        <h2 style="font:var(--text-display-l); color:var(--sky-500)">Unser Hilfe Verein ist im Aufbau.</h2>
        <p style="font:var(--text-body-l); color:var(--text-body); max-width:46ch">Soziale Hilfe für unsere Region. Dafür brauchen wir finanzielle und menschliche Hilfe — in jeder Form, die du geben kannst.</p>
        <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.Button" as="a" href="./Hilfe Verein.dc.html" size="l" hint-size="220px,48px">So kannst du helfen</x-import>
      </div>
      <img src="./assets/logo-verein.jpeg" alt="Emma's Schatzkiste Hilfe Verein" style="width:100%; max-width:380px; justify-self:center; mix-blend-mode:multiply" />
    </div>
  </section>

  <x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.SiteFooter" columns="{{ footerColumns }}" hint-size="100%,280px"></x-import>
  <div style="background:var(--surface-footer); padding:0 var(--page-pad-x) var(--space-8)">
    <p style="max-width:var(--page-max); margin:0 auto; font:var(--text-small); color:var(--text-muted)">Kleinunternehmerregelung nach § 19 UStG: Als Kleinunternehmer berechnen wir keine Umsatzsteuer und weisen sie daher auch nicht aus.</p>
  </div>

</div>
</x-dc>
<script type="text/x-dc" data-dc-script data-props="{&quot;audioSichtbar&quot;:{&quot;editor&quot;:&quot;boolean&quot;,&quot;default&quot;:true,&quot;tsType&quot;:&quot;boolean&quot;,&quot;section&quot;:&quot;Inhalte&quot;}}">
class Component extends DCLogic {
  state = { dsReady: false };

  componentDidMount() {
    this.waitForDs();
  }

  componentWillUnmount() { clearInterval(this._t); }

  waitForDs() {
    const check = () => {
      const ds = window.EmmasSchatzkisteDesignSystem_3da4b6;
      if (ds && ds.Icon) { clearInterval(this._t); this.setState({ dsReady: true }); }
    };
    this._t = setInterval(check, 120);
    check();
  }

  icon(name, size) {
    const ds = window.EmmasSchatzkisteDesignSystem_3da4b6;
    if (!ds || !ds.Icon) return null;
    return React.createElement(ds.Icon, { name: name, size: size || 22 });
  }

  renderVals() {
    return {
      audioSichtbar: this.props.audioSichtbar ?? true,
      navItems: ['Start', 'Shop', 'Hilfe Verein', 'Kontakt'],
      onNavigate: item => {
        if (item === 'Shop') window.location.href = './Shop.dc.html';
        else if (item === 'Hilfe Verein') window.location.href = './Hilfe Verein.dc.html';
        else if (item === 'Kontakt') window.location.href = './Hilfe Verein.dc.html#kontakt';
      },
      iconArrow: this.icon('arrow-right', 18),
      iconSparkles: this.icon('sparkles', 15),
      iconCheck: this.icon('badge-check', 15),
      iconSearch: this.icon('search', 15),
      footerColumns: [
        { title: 'Laden', links: ['Unser Laden', 'Öffnungszeiten', 'Ware abgeben'] },
        { title: 'Hilfe Verein', links: ['Spenden', 'Mithelfen', 'Weitersagen'] },
        { title: 'Über', links: ['Über uns', 'Kontakt', 'Impressum'] }
      ],
      iconHeart: this.icon('heart'),
      iconFamily: this.icon('heart-handshake'),
      iconMusic: this.icon('music')
    };
  }
}
</script>
</body>
</html>