Skip to content

Landing Page #780

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
cycle4passion wants to merge 21 commits into
base: docs-v2
Choose a base branch
from
Open

Landing Page #780

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
b4132b5
fix for empty layers toggle showing small circle
cycle4passion Jan 11, 2026
56945c5
Merge remote-tracking branch 'upstream/docs-v2' into docs-v2
cycle4passion Jan 11, 2026
3aaa686
Merge remote-tracking branch 'upstream/docs-v2' into docs-v2
cycle4passion Jan 14, 2026
07b33de
Merge remote-tracking branch 'upstream/docs-v2' into docs-v2
cycle4passion Jan 16, 2026
26c0b12
Merge remote-tracking branch 'upstream/docs-v2' into docs-v2
cycle4passion Jan 19, 2026
e5b8d25
Merge remote-tracking branch 'upstream/docs-v2' into docs-v2
cycle4passion Jan 19, 2026
617112a
Merge remote-tracking branch 'upstream/docs-v2' into docs-v2
cycle4passion Jan 21, 2026
20f4b33
Merge remote-tracking branch 'upstream/docs-v2' into docs-v2
cycle4passion Jan 24, 2026
60ca72b
Merge remote-tracking branch 'upstream/docs-v2' into docs-v2
cycle4passion Jan 25, 2026
077da76
Merge remote-tracking branch 'upstream/docs-v2' into docs-v2
cycle4passion Jan 25, 2026
3268020
Merge remote-tracking branch 'upstream/docs-v2' into docs-v2
cycle4passion Jan 25, 2026
b1057d2
Merge remote-tracking branch 'upstream/docs-v2' into docs-v2
cycle4passion Jan 26, 2026
20e5cf5
Merge remote-tracking branch 'upstream/docs-v2' into docs-v2
cycle4passion Jan 26, 2026
ad1d5c1
Merge remote-tracking branch 'upstream/docs-v2' into docs-v2
cycle4passion Jan 27, 2026
555775e
Merge remote-tracking branch 'upstream/docs-v2' into docs-v2
cycle4passion Jan 31, 2026
9c170a6
Merge remote-tracking branch 'upstream/docs-v2' into docs-v2
cycle4passion Jan 31, 2026
658f85e
Merge remote-tracking branch 'upstream/docs-v2' into docs-v2
cycle4passion Feb 1, 2026
f8e3a88
Merge remote-tracking branch 'upstream/docs-v2' into docs-v2
cycle4passion Feb 1, 2026
1bd9609
Merge remote-tracking branch 'upstream/docs-v2' into docs-v2
cycle4passion Feb 1, 2026
0b1c192
Landing page
cycle4passion Feb 4, 2026
5a98338
add wenkit prefixes
cycle4passion Feb 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/src/lib/components/Stats.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
].filter((s) => s.value != null)}

<div
class="block sm:flex items-center justify-evenly px-1 py-2 rounded-xl outline m-4 outline-surface-100"
class="block sm:flex items-center justify-evenly px-1 py-2 rounded-xl outline m-4 outline-surface-content/10 bg-surface-200"
>
{#each stats as { label, value, link, intervals }, index (value)}
<a
Expand Down Expand Up @@ -81,7 +81,7 @@
</a>

{#if index < stats.length - 1}
<div class="sm:w-0.5 sm:h-12 bg-surface-100"></div>
<div class="sm:w-0.5 sm:h-12 bg-surface-content/10"></div>
{/if}
{/each}
</div>
Expand Down
310 changes: 186 additions & 124 deletions docs/src/routes/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,154 +132,216 @@
];
</script>

<header class="flex h-16 items-center px-4 py-2">
<a href="/" class="text-xl font-bold w-60">LayerChart</a>
<div class="h-screen flex flex-col overflow-hidden">
<!-- Fixed Header -->
<header class="flex-none flex h-16 items-center px-4 py-2 z-20">
<a href="/" class="text-xl font-bold w-60">LayerChart</a>

<div class="flex gap-2 grow justify-center">
{#each links as { label, href }}
<a
{href}
class={cls(
'text-sm px-3 py-1 rounded-full text-surface-content hover:bg-primary/10 ',
href === '/' && 'bg-primary-500/10 text-initial'
)}
target={href.startsWith('http') ? '_blank' : '_self'}
>
{label}
</a>
{/each}
</div>

<div class="flex items-center justify-end gap-2 w-60">
<div class="flex items-center border-r pr-2">
<ThemeSelect keyboardShortcuts />
<div class="flex grow justify-center">
<nav class="nav-bubble-container relative flex">
{#each links as { label, href }}
<a
{href}
class="nav-link text-sm px-3 py-1 rounded-full text-surface-content relative z-10"
target={href.startsWith('http') ? '_blank' : '_self'}
>
{label}
</a>
{/each}
<span class="nav-bubble"></span>
</nav>
</div>

<div class="hidden md:flex">
<Tooltip title="Discord" placement="left" offset={2}>
<Button
icon={CustomDiscord}
href="https://discord.gg/697JhMPD3t"
class="p-2"
target="_blank"
/>
</Tooltip>
<div class="flex items-center justify-end gap-2 w-60">
<div class="flex items-center border-r pr-2">
<ThemeSelect keyboardShortcuts />
</div>

<Tooltip title="Bluesky" placement="left" offset={2}>
<Button
icon={CustomBluesky}
href="https://bsky.app/profile/techniq.dev"
class="p-2"
target="_blank"
/>
</Tooltip>
<div class="hidden md:flex">
<Tooltip title="Discord" placement="left" offset={2}>
<Button
icon={CustomDiscord}
href="https://discord.gg/697JhMPD3t"
class="p-2"
target="_blank"
/>
</Tooltip>

<Tooltip title="View repository" placement="left" offset={2}>
<Button
icon={LucideGithub}
href="https://github.com/techniq/layerchart"
class="p-2"
target="_blank"
/>
</Tooltip>
<Tooltip title="Bluesky" placement="left" offset={2}>
<Button
icon={CustomBluesky}
href="https://bsky.app/profile/techniq.dev"
class="p-2"
target="_blank"
/>
</Tooltip>

<Tooltip title="View repository" placement="left" offset={2}>
<Button
icon={LucideGithub}
href="https://github.com/techniq/layerchart"
class="p-2"
target="_blank"
/>
</Tooltip>
</div>
<MenuButton
icon={LucideEllipsisVertical}
menuIcon={null}
iconOnly={true}
options={[
{
label: 'Svelte UX',
value: 'https://svelte-ux.techniq.dev',
icon: LucideArrowUpRight
},
{
label: 'Github',
value: 'https://github.com/techniq/layerchart',
icon: LucideGithub
},
{
label: 'Discord',
value: 'https://discord.gg/697JhMPD3t',
icon: CustomDiscord
},
{
label: 'Bluesky',
value: 'https://bsky.app/profile/techniq.dev',
icon: CustomBluesky
}
]}
on:change={(e) => {
window.open(e.detail.value, '_blank');
}}
class="inline-block md:hidden"
>
<span slot="selection" class="hidden"></span>
</MenuButton>
</div>
<MenuButton
icon={LucideEllipsisVertical}
menuIcon={null}
iconOnly={true}
options={[
{
label: 'Svelte UX',
value: 'https://svelte-ux.techniq.dev',
icon: LucideArrowUpRight
},
{
label: 'Github',
value: 'https://github.com/techniq/layerchart',
icon: LucideGithub
},
{
label: 'Discord',
value: 'https://discord.gg/697JhMPD3t',
icon: CustomDiscord
},
{
label: 'Bluesky',
value: 'https://bsky.app/profile/techniq.dev',
icon: CustomBluesky
}
]}
on:change={(e) => {
window.open(e.detail.value, '_blank');
}}
class="inline-block md:hidden"
>
<span slot="selection" class="hidden"></span>
</MenuButton>
</div>
</header>
</header>

<div class="absolute top-0 w-full h-256 background-gradient pointer-events-none"></div>
<!-- Fixed Hero -->
<div class="flex-none relative h-56 z-10">
<div class="absolute inset-0 pointer-events-none"></div>

<div class="relative h-140 perspective-[1000px] overflow-clip">
<h1
class="text-6xl lg:text-8xl text-center mt-8 mb-2 font-extrabold text-transparent bg-clip-text bg-linear-to-br from-blue-500 to-purple-800 tracking-wide"
>
LayerChart
</h1>
<div class="lg:text-lg text-center font-light max-w-100 px-4 mx-auto">
Composable Svelte chart components to build a large variety of visualizations
</div>
<h1
class="text-6xl lg:text-8xl text-center mt-6 mb-2 font-extrabold text-transparent bg-clip-text bg-linear-to-br from-blue-500 to-purple-800 tracking-wide"
>
LayerChart
</h1>
<div class="lg:text-lg text-center font-light max-w-100 px-4 mx-auto">
Composable Svelte chart components to build a large variety of visualizations
</div>

<div class="flex justify-center gap-3 mt-8">
<Button href="/docs/getting-started" variant="fill" rounded="full">Get Started</Button>
<Button href="/docs/examples" variant="fill-outline" rounded="full">Examples</Button>
<div class="flex justify-center gap-3 mt-6">
<Button href="/docs/getting-started" variant="fill" rounded="full">Get Started</Button>
<Button href="/docs/examples" variant="fill-outline" rounded="full">Examples</Button>
</div>
</div>

<!-- 3D Moving grid background - covers hero and examples -->
<div
class="pointer-events-none absolute inset-0 overflow-hidden opacity-30 dark:opacity-20 perspective-[1000px] perspective-origin-bottom mask-y-from-50%"
class="pointer-events-none fixed inset-0 top-0 overflow-hidden opacity-30 dark:opacity-20 perspective-[1000px] perspective-origin-top z-0"
style="mask-image: linear-gradient(transparent 0%, black 25%, black 70%, transparent 85%); -webkit-mask-image: linear-gradient(transparent 0%, black 25%, black 70%, transparent 85%);"
>
<div class="absolute inset-0 transform-3d">
<div
class="background-grid absolute left-[-200%] bottom-0 h-[300vh] w-[600vw] origin-bottom"
class="background-grid absolute left-[-200%] bottom-0 h-[140vh] w-[600vw] origin-bottom"
></div>
</div>
</div>
</div>

<div class="grid grid-cols-xs gap-4 px-4 mb-4">
{#each examples as { component, example }}
<ExampleLink {component} {example} variant="hover-label" aspect="video" />
{/each}
</div>

<Stats />
<!-- Scrollable Examples -->
<div class="flex-1 overflow-y-auto relative">
<div class="relative z-10 grid grid-cols-xs gap-4 px-4 py-4">
{#each examples as { component, example }}
<div class="example-card rounded-lg">
<ExampleLink {component} {example} variant="hover-label" aspect="video" />
</div>
{/each}
</div>
</div>

<footer class="flex justify-between px-4 py-8 border-t text-surface-content/50 text-sm">
<div>
Made by <a href="https://github.com/techniq" target="_blank" class="text-surface-content">
Sean Lynch
</a>
and
<a
href="https://github.com/techniq/layerchart/graphs/contributors"
target="_blank"
class="text-surface-content"
<!-- Fixed Footer -->
<footer class="flex-none z-2">
<Stats />
<div
class="flex justify-between px-4 py-8 border-t text-surface-content/50 text-sm bg-surface-300"
>
contributors
</a>
</div>
<div>
Made by <a href="https://github.com/techniq" target="_blank" class="text-surface-content">
Sean Lynch
</a>
and
<a
href="https://github.com/techniq/layerchart/graphs/contributors"
target="_blank"
class="text-surface-content"
>
contributors
</a>
</div>

<div class="flex gap-5">
<a href="/docs/guides/LLMs" target="_blank">LLMs</a>
<a href="https://github.com/techniq/layerchart" target="_blank">Github</a>
<a href="/docs/releases">Releases</a>
</div>
</footer>
<div class="flex gap-5">
<a href="/docs/guides/LLMs" target="_blank">LLMs</a>
<a href="https://github.com/techniq/layerchart" target="_blank">Github</a>
<a href="/docs/releases">Releases</a>
</div>
</div>
</footer>
</div>

<style>
/* Navigation bubble slider */
.nav-bubble-container {
position: relative;
--link-width: 80px;
--link-height: 28px;
--bubble-bg: color-mix(in srgb, var(--color-primary-500) 10%, transparent);
}

.nav-bubble {
position: absolute;
height: var(--link-height);
width: var(--link-width);
background: var(--bubble-bg);
border-radius: 9999px;
pointer-events: none;
top: 50%;
left: 0;
border: 1px solid var(--color-surface-content/10);
transform: translateY(-50%) translateX(0);
transition:
transform 0.3s ease,
border-color 0.3s ease;
}

.nav-link {
position: relative;
z-index: 10;
width: var(--link-width);
text-align: center;
}

/* Move bubble to second link on hover */
.nav-link:nth-child(2):hover ~ .nav-bubble {
transform: translateY(-50%) translateX(100%);
}

/* Highlight active link text */
.nav-bubble-container:not(:hover) .nav-link:nth-child(1),
.nav-link:hover {
color: var(--color-primary-600);
}

:global(.dark) .nav-bubble-container:not(:hover) .nav-link:nth-child(1),
:global(.dark) .nav-link:hover {
color: var(--color-content-100);
}

.background-grid {
--size: 100px;
--size: 125px;
--line: color-mix(in srgb, var(--color-surface-content) 30%, transparent);
--line-major: color-mix(in srgb, var(--color-surface-content) 40%, transparent);

Expand Down Expand Up @@ -316,7 +378,7 @@
transparent 0.5px,
transparent calc(var(--size) / 5)
);
animation: grid-scroll 2s linear infinite;
animation: grid-scroll 6s linear infinite;
}

@keyframes grid-scroll {
Expand Down
Loading