Add hero and fix share (#3)

Sunny-Tech · Oct 27, 2024 · 7608c3c · 7608c3c
1 parent 0af3125
commit 7608c3c
Show file tree

Hide file tree

Showing 9 changed files with 81 additions and 3 deletions.
diff --git a/public/backgrounds/croissant2.jpg b/public/backgrounds/croissant2.jpg
diff --git a/public/backgrounds/croissant3.jpg b/public/backgrounds/croissant3.jpg
diff --git a/public/backgrounds/home.jpg b/public/backgrounds/home.jpg
diff --git a/public/social-share4.jpg b/public/social-share4.jpg
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
@@ -0,0 +1,77 @@
+---
+
+---
+
+<div class="container">
+    <div class="content">
+        <img src="/logos-sunnytech/logo.svg" alt="SunnyTech" loading="lazy" />
+
+        <h1>26 et 27 juin 2025 à Montpellier</h1>
+        <h2>#SeaTechAndSun ☀️️️</h2>
+
+        <a href="https://2024.sunny-tech.io" target="_blank">édition 2024</a>
+    </div>
+    <div class="overlay"></div>
+</div>
+
+<style>
+    .container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding-top: 100px;
+        background: url('/backgrounds/home.jpg') no-repeat center center;
+        background-size: cover;
+
+        height: calc(100vh - 65px);
+        max-height: calc(100vh + 1px);
+    }
+
+    .overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: rgba(0, 0, 0, 0.5);
+        z-index: 0;
+    }
+
+    .content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 20px;
+        z-index: 1;
+    }
+
+    .content img {
+        width: 200px;
+        height: 200px;
+    }
+
+    .content h1 {
+        font-size: 40px;
+        font-weight: 700;
+        color: #fff;
+    }
+
+    .content h2 {
+        font-size: 20px;
+        font-weight: 400;
+        color: #fff;
+    }
+
+    a {
+        color: #fff;
+        text-decoration: none;
+        border-radius: 4px;
+        background-color: var(--default-primary-color);
+        transition: background-color var(--animation);
+        padding: 8px 16px;
+        font-weight: 600;
+        text-transform: uppercase;
+    }
+</style>
diff --git a/src/components/Menu.astro b/src/components/Menu.astro
@@ -32,7 +32,7 @@ const navigation = [
 
 <style>
     .header-toolbar {
-        z-index: 1;
+        z-index: 2;
         border-bottom: 1px solid var(--divider-color);
         background-color: var(--primary-background-color);
         transition:

diff --git a/src/components/footer/FooterRel.astro b/src/components/footer/FooterRel.astro
@@ -1,5 +1,5 @@
 ---
-import SubscribeFormFooter from '../SubscribeFormFooter.astro'
+import SubscribeFormFooter from './SubscribeFormFooter.astro'
 const footerRelBlock = [
     {
         title: 'A propos',

diff --git a/src/components/SubscribeFormFooter.astro → ...mponents/footer/SubscribeFormFooter.astro b/src/components/SubscribeFormFooter.astro → ...mponents/footer/SubscribeFormFooter.astro
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -4,6 +4,7 @@ import Layout from '../layouts/Layout.astro'
 import SponsorsBlock from '../components/SponsorsBlock.astro'
 import FooterBlock from '../components/footer/FooterBlock.astro'
 import Menu from '../components/Menu.astro'
+import Hero from '../components/Hero.astro'
 
 const OPENPLANNER_URL = import.meta.env.OPENPLANNER_URL
 const response = await fetch(OPENPLANNER_URL)
@@ -13,7 +14,7 @@ const openPlannerData: OpenPlannerType = await response.json()
 <Layout title="SunnyTech">
     <Menu />
     <main>
-        <h1>SunnyTech</h1>
+        <Hero />
 
         <SponsorsBlock sponsorCategories={openPlannerData.sponsors} />
     </main>