From fb738b8a1f99fab7a80dcf14735c3b2e906837e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20Andr=C3=A9?= <smn.andre@gmail.com>
Date: Mon, 11 Sep 2023 17:26:25 +0200
Subject: [PATCH] [Site] Isolate packages/demo structure

---
 .../AutocompleteFormRenderingTest.php         |   1 -
 .../{chartjs_updating.png => chartjs.png}     | Bin
 .../{inline_edit.png => inline-edit.png}      | Bin
 .../{product_form.png => product-form.png}    | Bin
 .../images/{ => ux_packages}/autocomplete.png | Bin
 .../images/{ => ux_packages}/chartjs.png      | Bin
 .../images/{ => ux_packages}/cropperjs.png    | Bin
 .../images/{ => ux_packages}/dropzone.png     | Bin
 .../{ => ux_packages}/form-collection.png     | Bin
 .../images/{ => ux_packages}/lazy-image.png   | Bin
 .../{ => ux_packages}/live-component.png      | Bin
 .../images/{ => ux_packages}/notify.png       | Bin
 .../assets/images/{ => ux_packages}/react.png | Bin
 .../images/{ => ux_packages}/svelte.svg       |   0
 .../assets/images/{ => ux_packages}/swup.png  | Bin
 .../{ => ux_packages}/toggle-password.png     | Bin
 .../images/{ => ux_packages}/translator.svg   |   0
 .../assets/images/{ => ux_packages}/turbo.png | Bin
 .../{ => ux_packages}/twig-component.png      | Bin
 .../assets/images/{ => ux_packages}/typed.png | Bin
 .../assets/images/{ => ux_packages}/vue.png   | Bin
 .../assets/styles/sections/_nav.scss          |  12 --
 ux.symfony.com/config/routes.yaml             |   2 +-
 ux.symfony.com/src/Controller/.gitignore      |   0
 .../LiveComponentDemoController.php           |  54 +++---
 .../src/Controller/DemosController.php        |  19 ++
 .../Controller/LiveComponentController.php    |  19 --
 .../src/Controller/MainController.php         |  21 +--
 .../UxPackage/AutocompleteController.php      |  73 ++++++++
 .../ChartjsController.php}                    |  14 +-
 .../CropperjsController.php}                  |  24 ++-
 .../UxPackage/DropzoneController.php          |  32 ++++
 .../UxPackage/LazyImageController.php         |  23 +++
 .../UxPackage/LiveComponentController.php     |  38 ++++
 .../NotifyController.php}                     |  14 +-
 .../Controller/UxPackage/ReactController.php  |  23 +++
 .../Controller/UxPackage/SvelteController.php |  23 +++
 .../{ => UxPackage}/SwupController.php        |  11 +-
 .../UxPackage/TogglePasswordController.php    |  23 +++
 .../UxPackage/TranslatorController.php        |  21 +++
 .../{ => UxPackage}/TurboController.php       | 132 +++++++-------
 .../UxPackage/TwigComponentController.php     |  21 +++
 .../Controller/UxPackage/TypedController.php  |  21 +++
 .../Controller/UxPackage/VueController.php    |  23 +++
 .../src/Controller/UxPackagesController.php   | 168 ++----------------
 ux.symfony.com/src/Entity/.gitignore          |   0
 .../src/Model/{Package.php => UxPackage.php}  |   2 +-
 ux.symfony.com/src/Repository/.gitignore      |   0
 .../src/Serializer/UxPackageNormalizer.php    |  44 +++++
 .../src/Service/LiveDemoRepository.php        |  24 +--
 ux.symfony.com/src/Service/PackageContext.php |   6 +-
 .../src/Service/TwigPackageHelper.php         |   8 +-
 .../src/Service/UxPackageDataProvider.php     |  21 +++
 ...Repository.php => UxPackageRepository.php} |  52 +++---
 ux.symfony.com/src/Twig/Alert.php             |   6 +-
 ux.symfony.com/src/Twig/CodeBlock.php         |   5 +-
 ux.symfony.com/src/Twig/DinoChart.php         |   2 +-
 ux.symfony.com/src/Twig/DocsLink.php          |   2 +-
 ux.symfony.com/src/Twig/FoodVote.php          |   2 +-
 .../src/Twig/HomepageTerminalSwapper.php      |   6 +-
 ux.symfony.com/src/Twig/Icon.php              |   2 +-
 ux.symfony.com/src/Twig/InlineEditFood.php    |   2 +-
 ux.symfony.com/src/Twig/InvoiceCreator.php    |   2 +-
 .../src/Twig/InvoiceCreatorLineItem.php       |   4 +-
 ux.symfony.com/src/Twig/MealPlanner.php       |   2 +-
 ux.symfony.com/src/Twig/PackageBox.php        |   6 +-
 ux.symfony.com/src/Twig/PackageHeader.php     |  10 +-
 ux.symfony.com/src/Twig/RegistrationForm.php  |   2 +-
 ux.symfony.com/src/Twig/SearchPackages.php    |   6 +-
 ux.symfony.com/src/Twig/Terminal.php          |   2 +-
 ux.symfony.com/src/Twig/TodoListForm.php      |   2 +-
 ux.symfony.com/src/Twig/UploadFiles.php       |   2 +-
 ux.symfony.com/templates/_header.html.twig    |   4 +-
 ux.symfony.com/templates/_nav.html.twig       |   7 +-
 .../templates/components/Alert.html.twig      |   2 +-
 .../templates/components/CodeBlock.html.twig  |  10 +-
 .../CodeBlockButtons.html.twig}               |   2 +
 .../templates/components/PackageBox.html.twig |   2 +-
 .../components/PackageHeader.html.twig        |   2 +-
 .../templates/demos/live_component.html.twig  |  46 +++++
 .../auto_validating_form.html.twig            |   0
 .../live_component}/chartjs.html.twig         |   0
 .../dependent_form_fields.html.twig           |   0
 .../form_collection_type.html.twig            |   0
 .../live_component}/inline_edit.html.twig     |   0
 .../live_component}/invoice.html.twig         |   0
 .../live_component}/product_form.html.twig    |   0
 .../live_component}/upload.html.twig          |   0
 .../live_component}/voting.html.twig          |   0
 .../templates/liveDemoBase.html.twig          |   6 +-
 .../templates/main/_demoBox.html.twig         |   8 -
 .../templates/main/_package_in_list.html.twig |   2 +-
 .../templates/main/_packagesList.html.twig    |   6 -
 ux.symfony.com/templates/main/demos.html.twig |  36 ++++
 .../templates/main/homepage.html.twig         |   4 +-
 .../templates/main/packages.html.twig         |   9 +-
 .../templates/packageBase.html.twig           |  69 +++----
 .../ux_packages/_package_demo.html.twig       |   9 +
 .../_package_install.html.twig}               |   0
 .../_package_links.html.twig}                 |  18 +-
 .../{chart => ux_packages}/chartjs.html.twig  |   4 +-
 .../cropperjs.html.twig}                      |   4 +-
 .../live_component.html.twig                  |   5 +-
 .../notify.html.twig                          |   4 +-
 .../templates/ux_packages/svelte.html.twig    |   2 +-
 .../{swup => ux_packages}/swup.html.twig      |   4 +-
 .../{turbo => ux_packages}/turbo.html.twig    |  46 ++---
 .../turbo/_chatForm.html.twig                 |   0
 .../turbo/_chatList.html.twig                 |   0
 .../turbo/_chatMessageCount.html.twig         |   0
 .../turbo/_demo_message.html.twig             |   0
 .../turbo/add_todo.html.twig                  |   2 +-
 .../all_users_chat_success.stream.html.twig   |   4 +-
 .../turbo/chat_success.stream.html.twig       |   2 +-
 .../{ => ux_packages}/turbo/todos.html.twig   |   2 +-
 .../tests/Functional/RedirectUrlTest.php      |  35 ++++
 .../tests/Functional/UxPackagesTest.php       |   8 +-
 117 files changed, 871 insertions(+), 527 deletions(-)
 rename ux.symfony.com/assets/images/live_demo/{chartjs_updating.png => chartjs.png} (100%)
 rename ux.symfony.com/assets/images/live_demo/{inline_edit.png => inline-edit.png} (100%)
 rename ux.symfony.com/assets/images/live_demo/{product_form.png => product-form.png} (100%)
 rename ux.symfony.com/assets/images/{ => ux_packages}/autocomplete.png (100%)
 rename ux.symfony.com/assets/images/{ => ux_packages}/chartjs.png (100%)
 rename ux.symfony.com/assets/images/{ => ux_packages}/cropperjs.png (100%)
 rename ux.symfony.com/assets/images/{ => ux_packages}/dropzone.png (100%)
 rename ux.symfony.com/assets/images/{ => ux_packages}/form-collection.png (100%)
 rename ux.symfony.com/assets/images/{ => ux_packages}/lazy-image.png (100%)
 rename ux.symfony.com/assets/images/{ => ux_packages}/live-component.png (100%)
 rename ux.symfony.com/assets/images/{ => ux_packages}/notify.png (100%)
 rename ux.symfony.com/assets/images/{ => ux_packages}/react.png (100%)
 rename ux.symfony.com/assets/images/{ => ux_packages}/svelte.svg (100%)
 rename ux.symfony.com/assets/images/{ => ux_packages}/swup.png (100%)
 rename ux.symfony.com/assets/images/{ => ux_packages}/toggle-password.png (100%)
 rename ux.symfony.com/assets/images/{ => ux_packages}/translator.svg (100%)
 rename ux.symfony.com/assets/images/{ => ux_packages}/turbo.png (100%)
 rename ux.symfony.com/assets/images/{ => ux_packages}/twig-component.png (100%)
 rename ux.symfony.com/assets/images/{ => ux_packages}/typed.png (100%)
 rename ux.symfony.com/assets/images/{ => ux_packages}/vue.png (100%)
 delete mode 100644 ux.symfony.com/src/Controller/.gitignore
 rename ux.symfony.com/src/Controller/{ => Demo}/LiveComponentDemoController.php (61%)
 create mode 100644 ux.symfony.com/src/Controller/DemosController.php
 delete mode 100644 ux.symfony.com/src/Controller/LiveComponentController.php
 create mode 100644 ux.symfony.com/src/Controller/UxPackage/AutocompleteController.php
 rename ux.symfony.com/src/Controller/{ChartController.php => UxPackage/ChartjsController.php} (76%)
 rename ux.symfony.com/src/Controller/{CropperController.php => UxPackage/CropperjsController.php} (66%)
 create mode 100644 ux.symfony.com/src/Controller/UxPackage/DropzoneController.php
 create mode 100644 ux.symfony.com/src/Controller/UxPackage/LazyImageController.php
 create mode 100644 ux.symfony.com/src/Controller/UxPackage/LiveComponentController.php
 rename ux.symfony.com/src/Controller/{NotifierController.php => UxPackage/NotifyController.php} (74%)
 create mode 100644 ux.symfony.com/src/Controller/UxPackage/ReactController.php
 create mode 100644 ux.symfony.com/src/Controller/UxPackage/SvelteController.php
 rename ux.symfony.com/src/Controller/{ => UxPackage}/SwupController.php (64%)
 create mode 100644 ux.symfony.com/src/Controller/UxPackage/TogglePasswordController.php
 create mode 100644 ux.symfony.com/src/Controller/UxPackage/TranslatorController.php
 rename ux.symfony.com/src/Controller/{ => UxPackage}/TurboController.php (83%)
 create mode 100644 ux.symfony.com/src/Controller/UxPackage/TwigComponentController.php
 create mode 100644 ux.symfony.com/src/Controller/UxPackage/TypedController.php
 create mode 100644 ux.symfony.com/src/Controller/UxPackage/VueController.php
 delete mode 100644 ux.symfony.com/src/Entity/.gitignore
 rename ux.symfony.com/src/Model/{Package.php => UxPackage.php} (99%)
 delete mode 100644 ux.symfony.com/src/Repository/.gitignore
 create mode 100644 ux.symfony.com/src/Serializer/UxPackageNormalizer.php
 create mode 100644 ux.symfony.com/src/Service/UxPackageDataProvider.php
 rename ux.symfony.com/src/Service/{PackageRepository.php => UxPackageRepository.php} (87%)
 rename ux.symfony.com/templates/{partials/code-block-buttons.html.twig => components/CodeBlockButtons.html.twig} (96%)
 create mode 100644 ux.symfony.com/templates/demos/live_component.html.twig
 rename ux.symfony.com/templates/{live_component_demo => demos/live_component}/auto_validating_form.html.twig (100%)
 rename ux.symfony.com/templates/{live_component_demo => demos/live_component}/chartjs.html.twig (100%)
 rename ux.symfony.com/templates/{live_component_demo => demos/live_component}/dependent_form_fields.html.twig (100%)
 rename ux.symfony.com/templates/{live_component_demo => demos/live_component}/form_collection_type.html.twig (100%)
 rename ux.symfony.com/templates/{live_component_demo => demos/live_component}/inline_edit.html.twig (100%)
 rename ux.symfony.com/templates/{live_component_demo => demos/live_component}/invoice.html.twig (100%)
 rename ux.symfony.com/templates/{live_component_demo => demos/live_component}/product_form.html.twig (100%)
 rename ux.symfony.com/templates/{live_component_demo => demos/live_component}/upload.html.twig (100%)
 rename ux.symfony.com/templates/{live_component_demo => demos/live_component}/voting.html.twig (100%)
 delete mode 100644 ux.symfony.com/templates/main/_demoBox.html.twig
 delete mode 100644 ux.symfony.com/templates/main/_packagesList.html.twig
 create mode 100644 ux.symfony.com/templates/main/demos.html.twig
 create mode 100644 ux.symfony.com/templates/ux_packages/_package_demo.html.twig
 rename ux.symfony.com/templates/{main/_installTerminal.html.twig => ux_packages/_package_install.html.twig} (100%)
 rename ux.symfony.com/templates/{main/_documentationLinks.html.twig => ux_packages/_package_links.html.twig} (52%)
 rename ux.symfony.com/templates/{chart => ux_packages}/chartjs.html.twig (86%)
 rename ux.symfony.com/templates/{cropper/cropper.html.twig => ux_packages/cropperjs.html.twig} (93%)
 rename ux.symfony.com/templates/{live_component => ux_packages}/live_component.html.twig (96%)
 rename ux.symfony.com/templates/{notifier => ux_packages}/notify.html.twig (87%)
 rename ux.symfony.com/templates/{swup => ux_packages}/swup.html.twig (92%)
 rename ux.symfony.com/templates/{turbo => ux_packages}/turbo.html.twig (86%)
 rename ux.symfony.com/templates/{ => ux_packages}/turbo/_chatForm.html.twig (100%)
 rename ux.symfony.com/templates/{ => ux_packages}/turbo/_chatList.html.twig (100%)
 rename ux.symfony.com/templates/{ => ux_packages}/turbo/_chatMessageCount.html.twig (100%)
 rename ux.symfony.com/templates/{ => ux_packages}/turbo/_demo_message.html.twig (100%)
 rename ux.symfony.com/templates/{ => ux_packages}/turbo/add_todo.html.twig (91%)
 rename ux.symfony.com/templates/{ => ux_packages}/turbo/all_users_chat_success.stream.html.twig (60%)
 rename ux.symfony.com/templates/{ => ux_packages}/turbo/chat_success.stream.html.twig (60%)
 rename ux.symfony.com/templates/{ => ux_packages}/turbo/todos.html.twig (93%)
 create mode 100644 ux.symfony.com/tests/Functional/RedirectUrlTest.php

diff --git a/src/Autocomplete/tests/Functional/AutocompleteFormRenderingTest.php b/src/Autocomplete/tests/Functional/AutocompleteFormRenderingTest.php
index e430ca11080..4b1cea58d08 100644
--- a/src/Autocomplete/tests/Functional/AutocompleteFormRenderingTest.php
+++ b/src/Autocomplete/tests/Functional/AutocompleteFormRenderingTest.php
@@ -64,7 +64,6 @@ public function testCategoryFieldSubmitsCorrectly()
             // so ONLY the placeholder shows up
             ->assertElementCount('#product_category_autocomplete option', 1)
             ->assertNotContains('First cat')
-
             ->post('/test-form', [
                 'body' => [
                     'product' => ['category' => ['autocomplete' => $fooCat->getId()]],
diff --git a/ux.symfony.com/assets/images/live_demo/chartjs_updating.png b/ux.symfony.com/assets/images/live_demo/chartjs.png
similarity index 100%
rename from ux.symfony.com/assets/images/live_demo/chartjs_updating.png
rename to ux.symfony.com/assets/images/live_demo/chartjs.png
diff --git a/ux.symfony.com/assets/images/live_demo/inline_edit.png b/ux.symfony.com/assets/images/live_demo/inline-edit.png
similarity index 100%
rename from ux.symfony.com/assets/images/live_demo/inline_edit.png
rename to ux.symfony.com/assets/images/live_demo/inline-edit.png
diff --git a/ux.symfony.com/assets/images/live_demo/product_form.png b/ux.symfony.com/assets/images/live_demo/product-form.png
similarity index 100%
rename from ux.symfony.com/assets/images/live_demo/product_form.png
rename to ux.symfony.com/assets/images/live_demo/product-form.png
diff --git a/ux.symfony.com/assets/images/autocomplete.png b/ux.symfony.com/assets/images/ux_packages/autocomplete.png
similarity index 100%
rename from ux.symfony.com/assets/images/autocomplete.png
rename to ux.symfony.com/assets/images/ux_packages/autocomplete.png
diff --git a/ux.symfony.com/assets/images/chartjs.png b/ux.symfony.com/assets/images/ux_packages/chartjs.png
similarity index 100%
rename from ux.symfony.com/assets/images/chartjs.png
rename to ux.symfony.com/assets/images/ux_packages/chartjs.png
diff --git a/ux.symfony.com/assets/images/cropperjs.png b/ux.symfony.com/assets/images/ux_packages/cropperjs.png
similarity index 100%
rename from ux.symfony.com/assets/images/cropperjs.png
rename to ux.symfony.com/assets/images/ux_packages/cropperjs.png
diff --git a/ux.symfony.com/assets/images/dropzone.png b/ux.symfony.com/assets/images/ux_packages/dropzone.png
similarity index 100%
rename from ux.symfony.com/assets/images/dropzone.png
rename to ux.symfony.com/assets/images/ux_packages/dropzone.png
diff --git a/ux.symfony.com/assets/images/form-collection.png b/ux.symfony.com/assets/images/ux_packages/form-collection.png
similarity index 100%
rename from ux.symfony.com/assets/images/form-collection.png
rename to ux.symfony.com/assets/images/ux_packages/form-collection.png
diff --git a/ux.symfony.com/assets/images/lazy-image.png b/ux.symfony.com/assets/images/ux_packages/lazy-image.png
similarity index 100%
rename from ux.symfony.com/assets/images/lazy-image.png
rename to ux.symfony.com/assets/images/ux_packages/lazy-image.png
diff --git a/ux.symfony.com/assets/images/live-component.png b/ux.symfony.com/assets/images/ux_packages/live-component.png
similarity index 100%
rename from ux.symfony.com/assets/images/live-component.png
rename to ux.symfony.com/assets/images/ux_packages/live-component.png
diff --git a/ux.symfony.com/assets/images/notify.png b/ux.symfony.com/assets/images/ux_packages/notify.png
similarity index 100%
rename from ux.symfony.com/assets/images/notify.png
rename to ux.symfony.com/assets/images/ux_packages/notify.png
diff --git a/ux.symfony.com/assets/images/react.png b/ux.symfony.com/assets/images/ux_packages/react.png
similarity index 100%
rename from ux.symfony.com/assets/images/react.png
rename to ux.symfony.com/assets/images/ux_packages/react.png
diff --git a/ux.symfony.com/assets/images/svelte.svg b/ux.symfony.com/assets/images/ux_packages/svelte.svg
similarity index 100%
rename from ux.symfony.com/assets/images/svelte.svg
rename to ux.symfony.com/assets/images/ux_packages/svelte.svg
diff --git a/ux.symfony.com/assets/images/swup.png b/ux.symfony.com/assets/images/ux_packages/swup.png
similarity index 100%
rename from ux.symfony.com/assets/images/swup.png
rename to ux.symfony.com/assets/images/ux_packages/swup.png
diff --git a/ux.symfony.com/assets/images/toggle-password.png b/ux.symfony.com/assets/images/ux_packages/toggle-password.png
similarity index 100%
rename from ux.symfony.com/assets/images/toggle-password.png
rename to ux.symfony.com/assets/images/ux_packages/toggle-password.png
diff --git a/ux.symfony.com/assets/images/translator.svg b/ux.symfony.com/assets/images/ux_packages/translator.svg
similarity index 100%
rename from ux.symfony.com/assets/images/translator.svg
rename to ux.symfony.com/assets/images/ux_packages/translator.svg
diff --git a/ux.symfony.com/assets/images/turbo.png b/ux.symfony.com/assets/images/ux_packages/turbo.png
similarity index 100%
rename from ux.symfony.com/assets/images/turbo.png
rename to ux.symfony.com/assets/images/ux_packages/turbo.png
diff --git a/ux.symfony.com/assets/images/twig-component.png b/ux.symfony.com/assets/images/ux_packages/twig-component.png
similarity index 100%
rename from ux.symfony.com/assets/images/twig-component.png
rename to ux.symfony.com/assets/images/ux_packages/twig-component.png
diff --git a/ux.symfony.com/assets/images/typed.png b/ux.symfony.com/assets/images/ux_packages/typed.png
similarity index 100%
rename from ux.symfony.com/assets/images/typed.png
rename to ux.symfony.com/assets/images/ux_packages/typed.png
diff --git a/ux.symfony.com/assets/images/vue.png b/ux.symfony.com/assets/images/ux_packages/vue.png
similarity index 100%
rename from ux.symfony.com/assets/images/vue.png
rename to ux.symfony.com/assets/images/ux_packages/vue.png
diff --git a/ux.symfony.com/assets/styles/sections/_nav.scss b/ux.symfony.com/assets/styles/sections/_nav.scss
index 3648187263f..8c4d5ae482e 100644
--- a/ux.symfony.com/assets/styles/sections/_nav.scss
+++ b/ux.symfony.com/assets/styles/sections/_nav.scss
@@ -47,18 +47,6 @@
   }
 }
 
-.AppNav_separator {
-  display: flex;
-  color: inherit;
-  width: 2px;
-  border-radius: 1px;
-  height: 1rem;
-  margin: 0;
-  border-left: 1px dashed var(--text-color);
-  opacity: .5;
-  display: none; // TODO remove if ok
-}
-
 .nav-component-img {
   height: 22px;
   width: 22px;
diff --git a/ux.symfony.com/config/routes.yaml b/ux.symfony.com/config/routes.yaml
index 5b102f60eff..04c438dbf6d 100644
--- a/ux.symfony.com/config/routes.yaml
+++ b/ux.symfony.com/config/routes.yaml
@@ -1,6 +1,6 @@
 controllers:
     resource: ../src/Controller/
-    type: annotation
+    type: attribute
 
 kernel:
     resource: ../src/Kernel.php
diff --git a/ux.symfony.com/src/Controller/.gitignore b/ux.symfony.com/src/Controller/.gitignore
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/ux.symfony.com/src/Controller/LiveComponentDemoController.php b/ux.symfony.com/src/Controller/Demo/LiveComponentDemoController.php
similarity index 61%
rename from ux.symfony.com/src/Controller/LiveComponentDemoController.php
rename to ux.symfony.com/src/Controller/Demo/LiveComponentDemoController.php
index 78c0697961c..48ad88427b0 100644
--- a/ux.symfony.com/src/Controller/LiveComponentDemoController.php
+++ b/ux.symfony.com/src/Controller/Demo/LiveComponentDemoController.php
@@ -1,6 +1,6 @@
 <?php
 
-namespace App\Controller;
+namespace App\Controller\Demo;
 
 use App\Entity\Invoice;
 use App\Entity\TodoItem;
@@ -14,18 +14,24 @@
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Annotation\Route;
 
-#[Route('/live-component/demos')]
+#[Route('/demos/live-component')]
 class LiveComponentDemoController extends AbstractController
 {
-    #[Route('/auto-validating-form', name: 'app_live_components_demo_auto_validating_form')]
+    #[Route('/', name: 'app_demo_live_component')]
+    public function __invoke(): Response
+    {
+        return $this->redirectToRoute('app_demos');
+    }
+
+    #[Route('/auto-validating-form', name: 'app_demo_live_component_auto_validating_form')]
     public function demoAutoValidatingForm(LiveDemoRepository $liveDemoRepository): Response
     {
-        return $this->render('live_component_demo/auto_validating_form.html.twig', [
+        return $this->render('demos/live_component/auto_validating_form.html.twig', [
             'demo' => $liveDemoRepository->find('auto-validating-form'),
         ]);
     }
 
-    #[Route('/form-collection-type/{id}', name: 'app_live_components_demo_form_collection_type', defaults: ['id' => null])]
+    #[Route('/form-collection-type/{id}', name: 'app_demo_live_component_form_collection_type', defaults: ['id' => null])]
     public function demoFormCollectionType(LiveDemoRepository $liveDemoRepository, Request $request, TodoListRepository $todoListRepository, TodoList $todoList = null): Response
     {
         if (!$todoList) {
@@ -39,36 +45,36 @@ public function demoFormCollectionType(LiveDemoRepository $liveDemoRepository, R
             $todoListRepository->add($form->getData(), true);
             $this->addFlash('live_demo_success', 'Excellent! With this to-do list, I won’t miss anything.');
 
-            return $this->redirectToRoute('app_live_components_demo_form_collection_type', [
+            return $this->redirectToRoute('app_demo_live_component_form_collection_type', [
                 'id' => $todoList->getId(),
             ]);
         }
 
-        return $this->render('live_component_demo/form_collection_type.html.twig', [
+        return $this->render('demos/live_component/form_collection_type.html.twig', [
             'form' => $form,
             'todoList' => $todoList,
             'demo' => $liveDemoRepository->find('form-collection-type'),
         ]);
     }
 
-    #[Route('/dependent-form-fields', name: 'app_live_components_demo_dependent_form_fields')]
+    #[Route('/dependent-form-fields', name: 'app_demo_live_component_dependent_form_fields')]
     public function demoDependentFormFields(LiveDemoRepository $liveDemoRepository): Response
     {
-        return $this->render('live_component_demo/dependent_form_fields.html.twig', [
+        return $this->render('demos/live_component/dependent_form_fields.html.twig', [
             'demo' => $liveDemoRepository->find('dependent-form-fields'),
         ]);
     }
 
-    #[Route('/voting', name: 'app_live_components_demo_voting')]
+    #[Route('/voting', name: 'app_demo_live_component_voting')]
     public function demoVoting(LiveDemoRepository $liveDemoRepository, FoodRepository $foodRepository): Response
     {
-        return $this->render('live_component_demo/voting.html.twig', [
+        return $this->render('demos/live_component/voting.html.twig', [
             'demo' => $liveDemoRepository->find('voting'),
             'foods' => $foodRepository->findAll(),
         ]);
     }
 
-    #[Route('/inline-edit', name: 'app_live_components_demo_inline_edit')]
+    #[Route('/inline-edit', name: 'app_demo_live_component_inline_edit')]
     public function inlineEdit(LiveDemoRepository $liveDemoRepository, FoodRepository $foodRepository): Response
     {
         $food = $foodRepository->findOneBy([]);
@@ -76,43 +82,43 @@ public function inlineEdit(LiveDemoRepository $liveDemoRepository, FoodRepositor
             throw $this->createNotFoundException('No food found - try running "php bin/console app:load-data"');
         }
 
-        return $this->render('live_component_demo/inline_edit.html.twig', parameters: [
-            'demo' => $liveDemoRepository->find('inline_edit'),
+        return $this->render('demos/live_component/inline_edit.html.twig', parameters: [
+            'demo' => $liveDemoRepository->find('inline-edit'),
             'food' => $foodRepository->findOneBy([]),
         ]);
     }
 
-    #[Route('/chartjs', name: 'app_live_components_demo_chartjs')]
+    #[Route('/chartjs', name: 'app_demo_live_component_chartjs')]
     public function chartJs(LiveDemoRepository $liveDemoRepository): Response
     {
-        return $this->render('live_component_demo/chartjs.html.twig', parameters: [
-            'demo' => $liveDemoRepository->find('chartjs_updating'),
+        return $this->render('demos/live_component/chartjs.html.twig', parameters: [
+            'demo' => $liveDemoRepository->find('chartjs'),
         ]);
     }
 
-    #[Route('/invoice/{id}', name: 'app_live_components_invoice', defaults: ['id' => null])]
+    #[Route('/invoice/{id}', name: 'app_demo_live_component_invoice', defaults: ['id' => null])]
     public function invoice(LiveDemoRepository $liveDemoRepository, Invoice $invoice = null): Response
     {
         $invoice = $invoice ?? new Invoice();
 
-        return $this->render('live_component_demo/invoice.html.twig', parameters: [
+        return $this->render('demos/live_component/invoice.html.twig', parameters: [
             'demo' => $liveDemoRepository->find('invoice'),
             'invoice' => $invoice,
         ]);
     }
 
-    #[Route('/product-form', name: 'app_live_components_product_form')]
+    #[Route('/product-form', name: 'app_demo_live_component_product_form')]
     public function productForm(LiveDemoRepository $liveDemoRepository): Response
     {
-        return $this->render('live_component_demo/product_form.html.twig', parameters: [
-            'demo' => $liveDemoRepository->find('product_form'),
+        return $this->render('demos/live_component/product_form.html.twig', parameters: [
+            'demo' => $liveDemoRepository->find('product-form'),
         ]);
     }
 
-    #[Route('/upload', name: 'app_live_components_upload')]
+    #[Route('/upload', name: 'app_demo_live_component_upload')]
     public function uploadFiles(LiveDemoRepository $liveDemoRepository): Response
     {
-        return $this->render('live_component_demo/upload.html.twig', parameters: [
+        return $this->render('demos/live_component/upload.html.twig', parameters: [
             'demo' => $liveDemoRepository->find('upload'),
         ]);
     }
diff --git a/ux.symfony.com/src/Controller/DemosController.php b/ux.symfony.com/src/Controller/DemosController.php
new file mode 100644
index 00000000000..6e0435a0b8f
--- /dev/null
+++ b/ux.symfony.com/src/Controller/DemosController.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Controller;
+
+use App\Service\LiveDemoRepository;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Annotation\Route;
+
+class DemosController extends AbstractController
+{
+    #[Route('/demos', name: 'app_demos')]
+    public function __invoke(LiveDemoRepository $liveDemoRepository): Response
+    {
+        return $this->render('main/demos.html.twig', [
+            'liveComponentDemos' => $liveDemoRepository->findAll(),
+        ]);
+    }
+}
diff --git a/ux.symfony.com/src/Controller/LiveComponentController.php b/ux.symfony.com/src/Controller/LiveComponentController.php
deleted file mode 100644
index cadb137fae5..00000000000
--- a/ux.symfony.com/src/Controller/LiveComponentController.php
+++ /dev/null
@@ -1,19 +0,0 @@
-<?php
-
-namespace App\Controller;
-
-use App\Service\LiveDemoRepository;
-use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
-use Symfony\Component\HttpFoundation\Response;
-use Symfony\Component\Routing\Annotation\Route;
-
-class LiveComponentController extends AbstractController
-{
-    #[Route('/live-component', name: 'app_live_component')]
-    public function liveComponent(LiveDemoRepository $liveDemoRepository): Response
-    {
-        return $this->render('live_component/live_component.html.twig', [
-            'demos' => $liveDemoRepository->findAll(),
-        ]);
-    }
-}
diff --git a/ux.symfony.com/src/Controller/MainController.php b/ux.symfony.com/src/Controller/MainController.php
index d9057fc1a02..133b0f3963d 100644
--- a/ux.symfony.com/src/Controller/MainController.php
+++ b/ux.symfony.com/src/Controller/MainController.php
@@ -3,16 +3,15 @@
 namespace App\Controller;
 
 use App\Model\RecipeFileTree;
-use App\Service\PackageRepository;
+use App\Service\UxPackageRepository;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
-use Symfony\Component\HttpFoundation\RedirectResponse;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Annotation\Route;
 
 class MainController extends AbstractController
 {
     #[Route('/', name: 'app_homepage')]
-    public function homepage(PackageRepository $packageRepository): Response
+    public function homepage(UxPackageRepository $packageRepository): Response
     {
         $packages = $packageRepository->findAll();
 
@@ -21,20 +20,4 @@ public function homepage(PackageRepository $packageRepository): Response
             'recipeFileTree' => new RecipeFileTree(),
         ]);
     }
-
-    #[Route('/packages', name: 'app_all_packages')]
-    public function allPackages(PackageRepository $packageRepository): Response
-    {
-        $packages = $packageRepository->findAll();
-
-        return $this->render('main/packages.html.twig', [
-            'packages' => $packages,
-        ]);
-    }
-
-    #[Route('/components')]
-    public function componentsRedirect(): RedirectResponse
-    {
-        return $this->redirectToRoute('app_all_packages', [], Response::HTTP_MOVED_PERMANENTLY);
-    }
 }
diff --git a/ux.symfony.com/src/Controller/UxPackage/AutocompleteController.php b/ux.symfony.com/src/Controller/UxPackage/AutocompleteController.php
new file mode 100644
index 00000000000..eb62c98af8c
--- /dev/null
+++ b/ux.symfony.com/src/Controller/UxPackage/AutocompleteController.php
@@ -0,0 +1,73 @@
+<?php
+
+namespace App\Controller\UxPackage;
+
+use App\Entity\Food;
+use App\Form\TimeForAMealForm;
+use App\Service\UxPackageRepository;
+use Doctrine\Common\Collections\Collection;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Annotation\Route;
+
+class AutocompleteController extends AbstractController
+{
+    #[Route('/autocomplete', name: 'app_autocomplete')]
+    public function __invoke(UxPackageRepository $packageRepository, Request $request): Response
+    {
+        $package = $packageRepository->find('autocomplete');
+
+        $form = $this->createForm(TimeForAMealForm::class);
+
+        $form->handleRequest($request);
+        if ($form->isSubmitted() && $form->isValid()) {
+            $data = $form->getData();
+
+            $this->addFlash(
+                'autocomplete_success',
+                $this->generateEatingMessage(
+                    $data['foods'],
+                    $data['name']
+                )
+            );
+
+            return $this->redirectToRoute('app_autocomplete');
+        }
+
+        return $this->render('ux_packages/autocomplete.html.twig', [
+            'package' => $package,
+            'form' => $form,
+        ]);
+    }
+
+    private function getDeliciousWord(): string
+    {
+        $words = ['delicious', 'scrumptious', 'mouth-watering', 'life-changing', 'world-beating', 'freshly-squeezed'];
+
+        return $words[array_rand($words)];
+    }
+
+    private function generateEatingMessage(Collection $foods, string $name): string
+    {
+        $i = 0;
+        $foodStrings = $foods->map(function (Food $food) use (&$i, $foods) {
+            ++$i;
+            $str = $food->getName();
+
+            if ($i === \count($foods) && $i > 1) {
+                $str = 'and '.$str;
+            }
+
+            return $str;
+        });
+
+        return sprintf(
+            'Time for %s! Enjoy %s %s %s!',
+            $name,
+            \count($foodStrings) > 1 ? 'some' : 'a',
+            $this->getDeliciousWord(),
+            implode(\count($foodStrings) > 2 ? ', ' : ' ', $foodStrings->toArray())
+        );
+    }
+}
diff --git a/ux.symfony.com/src/Controller/ChartController.php b/ux.symfony.com/src/Controller/UxPackage/ChartjsController.php
similarity index 76%
rename from ux.symfony.com/src/Controller/ChartController.php
rename to ux.symfony.com/src/Controller/UxPackage/ChartjsController.php
index 287ed61fd09..06957305ee4 100644
--- a/ux.symfony.com/src/Controller/ChartController.php
+++ b/ux.symfony.com/src/Controller/UxPackage/ChartjsController.php
@@ -1,20 +1,22 @@
 <?php
 
-namespace App\Controller;
+namespace App\Controller\UxPackage;
 
+use App\Service\UxPackageRepository;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Annotation\Route;
 use Symfony\UX\Chartjs\Builder\ChartBuilderInterface;
 use Symfony\UX\Chartjs\Model\Chart;
 
-class ChartController extends AbstractController
+class ChartjsController extends AbstractController
 {
     #[Route('/chartjs', name: 'app_chartjs')]
-    public function chartjs(ChartBuilderInterface $chartBuilder): Response
+    public function __invoke(UxPackageRepository $packageRepository, ChartBuilderInterface $chartBuilder): Response
     {
-        $chart = $chartBuilder->createChart(Chart::TYPE_LINE);
+        $package = $packageRepository->find('chartjs');
 
+        $chart = $chartBuilder->createChart(Chart::TYPE_LINE);
         $chart->setData([
             'labels' => ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
             'datasets' => [
@@ -34,12 +36,12 @@ public function chartjs(ChartBuilderInterface $chartBuilder): Response
                 ],
             ],
         ]);
-
         $chart->setOptions([
             'maintainAspectRatio' => false,
         ]);
 
-        return $this->render('chart/chartjs.html.twig', [
+        return $this->render('ux_packages/chartjs.html.twig', [
+            'package' => $package,
             'chart' => $chart,
         ]);
     }
diff --git a/ux.symfony.com/src/Controller/CropperController.php b/ux.symfony.com/src/Controller/UxPackage/CropperjsController.php
similarity index 66%
rename from ux.symfony.com/src/Controller/CropperController.php
rename to ux.symfony.com/src/Controller/UxPackage/CropperjsController.php
index ed34a6a460e..4c53de9058a 100644
--- a/ux.symfony.com/src/Controller/CropperController.php
+++ b/ux.symfony.com/src/Controller/UxPackage/CropperjsController.php
@@ -1,7 +1,8 @@
 <?php
 
-namespace App\Controller;
+namespace App\Controller\UxPackage;
 
+use App\Service\UxPackageRepository;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\Asset\Packages;
 use Symfony\Component\Form\FormError;
@@ -11,17 +12,25 @@
 use Symfony\UX\Cropperjs\Factory\CropperInterface;
 use Symfony\UX\Cropperjs\Form\CropperType;
 
-class CropperController extends AbstractController
+class CropperjsController extends AbstractController
 {
-    #[Route('/cropperjs', name: 'app_cropper')]
-    public function cropper(CropperInterface $cropper, Packages $package, Request $request, string $projectDir): Response
+    public function __construct(
+        private Packages $assets,
+        private string $projectDir
+    ) {
+    }
+
+    #[Route('/cropperjs', name: 'app_cropperjs')]
+    public function __invoke(UxPackageRepository $packageRepository, CropperInterface $cropper, Request $request): Response
     {
-        $crop = $cropper->createCrop($projectDir.'/assets/images/large.jpg');
+        $package = $packageRepository->find('cropperjs');
+
+        $crop = $cropper->createCrop($this->projectDir.'/assets/images/large.jpg');
         $crop->setCroppedMaxSize(1000, 750);
 
         $form = $this->createFormBuilder(['crop' => $crop])
             ->add('crop', CropperType::class, [
-                'public_url' => $package->getUrl('images/large.jpg'),
+                'public_url' => $this->assets->getUrl('images/large.jpg'),
                 'cropper_options' => [
                     'aspectRatio' => 4 / 3,
                     'preview' => '#cropper-preview',
@@ -41,7 +50,8 @@ public function cropper(CropperInterface $cropper, Packages $package, Request $r
             $croppedThumbnail = sprintf('data:image/jpeg;base64,%s', base64_encode($crop->getCroppedThumbnail(200, 150)));
         }
 
-        return $this->render('cropper/cropper.html.twig', [
+        return $this->render('ux_packages/cropperjs.html.twig', [
+            'package' => $package,
             'form' => $form,
             'croppedImage' => $croppedImage,
             'croppedThumbnail' => $croppedThumbnail,
diff --git a/ux.symfony.com/src/Controller/UxPackage/DropzoneController.php b/ux.symfony.com/src/Controller/UxPackage/DropzoneController.php
new file mode 100644
index 00000000000..16b01f0815c
--- /dev/null
+++ b/ux.symfony.com/src/Controller/UxPackage/DropzoneController.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Controller\UxPackage;
+
+use App\Form\DropzoneForm;
+use App\Service\UxPackageRepository;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Annotation\Route;
+
+class DropzoneController extends AbstractController
+{
+    #[Route('/dropzone', name: 'app_dropzone')]
+    public function __invoke(UxPackageRepository $packageRepository, Request $request): Response
+    {
+        $package = $packageRepository->find('dropzone');
+
+        $form = $this->createForm(DropzoneForm::class);
+        $form->handleRequest($request);
+        if ($form->isSubmitted() && $form->isValid()) {
+            $this->addFlash('dropzone_success', 'File uploaded! Then immediately discarded... since this is a demo server.');
+
+            return $this->redirectToRoute('app_dropzone');
+        }
+
+        return $this->render('ux_packages/dropzone.html.twig', [
+            'package' => $package,
+            'form' => $form,
+        ]);
+    }
+}
diff --git a/ux.symfony.com/src/Controller/UxPackage/LazyImageController.php b/ux.symfony.com/src/Controller/UxPackage/LazyImageController.php
new file mode 100644
index 00000000000..0f3968fc150
--- /dev/null
+++ b/ux.symfony.com/src/Controller/UxPackage/LazyImageController.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Controller\UxPackage;
+
+use App\Service\UxPackageRepository;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Annotation\Route;
+
+class LazyImageController extends AbstractController
+{
+    #[Route('/lazy-image', name: 'app_lazy_image')]
+    public function __invoke(UxPackageRepository $packageRepository): Response
+    {
+        $package = $packageRepository->find('lazy-image');
+        $legosFilePath = $this->getParameter('kernel.project_dir').'/assets/images/legos.jpg';
+
+        return $this->render('ux_packages/lazy-image.html.twig', [
+            'package' => $package,
+            'legosFilePath' => $legosFilePath,
+        ]);
+    }
+}
diff --git a/ux.symfony.com/src/Controller/UxPackage/LiveComponentController.php b/ux.symfony.com/src/Controller/UxPackage/LiveComponentController.php
new file mode 100644
index 00000000000..0631308a190
--- /dev/null
+++ b/ux.symfony.com/src/Controller/UxPackage/LiveComponentController.php
@@ -0,0 +1,38 @@
+<?php
+
+namespace App\Controller\UxPackage;
+
+use App\Service\LiveDemoRepository;
+use App\Service\UxPackageRepository;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Annotation\Route;
+
+class LiveComponentController extends AbstractController
+{
+    #[Route('/live-component', name: 'app_live_component')]
+    public function __invoke(UxPackageRepository $packageRepository, LiveDemoRepository $liveDemoRepository): Response
+    {
+        $package = $packageRepository->find('live-component');
+
+        return $this->render('ux_packages/live_component.html.twig', [
+            'package' => $package,
+            'demos' => $liveDemoRepository->findAll(),
+        ]);
+    }
+
+    #[Route('/live-component/demos/{demo}', name: 'app_live_component_demo_redirect')]
+    public function redirectDemo(LiveDemoRepository $liveDemoRepository, string $demo = null): Response
+    {
+        if (null === $demo || '' === $demo) {
+            return $this->redirectToRoute('app_demos');
+        }
+
+        // Permanent Redirect old URL
+        if (null !== $liveDemo = $liveDemoRepository->find($demo)) {
+            return $this->redirectToRoute($liveDemo->getRoute(), [], 301);
+        }
+
+        throw $this->createNotFoundException(sprintf('Live Component demo "%s" not found.', $demo));
+    }
+}
diff --git a/ux.symfony.com/src/Controller/NotifierController.php b/ux.symfony.com/src/Controller/UxPackage/NotifyController.php
similarity index 74%
rename from ux.symfony.com/src/Controller/NotifierController.php
rename to ux.symfony.com/src/Controller/UxPackage/NotifyController.php
index d01c3fa77cf..a9af5e8516e 100644
--- a/ux.symfony.com/src/Controller/NotifierController.php
+++ b/ux.symfony.com/src/Controller/UxPackage/NotifyController.php
@@ -1,8 +1,9 @@
 <?php
 
-namespace App\Controller;
+namespace App\Controller\UxPackage;
 
 use App\Form\SendNotificationForm;
+use App\Service\UxPackageRepository;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
@@ -11,15 +12,15 @@
 use Symfony\Component\Notifier\Message\ChatMessage;
 use Symfony\Component\Routing\Annotation\Route;
 
-class NotifierController extends AbstractController
+class NotifyController extends AbstractController
 {
     #[Route('/notify', name: 'app_notify')]
-    public function notify(Request $request, ChatterInterface $chatter): Response
+    public function __invoke(UxPackageRepository $packageRepository, Request $request, ChatterInterface $chatter): Response
     {
-        $form = $this->createForm(SendNotificationForm::class);
+        $package = $packageRepository->find('notify');
 
+        $form = $this->createForm(SendNotificationForm::class);
         $form->handleRequest($request);
-
         if ($form->isSubmitted() && $form->isValid()) {
             $message = SendNotificationForm::getTextChoices()[$form->getData()['message']];
 
@@ -33,7 +34,8 @@ public function notify(Request $request, ChatterInterface $chatter): Response
             return $this->redirectToRoute('app_notify');
         }
 
-        return $this->render('notifier/notify.html.twig', [
+        return $this->render('ux_packages/notify.html.twig', [
+            'package' => $package,
             'form' => $form,
         ]);
     }
diff --git a/ux.symfony.com/src/Controller/UxPackage/ReactController.php b/ux.symfony.com/src/Controller/UxPackage/ReactController.php
new file mode 100644
index 00000000000..1bcb33d4fb5
--- /dev/null
+++ b/ux.symfony.com/src/Controller/UxPackage/ReactController.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Controller\UxPackage;
+
+use App\Service\UxPackageDataProvider;
+use App\Service\UxPackageRepository;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Annotation\Route;
+
+class ReactController extends AbstractController
+{
+    #[Route('/react', name: 'app_react')]
+    public function __invoke(UxPackageRepository $packageRepository, UxPackageDataProvider $packageDataProvider): Response
+    {
+        $package = $packageRepository->find('react');
+
+        return $this->render('ux_packages/react.html.twig', [
+            'package' => $package,
+            'packagesData' => $packageDataProvider->getPackages(),
+        ]);
+    }
+}
diff --git a/ux.symfony.com/src/Controller/UxPackage/SvelteController.php b/ux.symfony.com/src/Controller/UxPackage/SvelteController.php
new file mode 100644
index 00000000000..19155d00af1
--- /dev/null
+++ b/ux.symfony.com/src/Controller/UxPackage/SvelteController.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Controller\UxPackage;
+
+use App\Service\UxPackageDataProvider;
+use App\Service\UxPackageRepository;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Annotation\Route;
+
+class SvelteController extends AbstractController
+{
+    #[Route('/svelte', name: 'app_svelte')]
+    public function __invoke(UxPackageRepository $packageRepository, UxPackageDataProvider $packageDataProvider): Response
+    {
+        $package = $packageRepository->find('svelte');
+
+        return $this->render('ux_packages/svelte.html.twig', [
+            'package' => $package,
+            'packagesData' => $packageDataProvider->getPackages(),
+        ]);
+    }
+}
diff --git a/ux.symfony.com/src/Controller/SwupController.php b/ux.symfony.com/src/Controller/UxPackage/SwupController.php
similarity index 64%
rename from ux.symfony.com/src/Controller/SwupController.php
rename to ux.symfony.com/src/Controller/UxPackage/SwupController.php
index e01e018b1e1..35d42cb1e27 100644
--- a/ux.symfony.com/src/Controller/SwupController.php
+++ b/ux.symfony.com/src/Controller/UxPackage/SwupController.php
@@ -1,8 +1,8 @@
 <?php
 
-namespace App\Controller;
+namespace App\Controller\UxPackage;
 
-use App\Service\PackageRepository;
+use App\Service\UxPackageRepository;
 use Pagerfanta\Adapter\ArrayAdapter;
 use Pagerfanta\Pagerfanta;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
@@ -12,15 +12,18 @@
 class SwupController extends AbstractController
 {
     #[Route('/swup/{page<\d+>}', name: 'app_swup')]
-    public function swup(PackageRepository $packageRepository, int $page = 1): Response
+    public function __invoke(UxPackageRepository $packageRepository, int $page = 1): Response
     {
+        $package = $packageRepository->find('swup');
+
         $pagerfanta = Pagerfanta::createForCurrentPageWithMaxPerPage(
             new ArrayAdapter($packageRepository->findAll()),
             $page,
             4
         );
 
-        return $this->render('swup/swup.html.twig', [
+        return $this->render('ux_packages/swup.html.twig', [
+            'package' => $package,
             'pager' => $pagerfanta,
         ]);
     }
diff --git a/ux.symfony.com/src/Controller/UxPackage/TogglePasswordController.php b/ux.symfony.com/src/Controller/UxPackage/TogglePasswordController.php
new file mode 100644
index 00000000000..dfca1537ec2
--- /dev/null
+++ b/ux.symfony.com/src/Controller/UxPackage/TogglePasswordController.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Controller\UxPackage;
+
+use App\Form\TogglePasswordForm;
+use App\Service\UxPackageRepository;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Annotation\Route;
+
+class TogglePasswordController extends AbstractController
+{
+    #[Route('/toggle-password', name: 'app_toggle_password')]
+    public function __invoke(UxPackageRepository $packageRepository): Response
+    {
+        $package = $packageRepository->find('toggle-password');
+
+        return $this->render('ux_packages/toggle_password.html.twig', [
+            'package' => $package,
+            'form' => $this->createForm(TogglePasswordForm::class),
+        ]);
+    }
+}
diff --git a/ux.symfony.com/src/Controller/UxPackage/TranslatorController.php b/ux.symfony.com/src/Controller/UxPackage/TranslatorController.php
new file mode 100644
index 00000000000..207c0464112
--- /dev/null
+++ b/ux.symfony.com/src/Controller/UxPackage/TranslatorController.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Controller\UxPackage;
+
+use App\Service\UxPackageRepository;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Annotation\Route;
+
+class TranslatorController extends AbstractController
+{
+    #[Route('/translator', name: 'app_translator')]
+    public function __invoke(UxPackageRepository $packageRepository): Response
+    {
+        $package = $packageRepository->find('translator');
+
+        return $this->render('ux_packages/translator.html.twig', [
+            'package' => $package,
+        ]);
+    }
+}
diff --git a/ux.symfony.com/src/Controller/TurboController.php b/ux.symfony.com/src/Controller/UxPackage/TurboController.php
similarity index 83%
rename from ux.symfony.com/src/Controller/TurboController.php
rename to ux.symfony.com/src/Controller/UxPackage/TurboController.php
index c8551f80191..09e4ecd829d 100644
--- a/ux.symfony.com/src/Controller/TurboController.php
+++ b/ux.symfony.com/src/Controller/UxPackage/TurboController.php
@@ -1,13 +1,13 @@
 <?php
 
-namespace App\Controller;
+namespace App\Controller\UxPackage;
 
 use App\Entity\Chat;
 use App\Form\AddTodoItemForm;
 use App\Form\AnimalCreationForm;
 use App\Repository\ChatRepository;
 use App\Service\PackageContext;
-use App\Service\PackageRepository;
+use App\Service\UxPackageRepository;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
@@ -19,52 +19,81 @@
 
 class TurboController extends AbstractController
 {
-    private static array $messages = [
-        'Hey!',
-        'Hola!',
-        'Aloha!',
-        'I love pizza!',
-        'We should do this again sometime.',
-        'Long live donuts!',
-        'I deserve a nap.',
-        'You\'re great!',
-    ];
-
     #[Route('/turbo', name: 'app_turbo')]
     #[Route('/turbo/{name}/the/{animal}', name: 'app_turbo_with_animal')]
-    public function turbo(PackageRepository $packageRepository, ChatRepository $chatRepository, Request $request, PackageContext $packageContext, string $name = null, string $animal = null): Response
+    public function __invoke(UxPackageRepository $packageRepository, ChatRepository $chatRepository, Request $request, PackageContext $packageContext, string $name = null, string $animal = null): Response
     {
+        $package = $packageRepository->find('turbo');
+
         $packageContext->setCurrentPackage('turbo');
+
         $form = $this->createForm(AnimalCreationForm::class);
         $form->handleRequest($request);
-
         if ($form->isSubmitted() && $form->isValid()) {
-            return $this->redirect(
-                $this->generateUrl('app_turbo_with_animal', [
-                    'name' => $form->get('name')->getData(),
-                    'animal' => $form->get('animal')->getData(),
-                ])
-            );
+            return $this->redirectToRoute('app_turbo_with_animal', [
+                'name' => $form->get('name')->getData(),
+                'animal' => $form->get('animal')->getData(),
+            ]);
         }
 
-        return $this->render('turbo/turbo.html.twig', [
+        return $this->render('ux_packages/turbo.html.twig', [
+            'package' => $package,
             'form' => $form,
             'name' => $name,
             'animal' => $animal,
             'messageChoices' => self::$messages,
             'messages' => $this->getChatMessages($chatRepository),
             'myUsername' => $this->getMyUsername($request->getSession()),
-            'package' => $packageRepository->find('turbo'),
         ]);
     }
 
+    #[Route('/turbo/chat', name: 'app_turbo_chat', methods: ['POST'])]
+    public function turboChat(Request $request, HubInterface $hub, ChatRepository $chatRepository): Response
+    {
+        // simple validation. In a real app, if validation fails, we would re-render
+        // the page template (e.g. turbo.html.twig) that contains the form, and
+        // allow it to render with errors. In other words, like any other form submit.
+        if (!$request->request->has('chat_message')) {
+            return new Response(null, 204);
+        }
+
+        $message = self::$messages[$request->request->get('chat_message')] ?? 'Unknown Message!';
+
+        $chat = new Chat();
+        $chat->setUsername($this->getMyUsername($request->getSession()));
+        $chat->setMessage($message);
+        $chatRepository->add($chat, true);
+
+        // send an update to ALL users viewing this page to add the new chat & update header count
+        $hub->publish(new Update(
+            'chat',
+            $this->renderView('ux_packages/turbo/all_users_chat_success.stream.html.twig', [
+                'messages' => $this->getChatMessages($chatRepository),
+                'messageCount' => $chatRepository->count([]),
+            ])
+        ));
+
+        // this stream update is ONLY for the user submitting the form: it "resets" the form
+        if (TurboBundle::STREAM_FORMAT === $request->getPreferredFormat()) {
+            $request->setRequestFormat(TurboBundle::STREAM_FORMAT);
+
+            return $this->render('ux_packages/turbo/chat_success.stream.html.twig', [
+                'messageChoices' => self::$messages,
+            ]);
+        }
+
+        // If the client doesn't support JavaScript, just redirect
+        // Turbo is all about progressive enhancement!
+        return $this->redirectToRoute('app_turbo');
+    }
+
     #[Route('/turbo/todos', name: 'app_turbo_todo_list')]
     public function turboTodoList(Request $request): Response
     {
         $session = $request->getSession();
         $this->initializeTodos($session);
 
-        return $this->render('turbo/todos.html.twig', [
+        return $this->render('ux_packages/turbo/todos.html.twig', [
             'todos' => $session->get('todos'),
         ]);
     }
@@ -82,10 +111,10 @@ public function turboAddTodoItem(Request $request): Response
             $todos[] = $form->get('item')->getData();
             $session->set('todos', $todos);
 
-            return $this->redirect($this->generateUrl('app_turbo_todo_list'));
+            return $this->redirectToRoute('app_turbo_todo_list');
         }
 
-        return $this->renderForm('turbo/add_todo.html.twig', [
+        return $this->render('ux_packages/turbo/add_todo.html.twig', [
             'form' => $form,
         ]);
     }
@@ -101,46 +130,6 @@ public function removeTodo(string $id, Request $request): Response
         return $this->redirectToRoute('app_turbo_todo_list');
     }
 
-    #[Route('/turbo/chat', name: 'app_turbo_chat', methods: ['POST'])]
-    public function turboChat(Request $request, HubInterface $hub, ChatRepository $chatRepository): Response
-    {
-        // simple validation. In a real app, if validation fails, we would re-render
-        // the page template (e.g. turbo.html.twig) that contains the form, and
-        // allow it to render with errors. In other words, like any other form submit.
-        if (!$request->request->has('chat_message')) {
-            return new Response(null, 204);
-        }
-
-        $message = self::$messages[$request->request->get('chat_message')] ?? 'Unknown Message!';
-
-        $chat = new Chat();
-        $chat->setUsername($this->getMyUsername($request->getSession()));
-        $chat->setMessage($message);
-        $chatRepository->add($chat, true);
-
-        // send an update to ALL users viewing this page to add the new chat & update header count
-        $hub->publish(new Update(
-            'chat',
-            $this->renderView('turbo/all_users_chat_success.stream.html.twig', [
-                'messages' => $this->getChatMessages($chatRepository),
-                'messageCount' => $chatRepository->count([]),
-            ])
-        ));
-
-        // this stream update is ONLY for the user submitting the form: it "resets" the form
-        if (TurboBundle::STREAM_FORMAT === $request->getPreferredFormat()) {
-            $request->setRequestFormat(TurboBundle::STREAM_FORMAT);
-
-            return $this->render('turbo/chat_success.stream.html.twig', [
-                'messageChoices' => self::$messages,
-            ]);
-        }
-
-        // If the client doesn't support JavaScript, just redirect
-        // Turbo is all about progressive enhancement!
-        return $this->redirectToRoute('app_turbo');
-    }
-
     private function initializeTodos(SessionInterface $session): void
     {
         if (!$session->has('todos')) {
@@ -151,6 +140,17 @@ private function initializeTodos(SessionInterface $session): void
         }
     }
 
+    private static array $messages = [
+        'Hey!',
+        'Hola!',
+        'Aloha!',
+        'I love pizza!',
+        'We should do this again sometime.',
+        'Long live donuts!',
+        'I deserve a nap.',
+        'You\'re great!',
+    ];
+
     private function getMyUsername(SessionInterface $session): string
     {
         if (!$session->has('username')) {
diff --git a/ux.symfony.com/src/Controller/UxPackage/TwigComponentController.php b/ux.symfony.com/src/Controller/UxPackage/TwigComponentController.php
new file mode 100644
index 00000000000..6d2c33c6d65
--- /dev/null
+++ b/ux.symfony.com/src/Controller/UxPackage/TwigComponentController.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Controller\UxPackage;
+
+use App\Service\UxPackageRepository;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Annotation\Route;
+
+class TwigComponentController extends AbstractController
+{
+    #[Route('/twig-component', name: 'app_twig_component')]
+    public function __invoke(UxPackageRepository $packageRepository): Response
+    {
+        $package = $packageRepository->find('twig-component');
+
+        return $this->render('ux_packages/twig-component.html.twig', [
+            'package' => $package,
+        ]);
+    }
+}
diff --git a/ux.symfony.com/src/Controller/UxPackage/TypedController.php b/ux.symfony.com/src/Controller/UxPackage/TypedController.php
new file mode 100644
index 00000000000..dd78835a5ff
--- /dev/null
+++ b/ux.symfony.com/src/Controller/UxPackage/TypedController.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Controller\UxPackage;
+
+use App\Service\UxPackageRepository;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Annotation\Route;
+
+class TypedController extends AbstractController
+{
+    #[Route('/typed', name: 'app_typed')]
+    public function __invoke(UxPackageRepository $packageRepository): Response
+    {
+        $package = $packageRepository->find('typed');
+
+        return $this->render('ux_packages/typed.html.twig', [
+            'package' => $package,
+        ]);
+    }
+}
diff --git a/ux.symfony.com/src/Controller/UxPackage/VueController.php b/ux.symfony.com/src/Controller/UxPackage/VueController.php
new file mode 100644
index 00000000000..fb23d9512d4
--- /dev/null
+++ b/ux.symfony.com/src/Controller/UxPackage/VueController.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Controller\UxPackage;
+
+use App\Service\UxPackageDataProvider;
+use App\Service\UxPackageRepository;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Annotation\Route;
+
+class VueController extends AbstractController
+{
+    #[Route('/vue', name: 'app_vue')]
+    public function __invoke(UxPackageRepository $packageRepository, UxPackageDataProvider $packageDataProvider): Response
+    {
+        $package = $packageRepository->find('vue');
+
+        return $this->render('ux_packages/vue.html.twig', [
+            'package' => $package,
+            'packagesData' => $packageDataProvider->getPackages(),
+        ]);
+    }
+}
diff --git a/ux.symfony.com/src/Controller/UxPackagesController.php b/ux.symfony.com/src/Controller/UxPackagesController.php
index c0c035eba51..6b37345f78d 100644
--- a/ux.symfony.com/src/Controller/UxPackagesController.php
+++ b/ux.symfony.com/src/Controller/UxPackagesController.php
@@ -2,175 +2,27 @@
 
 namespace App\Controller;
 
-use App\Entity\Food;
-use App\Form\DropzoneForm;
-use App\Form\TimeForAMealForm;
-use App\Form\TogglePasswordForm;
-use App\Service\PackageRepository;
-use Doctrine\Common\Collections\Collection;
+use App\Service\UxPackageRepository;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
-use Symfony\Component\Asset\Packages;
-use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\RedirectResponse;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Annotation\Route;
-use Symfony\Component\Serializer\Normalizer\NormalizerInterface;
 
 class UxPackagesController extends AbstractController
 {
-    public function __construct(
-        private NormalizerInterface $normalizer,
-        private Packages $assetPackages
-    ) {
-    }
-
-    #[Route('/twig-component', name: 'app_twig_component')]
-    public function twigComponent(): Response
-    {
-        return $this->render('ux_packages/twig-component.html.twig');
-    }
-
-    #[Route('/lazy-image', name: 'app_lazy_image')]
-    public function lazyImage(): Response
-    {
-        $legosFilePath = $this->getParameter('kernel.project_dir').'/assets/images/legos.jpg';
-
-        return $this->render('ux_packages/lazy-image.html.twig', [
-            'legosFilePath' => $legosFilePath,
-        ]);
-    }
-
-    #[Route('/react', name: 'app_react')]
-    public function react(PackageRepository $packageRepository): Response
-    {
-        $packagesData = $this->getNormalizedPackages($packageRepository);
-
-        return $this->render('ux_packages/react.html.twig', [
-            'packagesData' => $packagesData,
-        ]);
-    }
-
-    #[Route('/vue', name: 'app_vue')]
-    public function vue(PackageRepository $packageRepository): Response
+    #[Route('/packages', name: 'app_packages')]
+    public function __invoke(UxPackageRepository $packageRepository): Response
     {
-        $packagesData = $this->getNormalizedPackages($packageRepository);
+        $packages = $packageRepository->findAll();
 
-        return $this->render('ux_packages/vue.html.twig', [
-            'packagesData' => $packagesData,
+        return $this->render('main/packages.html.twig', [
+            'packages' => $packages,
         ]);
     }
 
-    #[Route('/svelte', name: 'app_svelte')]
-    public function svelte(PackageRepository $packageRepository): Response
+    #[Route('/components')]
+    public function componentsRedirect(): RedirectResponse
     {
-        $packagesData = $this->getNormalizedPackages($packageRepository);
-
-        return $this->render('ux_packages/svelte.html.twig', [
-            'packagesData' => $packagesData,
-        ]);
-    }
-
-    #[Route('/typed', name: 'app_typed')]
-    public function typed(): Response
-    {
-        return $this->render('ux_packages/typed.html.twig');
-    }
-
-    #[Route('/autocomplete', name: 'app_autocomplete')]
-    public function autocomplete(Request $request): Response
-    {
-        $form = $this->createForm(TimeForAMealForm::class);
-
-        $form->handleRequest($request);
-        if ($form->isSubmitted() && $form->isValid()) {
-            $data = $form->getData();
-
-            $this->addFlash(
-                'autocomplete_success',
-                $this->generateEatingMessage(
-                    $data['foods'],
-                    $data['name']
-                )
-            );
-
-            return $this->redirectToRoute('app_autocomplete');
-        }
-
-        return $this->render('ux_packages/autocomplete.html.twig', [
-            'form' => $form,
-        ]);
-    }
-
-    #[Route('/dropzone', name: 'app_dropzone')]
-    public function dropzone(Request $request): Response
-    {
-        $form = $this->createForm(DropzoneForm::class);
-
-        $form->handleRequest($request);
-        if ($form->isSubmitted() && $form->isValid()) {
-            $this->addFlash('dropzone_success', 'File uploaded! Then immediately discarded... since this is a demo server.');
-
-            return $this->redirectToRoute('app_dropzone');
-        }
-
-        return $this->render('ux_packages/dropzone.html.twig', [
-            'form' => $form,
-        ]);
-    }
-
-    #[Route('/translator', name: 'app_translator')]
-    public function translator(): Response
-    {
-        return $this->render('ux_packages/translator.html.twig');
-    }
-
-    #[Route('/toggle-password', name: 'app_toggle_password')]
-    public function togglePassword(): Response
-    {
-        return $this->render('ux_packages/toggle_password.html.twig', [
-            'form' => $this->createForm(TogglePasswordForm::class),
-        ]);
-    }
-
-    private function getDeliciousWord(): string
-    {
-        $words = ['delicious', 'scrumptious', 'mouth-watering', 'life-changing', 'world-beating', 'freshly-squeezed'];
-
-        return $words[array_rand($words)];
-    }
-
-    private function generateEatingMessage(Collection $foods, string $name): string
-    {
-        $i = 0;
-        $foodStrings = $foods->map(function (Food $food) use (&$i, $foods) {
-            ++$i;
-            $str = $food->getName();
-
-            if ($i === \count($foods) && $i > 1) {
-                $str = 'and '.$str;
-            }
-
-            return $str;
-        });
-
-        return sprintf('Time for %s! Enjoy %s %s %s!',
-            $name,
-            \count($foodStrings) > 1 ? 'some' : 'a',
-            $this->getDeliciousWord(),
-            implode(\count($foodStrings) > 2 ? ', ' : ' ', $foodStrings->toArray())
-        );
-    }
-
-    private function getNormalizedPackages(PackageRepository $packageRepository): array
-    {
-        $packagesData = $this->normalizer->normalize($packageRepository->findAll());
-        $assetPackages = $this->assetPackages;
-
-        return array_map(function (array $data) use ($assetPackages) {
-            $data['url'] = $this->generateUrl($data['route']);
-            unset($data['route']);
-            $data['imageUrl'] = $assetPackages->getUrl('images/'.$data['imageFilename']);
-
-            return $data;
-        }, $packagesData);
+        return $this->redirectToRoute('app_packages', [], Response::HTTP_MOVED_PERMANENTLY);
     }
 }
diff --git a/ux.symfony.com/src/Entity/.gitignore b/ux.symfony.com/src/Entity/.gitignore
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/ux.symfony.com/src/Model/Package.php b/ux.symfony.com/src/Model/UxPackage.php
similarity index 99%
rename from ux.symfony.com/src/Model/Package.php
rename to ux.symfony.com/src/Model/UxPackage.php
index d04afe1ae6c..6822706cd3d 100644
--- a/ux.symfony.com/src/Model/Package.php
+++ b/ux.symfony.com/src/Model/UxPackage.php
@@ -2,7 +2,7 @@
 
 namespace App\Model;
 
-class Package
+class UxPackage
 {
     private ?string $docsLink = null;
     private ?string $docsLinkText = null;
diff --git a/ux.symfony.com/src/Repository/.gitignore b/ux.symfony.com/src/Repository/.gitignore
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/ux.symfony.com/src/Serializer/UxPackageNormalizer.php b/ux.symfony.com/src/Serializer/UxPackageNormalizer.php
new file mode 100644
index 00000000000..10d3e4b2c7a
--- /dev/null
+++ b/ux.symfony.com/src/Serializer/UxPackageNormalizer.php
@@ -0,0 +1,44 @@
+<?php
+
+namespace App\Serializer;
+
+use App\Model\UxPackage;
+use Symfony\Component\Asset\Packages;
+use Symfony\Component\DependencyInjection\Attribute\Autowire;
+use Symfony\Component\Routing\Generator\UrlGeneratorInterface;
+use Symfony\Component\Serializer\Normalizer\NormalizerInterface;
+
+class UxPackageNormalizer implements NormalizerInterface
+{
+    public function __construct(
+        #[Autowire(service: 'serializer.normalizer.object')]
+        private NormalizerInterface $normalizer,
+        private Packages $assets,
+        private UrlGeneratorInterface $router,
+    ) {
+    }
+
+    /**
+     * @param UxPackage $object
+     */
+    public function normalize(mixed $object, string $format = null, array $context = []): array
+    {
+        $data = $this->normalizer->normalize($object, $format, $context);
+
+        $data['url'] = $this->router->generate($data['route']);
+        unset($data['route']);
+        $data['imageUrl'] = $this->assets->getUrl('images/ux_packages/'.$data['imageFilename']);
+
+        return $data;
+    }
+
+    public function supportsNormalization(mixed $data, string $format = null, array $context = []): bool
+    {
+        return $data instanceof UxPackage;
+    }
+
+    public function getSupportedTypes(?string $format): array
+    {
+        return [UxPackage::class => true];
+    }
+}
diff --git a/ux.symfony.com/src/Service/LiveDemoRepository.php b/ux.symfony.com/src/Service/LiveDemoRepository.php
index 2c1d0f93ec3..565953986ca 100644
--- a/ux.symfony.com/src/Service/LiveDemoRepository.php
+++ b/ux.symfony.com/src/Service/LiveDemoRepository.php
@@ -16,7 +16,7 @@ public function findAll(): array
                 'auto-validating-form',
                 name: 'Auto-Validating Form',
                 description: 'Create a form that validates each field in-real-time as the user enters data!',
-                route: 'app_live_components_demo_auto_validating_form',
+                route: 'app_demo_live_component_auto_validating_form',
                 longDescription: <<<EOF
 Enter a bad email or leave the password empty, and see how the
 form validates in real time!
@@ -29,7 +29,7 @@ public function findAll(): array
                 'form-collection-type',
                 name: 'Embedded CollectionType Form',
                 description: 'Create embedded forms with functional "add" and "remove" buttons all in Twig.',
-                route: 'app_live_components_demo_form_collection_type',
+                route: 'app_demo_live_component_form_collection_type',
                 longDescription: <<<EOF
 Unlock the potential of Symfony's <a href="https://symfony.com/doc/current/reference/forms/types/collection.html"><code>CollectionType</code></a> while
 writing zero JavaScript.
@@ -41,7 +41,7 @@ public function findAll(): array
                 'dependent-form-fields',
                 name: 'Dependent Form Fields',
                 description: 'After selecting the first field, automatically reload the options for a second field.',
-                route: 'app_live_components_demo_dependent_form_fields',
+                route: 'app_demo_live_component_dependent_form_fields',
                 longDescription: <<<EOF
 Say goodbye to the hassle of dependent form fields with Live Components.
 <br>
@@ -52,7 +52,7 @@ public function findAll(): array
                 'voting',
                 name: 'Up & Down Voting',
                 description: 'Save up & down votes live in pure Twig & PHP.',
-                route: 'app_live_components_demo_voting',
+                route: 'app_demo_live_component_voting',
                 longDescription: <<<EOF
 With each row as its own component, it's easy to add up & down voting + keep track of which items have been voted on.
 <br>
@@ -60,20 +60,20 @@ public function findAll(): array
 EOF
             ),
             new LiveDemo(
-                'inline_edit',
+                'inline-edit',
                 name: 'Inline Editing',
                 description: 'Activate an inline editing form with real-time validation.',
-                route: 'app_live_components_demo_inline_edit',
+                route: 'app_demo_live_component_inline_edit',
                 longDescription: <<<EOF
 Inline editing? Simple. Use LiveComponents to track if you're in "edit" mode, let
 the user update any fields on your entity, and save through a <code>LiveAction</code>.
 EOF
             ),
             new LiveDemo(
-                'chartjs_updating',
+                'chartjs',
                 name: 'Auto-Updating Chart',
                 description: 'Render & Update a Chart.js chart in real-time.',
-                route: 'app_live_components_demo_chartjs',
+                route: 'app_demo_live_component_chartjs',
                 longDescription: <<<EOF
 What do you get with Live Components + UX Chart.js + UX Autocomplete?
 <br>
@@ -84,7 +84,7 @@ public function findAll(): array
                 'invoice',
                 name: 'Invoice Creator',
                 description: 'Create an invoice + line items that updates as you type.',
-                route: 'app_live_components_invoice',
+                route: 'app_demo_live_component_invoice',
                 longDescription: <<<EOF
 Create or edit an `Invoice` entity along with child components for each related `InvoiceItem` entity.
 <br>
@@ -92,10 +92,10 @@ public function findAll(): array
 EOF
             ),
             new LiveDemo(
-                'product_form',
+                'product-form',
                 name: 'Product Form + Category Modal',
                 description: 'Create a Category on the fly - from inside a product form - via a modal.',
-                route: 'app_live_components_product_form',
+                route: 'app_demo_live_component_product_form',
                 longDescription: <<<EOF
 Open a child modal component to create a new Category.
 EOF
@@ -104,7 +104,7 @@ public function findAll(): array
                 'upload',
                 name: 'Uploading files',
                 description: 'Upload file from your live component through a LiveAction.',
-                route: 'app_live_components_upload',
+                route: 'app_demo_live_component_upload',
                 longDescription: <<<EOF
 File uploads are tricky. Submit them to a `#[LiveAction]` with the `files` modifier on `data-live-action` then process them.
 EOF
diff --git a/ux.symfony.com/src/Service/PackageContext.php b/ux.symfony.com/src/Service/PackageContext.php
index 9ff617e7f3f..7401d2ff93e 100644
--- a/ux.symfony.com/src/Service/PackageContext.php
+++ b/ux.symfony.com/src/Service/PackageContext.php
@@ -2,7 +2,7 @@
 
 namespace App\Service;
 
-use App\Model\Package;
+use App\Model\UxPackage;
 use Symfony\Component\HttpFoundation\RequestStack;
 
 /**
@@ -13,12 +13,12 @@ class PackageContext
     private ?string $packageName = null;
 
     public function __construct(
-        private PackageRepository $packageRepository,
+        private UxPackageRepository $packageRepository,
         private RequestStack $requestStack,
     ) {
     }
 
-    public function getCurrentPackage(): Package
+    public function getCurrentPackage(): UxPackage
     {
         if (null !== $this->packageName) {
             return $this->packageRepository->find($this->packageName);
diff --git a/ux.symfony.com/src/Service/TwigPackageHelper.php b/ux.symfony.com/src/Service/TwigPackageHelper.php
index 44065f83661..2752f168425 100644
--- a/ux.symfony.com/src/Service/TwigPackageHelper.php
+++ b/ux.symfony.com/src/Service/TwigPackageHelper.php
@@ -2,18 +2,18 @@
 
 namespace App\Service;
 
-use App\Model\Package;
+use App\Model\UxPackage;
 
 class TwigPackageHelper
 {
     public function __construct(
-        private PackageRepository $packageRepository,
+        private UxPackageRepository $packageRepository,
         private PackageContext $packageContext
     ) {
     }
 
     /**
-     * @return array<Package>
+     * @return array<UxPackage>
      */
     public function getTopNavPackages(): array
     {
@@ -26,7 +26,7 @@ public function getTopNavPackages(): array
         ];
     }
 
-    public function getCurrentPackage(): Package
+    public function getCurrentPackage(): UxPackage
     {
         return $this->packageContext->getCurrentPackage();
     }
diff --git a/ux.symfony.com/src/Service/UxPackageDataProvider.php b/ux.symfony.com/src/Service/UxPackageDataProvider.php
new file mode 100644
index 00000000000..1c94490d467
--- /dev/null
+++ b/ux.symfony.com/src/Service/UxPackageDataProvider.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Service;
+
+use Symfony\Component\Serializer\Normalizer\NormalizerInterface;
+
+class UxPackageDataProvider
+{
+    public function __construct(
+        private UxPackageRepository $packageRepository,
+        private NormalizerInterface $normalizer,
+    ) {
+    }
+
+    public function getPackages(): array
+    {
+        $packages = $this->packageRepository->findAll();
+
+        return $this->normalizer->normalize($packages);
+    }
+}
diff --git a/ux.symfony.com/src/Service/PackageRepository.php b/ux.symfony.com/src/Service/UxPackageRepository.php
similarity index 87%
rename from ux.symfony.com/src/Service/PackageRepository.php
rename to ux.symfony.com/src/Service/UxPackageRepository.php
index 5fedbceeb44..fa237663811 100644
--- a/ux.symfony.com/src/Service/PackageRepository.php
+++ b/ux.symfony.com/src/Service/UxPackageRepository.php
@@ -2,17 +2,17 @@
 
 namespace App\Service;
 
-use App\Model\Package;
+use App\Model\UxPackage;
 
-class PackageRepository
+class UxPackageRepository
 {
     /**
-     * @return array<Package>
+     * @return array<UxPackage>
      */
     public function findAll(string $query = null): array
     {
         $packages = [
-            (new Package(
+            (new UxPackage(
                 'turbo',
                 'Turbo',
                 'app_turbo',
@@ -24,7 +24,7 @@ public function findAll(string $query = null): array
                 ->setDocsLink('https://turbo.hotwired.dev/handbook/introduction', 'Documentation specifically for the Turbo JavaScript library.')
                 ->setScreencastLink('https://symfonycasts.com/screencast/turbo', 'Go deep into all 3 parts of Turbo.'),
 
-            new Package(
+            new UxPackage(
                 'live-component',
                 'Live Components',
                 'app_live_component',
@@ -34,7 +34,7 @@ public function findAll(string $query = null): array
                 'I need Twig templates that update in real-time!'
             ),
 
-            new Package(
+            new UxPackage(
                 'autocomplete',
                 'Autocomplete',
                 'app_autocomplete',
@@ -43,7 +43,8 @@ public function findAll(string $query = null): array
                 'Ajax-powered, auto-completable `select` elements',
                 'I need an Ajax-autocomplete select field'
             ),
-            (new Package(
+
+            (new UxPackage(
                 'chartjs',
                 'Chart.js',
                 'app_chartjs',
@@ -54,7 +55,7 @@ public function findAll(string $query = null): array
             ))
                 ->setDocsLink('https://www.chartjs.org/', 'Chart.js documentation.'),
 
-            (new Package(
+            (new UxPackage(
                 'react',
                 'React',
                 'app_react',
@@ -65,7 +66,7 @@ public function findAll(string $query = null): array
             ))
                 ->setDocsLink('https://reactjs.org/', 'Go deeper with the React docs.'),
 
-            (new Package(
+            (new UxPackage(
                 'vue',
                 'Vue.js',
                 'app_vue',
@@ -76,7 +77,7 @@ public function findAll(string $query = null): array
             ))
                 ->setDocsLink('https://vuejs.org/', 'Go deeper with the Vue.js docs.'),
 
-            (new Package(
+            (new UxPackage(
                 'svelte',
                 'Svelte',
                 'app_svelte',
@@ -88,10 +89,10 @@ public function findAll(string $query = null): array
             ))
                 ->setDocsLink('https://svelte.dev/', 'Go deeper with the Svelte docs.'),
 
-            (new Package(
+            (new UxPackage(
                 'cropperjs',
                 'Image Cropper',
-                'app_cropper',
+                'app_cropperjs',
                 '#1E8FA8',
                 'linear-gradient(135.73deg, #1E8FA8 -7.05%, #3FC0DC 105.11%)',
                 'Form Type and tools for cropping images',
@@ -99,7 +100,7 @@ public function findAll(string $query = null): array
             ))
                 ->setDocsLink('https://github.com/fengyuanchen/cropperjs', 'Cropper.js documentation.'),
 
-            new Package(
+            new UxPackage(
                 'lazy-image',
                 'Lazy Image',
                 'app_lazy_image',
@@ -109,7 +110,7 @@ public function findAll(string $query = null): array
                 'I need to delay large image loading'
             ),
 
-            new Package(
+            new UxPackage(
                 'twig-component',
                 'Twig Components',
                 'app_twig_component',
@@ -119,7 +120,7 @@ public function findAll(string $query = null): array
                 'I need to create PHP classes that render'
             ),
 
-            new Package(
+            new UxPackage(
                 'dropzone',
                 'Stylized Dropzone',
                 'app_dropzone',
@@ -128,7 +129,7 @@ public function findAll(string $query = null): array
                 'Form type for stylized "drop zone" for file uploads',
                 'I need an upload field that looks great'
             ),
-            (new Package(
+            (new UxPackage(
                 'swup',
                 'Swup Integration',
                 'app_swup',
@@ -139,7 +140,8 @@ public function findAll(string $query = null): array
             ))
                 ->setDocsLink('https://swup.js.org/', 'Swup documentation'),
 
-            new Package('notify',
+            new UxPackage(
+                'notify',
                 'Notify',
                 'app_notify',
                 '#204CA0',
@@ -147,7 +149,8 @@ public function findAll(string $query = null): array
                 'Trigger native browser notifications from inside PHP',
                 'I need to send browser notifications',
             ),
-            new Package(
+
+            new UxPackage(
                 'toggle-password',
                 'Toggle Password',
                 'app_toggle_password',
@@ -156,7 +159,8 @@ public function findAll(string $query = null): array
                 'Switch the visibility of a password field',
                 'I need to toggle the visibility of a password field',
             ),
-            (new Package(
+
+            (new UxPackage(
                 'typed',
                 'Typed',
                 'app_typed',
@@ -167,7 +171,7 @@ public function findAll(string $query = null): array
             ))
                 ->setDocsLink('https://github.com/mattboldt/typed.js/', 'Typed.js documentation'),
 
-            new Package(
+            new UxPackage(
                 'translator',
                 'Translator',
                 'app_translator',
@@ -178,19 +182,19 @@ public function findAll(string $query = null): array
                 'translator.svg'
             ),
 
-            // new Package('form-collection', 'Form Collection', 'app_form_collection', 'linear-gradient(95.22deg, #5920A0 -4.7%, #844EC9 105.43%), #5920A0', 'Handle CollectionType embedded forms with zero custom JavaScript'),
+            // new UxPackage('form-collection', 'Form Collection', 'app_form_collection', 'linear-gradient(95.22deg, #5920A0 -4.7%, #844EC9 105.43%), #5920A0', 'Handle CollectionType embedded forms with zero custom JavaScript'),
         ];
 
         if (!$query) {
             return $packages;
         }
 
-        return array_filter($packages, function (Package $package) use ($query) {
+        return array_filter($packages, function (UxPackage $package) use ($query) {
             return str_contains($package->getName(), $query) || str_contains($package->getHumanName(), $query);
         });
     }
 
-    public function find(string $name): Package
+    public function find(string $name): UxPackage
     {
         $packages = $this->findAll();
         foreach ($packages as $package) {
@@ -207,7 +211,7 @@ public function count(): int
         return \count($this->findAll());
     }
 
-    public function findByRoute(string $route): Package
+    public function findByRoute(string $route): UxPackage
     {
         $packages = $this->findAll();
         foreach ($packages as $package) {
diff --git a/ux.symfony.com/src/Twig/Alert.php b/ux.symfony.com/src/Twig/Alert.php
index 355768db16e..ade7f1713c0 100644
--- a/ux.symfony.com/src/Twig/Alert.php
+++ b/ux.symfony.com/src/Twig/Alert.php
@@ -2,16 +2,16 @@
 
 namespace App\Twig;
 
-use App\Service\PackageRepository;
+use App\Service\UxPackageRepository;
 use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
 
-#[AsTwigComponent()]
+#[AsTwigComponent]
 class Alert
 {
     public string $type = 'success';
     public string $message;
 
-    public function __construct(private PackageRepository $packageRepository)
+    public function __construct(private UxPackageRepository $packageRepository)
     {
     }
 
diff --git a/ux.symfony.com/src/Twig/CodeBlock.php b/ux.symfony.com/src/Twig/CodeBlock.php
index 7fb99e6c7be..80e10146484 100644
--- a/ux.symfony.com/src/Twig/CodeBlock.php
+++ b/ux.symfony.com/src/Twig/CodeBlock.php
@@ -8,7 +8,7 @@
 use Symfony\Component\DependencyInjection\Attribute\Autowire;
 use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
 
-#[AsTwigComponent()]
+#[AsTwigComponent]
 class CodeBlock
 {
     public string $filename;
@@ -32,8 +32,7 @@ class CodeBlock
 
     public function __construct(
         private Highlighter $highlighter,
-        #[Autowire('%kernel.project_dir%')]
-        private string $rootDir
+        #[Autowire('%kernel.project_dir%')] private string $rootDir,
     ) {
     }
 
diff --git a/ux.symfony.com/src/Twig/DinoChart.php b/ux.symfony.com/src/Twig/DinoChart.php
index d4ec3856489..7244a439d0b 100644
--- a/ux.symfony.com/src/Twig/DinoChart.php
+++ b/ux.symfony.com/src/Twig/DinoChart.php
@@ -10,7 +10,7 @@
 use Symfony\UX\LiveComponent\DefaultActionTrait;
 use Symfony\UX\TwigComponent\Attribute\ExposeInTemplate;
 
-#[AsLiveComponent()]
+#[AsLiveComponent]
 class DinoChart
 {
     use DefaultActionTrait;
diff --git a/ux.symfony.com/src/Twig/DocsLink.php b/ux.symfony.com/src/Twig/DocsLink.php
index 74434a19828..7a9dd989d4b 100644
--- a/ux.symfony.com/src/Twig/DocsLink.php
+++ b/ux.symfony.com/src/Twig/DocsLink.php
@@ -5,7 +5,7 @@
 use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
 use Symfony\UX\TwigComponent\Attribute\ExposeInTemplate;
 
-#[AsTwigComponent()]
+#[AsTwigComponent]
 class DocsLink
 {
     public string $url;
diff --git a/ux.symfony.com/src/Twig/FoodVote.php b/ux.symfony.com/src/Twig/FoodVote.php
index 60247723010..43f5adba518 100644
--- a/ux.symfony.com/src/Twig/FoodVote.php
+++ b/ux.symfony.com/src/Twig/FoodVote.php
@@ -11,7 +11,7 @@
 use Symfony\UX\LiveComponent\Attribute\LiveProp;
 use Symfony\UX\LiveComponent\DefaultActionTrait;
 
-#[AsLiveComponent()]
+#[AsLiveComponent]
 class FoodVote extends AbstractController
 {
     use DefaultActionTrait;
diff --git a/ux.symfony.com/src/Twig/HomepageTerminalSwapper.php b/ux.symfony.com/src/Twig/HomepageTerminalSwapper.php
index ec1d084b6c9..f1cf9700a62 100644
--- a/ux.symfony.com/src/Twig/HomepageTerminalSwapper.php
+++ b/ux.symfony.com/src/Twig/HomepageTerminalSwapper.php
@@ -2,15 +2,15 @@
 
 namespace App\Twig;
 
-use App\Service\PackageRepository;
+use App\Service\UxPackageRepository;
 use App\Util\SourceCleaner;
 use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
 use Symfony\UX\TwigComponent\Attribute\ExposeInTemplate;
 
-#[AsTwigComponent()]
+#[AsTwigComponent]
 class HomepageTerminalSwapper
 {
-    public function __construct(private PackageRepository $packageRepository)
+    public function __construct(private UxPackageRepository $packageRepository)
     {
     }
 
diff --git a/ux.symfony.com/src/Twig/Icon.php b/ux.symfony.com/src/Twig/Icon.php
index 4ef3a6a1de6..4015312f247 100644
--- a/ux.symfony.com/src/Twig/Icon.php
+++ b/ux.symfony.com/src/Twig/Icon.php
@@ -8,7 +8,7 @@
 
 use function Symfony\Component\String\u;
 
-#[AsTwigComponent()]
+#[AsTwigComponent]
 class Icon
 {
     /**
diff --git a/ux.symfony.com/src/Twig/InlineEditFood.php b/ux.symfony.com/src/Twig/InlineEditFood.php
index 0af9b70550f..361aaed78b9 100644
--- a/ux.symfony.com/src/Twig/InlineEditFood.php
+++ b/ux.symfony.com/src/Twig/InlineEditFood.php
@@ -12,7 +12,7 @@
 use Symfony\UX\LiveComponent\DefaultActionTrait;
 use Symfony\UX\LiveComponent\ValidatableComponentTrait;
 
-#[AsLiveComponent()]
+#[AsLiveComponent]
 class InlineEditFood extends AbstractController
 {
     use DefaultActionTrait;
diff --git a/ux.symfony.com/src/Twig/InvoiceCreator.php b/ux.symfony.com/src/Twig/InvoiceCreator.php
index 369fd1d89bb..5b754368010 100644
--- a/ux.symfony.com/src/Twig/InvoiceCreator.php
+++ b/ux.symfony.com/src/Twig/InvoiceCreator.php
@@ -18,7 +18,7 @@
 use Symfony\UX\LiveComponent\ValidatableComponentTrait;
 use Symfony\UX\TwigComponent\Attribute\ExposeInTemplate;
 
-#[AsLiveComponent()]
+#[AsLiveComponent]
 class InvoiceCreator extends AbstractController
 {
     use DefaultActionTrait;
diff --git a/ux.symfony.com/src/Twig/InvoiceCreatorLineItem.php b/ux.symfony.com/src/Twig/InvoiceCreatorLineItem.php
index 9ec111871e9..c443fe848b0 100644
--- a/ux.symfony.com/src/Twig/InvoiceCreatorLineItem.php
+++ b/ux.symfony.com/src/Twig/InvoiceCreatorLineItem.php
@@ -13,7 +13,7 @@
 use Symfony\UX\LiveComponent\ValidatableComponentTrait;
 use Symfony\UX\TwigComponent\Attribute\ExposeInTemplate;
 
-#[AsLiveComponent()]
+#[AsLiveComponent]
 class InvoiceCreatorLineItem
 {
     use DefaultActionTrait;
@@ -30,7 +30,7 @@ class InvoiceCreatorLineItem
     #[Assert\Positive]
     public int $quantity = 1;
 
-    #[LiveProp()]
+    #[LiveProp]
     public bool $isEditing = false;
 
     public function __construct(private ProductRepository $productRepository)
diff --git a/ux.symfony.com/src/Twig/MealPlanner.php b/ux.symfony.com/src/Twig/MealPlanner.php
index b49037065a1..6d2add2de61 100644
--- a/ux.symfony.com/src/Twig/MealPlanner.php
+++ b/ux.symfony.com/src/Twig/MealPlanner.php
@@ -9,7 +9,7 @@
 use Symfony\UX\LiveComponent\ComponentWithFormTrait;
 use Symfony\UX\LiveComponent\DefaultActionTrait;
 
-#[AsLiveComponent()]
+#[AsLiveComponent]
 class MealPlanner extends AbstractController
 {
     use ComponentWithFormTrait;
diff --git a/ux.symfony.com/src/Twig/PackageBox.php b/ux.symfony.com/src/Twig/PackageBox.php
index c9fd72121bd..dae406dccf1 100644
--- a/ux.symfony.com/src/Twig/PackageBox.php
+++ b/ux.symfony.com/src/Twig/PackageBox.php
@@ -2,11 +2,11 @@
 
 namespace App\Twig;
 
-use App\Model\Package;
+use App\Model\UxPackage;
 use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
 
-#[AsTwigComponent()]
+#[AsTwigComponent]
 class PackageBox
 {
-    public Package $package;
+    public UxPackage $package;
 }
diff --git a/ux.symfony.com/src/Twig/PackageHeader.php b/ux.symfony.com/src/Twig/PackageHeader.php
index 947d309c64a..3828f6c805d 100644
--- a/ux.symfony.com/src/Twig/PackageHeader.php
+++ b/ux.symfony.com/src/Twig/PackageHeader.php
@@ -2,15 +2,15 @@
 
 namespace App\Twig;
 
-use App\Model\Package;
+use App\Model\UxPackage;
 use App\Repository\ChatRepository;
-use App\Service\PackageRepository;
+use App\Service\UxPackageRepository;
 use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
 
-#[AsTwigComponent()]
+#[AsTwigComponent]
 class PackageHeader
 {
-    public Package $package;
+    public UxPackage $package;
 
     public string $eyebrowText = '';
 
@@ -19,7 +19,7 @@ class PackageHeader
      */
     public bool $withChatIcon = false;
 
-    public function __construct(private PackageRepository $packageRepository, private ChatRepository $chatRepository)
+    public function __construct(private UxPackageRepository $packageRepository, private ChatRepository $chatRepository)
     {
     }
 
diff --git a/ux.symfony.com/src/Twig/RegistrationForm.php b/ux.symfony.com/src/Twig/RegistrationForm.php
index bec19bc9699..ec3e4adfb24 100644
--- a/ux.symfony.com/src/Twig/RegistrationForm.php
+++ b/ux.symfony.com/src/Twig/RegistrationForm.php
@@ -11,7 +11,7 @@
 use Symfony\UX\LiveComponent\ComponentWithFormTrait;
 use Symfony\UX\LiveComponent\DefaultActionTrait;
 
-#[AsLiveComponent()]
+#[AsLiveComponent]
 class RegistrationForm extends AbstractController
 {
     use ComponentWithFormTrait;
diff --git a/ux.symfony.com/src/Twig/SearchPackages.php b/ux.symfony.com/src/Twig/SearchPackages.php
index 5f74fef104f..23b41a4a90d 100644
--- a/ux.symfony.com/src/Twig/SearchPackages.php
+++ b/ux.symfony.com/src/Twig/SearchPackages.php
@@ -2,12 +2,12 @@
 
 namespace App\Twig;
 
-use App\Service\PackageRepository;
+use App\Service\UxPackageRepository;
 use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
 use Symfony\UX\LiveComponent\Attribute\LiveProp;
 use Symfony\UX\LiveComponent\DefaultActionTrait;
 
-#[AsLiveComponent()]
+#[AsLiveComponent]
 class SearchPackages
 {
     use DefaultActionTrait;
@@ -15,7 +15,7 @@ class SearchPackages
     #[LiveProp(writable: true)]
     public ?string $query = null;
 
-    public function __construct(private PackageRepository $packageRepo)
+    public function __construct(private UxPackageRepository $packageRepo)
     {
     }
 
diff --git a/ux.symfony.com/src/Twig/Terminal.php b/ux.symfony.com/src/Twig/Terminal.php
index e07825a343f..3b9ee15fd99 100644
--- a/ux.symfony.com/src/Twig/Terminal.php
+++ b/ux.symfony.com/src/Twig/Terminal.php
@@ -5,7 +5,7 @@
 use App\Util\SourceCleaner;
 use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
 
-#[AsTwigComponent()]
+#[AsTwigComponent]
 class Terminal
 {
     public int $bottomPadding = 100;
diff --git a/ux.symfony.com/src/Twig/TodoListForm.php b/ux.symfony.com/src/Twig/TodoListForm.php
index 3b85126714e..7a1459c3d65 100644
--- a/ux.symfony.com/src/Twig/TodoListForm.php
+++ b/ux.symfony.com/src/Twig/TodoListForm.php
@@ -11,7 +11,7 @@
 use Symfony\UX\LiveComponent\DefaultActionTrait;
 use Symfony\UX\LiveComponent\LiveCollectionTrait;
 
-#[AsLiveComponent()]
+#[AsLiveComponent]
 class TodoListForm extends AbstractController
 {
     use DefaultActionTrait;
diff --git a/ux.symfony.com/src/Twig/UploadFiles.php b/ux.symfony.com/src/Twig/UploadFiles.php
index fbb22ee4566..8bb213409eb 100644
--- a/ux.symfony.com/src/Twig/UploadFiles.php
+++ b/ux.symfony.com/src/Twig/UploadFiles.php
@@ -12,7 +12,7 @@
 use Symfony\UX\LiveComponent\Attribute\LiveProp;
 use Symfony\UX\LiveComponent\DefaultActionTrait;
 
-#[AsLiveComponent()]
+#[AsLiveComponent]
 class UploadFiles
 {
     use DefaultActionTrait;
diff --git a/ux.symfony.com/templates/_header.html.twig b/ux.symfony.com/templates/_header.html.twig
index c2d97f9ea3a..096b817b4ef 100644
--- a/ux.symfony.com/templates/_header.html.twig
+++ b/ux.symfony.com/templates/_header.html.twig
@@ -5,8 +5,8 @@
                 <span aria-hidden="false">Symfony UX</span>
             </a>
             <button class="AppHeader_toggler navbar-toggler collapsed" type="button"
-                    data-bs-toggle="collapse" data-bs-target="#AppNav"
-                    aria-controls="AppNav" aria-expanded="false" aria-label="Toggle navigation"
+                data-bs-toggle="collapse" data-bs-target="#AppNav"
+                aria-controls="AppNav" aria-expanded="false" aria-label="Toggle navigation"
             >
                 <twig:Icon name="menu"/>
             </button>
diff --git a/ux.symfony.com/templates/_nav.html.twig b/ux.symfony.com/templates/_nav.html.twig
index 149f038ab78..e1cc5ce6c47 100644
--- a/ux.symfony.com/templates/_nav.html.twig
+++ b/ux.symfony.com/templates/_nav.html.twig
@@ -18,7 +18,7 @@
                             <div class="nav-component-img d-flex justify-content-center align-items-center me-2"
                                  style="background: {{ package.color }}">
                                 <img width="10" height="10"
-                                     src="{{ asset('images/'~package.imageFilename) }}"
+                                     src="{{ asset('images/ux_packages/'~package.imageFilename) }}"
                                      alt="Image for the {{ package.humanName }} UX package">
                             </div>
                             {{ package.humanName }}
@@ -30,17 +30,16 @@
                 <hr class="dropdown-divider">
             </li>
             <li>
-                <a class="dropdown-item" href="{{ path('app_all_packages') }}">Browse all Packages</a>
+                <a class="dropdown-item" href="{{ path('app_packages') }}">Browse all Packages</a>
             </li>
         </ul>
     </div>
-    <span class="AppNav_separator" aria-hidden="true"></span>
+    <a href="{{ path('app_demos') }}" class="AppNav_item">Demos</a>
     <a class="AppNav_item AppNav_item--icon"
        href="https://github.com/symfony/ux"
        rel="external noopener noreferrer"
     >
         <twig:Icon name="github"/>
     </a>
-    <span class="AppNav_separator" aria-hidden="true"></span>
     <twig:ThemeSwitcher class="AppNav_item AppNav_item--icon" />
 {% endblock %}
diff --git a/ux.symfony.com/templates/components/Alert.html.twig b/ux.symfony.com/templates/components/Alert.html.twig
index 782f2886d17..b0bf263f152 100644
--- a/ux.symfony.com/templates/components/Alert.html.twig
+++ b/ux.symfony.com/templates/components/Alert.html.twig
@@ -3,7 +3,7 @@
     {{ message }}
 
     {% if type == 'success' %}
-        <a href="{{ path('app_all_packages') }}" class="alert-right-message">
+        <a href="{{ path('app_packages') }}" class="alert-right-message">
             (browse all {{ this.packageCount }} packages)
         </a>
     {% endif %}
diff --git a/ux.symfony.com/templates/components/CodeBlock.html.twig b/ux.symfony.com/templates/components/CodeBlock.html.twig
index 82b8c06ee36..73df858cb0b 100644
--- a/ux.symfony.com/templates/components/CodeBlock.html.twig
+++ b/ux.symfony.com/templates/components/CodeBlock.html.twig
@@ -5,20 +5,14 @@
         <div class="Terminal_header py-2 ps-4 pe-2 mb-0 d-flex justify-content-between align-items-center">
             <a id="{{ this.elementId }}" href="#{{ this.elementId }}" class="Terminal_title">{{ filename }}</a>
             <div class="Terminal_actions">
-                {{ include('partials/code-block-buttons.html.twig', {
-                    source: this.rawSource,
-                    link: this.githubLink,
-                }) }}
+                <twig:CodeBlockButtons source="{{ this.rawSource }}" link="{{ this.githubLink }}" />
             </div>
         </div>
     {% endif %}
     <div class="Terminal_body" {{ stimulus_controller('code-expander')}}>
         {% if not showFilename %}
             <div class="Terminal_actions">
-                {{ include('partials/code-block-buttons.html.twig', {
-                    source: this.rawSource,
-                    link: this.githubLink,
-                }) }}
+                <twig:CodeBlockButtons source="{{ this.rawSource }}" link="{{ this.githubLink }}"/>
             </div>
         {% endif %}
         <pre style="height: {{ height }};" {{ stimulus_target('code-expander', 'codeContent') }}><code>
diff --git a/ux.symfony.com/templates/partials/code-block-buttons.html.twig b/ux.symfony.com/templates/components/CodeBlockButtons.html.twig
similarity index 96%
rename from ux.symfony.com/templates/partials/code-block-buttons.html.twig
rename to ux.symfony.com/templates/components/CodeBlockButtons.html.twig
index 00c65ff6363..ba18537146a 100644
--- a/ux.symfony.com/templates/partials/code-block-buttons.html.twig
+++ b/ux.symfony.com/templates/components/CodeBlockButtons.html.twig
@@ -1,3 +1,5 @@
+{% props source, link %}
+
 <div {{ stimulus_controller('ux-clipboard', {
     source: source,
 })|stimulus_controller('tooltips') }}
diff --git a/ux.symfony.com/templates/components/PackageBox.html.twig b/ux.symfony.com/templates/components/PackageBox.html.twig
index 69a6c8ac736..f74da825d4c 100644
--- a/ux.symfony.com/templates/components/PackageBox.html.twig
+++ b/ux.symfony.com/templates/components/PackageBox.html.twig
@@ -1,7 +1,7 @@
 <div class="PackageBox" style="--gradient: {{ package.gradient }};--color: {{ package.color }};">
 
     <div class="PackageBox_logo">
-        <img width="36" height="36" src="{{ asset('images/'~package.imageFilename) }}"
+        <img width="36" height="36" src="{{ asset('images/ux_packages/'~package.imageFilename) }}"
              alt="Image for the {{ package.humanName }} UX package">
     </div>
 
diff --git a/ux.symfony.com/templates/components/PackageHeader.html.twig b/ux.symfony.com/templates/components/PackageHeader.html.twig
index f8320d6b6cb..004b7f9dc68 100644
--- a/ux.symfony.com/templates/components/PackageHeader.html.twig
+++ b/ux.symfony.com/templates/components/PackageHeader.html.twig
@@ -13,7 +13,7 @@
 
         <div class="d-flex justify-content-center ">
             <twig:TerminalCommand
-                aria-label="The package's composer installation command"
+                aria-label="Composer command to install {{ package.humanName }}"
                 command="{{ package.composerRequireCommand }}"
                 style="--color-accent: {{ package.color }}; transform: translateY(50%);"
             />
diff --git a/ux.symfony.com/templates/demos/live_component.html.twig b/ux.symfony.com/templates/demos/live_component.html.twig
new file mode 100644
index 00000000000..c34bedb7c21
--- /dev/null
+++ b/ux.symfony.com/templates/demos/live_component.html.twig
@@ -0,0 +1,46 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}Demos - Live Component - Symfony UX{% endblock %}
+
+{% block content %}
+
+<div class="hero">
+    <div class="container-fluid container-xxl px-4 px-md-5 mb-5 pt-md-5">
+        <div class="text-center mt-5">
+            <span class="eyebrows">Demos</span>
+            <h1 class="ubuntu">Live Component</h1>
+        </div>
+    </div>
+</div>
+
+<div class="hero">
+    <div class="container-fluid container-xxl px-4 pt-4 px-md-5 pt-md-5">
+        <h1 class="text-center ubuntu mt-5">Live Component</h1>
+    </div>
+</div>
+
+<div class="container-fluid container-xxl px-4 pt-4 px-md-5 pt-md-5">
+    {% block list %}
+        <div style="display: grid; gap: 3rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));">
+            {% for demo in demos %}
+                    <div class="demo-box position-relative" style="display: flex;flex-direction: column;">
+                        <div class="demo-container text-center" style="height: 180px; overflow: hidden">
+                            <img src="{{ asset(demo.screenshotFilename) }}"
+                                 class="img-dark-negative"
+                                 style="border-top-left-radius: 12px; border-top-right-radius: 12px; height: 100%;"
+                                 alt="Screenshot of the {{ demo.name }} demo">
+                        </div>
+                        <div class="demo-container-inner p-3" style="flex: 1 auto;">
+                            <h4 class="ubuntu">
+                                <a href="{{ path(demo.route) }}" class="stretched-link">{{ demo.name }}</a>
+                            </h4>
+                            <div>
+                                {{ demo.description }}
+                            </div>
+                        </div>
+                    </div>
+            {% endfor %}
+        </div>
+    {% endblock %}
+</div>
+{% endblock %}
diff --git a/ux.symfony.com/templates/live_component_demo/auto_validating_form.html.twig b/ux.symfony.com/templates/demos/live_component/auto_validating_form.html.twig
similarity index 100%
rename from ux.symfony.com/templates/live_component_demo/auto_validating_form.html.twig
rename to ux.symfony.com/templates/demos/live_component/auto_validating_form.html.twig
diff --git a/ux.symfony.com/templates/live_component_demo/chartjs.html.twig b/ux.symfony.com/templates/demos/live_component/chartjs.html.twig
similarity index 100%
rename from ux.symfony.com/templates/live_component_demo/chartjs.html.twig
rename to ux.symfony.com/templates/demos/live_component/chartjs.html.twig
diff --git a/ux.symfony.com/templates/live_component_demo/dependent_form_fields.html.twig b/ux.symfony.com/templates/demos/live_component/dependent_form_fields.html.twig
similarity index 100%
rename from ux.symfony.com/templates/live_component_demo/dependent_form_fields.html.twig
rename to ux.symfony.com/templates/demos/live_component/dependent_form_fields.html.twig
diff --git a/ux.symfony.com/templates/live_component_demo/form_collection_type.html.twig b/ux.symfony.com/templates/demos/live_component/form_collection_type.html.twig
similarity index 100%
rename from ux.symfony.com/templates/live_component_demo/form_collection_type.html.twig
rename to ux.symfony.com/templates/demos/live_component/form_collection_type.html.twig
diff --git a/ux.symfony.com/templates/live_component_demo/inline_edit.html.twig b/ux.symfony.com/templates/demos/live_component/inline_edit.html.twig
similarity index 100%
rename from ux.symfony.com/templates/live_component_demo/inline_edit.html.twig
rename to ux.symfony.com/templates/demos/live_component/inline_edit.html.twig
diff --git a/ux.symfony.com/templates/live_component_demo/invoice.html.twig b/ux.symfony.com/templates/demos/live_component/invoice.html.twig
similarity index 100%
rename from ux.symfony.com/templates/live_component_demo/invoice.html.twig
rename to ux.symfony.com/templates/demos/live_component/invoice.html.twig
diff --git a/ux.symfony.com/templates/live_component_demo/product_form.html.twig b/ux.symfony.com/templates/demos/live_component/product_form.html.twig
similarity index 100%
rename from ux.symfony.com/templates/live_component_demo/product_form.html.twig
rename to ux.symfony.com/templates/demos/live_component/product_form.html.twig
diff --git a/ux.symfony.com/templates/live_component_demo/upload.html.twig b/ux.symfony.com/templates/demos/live_component/upload.html.twig
similarity index 100%
rename from ux.symfony.com/templates/live_component_demo/upload.html.twig
rename to ux.symfony.com/templates/demos/live_component/upload.html.twig
diff --git a/ux.symfony.com/templates/live_component_demo/voting.html.twig b/ux.symfony.com/templates/demos/live_component/voting.html.twig
similarity index 100%
rename from ux.symfony.com/templates/live_component_demo/voting.html.twig
rename to ux.symfony.com/templates/demos/live_component/voting.html.twig
diff --git a/ux.symfony.com/templates/liveDemoBase.html.twig b/ux.symfony.com/templates/liveDemoBase.html.twig
index 991772d3a19..a985f7736a1 100644
--- a/ux.symfony.com/templates/liveDemoBase.html.twig
+++ b/ux.symfony.com/templates/liveDemoBase.html.twig
@@ -6,7 +6,7 @@
     <header style="">
         <div class="container-fluid container-xxl px-5 py-4" >
             <div class="d-md-flex justify-content-md-between text-center text-md-start align-items-center">
-                <a href="{{ path('app_live_component') }}#demos" style="height:100%;" class="btn btn-outline-primary align-self-center">
+                <a href="{{ path('app_demos') }}#demos" style="height:100%;" class="btn btn-outline-primary align-self-center">
                     <twig:Icon name="arrow-left" />
                     Back to all demos
                 </a>
@@ -20,7 +20,9 @@
 
     <div class="container-fluid container-xxl px-4 px-md-5 mb-5">
         <div class="text-center mt-md-0">
-            <span class="eyebrows">DEMO</span>
+            <p class="eyebrows">
+                <a href="{{ url('app_demos') }}">DEMO</a>
+            </p>
             <h1 class="ubuntu text-center">{{ demo.name }}</h1>
             <div style="font-size: 1rem; line-height: 1.75rem;" class="mt-4">
                 {{ demo.longDescription|markdown_to_html }}
diff --git a/ux.symfony.com/templates/main/_demoBox.html.twig b/ux.symfony.com/templates/main/_demoBox.html.twig
deleted file mode 100644
index 64cd21d3a97..00000000000
--- a/ux.symfony.com/templates/main/_demoBox.html.twig
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="demo-container p-4">
-    <img width="30px" src="{{ asset('images/sf-logo.png') }}" alt="Symfony logo"><p class="d-inline ms-2">{% block demo_title %}{% endblock %}</p>
-</div>
-<div class="demo-container-inner {% block demo_content_padding %}p-4{% endblock %}">
-    {% block demo_content %}{% endblock %}
-</div>
-
-{% block demo_content_secondary %}{% endblock %}
diff --git a/ux.symfony.com/templates/main/_package_in_list.html.twig b/ux.symfony.com/templates/main/_package_in_list.html.twig
index 6c5efd381c2..f15b508bea7 100644
--- a/ux.symfony.com/templates/main/_package_in_list.html.twig
+++ b/ux.symfony.com/templates/main/_package_in_list.html.twig
@@ -2,7 +2,7 @@
     <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: {{ package.gradient }}, {{ package.color }}">
-                <img width="17px" height="17px" src="{{ asset('images/'~package.imageFilename) }}" alt="Image for the {{ package.humanName }} UX package">
+                <img width="17px" height="17px" src="{{ asset('images/ux_packages/'~package.imageFilename) }}" alt="Image for the {{ package.humanName }} UX package">
             </div>
             <h4 class="ubuntu-title ps-2 align-self-center">{{ package.humanName }}</h4>
         </div>
diff --git a/ux.symfony.com/templates/main/_packagesList.html.twig b/ux.symfony.com/templates/main/_packagesList.html.twig
deleted file mode 100644
index e1df6ff1267..00000000000
--- a/ux.symfony.com/templates/main/_packagesList.html.twig
+++ /dev/null
@@ -1,6 +0,0 @@
-
-<div style="display: grid; gap: 3rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));">
-    {% for package in packages %}
-        <twig:PackageBox :package="package" />
-    {% endfor %}
-</div>
diff --git a/ux.symfony.com/templates/main/demos.html.twig b/ux.symfony.com/templates/main/demos.html.twig
new file mode 100644
index 00000000000..3077fb6db00
--- /dev/null
+++ b/ux.symfony.com/templates/main/demos.html.twig
@@ -0,0 +1,36 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}All Symfony UX Demos{% endblock %}
+
+{% block content %}
+
+    <div class="hero">
+        <div class="container-fluid container-xxl px-4 pt-4 px-md-5 pt-md-5">
+            <h1 class="text-center ubuntu mt-5">All Demos</h1>
+        </div>
+    </div>
+
+    <div class="container-fluid container-xxl px-4 py-4 py-md-5">
+        <div style="display: grid; gap: 3rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));">
+            {% for demo in liveComponentDemos %}
+                <div class="demo-box position-relative" style="display: flex;flex-direction: column;">
+                    <div class="demo-container text-center" style="height: 180px; overflow: hidden">
+                        <img src="{{ asset(demo.screenshotFilename) }}"
+                             class="img-dark-negative"
+                             style="border-top-left-radius: 12px; border-top-right-radius: 12px; height: 100%;"
+                             alt="Screenshot of the {{ demo.name }} demo">
+                    </div>
+                    <div class="demo-container-inner p-3" style="flex: 1 auto;">
+                        <h4 class="ubuntu">
+                            <a href="{{ path(demo.route) }}" class="stretched-link">{{ demo.name }}</a>
+                        </h4>
+                        <div>
+                            {{ demo.description }}
+                        </div>
+                    </div>
+                </div>
+            {% endfor %}
+        </div>
+    </div>
+
+{% endblock %}
diff --git a/ux.symfony.com/templates/main/homepage.html.twig b/ux.symfony.com/templates/main/homepage.html.twig
index 7441797bd46..a53c6dcbf0c 100644
--- a/ux.symfony.com/templates/main/homepage.html.twig
+++ b/ux.symfony.com/templates/main/homepage.html.twig
@@ -96,13 +96,13 @@
     <p class="eyebrows" style="margin-top: 111px;">Packages</p>
     <div class="d-md-flex justify-content-md-between text-center align-items-center text-md-start">
         <h2 class="ubuntu pt-2 component-headlines">Install extra <em class="rainbow-emphasis">Packages</em></h2>
-        <a style="height: 100%;" class="btn btn-md btn-outline-primary mt-3 mt-md-0"  href="{{ path('app_all_packages')}}">
+        <a style="height: 100%;" class="btn btn-md btn-outline-primary mt-3 mt-md-0"  href="{{ path('app_packages')}}">
             Browse all Packages
             <twig:Icon name="arrow-right" style="transform: rotate(-45deg);"/>
         </a>
     </div>
     <div class="row mt-3 mt-md-5">
-        {{ include('main/_packagesList.html.twig') }}
+        {{ block('list', 'main/packages.html.twig') }}
     </div>
 </div>
 {% endblock %}
diff --git a/ux.symfony.com/templates/main/packages.html.twig b/ux.symfony.com/templates/main/packages.html.twig
index 7d24254c5ef..f35234d84eb 100644
--- a/ux.symfony.com/templates/main/packages.html.twig
+++ b/ux.symfony.com/templates/main/packages.html.twig
@@ -7,12 +7,17 @@
     <div class="container-fluid container-xxl px-4 pt-4 px-md-5 pt-md-5">
         <h1 class="text-center ubuntu mt-5">All Packages</h1>
         <p class="text-center mt-2 mb-5">A treasure chest of packages to solve your<br>frontend problems.</p>
-
     </div>
 </div>
 
 <div class="container-fluid container-xxl px-4 pt-4 px-md-5 pt-md-5">
-    {{ include('main/_packagesList.html.twig') }}
+    {% block list %}
+        <div style="display: grid; gap: 3rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));">
+            {% for package in packages %}
+                <twig:PackageBox :package="package"/>
+            {% endfor %}
+        </div>
+    {% endblock %}
 </div>
 {% endblock %}
 
diff --git a/ux.symfony.com/templates/packageBase.html.twig b/ux.symfony.com/templates/packageBase.html.twig
index 23bd54364d0..82e1f0e4604 100644
--- a/ux.symfony.com/templates/packageBase.html.twig
+++ b/ux.symfony.com/templates/packageBase.html.twig
@@ -1,6 +1,6 @@
 {% extends 'base.html.twig' %}
 
-{% set package = twigPackageHelper.currentPackage() %}
+{#{% set package = twigPackageHelper.currentPackage() %}#}
 {% block title %}{{ package.humanName }} | Symfony UX Packages{% endblock %}
 
 {% block header %}
@@ -11,43 +11,50 @@
 
 {% block content %}
 
+<article>
     {% block package_header %}{% endblock %}
 
-    <div class="container-fluid container-xxl px-4 pt-4 px-md-5 pt-md-5">
-        <div class="arrow mb-3 d-none d-md-block"></div>
-
-        <div class="row mb-5">
-            <div class="col-12 col-md-6">
-                {% block code_block_left %}{% endblock %}
-            </div>
-            <div class="col-12 col-md-6 mt-3 mt-md-0">
-                {% block code_block_right %}{% endblock %}
+    {% block package_content %}
+        <section class="container-fluid container-xxl px-4 pt-4 px-md-5 pt-md-5">
+            <div class="arrow mb-3 d-none d-md-block"></div>
+            <div class="row mb-5">
+                <div class="col-12 col-md-6">
+                    {% block code_block_left %}{% endblock %}
+                </div>
+                <div class="col-12 col-md-6 mt-3 mt-md-0">
+                    {% block code_block_right %}{% endblock %}
+                </div>
             </div>
-        </div>
-
-        {% if block('demo_title') is defined %}
-            {% set demoTitle = block('demo_title') %}
-            {% set demoContent = block('demo_content') %}
-            <div id="demo" style="position: relative;">
-                <div class="arrow-2 mb-3 d-sm-block" style="position:absolute; top:-55px; right: -25px;"></div>
-                {% embed 'main/_demoBox.html.twig' %}
-                    {% block demo_title %}{{ demoTitle|raw }}{% endblock %}
-                    {% block demo_content %}{{ demoContent|raw }}{% endblock %}
-                {% endembed %}
-            </div>
-        {% endif %}
-
-        {{ include('main/_installTerminal.html.twig', {
-            package: package,
-        }) }}
+            {% block package_demo %}
+                {% if block('demo_title') is defined %}
+                    {% set demoTitle = block('demo_title') %}
+                    {% set demoContent = block('demo_content') %}
+                    <div id="demo" style="position: relative;">
+                        <div class="arrow-2 mb-3 d-sm-block" style="position:absolute; top:-55px; right: -25px;"></div>
+                        {% embed 'ux_packages/_package_demo.html.twig' %}
+                            {% block title %}{{ demoTitle|raw }}{% endblock %}
+                            {% block content %}{{ demoContent|raw }}{% endblock %}
+                        {% endembed %}
+                    </div>
+                {% endif %}
+            {% endblock %}
+        </section>
+    {% endblock %}
 
-        {% block package_bottom %}{% endblock %}
-    </div>
+    {% block package_install %}
+        <section class="container-fluid container-xxl px-4 pt-4 px-md-5 pt-md-5">
+            {{ include('ux_packages/_package_install.html.twig', {
+                package: package,
+            }) }}
+        </section>
+    {% endblock %}
 
-    {% block documentation_links %}
-        {{ include('main/_documentationLinks.html.twig', {
+    {% block package_links %}
+        {{ include('ux_packages/_package_links.html.twig', {
             package: package
         }) }}
     {% endblock %}
 
+</article>
+
 {% endblock %}
diff --git a/ux.symfony.com/templates/ux_packages/_package_demo.html.twig b/ux.symfony.com/templates/ux_packages/_package_demo.html.twig
new file mode 100644
index 00000000000..b4f30cc8066
--- /dev/null
+++ b/ux.symfony.com/templates/ux_packages/_package_demo.html.twig
@@ -0,0 +1,9 @@
+<div class="demo-container p-4">
+    <img width="30px" src="{{ asset('images/sf-logo.png') }}" alt="Symfony logo">
+    <p class="d-inline ms-2">{% block title %}{% endblock %}</p>
+</div>
+<div class="demo-container-inner p-4">
+    {% block content %}{% endblock %}
+</div>
+
+{% block content_secondary %}{% endblock %}
diff --git a/ux.symfony.com/templates/main/_installTerminal.html.twig b/ux.symfony.com/templates/ux_packages/_package_install.html.twig
similarity index 100%
rename from ux.symfony.com/templates/main/_installTerminal.html.twig
rename to ux.symfony.com/templates/ux_packages/_package_install.html.twig
diff --git a/ux.symfony.com/templates/main/_documentationLinks.html.twig b/ux.symfony.com/templates/ux_packages/_package_links.html.twig
similarity index 52%
rename from ux.symfony.com/templates/main/_documentationLinks.html.twig
rename to ux.symfony.com/templates/ux_packages/_package_links.html.twig
index ffdeb4f8112..54ac40ee3bd 100644
--- a/ux.symfony.com/templates/main/_documentationLinks.html.twig
+++ b/ux.symfony.com/templates/ux_packages/_package_links.html.twig
@@ -2,22 +2,22 @@
     <div class="container-fluid container-xxl p-4 p-md-5">
         <div style="display: grid; gap: 2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));">
             <twig:DocsLink
-                    url="{{ package.officialDocsUrl }}"
-                    title="Symfony UX {{ package.humanName }} Docs"
-                    text="Get going with the official documentation."
+                url="{{ package.officialDocsUrl }}"
+                title="Symfony UX {{ package.humanName }} Docs"
+                text="Get going with the official documentation."
             />
             {% if package.screencastLink %}
                 <twig:DocsLink
-                        title="Screencasts"
-                        text="{{ package.screencastLinkText }}"
-                        url="{{ package.screencastLink }}"
+                    title="Screencasts"
+                    text="{{ package.screencastLinkText }}"
+                    url="{{ package.screencastLink }}"
                 />
             {% endif %}
             {% if package.docsLink %}
                 <twig:DocsLink
-                        url="{{ package.docsLink }}"
-                        title="Related Docs"
-                        text="{{ package.docsLinkText }}"
+                    url="{{ package.docsLink }}"
+                    title="Related Docs"
+                    text="{{ package.docsLinkText }}"
                 />
             {% endif %}
         </div>
diff --git a/ux.symfony.com/templates/chart/chartjs.html.twig b/ux.symfony.com/templates/ux_packages/chartjs.html.twig
similarity index 86%
rename from ux.symfony.com/templates/chart/chartjs.html.twig
rename to ux.symfony.com/templates/ux_packages/chartjs.html.twig
index 4e2c12b99f1..10fcc93519b 100644
--- a/ux.symfony.com/templates/chart/chartjs.html.twig
+++ b/ux.symfony.com/templates/ux_packages/chartjs.html.twig
@@ -18,12 +18,12 @@
 {% endblock %}
 
 {% block code_block_left %}
-    <twig:CodeBlock filename="src/Controller/ChartController.php" height="250px"/>
+    <twig:CodeBlock filename="src/Controller/UxPackage/ChartjsController.php" height="250px"/>
 {% endblock %}
 
 {% block code_block_right %}
     <twig:CodeBlock
-        filename="templates/chart/chartjs.html.twig"
+        filename="templates/ux_packages/chartjs.html.twig"
         height="250px"
         targetTwigBlock="demo_content"
     />
diff --git a/ux.symfony.com/templates/cropper/cropper.html.twig b/ux.symfony.com/templates/ux_packages/cropperjs.html.twig
similarity index 93%
rename from ux.symfony.com/templates/cropper/cropper.html.twig
rename to ux.symfony.com/templates/ux_packages/cropperjs.html.twig
index cddb4bd837a..5e3e7a88958 100644
--- a/ux.symfony.com/templates/cropper/cropper.html.twig
+++ b/ux.symfony.com/templates/ux_packages/cropperjs.html.twig
@@ -18,12 +18,12 @@
 {% endblock %}
 
 {% block code_block_left %}
-    <twig:CodeBlock filename="src/Controller/CropperController.php" height="270px" />
+    <twig:CodeBlock filename="src/Controller/UxPackage/CropperjsController.php" height="270px" />
 {% endblock %}
 
 {% block code_block_right %}
     <twig:CodeBlock
-        filename="templates/cropper/cropper.html.twig"
+        filename="templates/ux_packages/cropperjs.html.twig"
         height="270px"
         targetTwigBlock="demo_content"
     />
diff --git a/ux.symfony.com/templates/live_component/live_component.html.twig b/ux.symfony.com/templates/ux_packages/live_component.html.twig
similarity index 96%
rename from ux.symfony.com/templates/live_component/live_component.html.twig
rename to ux.symfony.com/templates/ux_packages/live_component.html.twig
index 2837b964327..9e2b141dd38 100644
--- a/ux.symfony.com/templates/live_component/live_component.html.twig
+++ b/ux.symfony.com/templates/ux_packages/live_component.html.twig
@@ -42,8 +42,8 @@
 
 {% block documentation_links %}{% endblock %}
 
-{% block package_bottom %}
-
+{% block package_links %}
+<section class="container-fluid container-xxl px-4 pt-4 px-md-5 pt-md-5">
     <h2 class="eyebrows mt-5" id="demos">Live Component Demos</h2>
     <div class="d-md-flex justify-content-md-between text-center align-items-center text-md-start">
         <h2 class="ubuntu pt-2 component-headlines">Find out what else you can <span style="color: #AE5929;">build</span></h2>
@@ -76,4 +76,5 @@
             {% endfor %}
         </div>
     </div>
+</section>
 {% endblock %}
diff --git a/ux.symfony.com/templates/notifier/notify.html.twig b/ux.symfony.com/templates/ux_packages/notify.html.twig
similarity index 87%
rename from ux.symfony.com/templates/notifier/notify.html.twig
rename to ux.symfony.com/templates/ux_packages/notify.html.twig
index 38caf9514b7..9e6370e33e7 100644
--- a/ux.symfony.com/templates/notifier/notify.html.twig
+++ b/ux.symfony.com/templates/ux_packages/notify.html.twig
@@ -17,12 +17,12 @@
 {% endblock %}
 
 {% block code_block_left %}
-    <twig:CodeBlock filename="src/Controller/NotifierController.php" height="300px"/>
+    <twig:CodeBlock filename="src/Controller/UxPackage/NotifyController.php" height="300px"/>
 {% endblock %}
 
 {% block code_block_right %}
     <twig:CodeBlock
-        filename="templates/notifier/notify.html.twig"
+        filename="templates/ux_packages/notify.html.twig"
         height="300px"
         targetTwigBlock="demo_content"
     />
diff --git a/ux.symfony.com/templates/ux_packages/svelte.html.twig b/ux.symfony.com/templates/ux_packages/svelte.html.twig
index 62c1f197b40..cf19b8d01ff 100644
--- a/ux.symfony.com/templates/ux_packages/svelte.html.twig
+++ b/ux.symfony.com/templates/ux_packages/svelte.html.twig
@@ -32,7 +32,7 @@
 
 {% block demo_content %}
     <div {{ svelte_component('PackageSearch', {
-        packages: packagesData
+        packages: packagesData,
     }) }}>
         Loading... <i class="fas fa-cog fa-spin fa-3x"></i>
     </div>
diff --git a/ux.symfony.com/templates/swup/swup.html.twig b/ux.symfony.com/templates/ux_packages/swup.html.twig
similarity index 92%
rename from ux.symfony.com/templates/swup/swup.html.twig
rename to ux.symfony.com/templates/ux_packages/swup.html.twig
index 43e106d9d6d..9e4bcac804e 100644
--- a/ux.symfony.com/templates/swup/swup.html.twig
+++ b/ux.symfony.com/templates/ux_packages/swup.html.twig
@@ -17,12 +17,12 @@
 {% endblock %}
 
 {% block code_block_left %}
-    <twig:CodeBlock filename="src/Controller/SwupController.php"/>
+    <twig:CodeBlock filename="src/Controller/UxPackage/SwupController.php"/>
 {% endblock %}
 
 {% block code_block_right %}
     <twig:CodeBlock
-        filename="templates/swup/swup.html.twig"
+        filename="templates/ux_packages/swup.html.twig"
         targetTwigBlock="swup_specific_demo_content"
     />
 {% endblock %}
diff --git a/ux.symfony.com/templates/turbo/turbo.html.twig b/ux.symfony.com/templates/ux_packages/turbo.html.twig
similarity index 86%
rename from ux.symfony.com/templates/turbo/turbo.html.twig
rename to ux.symfony.com/templates/ux_packages/turbo.html.twig
index 08264cb90e1..188c953c177 100644
--- a/ux.symfony.com/templates/turbo/turbo.html.twig
+++ b/ux.symfony.com/templates/ux_packages/turbo.html.twig
@@ -1,7 +1,6 @@
 {% extends 'packageBase.html.twig' %}
 
-{% block content %}
-
+{% block package_header %}
     {% component PackageHeader with {
         package: 'turbo',
         eyebrowText: 'Speed of an SPA'
@@ -16,12 +15,14 @@
             courtesy of <a class="font-white text-underline" href="https://turbo.hotwired.dev/" rel="external noopener noreferrer">Turbo</a>
 
             <div style="position: absolute;  bottom: 4rem;  left: 50%;  transform: translateX(-50%);">
-                {{ include('turbo/_chatMessageCount.html.twig', {messageCount: this.messageCount }) }}
+                {{ include('ux_packages/turbo/_chatMessageCount.html.twig', {messageCount: this.messageCount }) }}
             </div>
         {% endblock %}
 
     {% endcomponent %}
+{% endblock %}
 
+{% block package_content %}
     <div class="container-fluid container-xxl px-4 pt-4 px-md-5 pt-md-5">
 
         <section class="row mb-5">
@@ -30,7 +31,6 @@
                     <h2 class="ubuntu mt-3 mt-md-5" id="drive">Turbo <span class="font-purple">Drive</span></h2>
                     <p class="mt-2">Transform all link clicks and form submits into Ajax
                     calls to get that single-page-application feel.</p>
-
                     <div class="alert alert-secondary d-flex justify-content-start col-12 mt-5">
                         <img width="18px" height="18px" src="{{ asset('images/info-icon.png') }}" alt="Icon to indication information">
                         <p class="info-tooltips ms-2 mb-0">
@@ -40,16 +40,14 @@
                     </div>
                 </div>
             </div>
-
             <div class="col-12 col-md-6 order-md-1">
-                {% embed 'main/_demoBox.html.twig' %}
-                    {% block demo_title %}
+                {% embed 'ux_packages/_package_demo.html.twig' %}
+                    {% block title %}
                         Turbo Drive Demo
                     {% endblock %}
-                    {% block demo_content %}
+                    {% block content %}
                         {% if name and animal %}
                             <div>Say hello to {{ name }} the brave & noble {{ animal }}!</div>
-
                             <a href="{{ path('app_turbo') }}"><twig:Icon name="arrow-left" /> Back</a>
                         {% else %}
                             <div class="mb-3">Build yourself a new pet</div>
@@ -67,7 +65,7 @@
                                         }) }}
                                     </div>
                                 </div>
-                                    <button type="submit" class="btn btn-dark mt-5" style="width: 100%;">Create!</button>
+                                <button type="submit" class="btn btn-dark mt-5" style="width: 100%;">Create!</button>
                             </form>
                         {% endif %}
                     {% endblock %}
@@ -80,7 +78,6 @@
                 <div class="px-md-5">
                     <h2 class="ubuntu mt-5" id="frames">Turbo <span class="font-purple">Frames</span></h2>
                     <div>Decompose complex pages into different parts that load and behave independently. Try it - it's smooth.</div>
-
                     <div class="alert alert-secondary d-flex col-12 justify-content-start mt-5">
                         <img width="18px" height="18px" src="{{ asset('images/info-icon.png') }}" alt="Icon to indication information">
                         <p class="info-tooltips ms-2 mb-0">
@@ -91,13 +88,12 @@
                     </div>
                 </div>
             </div>
-
             <div class="col-12 col-md-6">
-                {% embed 'main/_demoBox.html.twig' %}
-                    {% block demo_title %}
+                {% embed 'ux_packages/_package_demo.html.twig' %}
+                    {% block title %}
                         Turbo Frames Demo
                     {% endblock %}
-                    {% block demo_content %}
+                    {% block content %}
                         <turbo-frame
                             id="daily-todos"
                             src="{{ path('app_turbo_todo_list') }}"
@@ -115,9 +111,7 @@
                         Deliver page updates - to *any* elements on your page -
                         directly from Symfony. Add Mercure to do this for *any*
                         users on your site, in real-time.
-
                     </div>
-
                     <div class="alert alert-secondary d-flex justify-content-start col-12 mt-5">
                         <img width="18px" height="18px" src="{{ asset('images/info-icon.png') }}" alt="Icon to indication information">
                         <p class="info-tooltips ms-2 mb-0"><twig:Icon name="arrow-left" />
@@ -128,21 +122,21 @@
                 </div>
             </div>
             <div class="col-12 col-md-6 demo-chat">
-                {% embed 'main/_demoBox.html.twig' %}
-                    {% block demo_title %}
+                {% embed 'ux_packages/_package_demo.html.twig' %}
+                    {% block title %}
                         Turbo Streams Demo <small>(your username is <code> {{ myUsername }}</code>)</small>
                     {% endblock %}
-                    {% block demo_content %}
+                    {% block content %}
                         <div style="height: 150px; overflow: auto;">
                             <ul class="list-unstyled" id="chat-box">
-                                {{ include('turbo/_chatList.html.twig') }}
+                                {{ include('ux_packages/turbo/_chatList.html.twig') }}
                             </ul>
                         </div>
                     {% endblock %}
-                    {% block demo_content_secondary %}
+                    {% block content_secondary %}
                     <div class="demo-container-inner-secondary p-4">
                         <form id="chat-form" action="{{ path('app_turbo_chat') }}" method="POST">
-                            {{ include('turbo/_chatForm.html.twig') }}
+                            {{ include('ux_packages/turbo/_chatForm.html.twig') }}
                         </form>
                     </div>
                     {% endblock %}
@@ -150,12 +144,6 @@
             </div>
         </section>
 
-        <section>
-            {{ include('main/_installTerminal.html.twig') }}
-        </section>
     </div>
-
-    {{ include('main/_documentationLinks.html.twig') }}
-
 {% endblock %}
 
diff --git a/ux.symfony.com/templates/turbo/_chatForm.html.twig b/ux.symfony.com/templates/ux_packages/turbo/_chatForm.html.twig
similarity index 100%
rename from ux.symfony.com/templates/turbo/_chatForm.html.twig
rename to ux.symfony.com/templates/ux_packages/turbo/_chatForm.html.twig
diff --git a/ux.symfony.com/templates/turbo/_chatList.html.twig b/ux.symfony.com/templates/ux_packages/turbo/_chatList.html.twig
similarity index 100%
rename from ux.symfony.com/templates/turbo/_chatList.html.twig
rename to ux.symfony.com/templates/ux_packages/turbo/_chatList.html.twig
diff --git a/ux.symfony.com/templates/turbo/_chatMessageCount.html.twig b/ux.symfony.com/templates/ux_packages/turbo/_chatMessageCount.html.twig
similarity index 100%
rename from ux.symfony.com/templates/turbo/_chatMessageCount.html.twig
rename to ux.symfony.com/templates/ux_packages/turbo/_chatMessageCount.html.twig
diff --git a/ux.symfony.com/templates/turbo/_demo_message.html.twig b/ux.symfony.com/templates/ux_packages/turbo/_demo_message.html.twig
similarity index 100%
rename from ux.symfony.com/templates/turbo/_demo_message.html.twig
rename to ux.symfony.com/templates/ux_packages/turbo/_demo_message.html.twig
diff --git a/ux.symfony.com/templates/turbo/add_todo.html.twig b/ux.symfony.com/templates/ux_packages/turbo/add_todo.html.twig
similarity index 91%
rename from ux.symfony.com/templates/turbo/add_todo.html.twig
rename to ux.symfony.com/templates/ux_packages/turbo/add_todo.html.twig
index 86bdf74df29..1de5f6e7a5b 100644
--- a/ux.symfony.com/templates/turbo/add_todo.html.twig
+++ b/ux.symfony.com/templates/ux_packages/turbo/add_todo.html.twig
@@ -3,7 +3,7 @@
 {% block body %}
     <h1>Add a TODO Item</h1>
 
-    {{ include('turbo/_demo_message.html.twig') }}
+    {{ include('ux_packages/turbo/_demo_message.html.twig') }}
 
     <turbo-frame id="daily-todos">
         <a href="{{ path('app_turbo_todo_list') }}"><twig:Icon name="arrow-left" /> Back to list</a>
diff --git a/ux.symfony.com/templates/turbo/all_users_chat_success.stream.html.twig b/ux.symfony.com/templates/ux_packages/turbo/all_users_chat_success.stream.html.twig
similarity index 60%
rename from ux.symfony.com/templates/turbo/all_users_chat_success.stream.html.twig
rename to ux.symfony.com/templates/ux_packages/turbo/all_users_chat_success.stream.html.twig
index 62aca03af17..fa6ef011277 100644
--- a/ux.symfony.com/templates/turbo/all_users_chat_success.stream.html.twig
+++ b/ux.symfony.com/templates/ux_packages/turbo/all_users_chat_success.stream.html.twig
@@ -1,11 +1,11 @@
 <turbo-stream action="update" target="chat-box">
     <template>
-        {{ include('turbo/_chatList.html.twig') }}
+        {{ include('ux_packages/turbo/_chatList.html.twig') }}
     </template>
 </turbo-stream>
 
 <turbo-stream action="replace" target="message-count-header">
     <template>
-        {{ include('turbo/_chatMessageCount.html.twig') }}
+        {{ include('ux_packages/turbo/_chatMessageCount.html.twig') }}
     </template>
 </turbo-stream>
diff --git a/ux.symfony.com/templates/turbo/chat_success.stream.html.twig b/ux.symfony.com/templates/ux_packages/turbo/chat_success.stream.html.twig
similarity index 60%
rename from ux.symfony.com/templates/turbo/chat_success.stream.html.twig
rename to ux.symfony.com/templates/ux_packages/turbo/chat_success.stream.html.twig
index ec132c76fc6..d02f64f0260 100644
--- a/ux.symfony.com/templates/turbo/chat_success.stream.html.twig
+++ b/ux.symfony.com/templates/ux_packages/turbo/chat_success.stream.html.twig
@@ -1,5 +1,5 @@
 <turbo-stream action="update" target="chat-form">
     <template>
-        {{ include('turbo/_chatForm.html.twig') }}
+        {{ include('ux_packages/turbo/_chatForm.html.twig') }}
     </template>
 </turbo-stream>
diff --git a/ux.symfony.com/templates/turbo/todos.html.twig b/ux.symfony.com/templates/ux_packages/turbo/todos.html.twig
similarity index 93%
rename from ux.symfony.com/templates/turbo/todos.html.twig
rename to ux.symfony.com/templates/ux_packages/turbo/todos.html.twig
index d6097cd2f8f..e4133133d13 100644
--- a/ux.symfony.com/templates/turbo/todos.html.twig
+++ b/ux.symfony.com/templates/ux_packages/turbo/todos.html.twig
@@ -3,7 +3,7 @@
 {% block body %}
     <h1>Today's TODO List!</h1>
 
-    {{ include('turbo/_demo_message.html.twig') }}
+    {{ include('ux_packages/turbo/_demo_message.html.twig') }}
 
     <turbo-frame id="daily-todos">
         <ul class="mb-0">
diff --git a/ux.symfony.com/tests/Functional/RedirectUrlTest.php b/ux.symfony.com/tests/Functional/RedirectUrlTest.php
new file mode 100644
index 00000000000..d2effe3e51f
--- /dev/null
+++ b/ux.symfony.com/tests/Functional/RedirectUrlTest.php
@@ -0,0 +1,35 @@
+<?php
+
+namespace App\Tests\Functional;
+
+use Symfony\Bundle\FrameworkBundle\Test\WebTestCase;
+
+class RedirectUrlTest extends WebTestCase
+{
+    /**
+     * @dataProvider getRedirectionTests
+     */
+    public function testUrlRedirections(string $url, string $expectedUrl, int $expectedStatusCode)
+    {
+        $client = self::createClient();
+        $client->request('GET', $url);
+        $this->assertResponseRedirects($expectedUrl, $expectedStatusCode);
+    }
+
+    protected static function getRedirectionTests(): array
+    {
+        return [
+            // LiveComponent Demos
+            ['/live-component/demos/auto-validating-form', '/demos/live-component/auto-validating-form', 301],
+            ['/live-component/demos/chartjs', '/demos/live-component/chartjs', 301],
+            ['/live-component/demos/dependent-form-fields', '/demos/live-component/dependent-form-fields', 301],
+            ['/live-component/demos/form-collection-type', '/demos/live-component/form-collection-type', 301],
+            ['/live-component/demos/inline-edit', '/demos/live-component/inline-edit', 301],
+            ['/live-component/demos/invoice', '/demos/live-component/invoice', 301],
+            ['/live-component/demos/product-form', '/demos/live-component/product-form', 301],
+            ['/live-component/demos/upload', '/demos/live-component/upload', 301],
+            ['/live-component/demos/voting', '/demos/live-component/voting', 301],
+            ['/live-component/demos', '/demos', 302],
+        ];
+    }
+}
diff --git a/ux.symfony.com/tests/Functional/UxPackagesTest.php b/ux.symfony.com/tests/Functional/UxPackagesTest.php
index 72371975386..e9ec979f7b5 100644
--- a/ux.symfony.com/tests/Functional/UxPackagesTest.php
+++ b/ux.symfony.com/tests/Functional/UxPackagesTest.php
@@ -2,8 +2,8 @@
 
 namespace App\Tests\Functional;
 
-use App\Model\Package;
-use App\Service\PackageRepository;
+use App\Model\UxPackage;
+use App\Service\UxPackageRepository;
 use Symfony\Bundle\FrameworkBundle\Test\KernelTestCase;
 use Zenstruck\Browser\Test\HasBrowser;
 
@@ -24,7 +24,7 @@ public function testAllPackagesPage(): void
     /**
      * @dataProvider getSmokeTests
      */
-    public function testPackagePagesAllLoad(Package $package, string $expectedText): void
+    public function testPackagePagesAllLoad(UxPackage $package, string $expectedText): void
     {
         $this->browser()
             ->visit('/'.$package->getName())
@@ -36,7 +36,7 @@ public function testPackagePagesAllLoad(Package $package, string $expectedText):
 
     public function getSmokeTests(): \Generator
     {
-        $repository = new PackageRepository();
+        $repository = new UxPackageRepository();
         foreach ($repository->findAll() as $package) {
             if ('live-component' === $package->getName()) {
                 // Live Component has a different bottom section