Merge pull request #1410 from appwrite/revert-1409-revert-1286-studen…

…ts-page Revert "Revert "Students page""
appwrite · Nov 7, 2024 · 2f6d603 · 2f6d603
2 parents e59d2fa + 41d9f11
commit 2f6d603
Show file tree

Hide file tree

Showing 24 changed files with 840 additions and 9 deletions.
diff --git a/src/app.css b/src/app.css
@@ -53,6 +53,7 @@
     --color-white: hsl(0 0% 100%);
     --color-black: hsl(0 0% 0%);
     --color-transparent: rgba(0, 0, 0, 0);
+    --color-smooth: hsl(var(--color-greyscale-hue) 6%, 10%, 0.04);
     --color-greyscale-25: hsl(var(--color-greyscale-hue) 11% 98%);
     --color-greyscale-50: hsl(var(--color-greyscale-hue) 11% 94%);
     --color-greyscale-100: hsl(var(--color-greyscale-hue) 6% 90%);
@@ -68,8 +69,16 @@
     --color-greyscale-850: hsl(var(--color-greyscale-hue) 3% 14%);
     --color-greyscale-900: hsl(var(--color-greyscale-hue) 5.7% 10.4%);
 
+    /* utility colors */
+    --color-badge-bg-light: #f2c8d6;
+    --color-badge-border-light: #f69db7;
+    --color-badge-bg-dark: #2c2c2f;
+    --color-badge-border-dark: #39393c;
+
     /* Animations */
     --animate-scale-in: scale-in 200ms ease-out forwards;
+    --animate-text: fade-in 0.75s ease-in-out both, blur 0.75s ease-in-out both,
+        up 0.75s ease-in-out both;
 
     /* Pink polyfills */
     --transition: 0.2s;
@@ -84,6 +93,33 @@
         }
     }
 
+    @keyframes blur {
+        0% {
+            filter: blur(5px);
+        }
+        100% {
+            filter: blur(0);
+        }
+    }
+
+    @keyframes up {
+        0% {
+            transform: translateY(8px);
+        }
+        100% {
+            transform: translateY(0px);
+        }
+    }
+
+    @keyframes fade-in {
+        0% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+
     /* Fonts */
     --font-family-sans: 'Inter', arial, sans-serif;
     --font-family-mono: 'Fira Code', monospace;
@@ -152,12 +188,16 @@
     --color-primary: var(--color-greyscale-900);
     --color-secondary: var(--color-greyscale-700);
     --color-accent: var(--color-pink-600);
+    --color-badge-bg: var(--color-badge-bg-light);
+    --color-badge-border: var(--color-badge-border-light);
 }
 
 /* dark theme */
 .dark {
     --color-primary: var(--color-greyscale-100);
     --color-secondary: var(--color-greyscale-300);
+    --color-badge-bg: var(--color-badge-bg-dark);
+    --color-badge-border: var(--color-badge-border-dark);
 }
 
 /* Container */

diff --git a/src/lib/components/FooterNav.svelte b/src/lib/components/FooterNav.svelte
@@ -68,7 +68,8 @@
             ],
             Programs: [
                 { label: 'Heroes', href: '/heroes' },
-                { label: 'Startups', href: '/startups' }
+                { label: 'Startups', href: '/startups' },
+                { label: 'Students', href: '/students' }
             ],
             About: [
                 { label: 'Company', href: '/company' },

diff --git a/src/lib/components/animated/Text.svelte b/src/lib/components/animated/Text.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+    export let text: string;
+
+    const words = text.split(' ');
+</script>
+
+<span class="sr-only">{text}</span>
+<span class="relative">
+    {#each words as word, i}
+        <span
+            class="animate-text mr-2 inline-block"
+            style:animation-delay="{i * 75}ms
+            ">{word}</span
+        >
+    {/each}
+</span>
diff --git a/src/lib/components/ui/InlineTag.svelte b/src/lib/components/ui/InlineTag.svelte
@@ -1,5 +1,5 @@
 <div
-    class="tracking-none text-sub-body text-greyscale-900 dark:text-greyscale-100 py-0.25 -mr-0.5 rounded-[.25rem] bg-black/[0.08] px-1 dark:bg-white/[0.12]"
+    class="tracking-none text-sub-body text-greyscale-900 dark:text-greyscale-100 py-0.25 -mr-0.5 rounded-[.25rem] bg-black/8 px-1 dark:bg-white/[0.12]"
 >
     <slot />
 </div>
diff --git a/src/lib/layouts/DocsArticle.svelte b/src/lib/layouts/DocsArticle.svelte
@@ -99,7 +99,7 @@
                             </li>
                         {/each}
                     </ol>
-                    <div class="border-greyscale-900/[0.04] border-t pt-5">
+                    <div class="border-greyscale-900/4 border-t pt-5">
                         <button class="web-link inline-flex items-center gap-2" use:scrollToTop>
                             <span class="web-icon-arrow-up" aria-hidden="true" />
                             <span class="text-caption">Back to top</span>

diff --git a/src/lib/layouts/DocsTutorial.svelte b/src/lib/layouts/DocsTutorial.svelte
@@ -185,7 +185,7 @@
                         </li>
                     {/each}
                 </ol>
-                <div class="border-greyscale-900/[0.04] border-t pt-5">
+                <div class="border-greyscale-900/4 border-t pt-5">
                     <button class="web-link inline-flex items-center gap-2" use:scrollToTop>
                         <span class="web-icon-arrow-up" aria-hidden="true" />
                         <span class="text-caption">Back to top</span>

diff --git a/src/lib/layouts/Main.svelte b/src/lib/layouts/Main.svelte
@@ -277,7 +277,7 @@
     <MobileNav bind:open={$isMobileNavOpen} links={navLinks} />
 
     <main
-        class="web-main-section"
+        class="space-y-6"
         class:web-u-hide-mobile={$isMobileNavOpen}
         id={omitMainId ? undefined : 'main'}
     >

diff --git a/src/markdoc/tags/Tabs.svelte b/src/markdoc/tags/Tabs.svelte
@@ -32,7 +32,7 @@
     >
         <ul class="tabs-list flex items-center gap-4" {...$list} use:list>
             {#each $ctx.triggers.entries() as [id, title]}
-                <li class="tabs-item rounded-t-[0.625rem] hover:bg-white/[0.04]">
+                <li class="tabs-item rounded-t-[0.625rem] hover:bg-white/4">
                     <button
                         class="tabs-button cursor-pointer bg-clip-padding py-[0.625rem] px-1 font-light outline-none"
                         class:is-selected={$value === id}

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -132,6 +132,7 @@
                         <span class="text-caption web-u-trim-1"
                             >Introducing Database Backups</span
                         >
+
                         <span class="web-icon-arrow-right shrink-0" aria-hidden="true" />
                     </a>
                     <Hero>
@@ -305,10 +306,10 @@
                     </section>
                     <div class="mt-20 overflow-hidden">
                         <ul
-                            class="web-info-boxes text-sub-body divide-x divide-y divide-black/[0.04] font-medium"
+                            class="web-info-boxes text-sub-body divide-x divide-y divide-black/4 font-medium"
                         >
                             {#each infoBoxes as box}
-                                <li class="relative border-black/[0.04] p-8 last-of-type:border-r">
+                                <li class="relative border-black/4 p-8 last-of-type:border-r">
                                     <img src={box.icon} width="40" height="40" alt="" />
                                     <h3
                                         class="text-primary mt-4 flex flex-wrap items-baseline gap-3"

diff --git a/src/routes/docs/references/[version]/[platform]/[service]/+page.svelte b/src/routes/docs/references/[version]/[platform]/[service]/+page.svelte
@@ -267,7 +267,7 @@
                             </li>
                         {/each}
                     </ul>
-                    <div class="border-greyscale-900/[0.04] web-u-padding-block-20 border-t">
+                    <div class="border-greyscale-900/4 web-u-padding-block-20 border-t">
                         <button class="web-link inline-flex items-center gap-2" use:scrollToTop>
                             <span class="web-icon-arrow-up" aria-hidden="true" />
                             <span class="text-caption">Back to top</span>

diff --git a/src/routes/students/(assets)/beaker.svg b/src/routes/students/(assets)/beaker.svg
diff --git a/src/routes/students/(assets)/chat-icon.svg b/src/routes/students/(assets)/chat-icon.svg