Christmas Banner

app/Console/Commands/excel/CoderDojoEvents.php

@@ -42,7 +42,7 @@ public function handle(): void
 
         Excel::import(
             new CoderDojoEventsImport(),
-            '20241024 CodeWeek activities NOVEMBER CoderDojo Belgium.xlsx',
+            'events-coderdojobelgium.xlsx',
             'excel'
         );
     }

resources/assets/sass/pages/homepage.scss

@@ -10,6 +10,7 @@
 #main-banner .what{
   display: flex;
   margin: 50px 10%;
+  margin-bottom: 1rem;
 }
 
 #main-banner .what .separator{
@@ -35,6 +36,22 @@
   margin: 40px 0 20px 10%;
 }
 
+@media (max-width: 993px) {
+  #main-banner .info .when {
+    margin: 4rem;
+  }
+}
+
+@media (max-width: 525px) {
+  #main-banner .info .when {
+    margin: 0rem;
+  }
+
+  #main-banner .info {
+    padding: 1rem;
+  }
+}
+
 #main-banner .info .when .arrow{
   text-align: center;
   margin-top: 70px;
@@ -61,6 +78,11 @@
   text-align: center;
   width: 220px;
 }
+@media (max-width: 993px) {
+  #main-banner .info .when .date {
+    width: 100%;
+  }
+}
 #main-banner .info .countdown {
   margin-bottom: 15px;
 }
@@ -188,7 +210,6 @@
 /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
 @media (min-width:641px)  {
   #main-banner{
-    background-image: url('/images/bubbles.svg');
     background-repeat: no-repeat;
     background-position-x: 112%;
   }
@@ -292,17 +313,19 @@
   }
   #main-banner .info .when{
     margin-right: 50px;
-    width: 350px;
+    width: auto;
+    max-width: 500px;
   }
   #main-banner .info .when .date{
     font-size: 38px;
-    margin-bottom: 30px;
+    margin-bottom: 1rem;
   }
   #main-banner .info .when .text {
     font-size: 18px;
   }
   #main-banner .info .countdown {
-    margin-top: 50px;
+  margin-top: 3rem;
+  margin-left: -10px;
   }
   #main-banner .info .when .arrow{
     width: 94px;

resources/lang/en/home.php

@@ -2,8 +2,9 @@
 
 return [
     'about' => 'EU Code Week is a grassroots initiative which aims to bring coding and digital literacy to <span class="blue-color">everybody</span> in a fun and engaging way…',
-    'when' => '',
+    'when' => 'Join us for some festive fun!',
     'when_text' => 'Learning to code helps us make sense of the rapidly changing world around us. Join millions of fellow organisers and participants to inspire the development of coding and computational thinking skills in order to explore new ideas and innovate for the future.',
+    'xmas_text' => 'Make this festive season sparkle with innovation and creativity! Join  our \'Coding@Christmas\' fun by adding your coding activity to our map,  and be in with a chance to win a micro:bit kit for your students. Let’s  celebrate the holidays by empowering the next generation of thinkers and creators. Add your activity today and help inspire a brighter future!',
     'school_banner_title' => 'Get Involved! Add an Activity!',
     'school_banner_text' => 'Are you a teacher?',
     'school_banner_text2' => 'Find out how to get involved!',

resources/views/static/home.blade.php

@@ -2,7 +2,8 @@
 
 @section('content')
     <section id="codeweek-homepage" class="codeweek-page">
-        <section id="main-banner">
+        <section class="relative" id="main-banner">
+            <img src="/images/bubbles1.png" class="absolute top-0 right-0 static-image">
             <div class="what">
                 <div class="separator"></div>
                 <div class="text">@lang('home.about')</div>
@@ -11,13 +12,16 @@
                 <div class="countdown">
                     <div id="countdown">
                     </div>
-                    <img src="/images/countdown.svg" class="static-image">
+                    <img src="/images/xmas.svg" class="static-image max-h-[422px]">
                 </div>
                 <div class="when">
-                    <div class="mb-4 title">#EUCodeWeek</div>
-                    <!--<div class="date">@lang('home.when')</div> -->
-                    <div class="text">@lang('home.when_text')</div>
-                    <div class="arrow"><img src="/images/arrow_down.svg"></div>
+                    <div class="title">Coding@Christmas</div>
+                    <div class="date">@lang('home.when')</div> 
+                    <div class="text">@lang('home.xmas_text')</div>
+                   <!-- <div class="arrow"><img src="/images/arrow_down.svg"></div>-->
+                   <a href="/blog/codingchristmas-2024/" class="mt-4 self-start px-6 text-base font-bold text-white uppercase bg-secondary hover:bg-blue-primary leading-truly-normal rounded-lg min-h-[38px] lg:max-w-[168px] flex items-center justify-center max-tablet:px-5 max-tablet:w-full max-tablet:max-w-full max-lg:text-center max-tablet:mx-auto" role="button">
+                    Get involved!
+                    </a>
                 </div>
             </div>
         </section>