From 632bacf771bc1482a2725fcfeac65140f4edfac7 Mon Sep 17 00:00:00 2001 From: Caio Arias Date: Mon, 9 Mar 2026 16:46:51 +0000 Subject: [PATCH 1/4] 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/4] 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/4] 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/4] 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 @@
-
+