feat(ui): add multi-language icon and update region select layout

resources/views/flux/icon/languages.blade.php

@@ -0,0 +1,48 @@
+@blaze
+
+{{-- Credit: Lucide (https://lucide.dev) --}}
+
+@props([
+    'variant' => 'outline',
+])
+
+@php
+if ($variant === 'solid') {
+    throw new \Exception('The "solid" variant is not supported in Lucide.');
+}
+
+$classes = Flux::classes('shrink-0')
+    ->add(match($variant) {
+        'outline' => '[:where(&)]:size-6',
+        'solid' => '[:where(&)]:size-6',
+        'mini' => '[:where(&)]:size-5',
+        'micro' => '[:where(&)]:size-4',
+    });
+
+$strokeWidth = match ($variant) {
+    'outline' => 2,
+    'mini' => 2.25,
+    'micro' => 2.5,
+};
+@endphp
+
+<svg
+    {{ $attributes->class($classes) }}
+    data-flux-icon
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="{{ $strokeWidth }}"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    data-slot="icon"
+>
+  <path d="m5 8 6 6" />
+  <path d="m4 14 6-6 2-3" />
+  <path d="M2 5h12" />
+  <path d="M7 2h1" />
+  <path d="m22 22-5-10-5 10" />
+  <path d="M14 18h6" />
+</svg>

resources/views/web/livewire/region-select.blade.php

@@ -1,34 +1,42 @@
 <flux:main container>
-  <flux:heading size="xl" class="mb-section flex items-center gap-ui/2 justify-center">
-    <flux:icon.hellofresh class="text-accent" />
-    {{ __('Select your region') }}
-  </flux:heading>
+  <div class="flex flex-col items-center justify-center gap-section max-w-4xl mx-auto">
+    <flux:heading size="xl" class="flex items-center gap-ui/2 justify-center">
+      <flux:icon.hellofresh class="text-accent" />
+      {{ config('app.name') }}
+    </flux:heading>
+    <flux:text class="max-md:hidden text-center">
+      Unofficial HelloFresh recipe database with weekly menus, shopping lists, ingredient tracking, multi-language support, and a REST API.
+    </flux:text>
+    <flux:heading size="lg" class="flex items-center gap-ui/2 justify-center">
+      <flux:icon.languages />
+      {{ __('Select your region') }}
+    </flux:heading>
+    <div class="grid grid-cols-1 gap-section sm:grid-cols-2 lg:grid-cols-3 w-full">
+      @foreach ($this->countries as $country)
+        <flux:card wire:key="country-{{ $country->id }}" size="sm">
+          <div class="flex items-center justify-center gap-ui mb-ui">
+            <x-flag :code="$country->code" />
+            <flux:heading size="lg">
+              {{ __('country.' . $country->code) }}
+            </flux:heading>
+          </div>
 
-  <div class="grid grid-cols-1 gap-section sm:grid-cols-2 lg:grid-cols-3">
-    @foreach ($this->countries as $country)
-      <flux:card wire:key="country-{{ $country->id }}" size="sm">
-        <div class="flex items-center justify-center gap-ui mb-ui">
-          <x-flag :code="$country->code" />
-          <flux:heading size="lg">
-            {{ __('country.' . $country->code) }}
-          </flux:heading>
-        </div>
-
-        <div class="flex flex-wrap justify-center gap-ui">
-          @foreach ($country->locales as $locale)
-            <flux:button
-              wire:key="locale-{{ $country->id }}-{{ $locale }}"
-              :href="localized_route('localized.recipes.index', country: $country, locale: $locale)"
-              variant="primary"
-              size="sm"
-              :lang="$locale . '-' . $country->code"
-              wire:navigate
-            >
-              {{ __('language.' . $locale, [], $locale) }}
-            </flux:button>
-          @endforeach
-        </div>
-      </flux:card>
-    @endforeach
+          <div class="flex flex-wrap justify-center gap-ui">
+            @foreach ($country->locales as $locale)
+              <flux:button
+                wire:key="locale-{{ $country->id }}-{{ $locale }}"
+                :href="localized_route('localized.recipes.index', country: $country, locale: $locale)"
+                variant="primary"
+                size="sm"
+                :lang="$locale . '-' . $country->code"
+                wire:navigate
+              >
+                {{ __('language.' . $locale, [], $locale) }}
+              </flux:button>
+            @endforeach
+          </div>
+        </flux:card>
+      @endforeach
+    </div>
   </div>
 </flux:main>