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

Reworked the home page

Browse Source
beta
anulax1225 ago%!(EXTRA string=6 months)
parent 20c511ce2b
commit 5d36ac33c2
3 changed files with 8 additions and 8 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
      resources/js/Layouts/Layout.vue
  2. 2
      resources/js/Pages/Home.vue
  3. 12
      resources/js/Pages/Homea.vue

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-50 text-gray-900"> <div class="w-full h-16 z-40 flex desktop:px-[12.5%] laptop:px-[7.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">

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

@ -10,7 +10,7 @@ import Layout from '@/Layouts/Layout.vue';
<template #content> <template #content>
<div class="relative w-full laptop:max-h-[50rem] 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">
<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"> <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 text-white/65 laptop:text-[220px] text-8xl laptop:leading-[180px] font-bold">Scout Baslac</p> <p class="text-center text-white/65 laptop:text-6xl text-3xl font-bold">Scout Baslac</p>
</div> </div>
<img src="/img/sarasin.png" class="w-full laptop:pb-96 "> <img src="/img/sarasin.png" class="w-full laptop:pb-96 ">
</div> </div>

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

@ -10,21 +10,21 @@ import Layout from '@/Layouts/Layout.vue';
<template #content> <template #content>
<div class=" text-gray-900"> <div class=" text-gray-900">
<div class="relative w-full max-h-[calc(100vh+1rem)] flex items-center overflow-hidden"> <div class="relative w-full max-h-[50vh] 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" /> <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 --> <!-- Gradient doux : du transparent en haut vers un noir très léger en bas bg-gradient-to-b from-transparent via-gray-200 via-[90%] to-gray-200 -->
<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"> <div class="absolute top-0 bottom-0 right-0 left-0 inset-0 flex items-center justify-center">
<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"> <h1 class="text-center text-white/50 laptop:text-[200px] text-7xl font-extrabold drop-shadow-lg transition duration-500">
Scout Baslac Scout Baslac
</h1> </h1>
</div> </div>
</div> </div>
<!-- Contenu principal avec animation et grilles --> <!-- 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"> <div class="w-full desktop:px-[17.5%] laptop:px-[12.5%] px-4 mt-10 pb-12 space-y-12">
<!-- Carte "Qui sommes-nous ?" --> <!-- Carte "Qui sommes-nous ?" -->
<transition name="fade" mode="out-in"> <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="bg-gray-100 shadow-xl rounded-lg overflow-hidden transform transition duration-200">
<div class="flex flex-col lg:flex-row"> <div class="flex flex-col lg:flex-row">
<!-- Partie Image --> <!-- Partie Image -->
<div class="lg:w-1/2 relative max-h-56 hover:p-trans-in p-trans-out duration-200 overflow-hidden"> <div class="lg:w-1/2 relative max-h-56 hover:p-trans-in p-trans-out duration-200 overflow-hidden">

Write Preview
Loading…
Cancel
Save