anulax
/
scout-baslac.ch
1
0
Fork 0
Code Issues Pull Requests Packages project_board Releases Wiki Activity

New home

Browse Source
beta
anulax1225 ago%!(EXTRA string=2 months)
parent 5962544517
commit 5f6173b1df
8 changed files with 183 additions and 7 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      package-lock.json
  2. BIN
      public/img/present.jpeg
  3. 28
      resources/css/app.css
  4. 2
      resources/js/Layouts/Layout.vue
  5. 8
      resources/js/Pages/Home.vue
  6. 146
      resources/js/Pages/Homea.vue
  7. 2
      resources/views/app.blade.php
  8. 2
      routes/web.php

2
package-lock.json generated
Unescape View File

@ -1,5 +1,5 @@
{ {
"name": "baslac.ch", "name": "app",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {

BIN
public/img/present.jpeg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 MiB

28
resources/css/app.css
Unescape View File

@ -11,6 +11,34 @@ @layer components {
} }
@layer utilities { @layer utilities {
.p-trans-in {
animation: p-anim 2.5s forwards;
}
@keyframes p-anim {
from {
padding-bottom: 0;
}
to {
padding-bottom: 70rem;
}
}
.p-trans-out {
animation: p-anim-out 2.5s forwards;
}
@keyframes p-anim-out {
to {
padding-bottom: 0;
}
from {
padding-bottom: 70rem;
}
}
.md-content { .md-content {
font-family: "Roboto"; font-family: "Roboto";
} }

2
resources/js/Layouts/Layout.vue
Unescape View File

@ -17,7 +17,7 @@ const toggleMenu = () => {
<template> <template>
<nav class="sticky z-20 w-full top-0 right-0 left-0"> <nav class="sticky z-20 w-full top-0 right-0 left-0">
<div class="w-full h-16 z-40 flex desktop:px-[17.5%] laptop:px-[12.5%] px-2 justify-between border-b border-gray-300 bg-gray-100 text-gray-900"> <div class="w-full h-16 z-40 flex desktop:px-[17.5%] laptop:px-[12.5%] px-2 justify-between border-b border-gray-300 bg-gray-50 text-gray-900">
<div :class="{ 'w-full': !user }" class="flex h-full justify-between"> <div :class="{ 'w-full': !user }" class="flex h-full justify-between">
<Link :href="user ? route('photo.index') : route('home')" :class="'h-full mr-5 z-40 w-fit'"> <Link :href="user ? route('photo.index') : route('home')" :class="'h-full mr-5 z-40 w-fit'">
<img src="/img/logo.png" class="h-full laptop:py-1.5 py-3"> <img src="/img/logo.png" class="h-full laptop:py-1.5 py-3">

8
resources/js/Pages/Home.vue
Unescape View File

@ -8,9 +8,11 @@ import Layout from '@/Layouts/Layout.vue';
<Head title="Home"/> <Head title="Home"/>
<Layout> <Layout>
<template #content> <template #content>
<div class="relative w-full laptop:h-96 flex items-center overflow-hidden max-h-96"> <div class="relative w-full laptop:max-h-[50rem] flex items-center overflow-hidden max-h-96">
<img src="/img/sarasin.png" class="w-full laptop:pb-96"> <div class="flex justify-center items-center absolute top-0 bottom-0 right-0 left-0 bg-gradient-to-t from-gray-200/25 via-[25%] via-white/20 to-[50%] to-white/5">
<p class="text-center absolute text-white/65 laptop:text-[180px] text-8xl laptop:leading-[180px] font-bold left-0 right-0">Scout Baslac</p> <p class="text-center text-white/65 laptop:text-[220px] text-8xl laptop:leading-[180px] font-bold">Scout Baslac</p>
</div>
<img src="/img/sarasin.png" class="w-full laptop:pb-96 ">
</div> </div>
<div class="w-full desktop:px-[17.5%] laptop:px-[12.5%] px-2 flex flex-col"> <div class="w-full desktop:px-[17.5%] laptop:px-[12.5%] px-2 flex flex-col">
<div class="my-5"> <div class="my-5">

146
resources/js/Pages/Homea.vue
Unescape View File

@ -0,0 +1,146 @@
<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+20rem)] 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-[70%] 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>

2
resources/views/app.blade.php
Unescape View File

@ -17,7 +17,7 @@
@vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"]) @vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])
@inertiaHead @inertiaHead
</head> </head>
<body class="relative font-roboto antialiased w-screen h-screen"> <body class="relative font-roboto antialiased w-screen h-screen bg-gray-200">
@csrf @csrf
@inertia @inertia
</body> </body>

2
routes/web.php
Unescape View File

@ -12,7 +12,7 @@
Route::get('/', function () { Route::get('/', function () {
if(Auth::check()) return redirect(route("photo.index")); if(Auth::check()) return redirect(route("photo.index"));
else return Inertia::render('Home'); else return Inertia::render('Homea');
})->name('home'); })->name('home');
Route::get('/info', function () { Route::get('/info', function () {

Write Preview
Loading…
Cancel
Save