performance try?

Author: Jesse Winton

package.json

@@ -24,7 +24,7 @@
         "optimize": "node ./scripts/optimize-assets.js",
         "optimize:all": "node ./scripts/optimize-all.js"
     },
-    "packageManager": "pnpm@10.9.0",
+    "packageManager": "pnpm@10.11.1",
     "dependencies": {
         "h3": "^1.14.0",
         "posthog-js": "^1.210.2",

src/lib/components/ProductsSubmenu.svelte

@@ -77,6 +77,7 @@
     import { trackEvent } from '$lib/actions/analytics';
     import { classNames } from '$lib/utils/classnames';
     import { createDropdownMenu, melt } from '@melt-ui/svelte';
+    import Icon from './ui/icon';
 
     const {
         elements: { trigger, menu, item, overlay },
@@ -171,9 +172,10 @@
                         <a
                             href="/blog/category/customer-stories"
                             class="text-primary text-caption flex items-center gap-2"
-                            >See more <span
-                                class="web-icon-chevron-right transition-transform group-hover:translate-x-0.5"
-                            ></span></a
+                            >Read more customer stories" <Icon
+                                name="chevron-right"
+                                class="transition-transform group-hover:translate-x-0.5"
+                            ></Icon></a
                         >
                     </header>
 

src/routes/(marketing)/(components)/case-studies.svelte

@@ -14,7 +14,7 @@
             blurb: 'A special thanks to Appwrite for providing robust features and seamless functionality.',
             name: 'Hassan Ahmed',
             title: 'Engineer at DevKind',
-            avatar: '/images/testimonials/hassan.jpeg',
+            avatar: '/images/testimonials/hassan.png',
             url: '/blog/post/customer-stories-storealert'
         },
         {

src/routes/(marketing)/(components)/scale.svelte

@@ -3,6 +3,7 @@
     import NumberFlow from '@number-flow/svelte';
     import { inView } from 'motion';
     import { onDestroy, type Snippet } from 'svelte';
+    import { browser } from '$app/environment';
 
     const animationDuration = 3;
 
@@ -128,12 +129,15 @@
         {#each localStats as stat, i}
             <div class="h-full overflow-auto pl-6">
                 <div class="relative">
-                    <NumberFlow
-                        class="text-description text-primary border-accent relative -left-px z-10 border-l pl-4 font-medium"
-                        value={stat.number}
-                        suffix={stat.suffix}
-                    />
-                    <span class="text-body text-secondary block pl-4">{stat.description}</span>
+                    {#if browser}
+                        <NumberFlow
+                            class="text-description text-primary border-accent relative -left-px z-10 border-l pl-4 font-medium"
+                            value={stat.number}
+                            suffix={stat.suffix}
+                        />
+
+                        <span class="text-body text-secondary block pl-4">{stat.description}</span>
+                    {/if}
                 </div>
             </div>
         {/each}
@@ -148,14 +152,16 @@
                             class="absolute"
                             style="bottom: calc(50px + {25 + (75 / 3) * (i / 2)}%)"
                         >
-                            <NumberFlow
-                                class="text-description text-primary border-accent relative -left-px z-100 border-l pl-4 font-medium"
-                                value={stat.number}
-                                suffix={stat.suffix}
-                            />
-                            <span class="text-body text-secondary block pl-4">
-                                {stat.description}
-                            </span>
+                            {#if browser}
+                                <NumberFlow
+                                    class="text-description text-primary border-accent relative -left-px z-100 border-l pl-4 font-medium"
+                                    value={stat.number}
+                                    suffix={stat.suffix}
+                                />
+                                <span class="text-body text-secondary block pl-4">
+                                    {stat.description}
+                                </span>
+                            {/if}
                         </div>
                     </div>
                 {/each}

src/routes/(marketing)/+page.svelte

@@ -35,7 +35,7 @@
     <CaseStudies />
     <Features />
     <div class="light bg-[#EDEDF0]">
-        <Map theme="light" />
+        <!-- <Map theme="light" /> -->
         <Scale
             testimonial={{
                 name: 'Ryan O’Conner',