Skip to content

feat: update image assets and enhance animations #2973

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

Merged
eldadfux merged 2 commits into from
May 6, 2026
+304 −378
Merged

feat: update image assets and enhance animations #2973

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fa149ec
feat: update image assets and enhance animations
eldadfux May 6, 2026
51c5df2
format
eldadfux May 6, 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: 3 additions & 1 deletion .optimize-cache.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -458,7 +458,8 @@
"images/blog/customer-story-radar/product-hunt.png": "21985a959b483ea0ca574266a387230805fa5ff84ace9bcc9357a0c60deba97a",
"images/blog/customer-story-radar/radar.png": "ffa66f12e5e421699f3205dc35ee943c517f562bf3ff32d2d69999f2d9e37b7c",
"images/blog/customer-story-socialaize/cover.png": "ee236e591013aab83781aed73f9f0509d5ba56b79e13443245a0ea95152eaa97",
"images/blog/customer-story-storealert/cover.png": "b79c72d73f99f7337956d52e21ab002a1bc67884573b5127be9e18b584a9d1e7",
"images/blog/customer-story-storealert/cover-menu.webp": "9b02dfa9d7275b6558d0afafea1947bacfcf06a5d4a72730ce69477ccdce2e5b",
"images/blog/customer-story-storealert/cover.png": "c0411c90b1f25560f1322f8918e55df28eea0c7d07931bcdbbf342e762923083",
"images/blog/day1-cover.png": "af9685568bbf61ddeef7ed8df237e978ef71d4c374157cc6713f3d674c97f25a",
"images/blog/db-operators-overview.png": "4c6b3e571a094db50eb8a6a146d1d582549d34188303df804dae58d0e198e7d0",
"images/blog/defying-the-laws-of-web-animations/cover.png": "8a5fdf6278b0cf77ab5f52966c1fef3a127687ae8f305c239a0db946d7fd261e",
Expand Down Expand Up @@ -1985,6 +1986,7 @@
"images/testimonials/marius-bolik2.png": "c91a0a7ea79421e3dbc2eeabbf9cbd4b020c06dad1d3998d3ea4b439430e8445",
"images/testimonials/open-mind.png": "668c276f700c7e5f9ce1fa77d84968ff80f2c325efc85f57672e9f8883c41610",
"images/testimonials/petto.png": "ca940762cc8f95caeccedbb8fe16606fa42dc0cd1621cbe3b2e1c6d28c4de745",
"images/testimonials/phil-avatar.webp": "43f4449964b48c8b7d9f858f99008b115cb9e4a00b987404517264586622ced8",
"images/testimonials/ryan-oconner-testimonial.png": "67802e87e2960a3c659bfd5128ca4a56cbbc38df73321c5cb822f66a0526757c",
"images/testimonials/ryan-oconner.png": "39761d9293bc29d374628404d1b8da511aff7bdeee948c7477dc99de16acda55",
"images/testimonials/ryan.png": "a06729dcc748410064948e3dc8c48699579fa4eac517421fd7cb507fe95aa186",
Expand Down
20 changes: 1 addition & 19 deletions src/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,8 +89,7 @@
--animate-scale-in: scale-in 200ms ease-out forwards;
--animate-scale-out: scale-out 200ms ease-out forwards;
--animate-caret-blink: caret-blink 1s ease-in-out infinite;
--animate-enter:
fade-in 0.75s ease-in-out both, blur 0.75s ease-in-out both, up 0.75s ease-in-out both;
--animate-enter: fade-in 0.75s ease-in-out both, up 0.75s ease-in-out both;
--animate-scroll-deprecate: scroll-deprecate 60s linear infinite forwards;

--animate-scroll-x: scroll-x var(--speed, 30s) linear infinite var(--direction, forwards);
Expand Down Expand Up @@ -138,15 +137,6 @@
}
}

@keyframes blur {
0% {
filter: blur(5px);
}
100% {
filter: blur(0);
}
}

@keyframes up {
0% {
transform: translateY(36px);
Expand Down Expand Up @@ -198,38 +188,30 @@
@keyframes lighting {
0% {
opacity: 0;
clip-path: inset(5%);
transform: scale(111.11%);
}
100% {
opacity: 1;
clip-path: inset(0);
transform: scale(1);
}
}

@keyframes menu-in {
0% {
opacity: 0;
filter: blur(2px);
transform: translateY(8px);
}
100% {
opacity: 1;
filter: blur(0px);
transform: translateY(0px);
}
}

@keyframes menu-out {
0% {
opacity: 1;
filter: blur(0px);
transform: translateY(0px);
}
100% {
opacity: 0;
filter: blur(2px);
transform: translateY(8px);
}
}
Expand Down
23 changes: 22 additions & 1 deletion src/app.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,14 +32,35 @@
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Appwrite" />
<!-- preload font for headlines -->
<!-- Critical fonts: reduce CLS when swap replaces fallback metrics (hero + body). -->
<link
rel="preload"
href="/fonts/inter/inter-latin-400-normal.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link
rel="preload"
href="/fonts/inter/inter-latin-500-normal.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link
rel="preload"
href="/fonts/aeonik-pro/AeonikPro-Regular.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link
rel="preload"
href="/fonts/aeonik-pro/AeonikPro-Medium.woff2"
as="font"
type="font/woff2"
crossorigin
/>
%sveltekit.head%
</head>
<body class="dark group/body antialiased" data-sveltekit-preload-data="hover">
Expand Down
8 changes: 1 addition & 7 deletions src/lib/components/MainNav.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,7 @@
{#each links as link}
<li class="web-main-header-nav-item text-primary hover:text-accent">
{#if link.submenu}
<div
class="web-main-header-nav-item-button"
aria-haspopup="true"
aria-expanded="false"
aria-controls="submenu"
data-submenu-button
>
<div class="web-main-header-nav-item-button">
<svelte:component this={link.submenu} label={link.label} />
</div>
{:else}
Comment on lines 24 to 30
Copy link
Copy Markdown
Contributor

@greptile-apps greptile-apps Bot May 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 ARIA attributes removed from nav item button

aria-haspopup="true", aria-expanded="false", and aria-controls="submenu" were removed from the wrapper div. These attributes signal to screen readers that the element opens a popup and whether it is currently open. Without them, assistive technologies will not announce the presence of the submenu to keyboard and screen-reader users, reducing discoverability. If the submenu component itself now manages these attributes on its internal trigger, this is fine — but if it does not, the accessibility regression should be addressed before merging.

Expand Down
4 changes: 3 additions & 1 deletion src/lib/components/ProductsSubmenu.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,8 +191,10 @@
class="my-4 flex flex-1 flex-col gap-3 outline-none xl:flex-row"
>
<img
src="/images/blog/customer-story-storealert/cover.png"
src="/images/blog/customer-story-storealert/cover-menu.webp"
alt="Case study cover"
width="320"
height="180"
class="min-h-10 w-full shrink-0 rounded-xl object-cover md:aspect-[3/1] xl:max-w-30"
/>
<p class="w-full text-pretty">
Expand Down
13 changes: 8 additions & 5 deletions src/lib/components/appwrite-network/map-nav.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,15 +57,17 @@
<Tabs.List
class={cn(
'border-smooth animate-fade-in relative grid w-full max-w-xl grid-cols-1 place-content-center gap-3 overflow-hidden p-1 px-8 shadow-[0px_4px_8p_rgba(0,0,0,0.04)] md:grid-cols-3 md:rounded-full md:border md:px-1',
theme === 'light' ? 'md:bg-white' : 'md:bg-card'
theme === 'light' ? 'md:bg-white md:text-[#19191C]' : 'md:bg-card'
)}
>
{#each navItems as { label, icon, value }, index}
<Tabs.Trigger
{value}
class={cn(
'text-caption animate-enter text-primary bg-smooth border-smooth flex h-8 cursor-pointer items-center justify-center gap-2 rounded-full border font-medium outline-0 transition-colors hover:border-white/12',
'group data-[state="active"]:bg-accent/4 data-[state="active"]:border-accent/36 data-[state="active"]:text-accent'
'group text-caption animate-enter flex h-8 cursor-pointer items-center justify-center gap-2 rounded-full border font-medium outline-0 transition-colors',
theme === 'light'
? 'data-[state=active]:border-accent/45 data-[state=active]:bg-accent/10 border-black/10 bg-black/[0.04] text-[#19191C] hover:border-black/18 data-[state=active]:text-[#9E1B45]'
: 'border-smooth bg-smooth text-primary data-[state=active]:border-accent/36 data-[state=active]:bg-accent/4 data-[state=active]:text-accent hover:border-white/12'
)}
style="animation-delay:{index * 75}ms;"
onclick={() => {
Expand All @@ -78,8 +80,9 @@
name={icon}
class={cn(
'-ml-2',
"group-data-[state='active']:text-accent",
theme === 'light' ? 'text-[#19191C]' : 'text-inherit'
theme === 'light'
? 'text-[#19191C] group-data-[state=active]:text-[#9E1B45]'
: 'group-data-[state=active]:text-accent text-inherit'
)}
/>
{label}
Expand Down
5 changes: 4 additions & 1 deletion src/lib/components/homepage-variations/custom-hero.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,8 +170,11 @@
<p
class={cn(
'text-description text-secondary mt-2 font-medium md:mt-3',
!layoutAside && 'max-w-2xl text-center text-balance'
!layoutAside && 'max-w-2xl text-center text-pretty'
)}
style:min-height={layoutAside
? 'calc(4.25 * var(--text-description--line-height, 1.5rem))'
: 'calc(3.25 * var(--text-description--line-height, 1.5rem))'}
>
{resolved.heroSubtitle}
</p>
Expand Down
18 changes: 13 additions & 5 deletions src/lib/components/marketing/pullquote.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,16 +20,24 @@
'/font-aeonik-pro mx-auto flex w-full max-w-[30rem] flex-col items-center justify-center gap-3 pb-16 text-center'
)}
>
<h2 class="text-description text-primary font-medium">
<p class="text-description text-primary font-medium">
<span class="text-accent -mr-1">“</span>
{@render children?.()}
<span class="text-accent -ml-1">”</span>
</h2>
</p>
<div class="flex items-center gap-2">
<img src={avatar} alt={name} class="size-6 rounded-full" />
<h5 class="text-caption text-primary font-medium">
<img
src={avatar}
alt={name}
class="size-6 rounded-full"
width="48"
height="48"
decoding="async"
loading="lazy"
/>
<p class="text-caption text-primary m-0 font-medium">
{name}, <span class="text-secondary">{title}</span>
</h5>
</p>
</div>
</blockquote>
</div>
2 changes: 1 addition & 1 deletion src/routes/(marketing)/(components)/(ai-animations)/mcp.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@
>
<span class="min-h-[2lh] flex-1"
>{#if typedText}<span class="text-primary">{typedText}</span>{:else}<span
class="text-white/20">Ask anything...</span
class="text-[#9CA3AF]">Ask anything...</span
>{/if}</span
>
<div
Expand Down
2 changes: 1 addition & 1 deletion src/routes/(marketing)/(components)/(ai-animations)/skills.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@
</svg>
<span class="flex-1"
>{#if typedText}<span class="text-primary">{typedText}</span>{:else}<span
class="text-white/20">Ask anything...</span
class="text-[#9CA3AF]">Ask anything...</span
>{/if}</span
>
</div>
Expand Down
13 changes: 7 additions & 6 deletions src/routes/(marketing)/(components)/ai-table.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,17 +188,18 @@
<thead>
<tr class="border-smooth border-b border-dashed bg-[#232325]">
<td
class="min-w-[140px] shrink-0 px-4 py-3 text-left text-xs text-white/50 sm:px-5"
class="min-w-[140px] shrink-0 px-4 py-3 text-left text-xs text-[#B4B4BA] sm:px-5"
>Model</td
>
<td class="hidden px-5 py-3 text-left text-xs text-white/50 sm:table-cell"
<td class="hidden px-5 py-3 text-left text-xs text-[#B4B4BA] sm:table-cell"
>Cost/1M</td
>
<td class="px-4 py-3 text-right text-xs text-white/50 sm:px-5 sm:text-left"
<td class="px-4 py-3 text-right text-xs text-[#B4B4BA] sm:px-5 sm:text-left"
>Overall</td
>
{#each categoryKeys as cat}
<td class="hidden px-5 py-3 text-center text-xs text-white/50 md:table-cell"
<td
class="hidden px-5 py-3 text-center text-xs text-[#B4B4BA] md:table-cell"
>{cat}</td
>
{/each}
Expand All @@ -221,7 +222,7 @@
>
</div>
</td>
<td class="hidden px-5 py-3 text-base text-white/40 sm:table-cell"
<td class="hidden px-5 py-3 text-base text-[#C4C4CC] sm:table-cell"
>{model.cost}</td
>
<td class="px-4 py-3 text-right sm:px-5 sm:text-left">
Expand All @@ -234,7 +235,7 @@
{#each categoryKeys as cat}
<td class="hidden px-5 py-3 text-center md:table-cell">
<span
class="text-sm text-white/60 transition-colors duration-300 group-hover:text-[color:var(--hover-color)]"
class="text-sm text-[#C8C8D0] transition-colors duration-300 group-hover:text-[color:var(--hover-color)]"
style="--hover-color: {getScoreColor(model.categories[cat])};"
>{model.categories[cat]}%</span
>
Expand Down
Loading
Loading