Implemment gallery on homnepage (#9)

* Implemment gallery on homnepage * Add 2024 website to footer
Sunny-Tech · Oct 28, 2024 · 58b82eb · 58b82eb
1 parent 43b2c7c
commit 58b82eb
Show file tree

Hide file tree

Showing 9 changed files with 179 additions and 22 deletions.
diff --git a/public/backgrounds/team2.jpg b/public/backgrounds/team2.jpg
diff --git a/src/components/footer/FooterRel.astro b/src/components/footer/FooterRel.astro
@@ -11,6 +11,7 @@ const footerRelBlock = [
     {
         title: 'Voir les éditions antérieures',
         links: [
+            { name: 'Sunny Tech 2024', url: 'https://2024.sunny-tech.io', newTab: true },
             { name: 'Sunny Tech 2023', url: 'https://2023.sunny-tech.io', newTab: true },
             { name: 'Sunny Tech 2022', url: 'https://2022.sunny-tech.io', newTab: true },
             { name: 'Sunny Tech 2019', url: 'https://2019.sunny-tech.io', newTab: true },

diff --git a/src/components/Hero.astro → src/components/home/Hero.astro b/src/components/Hero.astro → src/components/home/Hero.astro
@@ -25,7 +25,7 @@
         background-size: cover;
         text-align: center;
 
-        height: 100vh;
+        height: calc(100vh + 1px);
         max-height: calc(100vh + 1px);
         position: relative;
         margin-top: -65px;

diff --git a/src/components/HomeAboutBlock.astro → src/components/home/HomeAboutBlock.astro b/src/components/HomeAboutBlock.astro → src/components/home/HomeAboutBlock.astro
@@ -1,5 +1,5 @@
 ---
-import ButtonLink from './ui-elements/ButtonLink.astro'
+import ButtonLink from '../ui-elements/ButtonLink.astro'
 
 const blocks = [
     {

diff --git a/src/components/HomeContentBlock.astro → src/components/home/HomeContentBlock.astro b/src/components/HomeContentBlock.astro → src/components/home/HomeContentBlock.astro
diff --git a/src/components/home/HomeGalleryBlock.astro b/src/components/home/HomeGalleryBlock.astro
@@ -0,0 +1,144 @@
+---
+import ButtonLink from '../ui-elements/ButtonLink.astro'
+
+const gallery = [
+    'https://firebasestorage.googleapis.com/v0/b/sunnytech-2024.appspot.com/o/miniature-gallerie-site%2FIMG_1125.jpg?alt=media&token=c3f9c4d6-10d3-42da-a739-123726d0b109',
+    'https://firebasestorage.googleapis.com/v0/b/sunnytech-2024.appspot.com/o/miniature-gallerie-site%2F20240704_185656(1).jpg?alt=media&token=ef0a68d2-14ae-49d0-b79b-18971ddb04cf',
+    'https://firebasestorage.googleapis.com/v0/b/sunnytech-2024.appspot.com/o/miniature-gallerie-site%2FIMG_1192.jpg?alt=media&token=9aab2010-91bb-4f21-9ff2-2d36d7007634',
+    'https://firebasestorage.googleapis.com/v0/b/sunnytech-2024.appspot.com/o/miniature-gallerie-site%2FIMG_1300.jpg?alt=media&token=c828cba9-1708-45e3-a4c9-62335d2c1e05',
+    'https://firebasestorage.googleapis.com/v0/b/sunnytech-2024.appspot.com/o/miniature-gallerie-site%2FIMG_1268.jpg?alt=media&token=7d6516b0-ea0c-4699-bcbe-673c7a1b5b02',
+    'https://firebasestorage.googleapis.com/v0/b/sunnytech-2024.appspot.com/o/miniature-gallerie-site%2FIMG_1185.jpg?alt=media&token=ca7b7e77-9de3-4de0-991a-7eec38ffc1cd',
+    'https://firebasestorage.googleapis.com/v0/b/sunnytech-2024.appspot.com/o/miniature-gallerie-site%2FIMG_1230.jpg?alt=media&token=1886b50e-012e-45de-8a7a-a078f6434641',
+    'https://firebasestorage.googleapis.com/v0/b/sunnytech-2024.appspot.com/o/miniature-gallerie-site%2FIMG_1193.jpg?alt=media&token=a0ad5ae0-e318-42f0-bf32-837604852ffe',
+]
+---
+
+<div class="photos-grid">
+    {gallery.map((photo) => <img class="grid-item" src={photo} alt="gallery photo" loading="lazy" />)}
+
+    <div class="gallery-info">
+        <div>
+            <h2>Moments forts de Sunny Tech 2024</h2>
+            <p>Grâce à nos photographes, revivez l'édition 2024</p>
+        </div>
+        <ButtonLink
+            href="https://photos.app.goo.gl/BjqfEkdeMh1WzeNAA"
+            target="_blank"
+            rel="noopener noreferrer"
+            variant="transparent">
+            Grâce à nos photographes, revivez l'édition 2024
+        </ButtonLink>
+    </div>
+</div>
+
+<style>
+    .photos-grid {
+        margin: 64px auto;
+        display: grid;
+        width: 100%;
+        min-height: 400px;
+        height: calc(100vh - 40px);
+        max-height: 750px;
+        grid-template-columns: repeat(3, 1fr);
+        grid-template-rows: repeat(5, 1fr);
+        grid-gap: 2px;
+    }
+
+    .grid-item {
+        object-fit: cover;
+        width: 100%;
+        height: 100%;
+        background-color: var(--secondary-background-color);
+    }
+
+    .grid-item:nth-child(1) {
+        grid-area: 1 / 1 / 3 / 4;
+    }
+
+    .grid-item:nth-child(2) {
+        grid-area: 3 / 1 / 5 / 3;
+    }
+
+    .grid-item:nth-child(3) {
+        grid-area: 3 / 3 / 3 / 3;
+    }
+
+    .grid-item:nth-child(4) {
+        grid-area: 4 / 3 / 4 / 3;
+    }
+
+    .grid-item:nth-child(5) {
+        grid-area: 5 / 1 / 5 / 1;
+    }
+
+    .grid-item:nth-child(6) {
+        display: none;
+    }
+
+    .grid-item:nth-child(7) {
+        display: none;
+    }
+
+    .grid-item:nth-child(8) {
+        display: none;
+    }
+
+    .gallery-info {
+        padding: 16px;
+        background-color: var(--default-primary-color);
+        color: var(--text-primary-color);
+        z-index: 1;
+        grid-area: 5 / 2 / 5 / 4;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+
+    @media (min-width: 640px) {
+        .photos-grid {
+            height: calc(100vh - 64px);
+            grid-template-columns: repeat(5, 1fr);
+            grid-template-rows: repeat(3, 1fr);
+        }
+
+        .grid-item:nth-child(1) {
+            grid-area: 1 / 1 / 1 / 3;
+        }
+
+        .grid-item:nth-child(2) {
+            grid-area: 1 / 3 / 2 / 5;
+        }
+
+        .grid-item:nth-child(3) {
+            grid-area: 1 / 5 / 3 / 5;
+        }
+
+        .grid-item:nth-child(4) {
+            grid-area: 2 / 1 / 2 / 1;
+        }
+
+        .grid-item:nth-child(5) {
+            grid-area: 2 / 2 / 2 / 2;
+        }
+
+        .grid-item:nth-child(6) {
+            grid-area: 3 / 1 / 3 / 3;
+            display: block;
+        }
+
+        .grid-item:nth-child(7) {
+            grid-area: 3 / 3 / 3 / 3;
+            display: block;
+        }
+
+        .grid-item:nth-child(8) {
+            grid-area: 3 / 4 / 3 / 6;
+            display: block;
+        }
+
+        .gallery-info {
+            padding: 24px;
+            grid-area: 2 / 3 / 2 / 5;
+        }
+    }
+</style>
diff --git a/src/components/SponsorsBlock.astro → src/components/home/SponsorsBlock.astro b/src/components/SponsorsBlock.astro → src/components/home/SponsorsBlock.astro
@@ -1,6 +1,6 @@
 ---
-import type { OpenPlannerType } from '../type'
-import ButtonLink from './ui-elements/ButtonLink.astro'
+import type { OpenPlannerType } from '../../type'
+import ButtonLink from '../ui-elements/ButtonLink.astro'
 
 interface Props {
     sponsorCategories: OpenPlannerType['sponsors']

diff --git a/src/components/ui-elements/ButtonLink.astro b/src/components/ui-elements/ButtonLink.astro
@@ -3,20 +3,29 @@ interface Props {
     href: string
     target?: string
     rel?: string
+    variant?: 'primary' | 'transparent'
 }
 
-const { href, target = '', rel = '' } = Astro.props
+const { href, target = '', rel = '', variant = 'primary' } = Astro.props
 ---
 
-<a class="become" href={href} target={target} rel={rel}>
+<a class={variant} href={href} target={target} rel={rel}>
     <slot />
-
-    <span> <slot name="icon" /> </span>
+    <span><slot name="icon" /></span>
 </a>
 
 <style>
-    a {
+    .primary {
         color: var(--default-primary-color);
+        background: transparent;
+    }
+
+    .transparent {
+        color: #fff;
+        background: transparent;
+    }
+
+    a {
         text-decoration: none;
         padding: 8px 16px;
         font-weight: 600;
@@ -29,18 +38,19 @@ const { href, target = '', rel = '' } = Astro.props
         width: fit-content;
     }
 
+    a:hover {
+        background-color: var(--default-primary-color);
+        color: #fff;
+    }
+    a.transparent:hover {
+        background-color: var(--dark-primary-color);
+        color: #fff;
+    }
+
     a span {
         margin-left: 8px;
         width: 16px;
         height: 16px;
-        fill: var(--default-primary-color);
-    }
-
-    a:hover {
-        background-color: var(--default-primary-color);
-        color: #fff;
-        svg {
-            fill: #fff;
-        }
+        fill: currentColor;
     }
 </style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,10 +1,11 @@
 ---
 import type { OpenPlannerType } from '../type'
 import Layout from '../layouts/Layout.astro'
-import SponsorsBlock from '../components/SponsorsBlock.astro'
-import Hero from '../components/Hero.astro'
-import HomeContentBlock from '../components/HomeContentBlock.astro'
-import HomeAboutBlock from '../components/HomeAboutBlock.astro'
+import SponsorsBlock from '../components/home/SponsorsBlock.astro'
+import Hero from '../components/home/Hero.astro'
+import HomeContentBlock from '../components/home/HomeContentBlock.astro'
+import HomeAboutBlock from '../components/home/HomeAboutBlock.astro'
+import HomeGalleryBlock from '../components/home/HomeGalleryBlock.astro'
 
 const OPENPLANNER_URL = import.meta.env.OPENPLANNER_URL
 const response = await fetch(OPENPLANNER_URL)
@@ -15,6 +16,7 @@ const openPlannerData: OpenPlannerType = await response.json()
     <Hero />
 
     <HomeContentBlock />
+    <HomeGalleryBlock />
     <HomeAboutBlock />
 
     <SponsorsBlock sponsorCategories={openPlannerData.sponsors} />