You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and dots ('.'), can be up to 35 characters long. Letters must be lowercase.
146 lines
7.9 KiB
146 lines
7.9 KiB
<script setup> |
|
import { Head, Link } from '@inertiajs/vue3'; |
|
import Layout from '@/Layouts/Layout.vue'; |
|
|
|
</script> |
|
|
|
<template> |
|
<Head title="Home"/> |
|
<Layout> |
|
<template #content> |
|
<div class=" text-gray-900"> |
|
|
|
<div class="relative w-full max-h-[calc(100vh+1rem)] flex items-center overflow-hidden"> |
|
<img src="/img/sarasin.png" class="h-full laptop:pb-96 object-cover" alt="Image de présentation du groupe scout" /> |
|
<!-- Gradient doux : du transparent en haut vers un noir très léger en bas --> |
|
<div class="absolute top-0 bottom-0 right-0 left-0 inset-0 flex items-center justify-center bg-gradient-to-b from-transparent via-gray-200 via-[90%] to-gray-200"> |
|
<h1 class="text-center text-white laptop:text-[260px] text-7xl laptop:leading-[180px] font-extrabold drop-shadow-lg transition duration-500 hover:scale-105"> |
|
Scout Baslac |
|
</h1> |
|
</div> |
|
</div> |
|
|
|
<!-- Contenu principal avec animation et grilles --> |
|
<div class="w-full desktop:px-[17.5%] laptop:px-[12.5%] px-4 pb-12 space-y-12"> |
|
<!-- Carte "Qui sommes-nous ?" --> |
|
<transition name="fade" mode="out-in"> |
|
<div class="bg-gray-100 shadow-xl rounded-lg overflow-hidden transform transition duration-200 hover:scale-105"> |
|
<div class="flex flex-col lg:flex-row"> |
|
<!-- Partie Image --> |
|
<div class="lg:w-1/2 relative max-h-56 hover:p-trans-in p-trans-out duration-200 overflow-hidden"> |
|
<!-- Image d'illustration, à personnaliser --> |
|
<div class=""> |
|
<img src="/img/present.jpeg" alt="Illustration du groupe scout" class="h-full "> |
|
</div> |
|
<!-- Overlay pour assombrir l'image et améliorer la lisibilité --> |
|
<div class="absolute inset-0 bg-black opacity-30"></div> |
|
</div> |
|
<!-- Partie Texte --> |
|
<div class="lg:w-1/2 p-8 flex flex-col justify-center"> |
|
<h2 class="text-3xl lg:text-5xl font-semibold mb-4 border-b border-gray-300 pb-2"> |
|
Qui sommes-nous ? |
|
</h2> |
|
<p class="mb-4 leading-relaxed"> |
|
Le Groupement scout du Bas-Lac, fort de près de trente ans d’histoire et d’une tradition remontant à 1920 sur Saint-Blaise, incarne l’esprit du scoutisme, le respect de la nature et le vivre-ensemble. |
|
</p> |
|
<p class="mb-4 leading-relaxed"> |
|
Nos activités, mêlant jeux de piste, ateliers manuels et aventures en pleine nature, favorisent l’épanouissement, l’autonomie et la création de liens forts entre tous les participants. |
|
</p> |
|
<p class="font-bold text-lg"> |
|
Rejoignez-nous et vivez une aventure inoubliable ! |
|
</p> |
|
</div> |
|
</div> |
|
</div> |
|
</transition> |
|
|
|
<!-- Carte "Nos groupes par âge" --> |
|
<transition name="fade" mode="out-in"> |
|
<div class="bg-gray-100 shadow-lg rounded-lg p-8 transform transition duration-200 hover:scale-105"> |
|
<h2 class="text-3xl lg:text-5xl font-semibold border-b border-gray-300 pb-3 mb-6"> |
|
Nos groupes par âge |
|
</h2> |
|
<p class="mb-6">Notre groupe se décline en plusieurs tranches d'âge (7 à 25 ans) afin d'adapter les activités à chaque étape de développement.</p> |
|
<div class="space-y-6"> |
|
<!-- Carte interne pour chaque groupe --> |
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
<div class="p-4 border hover:bg-white border-gray-200 rounded-md bg-gray-50 transition"> |
|
<p class="text-xl font-bold">Les louvetaux</p> |
|
<p class="text-sm mt-2"> |
|
Dès 7 ans, les louveteaux découvrent le scoutisme en jouant et en réalisant des activités adaptées, tout en s’initiant aux valeurs du groupe. |
|
</p> |
|
</div> |
|
<div class="p-4 border hover:bg-white border-gray-200 rounded-md bg-gray-50 transition"> |
|
<p class="text-xl font-bold">Les éclaireurs</p> |
|
<p class="text-sm mt-2"> |
|
À partir de 11 ans, les éclaireurs se forment en patrouilles pour apprendre l’autonomie, la gestion de projets et s’initier à diverses compétences pratiques. |
|
</p> |
|
</div> |
|
<div class="p-4 border hover:bg-white border-gray-200 rounded-md bg-gray-50 transition"> |
|
<p class="text-xl font-bold">Les pionniers</p> |
|
<p class="text-sm mt-2"> |
|
Les pionniers, sortis de l’école obligatoire, forment un poste autonome et s’engagent dans la planification et l’organisation de projets collectifs. |
|
</p> |
|
</div> |
|
<div class="p-4 border hover:bg-white border-gray-200 rounded-md bg-gray-50 transition"> |
|
<p class="text-xl font-bold">Les responsables</p> |
|
<p class="text-sm mt-2"> |
|
À partir de 17 ans, les responsables, ou routiers, prennent en charge l’encadrement des plus jeunes et participent activement à la vie du groupe. |
|
</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</transition> |
|
|
|
<!-- Carte "Information pratique" avec carte interactive --> |
|
<transition name="fade" mode="out-in"> |
|
<div class="bg-gray-100 shadow-lg rounded-lg p-8 transform transition duration-200 hover:scale-105"> |
|
<h2 class="text-3xl lg:text-5xl font-semibold border-b border-gray-300 pb-3 mb-6"> |
|
Information pratique |
|
</h2> |
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> |
|
<div class="space-y-6"> |
|
<div class="space-y-2"> |
|
<p class="text-xl font-bold">Séance</p> |
|
<p class="text-sm"> |
|
Nos séances se déroulent de 14h00 à 16h30 chaque samedi hors vacances scolaires, avec des activités organisées sur place et parfois en extérieur. |
|
</p> |
|
</div> |
|
<div class="space-y-2"> |
|
<p class="text-xl font-bold">Organigramme</p> |
|
<p class="text-sm"> |
|
Après adhésion, vous recevrez un organigramme complet des responsables. Pour toute demande de contact, merci d'utiliser notre formulaire dédié. |
|
</p> |
|
</div> |
|
<div class="space-y-2"> |
|
<p class="text-xl font-bold">Camps et activités spéciales</p> |
|
<p class="text-sm"> |
|
Les informations sur nos camps et sorties spéciales sont envoyées par email et ne figurent pas sur cette page. |
|
</p> |
|
</div> |
|
<div class="space-y-2"> |
|
<p class="text-xl font-bold">Nos locaux</p> |
|
<p class="text-sm"> |
|
Nos séances se déroulent dans un chalet situé en lisière de la forêt, construit par des scouts et utilisé depuis 20 ans pour accueillir nos activités. |
|
</p> |
|
</div> |
|
</div> |
|
<!-- Carte interactive (iframe) --> |
|
<div> |
|
<iframe |
|
class="w-full h-80 border rounded" |
|
loading="lazy" |
|
src="https://map.geo.admin.ch/embed.html?lang=fr&topic=ech&bgLayer=ch.swisstopo.pixelkarte-farbe&layers=ch.swisstopo.zeitreihen,ch.bfs.gebaeude_wohnungs_register,ch.bav.haltestellen-oev,ch.swisstopo.swisstlm3d-wanderwege,ch.astra.wanderland-sperrungen_umleitungen,KML%7C%7Chttps:%2F%2Fpublic.geo.admin.ch%2Fapi%2Fkml%2Ffiles%2F8zAxcXdzRvCxIN1CAhXGMA&layers_opacity=1,1,1,0.8,0.8,1&layers_visibility=false,false,false,false,false,true&layers_timestamp=18641231,,,,,&E=2564876.26&N=1207554.44&zoom=9" |
|
allow="geolocation" |
|
frameborder="0" |
|
></iframe> |
|
</div> |
|
</div> |
|
</div> |
|
</transition> |
|
</div> |
|
</div> |
|
</template> |
|
</Layout> |
|
</template> |