mirror of
https://github.com/Kaelio/ktx.git
synced 2026-06-07 07:55:13 +02:00
docs(quickstart): redesign demo-warehouse callout with sticker icons (#202)
* docs(quickstart): redesign demo-warehouse callout with sticker icons Replaces the plain warning-style callout with a two-column layout: text and a pill-shaped CTA on the left, a 2x2 cluster of rotated Postgres, Metabase, dbt, and Notion sticker tiles on the right. Adds the four connector SVGs under docs-site/public/icons/ to support it. * chore(docs-site): refresh auto-generated next-env.d.ts
This commit is contained in:
Andrey Avtomonov
GitHub
parent
4d4296f397
commit
fd2ba62d92
6 changed files with 160 additions and 24 deletions
|
|
@ -13,33 +13,82 @@ If you're a coding assistant choosing a docs route, start with the
|
||||||
[Agent Quickstart](/docs/ai-resources/agent-quickstart) instead.
|
[Agent Quickstart](/docs/ai-resources/agent-quickstart) instead.
|
||||||
|
|
||||||
<div
|
<div
|
||||||
className="not-prose my-8 rounded-xl border p-5 sm:p-6"
|
className="not-prose my-8 overflow-hidden rounded-2xl border"
|
||||||
style={{
|
style={{
|
||||||
borderColor: 'color-mix(in oklch, #ff8a4d 35%, transparent)',
|
borderColor: 'color-mix(in oklch, #ff8a4d 32%, transparent)',
|
||||||
background: 'color-mix(in oklch, #ff8a4d 8%, transparent)',
|
background:
|
||||||
|
'linear-gradient(135deg, color-mix(in oklch, #ff8a4d 10%, transparent) 0%, color-mix(in oklch, #ff8a4d 3%, transparent) 100%)',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div
|
<div className="flex flex-col gap-6 p-5 sm:p-7 md:flex-row md:items-center md:gap-10">
|
||||||
className="text-xs font-semibold uppercase tracking-wider"
|
<div className="min-w-0 flex-1">
|
||||||
style={{ color: '#ff8a4d' }}
|
<div
|
||||||
>
|
className="text-[11px] font-black uppercase tracking-[0.16em]"
|
||||||
Need a warehouse to play with?
|
style={{ color: '#ff8a4d' }}
|
||||||
|
>
|
||||||
|
Need a warehouse to play with?
|
||||||
|
</div>
|
||||||
|
<div className="mt-2.5 text-base leading-relaxed text-fd-foreground">
|
||||||
|
Try **ktx** against a real data stack - Postgres, dbt, Metabase, and Notion
|
||||||
|
pre-loaded with the Orbit demo corpus. The page lists demo credentials
|
||||||
|
you can paste straight into `ktx setup`.
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
href="https://kaelio.com/start"
|
||||||
|
className="group mt-5 inline-flex items-center gap-2 rounded-full px-4 py-2.5 text-sm font-semibold text-white no-underline shadow-[inset_0_1px_0_rgba(255,255,255,0.35),0_2px_4px_rgba(255,138,77,0.2),0_10px_24px_-8px_rgba(255,138,77,0.55)] transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.4),0_3px_6px_rgba(255,138,77,0.28),0_16px_30px_-8px_rgba(255,138,77,0.65)]"
|
||||||
|
style={{
|
||||||
|
background: 'linear-gradient(180deg, #ff9d63 0%, #f97316 100%)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Get demo credentials at kaelio.com/start
|
||||||
|
<svg
|
||||||
|
width="14"
|
||||||
|
height="14"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="2.4"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
className="transition-transform duration-200 group-hover:translate-x-0.5"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<line x1="5" y1="12" x2="19" y2="12" />
|
||||||
|
<polyline points="12 5 19 12 12 19" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="relative grid h-[152px] w-[152px] shrink-0 grid-cols-2 grid-rows-2 gap-2.5 self-center md:h-[168px] md:w-[168px]"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
{[
|
||||||
|
{ src: '/ktx/icons/postgresql.svg', tint: '#e9eef5', rotate: -7, name: 'Postgres' },
|
||||||
|
{ src: '/ktx/icons/metabase.svg', tint: '#e8f1fc', rotate: 6, name: 'Metabase' },
|
||||||
|
{ src: '/ktx/icons/dbt.svg', tint: '#fde6dc', rotate: -4, name: 'dbt' },
|
||||||
|
{ src: '/ktx/icons/notion.svg', tint: '#f0eee8', rotate: 8, name: 'Notion' },
|
||||||
|
].map((sticker) => (
|
||||||
|
<div
|
||||||
|
key={sticker.name}
|
||||||
|
className="flex items-center justify-center rounded-2xl border border-fd-border bg-fd-card shadow-[0_2px_4px_rgba(20,18,12,0.04),0_14px_28px_-12px_rgba(20,18,12,0.22)]"
|
||||||
|
style={{ transform: `rotate(${sticker.rotate}deg)` }}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className="flex h-full w-full items-center justify-center rounded-2xl"
|
||||||
|
style={{ background: sticker.tint }}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={sticker.src}
|
||||||
|
alt=""
|
||||||
|
width="38"
|
||||||
|
height="38"
|
||||||
|
style={{ objectFit: 'contain' }}
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-2 text-base leading-relaxed text-fd-foreground">
|
|
||||||
Try **ktx** against a real data stack - Postgres, dbt, Metabase, and Notion
|
|
||||||
pre-loaded with the Orbit demo corpus. The page lists demo credentials
|
|
||||||
you can paste straight into `ktx setup`.
|
|
||||||
</div>
|
|
||||||
<a
|
|
||||||
href="https://kaelio.com/start"
|
|
||||||
className="mt-4 inline-flex items-center gap-1 text-base font-semibold no-underline hover:underline"
|
|
||||||
style={{
|
|
||||||
color: '#ff8a4d',
|
|
||||||
textDecorationColor: '#ff8a4d',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Get demo credentials at kaelio.com/start →
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
|
|
|
||||||
2
docs-site/next-env.d.ts
vendored
2
docs-site/next-env.d.ts
vendored
|
|
@ -1,6 +1,6 @@
|
||||||
/// <reference types="next" />
|
/// <reference types="next" />
|
||||||
/// <reference types="next/image-types/global" />
|
/// <reference types="next/image-types/global" />
|
||||||
import "./.next/types/routes.d.ts";
|
import "./.next/dev/types/routes.d.ts";
|
||||||
|
|
||||||
// NOTE: This file should not be edited
|
// NOTE: This file should not be edited
|
||||||
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
|
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
|
||||||
|
|
|
||||||
7
docs-site/public/icons/dbt.svg
Normal file
7
docs-site/public/icons/dbt.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="256px" height="256px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
|
||||||
|
<title>dbt</title>
|
||||||
|
<g>
|
||||||
|
<path d="M245.121138,10.6473813 C251.139129,16.4340053 255.074133,24.0723342 256,32.4050489 C256,35.8769778 255.074133,38.1917867 252.990862,42.5895822 C250.907876,46.9873778 225.215147,91.4286933 217.57696,103.696213 C213.179164,110.871609 210.864356,119.435947 210.864356,127.768462 C210.864356,136.3328 213.179164,144.6656 217.57696,151.840996 C225.215147,164.108516 250.907876,208.781084 252.990862,213.179164 C255.074133,217.57696 256,219.659947 256,223.131876 C255.074133,231.464676 251.370667,239.103147 245.352676,244.658347 C239.565938,250.676338 231.927751,254.611342 223.826489,255.305671 C220.35456,255.305671 218.039751,254.379804 213.873493,252.296533 C209.706951,250.213262 164.340053,225.215147 152.072249,217.57696 C151.146382,217.113884 150.220516,216.419556 149.063396,215.95648 L88.4195556,180.079502 C89.8082133,191.652693 94.9006222,202.763093 103.233138,210.864356 C104.853618,212.484551 106.473813,213.873493 108.325547,215.262151 C106.936604,215.95648 105.316409,216.651093 103.927751,217.57696 C91.6599467,225.215147 46.9873778,250.907876 42.5895822,252.990862 C38.1917867,255.074133 36.1085156,256 32.4050489,256 C24.0723342,255.074133 16.4340053,251.370667 10.8788338,245.352676 C4.86075733,239.565938 0.925858133,231.927751 0,223.594951 C0.231464676,220.123022 1.1573248,216.651093 3.00905244,213.641956 C5.09223822,209.24416 30.7848533,164.571307 38.42304,152.303787 C42.82112,145.128391 45.1356444,136.795591 45.1356444,128.231538 C45.1356444,119.6672 42.82112,111.3344 38.42304,104.159004 C30.7848533,91.4286933 4.86075733,46.75584 3.00905244,42.3580444 C1.1573248,39.3489067 0.231464676,35.8769778 0,32.4050489 C0.925858133,24.0723342 4.62930489,16.4340053 10.6473813,10.6473813 C16.4340053,4.62930489 24.0723342,0.925858133 32.4050489,0 C35.8769778,0.231464676 39.3489067,1.1573248 42.5895822,3.00905244 C46.2930489,4.62930489 78.9293511,23.6094009 96.28928,33.7939911 L100.224284,36.1085156 C101.612942,37.0343822 102.770347,37.7287111 103.696213,38.1917867 L105.547947,39.3489067 L167.348907,75.9204978 C165.960249,62.0324978 158.784853,49.3019022 147.674453,40.7378489 C149.063396,40.04352 150.683591,39.3489067 152.072249,38.42304 C164.340053,30.7848533 209.012622,4.86075733 213.410418,3.00905244 C216.419556,1.1573248 219.891484,0.231464676 223.594951,0 C231.696213,0.925858133 239.334684,4.62930489 245.121138,10.6473813 Z M131.240391,144.434062 L144.434062,131.240391 C146.285796,129.388658 146.285796,126.611342 144.434062,124.759609 L131.240391,111.565938 C129.388658,109.714204 126.611342,109.714204 124.759609,111.565938 L111.565938,124.759609 C109.714204,126.611342 109.714204,129.388658 111.565938,131.240391 L124.759609,144.434062 C126.379804,146.054258 129.388658,146.054258 131.240391,144.434062 Z" fill="#FF694A"></path>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3 KiB |
72
docs-site/public/icons/metabase.svg
Normal file
72
docs-site/public/icons/metabase.svg
Normal file
|
|
@ -0,0 +1,72 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||||
|
<svg width="800px" height="800px" viewBox="-34 0 324 324" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
|
||||||
|
<g fill="#509EE3">
|
||||||
|
<ellipse cx="19.3939396" cy="82.7565395" rx="19.3939394" ry="19.703938">
|
||||||
|
|
||||||
|
</ellipse>
|
||||||
|
<ellipse cx="19.3939396" cy="137.927566" rx="19.3939394" ry="19.703938">
|
||||||
|
|
||||||
|
</ellipse>
|
||||||
|
<ellipse opacity="0.2" cx="73.6969698" cy="82.7565395" rx="19.3939394" ry="19.703938">
|
||||||
|
|
||||||
|
</ellipse>
|
||||||
|
<ellipse cx="73.6969698" cy="138.463513" rx="19.3939394" ry="19.703938">
|
||||||
|
|
||||||
|
</ellipse>
|
||||||
|
<ellipse opacity="0.2" cx="128" cy="82.7565395" rx="19.3939394" ry="19.703938">
|
||||||
|
|
||||||
|
</ellipse>
|
||||||
|
<ellipse opacity="0.2" cx="128" cy="19.703938" rx="19.3939394" ry="19.703938">
|
||||||
|
|
||||||
|
</ellipse>
|
||||||
|
<ellipse opacity="0.2" cx="128" cy="138.463513" rx="19.3939394" ry="19.703938">
|
||||||
|
|
||||||
|
</ellipse>
|
||||||
|
<ellipse opacity="0.2" cx="182.30303" cy="82.7565395" rx="19.3939394" ry="19.703938">
|
||||||
|
|
||||||
|
</ellipse>
|
||||||
|
<ellipse cx="236.60606" cy="82.7565395" rx="19.3939394" ry="19.703938">
|
||||||
|
|
||||||
|
</ellipse>
|
||||||
|
<ellipse cx="182.30303" cy="138.463513" rx="19.3939394" ry="19.703938">
|
||||||
|
|
||||||
|
</ellipse>
|
||||||
|
<ellipse cx="236.60606" cy="138.463513" rx="19.3939394" ry="19.703938">
|
||||||
|
|
||||||
|
</ellipse>
|
||||||
|
<ellipse cx="19.3939396" cy="193.098592" rx="19.3939394" ry="19.703938">
|
||||||
|
|
||||||
|
</ellipse>
|
||||||
|
<ellipse opacity="0.2" cx="73.6969698" cy="193.634539" rx="19.3939394" ry="19.703938">
|
||||||
|
|
||||||
|
</ellipse>
|
||||||
|
<ellipse cx="128" cy="193.634539" rx="19.3939394" ry="19.703938">
|
||||||
|
|
||||||
|
</ellipse>
|
||||||
|
<ellipse opacity="0.2" cx="182.30303" cy="193.634539" rx="19.3939394" ry="19.703938">
|
||||||
|
|
||||||
|
</ellipse>
|
||||||
|
<ellipse cx="236.60606" cy="193.634539" rx="19.3939394" ry="19.703938">
|
||||||
|
|
||||||
|
</ellipse>
|
||||||
|
<ellipse cx="19.3939396" cy="248.269618" rx="19.3939394" ry="19.703938">
|
||||||
|
|
||||||
|
</ellipse>
|
||||||
|
<ellipse opacity="0.2" cx="73.6969698" cy="248.805565" rx="19.3939394" ry="19.703938">
|
||||||
|
|
||||||
|
</ellipse>
|
||||||
|
<ellipse opacity="0.2" cx="128" cy="248.805565" rx="19.3939394" ry="19.703938">
|
||||||
|
|
||||||
|
</ellipse>
|
||||||
|
<ellipse opacity="0.2" cx="128" cy="303.976591" rx="19.3939394" ry="19.703938">
|
||||||
|
|
||||||
|
</ellipse>
|
||||||
|
<ellipse opacity="0.2" cx="182.30303" cy="248.805565" rx="19.3939394" ry="19.703938">
|
||||||
|
|
||||||
|
</ellipse>
|
||||||
|
<ellipse cx="236.60606" cy="248.805565" rx="19.3939394" ry="19.703938">
|
||||||
|
|
||||||
|
</ellipse>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.3 KiB |
7
docs-site/public/icons/notion.svg
Normal file
7
docs-site/public/icons/notion.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||||
|
<svg width="800px" height="800px" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path
|
||||||
|
d="M3.25781 3.11684C3.67771 3.45796 3.83523 3.43193 4.62369 3.37933L12.0571 2.93299C12.2147 2.93299 12.0836 2.77571 12.0311 2.74957L10.7965 1.85711C10.56 1.67347 10.2448 1.46315 9.64083 1.51576L2.44308 2.04074C2.18059 2.06677 2.12815 2.19801 2.2327 2.30322L3.25781 3.11684ZM3.7041 4.84917V12.6704C3.7041 13.0907 3.91415 13.248 4.38693 13.222L12.5562 12.7493C13.0292 12.7233 13.0819 12.4341 13.0819 12.0927V4.32397C13.0819 3.98306 12.9508 3.79921 12.6612 3.82545L4.12422 4.32397C3.80918 4.35044 3.7041 4.50803 3.7041 4.84917ZM11.7688 5.26872C11.8212 5.50518 11.7688 5.74142 11.5319 5.76799L11.1383 5.84641V11.6205C10.7965 11.8042 10.4814 11.9092 10.2188 11.9092C9.79835 11.9092 9.69305 11.7779 9.37812 11.3844L6.80345 7.34249V11.2532L7.61816 11.437C7.61816 11.437 7.61816 11.9092 6.96086 11.9092L5.14879 12.0143C5.09615 11.9092 5.14879 11.647 5.33259 11.5944L5.80546 11.4634V6.29276L5.1489 6.24015C5.09625 6.00369 5.22739 5.66278 5.5954 5.63631L7.53935 5.50528L10.2188 9.5998V5.97765L9.53564 5.89924C9.4832 5.61018 9.69305 5.40028 9.95576 5.37425L11.7688 5.26872ZM1.83874 1.33212L9.32557 0.780787C10.245 0.701932 10.4815 0.754753 11.0594 1.17452L13.4492 2.85424C13.8436 3.14309 13.975 3.22173 13.975 3.53661V12.7493C13.975 13.3266 13.7647 13.6681 13.0293 13.7203L4.33492 14.2454C3.78291 14.2717 3.52019 14.193 3.23111 13.8253L1.47116 11.5419C1.1558 11.1216 1.02466 10.8071 1.02466 10.4392V2.25041C1.02466 1.77825 1.23504 1.38441 1.83874 1.33212Z"
|
||||||
|
fill="#000000"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.7 KiB |
1
docs-site/public/icons/postgresql.svg
Normal file
1
docs-site/public/icons/postgresql.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.1 KiB |
Loading…
Add table
Add a link
Reference in a new issue