From eae662224753f045d764cc4e089796786265980a Mon Sep 17 00:00:00 2001
From: Jesse Winton <jesse@appwrite.io>
Date: Fri, 22 Nov 2024 18:25:21 -0500
Subject: [PATCH] update

---
 .../product-pages/testimonials.svelte         | 111 ++++++++++++++++++
 .../storage/(components)/Testimonials.svelte  |  97 ---------------
 src/routes/products/storage/+page.svelte      |   2 +-
 3 files changed, 112 insertions(+), 98 deletions(-)
 create mode 100644 src/lib/components/product-pages/testimonials.svelte
 delete mode 100644 src/routes/products/storage/(components)/Testimonials.svelte

diff --git a/src/lib/components/product-pages/testimonials.svelte b/src/lib/components/product-pages/testimonials.svelte
new file mode 100644
index 0000000000..5233f7f9f1
--- /dev/null
+++ b/src/lib/components/product-pages/testimonials.svelte
@@ -0,0 +1,111 @@
+<script lang="ts">
+    const testimonials = [
+        {
+            name: 'Ryan O’Conner',
+            copy: `The switch to using Appwrite brought infinite value that I'm still discovering today, but a major impact that it made was the amount of time and stress that it saved me as it simply just works.`,
+            image: '/images/testimonials/k-collect.png',
+            title: 'Founder',
+            company: 'K-Collect'
+        },
+        {
+            name: 'David Forster',
+            copy: `We really loved working with Appwrite for launching our bootstrapped "Open Mind" App. I am still surprised how easy the implementation into Flutter was.`,
+            image: '/images/testimonials/open-mind.png',
+            title: 'Founder',
+            company: 'Open Mind'
+        },
+        {
+            name: 'Marius Bolik',
+            copy: `The integrated user authentication and the ease of creating data structures have undoubtedly saved us several weeks' worth of time.`,
+            image: '/images/testimonials/shoefitter.png',
+            title: 'CTO',
+            company: 'mySHOEFITTER'
+        },
+        {
+            name: 'Sergio Ponguta',
+            copy: `Just go for it, don’t think twice. Try Appwrite, and you will love it!`,
+            image: '/images/testimonials/smartbee.png',
+            title: 'Founder',
+            company: 'Smart Bee'
+        },
+        {
+            name: 'Phil McClusky',
+            copy: 'Just like a Swiss Army Knife, you can choose and use the tools that you need with Appwrite.',
+            image: '/images/testimonials/majik.png',
+            title: 'Developer',
+            company: 'Majik Kids'
+        }
+    ];
+</script>
+
+<!-- <div class="relative w-screen overflow-hidden">
+    <div
+        class="light animate-scroll flex w-fit items-center justify-center gap-4 hover:[animation-play-state:paused]"
+        style="--testimonial-length:{testimonials.length}"
+    >
+        {#each Array.from({ length: 4 }) as _}
+            {#each testimonials as testimonial}
+                <div
+                    class="flex w-xl shrink-0 flex-col justify-center rounded-2xl bg-white p-6 transition-all"
+                >
+                    <p class="text-sub-body text-secondary flex-1 font-medium">
+                        {testimonial.copy}
+                    </p>
+
+                    <div class="mt-4 flex items-center gap-3">
+                        <img
+                            src={testimonial.image}
+                            class="size-12 rounded-full"
+                            alt="{testimonial.company} Logo"
+                        />
+                        <div>
+                            <span class="text-secondary text-sub-body block font-medium">
+                                {testimonial.name}
+                            </span>
+                            <span class="text-sub-body text-secondary block"
+                                >{testimonial.title} // {testimonial.company}</span
+                            >
+                        </div>
+                    </div>
+                </div>
+            {/each}
+        {/each}
+    </div>
+</div> -->
+
+<div class="relative my-8 w-full max-w-[100vw] overflow-hidden">
+    <div class="group light flex w-fit gap-4">
+        {#each Array.from({ length: 4 }) as _, i}
+            <div
+                class="animate-scroll flex items-center gap-4 group-hover:[animation-play-state:paused;]"
+                aria-hidden={i !== 0}
+            >
+                {#each testimonials as testimonial}
+                    <div
+                        class="flex h-fit w-lg flex-col justify-center rounded-2xl bg-white p-6 transition-all"
+                    >
+                        <p class="text-sub-body text-secondary flex-1 font-medium">
+                            {testimonial.copy}
+                        </p>
+
+                        <div class="mt-4 flex items-center gap-3">
+                            <img
+                                src={testimonial.image}
+                                class="size-12 rounded-full"
+                                alt="{testimonial.company} Logo"
+                            />
+                            <div>
+                                <span class="text-secondary text-sub-body block font-medium">
+                                    {testimonial.name}
+                                </span>
+                                <span class="text-sub-body text-secondary block"
+                                    >{testimonial.title} // {testimonial.company}</span
+                                >
+                            </div>
+                        </div>
+                    </div>
+                {/each}
+            </div>
+        {/each}
+    </div>
+</div>
diff --git a/src/routes/products/storage/(components)/Testimonials.svelte b/src/routes/products/storage/(components)/Testimonials.svelte
deleted file mode 100644
index 63c4ac5765..0000000000
--- a/src/routes/products/storage/(components)/Testimonials.svelte
+++ /dev/null
@@ -1,97 +0,0 @@
-<script lang="ts">
-    const testimonials = [
-        {
-            name: 'Ryan O’Conner',
-            copy: `The switch to using Appwrite brought infinite value that I'm still discovering today, but a major impact that it made was the amount of time and stress that it saved me as it simply just works.`,
-            image: '/images/community/avatars/kap.png',
-            title: 'Founder',
-            company: 'K-Collect'
-        },
-        {
-            name: 'David Forster',
-            copy: `We really loved working with Appwrite for launching our bootstrapped "Open Mind" App. I am still surprised how easy the implementation into Flutter was.`,
-            image: '/images/community/avatars/kap.png',
-            title: 'Founder',
-            company: 'Open Mind'
-        },
-        {
-            name: 'Marius Bolik',
-            copy: `The integrated user authentication and the ease of creating data structures have undoubtedly saved us several weeks' worth of time.`,
-            image: '/images/community/avatars/kap.png',
-            title: 'CTO',
-            company: 'mySHOEFITTER'
-        },
-        {
-            name: 'Sergio Ponguta',
-            copy: `Just go for it, don’t think twice. Try Appwrite, and you will love it!`,
-            image: '/images/community/avatars/kap.png',
-            title: 'Founder',
-            company: 'Smart Bee'
-        },
-        {
-            name: 'Phil McClusky',
-            copy: 'Just like a Swiss Army Knife, you can choose and use the tools that you need with Appwrite.',
-            image: '/images/community/avatars/kap.png',
-            title: 'Developer',
-            company: 'Majik Kids'
-        }
-    ];
-</script>
-
-<div class="group relative my-8 w-full overflow-clip">
-    <div
-        class="animate-marquee light flex w-max gap-4 pl-4 group-hover:[animation-play-state:paused]"
-    >
-        {#each testimonials as testimonial}
-            <div
-                class="flex h-fit w-lg flex-col justify-center rounded-2xl bg-white p-6 transition-all"
-            >
-                <p class="text-sub-body text-secondary flex-1 font-medium">
-                    {testimonial.copy}
-                </p>
-
-                <div class="mt-4 flex items-center gap-3">
-                    <img
-                        src={testimonial.image}
-                        class="size-12 rounded-full"
-                        alt="{testimonial.company} Logo"
-                    />
-                    <div>
-                        <span class="text-secondary text-sub-body block font-medium">
-                            {testimonial.name}
-                        </span>
-                        <span class="text-sub-body text-secondary block"
-                            >{testimonial.title} // {testimonial.company}</span
-                        >
-                    </div>
-                </div>
-            </div>
-        {/each}
-        {#each testimonials as testimonial}
-            <div
-                aria-hidden="true"
-                class="flex h-fit w-lg flex-col justify-center rounded-2xl bg-white p-6 transition-all"
-            >
-                <p class="text-sub-body text-secondary flex-1 font-medium">
-                    {testimonial.copy}
-                </p>
-
-                <div class="mt-4 flex items-center gap-3">
-                    <img
-                        src={testimonial.image}
-                        class="size-12 rounded-full"
-                        alt="{testimonial.company} Logo"
-                    />
-                    <div>
-                        <span class="text-secondary text-sub-body block font-medium">
-                            {testimonial.name}
-                        </span>
-                        <span class="text-sub-body text-secondary block"
-                            >{testimonial.title} // {testimonial.company}</span
-                        >
-                    </div>
-                </div>
-            </div>
-        {/each}
-    </div>
-</div>
diff --git a/src/routes/products/storage/+page.svelte b/src/routes/products/storage/+page.svelte
index 3e410b3b23..c09e6fc655 100644
--- a/src/routes/products/storage/+page.svelte
+++ b/src/routes/products/storage/+page.svelte
@@ -6,11 +6,11 @@
     import { DEFAULT_DESCRIPTION, DEFAULT_HOST } from '$lib/utils/metadata';
     import { TITLE_SUFFIX } from '$routes/titles';
     import Permissions from './(components)/Permissions.svelte';
-    import Testimonials from './(components)/Testimonials.svelte';
     import PreviewFiles from './(components)/PreviewFiles.svelte';
     import WhatYouCanDo from './(components)/WhatYouCanDo.svelte';
     import OpenSource from './(components)/OpenSource.svelte';
     import Hero from '$lib/components/product-pages/hero.svelte';
+    import Testimonials from '$lib/components/product-pages/testimonials.svelte';
     import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
     import HeroImage from './(assets)/hero-image.png';
     import ProductCards from '$lib/components/product-pages/product-cards.svelte';