From 632bacf771bc1482a2725fcfeac65140f4edfac7 Mon Sep 17 00:00:00 2001 From: Caio Arias Date: Mon, 9 Mar 2026 16:46:51 +0000 Subject: [PATCH 1/6] Add new Init 4.0 hero and schedule sections - Redesign hero section with repeating INIT wordmarks, gradient background, and CTA buttons - Add interactive schedule card grid with 3D tilt hover, flip animation, and countdown timers - Download Figma assets (gradient bg, divider, card noise/pattern, illustration) - Fix missing date-fns import in +page.svelte module script (caused 500 error) - Fix Author.svelte null reference crash on client-side hydration Co-Authored-By: Claude Opus 4.6 --- src/markdoc/layouts/Author.svelte | 6 +- .../init/(assets)/card-bg-noise-reveal.svg | 130 +++++++++ .../(init)/init/(assets)/card-bg-noise.svg | 130 +++++++++ .../(init)/init/(assets)/card-bg-pattern.svg | 130 +++++++++ .../(assets)/card-illustration-console.svg | 18 ++ .../(init)/init/(assets)/hero-divider.svg | 3 + .../(init)/init/(assets)/hero-gradient-bg.svg | 223 +++++++++++++++ .../(init)/init/(assets)/hero-wordmark.svg | 28 ++ .../(init)/init/(assets)/schedule-line.svg | 3 + .../(init)/init/(components)/hero.svelte | 173 ++++++++---- .../init/(components)/schedule-card.svelte | 194 +++++++++++++ .../(init)/init/(components)/schedule.svelte | 53 ++++ src/routes/(init)/init/+page.svelte | 257 ++---------------- 13 files changed, 1056 insertions(+), 292 deletions(-) create mode 100644 src/routes/(init)/init/(assets)/card-bg-noise-reveal.svg create mode 100644 src/routes/(init)/init/(assets)/card-bg-noise.svg create mode 100644 src/routes/(init)/init/(assets)/card-bg-pattern.svg create mode 100644 src/routes/(init)/init/(assets)/card-illustration-console.svg create mode 100644 src/routes/(init)/init/(assets)/hero-divider.svg create mode 100644 src/routes/(init)/init/(assets)/hero-gradient-bg.svg create mode 100644 src/routes/(init)/init/(assets)/hero-wordmark.svg create mode 100644 src/routes/(init)/init/(assets)/schedule-line.svg create mode 100644 src/routes/(init)/init/(components)/schedule-card.svelte create mode 100644 src/routes/(init)/init/(components)/schedule.svelte diff --git a/src/markdoc/layouts/Author.svelte b/src/markdoc/layouts/Author.svelte index 47cd544700..eb2286833d 100644 --- a/src/markdoc/layouts/Author.svelte +++ b/src/markdoc/layouts/Author.svelte @@ -19,7 +19,7 @@ const posts = getContext('posts'); const authors = getContext('authors'); - const author = authors.find( + const author = authors?.find( (p) => page.url.pathname.substring(page.url.pathname.lastIndexOf('/') + 1) === p.slug ); @@ -170,8 +170,8 @@
    - {#each posts.filter( (p) => (Array.isArray(p.author) ? p.author.includes(author?.slug ?? '') : p.author === author?.slug) ) as post} - {@const authorData = getPostAuthors(post.author, authors)} + {#each (posts ?? []).filter( (p) => (Array.isArray(p.author) ? p.author.includes(author?.slug ?? '') : p.author === author?.slug) ) as post} + {@const authorData = getPostAuthors(post.author, authors ?? [])} {@const primaryAuthor = authorData.primaryAuthor ?? author}
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/routes/(init)/init/(assets)/card-bg-noise.svg b/src/routes/(init)/init/(assets)/card-bg-noise.svg new file mode 100644 index 0000000000..1d2ad8e1d3 --- /dev/null +++ b/src/routes/(init)/init/(assets)/card-bg-noise.svg @@ -0,0 +1,130 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/routes/(init)/init/(assets)/card-bg-pattern.svg b/src/routes/(init)/init/(assets)/card-bg-pattern.svg new file mode 100644 index 0000000000..5aa79eb864 --- /dev/null +++ b/src/routes/(init)/init/(assets)/card-bg-pattern.svg @@ -0,0 +1,130 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/routes/(init)/init/(assets)/card-illustration-console.svg b/src/routes/(init)/init/(assets)/card-illustration-console.svg new file mode 100644 index 0000000000..3ea1d0c658 --- /dev/null +++ b/src/routes/(init)/init/(assets)/card-illustration-console.svg @@ -0,0 +1,18 @@ + +
     +
     + + + + + + + + + + + + + + +     diff --git a/src/routes/(init)/init/(assets)/hero-divider.svg b/src/routes/(init)/init/(assets)/hero-divider.svg new file mode 100644 index 0000000000..457a8b4126 --- /dev/null +++ b/src/routes/(init)/init/(assets)/hero-divider.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/routes/(init)/init/(assets)/hero-gradient-bg.svg b/src/routes/(init)/init/(assets)/hero-gradient-bg.svg new file mode 100644 index 0000000000..4bcb6d9c14 --- /dev/null +++ b/src/routes/(init)/init/(assets)/hero-gradient-bg.svg @@ -0,0 +1,223 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/routes/(init)/init/(assets)/hero-wordmark.svg b/src/routes/(init)/init/(assets)/hero-wordmark.svg new file mode 100644 index 0000000000..235d8e8e11 --- /dev/null +++ b/src/routes/(init)/init/(assets)/hero-wordmark.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/routes/(init)/init/(assets)/schedule-line.svg b/src/routes/(init)/init/(assets)/schedule-line.svg new file mode 100644 index 0000000000..b7bafb9e4f --- /dev/null +++ b/src/routes/(init)/init/(assets)/schedule-line.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/routes/(init)/init/(components)/hero.svelte b/src/routes/(init)/init/(components)/hero.svelte index d29daa1856..a1c65c3dd0 100644 --- a/src/routes/(init)/init/(components)/hero.svelte +++ b/src/routes/(init)/init/(components)/hero.svelte @@ -1,13 +1,8 @@ -
    - {initDates} -
    - Init logo - -
    -
    -
    -

    - Join us at Appwrite for another week of exciting new announcements and events. -

    +
    + + - + + Announcement video + + + +
    +
    +
- + diff --git a/src/routes/(init)/init/(components)/schedule-card.svelte b/src/routes/(init)/init/(components)/schedule-card.svelte new file mode 100644 index 0000000000..76c439e2a1 --- /dev/null +++ b/src/routes/(init)/init/(components)/schedule-card.svelte @@ -0,0 +1,194 @@ + + +
{ if (e.key === 'Enter' || e.key === ' ') handleClick(); }} +> + + {#if showRevealButton && isHovering} + + Flip + + {/if} +
+ +
+ + + + + {#if !showContent} + + {/if} + + {#if showContent} + +
+ {#if illustration} + {title} + {/if} + {#if title} +

+ {title} +

+ {/if} +
+ {:else if showRevealButton} + +
+ + REVEAL + +
+ {:else if showTimer} + +
+ + :: + +
+ {/if} +
+ + +
+ +
+ {#if illustration} + {title} + {/if} + {#if title} +

+ {title} +

+ {/if} +
+
+
+
+ + diff --git a/src/routes/(init)/init/(components)/schedule.svelte b/src/routes/(init)/init/(components)/schedule.svelte new file mode 100644 index 0000000000..8eb894a0aa --- /dev/null +++ b/src/routes/(init)/init/(components)/schedule.svelte @@ -0,0 +1,53 @@ + + +
+
+
+ +
+ +
+

+ // schedule +

+

+ // MARCH 12 - 18 +

+
+
+ + +
+ {#each days as day, i} + + {/each} +
+
+
+
diff --git a/src/routes/(init)/init/+page.svelte b/src/routes/(init)/init/+page.svelte index 873bc6a2b0..56643bf91a 100644 --- a/src/routes/(init)/init/+page.svelte +++ b/src/routes/(init)/init/+page.svelte @@ -1,4 +1,6 @@ @@ -230,55 +70,4 @@ -{#if today >= base} - - -
- {#each days as day, i} - {@const index = i + 1} - - {/each} -
- - -{/if} - - - -
- - - -
- - + From e22c74916e243a176667d183b05de676270d5244 Mon Sep 17 00:00:00 2001 From: Caio Arias Date: Tue, 10 Mar 2026 17:38:04 +0000 Subject: [PATCH 2/6] Add day details section, update schedule cards and hero dates - Add day-detail and day-details components for daily announcement sections - Update card-bg-pattern SVG with new spacing/dimensions - Center illustrations on schedule cards, add /DAY labels and anchor links - Add hero crosshairs asset and update hero dates to March 23-27 - Configure 5 days (Mon-Fri) with titles, descriptions, and links Co-Authored-By: Claude Opus 4.6 --- .../(init)/init/(assets)/card-bg-pattern.svg | 254 ++++++++--------- .../(init)/init/(assets)/hero-crosshairs.svg | 208 ++++++++++++++ .../init/(components)/day-detail.svelte | 261 ++++++++++++++++++ .../init/(components)/day-details.svelte | 55 ++++ .../(init)/init/(components)/hero.svelte | 20 +- .../init/(components)/schedule-card.svelte | 72 ++--- .../(init)/init/(components)/schedule.svelte | 15 +- src/routes/(init)/init/+page.svelte | 167 ++++++++++- 8 files changed, 865 insertions(+), 187 deletions(-) create mode 100644 src/routes/(init)/init/(assets)/hero-crosshairs.svg create mode 100644 src/routes/(init)/init/(components)/day-detail.svelte create mode 100644 src/routes/(init)/init/(components)/day-details.svelte diff --git a/src/routes/(init)/init/(assets)/card-bg-pattern.svg b/src/routes/(init)/init/(assets)/card-bg-pattern.svg index 5aa79eb864..4bd6c645d8 100644 --- a/src/routes/(init)/init/(assets)/card-bg-pattern.svg +++ b/src/routes/(init)/init/(assets)/card-bg-pattern.svg @@ -1,130 +1,130 @@ - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/routes/(init)/init/(assets)/hero-crosshairs.svg b/src/routes/(init)/init/(assets)/hero-crosshairs.svg new file mode 100644 index 0000000000..65820b95e6 --- /dev/null +++ b/src/routes/(init)/init/(assets)/hero-crosshairs.svg @@ -0,0 +1,208 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/routes/(init)/init/(components)/day-detail.svelte b/src/routes/(init)/init/(components)/day-detail.svelte new file mode 100644 index 0000000000..b5d4668475 --- /dev/null +++ b/src/routes/(init)/init/(components)/day-detail.svelte @@ -0,0 +1,261 @@ + + +
+ +
+
+
+

+ {dayName} // DAY {String(dayNumber).padStart(2, '0')} +

+

+ // {date} +

+
+
+ + {#if isRevealed} + +
+ +
+ +
+ +
+ + INIT + + + {productLabel} + +
+ + + + + + {#if illustration} +
+ {title} +
+ {/if} +
+ + +
+
+

+ {title} +

+

+ {description} +

+
+ + {#if videoHref} + + + WATCH THE VIDEO + + + + {/if} +
+
+ + + {#if links.length > 0} +
+ {#each links as link, i} + +
+
+ + // {link.type.replace('//', '').trim()} + +
+ + {link.title} + + + {link.action} + + +
+
+ + {/each} +
+ {/if} +
+ {:else} + +
+ +
+ +
+ + locked + +
+ + + + + +
+ + :: + +
+
+
+ {/if} +
+ + diff --git a/src/routes/(init)/init/(components)/day-details.svelte b/src/routes/(init)/init/(components)/day-details.svelte new file mode 100644 index 0000000000..1da38992cd --- /dev/null +++ b/src/routes/(init)/init/(components)/day-details.svelte @@ -0,0 +1,55 @@ + + +
+
+
+ {#each days as day} + + {/each} +
+
+
diff --git a/src/routes/(init)/init/(components)/hero.svelte b/src/routes/(init)/init/(components)/hero.svelte index a1c65c3dd0..ffe35a1b27 100644 --- a/src/routes/(init)/init/(components)/hero.svelte +++ b/src/routes/(init)/init/(components)/hero.svelte @@ -1,7 +1,7 @@
{ if (e.key === 'Enter' || e.key === ' ') handleClick(); }} > - - {#if showRevealButton && isHovering} + + {#if isHovering} - Flip + {showContent ? 'View' : showRevealButton ? 'Reveal' : 'Locked'} {/if}
-
- {#if illustration} + +

+ /DAY {dayNumber} +

+ {#if illustration} +
{title} - {/if} - {#if title} -

- {title} -

- {/if} -
+
+ {/if} + {#if title} +

+ {title} +

+ {/if} {:else if showRevealButton}
REVEAL @@ -165,20 +172,23 @@ class="pointer-events-none absolute left-0 top-0 h-full select-none opacity-[0.02]" aria-hidden="true" /> -
- {#if illustration} +

+ /DAY {dayNumber} +

+ {#if illustration} +
{title} - {/if} - {#if title} -

- {title} -

- {/if} -
+
+ {/if} + {#if title} +

+ {title} +

+ {/if}
@@ -188,7 +198,7 @@ font-variant-numeric: tabular-nums; } - .flip-cursor { + .custom-cursor { cursor: none; } diff --git a/src/routes/(init)/init/(components)/schedule.svelte b/src/routes/(init)/init/(components)/schedule.svelte index 8eb894a0aa..5b6cf30bc2 100644 --- a/src/routes/(init)/init/(components)/schedule.svelte +++ b/src/routes/(init)/init/(components)/schedule.svelte @@ -7,6 +7,7 @@ illustration: string; release: Date; revealed?: boolean; + dayNumber: number; } interface Props { @@ -21,18 +22,13 @@
- -
+
+

- // schedule + // schedule

- // MARCH 12 - 18 + // MARCH 23 - 27

@@ -45,6 +41,7 @@ illustration={day.illustration} release={day.release} revealed={day.revealed ?? false} + dayNumber={day.dayNumber} /> {/each}
diff --git a/src/routes/(init)/init/+page.svelte b/src/routes/(init)/init/+page.svelte index 56643bf91a..a49ab9721a 100644 --- a/src/routes/(init)/init/+page.svelte +++ b/src/routes/(init)/init/+page.svelte @@ -12,6 +12,7 @@ import { buildOpenGraphImage } from '$lib/utils/metadata'; import Hero from './(components)/hero.svelte'; import Schedule from './(components)/schedule.svelte'; + import DayDetails from './(components)/day-details.svelte'; import IllustrationConsole from './(assets)/card-illustration-console.svg'; const title = 'Init - Appwrite'; @@ -21,32 +22,170 @@ let { data } = $props(); const now = new Date(); + const detailDays = [ + { + dayName: 'MONday', + dayNumber: 0, + date: 'march - 23 - 2026', + title: 'Appwrite Console 2.0', + description: + 'A completely redesigned console experience with improved navigation, faster workflows, and a modern interface.', + illustration: IllustrationConsole, + productLabel: 'CONSOLE 2.0', + videoHref: '#', + links: [ + { + type: '// blog post', + title: 'Announcing Appwrite Console 2.0', + action: 'Read article', + href: '#' + }, + { + type: '// blog post', + title: 'How to host SSR web apps on Appwrite Sites', + action: 'Read article', + href: '#' + }, + { + type: '// DOCS', + title: 'Getting started with Console 2.0', + action: 'go to docs', + href: '#' + } + ], + release: new Date('2026-03-23T07:00:00.000Z'), + revealed: true + }, + { + dayName: 'TUESday', + dayNumber: 1, + date: 'march - 24 - 2026', + title: 'PostGres + Vector DB', + description: + 'Full PostgreSQL support with built-in vector database capabilities for AI-powered search and embeddings.', + illustration: IllustrationConsole, + productLabel: 'DATABASES', + videoHref: '#', + links: [ + { + type: '// blog post', + title: 'Introducing PostGres + Vector DB', + action: 'Read article', + href: '#' + }, + { + type: '// DOCS', + title: 'Setting up Vector DB', + action: 'go to docs', + href: '#' + } + ], + release: new Date('2026-03-24T07:00:00.000Z'), + revealed: true + }, + { + dayName: 'WEDNESday', + dayNumber: 2, + date: 'march - 25 - 2026', + title: 'S3 Proxy Servers', + description: + 'A streamlined solution for easily deploying static and server-rendered applications, designed to simplify your workflow.', + illustration: IllustrationConsole, + productLabel: 'STORAGE', + videoHref: '#', + links: [ + { + type: '// blog post', + title: 'Announcing S3 Proxy Servers', + action: 'Read article', + href: '#' + }, + { + type: '// blog post', + title: 'How to use S3-compatible storage with Appwrite', + action: 'Read article', + href: '#' + }, + { + type: '// DOCS', + title: 'Configuring S3 Proxy Servers', + action: 'go to docs', + href: '#' + } + ], + release: new Date('2026-03-25T07:00:00.000Z'), + revealed: true + }, + { + dayName: 'THURSday', + dayNumber: 3, + date: 'march - 26 - 2026', + title: 'Hyperloop B', + description: + 'Next-generation real-time data synchronization with ultra-low latency across all connected clients.', + illustration: IllustrationConsole, + productLabel: 'REALTIME', + videoHref: '#', + links: [ + { + type: '// blog post', + title: 'Introducing Hyperloop B', + action: 'Read article', + href: '#' + }, + { + type: '// DOCS', + title: 'Getting started with Hyperloop B', + action: 'go to docs', + href: '#' + } + ], + release: new Date('2026-03-26T07:00:00.000Z'), + revealed: true + }, + { + dayName: 'FRIday', + dayNumber: 4, + date: 'march - 27 - 2026', + release: new Date('2026-03-27T07:00:00.000Z'), + revealed: false + } + ]; + const scheduleDays = [ { title: 'APPWRITE CONSOLE 2.0', illustration: IllustrationConsole, - release: new Date(now.getTime() - 86400000), // already released (yesterday) - revealed: true + release: new Date('2026-03-23T07:00:00.000Z'), + revealed: true, + dayNumber: 0 }, { - title: 'Day 2 Reveal', - illustration: '', - release: new Date(now.getTime() - 3600000) // released 1 hour ago (flippable) + title: 'POSTGRES + VECTOR DB', + illustration: IllustrationConsole, + release: new Date('2026-03-24T07:00:00.000Z'), + revealed: true, + dayNumber: 1 }, { - title: 'Day 3', - illustration: '', - release: new Date(now.getTime() + 3600000) // in 1 hour (locked with timer) + title: 'S3 PROXY SERVERS', + illustration: IllustrationConsole, + release: new Date('2026-03-25T07:00:00.000Z'), + revealed: true, + dayNumber: 2 }, { - title: 'Day 4', - illustration: '', - release: new Date(now.getTime() + 86400000) // in 1 day (locked with timer) + title: 'HYPERLOOP B', + illustration: IllustrationConsole, + release: new Date('2026-03-26T07:00:00.000Z'), + revealed: true, + dayNumber: 3 }, { - title: 'Day 5', + title: 'NEW APIS', illustration: '', - release: new Date(now.getTime() + 172800000) // in 2 days (locked with timer) + release: new Date('2026-03-27T07:00:00.000Z'), + dayNumber: 4 } ]; @@ -71,3 +210,5 @@ + + From 7de53aad834fa4ac5ad9679445fea1824e7e9ba4 Mon Sep 17 00:00:00 2001 From: Caio Arias Date: Tue, 10 Mar 2026 19:05:28 +0000 Subject: [PATCH 3/6] Add sticky gradient nav, footer, and scroll offset improvements MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add init-sticky-nav with gradient overlay that shrinks on scroll (411→160px) and reveals nav content at 65vh - Move hero gradient into sticky nav, reduce hero height for 80px gap before schedule - Add 180px scroll offset to day anchors so sticky nav doesn't block content - Add site footer with matching page padding and solid background - Center illustrations on schedule cards Co-Authored-By: Claude Opus 4.6 --- .../(init)/init/(assets)/init-lockup-logo.svg | 6 + .../init/(components)/day-detail.svelte | 2 +- .../(init)/init/(components)/day.svelte | 2 +- .../(init)/init/(components)/hero.svelte | 19 +-- .../init/(components)/init-sticky-nav.svelte | 148 ++++++++++++++++++ .../init/(components)/schedule-card.svelte | 5 +- src/routes/(init)/init/+page.svelte | 15 ++ 7 files changed, 177 insertions(+), 20 deletions(-) create mode 100644 src/routes/(init)/init/(assets)/init-lockup-logo.svg create mode 100644 src/routes/(init)/init/(components)/init-sticky-nav.svelte diff --git a/src/routes/(init)/init/(assets)/init-lockup-logo.svg b/src/routes/(init)/init/(assets)/init-lockup-logo.svg new file mode 100644 index 0000000000..7c3221e200 --- /dev/null +++ b/src/routes/(init)/init/(assets)/init-lockup-logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/routes/(init)/init/(components)/day-detail.svelte b/src/routes/(init)/init/(components)/day-detail.svelte index b5d4668475..bb3b94eaef 100644 --- a/src/routes/(init)/init/(components)/day-detail.svelte +++ b/src/routes/(init)/init/(components)/day-detail.svelte @@ -44,7 +44,7 @@ const isRevealed = $derived(revealed || timerDone); -
+
diff --git a/src/routes/(init)/init/(components)/day.svelte b/src/routes/(init)/init/(components)/day.svelte index 6ed380be55..b948a9169d 100644 --- a/src/routes/(init)/init/(components)/day.svelte +++ b/src/routes/(init)/init/(components)/day.svelte @@ -63,7 +63,7 @@ {#if hasReleased} -
+
{#snippet title()}
diff --git a/src/routes/(init)/init/(components)/hero.svelte b/src/routes/(init)/init/(components)/hero.svelte index ffe35a1b27..8cd37e2c6e 100644 --- a/src/routes/(init)/init/(components)/hero.svelte +++ b/src/routes/(init)/init/(components)/hero.svelte @@ -1,7 +1,6 @@ -
- - - +
-
+
diff --git a/src/routes/(init)/init/(components)/init-sticky-nav.svelte b/src/routes/(init)/init/(components)/init-sticky-nav.svelte new file mode 100644 index 0000000000..21e21c5eb4 --- /dev/null +++ b/src/routes/(init)/init/(components)/init-sticky-nav.svelte @@ -0,0 +1,148 @@ + + + +
+ +
+ +
+ + + {#if navContentOpacity > 0} +
+
+ +
+ Init +

+ APPWRITE LAUNCH WEEK 4.0
+ MARCH 23 - 27
+ 2026 +

+
+ + +
+
+ {#each days as day} + + {/each} +
+ + {#if claimed} + + + YOUR INIT TICKET + + + + {:else} +
{ + claiming = true; + }} + > + +
+ {/if} +
+
+
+ {/if} +
diff --git a/src/routes/(init)/init/(components)/schedule-card.svelte b/src/routes/(init)/init/(components)/schedule-card.svelte index 9787463f55..2f19aae3d5 100644 --- a/src/routes/(init)/init/(components)/schedule-card.svelte +++ b/src/routes/(init)/init/(components)/schedule-card.svelte @@ -56,7 +56,10 @@ isFlipped = true; } else if (showContent) { const el = document.getElementById(`day-${dayNumber}`); - if (el) el.scrollIntoView({ behavior: 'smooth' }); + if (el) { + const top = el.getBoundingClientRect().top + window.scrollY - 180; + window.scrollTo({ top, behavior: 'smooth' }); + } } } diff --git a/src/routes/(init)/init/+page.svelte b/src/routes/(init)/init/+page.svelte index a49ab9721a..66b1a12087 100644 --- a/src/routes/(init)/init/+page.svelte +++ b/src/routes/(init)/init/+page.svelte @@ -13,7 +13,9 @@ import Hero from './(components)/hero.svelte'; import Schedule from './(components)/schedule.svelte'; import DayDetails from './(components)/day-details.svelte'; + import InitStickyNav from './(components)/init-sticky-nav.svelte'; import IllustrationConsole from './(assets)/card-illustration-console.svg'; + import { FooterNav, MainFooter } from '$lib/components'; const title = 'Init - Appwrite'; const description = 'The start of something new.'; @@ -21,6 +23,8 @@ let { data } = $props(); + let scrollY = $state(0); + const now = new Date(); const detailDays = [ { @@ -207,8 +211,19 @@ + + + + + +
+
+ + +
+
From ae791f8c5e686f576c8e8a7e91d3246dc6f3c7ce Mon Sep 17 00:00:00 2001 From: Caio Arias Date: Wed, 11 Mar 2026 15:58:21 +0000 Subject: [PATCH 4/6] Add holographic border effect to schedule cards and set 1280px max-width - Add cursor-tracking holographic gradient overlay on card borders using CSS mask composite - Increase hero date text to 18px with 125% line-height - Set day 3 schedule card to reveal state for testing - Constrain all page content containers to 1280px max-width Co-Authored-By: Claude Opus 4.6 --- .../init/(components)/day-details.svelte | 2 +- .../(init)/init/(components)/hero.svelte | 4 +- .../init/(components)/init-sticky-nav.svelte | 2 +- .../init/(components)/schedule-card.svelte | 45 +++++++++++++++++++ .../(init)/init/(components)/schedule.svelte | 2 +- src/routes/(init)/init/+page.svelte | 5 +-- 6 files changed, 52 insertions(+), 8 deletions(-) diff --git a/src/routes/(init)/init/(components)/day-details.svelte b/src/routes/(init)/init/(components)/day-details.svelte index 1da38992cd..79dc55ef77 100644 --- a/src/routes/(init)/init/(components)/day-details.svelte +++ b/src/routes/(init)/init/(components)/day-details.svelte @@ -33,7 +33,7 @@ class="relative w-full" style="background: rgba(35, 35, 37, 0.9); border-top: 1px solid rgba(255, 255, 255, 0.06);" > -
+
{#each days as day} -
+
@@ -62,7 +62,7 @@
-

+

APPWRITE LAUNCH WEEK 4.0
MARCH 23 - 27
2026 diff --git a/src/routes/(init)/init/(components)/init-sticky-nav.svelte b/src/routes/(init)/init/(components)/init-sticky-nav.svelte index 21e21c5eb4..4f15c0e54c 100644 --- a/src/routes/(init)/init/(components)/init-sticky-nav.svelte +++ b/src/routes/(init)/init/(components)/init-sticky-nav.svelte @@ -78,7 +78,7 @@ class="pointer-events-auto absolute inset-x-0 bottom-0 top-[72px] flex items-center transition-opacity duration-100 ease-out" style="opacity: {navContentOpacity};" > -

+
+ +
+
{/if}
+ + +
diff --git a/src/routes/(init)/init/(components)/schedule.svelte b/src/routes/(init)/init/(components)/schedule.svelte index 5b6cf30bc2..81c47789e1 100644 --- a/src/routes/(init)/init/(components)/schedule.svelte +++ b/src/routes/(init)/init/(components)/schedule.svelte @@ -18,7 +18,7 @@
-
+
diff --git a/src/routes/(init)/init/+page.svelte b/src/routes/(init)/init/+page.svelte index 66b1a12087..1319770bd4 100644 --- a/src/routes/(init)/init/+page.svelte +++ b/src/routes/(init)/init/+page.svelte @@ -181,8 +181,7 @@ { title: 'HYPERLOOP B', illustration: IllustrationConsole, - release: new Date('2026-03-26T07:00:00.000Z'), - revealed: true, + release: new Date('2026-03-01T07:00:00.000Z'), dayNumber: 3 }, { @@ -222,7 +221,7 @@
-
+
From 95dca1ecef7638ff598135909fe7a7e615ab95b4 Mon Sep 17 00:00:00 2001 From: Caio Arias Date: Fri, 10 Apr 2026 15:29:12 +0100 Subject: [PATCH 5/6] Add responsive breakpoints, sticky nav improvements, and Hyperloop illustration - Add mobile (<768px) and tablet (768-1023px) breakpoints across all Init page sections - Hero: scale INIT wordmark with CSS custom properties so it always aligns to left margin - Sticky nav: track active day section, show prev/next day nav on mobile/tablet - Schedule: horizontal scroll on mobile/tablet, 5-column grid on desktop - Day detail: flex layout so illustration scales with viewport, no overlap with text - Add Hyperloop B illustration SVG and update day 3 content from Figma - Remove crosshair pattern from all illustration areas except first day - Allow Cloudflare tunnel hosts in Vite config Co-Authored-By: Claude Opus 4.6 --- .../init/(assets)/illustration-console.svg | 116 ++++++++++++++++++ .../init/(assets)/illustration-hyperloop.svg | 53 ++++++++ .../init/(components)/day-detail.svelte | 93 +++++++------- .../init/(components)/day-details.svelte | 5 +- .../(init)/init/(components)/hero.svelte | 46 +++++-- .../init/(components)/init-sticky-nav.svelte | 107 ++++++++++++---- .../init/(components)/schedule-card.svelte | 2 +- .../(init)/init/(components)/schedule.svelte | 22 ++-- src/routes/(init)/init/+page.svelte | 22 ++-- vite.config.ts | 3 + 10 files changed, 370 insertions(+), 99 deletions(-) create mode 100644 src/routes/(init)/init/(assets)/illustration-console.svg create mode 100644 src/routes/(init)/init/(assets)/illustration-hyperloop.svg diff --git a/src/routes/(init)/init/(assets)/illustration-console.svg b/src/routes/(init)/init/(assets)/illustration-console.svg new file mode 100644 index 0000000000..c936229306 --- /dev/null +++ b/src/routes/(init)/init/(assets)/illustration-console.svg @@ -0,0 +1,116 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/routes/(init)/init/(assets)/illustration-hyperloop.svg b/src/routes/(init)/init/(assets)/illustration-hyperloop.svg new file mode 100644 index 0000000000..6207e7d21c --- /dev/null +++ b/src/routes/(init)/init/(assets)/illustration-hyperloop.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/routes/(init)/init/(components)/day-detail.svelte b/src/routes/(init)/init/(components)/day-detail.svelte index bb3b94eaef..2c09321e22 100644 --- a/src/routes/(init)/init/(components)/day-detail.svelte +++ b/src/routes/(init)/init/(components)/day-detail.svelte @@ -16,6 +16,7 @@ dayNumber: number; date: string; title?: string; + showIllustrationPattern?: boolean; description?: string; illustration?: string; productLabel?: string; @@ -36,7 +37,8 @@ videoHref = '', links = [], release, - revealed = false + revealed = false, + showIllustrationPattern = false }: Props = $props(); const { hours, minutes, seconds } = createCountdown(release); @@ -64,16 +66,37 @@ class="dashed-border relative overflow-hidden" style="background-color: #19191C;" > - -
- + +
+ +
+
+

+ {title} +

+

+ {description} +

+
+ + {#if videoHref} + + + WATCH THE VIDEO + + + + {/if} +
+ +
- + {#if showIllustrationPattern} + + {/if} {#if illustration} -
+
{title} {/if}
- - -
-
-

- {title} -

-

- {description} -

-
- - {#if videoHref} - - - WATCH THE VIDEO - - - - {/if} -
{#if links.length > 0} -
+
{#each links as link, i}
-
+
// {link.type.replace('//', '').trim()} -
- +
+ {link.title} - + {link.action} diff --git a/src/routes/(init)/init/(components)/day-details.svelte b/src/routes/(init)/init/(components)/day-details.svelte index 79dc55ef77..eeed791d50 100644 --- a/src/routes/(init)/init/(components)/day-details.svelte +++ b/src/routes/(init)/init/(components)/day-details.svelte @@ -33,9 +33,9 @@ class="relative w-full" style="background: rgba(35, 35, 37, 0.9); border-top: 1px solid rgba(255, 255, 255, 0.06);" > -
+
- {#each days as day} + {#each days as day, i} {/each}
diff --git a/src/routes/(init)/init/(components)/hero.svelte b/src/routes/(init)/init/(components)/hero.svelte index f4eb3ee525..6f019fa9ea 100644 --- a/src/routes/(init)/init/(components)/hero.svelte +++ b/src/routes/(init)/init/(components)/hero.svelte @@ -11,13 +11,16 @@ let claiming: boolean = $state(false); -
+
-
-
+
+
- -
+ +
{#each { length: 11 } as _, i} {@const isFilled = i === 5} @@ -59,10 +63,10 @@ /> -
+
-

+

APPWRITE LAUNCH WEEK 4.0
MARCH 23 - 27
2026 @@ -70,7 +74,7 @@

-
+
{#if claimed}
+ + diff --git a/src/routes/(init)/init/(components)/init-sticky-nav.svelte b/src/routes/(init)/init/(components)/init-sticky-nav.svelte index 4f15c0e54c..bec2218f2f 100644 --- a/src/routes/(init)/init/(components)/init-sticky-nav.svelte +++ b/src/routes/(init)/init/(components)/init-sticky-nav.svelte @@ -14,27 +14,31 @@ let { scrollY, claimed, ticketId }: Props = $props(); let claiming: boolean = $state(false); - const MAX_HEIGHT = 411; - const MIN_HEIGHT = 160; const REVEAL_DURATION = 40; // px of scroll over which content fades in let viewportHeight = $state(typeof window !== 'undefined' ? window.innerHeight : 900); - // Reveal threshold: 65vh — responsive to viewport size - let revealThreshold = $derived(viewportHeight * 0.65); + let viewportWidth = $state(typeof window !== 'undefined' ? window.innerWidth : 1200); + // Reveal threshold: 55vh — responsive to viewport size + let revealThreshold = $derived(viewportHeight * 0.55); + + // Responsive gradient heights + let maxHeight = $derived(viewportWidth < 768 ? 200 : viewportWidth < 1024 ? 300 : 411); + let minHeight = $derived(viewportWidth < 768 ? 120 : viewportWidth < 1024 ? 140 : 160); $effect(() => { function onResize() { viewportHeight = window.innerHeight; + viewportWidth = window.innerWidth; } window.addEventListener('resize', onResize, { passive: true }); return () => window.removeEventListener('resize', onResize); }); - let gradientHeight = $derived(Math.max(MIN_HEIGHT, MAX_HEIGHT - scrollY)); + let gradientHeight = $derived(Math.max(minHeight, maxHeight - scrollY)); let navContentOpacity = $derived( Math.min(1, Math.max(0, (scrollY - revealThreshold) / REVEAL_DURATION)) ); - let isCompressed = $derived(gradientHeight <= MIN_HEIGHT); + let isCompressed = $derived(gradientHeight <= minHeight); const days = [ { label: 'DAY 0', dayNumber: 0 }, @@ -44,6 +48,25 @@ { label: 'DAY 4', dayNumber: 4 } ]; + // Track which day section is currently in view + let activeDay = $state(0); + + $effect(() => { + // Re-run when scrollY changes + scrollY; + for (let i = days.length - 1; i >= 0; i--) { + const el = document.getElementById(`day-${i}`); + if (el) { + const rect = el.getBoundingClientRect(); + if (rect.top <= 250) { + activeDay = i; + return; + } + } + } + activeDay = 0; + }); + function scrollToDay(dayNumber: number) { const el = document.getElementById(`day-${dayNumber}`); if (el) { @@ -51,6 +74,16 @@ window.scrollTo({ top, behavior: 'smooth' }); } } + + function nextDay() { + const next = Math.min(activeDay + 1, days.length - 1); + scrollToDay(next); + } + + function prevDay() { + const prev = Math.max(activeDay - 1, 0); + scrollToDay(prev); + } @@ -59,10 +92,10 @@ style="height: {gradientHeight}px;" class:pointer-events-auto={isCompressed} > - +
-
- -
+
+ +
Init -

+

- -
-
+ +
+ + + +
+ + +
+ @@ -110,12 +169,12 @@ {#if claimed} - + YOUR INIT TICKET - + {:else}
- + {#if claiming} {:else} CLAIM YOUR TICKET {/if} - + {/if} diff --git a/src/routes/(init)/init/(components)/schedule-card.svelte b/src/routes/(init)/init/(components)/schedule-card.svelte index c1b9524d4b..a7d6cd74f7 100644 --- a/src/routes/(init)/init/(components)/schedule-card.svelte +++ b/src/routes/(init)/init/(components)/schedule-card.svelte @@ -74,7 +74,7 @@
-
+
@@ -33,16 +33,18 @@
- -
+ +
{#each days as day, i} - +
+ +
{/each}
diff --git a/src/routes/(init)/init/+page.svelte b/src/routes/(init)/init/+page.svelte index 1319770bd4..beb7750434 100644 --- a/src/routes/(init)/init/+page.svelte +++ b/src/routes/(init)/init/+page.svelte @@ -15,6 +15,8 @@ import DayDetails from './(components)/day-details.svelte'; import InitStickyNav from './(components)/init-sticky-nav.svelte'; import IllustrationConsole from './(assets)/card-illustration-console.svg'; + import IllustrationConsoleSvg from './(assets)/illustration-console.svg'; + import IllustrationHyperloop from './(assets)/illustration-hyperloop.svg'; import { FooterNav, MainFooter } from '$lib/components'; const title = 'Init - Appwrite'; @@ -34,7 +36,7 @@ title: 'Appwrite Console 2.0', description: 'A completely redesigned console experience with improved navigation, faster workflows, and a modern interface.', - illustration: IllustrationConsole, + illustration: IllustrationConsoleSvg, productLabel: 'CONSOLE 2.0', videoHref: '#', links: [ @@ -126,20 +128,26 @@ date: 'march - 26 - 2026', title: 'Hyperloop B', description: - 'Next-generation real-time data synchronization with ultra-low latency across all connected clients.', - illustration: IllustrationConsole, - productLabel: 'REALTIME', + 'A streamlined solution for easily deploying static and server-rendered applications, designed to simplify your workflow.', + illustration: IllustrationHyperloop, + productLabel: 'CONSOLE 2.0', videoHref: '#', links: [ { type: '// blog post', - title: 'Introducing Hyperloop B', + title: 'Announcing Appwrite Console 2.0', + action: 'Read article', + href: '#' + }, + { + type: '// blog post', + title: 'How to host SSR web apps on Appwrite Sites', action: 'Read article', href: '#' }, { type: '// DOCS', - title: 'Getting started with Hyperloop B', + title: 'Setting up your page with Sites', action: 'go to docs', href: '#' } @@ -221,7 +229,7 @@
-
+
diff --git a/vite.config.ts b/vite.config.ts index b66ad915c9..e0f5ff27c6 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -33,6 +33,9 @@ export default defineConfig({ algorithms: ['sha384'] }) ], + server: { + allowedHosts: ['.trycloudflare.com'] + }, css: { devSourcemap: process.env.NODE_ENV !== 'production' }, From 6dc765a47dbe041ac50fd7435ffb537dcabc5f8e Mon Sep 17 00:00:00 2001 From: Caio Arias Date: Fri, 10 Apr 2026 18:12:09 +0100 Subject: [PATCH 6/6] Add day announcement illustrations from Figma and fix locked card state - Add unique SVG illustrations for each day announcement section - Fix day detail locked state: use explicit revealed prop instead of timer - Remove duplicate INIT container from illustrations (SVGs include it) - Remove crosshair pattern from all illustrations except first day Co-Authored-By: Claude Opus 4.6 --- .../(assets)/illustration-console-day.svg | 176 +++++++++++++ .../(assets)/illustration-hyperloop-day.svg | 77 ++++++ .../init/(assets)/illustration-newapis.svg | 75 ++++++ .../init/(assets)/illustration-postgres.svg | 188 +++++++++++++ .../init/(assets)/illustration-s3proxy.svg | 249 ++++++++++++++++++ .../init/(components)/day-detail.svelte | 56 +--- src/routes/(init)/init/+page.svelte | 17 +- 7 files changed, 785 insertions(+), 53 deletions(-) create mode 100644 src/routes/(init)/init/(assets)/illustration-console-day.svg create mode 100644 src/routes/(init)/init/(assets)/illustration-hyperloop-day.svg create mode 100644 src/routes/(init)/init/(assets)/illustration-newapis.svg create mode 100644 src/routes/(init)/init/(assets)/illustration-postgres.svg create mode 100644 src/routes/(init)/init/(assets)/illustration-s3proxy.svg diff --git a/src/routes/(init)/init/(assets)/illustration-console-day.svg b/src/routes/(init)/init/(assets)/illustration-console-day.svg new file mode 100644 index 0000000000..010911ace2 --- /dev/null +++ b/src/routes/(init)/init/(assets)/illustration-console-day.svg @@ -0,0 +1,176 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 +
 +
 +
 +
 +
 +
 + + + +
 +
 +
 +
 +
 +
 +
 +
 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/routes/(init)/init/(assets)/illustration-hyperloop-day.svg b/src/routes/(init)/init/(assets)/illustration-hyperloop-day.svg new file mode 100644 index 0000000000..64eb5583dd --- /dev/null +++ b/src/routes/(init)/init/(assets)/illustration-hyperloop-day.svg @@ -0,0 +1,77 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/routes/(init)/init/(assets)/illustration-newapis.svg b/src/routes/(init)/init/(assets)/illustration-newapis.svg new file mode 100644 index 0000000000..8358f6f240 --- /dev/null +++ b/src/routes/(init)/init/(assets)/illustration-newapis.svg @@ -0,0 +1,75 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/routes/(init)/init/(assets)/illustration-postgres.svg b/src/routes/(init)/init/(assets)/illustration-postgres.svg new file mode 100644 index 0000000000..c78bc59af1 --- /dev/null +++ b/src/routes/(init)/init/(assets)/illustration-postgres.svg @@ -0,0 +1,188 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/routes/(init)/init/(assets)/illustration-s3proxy.svg b/src/routes/(init)/init/(assets)/illustration-s3proxy.svg new file mode 100644 index 0000000000..b76fc694a6 --- /dev/null +++ b/src/routes/(init)/init/(assets)/illustration-s3proxy.svg @@ -0,0 +1,249 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/routes/(init)/init/(components)/day-detail.svelte b/src/routes/(init)/init/(components)/day-detail.svelte index 2c09321e22..a8dbc12594 100644 --- a/src/routes/(init)/init/(components)/day-detail.svelte +++ b/src/routes/(init)/init/(components)/day-detail.svelte @@ -43,7 +43,7 @@ const { hours, minutes, seconds } = createCountdown(release); const timerDone = $derived($hours <= 0 && $minutes <= 0 && $seconds <= 0); - const isRevealed = $derived(revealed || timerDone); + const isRevealed = $derived(revealed);
@@ -93,52 +93,16 @@ {/if}
- -
- -
- - INIT - - - {productLabel} - + + {#if illustration} +
+ {title}
- - - {#if showIllustrationPattern} - - {/if} - - - {#if illustration} -
- {title} -
- {/if} -
+ {/if}
diff --git a/src/routes/(init)/init/+page.svelte b/src/routes/(init)/init/+page.svelte index beb7750434..d75757f337 100644 --- a/src/routes/(init)/init/+page.svelte +++ b/src/routes/(init)/init/+page.svelte @@ -15,8 +15,11 @@ import DayDetails from './(components)/day-details.svelte'; import InitStickyNav from './(components)/init-sticky-nav.svelte'; import IllustrationConsole from './(assets)/card-illustration-console.svg'; - import IllustrationConsoleSvg from './(assets)/illustration-console.svg'; - import IllustrationHyperloop from './(assets)/illustration-hyperloop.svg'; + import IllustrationConsoleDay from './(assets)/illustration-console-day.svg'; + import IllustrationPostgres from './(assets)/illustration-postgres.svg'; + import IllustrationHyperloopDay from './(assets)/illustration-hyperloop-day.svg'; + import IllustrationS3Proxy from './(assets)/illustration-s3proxy.svg'; + import IllustrationNewApis from './(assets)/illustration-newapis.svg'; import { FooterNav, MainFooter } from '$lib/components'; const title = 'Init - Appwrite'; @@ -36,7 +39,7 @@ title: 'Appwrite Console 2.0', description: 'A completely redesigned console experience with improved navigation, faster workflows, and a modern interface.', - illustration: IllustrationConsoleSvg, + illustration: IllustrationConsoleDay, productLabel: 'CONSOLE 2.0', videoHref: '#', links: [ @@ -69,7 +72,7 @@ title: 'PostGres + Vector DB', description: 'Full PostgreSQL support with built-in vector database capabilities for AI-powered search and embeddings.', - illustration: IllustrationConsole, + illustration: IllustrationPostgres, productLabel: 'DATABASES', videoHref: '#', links: [ @@ -96,7 +99,7 @@ title: 'S3 Proxy Servers', description: 'A streamlined solution for easily deploying static and server-rendered applications, designed to simplify your workflow.', - illustration: IllustrationConsole, + illustration: IllustrationS3Proxy, productLabel: 'STORAGE', videoHref: '#', links: [ @@ -129,7 +132,7 @@ title: 'Hyperloop B', description: 'A streamlined solution for easily deploying static and server-rendered applications, designed to simplify your workflow.', - illustration: IllustrationHyperloop, + illustration: IllustrationHyperloopDay, productLabel: 'CONSOLE 2.0', videoHref: '#', links: [ @@ -194,7 +197,7 @@ }, { title: 'NEW APIS', - illustration: '', + illustration: IllustrationNewApis, release: new Date('2026-03-27T07:00:00.000Z'), dayNumber: 4 }