LukeParke/website
1
0
Fork 0
mirror of https://github.com/LukeHagar/website.git synced 2025-12-06 12:57:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix all text scale

Browse Source
This commit is contained in:
Jesse Winton
2024-09-05 16:21:28 -04:00
parent 686a0d5254
commit 6eb2ce7848
106 changed files with 458 additions and 521 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/lib/animations/OpenSource.svelte
View File

@@ -176,7 +176,7 @@
}} }}
> >
<div class="sticky-wrapper"> <div class="sticky-wrapper">
<h3 class="web-display !text-primary">Powered by Open Source</h3> <h3 class="text-display font-aeonik-pro text-primary">Powered by Open Source</h3>
<div class="cards-wrapper"> <div class="cards-wrapper">
<a <a
@@ -193,7 +193,7 @@
aria-label="Discord" aria-label="Discord"
/> />
</div> </div>
<div class="web-title mt-auto">17k+ Discord Members</div> <div class="text-title font-aeonik-pro mt-auto">17k+ Discord Members</div>
</a> </a>
<a <a
@@ -208,7 +208,7 @@
aria-label="GitHub" aria-label="GitHub"
/> />
</div> </div>
<div class="web-title mt-auto"> <div class="text-title font-aeonik-pro mt-auto">
{GITHUB_STARS}+ GitHub Stars {GITHUB_STARS}+ GitHub Stars
</div> </div>
</a> </a>
@@ -225,7 +225,7 @@
aria-label="Twitter" aria-label="Twitter"
/> />
</div> </div>
<div class="web-title mt-auto">128k+ Twitter Followers</div> <div class="text-title font-aeonik-pro mt-auto">128k+ Twitter Followers</div>
</a> </a>
<a <a
@@ -240,7 +240,7 @@
aria-label="YouTube" aria-label="YouTube"
/> />
</div> </div>
<div class="web-title mt-auto">7k+ Youtube Subscribers</div> <div class="text-title font-aeonik-pro mt-auto">7k+ Youtube Subscribers</div>
</a> </a>
<a <a
@@ -255,7 +255,7 @@
aria-label="GitHub" aria-label="GitHub"
/> />
</div> </div>
<div class="web-title mt-auto">21k+ Code Commits</div> <div class="text-title font-aeonik-pro mt-auto">21k+ Code Commits</div>
</a> </a>
</div> </div>
</div> </div>

8
src/lib/animations/Products/Products.svelte
View File

@@ -243,7 +243,7 @@
> >
<h2 <h2
class="web-display web-u-color-text-primary" class="text-display font-aeonik-pro text-primary"
transition:fly={{ y: 16, delay: 250 }} transition:fly={{ y: 16, delay: 250 }}
> >
Your backend, minus the hassle Your backend, minus the hassle
@@ -285,11 +285,13 @@
width="32" width="32"
height="32" height="32"
/> />
<span class="web-label">{copy.title}</span> <span class="text-label">{copy.title}</span>
</h3> </h3>
{#if isActive} {#if isActive}
<div transition:slide> <div transition:slide>
<h4 class="web-title">{copy.subtitle}</h4> <h4 class="text-title font-aeonik-pro">
{copy.subtitle}
</h4>
<p> <p>
{copy.description} {copy.description}
</p> </p>

8
src/lib/animations/Products/ProductsMobile.svelte
View File

@@ -7,7 +7,9 @@
<div class="wrapper"> <div class="wrapper">
<span class="web-badges web-eyebrow !text-white">Products_</span> <span class="web-badges web-eyebrow !text-white">Products_</span>
<h2 class="web-display web-u-color-text-primary mt-4">Your backend, minus the hassle</h2> <h2 class="text-display font-aeonik-pro text-primary mt-4">
Your backend, minus the hassle
</h2>
<p class="text-description mt-4"> <p class="text-description mt-4">
Build secure and scalable applications with less code. Add authentication, databases, Build secure and scalable applications with less code. Add authentication, databases,
@@ -23,10 +25,10 @@
<div class="info"> <div class="info">
<h3> <h3>
<img src={info.icon.active} alt="" /> <img src={info.icon.active} alt="" />
<span class="web-label web-u-color-text-primary">{info.title}</span> <span class="text-label text-primary">{info.title}</span>
</h3> </h3>
<h4 class="web-title">{info.subtitle}</h4> <h4 class="text-title font-aeonik-pro">{info.subtitle}</h4>
<p> <p>
{info.description} {info.description}
</p> </p>

4
src/lib/components/Accordion/Item.svelte
View File

@@ -7,9 +7,7 @@
<details class="collapsible-wrapper group" {open}> <details class="collapsible-wrapper group" {open}>
<summary class="collapsible-button flex items-center justify-between cursor-pointer"> <summary class="collapsible-button flex items-center justify-between cursor-pointer">
<span class="text">{title}</span> <span class="text">{title}</span>
<div <div class="icon text-primary group-[&[open]]:rotate-180 transition-transform">
class="icon web-u-color-text-primary group-[&[open]]:rotate-180 transition-transform"
>
<span class="icon-cheveron-down" aria-hidden="true" /> <span class="icon-cheveron-down" aria-hidden="true" />
</div> </div>
</summary> </summary>

2
src/lib/components/AnnouncementBanner.svelte
View File

@@ -9,7 +9,7 @@
</script> </script>
<div class="web-top-banner"> <div class="web-top-banner">
<div class="web-top-banner-content web-u-color-text-primary"> <div class="web-top-banner-content text-primary">
<slot /> <slot />
{#if browser} {#if browser}
<button <button

4
src/lib/components/Article.svelte
View File

@@ -23,7 +23,7 @@
/> />
</div> </div>
<div class="web-grid-articles-item-content"> <div class="web-grid-articles-item-content">
<h4 class="web-label web-u-color-text-primary"> <h4 class="text-label text-primary">
{title} {title}
</h4> </h4>
<div class="web-author"> <div class="web-author">
@@ -37,7 +37,7 @@
alt={author} alt={author}
/> />
<div class="web-author-info"> <div class="web-author-info">
<h4 class="web-sub-body-400 web-u-color-text-primary">{author}</h4> <h4 class="web-sub-body-400 text-primary">{author}</h4>
<ul class="web-metadata web-caption-400 web-is-not-mobile"> <ul class="web-metadata web-caption-400 web-is-not-mobile">
<li> <li>
{formatDate(date)} {formatDate(date)}

2
src/lib/components/BlogCta.svelte
View File

@@ -6,7 +6,7 @@
<div class="call-to-action"> <div class="call-to-action">
<div class="details"> <div class="details">
<h2 class="web-label">{heading}</h2> <h2 class="text-label">{heading}</h2>
<a href={url} class="web-button">{label}</a> <a href={url} class="web-button">{label}</a>
</div> </div>
</div> </div>

10
src/lib/components/Feedback.svelte
View File

@@ -53,7 +53,7 @@
style="flex-wrap: wrap-reverse;" style="flex-wrap: wrap-reverse;"
> >
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<h5 class="web-main-body-600 web-u-color-text-primary">Was this page helpful?</h5> <h5 class="web-main-body-600 text-primary">Was this page helpful?</h5>
<div class="flex gap-2"> <div class="flex gap-2">
<button <button
class="web-radio-button" class="web-radio-button"
@@ -106,7 +106,7 @@
> >
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<label for="message"> <label for="message">
<span class="web-u-color-text-primary"> <span class="text-primary">
What did you {feedbackType === 'negative' ? 'dislike' : 'like'}? (optional) What did you {feedbackType === 'negative' ? 'dislike' : 'like'}? (optional)
</span> </span>
</label> </label>
@@ -117,7 +117,7 @@
bind:value={comment} bind:value={comment}
/> />
<label for="message" class="mt-2"> <label for="message" class="mt-2">
<span class="web-u-color-text-primary">Email</span> <span class="text-primary">Email</span>
</label> </label>
<input <input
class="web-input-text" class="web-input-text"
@@ -129,12 +129,12 @@
/> />
</div> </div>
{#if submitted} {#if submitted}
<p class="web-u-color-text-primary mt-4"> <p class="text-primary mt-4">
Your message has been sent successfully. We appreciate your feedback. Your message has been sent successfully. We appreciate your feedback.
</p> </p>
{/if} {/if}
{#if error} {#if error}
<p class="web-u-color-text-primary mt-4"> <p class="text-primary mt-4">
There was an error submitting your feedback. Please try again later. There was an error submitting your feedback. Please try again later.
</p> </p>
{/if} {/if}

2
src/lib/components/InitBanner.svelte
View File

@@ -29,7 +29,7 @@
</script> </script>
<div class="banner" class:hidden={$page.url.pathname.includes('init')}> <div class="banner" class:hidden={$page.url.pathname.includes('init')}>
<div class="content web-u-color-text-primary"> <div class="content text-primary">
<div class="headings"> <div class="headings">
<span style:font-weight="500" <span style:font-weight="500"
><span ><span

2
src/lib/components/MetricCard.svelte
View File

@@ -4,7 +4,7 @@
</script> </script>
<div class="web-card is-normal has-border-gradient"> <div class="web-card is-normal has-border-gradient">
<div class="web-title web-u-color-text-primary">{metric}</div> <div class="text-title font-aeonik-pro text-primary">{metric}</div>
<div class="text-description">{description}</div> <div class="text-description">{description}</div>
</div> </div>

2
src/lib/components/Newsletter.svelte
View File

@@ -90,7 +90,7 @@
class:max-w-[380px]={!submitted} class:max-w-[380px]={!submitted}
> >
<section class="web-gap-5 flex flex-col"> <section class="web-gap-5 flex flex-col">
<h1 class="web-title web-u-color-text-primary"> <h1 class="text-title font-aeonik-pro text-primary">
Subscribe to our newsletter Subscribe to our newsletter
</h1> </h1>
<p class="text-description web-u-padding-block-end-40"> <p class="text-description web-u-padding-block-end-40">

10
src/lib/components/PreFooter.svelte
View File

@@ -6,7 +6,7 @@
<div class="web-u-row-gap-80 relative grid md:grid-cols-2 gap-8"> <div class="web-u-row-gap-80 relative grid md:grid-cols-2 gap-8">
<section class="web-hero flex items-center justify-center gap-y-8"> <section class="web-hero flex items-center justify-center gap-y-8">
<h2 class="web-display web-u-color-text-primary max-w-[500px] text-center"> <h2 class="text-display font-aeonik-pro text-primary max-w-[500px] text-center">
Start building today Start building today
</h2> </h2>
<a href={PUBLIC_APPWRITE_DASHBOARD} class="web-button is-transparent web-self-center"> <a href={PUBLIC_APPWRITE_DASHBOARD} class="web-button is-transparent web-self-center">
@@ -18,7 +18,7 @@
> >
<header class="web-strip-plans-header"> <header class="web-strip-plans-header">
<div class="web-strip-plans-header-wrapper web-u-row-gap-24"> <div class="web-strip-plans-header-wrapper web-u-row-gap-24">
<h3 class="web-title web-u-color-text-primary">Our plans</h3> <h3 class="text-title font-aeonik-pro text-primary">Our plans</h3>
</div> </div>
</header> </header>
@@ -27,7 +27,7 @@
<div class="web-strip-plans-item-wrapper"> <div class="web-strip-plans-item-wrapper">
<div class="web-strip-plans-plan"> <div class="web-strip-plans-plan">
<h4 class="title text-description">Free</h4> <h4 class="title text-description">Free</h4>
<div class="web-title web-u-color-text-primary">$0</div> <div class="text-title font-aeonik-pro text-primary">$0</div>
<div class="info web-caption-500" /> <div class="info web-caption-500" />
</div> </div>
<p class="web-strip-plans-info web-caption-500"> <p class="web-strip-plans-info web-caption-500">
@@ -45,7 +45,7 @@
<div class="web-strip-plans-item-wrapper"> <div class="web-strip-plans-item-wrapper">
<div class="web-strip-plans-plan"> <div class="web-strip-plans-plan">
<h4 class="title text-description">Pro</h4> <h4 class="title text-description">Pro</h4>
<div class="web-title web-u-color-text-primary">$15</div> <div class="text-title font-aeonik-pro text-primary">$15</div>
<div class="info web-caption-500">per member/month</div> <div class="info web-caption-500">per member/month</div>
</div> </div>
<p class="web-strip-plans-info web-caption-500"> <p class="web-strip-plans-info web-caption-500">
@@ -66,7 +66,7 @@
<div class="web-strip-plans-item-wrapper"> <div class="web-strip-plans-item-wrapper">
<div class="web-strip-plans-plan"> <div class="web-strip-plans-plan">
<h4 class="title text-description">Scale</h4> <h4 class="title text-description">Scale</h4>
<div class="web-title web-u-color-text-primary">$599</div> <div class="text-title font-aeonik-pro text-primary">$599</div>
<div class="info web-caption-500">per org/month</div> <div class="info web-caption-500">per org/month</div>
</div> </div>
<p class="web-strip-plans-info web-caption-500"> <p class="web-strip-plans-info web-caption-500">

14
src/lib/components/ProductsGrid.svelte
View File

@@ -1,8 +1,6 @@
<div class="web-big-padding-section-level-2"> <div class="web-big-padding-section-level-2">
<div class="container"> <div class="container">
<h3 class="web-label web-u-color-text-primary text-center"> <h3 class="text-label text-primary text-center">Keep exploring similar integrations</h3>
Keep exploring similar integrations
</h3>
<ul class="l-grid-1 mt-8"> <ul class="l-grid-1 mt-8">
<li> <li>
<a <a
@@ -18,7 +16,7 @@
width="32" width="32"
height="32" height="32"
/> />
<h4 class="web-main-body-400 web-u-color-text-primary">Auth</h4> <h4 class="web-main-body-400 text-primary">Auth</h4>
<span class="icon-arrow-right ml-0" aria-hidden="true"></span> <span class="icon-arrow-right ml-0" aria-hidden="true"></span>
</div> </div>
<p class="web-sub-body-400 ml-1"> <p class="web-sub-body-400 ml-1">
@@ -40,7 +38,7 @@
width="32" width="32"
height="32" height="32"
/> />
<h4 class="web-main-body-400 web-u-color-text-primary">Functions</h4> <h4 class="web-main-body-400 text-primary">Functions</h4>
<span class="icon-arrow-right ml-0" aria-hidden="true"></span> <span class="icon-arrow-right ml-0" aria-hidden="true"></span>
</div> </div>
<p class="web-sub-body-400 ml-1"> <p class="web-sub-body-400 ml-1">
@@ -62,7 +60,7 @@
width="32" width="32"
height="32" height="32"
/> />
<h4 class="web-main-body-400 web-u-color-text-primary">Databases</h4> <h4 class="web-main-body-400 text-primary">Databases</h4>
<span class="icon-arrow-right ml-0" aria-hidden="true"></span> <span class="icon-arrow-right ml-0" aria-hidden="true"></span>
</div> </div>
<p class="web-sub-body-400 ml-1"> <p class="web-sub-body-400 ml-1">
@@ -84,7 +82,7 @@
width="32" width="32"
height="32" height="32"
/> />
<h4 class="web-main-body-400 web-u-color-text-primary">Messaging</h4> <h4 class="web-main-body-400 text-primary">Messaging</h4>
<span class="icon-arrow-right ml-0" aria-hidden="true"></span> <span class="icon-arrow-right ml-0" aria-hidden="true"></span>
</div> </div>
<p class="web-sub-body-400 ml-1"> <p class="web-sub-body-400 ml-1">
@@ -106,7 +104,7 @@
width="32" width="32"
height="32" height="32"
/> />
<h4 class="web-main-body-400 web-u-color-text-primary">Realtime</h4> <h4 class="web-main-body-400 text-primary">Realtime</h4>
<span class="icon-arrow-right ml-0" aria-hidden="true"></span> <span class="icon-arrow-right ml-0" aria-hidden="true"></span>
</div> </div>
<p class="web-sub-body-400 ml-1"> <p class="web-sub-body-400 ml-1">

4
src/lib/components/Search.svelte
View File

@@ -203,7 +203,7 @@
<span class="web-u-color-text-secondary">{hit.h1}</span> <span class="web-u-color-text-secondary">{hit.h1}</span>
{#if relevantSubtitle} {#if relevantSubtitle}
<span class="web-u-color-text-secondary"> / </span> <span class="web-u-color-text-secondary"> / </span>
<span class="web-u-color-text-primary"> <span class="text-primary">
{relevantSubtitle} {relevantSubtitle}
</span> </span>
{/if} {/if}
@@ -243,7 +243,7 @@
<span class="web-u-color-text-secondary">{hit.h1}</span> <span class="web-u-color-text-secondary">{hit.h1}</span>
{#if hit.h2} {#if hit.h2}
<span class="web-u-color-text-secondary"> / </span> <span class="web-u-color-text-secondary"> / </span>
<span class="web-u-color-text-primary">{hit.h2}</span> <span class="text-primary">{hit.h2}</span>
{/if} {/if}
</div> </div>
</a> </a>

6
src/lib/components/ui/Hero.svelte
View File

@@ -20,8 +20,8 @@
const styles = cva('text-white', { const styles = cva('text-white', {
variants: { variants: {
size: { size: {
title: ['text-headline', 'flex-[1.3]'], title: ['text-headline', 'font-aeonik-pro', 'flex-[1.3]'],
display: ['text-display', 'w-full'] display: ['text-display', 'font-aeonik-pro', 'w-full']
} }
}, },
defaultVariants: { defaultVariants: {
@@ -37,7 +37,7 @@
</script> </script>
<section class={classNames(hero({ layout }), classes)} {...props}> <section class={classNames(hero({ layout }), classes)} {...props}>
<h1 class={classNames(styles({ size }), 'font-aeonik-pro')}> <h1 class={classNames(styles({ size }))}>
<slot name="title" /> <slot name="title" />
</h1> </h1>
{#if $$slots.description} {#if $$slots.description}

4
src/lib/layouts/DocsArticle.svelte
View File

@@ -49,12 +49,12 @@
aria-label="previous page" aria-label="previous page"
> >
<span <span
class="icon-cheveron-left web-u-font-size-24 web-u-color-text-primary web-is-not-mobile" class="icon-cheveron-left web-u-font-size-24 text-primary web-is-not-mobile"
aria-hidden="true" aria-hidden="true"
/> />
</a> </a>
{/if} {/if}
<h1 class="web-title">{title}</h1> <h1 class="text-title font-aeonik-pro">{title}</h1>
</div> </div>
</div> </div>
<div class="web-article-header-end" /> <div class="web-article-header-end" />

4
src/lib/layouts/DocsTutorial.svelte
View File

@@ -36,12 +36,12 @@
aria-label="previous page" aria-label="previous page"
> >
<span <span
class="icon-cheveron-left web-u-font-size-24 web-u-color-text-primary web-is-not-mobile" class="icon-cheveron-left web-u-font-size-24 text-primary web-is-not-mobile"
aria-hidden="true" aria-hidden="true"
/> />
</a> </a>
{/if} {/if}
<h1 class="web-title">{title}</h1> <h1 class="text-title font-aeonik-pro">{title}</h1>
</div> </div>
</div> </div>
<div class="web-article-header-end" /> <div class="web-article-header-end" />

2
src/lib/utils/markdown.ts
View File

@@ -19,7 +19,7 @@ function transform_tokens(tokens: ReturnType<typeof md.parse>): ReturnType<typeo
} }
switch (token.type) { switch (token.type) {
case 'paragraph_open': case 'paragraph_open':
token.attrPush(['class', 'web-paragraph']); token.attrPush(['class', 'text-paragraph']);
break; break;
case 'link_open': { case 'link_open': {
const href = token.attrGet('href'); const href = token.attrGet('href');

6
src/markdoc/layouts/Author.svelte
View File

@@ -107,9 +107,9 @@
<FloatingHead --position="relative" src={avatar} alt={name} size={112} /> <FloatingHead --position="relative" src={avatar} alt={name} size={112} />
{/if} {/if}
<div> <div>
<h1 class="web-title web-u-color-text-primary">{name}</h1> <h1 class="text-title font-aeonik-pro text-primary">{name}</h1>
{#if role} {#if role}
<div class="web-label mt-2">{role}</div> <div class="text-label mt-2">{role}</div>
{/if} {/if}
</div> </div>
{#if bio} {#if bio}
@@ -166,7 +166,7 @@
<div class="py-10"> <div class="py-10">
<div class="web-big-padding-section-level-2"> <div class="web-big-padding-section-level-2">
<div class="container"> <div class="container">
<h2 class="web-title web-u-color-text-primary">Articles</h2> <h2 class="text-title font-aeonik-pro text-primary">Articles</h2>
<!-- <div class="web-is-only-mobile mt-8"> <!-- <div class="web-is-only-mobile mt-8">
<label class="blockweb-select is-colored" for="articles"> <label class="blockweb-select is-colored" for="articles">

4
src/markdoc/layouts/Category.svelte
View File

@@ -46,7 +46,9 @@
</a> </a>
<div class="web-category-header mt-6"> <div class="web-category-header mt-6">
<div class="web-category-header-content"> <div class="web-category-header-content">
<h1 class="web-display web-u-color-text-primary">{name}</h1> <h1 class="text-display font-aeonik-pro text-primary">
{name}
</h1>
<p class="web-category-header-description text-description"> <p class="web-category-header-description text-description">
{description} {description}
</p> </p>

10
src/markdoc/layouts/Integration.svelte
View File

@@ -98,7 +98,7 @@
height="40" height="40"
/> />
<h1 <h1
class="web-title web-u-color-text-primary justif" class="text-title font-aeonik-pro text-primary justif"
style="max-width: 28.15rem;" style="max-width: 28.15rem;"
> >
{title} {title}
@@ -118,7 +118,7 @@
> >
<div class="flex justify-between gap-2"> <div class="flex justify-between gap-2">
<dt>Vendor</dt> <dt>Vendor</dt>
<dd class="web-u-color-text-primary">{product.vendor}</dd> <dd class="text-primary">{product.vendor}</dd>
</div> </div>
<div class="web-u-sep-block-end"></div> <div class="web-u-sep-block-end"></div>
{#if isPartner} {#if isPartner}
@@ -130,7 +130,7 @@
<div class="web-u-sep-block-end"></div> <div class="web-u-sep-block-end"></div>
<div class="flex justify-between gap-2"> <div class="flex justify-between gap-2">
<dt>Category</dt> <dt>Category</dt>
<dd class="web-u-color-text-primary">{category}</dd> <dd class="text-primary">{category}</dd>
</div> </div>
</dl> </dl>
</div> </div>
@@ -156,7 +156,9 @@
<section <section
class="web-hero web-u-max-width-580 flex items-center justify-center gap-y-4" class="web-hero web-u-max-width-580 flex items-center justify-center gap-y-4"
> >
<h2 class="web-display text-center web-u-color-text-primary max-w-[600px]"> <h2
class="text-display font-aeonik-pro text-center text-primary max-w-[600px]"
>
Become a Technology Partner Become a Technology Partner
</h2> </h2>
<p class="web-main-body-500"> <p class="web-main-body-500">

4
src/markdoc/layouts/Policy.svelte
View File

@@ -70,10 +70,10 @@
<div class="container"> <div class="container">
<div class="web-grid-120-1fr-auto"> <div class="web-grid-120-1fr-auto">
<header class="web-grid-120-1fr-auto-header"> <header class="web-grid-120-1fr-auto-header">
<h1 class="web-title web-u-color-text-primary">{title}</h1> <h1 class="text-title font-aeonik-pro text-primary">{title}</h1>
</header> </header>
<button <button
class="toc-btn web-u-padding-20 web-u-margin-inline-20-negative web-u-color-text-primary web-is-only-mobile web-u-sep-block class="toc-btn web-u-padding-20 web-u-margin-inline-20-negative text-primary web-is-only-mobile web-u-sep-block
web-u-filter-blur-8 sticky mt-6 flex web-u-filter-blur-8 sticky mt-6 flex
w-full items-center justify-between" w-full items-center justify-between"
style:--inset-block-start="4.5rem" style:--inset-block-start="4.5rem"

10
src/markdoc/layouts/Post.svelte
View File

@@ -118,7 +118,9 @@
<li>{timeToRead} min</li> <li>{timeToRead} min</li>
{/if} {/if}
</ul> </ul>
<h1 class="web-title web-u-color-text-primary">{title}</h1> <h1 class="text-title font-aeonik-pro text-primary">
{title}
</h1>
{#if description} {#if description}
<p class="text-description mt-2"> <p class="text-description mt-2">
{description} {description}
@@ -138,9 +140,7 @@
/> />
{/if} {/if}
<div class="flex flex-col"> <div class="flex flex-col">
<h4 <h4 class="web-sub-body-400 text-primary">
class="web-sub-body-400 web-u-color-text-primary"
>
{authorData.name} {authorData.name}
</h4> </h4>
<p class="web-caption-400">{authorData.role}</p> <p class="web-caption-400">{authorData.role}</p>
@@ -239,7 +239,7 @@
<div class="web-u-sep-block-start py-10"> <div class="web-u-sep-block-start py-10">
<div class="web-big-padding-section-level-2"> <div class="web-big-padding-section-level-2">
<div class="container"> <div class="container">
<h3 class="web-label web-u-color-text-primary">Read next</h3> <h3 class="text-label text-primary">Read next</h3>
<section class="mt-8"> <section class="mt-8">
<ul class="web-grid-articles"> <ul class="web-grid-articles">
{#each posts.filter((p) => p.title !== title).slice(0, 3) as post} {#each posts.filter((p) => p.title !== title).slice(0, 3) as post}

10
src/markdoc/nodes/Heading.svelte
View File

@@ -11,7 +11,7 @@
const tag = `h${level + 1}`; const tag = `h${level + 1}`;
const ctx = hasContext('headings') ? getContext<LayoutContext>('headings') : undefined; const ctx = hasContext('headings') ? getContext<LayoutContext>('headings') : undefined;
const classList: Record<typeof level, string> = { const classList: Record<typeof level, string> = {
1: 'web-label', 1: 'text-label',
2: 'text-description', 2: 'text-description',
3: 'web-main-body-500', 3: 'web-main-body-500',
4: 'web-sub-body-500' 4: 'web-sub-body-500'
@@ -49,7 +49,7 @@
}); });
const inPolicy = isInPolicy(); const inPolicy = isInPolicy();
$: headingClass = inPolicy && level === 1 ? 'web-title' : classList[level]; $: headingClass = inPolicy && level === 1 ? 'text-title font-aeonik-pro' : classList[level];
</script> </script>
{#if id} {#if id}
@@ -59,7 +59,7 @@
bind:this={element} bind:this={element}
class:web-snap-location={id && !inReferences} class:web-snap-location={id && !inReferences}
class:web-snap-location-references={id && inReferences} class:web-snap-location-references={id && inReferences}
class="{headingClass} web-u-color-text-primary" class="{headingClass} text-primary"
> >
<a href={`#${id}`} class=""><slot /></a> <a href={`#${id}`} class=""><slot /></a>
</svelte:element> </svelte:element>
@@ -67,7 +67,7 @@
<svelte:element <svelte:element
this={tag} this={tag}
bind:this={element} bind:this={element}
class="{headingClass} web-u-color-text-primary" class="{headingClass} text-primary"
class:in-policy={inPolicy} class:in-policy={inPolicy}
> >
<slot /> <slot />
@@ -75,7 +75,7 @@
{/if} {/if}
<style> <style>
.web-title { .text-title font-aeonik-pro {
margin-block-end: 1rem; margin-block-end: 1rem;
margin-block-start: 2rem; margin-block-start: 2rem;
} }

4
src/markdoc/nodes/Item.svelte
View File

@@ -9,9 +9,9 @@
$: classes = (() => { $: classes = (() => {
if (inDocs) return ''; if (inDocs) return '';
if (inChangelog) return 'web-paragraph-lg'; if (inChangelog) return 'text-paragraph-lg';
if (inPolicy) return ''; if (inPolicy) return '';
return 'web-paragraph-lg'; return 'text-paragraph-lg';
})(); })();
</script> </script>

6
src/markdoc/nodes/Link.svelte
View File

@@ -13,13 +13,13 @@
const inChangelog = isInChangelog(); const inChangelog = isInChangelog();
$: classes = (() => { $: classes = (() => {
if (inDocs) return 'web-paragraph-md'; if (inDocs) return 'text-paragraph-md';
if (inChangelog) return 'web-paragraph-lg in-changelog'; if (inChangelog) return 'text-paragraph-lg in-changelog';
return ''; return '';
})(); })();
</script> </script>
<a class="web-link is-inline {classes}" {href} {title} {target} {rel}><slot /></a> <a class="web-link underline {classes}" {href} {title} {target} {rel}><slot /></a>
<style lang="scss"> <style lang="scss">
.in-changelog:last-child { .in-changelog:last-child {

25
src/markdoc/nodes/Paragraph.svelte
View File

@@ -15,11 +15,11 @@
export { className as class }; export { className as class };
$: classes = (() => { $: classes = (() => {
if (inDocs) return 'web-paragraph-md'; if (inDocs) return 'text-paragraph-md';
if (inPolicy) return 'web-paragraph-md in-policy'; if (inPolicy) return 'text-paragraph-md mb-4';
if (inTable) return 'web-paragraph-md'; if (inTable) return 'text-paragraph-md';
if (inChangelog) return 'web-paragraph-lg in-changelog'; if (inChangelog) return 'text-paragraph-lg mb-4 font-normal';
return 'web-paragraph-lg'; return 'text-paragraph-lg mb-8';
})(); })();
</script> </script>
@@ -28,18 +28,3 @@
{:else} {:else}
<p class="{classes} {className}"><slot /></p> <p class="{classes} {className}"><slot /></p>
{/if} {/if}
<style lang="scss">
p.web-paragraph-lg {
margin-block-end: 2rem;
}
.in-policy {
margin-block-end: 1rem;
}
.in-changelog {
margin-block-end: 1rem !important;
font-weight: 400;
}
</style>

2
src/markdoc/tags/Cards_Image_Item.svelte
View File

@@ -13,7 +13,7 @@
<a {href} class="web-card is-normal" style:margin-block-end="0"> <a {href} class="web-card is-normal" style:margin-block-end="0">
<img src={dark} alt="" class="web-u-only-dark" width="32" height="32" /> <img src={dark} alt="" class="web-u-only-dark" width="32" height="32" />
<img src={light} alt="" class="web-u-only-light" width="32" height="32" /> <img src={light} alt="" class="web-u-only-light" width="32" height="32" />
<h4 class="web-sub-body-500 web-u-color-text-primary mt-2"> <h4 class="web-sub-body-500 text-primary mt-2">
{title} {title}
</h4> </h4>
<p class="web-sub-body-400 mt-1"> <p class="web-sub-body-400 mt-1">

2
src/markdoc/tags/Cards_Item.svelte
View File

@@ -14,7 +14,7 @@
{#if icon} {#if icon}
<span class="{icon} web-u-font-size-24" aria-hidden="true" /> <span class="{icon} web-u-font-size-24" aria-hidden="true" />
{/if} {/if}
<h4 class="web-sub-body-500 web-u-color-text-primary"> <h4 class="web-sub-body-500 text-primary">
{title} {title}
</h4> </h4>
</header> </header>

2
src/markdoc/tags/Count_Title.svelte
View File

@@ -4,6 +4,6 @@
const el = title ? 'h3' : 'span'; const el = title ? 'h3' : 'span';
</script> </script>
<svelte:element this={el} class="web-sub-body-500 web-u-color-text-primary"> <svelte:element this={el} class="web-sub-body-500 text-primary">
{title} {title}
</svelte:element> </svelte:element>

2
src/markdoc/tags/Info.svelte
View File

@@ -4,6 +4,6 @@
<div class="web-inline-info"> <div class="web-inline-info">
<span class="icon-info" aria-hidden="true" /> <span class="icon-info" aria-hidden="true" />
<h5 class="web-sub-body-500 web-u-color-text-primary">{title}</h5> <h5 class="web-sub-body-500 text-primary">{title}</h5>
<slot /> <slot />
</div> </div>

2
src/routes/+error.svelte
View File

@@ -16,7 +16,7 @@
<div class="container"> <div class="container">
<div class="web-hero" style="--hero-gap:1.25rem;"> <div class="web-hero" style="--hero-gap:1.25rem;">
<span class="web-badges web-eyebrow !text-white">{$page.status}</span> <span class="web-badges web-eyebrow !text-white">{$page.status}</span>
<h1 class="web-headline web-u-color-text-primary"> <h1 class="text-headline font-aeonik-pro text-primary">
{$page.error?.message ?? 'An error has occured'} {$page.error?.message ?? 'An error has occured'}
</h1> </h1>
{#if $page.status === 404} {#if $page.status === 404}

24
src/routes/+page.svelte
View File

@@ -168,7 +168,7 @@
<div class="my-[7.5rem]"> <div class="my-[7.5rem]">
<div class="container"> <div class="container">
<h2 <h2
class="web-title web-u-color-text-primary text-center web-u-max-width-600 mx-auto" class="text-title font-aeonik-pro text-primary text-center web-u-max-width-600 mx-auto"
> >
Trusted by developers from the world's leading organizations Trusted by developers from the world's leading organizations
</h2> </h2>
@@ -291,7 +291,7 @@
<div class="container"> <div class="container">
<section class="web-hero is-align-start"> <section class="web-hero is-align-start">
<Badge>PRIVACY & SECURITY_</Badge> <Badge>PRIVACY & SECURITY_</Badge>
<h2 class="web-display text-primary max-w-[700px]"> <h2 class="text-display font-aeonik-pro text-primary max-w-[700px]">
Self-host your data or take it to the Cloud Self-host your data or take it to the Cloud
</h2> </h2>
<p class="text-secondary mt-5 max-w-[700px] text-xl font-medium"> <p class="text-secondary mt-5 max-w-[700px] text-xl font-medium">
@@ -324,7 +324,9 @@
<div class="my-[7.5rem]"> <div class="my-[7.5rem]">
<div class="container"> <div class="container">
<div class="web-hero"> <div class="web-hero">
<div class="web-display text-primary">Loved by developers like you</div> <div class="text-display font-aeonik-pro text-primary">
Loved by developers like you
</div>
</div> </div>
<ul class="web-multi-columns-1 mt-20"> <ul class="web-multi-columns-1 mt-20">
<li> <li>
@@ -366,7 +368,7 @@
href="https://twitter.com/appwrite" href="https://twitter.com/appwrite"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="web-link is-inline">@appwrite</a class="web-link underline">@appwrite</a
> handle my authentication process while I focus on the business logic. > handle my authentication process while I focus on the business logic.
</DeveloperCard> </DeveloperCard>
</li> </li>
@@ -406,7 +408,7 @@
href="https://twitter.com/appwrite" href="https://twitter.com/appwrite"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="web-link is-inline">@appwrite</a class="web-link underline">@appwrite</a
>. With its robust feature set and open-source nature, it's the >. With its robust feature set and open-source nature, it's the
perfect choice for developers who want to build secure and scalable perfect choice for developers who want to build secure and scalable
applications. applications.
@@ -438,7 +440,7 @@
<div class="container relative"> <div class="container relative">
<section class="web-hero is-align-start"> <section class="web-hero is-align-start">
<span class="web-badges web-eyebrow !text-white">SDKs_</span> <span class="web-badges web-eyebrow !text-white">SDKs_</span>
<h2 class="web-display web-u-color-text-primary max-w-[600px]"> <h2 class="text-display font-aeonik-pro text-primary max-w-[600px]">
Code the way you want Code the way you want
</h2> </h2>
<p class="text-secondary mt-5 max-w-[600px] text-xl font-medium"> <p class="text-secondary mt-5 max-w-[600px] text-xl font-medium">
@@ -470,7 +472,7 @@
<div class="grid md:grid-cols-2"> <div class="grid md:grid-cols-2">
<section class="web-hero is-align-start"> <section class="web-hero is-align-start">
<span class="web-badges web-eyebrow !text-white">Scale_</span> <span class="web-badges web-eyebrow !text-white">Scale_</span>
<h2 class="web-display web-u-color-text-primary max-w-[600px]"> <h2 class="text-display font-aeonik-pro text-primary max-w-[600px]">
We scale for you We scale for you
</h2> </h2>
</section> </section>
@@ -478,19 +480,19 @@
class="web-big-list-info web-u-inline-width-100-percent-mobile-break1 web-u-margin-block-start-48 ml-auto" class="web-big-list-info web-u-inline-width-100-percent-mobile-break1 web-u-margin-block-start-48 ml-auto"
> >
<li class="web-big-list-info-item"> <li class="web-big-list-info-item">
<div class="web-headline web-u-color-text-primary">90K</div> <div class="text-headline font-aeonik-pro text-primary">90K</div>
<div class="text">Projects</div> <div class="text">Projects</div>
</li> </li>
<li class="web-big-list-info-item"> <li class="web-big-list-info-item">
<div class="web-headline web-u-color-text-primary">+1B</div> <div class="text-headline font-aeonik-pro text-primary">+1B</div>
<div class="text">Requests served</div> <div class="text">Requests served</div>
</li> </li>
<li class="web-big-list-info-item"> <li class="web-big-list-info-item">
<div class="web-headline web-u-color-text-primary">20K</div> <div class="text-headline font-aeonik-pro text-primary">20K</div>
<div class="text">Organizations</div> <div class="text">Organizations</div>
</li> </li>
<li class="web-big-list-info-item"> <li class="web-big-list-info-item">
<div class="web-headline web-u-color-text-primary">99.99%</div> <div class="text-headline font-aeonik-pro text-primary">99.99%</div>
<div class="text">Guaranteed uptime</div> <div class="text">Guaranteed uptime</div>
</li> </li>
</ul> </ul>

30
src/routes/assets/+page.svelte
View File

@@ -63,9 +63,9 @@
<div class="container"> <div class="container">
<div class="web-grid-120-1fr-auto"> <div class="web-grid-120-1fr-auto">
<header class="web-grid-120-1fr-auto-header"> <header class="web-grid-120-1fr-auto-header">
<h1 class="web-display web-u-color-text-primary">Brand assets</h1> <h1 class="text-display font-aeonik-pro text-primary">Brand assets</h1>
<button <button
class="web-u-padding-block-20 web-u-color-text-primary web-is-only-mobile class="web-u-padding-block-20 text-primary web-is-only-mobile
web-u-margin-inline-32-negative web-u-sep-block web-u-margin-inline-32-negative web-u-sep-block
mt-6 flex w-full w-full" mt-6 flex w-full w-full"
> >
@@ -94,7 +94,7 @@
<section id={getSectionId(Section.NAMING)}> <section id={getSectionId(Section.NAMING)}>
<div class="web-flex flex-col gap-2"> <div class="web-flex flex-col gap-2">
<h2 <h2
class="web-title web-u-color-text-primary" class="text-title font-aeonik-pro text-primary"
use:visible={{ top: 48 }} use:visible={{ top: 48 }}
on:visible={handleVisibility(Section.NAMING)} on:visible={handleVisibility(Section.NAMING)}
> >
@@ -111,7 +111,7 @@
<section id={getSectionId(Section.LOGOTYPE)}> <section id={getSectionId(Section.LOGOTYPE)}>
<div class="web-flex flex-col gap-2"> <div class="web-flex flex-col gap-2">
<h2 <h2
class="web-title web-u-color-text-primary" class="text-title font-aeonik-pro text-primary"
use:visible={{ top: 48 }} use:visible={{ top: 48 }}
on:visible={handleVisibility(Section.LOGOTYPE)} on:visible={handleVisibility(Section.LOGOTYPE)}
> >
@@ -195,9 +195,7 @@
</div> </div>
<section> <section>
<div class="web-flex flex-col gap-2"> <div class="web-flex flex-col gap-2">
<h3 class="web-label web-u-color-text-primary"> <h3 class="text-label text-primary">Co-branding logotypes</h3>
Co-branding logotypes
</h3>
<p> <p>
Spacing is determined by the Appwrite mark. Unless otherwise Spacing is determined by the Appwrite mark. Unless otherwise
noted by partner brands, each logo is optically equal as a noted by partner brands, each logo is optically equal as a
@@ -219,7 +217,7 @@
<section id={getSectionId(Section.LOGOMARK)}> <section id={getSectionId(Section.LOGOMARK)}>
<div class="web-flex flex-col gap-2"> <div class="web-flex flex-col gap-2">
<h3 <h3
class="web-title web-u-color-text-primary" class="text-title font-aeonik-pro text-primary"
use:visible={{ top: 48 }} use:visible={{ top: 48 }}
on:visible={handleVisibility(Section.LOGOMARK)} on:visible={handleVisibility(Section.LOGOMARK)}
> >
@@ -304,9 +302,7 @@
</div> </div>
<section id=""> <section id="">
<div class="web-flex flex-col gap-2"> <div class="web-flex flex-col gap-2">
<h3 class="web-label web-u-color-text-primary"> <h3 class="text-label text-primary">Co-branding lockups</h3>
Co-branding lockups
</h3>
<p> <p>
Spacing is determined by the Appwrite mark. Unless otherwise Spacing is determined by the Appwrite mark. Unless otherwise
noted by partner brands, each logo is optically equal as a noted by partner brands, each logo is optically equal as a
@@ -327,7 +323,7 @@
<section id={getSectionId(Section.COLORS)}> <section id={getSectionId(Section.COLORS)}>
<h2 <h2
class="web-title web-u-color-text-primary" class="text-title font-aeonik-pro text-primary"
use:visible={{ top: 48 }} use:visible={{ top: 48 }}
on:visible={handleVisibility(Section.COLORS)} on:visible={handleVisibility(Section.COLORS)}
> >
@@ -339,7 +335,7 @@
web-u-min-block-size-160 flex-1 flex-col justify-center web-u-min-block-size-160 flex-1 flex-col justify-center
gap-2 px-6" gap-2 px-6"
> >
<h3 class="web-label">Light Grey</h3> <h3 class="text-label">Light Grey</h3>
<p class="web-caption-400">#EDEDF0</p> <p class="web-caption-400">#EDEDF0</p>
<div class="buttons | light"> <div class="buttons | light">
<Copy toCopy="#EDEDF0" /> <Copy toCopy="#EDEDF0" />
@@ -350,7 +346,7 @@
web-u-text-color-neutral-50 web-u-bg-color-neutral-900 flex-1 flex-col justify-center web-u-text-color-neutral-50 web-u-bg-color-neutral-900 flex-1 flex-col justify-center
gap-2 px-6" gap-2 px-6"
> >
<h3 class="web-label">Dark Grey</h3> <h3 class="text-label">Dark Grey</h3>
<p class="web-caption-400">#19191D</p> <p class="web-caption-400">#19191D</p>
<div class="buttons"> <div class="buttons">
<Copy toCopy="#19191D" /> <Copy toCopy="#19191D" />
@@ -361,7 +357,7 @@
web-u-min-block-size-160 flex-1 flex-col justify-center web-u-min-block-size-160 flex-1 flex-col justify-center
gap-2 px-6" gap-2 px-6"
> >
<h3 class="web-label">Appwrite Pink</h3> <h3 class="text-label">Appwrite Pink</h3>
<p class="web-caption-400">#FD366E</p> <p class="web-caption-400">#FD366E</p>
<div class="buttons"> <div class="buttons">
<Copy toCopy="#FD366E" /> <Copy toCopy="#FD366E" />
@@ -373,7 +369,7 @@
<section id={getSectionId(Section.VISUALS)}> <section id={getSectionId(Section.VISUALS)}>
<div class="web-flex flex-col gap-2"> <div class="web-flex flex-col gap-2">
<h2 <h2
class="web-title web-u-color-text-primary" class="text-title font-aeonik-pro text-primary"
use:visible={{ top: 48 }} use:visible={{ top: 48 }}
on:visible={handleVisibility(Section.VISUALS)} on:visible={handleVisibility(Section.VISUALS)}
> >
@@ -579,7 +575,7 @@
<section id={getSectionId(Section.CONTACT)}> <section id={getSectionId(Section.CONTACT)}>
<div class="web-flex flex-col gap-2"> <div class="web-flex flex-col gap-2">
<h2 <h2
class="web-title web-u-color-text-primary" class="text-title font-aeonik-pro text-primary"
use:visible={{ top: 48 }} use:visible={{ top: 48 }}
on:visible={handleVisibility(Section.CONTACT)} on:visible={handleVisibility(Section.CONTACT)}
> >

6
src/routes/blog/[[page]]/+page.svelte
View File

@@ -119,7 +119,7 @@
<div class="web-big-padding-section-level-2 relative"> <div class="web-big-padding-section-level-2 relative">
<div class="container"> <div class="container">
<h1 class="web-display web-u-color-text-primary">Blog</h1> <h1 class="text-display font-aeonik-pro text-primary">Blog</h1>
{#if featured} {#if featured}
{@const author = data.authors.find( {@const author = data.authors.find(
(author) => author.slug === featured.author (author) => author.slug === featured.author
@@ -139,7 +139,7 @@
<li>{featured.timeToRead} min</li> <li>{featured.timeToRead} min</li>
</ul> </ul>
<a href={featured.href}> <a href={featured.href}>
<h2 class="web-title web-u-color-text-primary"> <h2 class="text-title font-aeonik-pro text-primary">
{featured.title} {featured.title}
</h2> </h2>
</a> </a>
@@ -184,7 +184,7 @@
<div class="web-container"> <div class="web-container">
<h2 <h2
id="title" id="title"
class="web-title web-u-color-text-primary" class="text-title font-aeonik-pro text-primary"
bind:this={articlesHeader} bind:this={articlesHeader}
> >
Articles Articles

2
src/routes/changelog/ChangelogEntry.svelte
View File

@@ -14,7 +14,7 @@
{/if} {/if}
<div class="padded"> <div class="padded">
<h2 class="web-title web-u-color-text-primary"> <h2 class="text-title font-aeonik-pro text-primary">
<a href={entry.href}> <a href={entry.href}>
{entry.title} {entry.title}
</a> </a>

2
src/routes/changelog/[[page]]/+page.svelte
View File

@@ -48,7 +48,7 @@
<div class="pt-10"> <div class="pt-10">
<div class="web-big-padding-section-level-2"> <div class="web-big-padding-section-level-2">
<div class="container wrapper"> <div class="container wrapper">
<h1 class="web-display web-u-color-text-primary">Changelog</h1> <h1 class="text-display font-aeonik-pro text-primary">Changelog</h1>
<ul> <ul>
{#each data.entries as entry} {#each data.entries as entry}
<li> <li>

4
src/routes/changelog/entry/[entry]/+page.svelte
View File

@@ -85,7 +85,9 @@
<time datetime={data.date}>{formatDate(data.date)}</time> <time datetime={data.date}>{formatDate(data.date)}</time>
</li> </li>
</ul> </ul>
<h1 class="web-title web-u-color-text-primary">{data.title}</h1> <h1 class="text-title font-aeonik-pro text-primary">
{data.title}
</h1>
<div class="share-post-section mt-4 flex items-center gap-4"> <div class="share-post-section mt-4 flex items-center gap-4">
<span class="web-eyebrow pr-2" style:color="#adadb0"> SHARE </span> <span class="web-eyebrow pr-2" style:color="#adadb0"> SHARE </span>

62
src/routes/community/+page.svelte
View File

@@ -159,7 +159,7 @@
<div class="web-big-padding-section-level-2"> <div class="web-big-padding-section-level-2">
<section class="container web-u-padding-block-end-0 relative"> <section class="container web-u-padding-block-end-0 relative">
<div class="web-hero is-align-start web-u-max-width-580"> <div class="web-hero is-align-start web-u-max-width-580">
<h1 class="web-display web-u-color-text-primary"> <h1 class="text-display font-aeonik-pro text-primary">
Built by a community of 800+ contributors Built by a community of 800+ contributors
</h1> </h1>
<div> <div>
@@ -230,7 +230,7 @@
<div class="web-big-padding-section-level-2"> <div class="web-big-padding-section-level-2">
<div class="container relative"> <div class="container relative">
<div class="web-hero is-mobile-center web-u-max-width-900 gap-5"> <div class="web-hero is-mobile-center web-u-max-width-900 gap-5">
<h1 class="web-headline web-u-color-text-primary"> <h1 class="text-headline font-aeonik-pro text-primary">
The power of open source benefits us all The power of open source benefits us all
</h1> </h1>
<div> <div>
@@ -258,7 +258,7 @@
<div class="web-big-padding-section-level-2"> <div class="web-big-padding-section-level-2">
<div class="container"> <div class="container">
<div class="web-hero is-align-start"> <div class="web-hero is-align-start">
<h2 class="web-display web-u-color-text-primary">Get involved</h2> <h2 class="text-display font-aeonik-pro text-primary">Get involved</h2>
<div> <div>
<p class="text-description"> <p class="text-description">
With every contribution, Appwrite gets better for all of us. Start With every contribution, Appwrite gets better for all of us. Start
@@ -276,9 +276,7 @@
flex gap-24" flex gap-24"
> >
<div> <div>
<h3 class="web-label web-u-color-text-primary"> <h3 class="text-label text-primary">Check our Open Issues</h3>
Check our Open Issues
</h3>
<p class="web-main-body-500 mt-1"> <p class="web-main-body-500 mt-1">
Anyone can join and help Appwrite become better. Anyone can join and help Appwrite become better.
</p> </p>
@@ -297,12 +295,10 @@
<thead class="web-table-line-head"> <thead class="web-table-line-head">
<tr class="web-table-line-row"> <tr class="web-table-line-row">
<th <th
class="web-table-line-cell web-u-color-text-primary whitespace-nowrap" class="web-table-line-cell text-primary whitespace-nowrap"
>Issue #</th >Issue #</th
> >
<th class="web-table-line-cell web-u-color-text-primary" <th class="web-table-line-cell text-primary">Title</th>
>Title</th
>
</tr> </tr>
</thead> </thead>
<tbody class="web-table-line-body"> <tbody class="web-table-line-body">
@@ -344,7 +340,7 @@
</div> </div>
<div class="web-big-padding-section-level-2"> <div class="web-big-padding-section-level-2">
<section class="container"> <section class="container">
<h4 class="web-label web-u-color-text-primary">Other ways to help</h4> <h4 class="text-label text-primary">Other ways to help</h4>
<ul <ul
class="mt-5 grid gap-5 md:grid-cols-4 md:gap-8" class="mt-5 grid gap-5 md:grid-cols-4 md:gap-8"
style="--grid-item-size:15rem" style="--grid-item-size:15rem"
@@ -353,9 +349,7 @@
<div <div
class="web-card is-normal has-border-gradient web-u-gap-6 flex flex-col" class="web-card is-normal has-border-gradient web-u-gap-6 flex flex-col"
> >
<div class="web-sub-body-500 web-u-color-text-primary"> <div class="web-sub-body-500 text-primary">Create content</div>
Create content
</div>
<div class="web-sub-body-400"> <div class="web-sub-body-400">
Help others discover Appwrite with videos and blogs. Help others discover Appwrite with videos and blogs.
</div> </div>
@@ -365,9 +359,7 @@
<div <div
class="web-card is-normal has-border-gradient web-u-gap-6 flex flex-col" class="web-card is-normal has-border-gradient web-u-gap-6 flex flex-col"
> >
<div class="web-sub-body-500 web-u-color-text-primary"> <div class="web-sub-body-500 text-primary">Present at meetups</div>
Present at meetups
</div>
<div class="web-sub-body-400"> <div class="web-sub-body-400">
Share your experience and represent Appwrite in public. Share your experience and represent Appwrite in public.
</div> </div>
@@ -377,9 +369,7 @@
<div <div
class="web-card is-normal has-border-gradient web-u-gap-6 flex flex-col" class="web-card is-normal has-border-gradient web-u-gap-6 flex flex-col"
> >
<div class="web-sub-body-500 web-u-color-text-primary"> <div class="web-sub-body-500 text-primary">Report bugs</div>
Report bugs
</div>
<div class="web-sub-body-400"> <div class="web-sub-body-400">
Find bugs and submit PRs to fix them. Find bugs and submit PRs to fix them.
</div> </div>
@@ -389,9 +379,7 @@
<div <div
class="web-card is-normal has-border-gradient web-u-gap-6 flex flex-col" class="web-card is-normal has-border-gradient web-u-gap-6 flex flex-col"
> >
<div class="web-sub-body-500 web-u-color-text-primary"> <div class="web-sub-body-500 text-primary">Submit new ideas</div>
Submit new ideas
</div>
<div class="web-sub-body-400"> <div class="web-sub-body-400">
Suggest features, integrations, or SDKs for our roadmap. Suggest features, integrations, or SDKs for our roadmap.
</div> </div>
@@ -401,7 +389,7 @@
<div <div
class="web-card is-normal has-border-gradient web-u-gap-6 flex flex-col" class="web-card is-normal has-border-gradient web-u-gap-6 flex flex-col"
> >
<div class="web-sub-body-500 web-u-color-text-primary"> <div class="web-sub-body-500 text-primary">
Improve documentation Improve documentation
</div> </div>
<div class="web-sub-body-400"> <div class="web-sub-body-400">
@@ -413,9 +401,7 @@
<div <div
class="web-card is-normal has-border-gradient web-u-gap-6 flex flex-col" class="web-card is-normal has-border-gradient web-u-gap-6 flex flex-col"
> >
<div class="web-sub-body-500 web-u-color-text-primary"> <div class="web-sub-body-500 text-primary">Helping others</div>
Helping others
</div>
<div class="web-sub-body-400"> <div class="web-sub-body-400">
Support developers with their projects and contributions. Support developers with their projects and contributions.
</div> </div>
@@ -428,7 +414,7 @@
<section class="container web-u-sep-block-start web-u-padding-block-start-64"> <section class="container web-u-sep-block-start web-u-padding-block-start-64">
<Carousel size="big"> <Carousel size="big">
<svelte:fragment slot="header"> <svelte:fragment slot="header">
<h4 class="web-label web-u-color-text-primary">Upcoming Events</h4> <h4 class="text-label text-primary">Upcoming Events</h4>
</svelte:fragment> </svelte:fragment>
{#each events as event} {#each events as event}
<li> <li>
@@ -452,7 +438,7 @@
<div class="web-big-padding-section-level-2"> <div class="web-big-padding-section-level-2">
<div class="container"> <div class="container">
<div class="web-hero is-center"> <div class="web-hero is-center">
<h2 class="web-display web-u-color-text-primary"> <h2 class="text-display font-aeonik-pro text-primary">
Inspire and get inspired Inspire and get inspired
</h2> </h2>
<p class="text-description web-u-margin-block-start-0"> <p class="text-description web-u-margin-block-start-0">
@@ -483,7 +469,7 @@
<div class="container"> <div class="container">
<div class="web-grid-15-25-desktop web-u-row-gap-48 web-u-column-gap-96"> <div class="web-grid-15-25-desktop web-u-row-gap-48 web-u-column-gap-96">
<div class="web-hero is-align-start web-u-max-width-380"> <div class="web-hero is-align-start web-u-max-width-380">
<div class="web-display web-u-color-text-primary"> <div class="text-display font-aeonik-pro text-primary">
Visit the community Visit the community
</div> </div>
<p class="text-description"> <p class="text-description">
@@ -506,7 +492,9 @@
aria-label="Discord" aria-label="Discord"
/> />
</div> </div>
<div class="web-title mt-auto">17K+ members</div> <div class="text-title font-aeonik-pro mt-auto">
17K+ members
</div>
</a> </a>
</li> </li>
<li> <li>
@@ -524,7 +512,9 @@
aria-label="X" aria-label="X"
/> />
</div> </div>
<div class="web-title mt-auto">128K+ followers</div> <div class="text-title font-aeonik-pro mt-auto">
128K+ followers
</div>
</a> </a>
</li> </li>
<li> <li>
@@ -542,7 +532,7 @@
aria-label="GitHub" aria-label="GitHub"
/> />
</div> </div>
<div class="web-title mt-auto"> <div class="text-title font-aeonik-pro mt-auto">
{GITHUB_STARS}+ stargazers {GITHUB_STARS}+ stargazers
</div> </div>
</a> </a>
@@ -562,7 +552,9 @@
aria-label="Youtube" aria-label="Youtube"
/> />
</div> </div>
<div class="web-title mt-auto">4K+ subscribers</div> <div class="text-title font-aeonik-pro mt-auto">
4K+ subscribers
</div>
</a> </a>
</li> </li>
</ul> </ul>
@@ -580,7 +572,7 @@
class:web-u-max-width-380={!submitted} class:web-u-max-width-380={!submitted}
> >
<section class="flex flex-col gap-5"> <section class="flex flex-col gap-5">
<h1 class="web-title web-u-color-text-primary"> <h1 class="text-title font-aeonik-pro text-primary">
Appwrite insights Appwrite insights
</h1> </h1>
<p class="text-description web-u-padding-block-end-40"> <p class="text-description web-u-padding-block-end-40">

2
src/routes/community/EventCard.svelte
View File

@@ -50,7 +50,7 @@
<span class="">{location}</span> <span class="">{location}</span>
</li> </li>
</ul> </ul>
<svelte:element this={headingTag} class="web-sub-body-500 web-u-color-text-primary mt-1"> <svelte:element this={headingTag} class="web-sub-body-500 text-primary mt-1">
{title} {title}
</svelte:element> </svelte:element>
<p class="web-sub-body-500"> <p class="web-sub-body-500">

2
src/routes/community/ProjectCard.svelte
View File

@@ -27,7 +27,7 @@
rel="noopener noreferrer" rel="noopener noreferrer"
> >
<div class="p-3"> <div class="p-3">
<h3 class="web-main-body-500 web-u-color-text-primary">{title}</h3> <h3 class="web-main-body-500 text-primary">{title}</h3>
<p class="line-clamp-2"> <p class="line-clamp-2">
{description} {description}
</p> </p>

54
src/routes/company/+page.svelte
View File

@@ -38,7 +38,7 @@
class="web-hero" class="web-hero"
style="--hero-max-inline-size:62.125rem; --hero-gap:1.125rem;" style="--hero-max-inline-size:62.125rem; --hero-gap:1.125rem;"
> >
<h1 class="web-headline web-u-color-text-primary"> <h1 class="text-headline font-aeonik-pro text-primary">
Unleashing creativity and innovation in every creator Unleashing creativity and innovation in every creator
</h1> </h1>
<div> <div>
@@ -61,7 +61,7 @@
style="--grid-1-1-gap:2rem; --grid-1-1-gap-desktop:6.25rem;" style="--grid-1-1-gap:2rem; --grid-1-1-gap-desktop:6.25rem;"
> >
<div class="flex flex-col gap-8"> <div class="flex flex-col gap-8">
<h2 class="web-display web-u-color-text-primary"> <h2 class="text-display font-aeonik-pro text-primary">
Designed for and by developers Designed for and by developers
</h2> </h2>
<a <a
@@ -100,7 +100,7 @@
<div class="web-big-padding-section-level-2"> <div class="web-big-padding-section-level-2">
<div class="container"> <div class="container">
<div class="web-hero is-center"> <div class="web-hero is-center">
<h2 class="web-display web-u-color-text-primary">Our Story</h2> <h2 class="text-display font-aeonik-pro text-primary">Our Story</h2>
<p class="text-description"> <p class="text-description">
What once started as a passion project is now a beloved and awarded product that helps developers world wide to achieve more/unleash creativity and innovation. What once started as a passion project is now a beloved and awarded product that helps developers world wide to achieve more/unleash creativity and innovation.
</p> </p>
@@ -115,7 +115,7 @@
style="--grid-1-1-gap:2.5rem; --grid-1-1-gap-desktop:15rem;"> style="--grid-1-1-gap:2.5rem; --grid-1-1-gap-desktop:15rem;">
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<span class="web-badges web-eyebrow web-u-cross-child-start">2019_</span> <span class="web-badges web-eyebrow web-u-cross-child-start">2019_</span>
<h3 class="web-title web-u-color-text-primary"> <h3 class="text-title font-aeonik-pro text-primary">
A passion project called Appwrite A passion project called Appwrite
</h3> </h3>
<p class="web-main-body-400"> <p class="web-main-body-400">
@@ -137,7 +137,7 @@
</div> </div>
<div> <div>
<div class="web-card is-white web-u-max-width-350"> <div class="web-card is-white web-u-max-width-350">
<h6 class="web-label">0.1 - 0.4 released</h6> <h6 class="text-label">0.1 - 0.4 released</h6>
<p class="web-sub-body-400 mt-3">Early stages of authentication, avatars, database, teams, and storage features</p> <p class="web-sub-body-400 mt-3">Early stages of authentication, avatars, database, teams, and storage features</p>
</div> </div>
</div> </div>
@@ -148,7 +148,7 @@
style="--grid-1-1-gap:2.5rem; --grid-1-1-gap-desktop:15rem;"> style="--grid-1-1-gap:2.5rem; --grid-1-1-gap-desktop:15rem;">
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<span class="web-badges web-eyebrow web-u-cross-child-start">2019_</span> <span class="web-badges web-eyebrow web-u-cross-child-start">2019_</span>
<h3 class="web-title web-u-color-text-primary"> <h3 class="text-title font-aeonik-pro text-primary">
Building the team Building the team
</h3> </h3>
<p class="aw -main-body-400"> <p class="aw -main-body-400">
@@ -162,7 +162,7 @@
style="--grid-1-1-gap:2.5rem; --grid-1-1-gap-desktop:15rem;"> style="--grid-1-1-gap:2.5rem; --grid-1-1-gap-desktop:15rem;">
<div> <div>
<div class="web-card is-white web-u-max-width-168"> <div class="web-card is-white web-u-max-width-168">
<h6 class="web-title">5k</h6> <h6 class="text-title font-aeonik-pro">5k</h6>
<p class="web-sub-body-400 web-u-margin-block-start-6">GitHub Stars</p> <p class="web-sub-body-400 web-u-margin-block-start-6">GitHub Stars</p>
</div> </div>
</div> </div>
@@ -176,7 +176,7 @@
style="--grid-1-1-gap:2.5rem; --grid-1-1-gap-desktop:15rem;"> style="--grid-1-1-gap:2.5rem; --grid-1-1-gap-desktop:15rem;">
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<span class="web-badges web-eyebrow web-u-cross-child-start">2019_</span> <span class="web-badges web-eyebrow web-u-cross-child-start">2019_</span>
<h3 class="web-title web-u-color-text-primary"> <h3 class="text-title font-aeonik-pro text-primary">
Community validation Community validation
</h3> </h3>
<p class="aw -main-body-400"> <p class="aw -main-body-400">
@@ -218,7 +218,7 @@
style="--grid-1-1-gap:2.5rem; --grid-1-1-gap-desktop:15rem;"> style="--grid-1-1-gap:2.5rem; --grid-1-1-gap-desktop:15rem;">
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<span class="web-badges web-eyebrow web-u-cross-child-start">2019_</span> <span class="web-badges web-eyebrow web-u-cross-child-start">2019_</span>
<h3 class="web-title web-u-color-text-primary"> <h3 class="text-title font-aeonik-pro text-primary">
Continuous improvement Continuous improvement
</h3> </h3>
<p class="aw -main-body-400"> <p class="aw -main-body-400">
@@ -247,7 +247,7 @@
style="--grid-1-1-gap:2.5rem; --grid-1-1-gap-desktop:15rem;"> style="--grid-1-1-gap:2.5rem; --grid-1-1-gap-desktop:15rem;">
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<span class="web-badges web-eyebrow web-u-cross-child-start">2019_</span> <span class="web-badges web-eyebrow web-u-cross-child-start">2019_</span>
<h3 class="web-title web-u-color-text-primary"> <h3 class="text-title font-aeonik-pro text-primary">
Taking it to the Cloud Taking it to the Cloud
</h3> </h3>
<p class="aw -main-body-400"> <p class="aw -main-body-400">
@@ -278,7 +278,7 @@
<div class="web-big-padding-section-level-2"> <div class="web-big-padding-section-level-2">
<div class="container"> <div class="container">
<div class="web-hero web-u-max-width-800"> <div class="web-hero web-u-max-width-800">
<h4 class="web-display web-u-color-text-primary"> <h4 class="text-display font-aeonik-pro text-primary">
Backed by top investors Backed by top investors
</h4> </h4>
<p class="text-description web-u-max-width-480 mx-auto"> <p class="text-description web-u-max-width-480 mx-auto">
@@ -371,12 +371,12 @@
</div> </div>
<div class="web-big-padding-section-level-2"> <div class="web-big-padding-section-level-2">
<div class="container"> <div class="container">
<h5 class="web-title web-u-color-text-primary text-center">Angel Investors</h5> <h5 class="text-title font-aeonik-pro text-primary text-center">
Angel Investors
</h5>
<ul class="web-grid-2c-4c mt-12"> <ul class="web-grid-2c-4c mt-12">
<li class="flex flex-col"> <li class="flex flex-col">
<h6 class="web-main-body-500 web-u-color-text-primary"> <h6 class="web-main-body-500 text-primary">Aaron Applebaum</h6>
Aaron Applebaum
</h6>
<p class="web-main-body-500">Partner</p> <p class="web-main-body-500">Partner</p>
<p class="web-main-body-500">MizMaa</p> <p class="web-main-body-500">MizMaa</p>
<ul class="mt-auto flex gap-2 pt-4"> <ul class="mt-auto flex gap-2 pt-4">
@@ -405,9 +405,7 @@
</ul> </ul>
</li> </li>
<li class="flex flex-col"> <li class="flex flex-col">
<h6 class="web-main-body-500 web-u-color-text-primary"> <h6 class="web-main-body-500 text-primary">Ariel Maislos</h6>
Ariel Maislos
</h6>
<p class="web-main-body-500">Angel Investor</p> <p class="web-main-body-500">Angel Investor</p>
<p class="web-main-body-500">Former Apple IL CEO</p> <p class="web-main-body-500">Former Apple IL CEO</p>
<ul class="mt-auto flex gap-2 pt-4"> <ul class="mt-auto flex gap-2 pt-4">
@@ -436,14 +434,12 @@
</ul> </ul>
</li> </li>
<li class="flex flex-col"> <li class="flex flex-col">
<h6 class="web-main-body-500 web-u-color-text-primary">Gilad Engel</h6> <h6 class="web-main-body-500 text-primary">Gilad Engel</h6>
<p class="web-main-body-500">Angel Investor</p> <p class="web-main-body-500">Angel Investor</p>
<ul class="mt-auto flex gap-2 pt-4" /> <ul class="mt-auto flex gap-2 pt-4" />
</li> </li>
<li class="flex flex-col"> <li class="flex flex-col">
<h6 class="web-main-body-500 web-u-color-text-primary"> <h6 class="web-main-body-500 text-primary">Krishna Visvanathan</h6>
Krishna Visvanathan
</h6>
<p class="web-main-body-500">Co-founder & Partner</p> <p class="web-main-body-500">Co-founder & Partner</p>
<p class="web-main-body-500">Crane Venture Partners</p> <p class="web-main-body-500">Crane Venture Partners</p>
<ul class="mt-auto flex gap-2 pt-4"> <ul class="mt-auto flex gap-2 pt-4">
@@ -461,7 +457,7 @@
</ul> </ul>
</li> </li>
<li class="flex flex-col"> <li class="flex flex-col">
<h6 class="web-main-body-500 web-u-color-text-primary">Ameet Patel</h6> <h6 class="web-main-body-500 text-primary">Ameet Patel</h6>
<p class="web-main-body-500">Angel Investor</p> <p class="web-main-body-500">Angel Investor</p>
<ul class="mt-auto flex gap-2 pt-4"> <ul class="mt-auto flex gap-2 pt-4">
<li> <li>
@@ -478,7 +474,7 @@
</ul> </ul>
</li> </li>
<li class="flex flex-col"> <li class="flex flex-col">
<h6 class="web-main-body-500 web-u-color-text-primary">Benno Jering</h6> <h6 class="web-main-body-500 text-primary">Benno Jering</h6>
<p class="web-main-body-500">Partner</p> <p class="web-main-body-500">Partner</p>
<p class="web-main-body-500">Redline Capital</p> <p class="web-main-body-500">Redline Capital</p>
<ul class="mt-auto flex gap-2 pt-4"> <ul class="mt-auto flex gap-2 pt-4">
@@ -496,9 +492,7 @@
</ul> </ul>
</li> </li>
<li class="flex flex-col"> <li class="flex flex-col">
<h6 class="web-main-body-500 web-u-color-text-primary"> <h6 class="web-main-body-500 text-primary">James Lindenbaum</h6>
James Lindenbaum
</h6>
<p class="web-main-body-500">Co-founder</p> <p class="web-main-body-500">Co-founder</p>
<p class="web-main-body-500">Heroku</p> <p class="web-main-body-500">Heroku</p>
<ul class="mt-auto flex gap-2 pt-4"> <ul class="mt-auto flex gap-2 pt-4">
@@ -516,7 +510,7 @@
</ul> </ul>
</li> </li>
<li class="flex flex-col"> <li class="flex flex-col">
<h6 class="web-main-body-500 web-u-color-text-primary">Uri Boness</h6> <h6 class="web-main-body-500 text-primary">Uri Boness</h6>
<p class="web-main-body-500">Co-Founder</p> <p class="web-main-body-500">Co-Founder</p>
<p class="web-main-body-500">Elastic</p> <p class="web-main-body-500">Elastic</p>
<ul class="mt-auto flex gap-2 pt-4"> <ul class="mt-auto flex gap-2 pt-4">
@@ -548,8 +542,8 @@
/> />
<div class="container"> <div class="container">
<div class="web-hero web-u-max-width-380"> <div class="web-hero web-u-max-width-380">
<h3 class="web-display web-u-color-text-primary">Join the team</h3> <h3 class="text-display font-aeonik-pro text-primary">Join the team</h3>
<p class="web-u-color-text-primary web-u-opacity-64"> <p class="text-primary web-u-opacity-64">
Find your next career at Appwrite and join a team of remote workers. Find your next career at Appwrite and join a team of remote workers.
</p> </p>
<a <a

6
src/routes/contact-us/+page.svelte
View File

@@ -74,7 +74,7 @@
> >
{#if submitted} {#if submitted}
<section class="flex flex-col gap-5"> <section class="flex flex-col gap-5">
<h1 class="web-display web-u-color-text-primary"> <h1 class="text-display font-aeonik-pro text-primary">
Thank you for your message Thank you for your message
</h1> </h1>
<p class="text-description web-u-padding-block-end-32"> <p class="text-description web-u-padding-block-end-32">
@@ -91,7 +91,7 @@
</section> </section>
{:else} {:else}
<section class="flex flex-col gap-5"> <section class="flex flex-col gap-5">
<h1 class="web-display web-u-color-text-primary"> <h1 class="text-display font-aeonik-pro text-primary">
Contact Us Contact Us
</h1> </h1>
<p class="text-description web-u-padding-block-end-40"> <p class="text-description web-u-padding-block-end-40">
@@ -103,7 +103,7 @@
<section <section
class="web-u-padding-block-start-40 web-u-sep-block-start flex flex-col gap-3" class="web-u-padding-block-start-40 web-u-sep-block-start flex flex-col gap-3"
> >
<h2 class="web-label web-u-color-text-primary">Follow us</h2> <h2 class="text-label text-primary">Follow us</h2>
<ul class="flex gap-2"> <ul class="flex gap-2">
{#each socials as social} {#each socials as social}
<li> <li>

2
src/routes/docs/+error.svelte
View File

@@ -11,7 +11,7 @@
<div class="container"> <div class="container">
<div class="web-hero" style="--hero-gap:1.25rem;"> <div class="web-hero" style="--hero-gap:1.25rem;">
<span class="web-badges web-eyebrow !text-white">{$page.status}</span> <span class="web-badges web-eyebrow !text-white">{$page.status}</span>
<h1 class="web-headline web-u-color-text-primary"> <h1 class="text-headline font-aeonik-pro text-primary">
{$page.error?.message ?? 'An error has occured'} {$page.error?.message ?? 'An error has occured'}
</h1> </h1>
{#if $page.status === 404} {#if $page.status === 404}

52
src/routes/docs/+page.svelte
View File

@@ -77,7 +77,7 @@
</div> </div>
<section class="web-hero is-align-start e-hero-docs relative"> <section class="web-hero is-align-start e-hero-docs relative">
<h1 class="web-display web-u-color-text-primary max-w-[600px]"> <h1 class="text-display font-aeonik-pro text-primary max-w-[600px]">
Learn how to build like a team of hundreds<span class="web-u-color-text-accent" Learn how to build like a team of hundreds<span class="web-u-color-text-accent"
>_ >_
</span> </span>
@@ -88,7 +88,7 @@
</p> </p>
</section> </section>
<section class="web-hero is-align-start tech-hero"> <section class="web-hero is-align-start tech-hero">
<h2 class="web-title web-u-color-text-primary max-w-[600px]"> <h2 class="text-title font-aeonik-pro text-primary max-w-[600px]">
Get started with your technologies Get started with your technologies
</h2> </h2>
<p class="text-description max-w-[600px]"> <p class="text-description max-w-[600px]">
@@ -120,7 +120,7 @@
<div class="bg-overlay" /> <div class="bg-overlay" />
</section> </section>
<section> <section>
<h2 class="web-title web-u-color-text-primary max-w-[600px]">Show me some code</h2> <h2 class="text-title font-aeonik-pro text-primary max-w-[600px]">Show me some code</h2>
<p class="text-description mt-4 max-w-[600px]"> <p class="text-description mt-4 max-w-[600px]">
If you learn best from code examples, follow one of our tutorials. If you learn best from code examples, follow one of our tutorials.
</p> </p>
@@ -133,7 +133,9 @@
</Carousel> </Carousel>
</section> </section>
<section class="web-hero is-align-start is-no-max-width"> <section class="web-hero is-align-start is-no-max-width">
<h2 class="web-title web-u-color-text-primary max-w-[600px]">Explore capabilities</h2> <h2 class="text-title font-aeonik-pro text-primary max-w-[600px]">
Explore capabilities
</h2>
<p class="text-description max-w-[600px]"> <p class="text-description max-w-[600px]">
All the core functionalities you need with a scalable and flexible API. Explore All the core functionalities you need with a scalable and flexible API. Explore
Appwrite's product offerings. Appwrite's product offerings.
@@ -156,7 +158,7 @@
width="48" width="48"
height="48" height="48"
/> />
<h4 class="web-sub-body-500 web-u-color-text-primary mt-2">Auth</h4> <h4 class="web-sub-body-500 text-primary mt-2">Auth</h4>
<p class="web-sub-body-400 mt-1"> <p class="web-sub-body-400 mt-1">
Sign in users with multiple OAuth providers. Sign in users with multiple OAuth providers.
</p> </p>
@@ -178,9 +180,7 @@
width="48" width="48"
height="48" height="48"
/> />
<h4 class="web-sub-body-500 web-u-color-text-primary mt-2"> <h4 class="web-sub-body-500 text-primary mt-2">Databases</h4>
Databases
</h4>
<p class="web-sub-body-400 mt-1"> <p class="web-sub-body-400 mt-1">
Store your application and user data. Store your application and user data.
</p> </p>
@@ -202,9 +202,7 @@
width="48" width="48"
height="48" height="48"
/> />
<h4 class="web-sub-body-500 web-u-color-text-primary mt-2"> <h4 class="web-sub-body-500 text-primary mt-2">Functions</h4>
Functions
</h4>
<p class="web-sub-body-400 mt-1"> <p class="web-sub-body-400 mt-1">
Extend and customize your server's functionality. Extend and customize your server's functionality.
</p> </p>
@@ -226,9 +224,7 @@
width="48" width="48"
height="48" height="48"
/> />
<h4 class="web-sub-body-500 web-u-color-text-primary mt-2"> <h4 class="web-sub-body-500 text-primary mt-2">Messaging</h4>
Messaging
</h4>
<p class="web-sub-body-400 mt-1"> <p class="web-sub-body-400 mt-1">
Send and schedule email, SMS, and push notifications. Send and schedule email, SMS, and push notifications.
</p> </p>
@@ -250,7 +246,7 @@
width="48" width="48"
height="48" height="48"
/> />
<h4 class="web-sub-body-500 web-u-color-text-primary mt-2">Storage</h4> <h4 class="web-sub-body-500 text-primary mt-2">Storage</h4>
<p class="web-sub-body-400 mt-1"> <p class="web-sub-body-400 mt-1">
Store images, videos, documents, and files. Store images, videos, documents, and files.
</p> </p>
@@ -272,7 +268,7 @@
width="48" width="48"
height="48" height="48"
/> />
<h4 class="web-sub-body-500 web-u-color-text-primary mt-2">Realtime</h4> <h4 class="web-sub-body-500 text-primary mt-2">Realtime</h4>
<p class="web-sub-body-400 mt-1"> <p class="web-sub-body-400 mt-1">
Respond to server events in realtime. Respond to server events in realtime.
</p> </p>
@@ -282,7 +278,7 @@
</div> </div>
</section> </section>
<section class="web-hero is-align-start is-no-max-width"> <section class="web-hero is-align-start is-no-max-width">
<h2 class="web-title web-u-color-text-primary max-w-[600px]"> <h2 class="text-title font-aeonik-pro text-primary max-w-[600px]">
Explore ways to integrate Explore ways to integrate
</h2> </h2>
<p class="text-description max-w-[600px]"> <p class="text-description max-w-[600px]">
@@ -293,7 +289,7 @@
<ul class="web-grid-row-2"> <ul class="web-grid-row-2">
<li> <li>
<a href="/docs/sdks" class="web-card is-normal"> <a href="/docs/sdks" class="web-card is-normal">
<h4 class="web-sub-body-500 web-u-color-text-primary mt-2">SDKs</h4> <h4 class="web-sub-body-500 text-primary mt-2">SDKs</h4>
<p class="web-sub-body-400 mt-1"> <p class="web-sub-body-400 mt-1">
Light-weight SDKs for your favorite platforms. Light-weight SDKs for your favorite platforms.
</p> </p>
@@ -301,7 +297,7 @@
</li> </li>
<li> <li>
<a href="/docs/apis/rest" class="web-card is-normal"> <a href="/docs/apis/rest" class="web-card is-normal">
<h4 class="web-sub-body-500 web-u-color-text-primary mt-2">REST API</h4> <h4 class="web-sub-body-500 text-primary mt-2">REST API</h4>
<p class="web-sub-body-400 mt-1"> <p class="web-sub-body-400 mt-1">
Integrate with HTTP requests without the needing an SDK. Integrate with HTTP requests without the needing an SDK.
</p> </p>
@@ -309,7 +305,7 @@
</li> </li>
<li> <li>
<a href="/docs/apis/graphql" class="web-card is-normal"> <a href="/docs/apis/graphql" class="web-card is-normal">
<h4 class="web-sub-body-500 web-u-color-text-primary mt-2">GraphQL</h4> <h4 class="web-sub-body-500 text-primary mt-2">GraphQL</h4>
<p class="web-sub-body-400 mt-1"> <p class="web-sub-body-400 mt-1">
Leverage GraphQL through our SDKs or integrate directly with REST Leverage GraphQL through our SDKs or integrate directly with REST
endpoints. endpoints.
@@ -318,7 +314,7 @@
</li> </li>
<li> <li>
<a href="/docs/apis/realtime" class="web-card is-normal"> <a href="/docs/apis/realtime" class="web-card is-normal">
<h4 class="web-sub-body-500 web-u-color-text-primary mt-2">Realtime</h4> <h4 class="web-sub-body-500 text-primary mt-2">Realtime</h4>
<p class="web-sub-body-400 mt-1"> <p class="web-sub-body-400 mt-1">
Respond to auth, databases, storage, and function events in Respond to auth, databases, storage, and function events in
realtime. realtime.
@@ -329,7 +325,9 @@
</div> </div>
</section> </section>
<section class="web-hero is-align-start is-no-max-width"> <section class="web-hero is-align-start is-no-max-width">
<h2 class="web-title web-u-color-text-primary max-w-[600px]">Migrate to Appwrite</h2> <h2 class="text-title font-aeonik-pro text-primary max-w-[600px]">
Migrate to Appwrite
</h2>
<p class="text-description max-w-[600px]"> <p class="text-description max-w-[600px]">
Own your data with automatic data migrations. Own your data with automatic data migrations.
</p> </p>
@@ -337,9 +335,7 @@
<ul class="web-grid-row-4"> <ul class="web-grid-row-4">
<li> <li>
<a href="/docs/advanced/migrations/self-hosted" class="web-card is-normal"> <a href="/docs/advanced/migrations/self-hosted" class="web-card is-normal">
<h4 class="web-sub-body-500 web-u-color-text-primary mt-2"> <h4 class="web-sub-body-500 text-primary mt-2">Self-hosted</h4>
Self-hosted
</h4>
<p class="web-sub-body-400 mt-1"> <p class="web-sub-body-400 mt-1">
Move data from self-hosted to Appwrite Cloud. Move data from self-hosted to Appwrite Cloud.
</p> </p>
@@ -347,7 +343,7 @@
</li> </li>
<li> <li>
<a href="/docs/advanced/migrations/firebase" class="web-card is-normal"> <a href="/docs/advanced/migrations/firebase" class="web-card is-normal">
<h4 class="web-sub-body-500 web-u-color-text-primary mt-2">Firebase</h4> <h4 class="web-sub-body-500 text-primary mt-2">Firebase</h4>
<p class="web-sub-body-400 mt-1"> <p class="web-sub-body-400 mt-1">
Migrate users and data from Firebase to Appwrite. Migrate users and data from Firebase to Appwrite.
</p> </p>
@@ -355,7 +351,7 @@
</li> </li>
<li> <li>
<a href="/docs/advanced/migrations/supabase" class="web-card is-normal"> <a href="/docs/advanced/migrations/supabase" class="web-card is-normal">
<h4 class="web-sub-body-500 web-u-color-text-primary mt-2">Supabase</h4> <h4 class="web-sub-body-500 text-primary mt-2">Supabase</h4>
<p class="web-sub-body-400 mt-1"> <p class="web-sub-body-400 mt-1">
Migrate users and data from Supabase to Appwrite. Migrate users and data from Supabase to Appwrite.
</p> </p>
@@ -363,7 +359,7 @@
</li> </li>
<li> <li>
<a href="/docs/advanced/migrations/nhost" class="web-card is-normal"> <a href="/docs/advanced/migrations/nhost" class="web-card is-normal">
<h4 class="web-sub-body-500 web-u-color-text-primary mt-2">Nhost</h4> <h4 class="web-sub-body-500 text-primary mt-2">Nhost</h4>
<p class="web-sub-body-400 mt-1"> <p class="web-sub-body-400 mt-1">
Migrate users and data from NHost to Appwrite. Migrate users and data from NHost to Appwrite.
</p> </p>

2
src/routes/docs/CodeCard.svelte
View File

@@ -21,7 +21,7 @@
</div> </div>
<article class="web-grid-articles-item-content"> <article class="web-grid-articles-item-content">
<header class="web-articles-item-header"> <header class="web-articles-item-header">
<h3 class="web-sub-body-500 web-u-color-text-primary">{title}</h3> <h3 class="web-sub-body-500 text-primary">{title}</h3>
</header> </header>
<p <p
class="web-articles-item-paragraph web-sub-body-500 mt-1 line-clamp-2" class="web-articles-item-paragraph web-sub-body-500 mt-1 line-clamp-2"

4
src/routes/docs/quick-starts/+page.svelte
View File

@@ -199,7 +199,7 @@
<header class="web-article-header"> <header class="web-article-header">
<div class="web-article-header-start flex flex-col web-u-cross-start"> <div class="web-article-header-start flex flex-col web-u-cross-start">
<div class="relative flex items-center"> <div class="relative flex items-center">
<h1 class="web-title">Quick start</h1> <h1 class="text-title font-aeonik-pro">Quick start</h1>
</div> </div>
</div> </div>
<div class="web-article-header-end" /> <div class="web-article-header-end" />
@@ -220,7 +220,7 @@
class="{quickStart.icon} web-u-font-size-24" class="{quickStart.icon} web-u-font-size-24"
aria-hidden="true" aria-hidden="true"
/> />
<h4 class="web-sub-body-500 web-u-color-text-primary"> <h4 class="web-sub-body-500 text-primary">
{quickStart.title} {quickStart.title}
</h4> </h4>
</header> </header>

10
src/routes/docs/references/[version]/[platform]/[service]/(components)/RateLimits.svelte
View File

@@ -51,7 +51,7 @@
using SSR with <code>setSession</code>, these rate limits will still apply. using SSR with <code>setSession</code>, these rate limits will still apply.
<a <a
href="/docs/products/auth/server-side-rendering#rate-limits" href="/docs/products/auth/server-side-rendering#rate-limits"
class="u-link web-u-color-text-primary" class="u-link text-primary"
> >
Learn more about SSR rate limits. Learn more about SSR rate limits.
</a> </a>
@@ -65,13 +65,13 @@
<thead class="web-table-header"> <thead class="web-table-header">
<tr class="web-table-row"> <tr class="web-table-row">
<th class="web-table-head-col"> <th class="web-table-head-col">
<div class="web-eyebrow web-u-color-text-primary">Time frame</div> <div class="web-eyebrow text-primary">Time frame</div>
</th> </th>
<th class="web-table-head-col"> <th class="web-table-head-col">
<div class="web-eyebrow web-u-color-text-primary">Attempts</div> <div class="web-eyebrow text-primary">Attempts</div>
</th> </th>
<th class="web-table-head-col"> <th class="web-table-head-col">
<div class="web-eyebrow web-u-color-text-primary">Key</div> <div class="web-eyebrow text-primary">Key</div>
</th> </th>
</tr> </tr>
</thead> </thead>
@@ -98,7 +98,7 @@
</div> </div>
</div> </div>
<div class=""> <div class="">
<a href="/docs/advanced/platform/rate-limits" class="u-link web-u-color-text-primary"> <a href="/docs/advanced/platform/rate-limits" class="u-link text-primary">
<span>Learn more about rate limits</span> <span>Learn more about rate limits</span>
<span class="web-icon-arrow-right" aria-hidden="true"></span> <span class="web-icon-arrow-right" aria-hidden="true"></span>
</a> </a>

2
src/routes/docs/references/[version]/[platform]/[service]/(components)/Request.svelte
View File

@@ -12,7 +12,7 @@
<li class:pt-4={!first}> <li class:pt-4={!first}>
<article> <article>
<header class="flex items-baseline gap-2"> <header class="flex items-baseline gap-2">
<span class="web-code web-u-color-text-primary"> <span class="web-code text-primary">
{parameter.name} {parameter.name}
</span> </span>
<span class="web-caption-400">{parameter.type}</span> <span class="web-caption-400">{parameter.type}</span>

2
src/routes/docs/references/[version]/[platform]/[service]/(components)/Response.svelte
View File

@@ -12,7 +12,7 @@
<li> <li>
<article> <article>
<header class="flex items-baseline gap-2"> <header class="flex items-baseline gap-2">
<span class="web-eyebrow web-u-color-text-primary"> <span class="web-eyebrow text-primary">
{response.code} {response.code}
</span> </span>
<span class="web-caption-400">application/json</span> <span class="web-caption-400">application/json</span>

6
src/routes/docs/references/[version]/[platform]/[service]/+page.svelte
View File

@@ -106,11 +106,11 @@
<article class="web-article contents"> <article class="web-article contents">
<header class="web-article-header"> <header class="web-article-header">
<div class="web-article-header-start"> <div class="web-article-header-start">
<h1 class="web-title">{serviceName}</h1> <h1 class="text-title font-aeonik-pro">{serviceName}</h1>
<div class="web-inline-code">{platformType}</div> <div class="web-inline-code">{platformType}</div>
</div> </div>
<div class="web-article-header-end"> <div class="web-article-header-end">
<div class="gap-6 flex flex-col md:flex-row web-u-color-text-primary"> <div class="gap-6 flex flex-col md:flex-row text-primary">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<label class="text-xs web-is-not-mobile" for="platform">Platform</label> <label class="text-xs web-is-not-mobile" for="platform">Platform</label>
<Select <Select
@@ -176,7 +176,7 @@
<div class="web-article-content-grid-6-4-column-2 flex flex-col gap-8"> <div class="web-article-content-grid-6-4-column-2 flex flex-col gap-8">
<div class="web-inline-info"> <div class="web-inline-info">
<span class="icon-info" aria-hidden="true" /> <span class="icon-info" aria-hidden="true" />
<h5 class="web-sub-body-500 web-u-color-text-primary"> <h5 class="web-sub-body-500 text-primary">
No endpoint found for this version and platform No endpoint found for this version and platform
</h5> </h5>
Please switch to a newer version or different platform. Please switch to a newer version or different platform.

6
src/routes/docs/tutorials/+page.svelte
View File

@@ -61,7 +61,7 @@
<header class="web-article-header"> <header class="web-article-header">
<div class="web-article-header-start flex flex-col web-u-cross-start"> <div class="web-article-header-start flex flex-col web-u-cross-start">
<div class="relative flex items-center"> <div class="relative flex items-center">
<h1 class="web-title">Tutorials</h1> <h1 class="text-title font-aeonik-pro">Tutorials</h1>
</div> </div>
</div> </div>
<div class="web-article-header-end" /> <div class="web-article-header-end" />
@@ -85,7 +85,7 @@
class="{getIcon(tutorial)} web-u-font-size-24" class="{getIcon(tutorial)} web-u-font-size-24"
aria-hidden="true" aria-hidden="true"
/> />
<h3 class="web-sub-body-500 web-u-color-text-primary"> <h3 class="web-sub-body-500 text-primary">
{tutorial.framework} {tutorial.framework}
</h3> </h3>
<span class="badge web-caption-400">Coming Soon</span> <span class="badge web-caption-400">Coming Soon</span>
@@ -98,7 +98,7 @@
class="{getIcon(tutorial)} web-u-font-size-24" class="{getIcon(tutorial)} web-u-font-size-24"
aria-hidden="true" aria-hidden="true"
/> />
<h3 class="web-sub-body-500 web-u-color-text-primary"> <h3 class="web-sub-body-500 text-primary">
{tutorial.framework} {tutorial.framework}
</h3> </h3>
</header> </header>

16
src/routes/heroes/+page.svelte
View File

@@ -140,7 +140,7 @@
<div class="web-big-padding-section-level-2"> <div class="web-big-padding-section-level-2">
<section class="container hero web-u-padding-block-end-0"> <section class="container hero web-u-padding-block-end-0">
<div> <div>
<h1 class="web-display web-u-color-text-primary">Appwrite Heroes</h1> <h1 class="text-display font-aeonik-pro text-primary">Appwrite Heroes</h1>
<p class="web-main-body-500 mt-5"> <p class="web-main-body-500 mt-5">
If you love building, writing, speaking, and helping other developers If you love building, writing, speaking, and helping other developers
build with Appwrite, help us support you by joining the Appwrite Heroes build with Appwrite, help us support you by joining the Appwrite Heroes
@@ -165,7 +165,9 @@
<div class="web-big-padding-section-level-2"> <div class="web-big-padding-section-level-2">
<section class="container"> <section class="container">
<div class="web-hero web-u-max-width-800 about"> <div class="web-hero web-u-max-width-800 about">
<h2 class="web-title web-u-color-text-primary">About Appwrite Heroes</h2> <h2 class="text-title font-aeonik-pro text-primary">
About Appwrite Heroes
</h2>
<div> <div>
<p class="web-sub-body-500"> <p class="web-sub-body-500">
The Appwrite Heroes program is an exclusive group of developers who The Appwrite Heroes program is an exclusive group of developers who
@@ -194,7 +196,9 @@
<div class="web-big-padding-section-level-2"> <div class="web-big-padding-section-level-2">
<div class="container"> <div class="container">
<div class="web-hero"> <div class="web-hero">
<div class="web-display web-u-clr-primary">Meet our Heroes</div> <div class="text-display font-aeonik-pro web-u-clr-primary">
Meet our Heroes
</div>
</div> </div>
<ul class="web-multi-columns-1 mt-20"> <ul class="web-multi-columns-1 mt-20">
{#each heroCards as heroCardProps} {#each heroCards as heroCardProps}
@@ -228,7 +232,7 @@
<div class="web-big-padding-section-level-2"> <div class="web-big-padding-section-level-2">
<div class="container"> <div class="container">
<section class="web-hero is-align-start"> <section class="web-hero is-align-start">
<h2 class="web-display web-u-color-text-primary max-w-[700px]"> <h2 class="text-display font-aeonik-pro text-primary max-w-[700px]">
How Appwrite Heroes can benefit you How Appwrite Heroes can benefit you
</h2> </h2>
</section> </section>
@@ -324,8 +328,8 @@
<div class="web-big-padding-section-level-2 relative"> <div class="web-big-padding-section-level-2 relative">
<div class="container"> <div class="container">
<div class="web-hero web-u-max-width-800"> <div class="web-hero web-u-max-width-800">
<h5 class="web-display web-u-color-text-primary">Become a Hero</h5> <h5 class="text-display font-aeonik-pro text-primary">Become a Hero</h5>
<p class="text-description web-u-color-text-primary" style="opacity:0.64"> <p class="text-description text-primary" style="opacity:0.64">
Have you been actively providing value for the Appwrite community? Apply Have you been actively providing value for the Appwrite community? Apply
now to join our hero program! Applications are open every three months. now to join our hero program! Applications are open every three months.
</p> </p>

8
src/routes/init-0/(components)/CountdownCard.svelte
View File

@@ -7,15 +7,15 @@
const { days, hours, minutes, seconds } = createCountdown(date); const { days, hours, minutes, seconds } = createCountdown(date);
</script> </script>
<div class="web-card is-normal web-u-color-text-primary"> <div class="web-card is-normal text-primary">
<img src="/images/icons/gradients/lock.svg" alt="Lock" /> <img src="/images/icons/gradients/lock.svg" alt="Lock" />
{#if $days > 1} {#if $days > 1}
<p class="web-title"> <p class="text-title font-aeonik-pro">
{$days} {$days}
{$days > 1 ? 'days' : 'day'}<span class="web-u-color-text-accent">_</span> {$days > 1 ? 'days' : 'day'}<span class="web-u-color-text-accent">_</span>
</p> </p>
{:else} {:else}
<div class="web-title"> <div class="text-title font-aeonik-pro">
<Counter value={$hours} />:<Counter value={$minutes} />:<Counter <Counter value={$hours} />:<Counter value={$minutes} />:<Counter
value={$seconds} value={$seconds}
/><span class="web-u-color-text-accent">_</span> /><span class="web-u-color-text-accent">_</span>
@@ -35,7 +35,7 @@
align-items: center; align-items: center;
} }
.web-title { .text-title font-aeonik-pro {
margin-block-start: 0.75rem; margin-block-start: 0.75rem;
} }

8
src/routes/init-0/(components)/DayCard.svelte
View File

@@ -21,21 +21,21 @@
{#if hasReleased} {#if hasReleased}
<div class="day"> <div class="day">
<div class="circle" aria-hidden /> <div class="circle" aria-hidden />
<span class="web-eyebrow web-u-color-text-primary" <span class="web-eyebrow text-primary"
>Day {number}<span class="web-u-color-text-accent">_</span></span >Day {number}<span class="web-u-color-text-accent">_</span></span
> >
<h2 class="web-label web-u-color-text-primary">{day.title}</h2> <h2 class="text-label text-primary">{day.title}</h2>
<div class="slot-wrapper"> <div class="slot-wrapper">
<slot /> <slot />
</div> </div>
</div> </div>
{:else} {:else}
<div class="release"> <div class="release">
<span class="web-eyebrow web-u-color-text-primary" <span class="web-eyebrow text-primary"
>Day {number}<span class="web-u-color-text-accent">_</span></span >Day {number}<span class="web-u-color-text-accent">_</span></span
> >
<div class="bottom"> <div class="bottom">
<div class="countdown web-title"> <div class="countdown text-title font-aeonik-pro">
{#if $hours > 24} {#if $hours > 24}
{$days} {$days > 1 ? 'days' : 'day'} {$days} {$days > 1 ? 'days' : 'day'}
{:else} {:else}

8
src/routes/init-0/(components)/Ticket.svelte
View File

@@ -189,9 +189,9 @@
{/if} {/if}
<div class="ticket" data-variant={variant} use:mouse style={styles}> <div class="ticket" data-variant={variant} use:mouse style={styles}>
<img src={bg} alt="" class="bg" /> <img src={bg} alt="" class="bg" />
<p class="web-title web-u-color-text-primary">{name?.trim() || '-'}</p> <p class="text-title font-aeonik-pro text-primary">{name?.trim() || '-'}</p>
{#if gh_user} {#if gh_user}
<p class="web-label">@{gh_user}</p> <p class="text-label">@{gh_user}</p>
{/if} {/if}
<div class="bottom-left"> <div class="bottom-left">
<img src={Logo} alt="init_" /> <img src={Logo} alt="init_" />
@@ -413,13 +413,13 @@
z-index: -1; z-index: -1;
} }
.web-title { .text-title font-aeonik-pro {
font-size: adjusted(2.5); font-size: adjusted(2.5);
line-height: #{math.div(44, 40)}em; line-height: #{math.div(44, 40)}em;
overflow-wrap: break-word; overflow-wrap: break-word;
} }
.web-label { .text-label {
font-size: adjusted(1.5); font-size: adjusted(1.5);
line-height: #{math.div(28, 24)}em; line-height: #{math.div(28, 24)}em;
margin-block-start: adjusted(0.25); margin-block-start: adjusted(0.25);

2
src/routes/init-0/(days)/Day.svelte
View File

@@ -16,7 +16,7 @@
$: hasReleased = now >= release; $: hasReleased = now >= release;
</script> </script>
<h2 class="web-eyebrow web-u-color-text-primary"> <h2 class="web-eyebrow text-primary">
<div class="web-dot" /> <div class="web-dot" />
{#if day !== undefined} {#if day !== undefined}
{day}<span class="web-u-color-text-accent">_</span> {day}<span class="web-u-color-text-accent">_</span>

16
src/routes/init-0/(days)/Day1.svelte
View File

@@ -20,7 +20,7 @@
style:padding="0" style:padding="0"
> >
<div style:padding="2rem" style:padding-block-end="0"> <div style:padding="2rem" style:padding-block-end="0">
<h3 class="web-label web-u-color-text-primary">Messaging</h3> <h3 class="text-label text-primary">Messaging</h3>
<p style:margin-block-start="0.625rem"> <p style:margin-block-start="0.625rem">
Introducing multimedia messaging service to communicate to your users across Introducing multimedia messaging service to communicate to your users across
platforms. platforms.
@@ -48,7 +48,7 @@
class="web-card is-normal has-border-gradient u-overflow-hidden" class="web-card is-normal has-border-gradient u-overflow-hidden"
style="padding: 1.25rem; --p-aspect-ratio: 0;" style="padding: 1.25rem; --p-aspect-ratio: 0;"
> >
<h3 class="web-label web-u-color-text-primary" style="max-width: 18.75rem"> <h3 class="text-label text-primary" style="max-width: 18.75rem">
How tools like Twilio can simplify messaging for developers How tools like Twilio can simplify messaging for developers
</h3> </h3>
<div class="web-card-link u-flex u-cross-center"> <div class="web-card-link u-flex u-cross-center">
@@ -66,7 +66,7 @@
class="web-card is-normal has-border-gradient u-overflow-hidden" class="web-card is-normal has-border-gradient u-overflow-hidden"
style="padding: 20px" style="padding: 20px"
> >
<h3 class="web-label web-u-color-text-primary" style="max-width: 300px"> <h3 class="text-label text-primary" style="max-width: 300px">
Best practices for sending push notifications Best practices for sending push notifications
</h3> </h3>
<div class="web-card-link u-flex u-cross-center"> <div class="web-card-link u-flex u-cross-center">
@@ -84,9 +84,7 @@
style="padding: 0.5rem; display: flex; justify-content: space-between; " style="padding: 0.5rem; display: flex; justify-content: space-between; "
> >
<div style="padding: 0.75rem;"> <div style="padding: 0.75rem;">
<h3 class="web-label web-u-color-text-primary" style="max-width: 300px"> <h3 class="text-label text-primary" style="max-width: 300px">Product tour</h3>
Product tour
</h3>
<div class="web-card-link u-flex u-cross-center"> <div class="web-card-link u-flex u-cross-center">
<span class="text">Watch</span> <span class="text">Watch</span>
<span class="web-icon-arrow-right" /> <span class="web-icon-arrow-right" />
@@ -106,7 +104,7 @@
class="web-card is-normal has-border-gradient" class="web-card is-normal has-border-gradient"
style="padding: 1.25rem" style="padding: 1.25rem"
> >
<h3 class="web-label web-u-color-text-primary">Documentation</h3> <h3 class="text-label text-primary">Documentation</h3>
<span class="web-card-link u-flex u-cross-center"> <span class="web-card-link u-flex u-cross-center">
<span class="text">Learn more</span> <span class="text">Learn more</span>
<span class="web-icon-arrow-right" /> <span class="web-icon-arrow-right" />
@@ -117,7 +115,7 @@
class="web-card is-normal has-border-gradient" class="web-card is-normal has-border-gradient"
style="padding: 1.25rem" style="padding: 1.25rem"
> >
<h3 class="web-label web-u-color-text-primary">Win swag</h3> <h3 class="text-label text-primary">Win swag</h3>
<span class="web-card-link u-flex u-cross-center"> <span class="web-card-link u-flex u-cross-center">
<span class="text">Enter giveaway</span> <span class="text">Enter giveaway</span>
<span class="web-icon-arrow-right" /> <span class="web-icon-arrow-right" />
@@ -131,7 +129,7 @@
style="padding: 0.5rem; display: flex; justify-content: space-between; " style="padding: 0.5rem; display: flex; justify-content: space-between; "
> >
<div style="padding: 0.75rem;"> <div style="padding: 0.75rem;">
<h3 class="web-label web-u-color-text-primary">Event: Welcome to Init</h3> <h3 class="text-label text-primary">Event: Welcome to Init</h3>
<div class="web-card-link u-flex u-cross-center"> <div class="web-card-link u-flex u-cross-center">
<span class="text">Join</span> <span class="text">Join</span>
<span class="web-icon-arrow-right" /> <span class="web-icon-arrow-right" />

14
src/routes/init-0/(days)/Day2.svelte
View File

@@ -19,7 +19,7 @@
style:padding="0" style:padding="0"
> >
<div style:padding="2rem" style:padding-block-end="0"> <div style:padding="2rem" style:padding-block-end="0">
<h3 class="web-label web-u-color-text-primary">Server-side rendering</h3> <h3 class="text-label text-primary">Server-side rendering</h3>
<p style:margin-block-start="0.625rem"> <p style:margin-block-start="0.625rem">
We introduce improved support for server-side rendering in Appwrite We introduce improved support for server-side rendering in Appwrite
Authentication. Authentication.
@@ -47,9 +47,7 @@
class="web-card is-normal has-border-gradient u-overflow-hidden" class="web-card is-normal has-border-gradient u-overflow-hidden"
style="padding: 1.25rem; --p-aspect-ratio: 0;" style="padding: 1.25rem; --p-aspect-ratio: 0;"
> >
<h3 class="web-label web-u-color-text-primary" style="max-width: 18.75rem"> <h3 class="text-label text-primary" style="max-width: 18.75rem">CSR vs SSR</h3>
CSR vs SSR
</h3>
<div class="web-card-link u-flex u-cross-center"> <div class="web-card-link u-flex u-cross-center">
<span class="text">Article</span> <span class="text">Article</span>
<span class="web-icon-arrow-right" /> <span class="web-icon-arrow-right" />
@@ -66,7 +64,7 @@
style="padding: 0.5rem; display: flex; justify-content: space-between; " style="padding: 0.5rem; display: flex; justify-content: space-between; "
> >
<div style="padding: 0.75rem;"> <div style="padding: 0.75rem;">
<h3 class="web-label web-u-color-text-primary">Event: Speed</h3> <h3 class="text-label text-primary">Event: Speed</h3>
<div class="web-card-link u-flex u-cross-center"> <div class="web-card-link u-flex u-cross-center">
<span class="text">Join</span> <span class="text">Join</span>
<span class="web-icon-arrow-right" /> <span class="web-icon-arrow-right" />
@@ -85,9 +83,7 @@
style="padding: 0.5rem; display: flex; justify-content: space-between; " style="padding: 0.5rem; display: flex; justify-content: space-between; "
> >
<div style="padding: 0.75rem;"> <div style="padding: 0.75rem;">
<h3 class="web-label web-u-color-text-primary" style="max-width: 300px"> <h3 class="text-label text-primary" style="max-width: 300px">Product tour</h3>
Product tour
</h3>
<div class="web-card-link u-flex u-cross-center"> <div class="web-card-link u-flex u-cross-center">
<span class="text">Watch</span> <span class="text">Watch</span>
<span class="web-icon-arrow-right" /> <span class="web-icon-arrow-right" />
@@ -106,7 +102,7 @@
class="web-card is-normal has-border-gradient" class="web-card is-normal has-border-gradient"
style="padding: 1.25rem" style="padding: 1.25rem"
> >
<h3 class="web-label web-u-color-text-primary">Documentation</h3> <h3 class="text-label text-primary">Documentation</h3>
<div class="web-card-link u-flex u-cross-center"> <div class="web-card-link u-flex u-cross-center">
<span class="text">Learn more</span> <span class="text">Learn more</span>
<span class="web-icon-arrow-right" /> <span class="web-icon-arrow-right" />

14
src/routes/init-0/(days)/Day3.svelte
View File

@@ -19,7 +19,7 @@
style:padding="0" style:padding="0"
> >
<div style:padding="2rem" style:padding-block-end="0"> <div style:padding="2rem" style:padding-block-end="0">
<h3 class="web-label web-u-color-text-primary">Enum SDK support</h3> <h3 class="text-label text-primary">Enum SDK support</h3>
<p style:margin-block-start="0.625rem"> <p style:margin-block-start="0.625rem">
A new feature that enhances the experience across all Appwrite client and A new feature that enhances the experience across all Appwrite client and
server-side SDKs. server-side SDKs.
@@ -38,7 +38,7 @@
style:padding="0" style:padding="0"
> >
<div style:padding="2rem" style:padding-block-end="0"> <div style:padding="2rem" style:padding-block-end="0">
<h3 class="web-label web-u-color-text-primary">Two-factor authentication</h3> <h3 class="text-label text-primary">Two-factor authentication</h3>
<p style:margin-block-start="0.625rem"> <p style:margin-block-start="0.625rem">
Add an additional layer of protection to your end users accounts with 2FA. Add an additional layer of protection to your end users accounts with 2FA.
</p> </p>
@@ -58,7 +58,7 @@
style="padding: 0.5rem; display: flex; justify-content: space-between; " style="padding: 0.5rem; display: flex; justify-content: space-between; "
> >
<div style="padding: 0.75rem;"> <div style="padding: 0.75rem;">
<h3 class="web-label web-u-color-text-primary">Event: Safety</h3> <h3 class="text-label text-primary">Event: Safety</h3>
<div class="web-card-link u-flex u-cross-center"> <div class="web-card-link u-flex u-cross-center">
<span class="text">Join</span> <span class="text">Join</span>
<span class="web-icon-arrow-right" /> <span class="web-icon-arrow-right" />
@@ -77,9 +77,7 @@
style="padding: 0.5rem; display: flex; justify-content: space-between; " style="padding: 0.5rem; display: flex; justify-content: space-between; "
> >
<div style="padding: 0.75rem;"> <div style="padding: 0.75rem;">
<h3 class="web-label web-u-color-text-primary" style="max-width: 300px"> <h3 class="text-label text-primary" style="max-width: 300px">Release video</h3>
Release video
</h3>
<div class="web-card-link u-flex u-cross-center"> <div class="web-card-link u-flex u-cross-center">
<span class="text">Watch</span> <span class="text">Watch</span>
<span class="web-icon-arrow-right" /> <span class="web-icon-arrow-right" />
@@ -99,7 +97,7 @@
class="web-card is-normal has-border-gradient" class="web-card is-normal has-border-gradient"
style="padding: 1.25rem" style="padding: 1.25rem"
> >
<h3 class="web-label web-u-color-text-primary">Enum Documentation</h3> <h3 class="text-label text-primary">Enum Documentation</h3>
<div class="web-card-link u-flex u-cross-center"> <div class="web-card-link u-flex u-cross-center">
<span class="text">Learn more</span> <span class="text">Learn more</span>
<span class="web-icon-arrow-right" /> <span class="web-icon-arrow-right" />
@@ -110,7 +108,7 @@
class="web-card is-normal has-border-gradient" class="web-card is-normal has-border-gradient"
style="padding: 1.25rem" style="padding: 1.25rem"
> >
<h3 class="web-label web-u-color-text-primary">2FA Documentation</h3> <h3 class="text-label text-primary">2FA Documentation</h3>
<div class="web-card-link u-flex u-cross-center"> <div class="web-card-link u-flex u-cross-center">
<span class="text">Learn more</span> <span class="text">Learn more</span>
<span class="web-icon-arrow-right" /> <span class="web-icon-arrow-right" />

14
src/routes/init-0/(days)/Day4.svelte
View File

@@ -21,7 +21,7 @@
style:padding="0" style:padding="0"
> >
<div style:padding="2rem" style:padding-block-end="0"> <div style:padding="2rem" style:padding-block-end="0">
<h3 class="web-label web-u-color-text-primary">Database operators</h3> <h3 class="text-label text-primary">Database operators</h3>
<p style:margin-block-start="0.625rem"> <p style:margin-block-start="0.625rem">
Announcing a new set of query methods, array contains, string contains, and OR Announcing a new set of query methods, array contains, string contains, and OR
operators. operators.
@@ -52,9 +52,7 @@
style="padding: 0.5rem; display: flex; justify-content: space-between; " style="padding: 0.5rem; display: flex; justify-content: space-between; "
> >
<div style="padding: 0.75rem;"> <div style="padding: 0.75rem;">
<h3 class="web-label web-u-color-text-primary" style="max-width: 300px"> <h3 class="text-label text-primary" style="max-width: 300px">Event: Logic</h3>
Event: Logic
</h3>
<div class="web-card-link u-flex u-cross-center"> <div class="web-card-link u-flex u-cross-center">
<span class="text">Join</span> <span class="text">Join</span>
<span class="web-icon-arrow-right" /> <span class="web-icon-arrow-right" />
@@ -72,7 +70,7 @@
class="web-card is-normal has-border-gradient u-overflow-hidden" class="web-card is-normal has-border-gradient u-overflow-hidden"
style="padding: 20px" style="padding: 20px"
> >
<h3 class="web-label web-u-color-text-primary" style="max-width: 11.25rem"> <h3 class="text-label text-primary" style="max-width: 11.25rem">
Understanding Data Queries Understanding Data Queries
</h3> </h3>
<div class="web-card-link u-flex u-cross-center"> <div class="web-card-link u-flex u-cross-center">
@@ -90,9 +88,7 @@
style="padding: 0.5rem; display: flex; justify-content: space-between; " style="padding: 0.5rem; display: flex; justify-content: space-between; "
> >
<div style="padding: 0.75rem;"> <div style="padding: 0.75rem;">
<h3 class="web-label web-u-color-text-primary" style="max-width: 300px"> <h3 class="text-label text-primary" style="max-width: 300px">Product tour</h3>
Product tour
</h3>
<div class="web-card-link u-flex u-cross-center"> <div class="web-card-link u-flex u-cross-center">
<span class="text">Watch</span> <span class="text">Watch</span>
<span class="web-icon-arrow-right" /> <span class="web-icon-arrow-right" />
@@ -111,7 +107,7 @@
class="web-card is-normal has-border-gradient" class="web-card is-normal has-border-gradient"
style="padding: 1.25rem" style="padding: 1.25rem"
> >
<h3 class="web-label web-u-color-text-primary">Documentation</h3> <h3 class="text-label text-primary">Documentation</h3>
<div class="web-card-link u-flex u-cross-center"> <div class="web-card-link u-flex u-cross-center">
<span class="text">Learn more</span> <span class="text">Learn more</span>
<span class="web-icon-arrow-right" /> <span class="web-icon-arrow-right" />

8
src/routes/init-0/(days)/Day5.svelte
View File

@@ -15,7 +15,7 @@
style:padding="0" style:padding="0"
> >
<div style:padding="2rem" style:padding-block-end="0"> <div style:padding="2rem" style:padding-block-end="0">
<h3 class="web-label web-u-color-text-primary">Updated runtimes</h3> <h3 class="text-label text-primary">Updated runtimes</h3>
<p style:margin-block-start="0.625rem"> <p style:margin-block-start="0.625rem">
The latest versions of Bun, Dart, Deno, PHP, Ruby, Kotlin, Java, Swift, and Node The latest versions of Bun, Dart, Deno, PHP, Ruby, Kotlin, Java, Swift, and Node
were added to our Cloud runtime ecosystem. were added to our Cloud runtime ecosystem.
@@ -33,7 +33,7 @@
class="web-card is-normal has-border-gradient" class="web-card is-normal has-border-gradient"
style="padding: 1.25rem" style="padding: 1.25rem"
> >
<h3 class="web-label web-u-color-text-primary">Documentation</h3> <h3 class="text-label text-primary">Documentation</h3>
<div class="web-card-link u-flex u-cross-center"> <div class="web-card-link u-flex u-cross-center">
<span class="text">Learn more</span> <span class="text">Learn more</span>
<span class="web-icon-arrow-right" /> <span class="web-icon-arrow-right" />
@@ -47,9 +47,7 @@
style="padding: 0.5rem; display: flex; justify-content: space-between; " style="padding: 0.5rem; display: flex; justify-content: space-between; "
> >
<div style="padding: 0.75rem;"> <div style="padding: 0.75rem;">
<h3 class="web-label web-u-color-text-primary" style="max-width: 300px"> <h3 class="text-label text-primary" style="max-width: 300px">Closing party</h3>
Closing party
</h3>
<div class="web-card-link u-flex u-cross-center"> <div class="web-card-link u-flex u-cross-center">
<span class="text">Watch</span> <span class="text">Watch</span>
<span class="web-icon-arrow-right" /> <span class="web-icon-arrow-right" />

12
src/routes/init-0/+page.svelte
View File

@@ -171,7 +171,7 @@
transition:fade={{ delay: 0, duration: 600 }} transition:fade={{ delay: 0, duration: 600 }}
> >
<h3 <h3
class="web-title web-u-color-text-primary" class="text-title font-aeonik-pro text-primary"
id="kickoff" id="kickoff"
style:scroll-margin-top="5rem" style:scroll-margin-top="5rem"
> >
@@ -197,7 +197,7 @@
{:else if i === 4} {:else if i === 4}
<Day5 {date} release={day.release} /> <Day5 {date} release={day.release} />
{:else} {:else}
<h2 class="web-eyebrow web-u-color-text-primary"> <h2 class="web-eyebrow text-primary">
<div class="web-dot" /> <div class="web-dot" />
{date} {date}
<span class="web-u-color-text-accent">_</span> <span class="web-u-color-text-accent">_</span>
@@ -212,7 +212,7 @@
<div class="container"> <div class="container">
<Carousel size="big"> <Carousel size="big">
<svelte:fragment slot="header"> <svelte:fragment slot="header">
<h2 class="web-label web-u-color-text-primary">Upcoming Events</h2> <h2 class="text-label text-primary">Upcoming Events</h2>
</svelte:fragment> </svelte:fragment>
{#each events as event} {#each events as event}
<li> <li>
@@ -235,9 +235,7 @@
<div class="tickets-preview"> <div class="tickets-preview">
<div class="container"> <div class="container">
<div> <div>
<h2 class="web-label web-u-color-text-primary"> <h2 class="text-label text-primary">Init 1.0 ran from February 26 to March 1</h2>
Init 1.0 ran from February 26 to March 1
</h2>
</div> </div>
<div class="web-card is-normal has-border-gradient"> <div class="web-card is-normal has-border-gradient">
@@ -274,7 +272,7 @@
<div class="pre-footer"> <div class="pre-footer">
<div class="container"> <div class="container">
<div class="text"> <div class="text">
<h2 class="web-label web-u-color-text-primary">Start building with Appwrite</h2> <h2 class="text-label text-primary">Start building with Appwrite</h2>
<p class="web-main-body-500"> <p class="web-main-body-500">
Appwrite's open-source platform lets you add Auth, DBs, Functions and Storage to Appwrite's open-source platform lets you add Auth, DBs, Functions and Storage to
your product and build any application at any scale, own your data, and use your your product and build any application at any scale, own your data, and use your

6
src/routes/init-0/tickets/+page.svelte
View File

@@ -33,10 +33,10 @@
<Main> <Main>
<div class="hero"> <div class="hero">
<div class="desktop-left"> <div class="desktop-left">
<h1 class="web-display"> <h1 class="text-display font-aeonik-pro">
<span style:font-weight="500"> <span style:font-weight="500">
<span class="web-u-color-text-primary">init</span><span <span class="text-primary">init</span><span class="web-u-color-text-accent"
class="web-u-color-text-accent">_</span >_</span
> >
</span> </span>
launched on February 26th, 2024 launched on February 26th, 2024

10
src/routes/init-0/tickets/[id]/+page.svelte
View File

@@ -41,15 +41,15 @@
<div class="hero"> <div class="hero">
<div class="desktop-left"> <div class="desktop-left">
<div class="header"> <div class="header">
<h1 class="web-display"> <h1 class="text-display font-aeonik-pro">
Join <span class="web-u-color-text-primary" style:font-weight="500"> Join <span class="text-primary" style:font-weight="500">
init<span class="web-u-color-text-accent">_</span> init<span class="web-u-color-text-accent">_</span>
</span><br />26 Feb - 1 March </span><br />26 Feb - 1 March
</h1> </h1>
</div> </div>
<div class="info"> <div class="info">
<p class="web-label u-margin-block-start-16"> <p class="text-label u-margin-block-start-16">
Register today and claim your Init ticket. Register today and claim your Init ticket.
</p> </p>
<div class="u-flex u-cross-center u-gap-16 u-margin-block-start-32"> <div class="u-flex u-cross-center u-gap-16 u-margin-block-start-32">
@@ -57,9 +57,7 @@
<span class="text">Get my Init ticket</span> <span class="text">Get my Init ticket</span>
</a> </a>
<button class="web-button is-secondary" on:click={copy}> <button class="web-button is-secondary" on:click={copy}>
<span <span class="web-icon-{$copied ? 'check' : 'copy'} text-primary" />
class="web-icon-{$copied ? 'check' : 'copy'} web-u-color-text-primary"
/>
<span class="text">Copy ticket URL</span> <span class="text">Copy ticket URL</span>
</button> </button>

19
src/routes/init-0/tickets/customize/+page.svelte
View File

@@ -83,7 +83,10 @@
<span>Back</span> <span>Back</span>
</button> </button>
<h1 class="web-title web-u-color-text-primary" style:margin-block-start="1.5rem"> <h1
class="text-title font-aeonik-pro text-primary"
style:margin-block-start="1.5rem"
>
Customize ticket<span class="web-u-color-text-accent">_</span> Customize ticket<span class="web-u-color-text-accent">_</span>
</h1> </h1>
@@ -94,13 +97,13 @@
{:else} {:else}
<div class="desktop-left"> <div class="desktop-left">
<div class="header"> <div class="header">
<h1 class="web-title web-u-color-text-primary"> <h1 class="text-title font-aeonik-pro text-primary">
Thank you for registering for Thank you for registering for
<span style:font-weight="500"> <span style:font-weight="500">
init<span class="web-u-color-text-accent">_</span> init<span class="web-u-color-text-accent">_</span>
</span> </span>
</h1> </h1>
<p class="web-label u-margin-block-start-16"> <p class="text-label u-margin-block-start-16">
You have received ticket #{id?.toString().padStart(6, '0')} You have received ticket #{id?.toString().padStart(6, '0')}
</p> </p>
</div> </div>
@@ -115,11 +118,7 @@
<div class="u-flex u-cross-center u-gap-16 u-margin-block-start-16"> <div class="u-flex u-cross-center u-gap-16 u-margin-block-start-16">
<button class="web-button is-full-width is-secondary" on:click={copy}> <button class="web-button is-full-width is-secondary" on:click={copy}>
<div <div class="web-icon-{$copied ? 'check' : 'copy'} text-primary" />
class="web-icon-{$copied
? 'check'
: 'copy'} web-u-color-text-primary"
/>
<span class="text">Copy ticket URL</span> <span class="text">Copy ticket URL</span>
</button> </button>
<a <a
@@ -127,7 +126,7 @@
href="https://twitter.com/intent/tweet?text={twitterText}" href="https://twitter.com/intent/tweet?text={twitterText}"
target="_blank" target="_blank"
> >
<div class="web-icon-x web-u-color-text-primary" /> <div class="web-icon-x text-primary" />
<span class="text">Share your ticket</span> <span class="text">Share your ticket</span>
</a> </a>
</div> </div>
@@ -158,7 +157,7 @@
<div class="drawer" data-state={drawerOpen ? 'open' : 'closed'}> <div class="drawer" data-state={drawerOpen ? 'open' : 'closed'}>
<button on:click={() => (drawerOpen = !drawerOpen)}> <button on:click={() => (drawerOpen = !drawerOpen)}>
<div class="inner"> <div class="inner">
<span class="web-label web-u-color-text-primary">Ticket Editor</span> <span class="text-label text-primary">Ticket Editor</span>
<span class="web-icon-chevron-down" /> <span class="web-icon-chevron-down" />
</div> </div>
</button> </button>

16
src/routes/init-0/tickets/customize/form.svelte
View File

@@ -76,7 +76,7 @@
<hr /> <hr />
{#if ticket.gh_user} {#if ticket.gh_user}
<div class="u-flex u-cross-center u-gap-8 web-u-color-text-primary"> <div class="u-flex u-cross-center u-gap-8 text-primary">
<img src="/images/icons/colored/check.svg" alt="" /> <img src="/images/icons/colored/check.svg" alt="" />
<span class="web-sub-body-500">GitHub account connected</span> <span class="web-sub-body-500">GitHub account connected</span>
</div> </div>
@@ -100,12 +100,12 @@
}} }}
disabled={!browser} disabled={!browser}
> >
<div class="web-icon-github web-u-color-text-primary" /> <div class="web-icon-github text-primary" />
<span class="text">(DEBUG) Log-out of GitHub</span> <span class="text">(DEBUG) Log-out of GitHub</span>
</button> </button>
{/if} {/if}
{:else} {:else}
<h2 class="web-sub-body-500 web-u-color-text-primary">Integrate your GitHub account</h2> <h2 class="web-sub-body-500 text-primary">Integrate your GitHub account</h2>
<p class="web-sub-body-500" style:margin-block-start="0.25rem"> <p class="web-sub-body-500" style:margin-block-start="0.25rem">
Sign in with your GitHub account and see the magic happen in your ticket. Sign in with your GitHub account and see the magic happen in your ticket.
</p> </p>
@@ -113,7 +113,7 @@
class="web-button is-full-width is-secondary u-margin-block-start-24" class="web-button is-full-width is-secondary u-margin-block-start-24"
on:click={loginGithub} on:click={loginGithub}
> >
<div class="web-icon-github web-u-color-text-primary" /> <div class="web-icon-github text-primary" />
<span class="text">Log in to GitHub account</span> <span class="text">Log in to GitHub account</span>
</button> </button>
{/if} {/if}
@@ -121,7 +121,7 @@
<hr /> <hr />
{#if ticket.aw_email} {#if ticket.aw_email}
<div class="u-flex u-cross-center u-gap-8 web-u-color-text-primary"> <div class="u-flex u-cross-center u-gap-8 text-primary">
<img src="/images/icons/colored/check.svg" alt="" /> <img src="/images/icons/colored/check.svg" alt="" />
<span class="web-sub-body-500">Appwrite account connected</span> <span class="web-sub-body-500">Appwrite account connected</span>
</div> </div>
@@ -130,7 +130,7 @@
Your ticket has been upgraded. Your ticket has been upgraded.
</p> </p>
{:else} {:else}
<h2 class="web-sub-body-500 web-u-color-text-primary">Integrate your Appwrite account</h2> <h2 class="web-sub-body-500 text-primary">Integrate your Appwrite account</h2>
<p class="web-sub-body-500" style:margin-block-start="0.25rem"> <p class="web-sub-body-500" style:margin-block-start="0.25rem">
Sign in with your Appwrite account and see the magic happen in your ticket. Sign in with your Appwrite account and see the magic happen in your ticket.
</p> </p>
@@ -138,13 +138,13 @@
href="{PUBLIC_APPWRITE_DASHBOARD}/login?forceRedirect={$page.url.origin}/init-0/tickets" href="{PUBLIC_APPWRITE_DASHBOARD}/login?forceRedirect={$page.url.origin}/init-0/tickets"
class="web-button is-full-width is-secondary u-margin-block-start-24" class="web-button is-full-width is-secondary u-margin-block-start-24"
> >
<div class="web-icon-appwrite web-u-color-text-primary" /> <div class="web-icon-appwrite text-primary" />
<span class="text">Log in to Appwrite account</span> <span class="text">Log in to Appwrite account</span>
</a> </a>
{/if} {/if}
<hr /> <hr />
<h2 class="web-sub-body-500 web-u-color-text-primary">Add your tribe</h2> <h2 class="web-sub-body-500 text-primary">Add your tribe</h2>
<p class="web-sub-body-500" style:margin-block-start="0.25rem"> <p class="web-sub-body-500" style:margin-block-start="0.25rem">
Customize your Init ticket with your technology. Customize your Init ticket with your technology.
</p> </p>

2
src/routes/init/(components)/CallToAction.svelte
View File

@@ -10,7 +10,7 @@
<div class="call-to-action"> <div class="call-to-action">
<div class="container"> <div class="container">
<div class="text"> <div class="text">
<h2 class="web-title web-u-color-text-primary">{title}</h2> <h2 class="text-title font-aeonik-pro text-primary">{title}</h2>
<p class="web-main-body-500"> <p class="web-main-body-500">
{description} {description}
</p> </p>

8
src/routes/init/(components)/CountdownCard.svelte
View File

@@ -7,15 +7,15 @@
const { days, hours, minutes, seconds } = createCountdown(date); const { days, hours, minutes, seconds } = createCountdown(date);
</script> </script>
<div class="web-card is-normal web-u-color-text-primary"> <div class="web-card is-normal text-primary">
<img src="/images/icons/gradients/lock.svg" alt="Lock" /> <img src="/images/icons/gradients/lock.svg" alt="Lock" />
{#if $hours > 24} {#if $hours > 24}
<p class="web-title"> <p class="text-title font-aeonik-pro">
{$days} {$days}
{$days > 1 ? 'days' : 'day'} {$days > 1 ? 'days' : 'day'}
</p> </p>
{:else} {:else}
<div class="web-title" style="--height:3rem;--line-height:3rem;"> <div class="text-title font-aeonik-pro" style="--height:3rem;--line-height:3rem;">
<Counter value={$hours} />:<Counter value={$minutes} />:<Counter value={$seconds} /> <Counter value={$hours} />:<Counter value={$minutes} />:<Counter value={$seconds} />
</div> </div>
{/if} {/if}
@@ -34,7 +34,7 @@
background-color: hsl(var(--web-color-subtle)); background-color: hsl(var(--web-color-subtle));
} }
.web-title { .text-title font-aeonik-pro {
margin-block-start: 0.75rem; margin-block-start: 0.75rem;
} }

8
src/routes/init/(components)/DayCard.svelte
View File

@@ -25,14 +25,14 @@
{#if hasReleased} {#if hasReleased}
<div style:z-index="10" style="margin-top: auto; margin-bottom: 0;"> <div style:z-index="10" style="margin-top: auto; margin-bottom: 0;">
<span <span
class="web-u-color-text-primary web-u-uppercase" class="text-primary web-u-uppercase"
style:opacity="0.6" style:opacity="0.6"
style:margin-bottom="-8px" style:margin-bottom="-8px"
style:display="block" style:display="block"
> >
{day.subtitle} {day.subtitle}
</span> </span>
<h2 class="web-label web-u-color-text-primary"> <h2 class="text-label text-primary">
{day.title}<span class="web-u-color-text-accent">_</span> {day.title}<span class="web-u-color-text-accent">_</span>
</h2> </h2>
</div> </div>
@@ -43,14 +43,14 @@
{:else} {:else}
<div style:z-index="10" style="margin-top: auto; margin-bottom: 0;"> <div style:z-index="10" style="margin-top: auto; margin-bottom: 0;">
<span <span
class="web-u-color-text-primary web-eyebrow web-u-uppercase" class="text-primary web-eyebrow web-u-uppercase"
style:margin-bottom="-8px" style:margin-bottom="-8px"
style:display="block" style:display="block"
> >
{day.subtitle} <span class="web-u-color-text-accent">_</span> {day.subtitle} <span class="web-u-color-text-accent">_</span>
</span> </span>
<h2 <h2
class="web-title web-u-color-text-primary" class="text-title font-aeonik-pro text-primary"
style="--height:3rem;--line-height:3rem;" style="--height:3rem;--line-height:3rem;"
> >
{#if $hours > 24} {#if $hours > 24}

2
src/routes/init/(components)/EventCard.svelte
View File

@@ -49,7 +49,7 @@
</li> </li>
{/if} {/if}
</ul> </ul>
<svelte:element this={headingTag} class="web-sub-body-500 web-u-color-text-primary mt-1"> <svelte:element this={headingTag} class="web-sub-body-500 text-primary mt-1">
{title} {title}
</svelte:element> </svelte:element>
<p class="web-sub-body-500"> <p class="web-sub-body-500">

2
src/routes/init/(components)/EventCarousel.svelte
View File

@@ -75,7 +75,7 @@
<div class="container"> <div class="container">
<Carousel size="medium"> <Carousel size="medium">
<svelte:fragment slot="header"> <svelte:fragment slot="header">
<h4 class="web-label web-u-color-text-primary">Upcoming Events</h4> <h4 class="text-label text-primary">Upcoming Events</h4>
</svelte:fragment> </svelte:fragment>
{#each events as event} {#each events as event}
<li> <li>

2
src/routes/init/(components)/Giveaway.svelte
View File

@@ -6,7 +6,7 @@
<div class="wrapper"> <div class="wrapper">
<div class="container"> <div class="container">
<div class="details"> <div class="details">
<h3 class="web-label">Get a ticket and enter our special Init giveaway</h3> <h3 class="text-label">Get a ticket and enter our special Init giveaway</h3>
<p class="web-u-color-text-secondary"> <p class="web-u-color-text-secondary">
Create, customize, and share your Init ticket to enter our general giveaway. Create, customize, and share your Init ticket to enter our general giveaway.
</p> </p>

2
src/routes/init/(components)/shared/Announcement.svelte
View File

@@ -12,7 +12,7 @@
<a href={url} class="web-card is-normal has-border-gradient" style:padding="0"> <a href={url} class="web-card is-normal has-border-gradient" style:padding="0">
<div style:padding="1.25rem" style:padding-block-end="0" style:max-width="32rem"> <div style:padding="1.25rem" style:padding-block-end="0" style:max-width="32rem">
<h3 class="web-label web-u-color-text-primary">{title}</h3> <h3 class="text-label text-primary">{title}</h3>
<p style:margin-block-start="0.625rem"> <p style:margin-block-start="0.625rem">
{description} {description}
</p> </p>

5
src/routes/init/(components)/shared/Article.svelte
View File

@@ -16,10 +16,7 @@
<a href={url} class="web-card is-normal has-border-gradient overflow-hidden" style:padding="0"> <a href={url} class="web-card is-normal has-border-gradient overflow-hidden" style:padding="0">
<div style:padding="1.25rem"> <div style:padding="1.25rem">
<h3 <h3 class="text-label text-primary" style="max-width: 18.75rem;text-wrap:pretty;">
class="web-label web-u-color-text-primary"
style="max-width: 18.75rem;text-wrap:pretty;"
>
{title} {title}
</h3> </h3>
<div class="web-card-link flex items-center" style:margin-top="8px"> <div class="web-card-link flex items-center" style:margin-top="8px">

2
src/routes/init/(components)/shared/BigVideo.svelte
View File

@@ -18,7 +18,7 @@
<div class="web-card is-normal has-border-gradient overflow-hidden" style="padding: 0.5rem;"> <div class="web-card is-normal has-border-gradient overflow-hidden" style="padding: 0.5rem;">
<Video {thumbnail} {src}> <Video {thumbnail} {src}>
<div class="details"> <div class="details">
<h3 class="web-label web-u-color-text-primary"> <h3 class="text-label text-primary">
{title} {title}
</h3> </h3>
<div class="web-card-link flex items-center"> <div class="web-card-link flex items-center">

4
src/routes/init/(components)/shared/Media.svelte
View File

@@ -17,7 +17,7 @@
style="padding: 0.5rem;" style="padding: 0.5rem;"
> >
<div class="details" style="padding: 0.75rem;"> <div class="details" style="padding: 0.75rem;">
<h3 class="web-label web-u-color-text-primary"> <h3 class="text-label text-primary">
{title} {title}
</h3> </h3>
<div class="web-card-link flex items-center" style:margin-top="8px"> <div class="web-card-link flex items-center" style:margin-top="8px">
@@ -32,7 +32,7 @@
{:else} {:else}
<div class="web-card is-normal has-border-gradient overflow-hidden" style="padding: 0.5rem;"> <div class="web-card is-normal has-border-gradient overflow-hidden" style="padding: 0.5rem;">
<div class="details" style="padding: 0.75rem;"> <div class="details" style="padding: 0.75rem;">
<h3 class="web-label web-u-color-text-primary"> <h3 class="text-label text-primary">
{title} {title}
</h3> </h3>
<div class="web-card-link flex items-center"> <div class="web-card-link flex items-center">

8
src/routes/init/(components)/ticket/Ticket.svelte
View File

@@ -131,11 +131,11 @@
<div class="wrapper"> <div class="wrapper">
<div class="ticket" use:onMouse style={styles}> <div class="ticket" use:onMouse style={styles}>
<div class="lockup"> <div class="lockup">
<p class="web-title web-u-color-text-primary"> <p class="text-title font-aeonik-pro text-primary">
{name?.trim() || '-'} {name?.trim() || '-'}
</p> </p>
<p class="web-label">{title}</p> <p class="text-label">{title}</p>
<div class="logo" style:width="75%"> <div class="logo" style:width="75%">
{#if disableEffects} {#if disableEffects}
@@ -363,7 +363,7 @@
border-radius: pxToRem(16); border-radius: pxToRem(16);
overflow: hidden; overflow: hidden;
.web-label { .text-label {
position: absolute; position: absolute;
font-size: clamp(12px, 1vw, 16px); font-size: clamp(12px, 1vw, 16px);
} }
@@ -385,7 +385,7 @@
} }
} }
} }
.web-title { .text-title font-aeonik-pro {
font-size: clamp(20px, 1vw, 24px); font-size: clamp(20px, 1vw, 24px);
line-height: 1; line-height: 1;
} }

8
src/routes/init/(components)/ticket/TicketActions.svelte
View File

@@ -51,7 +51,7 @@
<div class="flex gap-4"> <div class="flex gap-4">
{#if ticket.gh_user} {#if ticket.gh_user}
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<div class="web-u-color-text-primary flex items-center gap-2"> <div class="text-primary flex items-center gap-2">
<span class="web-sub-body-500">Connected to GitHub</span> <span class="web-sub-body-500">Connected to GitHub</span>
</div> </div>
@@ -62,7 +62,7 @@
</div> </div>
{:else} {:else}
<button class="web-button is-secondary" on:click={loginGithub}> <button class="web-button is-secondary" on:click={loginGithub}>
<div class="web-icon-github web-u-color-text-primary" /> <div class="web-icon-github text-primary" />
<span class="text">Log in to GitHub</span> <span class="text">Log in to GitHub</span>
</button> </button>
{/if} {/if}
@@ -89,7 +89,7 @@
<div class="action-buttons flex gap-2"> <div class="action-buttons flex gap-2">
<button class="web-button is-secondary" on:click={copy}> <button class="web-button is-secondary" on:click={copy}>
<div class="web-icon-{$copied ? 'check' : 'copy'} web-u-color-text-primary" /> <div class="web-icon-{$copied ? 'check' : 'copy'} text-primary" />
<span class="text">Copy URL</span> <span class="text">Copy URL</span>
</button> </button>
<a <a
@@ -97,7 +97,7 @@
href="https://twitter.com/intent/tweet?text={twitterText}" href="https://twitter.com/intent/tweet?text={twitterText}"
target="_blank" target="_blank"
> >
<div class="web-icon-x web-u-color-text-primary" /> <div class="web-icon-x text-primary" />
<span class="text">Share</span> <span class="text">Share</span>
</a> </a>
</div> </div>

2
src/routes/init/(days)/Day.svelte
View File

@@ -16,7 +16,7 @@
$: hasReleased = now >= release; $: hasReleased = now >= release;
</script> </script>
<h2 class="web-eyebrow web-u-color-text-primary"> <h2 class="web-eyebrow text-primary">
<div class="web-dot" /> <div class="web-dot" />
{#if day !== undefined} {#if day !== undefined}
{day}<span class="web-u-color-text-accent">_</span> {day}<span class="web-u-color-text-accent">_</span>

2
src/routes/init/+page.svelte
View File

@@ -107,7 +107,7 @@
{:else if i === 4} {:else if i === 4}
<Day4 release={day.release} /> <Day4 release={day.release} />
{:else} {:else}
<h2 class="web-eyebrow web-u-color-text-primary"> <h2 class="web-eyebrow text-primary">
<div class="web-dot" /> <div class="web-dot" />
{date} {date}
<span class="web-u-color-text-accent">_</span> <span class="web-u-color-text-accent">_</span>

10
src/routes/init/tickets/+page.svelte
View File

@@ -69,13 +69,11 @@
<div class="signup"> <div class="signup">
<div class="info"> <div class="info">
<hgroup> <hgroup>
<h1 class="web-display"> <h1 class="text-display font-aeonik-pro">
<span style:font-weight="500">init</span> <span style:font-weight="500">init</span>
launches on August 19th launches on August 19th
</h1> </h1>
<p class="web-label web-u-color-text-primary"> <p class="text-label text-primary">Register today and claim your Init ticket</p>
Register today and claim your Init ticket
</p>
</hgroup> </hgroup>
<div class="buttons"> <div class="buttons">
<button class="web-button" on:click={loginGithub}> <button class="web-button" on:click={loginGithub}>
@@ -84,10 +82,10 @@
</button> </button>
</div> </div>
<p class="privacy"> <p class="privacy">
By registering, you agree to our <a href="/terms" class="web-link is-inline" By registering, you agree to our <a href="/terms" class="web-link underline"
>Terms and Conditions</a >Terms and Conditions</a
> >
and <a href="/privacy" class="web-link is-inline">Privacy Policy</a> and <a href="/privacy" class="web-link underline">Privacy Policy</a>
</p> </p>
</div> </div>
<div class="shadow"></div> <div class="shadow"></div>

13
src/routes/init/tickets/[id]/+page.svelte
View File

@@ -40,23 +40,20 @@
<div class="hero"> <div class="hero">
<div class="desktop-left"> <div class="desktop-left">
<div class="header"> <div class="header">
<h1 class="web-display"> <h1 class="text-display font-aeonik-pro">
Join <span class="web-u-color-text-primary" style:font-weight="500"> Join <span class="text-primary" style:font-weight="500"> init </span><br
init />August 19th-23rd
</span><br />August 19th-23rd
</h1> </h1>
</div> </div>
<div class="info"> <div class="info">
<p class="web-label mt-4">Register today and claim your ticket.</p> <p class="text-label mt-4">Register today and claim your ticket.</p>
<div class="mt-8 flex items-center gap-4"> <div class="mt-8 flex items-center gap-4">
<a class="web-button" href="/init/tickets"> <a class="web-button" href="/init/tickets">
<span class="text">Get my ticket</span> <span class="text">Get my ticket</span>
</a> </a>
<button class="web-button is-secondary" on:click={copy}> <button class="web-button is-secondary" on:click={copy}>
<span <span class="web-icon-{$copied ? 'check' : 'copy'} text-primary" />
class="web-icon-{$copied ? 'check' : 'copy'} web-u-color-text-primary"
/>
<span class="text">Copy ticket URL</span> <span class="text">Copy ticket URL</span>
</button> </button>

12
src/routes/init/tickets/customize/+page.svelte
View File

@@ -71,15 +71,13 @@
<div class="hero"> <div class="hero">
<div class="desktop-left"> <div class="desktop-left">
<div class="header"> <div class="header">
<h1 class="web-display"> <h1 class="text-display font-aeonik-pro">
Ready, set, <span class="web-u-color-text-primary" style:font-weight="500"> Ready, set, <span class="text-primary" style:font-weight="500"> init </span>
init
</span>
</h1> </h1>
</div> </div>
<div class="info"> <div class="info">
<p class="web-label mt-4"> <p class="text-label mt-4">
Join us during the week of August 19–23 to celebrate everything new with Join us during the week of August 19–23 to celebrate everything new with
Appwrite. Appwrite.
</p> </p>
@@ -134,12 +132,12 @@
} }
} }
.web-display { .text-display font-aeonik-pro {
margin-bottom: -48px; margin-bottom: -48px;
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.web-display { .text-display font-aeonik-pro {
margin-bottom: 0; margin-bottom: 0;
} }
} }

24
src/routes/integrations/+page.svelte
View File

@@ -106,10 +106,10 @@
<div <div
class="l-integrations-hero web-u-max-width-680 flex flex-col justify-center gap-5" class="l-integrations-hero web-u-max-width-680 flex flex-col justify-center gap-5"
> >
<div class="web-eyebrow web-u-color-text-primary"> <div class="web-eyebrow text-primary">
INTEGRATIONS<span class="web-u-color-text-accent">_</span> INTEGRATIONS<span class="web-u-color-text-accent">_</span>
</div> </div>
<h1 class="web-headline web-u-color-text-primary"> <h1 class="text-headline font-aeonik-pro text-primary">
Discover infinite possibilities Discover infinite possibilities
</h1> </h1>
<p class="text-description"> <p class="text-description">
@@ -226,9 +226,7 @@
{#if hasQuery} {#if hasQuery}
<section class="l-max-size-list-cards-section flex flex-col gap-8"> <section class="l-max-size-list-cards-section flex flex-col gap-8">
<header class="flex flex-col gap-1"> <header class="flex flex-col gap-1">
<h2 class="web-label web-u-color-text-primary"> <h2 class="text-label text-primary">Search results</h2>
Search results
</h2>
<p class="text-description"> <p class="text-description">
{result.length > 0 ? result.length : 'No'} results found {result.length > 0 ? result.length : 'No'} results found
for "{$query}" for "{$query}"
@@ -261,9 +259,7 @@
<div <div
class="flex items-center justify-between gap-2" class="flex items-center justify-between gap-2"
> >
<h4 <h4 class="text-primary mt-3">
class="web-u-color-text-primary mt-3"
>
{item.title} {item.title}
</h4> </h4>
</div> </div>
@@ -279,7 +275,7 @@
{:else} {:else}
<section class="flex flex-col gap-8"> <section class="flex flex-col gap-8">
<header class="flex flex-col gap-1"> <header class="flex flex-col gap-1">
<h2 class="web-label web-u-color-text-primary">Featured</h2> <h2 class="text-label text-primary">Featured</h2>
<p class="text-description">Top recommended integrations</p> <p class="text-description">Top recommended integrations</p>
</header> </header>
@@ -343,7 +339,7 @@
}} }}
> >
<header class="flex flex-col gap-1"> <header class="flex flex-col gap-1">
<h2 class="web-label web-u-color-text-primary"> <h2 class="text-label text-primary">
{category} {category}
</h2> </h2>
<p class="text-description"> <p class="text-description">
@@ -378,9 +374,7 @@
></span> ></span>
</div> </div>
<h4 <h4 class="text-primary mt-3">
class="web-u-color-text-primary mt-3"
>
{integration.title} {integration.title}
</h4> </h4>
<p <p
@@ -425,7 +419,9 @@
<section <section
class="web-hero web-u-max-width-580 flex items-center justify-center gap-4" class="web-hero web-u-max-width-580 flex items-center justify-center gap-4"
> >
<h2 class="web-display text-center web-u-color-text-primary max-w-[600px]"> <h2
class="text-display font-aeonik-pro text-center text-primary max-w-[600px]"
>
Become a Technology Partner Become a Technology Partner
</h2> </h2>
<p class="web-main-body-500"> <p class="web-main-body-500">

8
src/routes/integrations/technology-partner/+page.svelte
View File

@@ -91,7 +91,7 @@
> >
{#if submitted} {#if submitted}
<section class="flex flex-col gap-5"> <section class="flex flex-col gap-5">
<h1 class="web-display web-u-color-text-primary"> <h1 class="text-display font-aeonik-pro text-primary">
Thank you for applying Thank you for applying
</h1> </h1>
<p class="text-description web-u-padding-block-end-32"> <p class="text-description web-u-padding-block-end-32">
@@ -108,7 +108,7 @@
</section> </section>
{:else} {:else}
<section class="flex flex-col gap-5"> <section class="flex flex-col gap-5">
<h4 class="web-display web-u-color-text-primary"> <h4 class="text-display font-aeonik-pro text-primary">
Become a Technology Partner Become a Technology Partner
</h4> </h4>
<p class="text-description"> <p class="text-description">
@@ -121,9 +121,7 @@
<section <section
class="web-u-sep-block-start mt-10 flex flex-col gap-3 pt-10" class="web-u-sep-block-start mt-10 flex flex-col gap-3 pt-10"
> >
<h2 class="web-label web-u-color-text-primary"> <h2 class="text-label text-primary">Follow us</h2>
Follow us
</h2>
<ul class="flex gap-2"> <ul class="flex gap-2">
{#each socials as social} {#each socials as social}
<li> <li>

6
src/routes/oss-program/+page.svelte
View File

@@ -84,7 +84,7 @@
> >
{#if submitted} {#if submitted}
<section class="flex flex-col gap-5"> <section class="flex flex-col gap-5">
<h1 class="web-display web-u-color-text-primary"> <h1 class="text-display font-aeonik-pro text-primary">
Thank you for your application Thank you for your application
</h1> </h1>
<p class="text-description web-u-padding-block-end-32"> <p class="text-description web-u-padding-block-end-32">
@@ -100,7 +100,7 @@
</section> </section>
{:else} {:else}
<section class="flex flex-col gap-5"> <section class="flex flex-col gap-5">
<h1 class="web-display web-u-color-text-primary"> <h1 class="text-display font-aeonik-pro text-primary">
OSS program OSS program
</h1> </h1>
<p class="text-description web-u-padding-block-end-40"> <p class="text-description web-u-padding-block-end-40">
@@ -113,7 +113,7 @@
<section <section
class="web-u-padding-block-start-40 web-u-sep-block-start flex flex-col gap-3" class="web-u-padding-block-start-40 web-u-sep-block-start flex flex-col gap-3"
> >
<h2 class="web-label web-u-color-text-primary">Follow us</h2> <h2 class="text-label text-primary">Follow us</h2>
<ul class="flex gap-2"> <ul class="flex gap-2">
{#each socials as social} {#each socials as social}
<li> <li>

29
src/routes/pricing/+page.svelte
View File

@@ -50,7 +50,7 @@
<section class="container"> <section class="container">
<div class="web-hero"> <div class="web-hero">
<h1 <h1
class="web-display web-u-max-width-700 web-u-opacity-90 web-u-mobile-align-text-center self-center" class="text-display font-aeonik-pro web-u-max-width-700 web-u-opacity-90 web-u-mobile-align-text-center self-center"
style="background: linear-gradient(90deg, #F47298 0%, #E4E1E5 61.98%, #E4E4E7 100%); style="background: linear-gradient(90deg, #F47298 0%, #E4E1E5 61.98%, #E4E4E7 100%);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-block-end:2px;" -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-block-end:2px;"
> >
@@ -70,8 +70,10 @@
> >
<div class="web-pricing-cards-item"> <div class="web-pricing-cards-item">
<header class="web-pricing-cards-header"> <header class="web-pricing-cards-header">
<h2 id="starter" class="web-label">Free</h2> <h2 id="starter" class="text-label">Free</h2>
<div class="web-title web-u-color-text-primary mt-2"> <div
class="text-title font-aeonik-pro text-primary mt-2"
>
$0 $0
</div> </div>
<div class="mt-1">&nbsp;</div> <div class="mt-1">&nbsp;</div>
@@ -116,8 +118,10 @@
> >
<div class="web-pricing-cards-item"> <div class="web-pricing-cards-item">
<header class="web-pricing-cards-header"> <header class="web-pricing-cards-header">
<h2 id="pro" class="web-label">Pro</h2> <h2 id="pro" class="text-label">Pro</h2>
<div class="web-title web-u-color-text-primary mt-2"> <div
class="text-title font-aeonik-pro text-primary mt-2"
>
$15 $15
</div> </div>
<div class="mt-1">per member/month</div> <div class="mt-1">per member/month</div>
@@ -164,8 +168,10 @@
> >
<div class="web-pricing-cards-item"> <div class="web-pricing-cards-item">
<header class="web-pricing-cards-header"> <header class="web-pricing-cards-header">
<h2 id="scale" class="web-label">Scale</h2> <h2 id="scale" class="text-label">Scale</h2>
<div class="web-title web-u-color-text-primary mt-2"> <div
class="text-title font-aeonik-pro text-primary mt-2"
>
$599 $599
</div> </div>
<div class="mt-1">per organization/month</div> <div class="mt-1">per organization/month</div>
@@ -207,10 +213,7 @@
style="background:rgba(35, 35, 37, 0.90);" style="background:rgba(35, 35, 37, 0.90);"
> >
<header class="flex gap-3"> <header class="flex gap-3">
<h3 <h3 id="enterprises" class="web-main-body-500 text-primary">
id="enterprises"
class="web-main-body-500 web-u-color-text-primary"
>
Enterprises Enterprises
</h3> </h3>
<div class="web-inline-tag is-pink">Coming Soon</div> <div class="web-inline-tag is-pink">Coming Soon</div>
@@ -232,7 +235,7 @@
<header class="flex gap-3"> <header class="flex gap-3">
<h3 <h3
id="open-source-teams" id="open-source-teams"
class="web-main-body-500 web-u-color-text-primary" class="web-main-body-500 text-primary"
> >
Open-source teams Open-source teams
</h3> </h3>
@@ -260,7 +263,7 @@
<div class="container relative" style:z-index="10"> <div class="container relative" style:z-index="10">
<section class="web-grid-4-6"> <section class="web-grid-4-6">
<header> <header>
<div class="web-display web-u-color-text-primary">FAQ</div> <div class="text-display font-aeonik-pro text-primary">FAQ</div>
</header> </header>
<Faq /> <Faq />
</section> </section>

12
src/routes/pricing/compare-plans.svelte
View File

@@ -368,7 +368,7 @@
shouldShowTable = !e.detail; shouldShowTable = !e.detail;
}} }}
> >
<h3 class="web-title web-u-color-text-primary">Compare plans</h3> <h3 class="text-title font-aeonik-pro text-primary">Compare plans</h3>
<p class="web-main-body-500 mt-4"> <p class="web-main-body-500 mt-4">
Discover our plans and find the one that fits your project’s needs. Discover our plans and find the one that fits your project’s needs.
</p> </p>
@@ -398,7 +398,7 @@
style:transition="inset-block-start 0.3s ease" style:transition="inset-block-start 0.3s ease"
> >
<div <div
class="text-description web-u-color-text-primary self-center" class="text-description text-primary self-center"
style:opacity={browser ? 1 : 0} style:opacity={browser ? 1 : 0}
style:position={browser ? 'relative' : undefined} style:position={browser ? 'relative' : undefined}
> >
@@ -424,7 +424,7 @@
</div> </div>
<div class="web-mini-card"> <div class="web-mini-card">
<div class="flex flex-wrap items-center justify-between gap-4"> <div class="flex flex-wrap items-center justify-between gap-4">
<h4 class="web-label web-u-color-text-primary">Free</h4> <h4 class="text-label text-primary">Free</h4>
<a <a
href="https://cloud.appwrite.io/register" href="https://cloud.appwrite.io/register"
class="web-button is-secondary" class="web-button is-secondary"
@@ -435,7 +435,7 @@
</div> </div>
<div class="web-mini-card"> <div class="web-mini-card">
<div class="flex flex-wrap items-center justify-between gap-4"> <div class="flex flex-wrap items-center justify-between gap-4">
<h4 class="web-label web-u-color-text-primary">Pro</h4> <h4 class="text-label text-primary">Pro</h4>
<a <a
class="web-button" class="web-button"
href="https://cloud.appwrite.io/console?type=createPro" href="https://cloud.appwrite.io/console?type=createPro"
@@ -449,7 +449,7 @@
</div> </div>
<div class="web-mini-card"> <div class="web-mini-card">
<div class="flex flex-wrap items-center justify-between gap-4"> <div class="flex flex-wrap items-center justify-between gap-4">
<h4 class="web-label web-u-color-text-primary">Scale</h4> <h4 class="text-label text-primary">Scale</h4>
<button class="web-button is-secondary" disabled> <button class="web-button is-secondary" disabled>
<span class="web-sub-body-500">Coming soon</span> <span class="web-sub-body-500">Coming soon</span>
</button> </button>
@@ -477,7 +477,7 @@
}} }}
> >
<caption <caption
class="web-compare-table-caption text-description web-u-color-text-primary text-left" class="web-compare-table-caption text-description text-primary text-left"
use:melt={$heading({ level: 3 })} use:melt={$heading({ level: 3 })}
style:position={browser ? 'unset' : undefined} style:position={browser ? 'unset' : undefined}
> >

24
src/routes/pricing/faq.svelte
View File

@@ -9,7 +9,7 @@
}[] = [ }[] = [
{ {
question: 'Can I self-host Appwrite for free?', question: 'Can I self-host Appwrite for free?',
answer: 'Yes! Appwrite Self Hosted will always be Open Source and free for you to use, without any limits. You can find the latest version of Appwrite in our <a rel="noopener noreferrer" class="web-link is-inline" href="https://github.com/appwrite/appwrite">GitHub repository</a>, and you can follow <a class="web-link is-inline" href="/docs/advanced/self-hosting/">Self Hosting docs</a> to learn how to install Appwrite on your server.' answer: 'Yes! Appwrite Self Hosted will always be Open Source and free for you to use, without any limits. You can find the latest version of Appwrite in our <a rel="noopener noreferrer" class="web-link underline" href="https://github.com/appwrite/appwrite">GitHub repository</a>, and you can follow <a class="web-link underline" href="/docs/advanced/self-hosting/">Self Hosting docs</a> to learn how to install Appwrite on your server.'
}, },
// { // {
// question: 'Does Appwrite have a trial period?', // question: 'Does Appwrite have a trial period?',
@@ -17,27 +17,27 @@
// }, // },
{ {
question: 'What payment methods does Appwrite support?', question: 'What payment methods does Appwrite support?',
answer: 'Appwrite currently supports <a class="web-link is-inline" href="/docs/advanced/platform/billing#payment-methods">credit and debit card payments</a>. We are actively working on adding support for more methods. Please <a class="web-link is-inline" href="/contact-us">contact us</a> in case this is an issue for you.' answer: 'Appwrite currently supports <a class="web-link underline" href="/docs/advanced/platform/billing#payment-methods">credit and debit card payments</a>. We are actively working on adding support for more methods. Please <a class="web-link underline" href="/contact-us">contact us</a> in case this is an issue for you.'
}, },
{ {
question: 'What happens if I reach a resource limit in my Pro plan?', question: 'What happens if I reach a resource limit in my Pro plan?',
answer: 'Your project will continue to run, and additional charges will apply. You can find the costs for additional resources in the <a class="web-link is-inline" href="/pricing">pricing plans comparison</a>. We will also send you email reminders when you hit 75% and 100% of your resource limits. To avoid unexpected payments, you can set up a <a class="web-link is-inline" href="/docs/advanced/platform/pro#budget-cap">budget cap</a> on your organization. <a class="web-link is-inline" href="/docs/advanced/platform/pro#reaching-resource-limits">Learn more in our docs</a>.' answer: 'Your project will continue to run, and additional charges will apply. You can find the costs for additional resources in the <a class="web-link underline" href="/pricing">pricing plans comparison</a>. We will also send you email reminders when you hit 75% and 100% of your resource limits. To avoid unexpected payments, you can set up a <a class="web-link underline" href="/docs/advanced/platform/pro#budget-cap">budget cap</a> on your organization. <a class="web-link underline" href="/docs/advanced/platform/pro#reaching-resource-limits">Learn more in our docs</a>.'
}, },
{ {
question: 'What happens if I reach a resource limit in my Free plan?', question: 'What happens if I reach a resource limit in my Free plan?',
answer: 'Your project will freeze, and Appwrite Console will continue running in read-only mode. You need to upgrade to Pro, remove resources that exceed their limit, or wait for the next billing cycle, which resets usage limits. <a class="web-link is-inline" href="/docs/advanced/platform/pro#reaching-resource-limits">Learn more in our docs</a>.' answer: 'Your project will freeze, and Appwrite Console will continue running in read-only mode. You need to upgrade to Pro, remove resources that exceed their limit, or wait for the next billing cycle, which resets usage limits. <a class="web-link underline" href="/docs/advanced/platform/pro#reaching-resource-limits">Learn more in our docs</a>.'
}, },
{ {
question: 'Why does Appwrite ask for payment verification for up to $150?', question: 'Why does Appwrite ask for payment verification for up to $150?',
answer: 'The Reserve Bank of India (RBI) mandates additional security measures for recurring payments on Indian cards. Appwrite is obligated to ask for verification before billing your card. Appwrite asks for verification for up to $150 in case you use add-ons, but will not charge more than the actual amount used or your budget cap. If you need higher limits, <a class="web-link is-inline" href="mailto:billing@appwrite.io">contact us</a>.' answer: 'The Reserve Bank of India (RBI) mandates additional security measures for recurring payments on Indian cards. Appwrite is obligated to ask for verification before billing your card. Appwrite asks for verification for up to $150 in case you use add-ons, but will not charge more than the actual amount used or your budget cap. If you need higher limits, <a class="web-link underline" href="mailto:billing@appwrite.io">contact us</a>.'
}, },
{ {
question: 'How can I join the OSS program?', question: 'How can I join the OSS program?',
answer: `The OSS program is exclusively for active open-source maintainers using Appwrite Cloud. You can find more information on how to join the program in our <a class="web-link is-inline" href="/blog/post/announcing-the-appwrite-oss-program">announcement blog</a>.` answer: `The OSS program is exclusively for active open-source maintainers using Appwrite Cloud. You can find more information on how to join the program in our <a class="web-link underline" href="/blog/post/announcing-the-appwrite-oss-program">announcement blog</a>.`
}, },
{ {
question: 'How can I join the Startups program?', question: 'How can I join the Startups program?',
answer: `Are you a founder looking to build with Appwrite? Learn more about our Startups program on our Startups <a class="web-link is-inline" href="/startups">landing page.</a>.` answer: `Are you a founder looking to build with Appwrite? Learn more about our Startups program on our Startups <a class="web-link underline" href="/startups">landing page.</a>.`
}, },
{ {
question: 'I have a Free plan account. How do I upgrade to a paid plan?', question: 'I have a Free plan account. How do I upgrade to a paid plan?',
@@ -59,7 +59,7 @@
{ {
question: question:
'I work with sensitive data and need to sign a BAA. Does Appwrite provide this?', 'I work with sensitive data and need to sign a BAA. Does Appwrite provide this?',
answer: 'Yes, you can sign a BAA with Appwrite. Learn more about our security and compliance in our <a class="web-link is-inline" href="/docs/advanced/security">documentation</a>.' answer: 'Yes, you can sign a BAA with Appwrite. Learn more about our security and compliance in our <a class="web-link underline" href="/docs/advanced/security">documentation</a>.'
} }
]; ];
@@ -88,11 +88,11 @@
class="flex w-full items-center justify-between gap-2.5 py-6 text-left" class="flex w-full items-center justify-between gap-2.5 py-6 text-left"
use:melt={$trigger(`${index}`)} use:melt={$trigger(`${index}`)}
> >
<span class="web-label web-u-color-text-primary"> <span class="text-label text-primary">
{faqItem.question} {faqItem.question}
</span> </span>
<div <div
class="icon web-u-color-text-primary self-start transition-transform" class="icon text-primary self-start transition-transform"
class:rotate-180={$isSelected(`${index}`)} class:rotate-180={$isSelected(`${index}`)}
> >
<span class="icon-cheveron-down" aria-hidden="true" /> <span class="icon-cheveron-down" aria-hidden="true" />
@@ -116,10 +116,10 @@
{:else} {:else}
<details class="collapsible-wrapper" open={index === 0}> <details class="collapsible-wrapper" open={index === 0}>
<summary class="collapsible-button"> <summary class="collapsible-button">
<span class="web-label web-u-color-text-primary"> <span class="text-label text-primary">
{faqItem.question} {faqItem.question}
</span> </span>
<div class="icon web-u-color-text-primary"> <div class="icon text-primary">
<span class="icon-cheveron-down" aria-hidden="true" /> <span class="icon-cheveron-down" aria-hidden="true" />
</div> </div>
</summary> </summary>

2
src/routes/products/messaging/(components)/Accordion/AccordionItem.svelte
View File

@@ -14,7 +14,7 @@
<div use:melt={$item(index.toString())}> <div use:melt={$item(index.toString())}>
<button use:melt={$trigger(index.toString())}> <button use:melt={$trigger(index.toString())}>
<slot name="trigger" /> <slot name="trigger" />
<div class="web-icon-chevron-down web-u-color-text-primary" /> <div class="web-icon-chevron-down text-primary" />
</button> </button>
{#if $isSelected(index.toString())} {#if $isSelected(index.toString())}
<div use:melt={$content(index.toString())} transition:slide={{ duration: 250 }}> <div use:melt={$content(index.toString())} transition:slide={{ duration: 250 }}>

8
src/routes/products/messaging/(components)/Draft.svelte
View File

@@ -50,10 +50,10 @@
</ul> </ul>
</div> </div>
<div class="content"> <div class="content">
<h4 class="web-label web-u-color-text-primary">Message</h4> <h4 class="text-label text-primary">Message</h4>
<hr /> <hr />
<label class="web-u-color-text-primary" for="title">Title</label> <label class="text-primary" for="title">Title</label>
<input <input
class="web-input-text" class="web-input-text"
style="max-width: 80%" style="max-width: 80%"
@@ -63,7 +63,7 @@
bind:value={title} bind:value={title}
maxlength="48" maxlength="48"
/> />
<label class="web-u-color-text-primary" for="message">Message</label> <label class="text-primary" for="message">Message</label>
<textarea <textarea
class="web-input-text" class="web-input-text"
style="max-width: 80%" style="max-width: 80%"
@@ -92,7 +92,7 @@
</div> </div>
</div> </div>
<div class="text"> <div class="text">
<h3 class="web-title web-u-color-text-primary"> <h3 class="text-title font-aeonik-pro text-primary">
Draft and preview your message before delivering it Draft and preview your message before delivering it
</h3> </h3>
<p class="text-description mt-6"> <p class="text-description mt-6">

4
src/routes/products/messaging/(components)/Schedule.svelte
View File

@@ -26,7 +26,7 @@
<div class="web-icon-chevron-left" /> <div class="web-icon-chevron-left" />
</button> </button>
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<div class="web-label web-u-color-text-primary" use:melt={$heading}> <div class="text-label text-primary" use:melt={$heading}>
{$headingValue} {$headingValue}
</div> </div>
<button <button
@@ -79,7 +79,7 @@
</div> </div>
</div> </div>
<h3 class="web-title web-u-color-text-primary">Schedule your messages</h3> <h3 class="text-title font-aeonik-pro text-primary">Schedule your messages</h3>
<p class="text-description">Send messages immediately or schedule them for future delivery.</p> <p class="text-description">Send messages immediately or schedule them for future delivery.</p>
</Step> </Step>

4
src/routes/products/messaging/(components)/Send.svelte
View File

@@ -11,7 +11,9 @@
<div class="android"> <div class="android">
<img src={AndroidSvg} alt="" class="android" /> <img src={AndroidSvg} alt="" class="android" />
<h3 class="web-title web-u-color-text-primary">Communicate across multiple channels</h3> <h3 class="text-title font-aeonik-pro text-primary">
Communicate across multiple channels
</h3>
<p class="text-description"> <p class="text-description">
Pick one or more channels for you to deliver your message to your user. Pick one or more channels for you to deliver your message to your user.
</p> </p>

2
src/routes/products/messaging/(components)/Step.svelte
View File

@@ -5,7 +5,7 @@
<div class="step" data-hideline={hideLine}> <div class="step" data-hideline={hideLine}>
<div class="web-dot" /> <div class="web-dot" />
<h2 class="web-eyebrow web-u-color-text-primary step-title">{title}</h2> <h2 class="web-eyebrow text-primary step-title">{title}</h2>
<div class="step-content mt-8"> <div class="step-content mt-8">
<slot /> <slot />
</div> </div>

8
src/routes/products/messaging/(components)/Target.svelte
View File

@@ -235,7 +235,7 @@
/> />
<foreignObject x={textPos[0]} y={textPos[1]} width="360" height="64"> <foreignObject x={textPos[0]} y={textPos[1]} width="360" height="64">
<span class="web-eyebrow web-u-color-text-primary" data-active={$selected[i]}> <span class="web-eyebrow text-primary" data-active={$selected[i]}>
{device.value} {device.value}
</span> </span>
</foreignObject> </foreignObject>
@@ -281,7 +281,7 @@
</svg> </svg>
<div class="users-modal"> <div class="users-modal">
<h3 class="web-label web-u-color-text-primary">Select subscribers</h3> <h3 class="text-label text-primary">Select subscribers</h3>
<Accordion> <Accordion>
<ul class="accordion-items"> <ul class="accordion-items">
{#each users as user, i} {#each users as user, i}
@@ -320,7 +320,7 @@
return next; return next;
}} }}
/> />
<span class="web-sub-body-500 web-u-color-text-primary"> <span class="web-sub-body-500 text-primary">
{user.name} {user.name}
</span> </span>
<span class="web-caption-400"> <span class="web-caption-400">
@@ -368,7 +368,7 @@
</div> </div>
<div class="target-text mt-4 flex flex-col items-center gap-6"> <div class="target-text mt-4 flex flex-col items-center gap-6">
<h3 class="web-title web-u-color-text-primary text-center"> <h3 class="text-title font-aeonik-pro text-primary text-center">
Target and group your subscribers Target and group your subscribers
</h3> </h3>
<p class="text-description text-center" style:max-inline-size="580px"> <p class="text-description text-center" style:max-inline-size="580px">

34
src/routes/products/messaging/+page.svelte
View File

@@ -255,12 +255,12 @@ messaging.create_email(
<div> <div>
<div class="product"> <div class="product">
<img src="/images/icons/illustrated/dark/messaging.png" alt="" /> <img src="/images/icons/illustrated/dark/messaging.png" alt="" />
<span class="web-eyebrow web-u-color-text-primary"> <span class="web-eyebrow text-primary">
Messaging<span class="web-u-color-text-accent">_</span> Messaging<span class="web-u-color-text-accent">_</span>
</span> </span>
<span class="web-hero-banner-button web-eyebrow">BETA</span> <span class="web-hero-banner-button web-eyebrow">BETA</span>
</div> </div>
<h1 class="web-display web-u-color-text-primary"> <h1 class="text-display font-aeonik-pro text-primary">
Open source messaging service for developers Open source messaging service for developers
</h1> </h1>
<p class="text-description mt-5"> <p class="text-description mt-5">
@@ -293,7 +293,7 @@ messaging.create_email(
<div class="container"> <div class="container">
<section class="web-hero is-align-start"> <section class="web-hero is-align-start">
<span class="web-badges web-eyebrow !text-white">capabilities_</span> <span class="web-badges web-eyebrow !text-white">capabilities_</span>
<h2 class="web-display web-u-color-text-primary max-w-[700px]"> <h2 class="text-display font-aeonik-pro text-primary max-w-[700px]">
All of your messages in one place All of your messages in one place
</h2> </h2>
</section> </section>
@@ -477,13 +477,13 @@ messaging.create_email(
<div class="container"> <div class="container">
<div class="web-hero is-align-start"> <div class="web-hero is-align-start">
<span class="web-badges web-eyebrow !text-white">SDKs_</span> <span class="web-badges web-eyebrow !text-white">SDKs_</span>
<h2 class="web-display web-u-color-text-primary max-w-[700px]"> <h2 class="text-display font-aeonik-pro text-primary max-w-[700px]">
Start today with your preferred technologies Start today with your preferred technologies
</h2> </h2>
</div> </div>
<div class="code-snippets divide-border-primary mt-64 grid grid-cols-2 gap-16"> <div class="code-snippets divide-border-primary mt-64 grid grid-cols-2 gap-16">
<div class="flex min-w-0 flex-col gap-2"> <div class="flex min-w-0 flex-col gap-2">
<h3 class="web-label web-u-color-text-primary">Subscribe to a topic</h3> <h3 class="text-label text-primary">Subscribe to a topic</h3>
<p class="text-description"> <p class="text-description">
Subscribe to receive all messages related to a topic. Subscribe to receive all messages related to a topic.
</p> </p>
@@ -497,7 +497,7 @@ messaging.create_email(
</div> </div>
</div> </div>
<div class="flex min-w-0 flex-col gap-2"> <div class="flex min-w-0 flex-col gap-2">
<h3 class="web-label web-u-color-text-primary">Send a message</h3> <h3 class="text-label text-primary">Send a message</h3>
<p class="text-description"> <p class="text-description">
Send a message to all targets on a topic. Send a message to all targets on a topic.
</p> </p>
@@ -516,9 +516,7 @@ messaging.create_email(
<section class="web-u-sep-block-start web-u-padding-block-start-80 py-10"> <section class="web-u-sep-block-start web-u-padding-block-start-80 py-10">
<div class="container"> <div class="container">
<h4 class="web-label web-u-color-text-primary text-center"> <h4 class="text-label text-primary text-center">Keep exploring our products</h4>
Keep exploring our products
</h4>
<ul <ul
class="mt-8 grid gap-8" class="mt-8 grid gap-8"
style="grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr))" style="grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr))"
@@ -539,7 +537,7 @@ messaging.create_email(
width="32" width="32"
height="32" height="32"
/> />
<h4 class="web-main-body-400 web-u-color-text-primary">Auth</h4> <h4 class="web-main-body-400 text-primary">Auth</h4>
<span class="web-icon-arrow-right ml-auto" aria-hidden="true" /> <span class="web-icon-arrow-right ml-auto" aria-hidden="true" />
</div> </div>
<p class="web-sub-body-400"> <p class="web-sub-body-400">
@@ -564,9 +562,7 @@ messaging.create_email(
width="32" width="32"
height="32" height="32"
/> />
<h4 class="web-main-body-400 web-u-color-text-primary"> <h4 class="web-main-body-400 text-primary">Functions</h4>
Functions
</h4>
<span class="web-icon-arrow-right ml-auto" aria-hidden="true" /> <span class="web-icon-arrow-right ml-auto" aria-hidden="true" />
</div> </div>
<p class="web-sub-body-400"> <p class="web-sub-body-400">
@@ -592,9 +588,7 @@ messaging.create_email(
width="37" width="37"
height="32" height="32"
/> />
<h4 class="web-main-body-400 web-u-color-text-primary"> <h4 class="web-main-body-400 text-primary">Databases</h4>
Databases
</h4>
<span class="web-icon-arrow-right ml-auto" aria-hidden="true" /> <span class="web-icon-arrow-right ml-auto" aria-hidden="true" />
</div> </div>
<p class="web-sub-body-400"> <p class="web-sub-body-400">
@@ -619,9 +613,7 @@ messaging.create_email(
width="32" width="32"
height="32" height="32"
/> />
<h4 class="web-main-body-400 web-u-color-text-primary"> <h4 class="web-main-body-400 text-primary">Storage</h4>
Storage
</h4>
<span class="web-icon-arrow-right ml-auto" aria-hidden="true" /> <span class="web-icon-arrow-right ml-auto" aria-hidden="true" />
</div> </div>
<p class="web-sub-body-400"> <p class="web-sub-body-400">
@@ -646,9 +638,7 @@ messaging.create_email(
width="32" width="32"
height="32" height="32"
/> />
<h4 class="web-main-body-400 web-u-color-text-primary"> <h4 class="web-main-body-400 text-primary">Realtime</h4>
Realtime
</h4>
<span class="web-icon-arrow-right ml-auto" aria-hidden="true" /> <span class="web-icon-arrow-right ml-auto" aria-hidden="true" />
</div> </div>
<p class="web-sub-body-400"> <p class="web-sub-body-400">

36
src/routes/startups/+page.svelte
View File

@@ -174,7 +174,7 @@
class="web-hero" class="web-hero"
style="--hero-max-inline-size:49.375rem; --hero-gap:1.125rem;" style="--hero-max-inline-size:49.375rem; --hero-gap:1.125rem;"
> >
<h1 class="web-headline web-u-color-text-primary"> <h1 class="text-headline font-aeonik-pro text-primary">
Build your startup with Appwrite Build your startup with Appwrite
</h1> </h1>
<p <p
@@ -204,7 +204,7 @@
alt="" alt=""
/> />
<div class="flex flex-col gap-2 text-center"> <div class="flex flex-col gap-2 text-center">
<h2 class="web-label web-u-color-text-primary">Complete backend</h2> <h2 class="text-label text-primary">Complete backend</h2>
<p class="web-main-body-500"> <p class="web-main-body-500">
Get access to Appwrite’s Scale plan and build your entire Get access to Appwrite’s Scale plan and build your entire
backend with Appwrite. backend with Appwrite.
@@ -219,7 +219,7 @@
alt="" alt=""
/> />
<div class="flex flex-col gap-2 text-center"> <div class="flex flex-col gap-2 text-center">
<h2 class="web-label web-u-color-text-primary">Cloud credits</h2> <h2 class="text-label text-primary">Cloud credits</h2>
<p class="web-main-body-500"> <p class="web-main-body-500">
Get Appwrite Cloud Scale for 12 months and reduce risk at an Get Appwrite Cloud Scale for 12 months and reduce risk at an
early stage. early stage.
@@ -234,7 +234,7 @@
alt="" alt=""
/> />
<div class="flex flex-col gap-2 text-center"> <div class="flex flex-col gap-2 text-center">
<h2 class="web-label web-u-color-text-primary">Priority support</h2> <h2 class="text-label text-primary">Priority support</h2>
<p class="web-main-body-500"> <p class="web-main-body-500">
Get community support and priority email support from the Get community support and priority email support from the
Appwrite team. Appwrite team.
@@ -257,7 +257,7 @@
style="--grid-1-1-gap:2.5rem; --grid-1-1-gap-desktop:15rem;" style="--grid-1-1-gap:2.5rem; --grid-1-1-gap-desktop:15rem;"
> >
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<h3 class="web-title web-u-color-text-primary"> <h3 class="text-title font-aeonik-pro text-primary">
Ship faster Ship faster
</h3> </h3>
<p class="web-main-body-500"> <p class="web-main-body-500">
@@ -318,7 +318,7 @@
<img alt="" src={UsageGraphs} /> <img alt="" src={UsageGraphs} />
</div> </div>
<div class="web-u-flex-basis-380 flex flex-col gap-4"> <div class="web-u-flex-basis-380 flex flex-col gap-4">
<h3 class="web-title web-u-color-text-primary"> <h3 class="text-title font-aeonik-pro text-primary">
Scalable architecture Scalable architecture
</h3> </h3>
<p class="web-main-body-500"> <p class="web-main-body-500">
@@ -365,7 +365,7 @@
style="--grid-1-1-gap: 2.5rem; --grid-1-1-gap-desktop: 6.5rem;" style="--grid-1-1-gap: 2.5rem; --grid-1-1-gap-desktop: 6.5rem;"
> >
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<h3 class="web-title web-u-color-text-primary"> <h3 class="text-title font-aeonik-pro text-primary">
Built-in security and compliance Built-in security and compliance
</h3> </h3>
<p class="web-main-body-500"> <p class="web-main-body-500">
@@ -451,7 +451,7 @@
> >
</div> </div>
<div <div
class="web-user-box-content web-caption-400 web-u-color-text-primary" class="web-user-box-content web-caption-400 text-primary"
> >
Hello devs! I am getting a CORS Hello devs! I am getting a CORS
error when sending a request to the error when sending a request to the
@@ -482,7 +482,7 @@
> >
</div> </div>
<div <div
class="web-user-box-content web-caption-400 web-u-color-text-primary" class="web-user-box-content web-caption-400 text-primary"
> >
Hey Louis! Is this the message you Hey Louis! Is this the message you
get get
@@ -518,7 +518,7 @@
> >
</div> </div>
<div <div
class="web-user-box-content web-caption-400 web-u-color-text-primary" class="web-user-box-content web-caption-400 text-primary"
> >
Yes! Yes!
</div> </div>
@@ -547,7 +547,7 @@
> >
</div> </div>
<div <div
class="web-user-box-content web-caption-400 web-u-color-text-primary" class="web-user-box-content web-caption-400 text-primary"
> >
You should be able to debug this You should be able to debug this
with a few steps. Just follow this with a few steps. Just follow this
@@ -566,7 +566,7 @@
</div> </div>
</div> </div>
<div class="web-mx-auto-mobile ml-auto flex flex-col gap-4"> <div class="web-mx-auto-mobile ml-auto flex flex-col gap-4">
<h3 class="web-title web-u-color-text-primary"> <h3 class="text-title font-aeonik-pro text-primary">
Power of open source community Power of open source community
</h3> </h3>
<p class="web-main-body-500"> <p class="web-main-body-500">
@@ -606,7 +606,9 @@
<div <div
class="web-big-padding-section-level-2 web-u-overflow-hidden e-mt-50-desktop e-mt-38-mobile" class="web-big-padding-section-level-2 web-u-overflow-hidden e-mt-50-desktop e-mt-38-mobile"
> >
<h4 class="web-title web-u-color-text-primary mx-auto max-w-[350px] text-center"> <h4
class="text-title font-aeonik-pro text-primary mx-auto max-w-[350px] text-center"
>
Focus on building your product Focus on building your product
</h4> </h4>
<div class="scroll-carousel" use:infiniteScroll> <div class="scroll-carousel" use:infiniteScroll>
@@ -679,7 +681,7 @@
class:web-u-max-width-380={!submitted} class:web-u-max-width-380={!submitted}
> >
<section class="flex flex-col gap-5"> <section class="flex flex-col gap-5">
<h4 class="web-title web-u-color-text-primary"> <h4 class="text-title font-aeonik-pro text-primary">
Join the Appwrite Startups program Join the Appwrite Startups program
</h4> </h4>
<p class="text-description"> <p class="text-description">
@@ -713,14 +715,14 @@
class="web-u-max-width-380 web-u-max-inline-size-none-mobile relative z-[1] mx-auto flex flex-col gap-2 text-center" class="web-u-max-width-380 web-u-max-inline-size-none-mobile relative z-[1] mx-auto flex flex-col gap-2 text-center"
> >
<h6 <h6
class="web-label e-mobile-fix-1 flex items-center justify-center gap-2" class="text-label e-mobile-fix-1 flex items-center justify-center gap-2"
> >
<img <img
class="shrink-0" class="shrink-0"
src="/images/icons/colored/check.svg" src="/images/icons/colored/check.svg"
alt="" alt=""
/> />
<span class="web-u-color-text-primary" <span class="text-primary"
>Thank you for your submission</span >Thank you for your submission</span
> >
</h6> </h6>
@@ -816,7 +818,7 @@
<div class="container relative" style:z-index="10"> <div class="container relative" style:z-index="10">
<section class="web-grid-4-6"> <section class="web-grid-4-6">
<header> <header>
<div class="web-display web-u-color-text-primary">FAQ</div> <div class="text-display font-aeonik-pro text-primary">FAQ</div>
</header> </header>
<Faq /> <Faq />
</section> </section>

14
src/routes/startups/faq.svelte
View File

@@ -29,7 +29,7 @@
}, },
{ {
question: 'What are the limits of the Scale plan?', question: 'What are the limits of the Scale plan?',
answer: 'The Appwrite Scale plan has ample room for growth and can handle production applications of all sizes. We have set generous limits to ensure most applications can grow comfortably within those limits without incurring high bills. Please review our <a class="web-link is-inline" href="/pricing">pricing page</a> for a full overview of the Scale plan limits.' answer: 'The Appwrite Scale plan has ample room for growth and can handle production applications of all sizes. We have set generous limits to ensure most applications can grow comfortably within those limits without incurring high bills. Please review our <a class="web-link underline" href="/pricing">pricing page</a> for a full overview of the Scale plan limits.'
}, },
{ {
question: 'What happens if we scale overnight?', question: 'What happens if we scale overnight?',
@@ -37,7 +37,7 @@
}, },
{ {
question: "What's included in the Appwrite for Startups program?", question: "What's included in the Appwrite for Startups program?",
answer: 'Startups joining the program get access to everything Appwrite Scale offers. This includes Cloud credits, unlimited team members, and premium email support. In addition, we provide you with special swag, and you get a program manager and a private Discord channel. Read more about it in our <a class="web-link is-inline" href="/blog/post/announcing-appwrite-startups-program">announcement</a>.' answer: 'Startups joining the program get access to everything Appwrite Scale offers. This includes Cloud credits, unlimited team members, and premium email support. In addition, we provide you with special swag, and you get a program manager and a private Discord channel. Read more about it in our <a class="web-link underline" href="/blog/post/announcing-appwrite-startups-program">announcement</a>.'
}, },
{ {
question: 'What kind of support do we get?', question: 'What kind of support do we get?',
@@ -51,7 +51,7 @@
{ {
question: question:
'I am already using another backend as a service provider. How do I migrate to Appwrite?', 'I am already using another backend as a service provider. How do I migrate to Appwrite?',
answer: 'We have a <a class="web-link is-inline" href="/docs/advanced/migrations">migration tool</a> to help you transition from other platforms. If you need additional assistance, we are here to help.' answer: 'We have a <a class="web-link underline" href="/docs/advanced/migrations">migration tool</a> to help you transition from other platforms. If you need additional assistance, we are here to help.'
}, },
{ {
question: 'What happens after the 12 months run out?', question: 'What happens after the 12 months run out?',
@@ -93,11 +93,11 @@
class="flex w-full items-center justify-between gap-2.5 py-6 text-left" class="flex w-full items-center justify-between gap-2.5 py-6 text-left"
use:melt={$trigger(`${index}`)} use:melt={$trigger(`${index}`)}
> >
<span class="web-label web-u-color-text-primary"> <span class="text-label text-primary">
{faqItem.question} {faqItem.question}
</span> </span>
<div <div
class="icon web-u-color-text-primary self-start transition-transform" class="icon text-primary self-start transition-transform"
class:rotate-180={$isSelected(`${index}`)} class:rotate-180={$isSelected(`${index}`)}
> >
<span class="icon-cheveron-down" aria-hidden="true" /> <span class="icon-cheveron-down" aria-hidden="true" />
@@ -121,10 +121,10 @@
{:else} {:else}
<details class="collapsible-wrapper" open={index === 0}> <details class="collapsible-wrapper" open={index === 0}>
<summary class="collapsible-button"> <summary class="collapsible-button">
<span class="web-label web-u-color-text-primary"> <span class="text-label text-primary">
{faqItem.question} {faqItem.question}
</span> </span>
<div class="icon web-u-color-text-primary"> <div class="icon text-primary">
<span class="icon-cheveron-down" aria-hidden="true" /> <span class="icon-cheveron-down" aria-hidden="true" />
</div> </div>
</summary> </summary>

2
src/routes/subscription/verify/+page.svelte
View File

@@ -33,7 +33,7 @@
<div class="container"> <div class="container">
<div class="web-hero" style="--hero-gap:1.25rem;"> <div class="web-hero" style="--hero-gap:1.25rem;">
<span class="web-badges web-eyebrow !text-white">verification</span> <span class="web-badges web-eyebrow !text-white">verification</span>
<h1 class="web-headline web-u-color-text-primary"> <h1 class="text-headline font-aeonik-pro text-primary">
{#if error} {#if error}
Error Error
{:else} {:else}

Some files were not shown because too many files have changed in this diff Show More