Skip to content

Slider updates #3117

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Nov 25, 2025
+51 −23
Merged

Slider updates #3117

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e150ed7
slider update
bernardhanna Nov 25, 2025
d9c8c5c
Merge pull request #3116 from codeeu/bulk_20_nov
bernardhanna Nov 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions app/Http/Controllers/HomeController.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,24 @@ public function index(Request $request): View
'style_color' => 'background-image: linear-gradient(36.92deg, #1C4DA1 20.32%, #0040AE 28.24%);',
'btn_lang' => 'home.get_involved',
], */
[
'title' => 'home.banner5_title',
'description' => 'home.banner5_description',
'url' => '/future-ready-csr',
'style_color' => 'background: linear-gradient(36.92deg, rgb(51, 194, 233) 20.32%, rgb(0, 179, 227) 28.24%);',
'btn_lang' => 'home.learn_more',
'url2' => null,
'btn2_lang' => null
],
[
'title' => 'home.banner4_title',
'description' => 'home.banner4_description',
'url' => 'https://codeweek.eu/blog/digital-educator-awards-2025/',
'style_color' => 'background-image: linear-gradient(36.92deg, #1C4DA1 20.32%, #0040AE 28.24%);',
'btn_lang' => 'home.learn_more',
'url2' => 'https://codeweek.eu/blog/digital-educator-awards-2025/ ',
// 'btn2_lang' => 'home.download_brochure_btn',
],
[
'title' => 'home.banner3_title',
'description' => __('home.when_text'),
Expand Down
8 changes: 8 additions & 0 deletions resources/lang/en/home.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,11 +41,19 @@

'get_involved' => 'Get involved',
'meet_our_community' => 'Meet our community',
'learn_more' => 'Learn more',

'banner1_title' => 'Careers in Digital',
'banner1_description' => 'Get inspired by dream jobs in digital and explore role models, career guides, open day toolkits and more!',
'banner2_title' => 'Our Code Week Family',
'banner2_description' => 'Discover our vibrant network of ambassadors, teachers, students and hubs—each contributing to our shared passion for digital education.',

'banner3_title' => 'Thank you for participating in Code Week 2025',
'download_brochure_btn' => 'Download 2025 Brochure',

'banner4_title' => 'Code Week Digital Educator',
'banner4_description' => 'Powered by Vodafone Foundation, the 2025 Code Week Digital Educator Awards celebrate inspiring teachers and educator teams across Europe in two tracks: high-quality digital teaching content and outstanding participation during the Code Week celebration window. The evaluation phase is currently ongoing, and the winners will be announced soon.',

'banner5_title' => 'Future Ready CSR',
'banner5_description' => 'FutureReadyCSR Movement seeks to inspire, encourage, and empower global players, SMEs, and startups, to organizations like clusters, digital innovation hubs, industry associations, professional bodies, or chambers of commerce, to turn Corporate Social Responsibility into real-world action, by supporting digital skills education.',
];
48 changes: 25 additions & 23 deletions resources/views/static/home.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,11 @@

@section('non-vue-content')
<section id="codeweek-homepage" class="codeweek-page font-['Blinker']">
<section class="relative flex overflow-hidden">
<div id="slider-wrapper" class="relative flex w-full transition-all bg-secondary-gradient">
<section class="flex overflow-hidden relative">
<div id="slider-wrapper" class="flex relative w-full transition-all bg-secondary-gradient">
@foreach ($activities as $index => $activity)
<div
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">
class="flex overflow-hidden absolute top-0 left-0 flex-col flex-shrink-0 justify-end pb-10 w-full h-full 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"
Expand All @@ -37,7 +37,7 @@ class="flex items-end duration-1000 home-activity codeweek-container-lg md:items
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"
class="flex gap-2.5 items-start mt-4 mb-4 max-md:gap-2 max-sm:gap-1.5" role="timer"
aria-label="Countdown timer">

<!-- Days -->
Expand Down Expand Up @@ -104,7 +104,7 @@ class="text-[#1C4DA1] text-[30px] md:text-[60px] leading-9 md:leading-[72px] fon
class="text-xl md:text-2xl leading-8 text-[#333E48] p-0 mb-4 max-md:max-w-full max-w-[525px]">
{{ strip_tags(__(''.$activity['description'])) }}
</p>
<div class="flex flex-col md:flex-row md:space-x-4 space-y-4 md:space-y-0">
<div class="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
<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'])
Expand All @@ -114,7 +114,7 @@ class="text-xl md:text-2xl leading-8 text-[#333E48] p-0 mb-4 max-md:max-w-full m
<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"
target="_blank" href="{{ $activity['url2'] }}">
<span>@lang($activity['btn2_lang'])</span>
<div class="flex w-4 gap-2 overflow-hidden">
<div class="flex overflow-hidden gap-2 w-4">
<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"
Expand All @@ -132,6 +132,8 @@ class="absolute top-0 -translate-y-1/2 bg-yellow py-3 md:py-4 px-8 md:px-10 roun

@php
$backgroundImages = [
asset('/images/csr/csr_about1.jpg'),
asset('/images/dream-jobs/dream_jobs_bg.png'),
asset('images/homepage/slide1.png'),
asset('images/search/search_bg_lg_2.jpeg'),
];
Expand Down Expand Up @@ -167,12 +169,12 @@ class="absolute top-28 md:top-1/2 -translate-y-1/2 -right-2 hover:right-0 bg-whi

<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 hidden w-full h-full bg-white md:block" style="clip-path: ellipse(70% 60% at 50% 40%);">
<div class="hidden absolute 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">
class="flex relative z-10 flex-col-reverse gap-12 items-center py-16 pb-32 codeweek-container-lg md:flex-row md:pb-48">
<div class="flex-1">
<div class="relative inline-block observer-element">
<div class="inline-block relative 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)" />
Expand All @@ -189,7 +191,7 @@ class="relative z-10 flex flex-col-reverse items-center gap-12 py-16 pb-32 codew
<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 w-4 gap-2 overflow-hidden">
<div class="flex overflow-hidden gap-2 w-4">
<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"
Expand All @@ -199,7 +201,7 @@ class="duration-500 transform -translate-x-6 min-w-4 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">
<div class="flex overflow-hidden gap-2 w-4">
<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"
Expand All @@ -225,7 +227,7 @@ class="relative z-10 codeweek-container-lg flex flex-col md:flex-row items-cente
<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="{{route('dream-jobs-in-digital')}}">
<span>@lang('home.get_involved')</span>
<div class="flex w-4 gap-2 overflow-hidden">
<div class="flex overflow-hidden gap-2 w-4">
<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"
Expand All @@ -240,10 +242,10 @@ class="duration-500 transform -translate-x-6 min-w-4 group-hover:translate-x-0"
</div>
</section>

<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">
<section class="overflow-hidden relative animation-section">
<div class="flex relative z-10 flex-col-reverse gap-12 items-center py-16 codeweek-container-lg md:flex-row">
<div class="flex-1">
<div class="relative inline-block observer-element">
<div class="inline-block relative 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)" />
Expand All @@ -260,7 +262,7 @@ class="duration-500 transform -translate-x-6 min-w-4 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="/add?skip=1">
<span>@lang('home.activity_button1')</span>
<div class="flex w-4 gap-2 overflow-hidden">
<div class="flex overflow-hidden gap-2 w-4">
<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"
Expand All @@ -270,7 +272,7 @@ class="duration-500 transform -translate-x-6 min-w-4 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="/events">
<span>@lang('home.activity_button2')</span>
<div class="flex w-4 gap-2 overflow-hidden">
<div class="flex overflow-hidden gap-2 w-4">
<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"
Expand All @@ -286,13 +288,13 @@ class="duration-500 transform -translate-x-6 min-w-4 group-hover:translate-x-0"
style="transform: translate(-16px, -24px)"></div>
</section>

<section class="relative overflow-hidden">
<section class="overflow-hidden relative">
<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"
<div class="hidden absolute 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">
class="flex relative z-10 flex-col gap-12 items-center pt-28 pb-16 codeweek-container-lg md:flex-row 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')
Expand All @@ -304,7 +306,7 @@ class="relative z-10 flex flex-col items-center gap-12 pb-16 codeweek-container-
<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 w-4 gap-2 overflow-hidden">
<div class="flex overflow-hidden gap-2 w-4">
<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"
Expand All @@ -314,7 +316,7 @@ class="duration-500 transform -translate-x-6 min-w-4 group-hover:translate-x-0"
<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 w-4 gap-2 overflow-hidden">
<div class="flex overflow-hidden gap-2 w-4">
<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"
Expand All @@ -323,7 +325,7 @@ class="duration-500 transform -translate-x-6 min-w-4 group-hover:translate-x-0"
</a>
</div>
</div>
<div class="relative flex justify-center flex-1 observer-element">
<div class="flex relative flex-1 justify-center 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]"
Expand Down
Loading