add why volunnter on organization show page

code4romania · Nov 1, 2024 · 8f1a6c1 · 8f1a6c1
1 parent 866eacf
commit 8f1a6c1
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 18 deletions.
diff --git a/lang/ro.json b/lang/ro.json
@@ -41,6 +41,7 @@
     "share_page": "Distribuie pagina pe",
     "activity_domains": "Domenii de activitate",
     "description": "Descriere",
+    "why_volunteer": "De ce să devin voluntar?",
     "ong_projects": "Proiectele organizației",
     "see_projects": "Vezi proiecte",
     "share": "Dă un share proiectului pe",

diff --git a/resources/js/Pages/Public/Organizations/Show.vue b/resources/js/Pages/Public/Organizations/Show.vue
@@ -50,7 +50,6 @@
                 </div>
             </div>
 
-            <!-- Soacial share -->
             <div class="flex flex-col mx-auto mb-8 lg:flex-row max-w-7xl px-9">
                 <div class="w-full lg:w-6/12">
                     <h2 class="mb-8 text-3xl font-bold text-primary-900">{{ $t('share_page') }}</h2>
@@ -65,6 +64,13 @@
                         <h2 class="mb-8 text-3xl font-bold text-primary-900">{{ $t('description') }}</h2>
                         <div class="text-lg text-gray-500" v-text="organization.description" />
                     </div>
+
+                    <div v-if="organization.accepts_volunteers">
+                        <h2 class="my-8 text-3xl font-bold text-primary-900">
+                            {{ $t('why_volunteer') }}
+                        </h2>
+                        <div class="text-lg text-gray-500" v-text="organization.why_volunteer" />
+                    </div>
                 </div>
 
                 <div class="w-full mt-4 lg:w-6/12 lg:mt-0 lg:px-10">
@@ -157,21 +163,21 @@
 </template>
 
 <script setup>
-    import Head from '@/Components/Head.vue';
-
-    /** Import components. */
-    import PageLayout from '@/Layouts/PageLayout.vue';
-    import ProjectCard from '@/Components/cards/ProjectCard.vue';
-    import DonateModal from '@/Components/modals/DonateModal.vue';
-    import VolunteerModal from '@/Components/modals/VolunteerModal.vue';
-    import SharePage from '@/Components/SharePage.vue';
-    import HowCanYouHelp from '@/Components/HowCanYouHelp.vue';
-
-    import { ChartBarIcon, GlobeAltIcon } from '@heroicons/vue/outline';
-    import { HomeIcon, MailIcon, UserIcon } from '@heroicons/vue/solid';
-
-    /** Page props. */
-    const props = defineProps({
-        organization: [Array, Object],
-    });
+import Head from '@/Components/Head.vue';
+
+/** Import components. */
+import PageLayout from '@/Layouts/PageLayout.vue';
+import ProjectCard from '@/Components/cards/ProjectCard.vue';
+import DonateModal from '@/Components/modals/DonateModal.vue';
+import VolunteerModal from '@/Components/modals/VolunteerModal.vue';
+import SharePage from '@/Components/SharePage.vue';
+import HowCanYouHelp from '@/Components/HowCanYouHelp.vue';
+
+import { ChartBarIcon, GlobeAltIcon } from '@heroicons/vue/outline';
+import { HomeIcon, MailIcon, UserIcon } from '@heroicons/vue/solid';
+
+/** Page props. */
+const props = defineProps({
+    organization: [Array, Object],
+});
 </script>