| <script lang="ts"> | |
| import { PARTNERS, PARTNER_LOGOS } from '$lib/data/content'; | |
| import SectionHeader from './SectionHeader.svelte'; | |
| import Icon from './Icon.svelte'; | |
| </script> | |
| <section class="section" id="partners"> | |
| <div class="wrap"> | |
| <SectionHeader | |
| coord="06" | |
| eyebrow="The outfitters" | |
| title="Seven partners stocked the shed" | |
| lede="Models, tools and compute from across the small-AI world. Tap any one for its full kit and support channels." | |
| /> | |
| <div class="partner-grid" style="margin-top:44px"> | |
| {#each PARTNERS as p (p.id)} | |
| <a class="partner-card" href={'/partners/' + p.id}> | |
| <div class="partner-logo"><img src={PARTNER_LOGOS[p.id]} alt={p.name} loading="lazy" /></div> | |
| <p style="margin-top:16px;color:var(--ink-2);font-size:14.5px;min-height:44px;text-wrap:pretty"> | |
| {p.one} | |
| </p> | |
| <div style="display:flex;align-items:center;justify-content:space-between;margin-top:14px"> | |
| <span class="chip" style="pointer-events:none;padding:5px 11px;font-size:11.5px">{p.tag}</span> | |
| <Icon name="arrow" size={18} stroke="var(--ink-soft)" /> | |
| </div> | |
| </a> | |
| {/each} | |
| <div | |
| class="partner-card" | |
| style="display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:10px;background:var(--kraft)" | |
| > | |
| <span class="coord">FIND THE RIGHT ONE</span> | |
| <a href="#recommender" class="display" style="font-size:22px;color:var(--forest)"> | |
| Use the kit recommender → | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |