add votemonitor mock data

app/Livewire/LiveData.php

@@ -0,0 +1,23 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Livewire;
+
+use Livewire\Component;
+
+class LiveData extends Component
+{
+    public function render()
+    {
+        return view('livewire.live-data', [
+            'counters' => [
+                'observers' => 10,
+                'polling_stations' => 100,
+                'started_forms' => 50,
+                'questions_answered' => 1000,
+                'flagged_answers' => 10,
+            ],
+        ]);
+    }
+}

lang/en/app.php

@@ -23,4 +23,16 @@
         'name' => 'We Vote for EU',
         'description' => 'We are approaching a single, vibrant election event that unites over 400 million citizens across the European Union. EU elections are not just a series of national votes but a collective celebration of our shared identity and democratic values. As EU citizens, we come together to shape our common future, transcending borders and embracing the strength of our diversity. We Vote for EU provides all EU citizens with essential information on how to cast their votes and find polling stations quickly, regardless of their location.',
     ],
+
+    'votemonitor' => [
+        'title' => 'Vote Monitor live data',
+        'description' => '2024 EU Parliament elections are observed by Non-governmental organizations in three EU countries through Vote Monitor App, developed by Commit Global - Code for Romania. [See more about Vote Monitor](https://www.commitglobal.org/en/vote-monitor).',
+        'counters' => [
+            'observers' => 'Observers on field',
+            'polling_stations' => 'Polling stations',
+            'started_forms' => 'Started forms',
+            'questions_answered' => 'Questions answered',
+            'flagged_answers' => 'Flagged answers',
+        ],
+    ],
 ];

resources/views/livewire/live-data.blade.php

@@ -0,0 +1,22 @@
+<section class="container relative max-w-6xl py-32 md:py-48">
+    <div
+        class="prose md:prose-lg lg:prose-xl max-w-none prose-headings:font-semibold prose-a:text-primary-800 prose-a:font-medium hover:prose-a:no-underline">
+        <h2>{{ __('app.votemonitor.title') }}</h2>
+        <div class="mt-6 text-gray-500">
+            {!! Str::markdown(__('app.votemonitor.description')) !!}
+        </div>
+    </div>
+
+    <dl class="grid grid-cols-1 gap-5 mt-5 sm:grid-cols-6">
+        @foreach ($counters as $key => $value)
+            <div @class([
+                'px-4 py-5 overflow-hidden bg-white rounded-lg drop-shadow sm:p-6',
+                'ring-1 ring-gray-200',
+                $loop->iteration <= 3 ? 'sm:col-span-2' : 'sm:col-span-3',
+            ])>
+                <dt class="text-sm font-medium text-gray-500 truncate">{{ __("app.votemonitor.counters.$key") }}</dt>
+                <dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900">{{ $value }}</dd>
+            </div>
+        @endforeach
+    </dl>
+</section>

resources/views/livewire/pages/home.blade.php

@@ -1,10 +1,10 @@
 <div class="relative">
     <x-hero>
         <x-slot name="title">
-            <span class="font-light text-slate-900">
+            <span class="font-normal text-slate-900">
                 {{ __('app.hero.title') }}
             </span>
-            <span class="font-semibold text-primary-800">
+            <span class="font-bold text-primary-800">
                 {{ __('app.hero.name') }}
             </span>
         </x-slot>
@@ -34,4 +34,6 @@
             </div>
         </div>
     </div>
+
+    <livewire:live-data />
 </div>