Auth product page

package.json

@@ -23,35 +23,36 @@
     },
     "packageManager": "[email protected]+sha512.f549b8a52c9d2b8536762f99c0722205efc5af913e77835dbccc3b0b0b2ca9e7dc8022b78062c17291c48e88749c70ce88eb5a74f1fa8c4bf5e18bb46c8bd83a",
     "dependencies": {
-        "@sentry/sveltekit": "^8.12.0",
-        "h3": "^1.12.0",
-        "sharp": "^0.33.4"
+        "@sentry/sveltekit": "^8.35.0",
+        "h3": "^1.13.0",
+        "sharp": "^0.33.5"
     },
     "devDependencies": {
-        "@appwrite.io/console": "^0.6.2",
+        "@appwrite.io/console": "^0.6.4",
         "@appwrite.io/pink": "~0.26.0",
         "@appwrite.io/pink-icons": "~0.26.0",
         "@appwrite.io/repo": "github:appwrite/appwrite#1.6.x",
         "@internationalized/date": "3.5.0",
         "@melt-ui/pp": "^0.3.2",
         "@melt-ui/svelte": "^0.74.4",
-        "@playwright/test": "^1.44.1",
+        "@playwright/test": "^1.48.1",
         "@sveltejs/adapter-node": "^4.0.1",
         "@sveltejs/enhanced-img": "^0.1.9",
-        "@sveltejs/kit": "^2.5.17",
-        "@sveltejs/vite-plugin-svelte": "^3.1.1",
+        "@sveltejs/kit": "^2.7.2",
+        "@sveltejs/vite-plugin-svelte": "^3.1.2",
         "@tailwindcss/postcss": "4.0.0-alpha.17",
         "@types/compression": "^1.7.5",
         "@types/glob": "^8.1.0",
-        "@types/markdown-it": "^13.0.8",
+        "@types/markdown-it": "^13.0.9",
         "@types/morgan": "^1.9.9",
         "analytics": "^0.8.14",
         "clsx": "^2.1.1",
         "cva": "npm:class-variance-authority@^0.7.0",
         "date-fns": "^3.6.0",
         "dequal": "^2.0.3",
-        "embla-carousel": "^8.1.5",
-        "embla-carousel-svelte": "^8.1.5",
+        "embla-carousel": "^8.3.0",
+        "embla-carousel-auto-scroll": "^8.3.0",
+        "embla-carousel-svelte": "^8.3.0",
         "embla-carousel-wheel-gestures": "^8.0.1",
         "eslint": "^9.7.0",
         "eslint-config-prettier": "^9.1.0",
@@ -66,18 +67,18 @@
         "openapi-types": "^12.1.3",
         "oslllo-svg-fixer": "^3.0.0",
         "plausible-tracker": "^0.3.9",
-        "postcss": "^8.4.39",
+        "postcss": "^8.4.47",
         "prettier": "^3.3.3",
-        "prettier-plugin-svelte": "^3.2.5",
-        "prettier-plugin-tailwindcss": "^0.6.6",
-        "remeda": "^2.10.0",
-        "sass": "^1.77.6",
-        "svelte": "^4.2.18",
-        "svelte-check": "^3.8.1",
-        "svelte-markdoc-preprocess": "^2.0.0",
+        "prettier-plugin-svelte": "^3.2.7",
+        "prettier-plugin-tailwindcss": "^0.6.8",
+        "remeda": "^2.16.0",
+        "sass": "^1.80.3",
+        "svelte": "^4.2.19",
+        "svelte-check": "^3.8.6",
+        "svelte-markdoc-preprocess": "^2.1.0",
         "svelte-markdown": "^0.4.1",
-        "svgtofont": "^4.2.1",
-        "tailwind-merge": "^2.5.2",
+        "svgtofont": "^4.2.2",
+        "tailwind-merge": "^2.5.4",
         "tailwindcss": "4.0.0-alpha.17",
         "tslib": "^2.6.3",
         "typescript": "^5.5.2",

src/app.css

@@ -93,6 +93,18 @@
         }
     }
 
+    @keyframes caret-blink {
+        0%,
+        70%,
+        100% {
+            opacity: 1;
+        }
+        20%,
+        50% {
+            opacity: 0;
+        }
+    }
+
     @keyframes blur {
         0% {
             filter: blur(5px);
@@ -120,6 +132,22 @@
         }
     }
 
+    @keyframes scroll {
+        0% {
+            transform: translateX(0);
+        }
+        100% {
+            transform: translateX(-100%);
+        }
+    }
+
+    /* Animations */
+    --animate-scale-in: scale-in 200ms ease-out forwards;
+    --animate-caret-blink: caret-blink 1s ease-in-out infinite;
+    --animate-text: fade-in 0.75s ease-in-out both, blur 0.75s ease-in-out both,
+        up 0.75s ease-in-out both;
+    --animate-scroll: scroll 60s linear infinite;
+
     /* Fonts */
     --font-family-sans: 'Inter', arial, sans-serif;
     --font-family-mono: 'Fira Code', monospace;
@@ -130,7 +158,7 @@
     /* Font sizes */
     --font-size-micro: 0.75rem;
     --font-size-micro--line-height: 1rem;
-    --font-size-micro--letter-spacing: var(--letter-spacing-loose);
+    --font-size-micro--letter-spacing: var(--letter-spacing-tight);
     --font-size-caption: 0.875rem;
     --font-size-caption--line-height: 1.375rem;
     --font-size-caption--letter-spacing: var(--letter-spacing-tight);
@@ -188,6 +216,7 @@
     --color-primary: var(--color-greyscale-900);
     --color-secondary: var(--color-greyscale-700);
     --color-accent: var(--color-pink-600);
+    --carousel-gradient: transparent;
     --color-badge-bg: var(--color-badge-bg-light);
     --color-badge-border: var(--color-badge-border-light);
 }
@@ -196,6 +225,7 @@
 .dark {
     --color-primary: var(--color-greyscale-100);
     --color-secondary: var(--color-greyscale-300);
+    --carousel-gradient: 23, 23, 26;
     --color-badge-bg: var(--color-badge-bg-dark);
     --color-badge-border: var(--color-badge-border-dark);
 }

src/lib/animations/index.ts

@@ -231,6 +231,20 @@ export function write(text: string, cb: (v: string) => void, duration = 500) {
     });
 }
 
+export function unwrite(text: string, cb: (v: string) => void, duration = 500) {
+    const step = duration / text.length;
+    let i = text.length;
+    return new Promise((resolve) => {
+        const interval = setInterval(() => {
+            cb(text.slice(0, --i));
+            if (i === 0) {
+                clearInterval(interval);
+                resolve(undefined);
+            }
+        }, step);
+    });
+}
+
 export function sleep(duration: number) {
     return new Promise((resolve) => {
         setTimeout(resolve, duration);

src/lib/components/Select.svelte

@@ -115,7 +115,7 @@
                             {#if option.icon}
                                 <span class={option.icon} aria-hidden="true" />
                             {/if}
-                            <span style:text-transform="capitalize">{option.label}</span>
+                            <span>{option.label}</span>
                         </button>
                     {/each}
                 </div>

src/lib/components/carousel/Carousel.svelte

@@ -7,10 +7,17 @@
         type EmblaPluginType
     } from 'embla-carousel';
     import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures';
+    import AutoScrollPlugin, { type AutoScrollOptionsType } from 'embla-carousel-auto-scroll';
 
     let emblaApi: EmblaCarouselType;
 
-    let options: EmblaOptionsType = {
+    export let showGradient: boolean = true;
+    export let showBullets: boolean = true;
+    export let showArrows: boolean = true;
+    export let autoScrollOptions: AutoScrollOptionsType = {
+        active: false
+    };
+    export let options: EmblaOptionsType = {
         align: 'center',
         skipSnaps: true,
         loop: true
@@ -27,7 +34,7 @@
         else hasNext = false;
     };
 
-    let plugins: EmblaPluginType[] = [WheelGesturesPlugin()];
+    let plugins: EmblaPluginType[] = [WheelGesturesPlugin(), AutoScrollPlugin(autoScrollOptions)];
 
     let selectedScrollIndex = 0;
     const onSelect = (index: number) => {
@@ -123,35 +130,63 @@
 </script>
 
 <div class="embla web-carousel relative overflow-hidden">
-    {#if hasPrev}
-        <button class="web-carousel-button web-carousel-button-start" on:click={onPrev}>
-            <span class="web-icon-arrow-left" aria-hidden="true"></span>
-        </button>
-    {/if}
-    {#if hasNext}
-        <button class="web-carousel-button web-carousel-button-end" on:click={onNext}>
-            <span class="web-icon-arrow-right" aria-hidden="true"></span>
-        </button>
+    {#if showArrows}
+        {#if hasPrev}
+            <button class="web-carousel-button web-carousel-button-start" on:click={onPrev}>
+                <span class="web-icon-arrow-left" aria-hidden="true"></span>
+            </button>
+        {/if}
+        {#if hasNext}
+            <button class="web-carousel-button web-carousel-button-end" on:click={onNext}>
+                <span class="web-icon-arrow-right" aria-hidden="true"></span>
+            </button>
+        {/if}
     {/if}
 
     <div class="embla__viewport" use:embla={{ options, plugins }} on:emblaInit={onEmblaInit}>
         <ul class="embla__container flex">
             <slot />
         </ul>
     </div>
+    <div class="shadow" />
 </div>
 
-<div class="web-carousel-bullets">
-    <ul class="web-carousel-bullets-list">
-        {#each Array.from({ length: emblaApi?.scrollSnapList().length }) as _, i}
-            <li class="web-carousel-bullets-item rounded-full">
-                <button
-                    class="web-carousel-bullets-button"
-                    class:is-selected={selectedScrollIndex === i}
-                    aria-label={`gallery item ${i + 1}`}
-                    on:click={() => onSelect(i)}
-                ></button>
-            </li>
-        {/each}
-    </ul>
-</div>
+{#if showBullets}
+    <div class="web-carousel-bullets">
+        <ul class="web-carousel-bullets-list">
+            {#each Array.from({ length: emblaApi?.scrollSnapList().length }) as _, i}
+                <li class="web-carousel-bullets-item rounded-full">
+                    <button
+                        class="web-carousel-bullets-button"
+                        class:is-selected={selectedScrollIndex === i}
+                        aria-label={`gallery item ${i + 1}`}
+                        on:click={() => onSelect(i)}
+                    ></button>
+                </li>
+            {/each}
+        </ul>
+    </div>
+{/if}
+
+<style>
+    .shadow {
+        width: 100vw;
+        height: 80vh;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        pointer-events: none;
+        transform: translateX(-50%) translateY(-50%);
+        z-index: 10;
+        backdrop-filter: blur(2px);
+        background-color: hsl(var(--web-color-background) / 50%);
+        mask-composite: intersect;
+        mask-image: linear-gradient(
+            to right,
+            rgba(0, 0, 0, 1) 0%,
+            transparent,
+            transparent,
+            rgba(0, 0, 0, 1) 100%
+        );
+    }
+</style>

src/lib/components/carousel/CarouselSlide.svelte

@@ -1,4 +1,17 @@
-<li class="slide web-carousel-item">
+<script lang="ts">
+    import { classNames } from '$lib/utils/classnames';
+
+    let className = '';
+
+    export { className as class };
+</script>
+
+<li
+    class={classNames(
+        'slide web-carousel-item mr-2 flex-[0_0_100%] cursor-grab active:cursor-grabbing md:flex-[0_0_50%]',
+        className
+    )}
+>
     <div class="embla__slide__number">
         <slot />
     </div>