From 28a4ea45d536381cc782a91be1f24e64d3297935 Mon Sep 17 00:00:00 2001
From: Florin Zarafu <48326563+FlorinZarafu@users.noreply.github.com>
Date: Wed, 28 Jun 2023 15:25:05 +0300
Subject: [PATCH] Projects Map, Articles, Gale Regionale (#62)

* update regional controller

* added texts

* update articles pages

* update regional pages

* added map component

* update cards components

* added components
---
 app/Http/Controllers/RegionalController.php   |  56 +++---
 resources/js/Components/cards/ArticleCard.vue |   2 +-
 resources/js/Components/cards/Edition.vue     |  57 ++++++
 resources/js/Components/cards/ProjectCard.vue |   2 +-
 .../js/Components/cards/RegionalProject.vue   |   2 +-
 resources/js/Components/maps/Map.vue          | 146 +++++++++++++++
 .../js/Components/modals/ModalAction.vue      |  16 +-
 resources/js/Components/timers/Countdown.vue  |   7 +
 .../js/Pages/Public/Articles/Article.vue      |   2 +-
 .../js/Pages/Public/Articles/Articles.vue     |   2 +-
 .../js/Pages/Public/Projects/Projects.vue     |  56 +++++-
 .../js/Pages/Public/Regional/LastEdition.vue  |   2 +-
 .../js/Pages/Public/Regional/Regional.vue     | 167 +++---------------
 resources/js/locales/ro.js                    |   6 +-
 14 files changed, 332 insertions(+), 191 deletions(-)
 create mode 100644 resources/js/Components/cards/Edition.vue
 create mode 100644 resources/js/Components/maps/Map.vue

diff --git a/app/Http/Controllers/RegionalController.php b/app/Http/Controllers/RegionalController.php
index e7940930..0b9d2141 100644
--- a/app/Http/Controllers/RegionalController.php
+++ b/app/Http/Controllers/RegionalController.php
@@ -4,6 +4,7 @@
 
 namespace App\Http\Controllers;
 
+use App\Models\County;
 use App\Models\Project;
 use Inertia\Inertia;
 
@@ -26,33 +27,42 @@ public function index()
             ],
         ];
 
-        $articles = [
+        $regions = [
             [
                 'id' => 1,
-                'img' => '/images/project_img.png',
-                'author' => 'Ion Popescu',
-                'name' => 'Importanța educației remediare în România în timpul pandemiei',
-                'team' => 'Echipa BCR',
-                'content' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique sequi cum eos quis dolorum.',
-                'date' => '15.02.2022',
+                'cover_image' => '/images/project_img.png',
+                'status' => 'registration',
+                'name' => 'Galele Regionale Muntenia',
             ],
             [
                 'id' => 2,
-                'img' => '/images/project_img.png',
-                'author' => 'Ion Popescu',
-                'name' => 'Importanța educației remediare în România în timpul pandemiei',
-                'team' => 'Echipa BCR',
-                'content' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique sequi cum eos quis dolorum.',
-                'date' => '15.02.2022',
+                'cover_image' => '/images/project_img.png',
+                'status' => 'finished',
+                'name' => 'Galele Regionale Muntenia',
             ],
             [
                 'id' => 3,
-                'img' => '/images/project_img.png',
-                'author' => 'Ion Popescu',
-                'name' => 'Importanța educației remediare în România în timpul pandemiei',
-                'team' => 'Echipa BCR',
-                'content' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique sequi cum eos quis dolorum.',
-                'date' => '15.02.2022',
+                'cover_image' => '/images/project_img.png',
+                'status' => 'winners',
+                'name' => 'Galele Regionale Muntenia',
+            ],
+            [
+                'id' => 4,
+                'cover_image' => '/images/project_img.png',
+                'status' => 'registration',
+                'name' => 'Galele Regionale Muntenia',
+            ],
+            [
+                'id' => 5,
+                'cover_image' => '/images/project_img.png',
+                'status' => 'finished',
+                'name' => 'Galele Regionale Muntenia',
+            ],
+            [
+                'id' => 6,
+                'cover_image' => '/images/project_img.png',
+                'status' => 'winners',
+                'name' => 'Galele Regionale Muntenia',
             ],
         ];
 
@@ -96,7 +106,7 @@ public function index()
         return Inertia::render('Public/Regional/Regional', [
             'query' => $projects,
             'editions' => $editions,
-            'articles' => $articles,
+            'regions' => $regions,
             'parteners' => $parteners,
             'registration' => $registration,
             'faqs' => $faqs,
@@ -109,15 +119,15 @@ public function edition()
         $editions = [
             [
                 'href' => '1',
-                'name' => 'Campionatul de bine 2020',
+                'name' => 'Gale Regionale 2020',
             ],
             [
                 'href' => '2',
-                'name' => 'Campionatul de bine 2019',
+                'name' => 'Gale Regionale 2021',
             ],
             [
                 'href' => '3',
-                'name' => 'Campionatul de bine 2018',
+                'name' => 'Gale Regionale 2022',
             ],
         ];
 
diff --git a/resources/js/Components/cards/ArticleCard.vue b/resources/js/Components/cards/ArticleCard.vue
index af41a376..02ad3849 100644
--- a/resources/js/Components/cards/ArticleCard.vue
+++ b/resources/js/Components/cards/ArticleCard.vue
@@ -13,7 +13,7 @@
 
                 <h3 class="text-2xl font-bold text-gray-700 line-clamp-2">{{ data.name }}</h3>
 
-                <p class="text-base text-gray-500">{{ data.content }}</p>
+                <div class="text-base text-gray-500" v-html="data.content"></div>
 
                 <div class="flex items-center justify-between">
                     <p class="text-sm text-gray-500">{{ data.date }}</p>
diff --git a/resources/js/Components/cards/Edition.vue b/resources/js/Components/cards/Edition.vue
new file mode 100644
index 00000000..5abbf3c3
--- /dev/null
+++ b/resources/js/Components/cards/Edition.vue
@@ -0,0 +1,57 @@
+<template>
+    <li
+        class="flex flex-col col-span-1 bg-white divide-y divide-gray-200 rounded-lg shadow"
+    >
+        <div class="flex flex-col flex-1">
+            <Link
+                :href="route('regional.project', data.id)"
+                class="relative bg-gray-200 rounded-t-lg group-hover:opacity-75 sm:h-52"
+            >
+
+                <img
+                    :src="data.cover_image!=='' ?data.cover_image: 'https://images.unsplash.com/photo-1508779544523-dd1b27685be3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'"
+                    alt="imagine proiect"
+                    class="object-cover object-center w-full h-full rounded-t-lg sm:h-full sm:w-full"
+                />
+            </Link>
+
+            <div class="px-6 pt-6">
+                <p v-if="'registration' === data.status" class="pb-4 text-sm font-medium text-red-500">{{ $t('regional_registration') }}</p>
+                <p v-if="'finished' === data.status" class="pb-4 text-sm font-medium text-gray-500">{{ $t('regional_finished') }}</p>
+                <p v-if="'winners' === data.status" class="pb-4 text-sm font-medium text-red-500">{{ $t('regional_winners') }}</p>
+
+                <Link
+                    :href="route('regional.project', data.id)"
+                    class="mt-4 text-2xl font-bold text-gray-700"
+                >
+                    {{ data.name }}
+                </Link>
+            </div>
+
+
+
+                <Link
+                    :href="route('lastedition', data.id)"
+                    class="flex items-center p-6 text-sm font-semibold gap-x-2 text-turqoise-500"
+                >
+                    {{ $t('see')  }}
+                    <SvgLoader name="arrow_right" class="fill-turqoise-500 shrink-0" />
+                </Link>
+
+        </div>
+    </li>
+</template>
+
+<script setup>
+    /** Import from inertia. */
+    import { Link } from "@inertiajs/vue3";
+
+    /** Import components. */
+    import SvgLoader from "@/Components/SvgLoader.vue";
+
+    /** Component props. */
+    const props = defineProps({
+        data: Object,
+        cardType: String,
+    });
+</script>
diff --git a/resources/js/Components/cards/ProjectCard.vue b/resources/js/Components/cards/ProjectCard.vue
index 99acda5f..56326df8 100644
--- a/resources/js/Components/cards/ProjectCard.vue
+++ b/resources/js/Components/cards/ProjectCard.vue
@@ -176,7 +176,7 @@ import {computed, onMounted} from "vue";
     });
 
     onMounted(() => {
-        console.log(props.data);
+
     });
 
     const percentage = computed(() => {
diff --git a/resources/js/Components/cards/RegionalProject.vue b/resources/js/Components/cards/RegionalProject.vue
index f0a9f214..2a863b59 100644
--- a/resources/js/Components/cards/RegionalProject.vue
+++ b/resources/js/Components/cards/RegionalProject.vue
@@ -4,7 +4,7 @@
     >
         <div class="flex flex-col flex-1">
             <Link
-                :href="route('regional.project', data.slug)"
+                :href="route('regional.project', data.id)"
                 class="relative bg-gray-200 group-hover:opacity-75 sm:h-52"
             >
 
diff --git a/resources/js/Components/maps/Map.vue b/resources/js/Components/maps/Map.vue
new file mode 100644
index 00000000..b7c5641a
--- /dev/null
+++ b/resources/js/Components/maps/Map.vue
@@ -0,0 +1,146 @@
+<template>
+    <div>
+        <div id="map" class="rounded-lg" style="height: 550px"></div>
+    </div>
+</template>
+
+<script setup>
+/** Import from vue. */
+import { ref, onMounted } from 'vue';
+
+const googleKey = import.meta.env.VITE_GOOGLE_KEY;
+
+/** Component props. */
+const props = defineProps({ data: Array });
+
+/** Component emits */
+const emit = defineEmits(['county-selected']);
+
+const map = ref(null);
+const selectedCounties = ref([]);
+
+/** Intialize google map. */
+async function initializeMap() {
+    return new Promise((resolve, reject) => {
+        const script = document.createElement('script');
+        script.src = `https://maps.googleapis.com/maps/api/js?key=${googleKey}`;
+        script.async = true;
+        script.defer = true;
+        script.onload = () => {
+            resolve(window.google);
+        };
+        script.onerror = () => {
+            reject(new Error('Failed to load Google Maps API'));
+        };
+        document.head.appendChild(script);
+    });
+}
+
+/** Generate custom marker. */
+const generateMarkerIcon = (numberOfProjects, isActive = false) => {
+    const fillColor = isActive ? '#41A6AC' : '#FFFFFF';
+
+    const svgMarkup = `<svg width="58" height="67" viewBox="0 0 58 67" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <mask id="path-1-inside-1_1033_47195" fill="white">
+        <path d="M49.5061 47.3762C60.8313 36.5382 60.8313 18.9664 49.5061 8.12846C38.1809 -2.70949 19.8191 -2.70949 8.4939 8.12846C-2.8313 18.9664 -2.8313 36.5382 8.4939 47.3762L29 67L49.5061 47.3762Z"/>
+        </mask>
+        <path d="M49.5061 47.3762C60.8313 36.5382 60.8313 18.9664 49.5061 8.12846C38.1809 -2.70949 19.8191 -2.70949 8.4939 8.12846C-2.8313 18.9664 -2.8313 36.5382 8.4939 47.3762L29 67L49.5061 47.3762Z" fill="${fillColor}"/>
+        <path d="M49.5061 47.3762L48.8147 46.6537L49.5061 47.3762ZM8.4939 47.3762L7.80251 48.0986L8.4939 47.3762ZM29 67L28.3086 67.7225L29 68.3841L29.6914 67.7225L29 67ZM48.8147 8.85094C59.7284 19.2951 59.7284 36.2095 48.8147 46.6537L50.1975 48.0986C61.9342 36.8669 61.9342 18.6377 50.1975 7.40599L48.8147 8.85094ZM9.1853 8.85094C20.1238 -1.61698 37.8762 -1.61698 48.8147 8.85094L50.1975 7.40599C38.4856 -3.802 19.5144 -3.80199 7.80251 7.40599L9.1853 8.85094ZM9.1853 46.6537C-1.72843 36.2095 -1.72843 19.2951 9.1853 8.85094L7.80251 7.40599C-3.93417 18.6377 -3.93417 36.8669 7.80251 48.0986L9.1853 46.6537ZM29.6914 66.2775L9.1853 46.6537L7.80251 48.0986L28.3086 67.7225L29.6914 66.2775ZM48.8147 46.6537L28.3086 66.2775L29.6914 67.7225L50.1975 48.0986L48.8147 46.6537Z" fill="black" mask="url(#path-1-inside-1_1033_47195)"/>
+        </svg>`;
+
+    return `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(svgMarkup)}`;
+}
+
+/** Filter projects based on marker selection. */
+const filterProjects = (county, marker) => {
+
+    if (false === marker.get('clicked')) {
+        /** Zoom In and set coordoantes. */
+        map.value.setZoom(10);
+        map.value.panTo(county.coordinates);
+
+        marker.setIcon({
+            url: generateMarkerIcon(county.projects, true),
+            scaledSize: new google.maps.Size(40, 40),
+        });
+
+        marker.setLabel({
+            text: county.projects.toString(),
+            color: '#FFFFFF',
+            fontSize: '14px',
+            fontWeight: 'bold',
+        });
+
+        marker.set('clicked', true);
+        selectedCounties.value.push(county.id);
+    } else if (true === marker.get('clicked')) {
+
+        /** Zoom In and set coordoantes. */
+        map.value.setZoom(7);
+        map.value.panTo({ lat: 45.9432, lng: 24.9668 });
+
+        marker.setIcon({
+            url: generateMarkerIcon(county.projects, false),
+            scaledSize: new google.maps.Size(40, 40),
+        });
+
+        marker.setLabel({
+            text: county.projects.toString(),
+            color: '#333',
+            fontSize: '14px',
+            fontWeight: 'bold',
+        });
+
+        selectedCounties.value = selectedCounties.value.filter(item => item !== county.id);
+        marker.set('clicked', false);
+    }
+    emit('county-selected', selectedCounties.value);
+}
+
+/** Generate map markers for each county */
+const generateMapMarkers = async () => {
+    /** Render map. */
+    const google = await initializeMap();
+
+    /** Map options, */
+    const mapOptions = {
+        center: { lat: 45.9432, lng: 24.9668 },
+        zoom: 7
+    };
+
+    /** Google map object, */
+    map.value = new google.maps.Map(document.getElementById('map'), mapOptions);
+    for (const county of props.data) {
+        try {
+
+            /** Intialize marker. */
+            const markerIcon = {
+                url: generateMarkerIcon(county.projects),
+                scaledSize: new google.maps.Size(40, 40)
+            };
+
+            /** Marker options, */
+            const marker = new google.maps.Marker({
+                position: county.coordinates,
+                map: map.value,
+                title: county.name,
+                icon: markerIcon,
+                label: {
+                    text: county.projects.toString(),
+                    color: '#333',
+                    fontSize: '14px',
+                    fontWeight: 'bold'
+                },
+                clicked: false
+            });
+
+            /** On marker click filter projects. */
+            marker.addListener('click', () => filterProjects(county, marker));
+        } catch (error) {
+            console.error(error);
+        }
+    }
+}
+
+onMounted(() => generateMapMarkers());
+</script>
diff --git a/resources/js/Components/modals/ModalAction.vue b/resources/js/Components/modals/ModalAction.vue
index 8185f2a7..2bf3cac8 100644
--- a/resources/js/Components/modals/ModalAction.vue
+++ b/resources/js/Components/modals/ModalAction.vue
@@ -13,11 +13,11 @@
                     <TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0"
                                      enter-to="opacity-100" leave="ease-in duration-200" leave-from="opacity-100"
                                      leave-to="opacity-0">
-                        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"/>
+                        <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75"/>
                     </TransitionChild>
 
                     <div class="fixed inset-0 z-10 overflow-y-auto">
-                        <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+                        <div class="flex items-end justify-center min-h-full p-4 text-center sm:items-center sm:p-0">
                             <TransitionChild as="template" enter="ease-out duration-300"
                                              enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                                              enter-to="opacity-100 translate-y-0 sm:scale-100"
@@ -25,11 +25,11 @@
                                              leave-from="opacity-100 translate-y-0 sm:scale-100"
                                              leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
                                 <DialogPanel
-                                    class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
+                                    class="relative px-4 pt-5 pb-4 overflow-hidden text-left transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
                                     <div>
                                         <div
-                                            class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
-                                            <CheckIcon class="h-6 w-6 text-green-500" aria-hidden="true"/>
+                                            class="flex items-center justify-center w-12 h-12 mx-auto bg-green-100 rounded-full">
+                                            <CheckIcon class="w-6 h-6 text-green-500" aria-hidden="true"/>
                                         </div>
 
                                         <div class="mt-3 text-center sm:mt-5">
@@ -47,7 +47,7 @@
                                     <div class="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
 
                                         <button type="button"
-                                                class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:col-start-1 sm:mt-0"
+                                                class="inline-flex justify-center w-full px-3 py-2 mt-3 text-sm font-semibold text-gray-900 bg-white rounded-md shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:col-start-1 sm:mt-0"
                                                 @click="open = false">
                                             {{ cancelModalText }}
                                         </button>
@@ -55,7 +55,7 @@
                                         <button
                                             @click="action"
                                             type="button"
-                                            class="inline-flex w-full justify-center rounded-md bg-primary-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 sm:col-start-2"
+                                            class="inline-flex justify-center w-full px-3 py-2 text-sm font-semibold text-white rounded-md shadow-sm bg-primary-500 hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 sm:col-start-2"
                                         >
                                             {{ actionModalText }}
                                         </button>
@@ -102,8 +102,6 @@ const props = defineProps({
 /** Local state. */
 const open = ref(false);
 
-console.log(props.actionType)
-
 /** Delete action. */
 const action = () => {
     /** Initialize inertia from Object. */
diff --git a/resources/js/Components/timers/Countdown.vue b/resources/js/Components/timers/Countdown.vue
index d8da9392..d85c6ec6 100644
--- a/resources/js/Components/timers/Countdown.vue
+++ b/resources/js/Components/timers/Countdown.vue
@@ -29,6 +29,11 @@
             <p class="text-2xl font-bold text-primary-50">Perioada de înscriere a luat sfârșit. Gala va avea loc pe</p>
             <h2 class="text-6xl font-bold text-white">{{ dates.end }}</h2>
         </div>
+
+        <div v-if="'winners' === show" class="space-y-6 text-center">
+            <p class="text-2xl font-bold text-turqoise-50">Gala s-a incheiat! Vezi mai jos</p>
+            <h2 class="text-6xl font-bold text-white">Proiectele Castigatoare</h2>
+        </div>
     </div>
 </template>
 
@@ -51,6 +56,8 @@ const show = computed(() => {
         return 'ended';
     } else if ((current >= start) && (current <= end)) {
         return 'now';
+    } else {
+        return 'winners';
     }
 });
 
diff --git a/resources/js/Pages/Public/Articles/Article.vue b/resources/js/Pages/Public/Articles/Article.vue
index 622b669b..571112da 100644
--- a/resources/js/Pages/Public/Articles/Article.vue
+++ b/resources/js/Pages/Public/Articles/Article.vue
@@ -1,7 +1,7 @@
 <template>
     <PageLayout>
         <!-- Inertia page head -->
-        <Head :title="$t('thank_you')" />
+        <Head :title="$t('article_title')" />
 
         <div class="mx-auto mb-10 max-w-7xl">
             <div class="aspect-w-16 aspect-h-9">
diff --git a/resources/js/Pages/Public/Articles/Articles.vue b/resources/js/Pages/Public/Articles/Articles.vue
index a103fe71..7dc6f1fc 100644
--- a/resources/js/Pages/Public/Articles/Articles.vue
+++ b/resources/js/Pages/Public/Articles/Articles.vue
@@ -1,7 +1,7 @@
 <template>
     <PageLayout>
         <!-- Inertia page head -->
-        <Head :title="$t('thank_you')" />
+        <Head :title="$t('articles_title')" />
 
         <div class="mx-auto mb-10 max-w-7xl">
             <carousel v-if="query?.data?.length" class="w-full" :items-to-show="1" :autoplay="4000" :pauseAutoplayOnHover="true" :wrapAround="true" :transition="300">
diff --git a/resources/js/Pages/Public/Projects/Projects.vue b/resources/js/Pages/Public/Projects/Projects.vue
index 57372ada..7d0b9265 100644
--- a/resources/js/Pages/Public/Projects/Projects.vue
+++ b/resources/js/Pages/Public/Projects/Projects.vue
@@ -57,25 +57,35 @@
 
                     <!-- Tabs -->
                     <div class="flex flex-col justify-end gap-6 xl:w-4/12 sm:flex-row">
-                        <Link
+                        <button
+                            @click="viewType='list';filter.c=null"
                             :href="route('projects')"
-                            class="flex items-center gap-x-4 bg-primary-500 hover:bg-primary-400 text-white rounded-md px-3.5 py-2.5 text-sm font-semibold shadow-sm"
+                            :class="[
+                                'list' === viewType ?
+                                'flex items-center gap-x-4 bg-primary-500 hover:bg-primary-400 text-white rounded-md px-3.5 py-2.5 text-sm font-semibold shadow-sm' :
+                                'flex items-center gap-x-4 rounded-md bg-white px-3.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 py-2.5'
+                            ]"
                         >
                             <SvgLoader class="shrink-0" name="grid"/>
                             {{ $t('projects_list') }}
-                        </Link>
+                        </button>
 
-                        <Link
+                        <button
+                            @click="viewType='map';filter.c=null"
                             :href="route('projects')"
-                            class="flex items-center gap-x-4 rounded-md bg-white px-3.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 py-2.5"
+                            :class="[
+                                'map' === viewType ?
+                                'flex items-center gap-x-4 bg-primary-500 hover:bg-primary-400 text-white rounded-md px-3.5 py-2.5 text-sm font-semibold shadow-sm' :
+                                'flex items-center gap-x-4 rounded-md bg-white px-3.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 py-2.5'
+                            ]"
                         >
                             <SvgLoader class="shrink-0" name="location"/>
                             {{ $t('projects_map') }}
-                        </Link>
+                        </button>
                     </div>
                 </div>
 
-                <div class="flex flex-col justify-between w-full gap-6 mt-6 sm:flex-row">
+                <div v-if="'list' === viewType" class="flex flex-col justify-between w-full gap-6 mt-6 sm:flex-row">
 
                     <MultiSelectFilter
                         class="w-full"
@@ -116,6 +126,13 @@
                 </div>
             </div>
 
+            <Map
+                v-if="'map' === viewType"
+                :data="projectsForMap"
+                @countySelected="filter.c = $event"
+                class="mb-6"
+            />
+
             <h2 class="text-2xl font-bold text-gray-900">{{ props.query.total }} {{ $t('of_projects') }}</h2>
 
             <!-- Published projects -->
@@ -125,6 +142,7 @@
                 :list="props.query"
                 classes="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 mb-4"
             />
+
         </div>
     </PageLayout>
 </template>
@@ -148,6 +166,7 @@
     import SecondaryButton from '@/Components/buttons/SecondaryButton.vue';
     import MultiSelectObjectFilter from '@/Components/filters/MultiSelectObjectFilter.vue';
     import MultiSelectFilter from "@/Components/filters/MultiSelectFilter.vue";
+    import Map from '@/Components/maps/Map.vue'
 
     /** Active filter state. */
     const hasValues = ref(false);
@@ -160,10 +179,27 @@
         end_date: null,
     });
 
+    const projectsForMap = [
+        {
+            id: 1,
+            name: 'Craiova',
+            projects: 3,
+            coordinates: { lat: 44.3304, lng: 23.7949 },
+        },
+        {
+            id: 2,
+            name: 'Bucuresti',
+            projects: 30,
+            coordinates: { lat: 44.4268, lng: 26.1025 },
+        },
+    ];
+
     /** Statuses */
     const statuses = ['Active', 'Inactive'];
     const cities = [{}];
 
+    const viewType = ref('list');
+
     /** Filter projects. */
     const filterProjects = () => {
         router.visit(route('projects'), {
@@ -171,7 +207,9 @@
             data: filter.value,
             preserveState: true,
             onSuccess: (data) => {
-                if (Object.values(data.props.request).every(value => value === null)) {
+                console.log(filter.value)
+
+                if (Object.values(filter.value).every(value => (value === null) || (value.length === 0))) {
                     hasValues.value = false
                 } else {
                     hasValues.value = true
@@ -194,5 +232,5 @@
     });
     watch(filter, () => {
         filterProjects();
-    })
+    },{deep:true})
 </script>
diff --git a/resources/js/Pages/Public/Regional/LastEdition.vue b/resources/js/Pages/Public/Regional/LastEdition.vue
index e4f7144f..83ecd9d5 100644
--- a/resources/js/Pages/Public/Regional/LastEdition.vue
+++ b/resources/js/Pages/Public/Regional/LastEdition.vue
@@ -25,7 +25,7 @@
         </div>
 
         <!-- Countdown -->
-        <div class="w-full bg-primary-500">
+        <div :class="['winners' === status ? 'bg-red-500' : 'bg-primary-500' ,'w-full']">
             <div class="flex flex-col items-center justify-center max-w-5xl gap-6 mx-auto mb-10 p-9 md:flex-row">
                 <Countdown :dates="registration" />
             </div>
diff --git a/resources/js/Pages/Public/Regional/Regional.vue b/resources/js/Pages/Public/Regional/Regional.vue
index 56b07b6e..6da49711 100644
--- a/resources/js/Pages/Public/Regional/Regional.vue
+++ b/resources/js/Pages/Public/Regional/Regional.vue
@@ -56,8 +56,8 @@
 
                                 <!-- Log in button -->
                                 <PrimaryButton
-                                    background="turqoise-500"
-                                    hover="turqoise-400"
+                                    background="primary-500"
+                                    hover="primary-400"
                                     color="white"
                                     class="w-full"
                                     :class="{ 'opacity-25': form.processing }"
@@ -177,103 +177,13 @@
             </div>
         </div>
 
-        <!-- Countdown -->
-        <div class="w-full bg-primary-500">
-            <div class="flex flex-col items-center justify-center max-w-5xl gap-6 mx-auto mb-10 p-9 md:flex-row">
-                <Countdown :dates="registration" />
-            </div>
-        </div>
-
         <!-- About -->
         <div class="mx-auto mb-10 max-w-7xl p-9 md:flex-row">
             <h3 class="mb-6 text-3xl font-bold text-cyan-900">{{ $t('about_regional') }}</h3>
             <div class="text-base font-normal text-gray-500" v-html="about_championship"></div>
         </div>
 
-        <!-- Projects -->
-        <div class="mx-auto mb-10 p-9 max-w-7xl">
-
-            <div class="flex items-center gap-4">
-                <div class="flex items-center justify-center w-8 h-8 rounded-lg bg-primary-500">
-                    <SvgLoader class="shrink-0 fill-primary-500" name="list"/>
-                </div>
-                <h2 class="text-2xl font-bold text-gray-900">{{ $t('participants') }}</h2>
-            </div>
-
-            <div class="flex flex-col items-center justify-between gap-6 lg:flex-row">
-
-                <div class="flex flex-col items-center w-full gap-6 my-10 sm:flex-row xl:w-8/12">
-                    <!-- Search -->
-                    <div class="flex gap-6">
-                        <SearchFilter
-                            id="project-search"
-                            class="w-full lg:w-96"
-                            v-model="filter.s"
-                            color="gray-700"
-                            :placeholder="$t('search')"
-                            @keydown.enter="filterProjects"
-                        />
-
-                        <!-- Search action -->
-                        <SecondaryButton
-                            @click="filterProjects"
-                            class="py-2"
-                        >
-                            {{ $t('search') }}
-                        </SecondaryButton>
-                    </div>
-
-                    <div class="flex w-full gap-6 mb-6 sm:mb-0">
-                        <!-- Empty filters. -->
-                        <SecondaryButton
-                            v-if="hasValues"
-                            @click="emptyFilters"
-                            class="flex items-center w-1/2 gap-2 py-2 sm:w-auto"
-                        >
-                            <SvgLoader name="close" />
-                            {{ $t('empty_filters') }}
-                        </SecondaryButton>
-
-                        <!-- Sort -->
-                        <Sort
-                            class="w-1/2 sm:w-auto"
-                        />
-                    </div>
-                </div>
-
-                <MultiSelectObjectFilter
-                    class="z-50 w-60"
-                    v-model="filter.c"
-                    :options="countries"
-                    @callback="filterProjects"
-                />
-            </div>
-
-            <h2 class="text-2xl font-bold text-gray-900">{{ query.total }} {{ $t('of_projects') }}</h2>
-
-            <!-- Published projects -->
-            <PaginatedGrid
-                cardType="project-regional"
-                :list="query"
-                classes="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 mb-4"
-            />
-        </div>
-
-        <!-- Faqs -->
-        <div class="mx-auto mb-10 max-w-7xl p-9 md:flex-row">
-            <h2 class="mb-4 text-3xl font-bold text-cyan-900">{{ $t('faqs_title') }}</h2>
-            <Faqs :data="faqs" />
-            <div class="mt-10">
-                <Link
-                    :href="route('contact')"
-                    class="bg-primary-500 flex-1 text-center  sm:w-auto hover:bg-primary-400 text-white focus-visible:outline-primary-500 rounded-md px-3.5 py-2.5 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
-                >
-                    {{ $t('contact_us') }}
-                </Link>
-            </div>
-        </div>
-
-        <!-- Articles -->
+        <!-- Curent year -->
         <div class="relative mb-10 overflow-hidden pb-9">
 
             <div class="pt-12 pb-20 bg-primary-500 px-9 lg:px-0">
@@ -281,17 +191,17 @@
                     <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary-100">
                         <SvgLoader class="shrink-0 stroke-white fill-primary-100" name="sound" />
                     </div>
-                    <h3 class="text-2xl font-bold text-white">{{ $t('related_articles') }}</h3>
+                    <h3 class="text-2xl font-bold text-white">2022 - 2023</h3>
                 </div>
             </div>
 
-            <div class="bg-white px-9">
-                <ul role="list" class="grid grid-cols-1 gap-8 mx-auto -mt-12 lg:mt-0 max-w-7xl sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3">
-                    <ArticleCard
-                        v-for="article in articles"
-                        :key="article.id"
-                        :data="article"
-                        class="relative z-50 lg:-mt-12"
+            <div class="px-9 lg:-mt-12">
+                <ul role="list" class="grid grid-cols-1 gap-8 mx-auto max-w-7xl sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3">
+                    <EditionCard
+                        v-for="edition in regions"
+                        :key="edition.id"
+                        :data="edition"
+                        class="relative z-50 "
                     />
                 </ul>
             </div>
@@ -301,7 +211,7 @@
             </div>
         </div>
 
-        <!-- Parteners -->
+        <!-- Last year -->
         <div class="relative mb-10 overflow-hidden pb-9">
 
             <div class="pt-12 pb-20 bg-primary-500 px-9 lg:px-0">
@@ -309,20 +219,18 @@
                     <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary-100">
                         <SvgLoader class="shrink-0 stroke-white fill-primary-100" name="sound" />
                     </div>
-                    <h3 class="text-2xl font-bold text-white">{{ $t('parteners') }}</h3>
+                    <h3 class="text-2xl font-bold text-white">2021 - 2022</h3>
                 </div>
             </div>
 
-            <div class=" px-9">
-                <ul role="list" class="grid grid-cols-1 gap-8 mx-auto lg:-mt-12 max-w-7xl sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3">
-
-                    <li
-                        v-for="(partener, index) in parteners"
-                        :key="index"
-                        class="relative z-50 flex flex-col col-span-1 p-10 bg-white rounded-lg shadow-md"
-                    >
-                        <img :src="partener">
-                    </li>
+            <div class="px-9 lg:-mt-12">
+                <ul role="list" class="grid grid-cols-1 gap-8 mx-auto max-w-7xl sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3">
+                    <EditionCard
+                        v-for="edition in regions"
+                        :key="edition.id"
+                        :data="edition"
+                        class="relative z-50 "
+                    />
                 </ul>
             </div>
 
@@ -330,27 +238,6 @@
                 <SvgLoader class="shrink-0" name="squer_half_color" />
             </div>
         </div>
-
-        <!-- Prev editions -->
-        <div class="mx-auto mb-20 max-w-7xl p-9 gap-x-4">
-            <div class="flex items-center mx-auto mb-10 max-w-7xl gap-x-4">
-                <div class="flex items-center justify-center w-8 h-8 rounded-lg bg-primary-500">
-                    <SvgLoader class="shrink-0 fill-primary-500" name="clock"/>
-                </div>
-                <h2 class="text-2xl font-bold text-gray-900">{{ $t('prev_edtions') }}</h2>
-            </div>
-
-            <div class="flex flex-col gap-y-4">
-                <Link
-                    v-for="(edition, index) in editions"
-                    :key="index"
-                    :href="route('lastedition', edition.href)"
-                    class="text-xl font-bold text-blue-500"
-                >
-                    {{ edition.name }}
-                </Link>
-            </div>
-        </div>
     </PageLayout>
 </template>
 
@@ -371,12 +258,7 @@
     import ArticleCard from '@/Components/cards/ArticleCard.vue';
     import ChampionshipModal from '@/Components/modals/ChampionshipModal.vue';
     import ProjectSummaryCard from '@/Components/cards/ProjectSummaryCard.vue';
-    import Countdown from '@/Components/timers/Countdown.vue';
-    import Faqs from '@/Components/faqs/Faqs.vue';
-    import PaginatedGrid from '@/Components/templates/PaginatedGrid.vue';
-    import Sort from '@/Components/filters/Sort.vue';
-    import SearchFilter from '@/Components/filters/SearchFilter.vue';
-    import MultiSelectObjectFilter from '@/Components/filters/MultiSelectObjectFilter.vue';
+    import EditionCard from '@/Components/cards/Edition.vue';
 
     const about_championship = 'Purus morbi dignissim senectus mattis adipiscing. Amet, massa quam varius orci dapibus volutpat cras. In amet eu ridiculus leo sodales cursus tristique. Tincidunt sed tempus ut viverra ridiculus non molestie. Gravida quis fringilla amet eget dui tempor dignissim. Facilisis auctor venenatis varius nunc, congue erat ac. Cras fermentum convallis quam.'
 
@@ -384,13 +266,12 @@
     const props = defineProps({
         query: Object,
         championship: Object,
-        testimonials: Array,
         editions: Array,
-        articles: Array,
         registration: Object,
         parteners: Array,
         faqs: Array,
-        countries: Array
+        countries: Array,
+        regions: Array
     });
 
     /** Active filter state. */
diff --git a/resources/js/locales/ro.js b/resources/js/locales/ro.js
index 3729094f..f3dcf1ba 100644
--- a/resources/js/locales/ro.js
+++ b/resources/js/locales/ro.js
@@ -328,5 +328,9 @@ export default {
     'volunteers_rejected': 'Voluntari respinși',
     'volunteers_approved': 'Voluntarii mei',
     'volunteers_pending': 'Voluntari în așteptare',
-
+    "regional_registration": "Etapa inscrieri proiecte",
+    "regional_winners": "Etapa desemnare castigatori",
+    "regional_finished": "Editie incheiata",
+    "articles_title": "Articole",
+    "article_title": "Articol"
 }