diff --git a/app/Http/Controllers/HomeController.php b/app/Http/Controllers/HomeController.php
index 58dc72bdf..609ce231d 100644
--- a/app/Http/Controllers/HomeController.php
+++ b/app/Http/Controllers/HomeController.php
@@ -1,5 +1,13 @@
 <?php
 
+/**
+ * @Author: Bernard Hanna
+ * @Date:   2025-03-20 10:42:36
+ * @Last Modified by:   Bernard Hanna
+ * @Last Modified time: 2025-03-20 15:03:48
+ */
+
+
 namespace App\Http\Controllers;
 
 use Illuminate\Http\Request;
@@ -10,6 +18,13 @@ class HomeController extends Controller
     public function index(Request $request): View
     {
         $activities = collect([
+            [
+                'title' => 'October 11-26',
+                'description' => '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.',
+                'url' => '/guide',
+                'style_color' => 'background-image: linear-gradient(36.92deg, #1C4DA1 20.32%, #0040AE 28.24%);',
+                'btn_lang' => 'home.get_involved',
+            ],
             [
                 'title' => 'Girls in Digital',
                 'description' => 'Explore and embrace digital opportunities—empowering a new generation of girls in digital!',
diff --git a/public/images/homepage/slide1.png b/public/images/homepage/slide1.png
new file mode 100644
index 000000000..7a487a06d
Binary files /dev/null and b/public/images/homepage/slide1.png differ
diff --git a/resources/assets/sass/pages/homepage.scss b/resources/assets/sass/pages/homepage.scss
index 36b8ee379..6cc4989a7 100644
--- a/resources/assets/sass/pages/homepage.scss
+++ b/resources/assets/sass/pages/homepage.scss
@@ -177,13 +177,6 @@
   display: flex;
   flex-direction: column;
 }
-#countdown {
-  display: flex;
-  position: absolute;
-  right: 0;
-  margin-right: 22%;
-  margin-top: 8%;
-}
 
 #countdown div{
   padding: 10px 5px;
diff --git a/resources/views/static/home.blade.php b/resources/views/static/home.blade.php
index c3b63fb9e..0b3065581 100644
--- a/resources/views/static/home.blade.php
+++ b/resources/views/static/home.blade.php
@@ -1,3 +1,11 @@
+<?php
+/**
+ * @Author: Bernard Hanna
+ * @Date:   2025-03-20 10:42:36
+ * @Last Modified by:   Bernard Hanna
+ * @Last Modified time: 2025-03-20 15:40:25
+ */
+?>
 @extends('layout.new_base')
 
 @section('title', 'Join EU Code Week – Learn, Create, & Have Fun with Coding')
@@ -5,130 +13,194 @@
 
 @section('non-vue-content')
     <section id="codeweek-homepage" class="codeweek-page font-['Blinker']">
-      <section class="relative flex overflow-hidden">
-          <div id="slider-wrapper" class="flex relative transition-all w-full bg-secondary-gradient">
-            @foreach ($activities as $index => $activity)
-                <div class="absolute top-0 left-0 w-full h-full overflow-hidden md:px-16 pb-10 md:p-0 flex flex-col md:flex-row justify-end md:items-center flex-shrink-0">
-                    <div class="relative flex-grow-1 h-full">
-                      <button
-                        id="slider-prev-small-btn"
-                        class="absolute z-10 top-1/2 -translate-y-1/2 -left-2 hover:left-0 bg-white hover:bg-[#F95C22] p-4 pl-6 rounded-r-full duration-300 block md:hidden"
-                        style="display: none;"
-                      >
-                        <img class="rotate-180 w-8 h-8" src="/images/arrow-right-icon.svg" />
-                      </button>
-                      <button
-                        id="slider-next-small-btn"
-                        class="absolute z-10 top-1/2 -translate-y-1/2 -right-2 hover:right-0 bg-white hover:bg-[#F95C22] p-4 pr-6 rounded-l-full duration-300 block md:hidden"
-                        style="display: none;"
-                      >
-                        <img class="w-8 h-8" src="/images/arrow-right-icon.svg" />
-                      </button>
-                    </div>
+        <section class="relative flex overflow-hidden">
+            <div id="slider-wrapper" class="relative flex w-full transition-all bg-secondary-gradient">
+                @foreach ($activities as $index => $activity)
                     <div
-                      id="activity-{{ $index }}"
-                      class="home-activity codeweek-container-lg flex items-end md:items-center duration-1000"
-                      style="opacity: {{ $index === 0 ? 1 : 0 }}"
-                    >
-                        <div class="px-6 py-10 max-md:w-full md:px-14 md:py-[4.5rem] bg-white rounded-[32px] z-10 relative">
-                            <h2 class="text-[#1C4DA1] text-[30px] md:text-[60px] leading-9 md:leading-[72px] font-normal font-['Montserrat'] mb-4">
-                                {{ $activity['title'] }}
-                            </h2>
-                            <p class="text-xl md:text-2xl leading-8 text-[#333E48] p-0 mb-4 max-md:max-w-full max-w-[525px]">
-                                {{ mb_substr(strip_tags($activity['description']), 0, 200) }}
-                            </p>
-                            <a
-                              class="inline-block bg-primary hover:bg-hover-orange rounded-full py-4 px-6 md:px-10 font-semibold text-base w-full md:w-auto text-center text-[#20262C] transition-all duration-300"
-                              href="{{ $activity['url'] }}"
-                            >
-                              @lang($activity['btn_lang'])
-                            </a>
-                            <div class="absolute top-0 -translate-y-1/2 bg-yellow py-3 md:py-4 px-8 md:px-10 rounded-full text-secondary font-semibold text-[16px] m:dtext-base">
-                                #EUCodeWeek
+                        class="absolute top-0 left-0 flex flex-col justify-end flex-shrink-0 w-full h-full pb-10 overflow-hidden md:px-16 md:p-0 md:flex-row md:items-center">
+                        <div class="relative h-full flex-grow-1">
+                            <button id="slider-prev-small-btn"
+                                class="absolute z-10 top-1/2 -translate-y-1/2 -left-2 hover:left-0 bg-white hover:bg-[#F95C22] p-4 pl-6 rounded-r-full duration-300 block md:hidden"
+                                style="display: none;">
+                                <img class="w-8 h-8 rotate-180" src="/images/arrow-right-icon.svg" />
+                            </button>
+                            <button id="slider-next-small-btn"
+                                class="absolute z-10 top-1/2 -translate-y-1/2 -right-2 hover:right-0 bg-white hover:bg-[#F95C22] p-4 pr-6 rounded-l-full duration-300 block md:hidden"
+                                style="display: none;">
+                                <img class="w-8 h-8" src="/images/arrow-right-icon.svg" />
+                            </button>
+                        </div>
+                        <div id="activity-{{ $index }}"
+                            class="flex items-end duration-1000 home-activity codeweek-container-lg md:items-center"
+                            style="opacity: {{ $index === 0 ? 1 : 0 }}">
+                            <div
+                                class="px-6 py-10 max-md:w-full md:px-14 md:py-[4.5rem] bg-white rounded-[32px] z-10 relative">
+                                @if ($index === 0)
+                                    <div x-data="countdownTimer('2025-10-14T00:00:00')" x-init="startCountdown()"
+                                        class="flex gap-2.5 items-start max-md:gap-2 max-sm:gap-1.5 mt-4 mb-4" role="timer"
+                                        aria-label="Countdown timer">
+
+                                        <!-- Days -->
+                                        <div class="px-2 py-1 text-3xl leading-9 text-white bg-black max-md:px-1.5 max-md:py-1 max-md:text-2xl max-md:leading-8 max-sm:px-1 max-sm:py-0.5 max-sm:text-xl max-sm:leading-7"
+                                            aria-label="Days" x-text="days">00</div>
+                                        <div class="text-3xl leading-9 text-black max-md:text-2xl max-md:leading-8 max-sm:text-xl max-sm:leading-7"
+                                            aria-hidden="true">:</div>
+
+                                        <!-- Hours -->
+                                        <div class="px-2 py-1 text-3xl leading-9 text-white bg-black max-md:px-1.5 max-md:py-1 max-md:text-2xl max-md:leading-8 max-sm:px-1 max-sm:py-0.5 max-sm:text-xl max-sm:leading-7"
+                                            aria-label="Hours" x-text="hours">00</div>
+                                        <div class="text-3xl leading-9 text-black max-md:text-2xl max-md:leading-8 max-sm:text-xl max-sm:leading-7"
+                                            aria-hidden="true">:</div>
+
+                                        <!-- Minutes -->
+                                        <div class="px-2 py-1 text-3xl leading-9 text-white bg-black max-md:px-1.5 max-md:py-1 max-md:text-2xl max-md:leading-8 max-sm:px-1 max-sm:py-0.5 max-sm:text-xl max-sm:leading-7"
+                                            aria-label="Minutes" x-text="minutes">00</div>
+                                        <div class="text-3xl leading-9 text-black max-md:text-2xl max-md:leading-8 max-sm:text-xl max-sm:leading-7"
+                                            aria-hidden="true">:</div>
+
+                                        <!-- Seconds -->
+                                        <div class="px-2 py-1 text-3xl leading-9 text-white bg-black max-md:px-1.5 max-md:py-1 max-md:text-2xl max-md:leading-8 max-sm:px-1 max-sm:py-0.5 max-sm:text-xl max-sm:leading-7"
+                                            aria-label="Seconds" x-text="seconds">00</div>
+                                    </div>
+                                @endif
+                                <script>
+                                    function countdownTimer(targetDate) {
+                                        return {
+                                            target: new Date(targetDate).getTime(),
+                                            days: "00",
+                                            hours: "00",
+                                            minutes: "00",
+                                            seconds: "00",
+                                            startCountdown() {
+                                                setInterval(() => {
+                                                    let now = new Date().getTime();
+                                                    let distance = this.target - now;
+
+                                                    if (distance <= 0) {
+                                                        this.days = "00";
+                                                        this.hours = "00";
+                                                        this.minutes = "00";
+                                                        this.seconds = "00";
+                                                        return;
+                                                    }
+
+                                                    this.days = Math.floor(distance / (1000 * 60 * 60 * 24));
+                                                    this.hours = String(Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)))
+                                                        .padStart(2, '0');
+                                                    this.minutes = String(Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))).padStart(2,
+                                                        '0');
+                                                    this.seconds = String(Math.floor((distance % (1000 * 60)) / 1000)).padStart(2, '0');
+                                                }, 1000);
+                                            }
+                                        };
+                                    }
+                                </script>
+
+                                <h2
+                                    class="text-[#1C4DA1] text-[30px] md:text-[60px] leading-9 md:leading-[72px] font-normal font-['Montserrat'] mb-4">
+                                    {{ $activity['title'] }}
+                                </h2>
+                                <p
+                                    class="text-xl md:text-2xl leading-8 text-[#333E48] p-0 mb-4 max-md:max-w-full max-w-[525px]">
+                                    {{ mb_substr(strip_tags($activity['description']), 0, 200) }}
+                                </p>
+                                <a class="inline-block bg-primary hover:bg-hover-orange rounded-full py-4 px-6 md:px-10 font-semibold text-base w-full md:w-auto text-center text-[#20262C] transition-all duration-300"
+                                    href="{{ $activity['url'] }}">
+                                    @lang($activity['btn_lang'])
+                                </a>
+
+                                <div
+                                    class="absolute top-0 -translate-y-1/2 bg-yellow py-3 md:py-4 px-8 md:px-10 rounded-full text-secondary font-semibold text-[16px] m:dtext-base">
+                                    #EUCodeWeek
+                                </div>
+                            </div>
+                            
+@if ($index === 0)
+    <img class="absolute top-0 -left-1/4 w-[150vw] !max-w-none md:hidden"
+         loading="lazy"
+         src="{{ asset('images/homepage/slide1.png') }}"
+         style="clip-path: ellipse(71% 73% at 40% 20%);" />
+
+    <img class="absolute top-0 right-0 h-full max-w-[calc(70vw)] object-cover hidden md:block"
+         loading="lazy"
+         src="{{ asset('images/homepage/slide1.png') }}"
+         style="clip-path: ellipse(70% 140% at 70% 25%);" />
+@else
+    <img class="absolute top-0 -left-1/4 w-[150vw] !max-w-none md:hidden"
+         loading="lazy"
+         src="{{ asset('images/search/search_bg_lg_' . ($index % 2 === 0 ? 1 : 2) . '.jpeg') }}"
+         style="clip-path: ellipse(71% 73% at 40% 20%);" />
+
+    <img class="absolute top-0 right-0 h-full max-w-[calc(70vw)] object-cover hidden md:block"
+         loading="lazy"
+         src="{{ asset('images/search/search_bg_lg_' . ($index % 2 === 0 ? 1 : 2) . '.jpeg') }}"
+         style="clip-path: ellipse(70% 140% at 70% 25%);" />
+@endif
+
+                            <div class="absolute bottom-0 right-0 hidden homepage-robot md:block">
+                                <img class="robot-land" src="/images/homepage/robot-land.png" />
+                                <div class="absolute bottom-10 right-10">
+                                    <img src="/images/homepage/robot.png" />
+                                    <img class="robot-word" src="/images/homepage/robot-word.svg" />
+                                    <div>
+                                    </div>
+                                </div>
                             </div>
                         </div>
-                        <img
-                          class="absolute top-0 -left-1/4 w-[150vw] !max-w-none md:hidden"
-                          loading="lazy"
-                          src="images/search/search_bg_lg_{{ ($index % 2) === 0 ? 1 : 2 }}.jpeg"
-                          style="clip-path: ellipse(71% 73% at 40% 20%);"
-                        />
-                        <img
-                          class="absolute top-0 right-0 h-full max-w-[calc(70vw)] object-cover hidden md:block"
-                          loading="lazy"
-                          src="images/search/search_bg_lg_{{ ($index % 2) === 0 ? 1 : 2 }}.jpeg"
-                          style="clip-path: ellipse(70% 140% at 70% 25%);"
-                        >
-                        <div class="homepage-robot absolute right-0 bottom-0 hidden md:block">
-                          <img class="robot-land" src="/images/homepage/robot-land.png" />
-                          <div class="absolute bottom-10 right-10">
-                            <img src="/images/homepage/robot.png" />
-                            <img class="robot-word" src="/images/homepage/robot-word.svg" />
-                          <div>
-                      </div>
-                      </div>
-                  </div>
-                </div>
-              </div>
-            @endforeach
+                    </div>
+                @endforeach
 
-            <button
-              id="slider-prev-btn"
-              class="absolute top-28 md:top-1/2 -translate-y-1/2 -left-2 hover:left-0 bg-white hover:bg-[#F95C22] p-4 pl-6 rounded-r-full duration-300 hidden md:block"
-              style="display: none;"
-            >
-              <img class="rotate-180 w-8 h-8" src="/images/arrow-right-icon.svg" />
-            </button>
-            <button
-              id="slider-next-btn"
-              class="absolute top-28 md:top-1/2 -translate-y-1/2 -right-2 hover:right-0 bg-white hover:bg-[#F95C22] p-4 pr-6 rounded-l-full duration-300 hidden md:block"
-              style="display: none;"
-            >
-              <img class="w-8 h-8" src="/images/arrow-right-icon.svg" />
-            </button>
+                <button id="slider-prev-btn"
+                    class="absolute top-28 md:top-1/2 -translate-y-1/2 -left-2 hover:left-0 bg-white hover:bg-[#F95C22] p-4 pl-6 rounded-r-full duration-300 hidden md:block"
+                    style="display: none;">
+                    <img class="w-8 h-8 rotate-180" src="/images/arrow-right-icon.svg" />
+                </button>
+                <button id="slider-next-btn"
+                    class="absolute top-28 md:top-1/2 -translate-y-1/2 -right-2 hover:right-0 bg-white hover:bg-[#F95C22] p-4 pr-6 rounded-l-full duration-300 hidden md:block"
+                    style="display: none;">
+                    <img class="w-8 h-8" src="/images/arrow-right-icon.svg" />
+                </button>
         </section>
 
-        <section class="animation-section relative bg-yellow-2">
+        <section class="relative animation-section bg-yellow-2">
             <div class="absolute w-full h-full bg-white md:hidden" style="clip-path: ellipse(100% 58% at 38% 39%)"></div>
-            <div class="absolute w-full h-full bg-white hidden md:block" style="clip-path: ellipse(70% 60% at 50% 40%);"></div>
-            <div class="relative z-10 codeweek-container-lg flex flex-col-reverse md:flex-row items-center py-16 pb-32 md:pb-48 gap-12">
+            <div class="absolute hidden w-full h-full bg-white md:block" style="clip-path: ellipse(70% 60% at 50% 40%);">
+            </div>
+            <div
+                class="relative z-10 flex flex-col-reverse items-center gap-12 py-16 pb-32 codeweek-container-lg md:flex-row md:pb-48">
                 <div class="flex-1">
-                  <div class="inline-block observer-element relative">
-                    <img class="relative z-10 w-full max-w-xl" loading="lazy" src="/images/homepage/toolkits.png" />
-                    <img
-                      class="animation-element move-background duration-[1.5s] absolute top-0 left-0 w-full max-w-xl"
-                      loading="lazy"
-                      src="/images/shape.png"
-                      style="transform: translate(-16px, -24px)"
-                    />
-                  </div>
+                    <div class="relative inline-block observer-element">
+                        <img class="relative z-10 w-full max-w-xl" loading="lazy" src="/images/homepage/toolkits.png" />
+                        <img class="animation-element move-background duration-[1.5s] absolute top-0 left-0 w-full max-w-xl"
+                            loading="lazy" src="/images/shape.png" style="transform: translate(-16px, -24px)" />
+                    </div>
                 </div>
                 <div class="flex-1">
                     <h2 class="text-[#1C4DA1] text-2xl md:text-4xl leading-[44px] font-medium font-['Montserrat'] mb-6">
                         @lang('home.toolkits_title')
                     </h2>
                     <p class="text-[#333E48] text-lg md:text-xl leading-7 p-0 mb-10">
-                      @lang('home.toolkits_description')
+                        @lang('home.toolkits_description')
                     </p>
-                    <div class="flex flex-col xl:flex-row gap-4">
-                        <a
-                          class="flex justify-center items-center gap-2 text-[#1C4DA1] border-solid border-2 border-[#1C4DA1] rounded-full py-3 px-8 font-semibold text-lg transition-all duration-300 hover:bg-[#E8EDF6] group"
-                          href="/guide"
-                        >
+                    <div class="flex flex-col gap-4 xl:flex-row">
+                        <a class="flex justify-center items-center gap-2 text-[#1C4DA1] border-solid border-2 border-[#1C4DA1] rounded-full py-3 px-8 font-semibold text-lg transition-all duration-300 hover:bg-[#E8EDF6] group"
+                            href="/guide">
                             <span>@lang('home.toolkits_button1')</span>
-                            <div class="flex gap-2 w-4 overflow-hidden">
-                                <img src="/images/arrow-right-icon.svg" class="min-w-4 duration-500 transform -translate-x-6 group-hover:translate-x-0" />
-                                <img src="/images/arrow-right-icon.svg" class="min-w-4 duration-500 transform -translate-x-6 group-hover:translate-x-0" />
+                            <div class="flex w-4 gap-2 overflow-hidden">
+                                <img src="/images/arrow-right-icon.svg"
+                                    class="duration-500 transform -translate-x-6 min-w-4 group-hover:translate-x-0" />
+                                <img src="/images/arrow-right-icon.svg"
+                                    class="duration-500 transform -translate-x-6 min-w-4 group-hover:translate-x-0" />
                             </div>
                         </a>
-                        <a
-                          class="flex justify-center items-center gap-2 text-[#1C4DA1] border-solid border-2 border-[#1C4DA1] rounded-full py-3 px-8 font-semibold text-lg transition-all duration-300 hover:bg-[#E8EDF6] group"
-                          href="/toolkits"
-                        >
-                          <span>@lang('home.toolkits_button2')</span>
-                            <div class="flex gap-2 w-4 overflow-hidden">
-                                <img src="/images/arrow-right-icon.svg" class="min-w-4 duration-500 transform -translate-x-6 group-hover:translate-x-0" />
-                                <img src="/images/arrow-right-icon.svg" class="min-w-4 duration-500 transform -translate-x-6 group-hover:translate-x-0" />
+                        <a class="flex justify-center items-center gap-2 text-[#1C4DA1] border-solid border-2 border-[#1C4DA1] rounded-full py-3 px-8 font-semibold text-lg transition-all duration-300 hover:bg-[#E8EDF6] group"
+                            href="/toolkits">
+                            <span>@lang('home.toolkits_button2')</span>
+                            <div class="flex w-4 gap-2 overflow-hidden">
+                                <img src="/images/arrow-right-icon.svg"
+                                    class="duration-500 transform -translate-x-6 min-w-4 group-hover:translate-x-0" />
+                                <img src="/images/arrow-right-icon.svg"
+                                    class="duration-500 transform -translate-x-6 min-w-4 group-hover:translate-x-0" />
                             </div>
                         </a>
                     </div>
@@ -137,7 +209,8 @@ class="flex justify-center items-center gap-2 text-[#1C4DA1] border-solid border
         </section>
 
         <section class="relative bg-yellow-2">
-            <div class="relative z-10 codeweek-container-lg flex flex-col md:flex-row items-center py-16 md:py-[186px] gap-12">
+            <div
+                class="relative z-10 codeweek-container-lg flex flex-col md:flex-row items-center py-16 md:py-[186px] gap-12">
                 <div class="flex-1">
                     <img loading="lazy" src="/images/homepage/minecraftlogo.png" />
                     <p class="text-left text-lg md:text-2xl md:leading-8 text-[#20262C] p-0 mb-6">
@@ -146,121 +219,112 @@ class="flex justify-center items-center gap-2 text-[#1C4DA1] border-solid border
                     <p class="text-[16px] md:text-lg text-[#333E48] p-0 mb-8">
                         @lang('home.minecraft_description2')
                     </p>
-                    <a
-                      class="inline-flex justify-center items-center gap-2 text-[#1C4DA1] border-solid border-2 border-[#1C4DA1] rounded-full py-3 px-8 font-semibold text-lg transition-all duration-300 hover:bg-[#FFEF99] group"
-                      href="https://www.codeweekcoders.eu/"
-                    >
+                    <a class="inline-flex justify-center items-center gap-2 text-[#1C4DA1] border-solid border-2 border-[#1C4DA1] rounded-full py-3 px-8 font-semibold text-lg transition-all duration-300 hover:bg-[#FFEF99] group"
+                        href="https://www.codeweekcoders.eu/">
                         <span>@lang('home.minecraft_button')</span>
-                        <div class="flex gap-2 w-4 overflow-hidden">
-                            <img src="/images/arrow-right-icon.svg" class="min-w-4 duration-500 transform -translate-x-6 group-hover:translate-x-0" />
-                            <img src="/images/arrow-right-icon.svg" class="min-w-4 duration-500 transform -translate-x-6 group-hover:translate-x-0" />
+                        <div class="flex w-4 gap-2 overflow-hidden">
+                            <img src="/images/arrow-right-icon.svg"
+                                class="duration-500 transform -translate-x-6 min-w-4 group-hover:translate-x-0" />
+                            <img src="/images/arrow-right-icon.svg"
+                                class="duration-500 transform -translate-x-6 min-w-4 group-hover:translate-x-0" />
                         </div>
                     </a>
                 </div>
-                <div class="observer-element flex-1">
-                    <img class="animation-element fade-scale-right duration-700" loading="lazy" src="/images/homepage/minecraft1.png" />
+                <div class="flex-1 observer-element">
+                    <img class="duration-700 animation-element fade-scale-right" loading="lazy"
+                        src="/images/homepage/minecraft1.png" />
                 </div>
             </div>
         </section>
 
-        <section class="animation-section relative overflow-hidden">
-            <div class="relative z-10 codeweek-container-lg flex flex-col-reverse md:flex-row items-center py-16 gap-12">
+        <section class="relative overflow-hidden animation-section">
+            <div class="relative z-10 flex flex-col-reverse items-center gap-12 py-16 codeweek-container-lg md:flex-row">
                 <div class="flex-1">
-                  <div class="inline-block observer-element relative">
-                    <img class="relative z-10 w-full max-w-xl" loading="lazy" src="/images/homepage/activity.png" />
-                    <img
-                      class="animation-element move-background duration-[1.5s] absolute top-0 left-0 w-full max-w-xl"
-                      loading="lazy"
-                      src="/images/shape.png"
-                      style="transform: translate(-16px, -24px)"
-                    />
-                  </div>
+                    <div class="relative inline-block observer-element">
+                        <img class="relative z-10 w-full max-w-xl" loading="lazy" src="/images/homepage/activity.png" />
+                        <img class="animation-element move-background duration-[1.5s] absolute top-0 left-0 w-full max-w-xl"
+                            loading="lazy" src="/images/shape.png" style="transform: translate(-16px, -24px)" />
+                    </div>
                 </div>
                 <div class="flex-1">
                     <h2 class="text-[#1C4DA1] text-2xl md:text-4xl leading-[44px] font-medium font-['Montserrat'] mb-6">
-                      @lang('home.activity_title')
+                        @lang('home.activity_title')
                     </h2>
                     <p class="text-[#333E48] text-lg md:text-xl leading-7 p-0 mb-10">
-                      @lang('home.activity_description')
+                        @lang('home.activity_description')
                     </p>
-                    <div class="flex flex-col xl:flex-row gap-4">
-                        <a
-                          class="flex justify-center items-center gap-2 text-[#1C4DA1] border-solid border-2 border-[#1C4DA1] rounded-full py-3 px-8 font-semibold text-lg transition-all duration-300 hover:bg-[#E8EDF6] group"
-                          href="/add"
-                        >
+                    <div class="flex flex-col gap-4 xl:flex-row">
+                        <a class="flex justify-center items-center gap-2 text-[#1C4DA1] border-solid border-2 border-[#1C4DA1] rounded-full py-3 px-8 font-semibold text-lg transition-all duration-300 hover:bg-[#E8EDF6] group"
+                            href="/add">
                             <span>@lang('home.activity_button1')</span>
-                            <div class="flex gap-2 w-4 overflow-hidden">
-                                <img src="/images/arrow-right-icon.svg" class="min-w-4 duration-500 transform -translate-x-6 group-hover:translate-x-0" />
-                                <img src="/images/arrow-right-icon.svg" class="min-w-4 duration-500 transform -translate-x-6 group-hover:translate-x-0" />
+                            <div class="flex w-4 gap-2 overflow-hidden">
+                                <img src="/images/arrow-right-icon.svg"
+                                    class="duration-500 transform -translate-x-6 min-w-4 group-hover:translate-x-0" />
+                                <img src="/images/arrow-right-icon.svg"
+                                    class="duration-500 transform -translate-x-6 min-w-4 group-hover:translate-x-0" />
                             </div>
                         </a>
-                        <a
-                          class="flex justify-center items-center gap-2 text-[#1C4DA1] border-solid border-2 border-[#1C4DA1] rounded-full py-3 px-8 font-semibold text-lg transition-all duration-300 hover:bg-[#E8EDF6] group"
-                          href="/events"
-                        >
+                        <a class="flex justify-center items-center gap-2 text-[#1C4DA1] border-solid border-2 border-[#1C4DA1] rounded-full py-3 px-8 font-semibold text-lg transition-all duration-300 hover:bg-[#E8EDF6] group"
+                            href="/events">
                             <span>@lang('home.activity_button2')</span>
-                            <div class="flex gap-2 w-4 overflow-hidden">
-                                <img src="/images/arrow-right-icon.svg" class="min-w-4 duration-500 transform -translate-x-6 group-hover:translate-x-0" />
-                                <img src="/images/arrow-right-icon.svg" class="min-w-4 duration-500 transform -translate-x-6 group-hover:translate-x-0" />
+                            <div class="flex w-4 gap-2 overflow-hidden">
+                                <img src="/images/arrow-right-icon.svg"
+                                    class="duration-500 transform -translate-x-6 min-w-4 group-hover:translate-x-0" />
+                                <img src="/images/arrow-right-icon.svg"
+                                    class="duration-500 transform -translate-x-6 min-w-4 group-hover:translate-x-0" />
                             </div>
                         </a>
                     </div>
                 </div>
             </div>
-            <div
-              class="animation-element move-background duration-[1.5s] absolute z-0 bottom-10 md:bottom-auto md:top-1/3 -right-14 md:-right-36 w-28 md:w-72 h-28 md:h-72 bg-[#99E1F4] rounded-full lg:hidden xl:block"
-              style="transform: translate(-16px, -24px)"
-            ></div>
-            <div
-              class="animation-element move-background duration-[1.5s] absolute z-0 bottom-12 right-20 w-28 h-28 hidden xl:block bg-[#99E1F4] rounded-full"
-              style="transform: translate(-16px, -24px)"
-            ></div>
+            <div class="animation-element move-background duration-[1.5s] absolute z-0 bottom-10 md:bottom-auto md:top-1/3 -right-14 md:-right-36 w-28 md:w-72 h-28 md:h-72 bg-[#99E1F4] rounded-full lg:hidden xl:block"
+                style="transform: translate(-16px, -24px)"></div>
+            <div class="animation-element move-background duration-[1.5s] absolute z-0 bottom-12 right-20 w-28 h-28 hidden xl:block bg-[#99E1F4] rounded-full"
+                style="transform: translate(-16px, -24px)"></div>
         </section>
 
         <section class="relative overflow-hidden">
-            <div class="absolute w-full h-full bg-blue-gradient md:hidden" style="clip-path: ellipse(170% 90% at 38% 90%);"></div>
-            <div class="absolute w-full h-full bg-blue-gradient hidden md:block" style="clip-path: ellipse(88% 90% at 50% 90%);"></div>
-            <div class="relative z-10 codeweek-container-lg flex flex-col md:flex-row items-center pt-28 md:pt-48 pb-16 gap-12">
+            <div class="absolute w-full h-full bg-blue-gradient md:hidden"
+                style="clip-path: ellipse(170% 90% at 38% 90%);"></div>
+            <div class="absolute hidden w-full h-full bg-blue-gradient md:block"
+                style="clip-path: ellipse(88% 90% at 50% 90%);"></div>
+            <div
+                class="relative z-10 flex flex-col items-center gap-12 pb-16 codeweek-container-lg md:flex-row pt-28 md:pt-48">
                 <div class="flex-1">
                     <h2 class="text-white text-2xl md:text-4xl leading-[44px] font-medium font-['Montserrat'] mb-6">
-                      @lang('home.resouce_title')
+                        @lang('home.resouce_title')
                     </h2>
-                    <p class="text-white text-lg md:text-xl leading-7 p-0 mb-10">
-                      @lang('home.resouce_description')
+                    <p class="p-0 mb-10 text-lg leading-7 text-white md:text-xl">
+                        @lang('home.resouce_description')
                     </p>
-                    <div class="flex flex-col xl:flex-row gap-4">
-                        <a
-                          class="flex justify-center items-center gap-2 text-white border-solid border-2 border-white rounded-full py-3 px-8 font-semibold text-lg transition-all duration-300 hover:bg-[#061b45] hover:text-white group"
-                          href="/resources/CodingAtHome"
-                        >
+                    <div class="flex flex-col gap-4 xl:flex-row">
+                        <a class="flex justify-center items-center gap-2 text-white border-solid border-2 border-white rounded-full py-3 px-8 font-semibold text-lg transition-all duration-300 hover:bg-[#061b45] hover:text-white group"
+                            href="/resources/CodingAtHome">
                             <span>@lang('home.resouce_button1')</span>
-                            <div class="flex gap-2 w-4 overflow-hidden">
-                                <img src="/images/arrow-right-icon.svg" class="min-w-4 duration-500 transform -translate-x-6 group-hover:translate-x-0" />
-                                <img src="/images/arrow-right-icon.svg" class="min-w-4 duration-500 transform -translate-x-6 group-hover:translate-x-0" />
+                            <div class="flex w-4 gap-2 overflow-hidden">
+                                <img src="/images/arrow-right-icon.svg"
+                                    class="duration-500 transform -translate-x-6 min-w-4 group-hover:translate-x-0" />
+                                <img src="/images/arrow-right-icon.svg"
+                                    class="duration-500 transform -translate-x-6 min-w-4 group-hover:translate-x-0" />
                             </div>
                         </a>
-                        <a
-                          class="flex justify-center items-center gap-2 text-white border-solid border-2 border-white rounded-full py-3 px-8 font-semibold text-lg transition-all duration-300 hover:bg-[#061b45] hover:text-white group"
-                          href="/training"
-                        >
+                        <a class="flex justify-center items-center gap-2 text-white border-solid border-2 border-white rounded-full py-3 px-8 font-semibold text-lg transition-all duration-300 hover:bg-[#061b45] hover:text-white group"
+                            href="/training">
                             <span>@lang('home.resouce_button2')</span>
-                            <div class="flex gap-2 w-4 overflow-hidden">
-                                <img src="/images/arrow-right-icon.svg" class="min-w-4 duration-500 transform -translate-x-6 group-hover:translate-x-0" />
-                                <img src="/images/arrow-right-icon.svg" class="min-w-4 duration-500 transform -translate-x-6 group-hover:translate-x-0" />
+                            <div class="flex w-4 gap-2 overflow-hidden">
+                                <img src="/images/arrow-right-icon.svg"
+                                    class="duration-500 transform -translate-x-6 min-w-4 group-hover:translate-x-0" />
+                                <img src="/images/arrow-right-icon.svg"
+                                    class="duration-500 transform -translate-x-6 min-w-4 group-hover:translate-x-0" />
                             </div>
                         </a>
                     </div>
                 </div>
-                <div class="observer-element flex-1 flex justify-center relative">
-                    <img
-                        class="animation-element fade-scale-bottom duration-700 w-full z-10"
-                        loading="lazy"
-                        src="/images/homepage/resource-training.png"
-                    />
-                    <img
-                        class="animation-element fade-scale-bottom duration-700 absolute z-0 -bottom-10 sm:-bottom-16 -right-16 sm:-right-60 w-[184px] sm:w-[324px]"
-                        src="/images/homepage/resource-training-icon.png"
-                    />
+                <div class="relative flex justify-center flex-1 observer-element">
+                    <img class="z-10 w-full duration-700 animation-element fade-scale-bottom" loading="lazy"
+                        src="/images/homepage/resource-training.png" />
+                    <img class="animation-element fade-scale-bottom duration-700 absolute z-0 -bottom-10 sm:-bottom-16 -right-16 sm:-right-60 w-[184px] sm:w-[324px]"
+                        src="/images/homepage/resource-training-icon.png" />
                 </div>
             </div>
         </section>
@@ -273,72 +337,81 @@ class="animation-element fade-scale-bottom duration-700 absolute z-0 -bottom-10
 @endpush
 
 @push('scripts')
-<script type="text/javascript">
-    const waitForDOM = (callback, interval = 100, maxRetries = 50) => {
-      let retries = 0;
-      const checkDOM = () => {
-        const target = document.getElementById('codeweek-homepage');
-        if (target) {
-          callback(target);
-        } else if (retries < maxRetries) {
-          retries++;
-          setTimeout(checkDOM, interval);
-        } else {
-          console.error('DOM not ready after retries');
-        }
-      };
-      checkDOM();
-    };
+    <script type="text/javascript">
+        const waitForDOM = (callback, interval = 100, maxRetries = 50) => {
+            let retries = 0;
+            const checkDOM = () => {
+                const target = document.getElementById('codeweek-homepage');
+                if (target) {
+                    callback(target);
+                } else if (retries < maxRetries) {
+                    retries++;
+                    setTimeout(checkDOM, interval);
+                } else {
+                    console.error('DOM not ready after retries');
+                }
+            };
+            checkDOM();
+        };
 
-    waitForDOM((target) => {
-      triggerAnimations(target);
+        waitForDOM((target) => {
+            triggerAnimations(target);
 
-      const activities = @json($activities);
-      const sliderWraper = document.getElementById('slider-wrapper');
+            const activities = @json($activities);
+            const sliderWraper = document.getElementById('slider-wrapper');
 
-      if (activities?.length && sliderWraper) {
-        sliderWraper.style.height = '760px';
-      }
+            if (activities?.length && sliderWraper) {
+                sliderWraper.style.height = '760px';
+            }
 
-      const handleSlider = ({ prevBtnId, nextBtnId }) => {
-        const scrollBarWidth = Math.max(window.innerWidth - document.body.clientWidth, 0);
+            const handleSlider = ({
+                prevBtnId,
+                nextBtnId
+            }) => {
+                const scrollBarWidth = Math.max(window.innerWidth - document.body.clientWidth, 0);
 
-        // Slider
-        let currentIndex = 0;
-        const prevButton = document.getElementById(prevBtnId);
-        const nextButton = document.getElementById(nextBtnId);
+                // Slider
+                let currentIndex = 0;
+                const prevButton = document.getElementById(prevBtnId);
+                const nextButton = document.getElementById(nextBtnId);
 
-        if (!prevButton || !nextButton) return;
-        
-        if (activities.length > 1) {
-          nextButton.style.display = '';
-        }
+                if (!prevButton || !nextButton) return;
 
-        const handleMove = (idx) => {
-          const slider = document.getElementById('slider-wrapper');
-          const activityElements = slider.querySelectorAll('.home-activity');
-          activityElements?.forEach((element, index) => {
-              element.style.opacity = index === idx ? 1 : 0;
-          })
-          if (idx === 0) prevButton.style.display = 'none';
-          else prevButton.style.display = '';
+                if (activities.length > 1) {
+                    nextButton.style.display = '';
+                }
 
-          if (idx === activities.length - 1) nextButton.style.display = 'none';
-          else nextButton.style.display = '';
-        }
+                const handleMove = (idx) => {
+                    const slider = document.getElementById('slider-wrapper');
+                    const activityElements = slider.querySelectorAll('.home-activity');
+                    activityElements?.forEach((element, index) => {
+                        element.style.opacity = index === idx ? 1 : 0;
+                    })
+                    if (idx === 0) prevButton.style.display = 'none';
+                    else prevButton.style.display = '';
 
-        prevButton.addEventListener('click', () => {
-          currentIndex = Math.max(currentIndex - 1 , 0);
-          handleMove(currentIndex);
-        });
-        nextButton.addEventListener('click', () => {
-          currentIndex = Math.min(currentIndex + 1 , activities.length - 1);
-          handleMove(currentIndex);
-        });
-      }
+                    if (idx === activities.length - 1) nextButton.style.display = 'none';
+                    else nextButton.style.display = '';
+                }
+
+                prevButton.addEventListener('click', () => {
+                    currentIndex = Math.max(currentIndex - 1, 0);
+                    handleMove(currentIndex);
+                });
+                nextButton.addEventListener('click', () => {
+                    currentIndex = Math.min(currentIndex + 1, activities.length - 1);
+                    handleMove(currentIndex);
+                });
+            }
 
-      handleSlider({ prevBtnId: 'slider-prev-small-btn', nextBtnId: 'slider-next-small-btn' });
-      handleSlider({ prevBtnId: 'slider-prev-btn', nextBtnId: 'slider-next-btn' });
-    });
-</script>
+            handleSlider({
+                prevBtnId: 'slider-prev-small-btn',
+                nextBtnId: 'slider-next-small-btn'
+            });
+            handleSlider({
+                prevBtnId: 'slider-prev-btn',
+                nextBtnId: 'slider-next-btn'
+            });
+        });
+    </script>
 @endpush