File size: 1,507 Bytes
a8898de 560169d a8898de 560169d a8898de 560169d a8898de | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <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>
|