[Site] Fix Svelte demo HTML

Author: smnandre

ux.symfony.com/assets/svelte/src/components/PackageList.svelte

@@ -7,33 +7,18 @@
 </script>
 
 {#if packages.length === 0}
-    <div class='alert alert-info'>Sad trombone... we haven't built any components that
-        match this search yet!
-    </div>
+    No packages found
 {:else}
-    <div class='row'>
-        {#each packages as uxPackage(uxPackage.name)}
-            <a
-                href='{uxPackage.url}'
-                class='col-12 col-md-4 col-lg-3 mb-2'
-                animate:flip={{duration: transitionDuration}} in:fade={{duration:transitionDuration}}
-            >
-                <div class='components-container p-2'>
-                    <div class='d-flex'>
-                        <div
-                            class='live-component-img d-flex justify-content-center align-items-center'
-                            style='background: {uxPackage.gradient}'>
-                            <img width='17' height='17'
-                                 src='{uxPackage.imageUrl}'
-                                 alt='`Image for the {uxPackage.humanName} UX package`'
-                            />
-                        </div>
-                        <h4 class='ubuntu-title ps-2 align-self-center'>
-                            { uxPackage.humanName }
-                        </h4>
-                    </div>
-                </div>
-            </a>
-        {/each}
-    </div>
+    {#each packages as uxPackage(uxPackage.name)}
+        <div class="PackageListItem"
+            animate:flip={{duration: transitionDuration}} in:fade={{duration:transitionDuration}}
+        >
+            <div class="PackageListItem__icon" style="--gradient: '{uxPackage.gradient}'">
+                <img src='{uxPackage.imageUrl}' alt="Image for the '{uxPackage.humanName}' UX package" />;
+                <h3 class="PackageListItem__title">
+                    <a href='{uxPackage.url}'>{uxPackage.humanName}</a>
+                </h3>
+            </div>
+        </div>
+    {/each}
 {/if}

ux.symfony.com/assets/svelte/src/package.json

@@ -2,13 +2,11 @@
     "devDependencies": {
         "@babel/cli": "^7.25.6",
         "@babel/core": "^7.25.2",
-        "@babel/preset-react": "^7.24.7",
         "svelte": "^3.59.1"
     },
     "license": "MIT",
     "private": true,
     "scripts": {
-        "build": "yarn build-react && yarn build-svelte",
-        "build-svelte": "node bin/compile_svelte.js"
+        "build": "yarn bin/compile_svelte.js"
     }
 }