File: //var/www/quadcode.com/src/components/hero/Webinar.svelte
<script lang="ts">
import moment from "moment/moment";
import type { IWebinar } from "$type/webinars";
import { t } from '$lib/translations';
export let data: IWebinar;
export let featured = {...data};
</script>
<div class="webinars-hero" style="background-image: url({featured.image?.large})">
<div class="webinars-hero__date">
<div class="webinars-hero__date-icon">
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M28.5 5H7.5C5.84315 5 4.5 6.34315 4.5 8V29C4.5 30.6569 5.84315 32 7.5 32H28.5C30.1569 32 31.5 30.6569 31.5 29V8C31.5 6.34315 30.1569 5 28.5 5Z" stroke="#E62334" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M24 2V8" stroke="#E62334" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 2V8" stroke="#E62334" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.5 14H31.5" stroke="#E62334" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="webinars-hero__date-text">
{moment(featured.date).format('MMMM D, HH:mm') + ' GMT+3'}
</div>
</div>
<div class="webinars-hero__upcoming">{$t('Upcoming webinar')}</div>
<div class="webinars-hero__title">{featured.title}</div>
<div class="webinars-hero-presenters">
{#each featured.presenters as presenter}
<div class="webinars-hero-presenter">
<div class="webinars-hero-presenter__avatar">
<img src="{presenter.avatar}" alt="{presenter.name}" />
</div>
<div class="webinars-hero-presenter__info">
<div class="webinars-hero-presenter__name">{presenter.name}</div>
<div class="webinars-hero-presenter__position">{presenter.position}</div>
</div>
<div class="webinars-hero-presenter__social">
<a href="{presenter.linkedin}" target="_blank">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M30.8279 1.17209C31.578 1.92214 31.9995 2.93928 32 4V28C31.9995 29.0607 31.578 30.0779 30.8279 30.8279C30.0779 31.578 29.0607 31.9995 28 32H4C2.93928 31.9995 1.92214 31.578 1.17209 30.8279C0.42205 30.0779 0.000471118 29.0607 0 28V4C0.000471118 2.93928 0.42205 1.92214 1.17209 1.17209C1.92214 0.42205 2.93928 0.000471118 4 0H28C29.0607 0.000471118 30.0779 0.42205 30.8279 1.17209ZM7.22847 12.336H11.0873V23.943H7.22847V12.336ZM9.18384 6.73919C7.86356 6.73928 7.00103 7.60721 7.00103 8.74431C7.00103 9.858 7.83742 10.7494 9.13286 10.7494H9.15781C10.5034 10.7494 11.3408 9.85757 11.3408 8.74431C11.3159 7.60672 10.5034 6.73919 9.18384 6.73919ZM17.0802 13.9793C17.5936 13.1886 18.5094 12.0629 20.5572 12.0629C23.0955 12.0629 24.9991 13.7214 25 17.2873V23.9426H21.1421V17.7319C21.1421 16.173 20.583 15.1082 19.1877 15.1082C18.1218 15.1082 17.4866 15.8259 17.2082 16.519C17.1052 16.7669 17.0802 17.1137 17.0802 17.4608V23.9437H13.2225C13.2225 23.9437 13.2735 13.4247 13.2225 12.3368H17.0802V13.9793Z" fill="white"/>
</svg>
</a>
</div>
</div>
{/each}
</div>
<img src="{featured.image?.large}" class="bg" />
<div class="webinars-hero__agenda">
<div class="webinars-hero__agenda">
<h2>{$t('webinars.Agenda')}</h2>
{@html featured.agenda}
</div>
</div>
<a href="{featured.registrationLink}" target="_blank" class="webinars-hero__register" >{$t('webinars.Register')}</a>
</div>
<style lang="scss">
@import '/src/scss/media';
@import '/src/scss/mixins';
@import '/src/scss/variables';
.webinars {
&-hero {
color: white;
width: 100%;
background: black;
border-radius: 30px;
padding: 84px;
background-position: bottom right;
background-repeat: no-repeat;
position: relative;
margin: 98px 0 72px;
overflow: hidden;
display: flex;
flex-direction: column;
@include breakpoint-down('deskM') {
margin: 39px 0 79px;
padding: 80px;
}
@include breakpoint-down('deskS') {
padding: 39px;
margin: 39px 0 100px;
}
@include breakpoint-down('tabL') {
background-position: 200px 160px;
}
@include breakpoint-down('tabM') {
padding: 52px 27px 24px;
}
@include breakpoint-down('mobM') {
margin: 41px 0 70px;
background: black !important;
}
img.bg {
display: none;
@include breakpoint-down('mobM') {
display: block;
position: absolute;
transform: translate(0, -100%);
left: 0;
object-fit: contain;
}
}
&__upcoming {
font-family: 'Proxima Nova';
font-style: normal;
font-weight: 700;
font-size: 20px;
line-height: 140%;
position: relative;
padding-left: 18px;
@include breakpoint-down('deskM') {
margin-top: -2px;
font-size: 18px;
}
@include breakpoint-down('deskS') {
font-size: 12px;
padding-left: 16px;
margin-top: 0;
order: -1;
}
@include breakpoint-down('mobM') {
margin-top: 2px;
}
&:before {
width: 8px;
height: 8px;
background: #E62334;
border-radius: 50%;
content: ' ';
position: absolute;
top: 10px;
left: 0;
@include breakpoint-down('deskM') {
top: 8px;
}
@include breakpoint-down('deskS') {
width: 6px;
height: 6px;
top: 4px;
}
}
}
&__date {
margin-top: -4px;
right: 84px;
position: absolute;
display: flex;
@include breakpoint-down('deskM') {
margin-top: -2px;
right: 80px;
}
@include breakpoint-down('deskS') {
margin-top: 1px;
}
@include breakpoint-down('tabM') {
margin-top: 10px;
position: relative;
right: 0;
}
&-icon {
margin-right: 18px;
@include breakpoint-down('deskS') {
margin-right: 12px;
}
@include breakpoint-down('mobM') {
margin-right: 6px;
transform: translate(0, -2px);
}
svg {
width: 36px;
height: 36px;
@include breakpoint-down('deskM') {
width: 24px;
height: 24px;
}
@include breakpoint-down('deskS') {
width: 17px;
height: 17px;
}
@include breakpoint-down('mobM') {
width: 16px;
height: 16px;
}
}
}
&-text {
font-family: 'Proxima Nova';
font-style: normal;
font-weight: 700;
font-size: 32px;
line-height: 120%;
@include breakpoint-down('deskM') {
font-size: 24px;
}
@include breakpoint-down('deskS') {
font-size: 16px;
}
@include breakpoint-down('mobM') {
font-size: 12px;
}
}
}
&__title {
font-family: 'Proxima Nova';
font-style: normal;
font-weight: 700;
font-size: 55px;
line-height: 100%;
background: linear-gradient(180deg, #FFFFFF 8.93%, #AFAFAF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
max-width: 670px;
margin: 32px 0 42px;
@include breakpoint-down('deskM') {
font-size: 49px;
margin: 23px 0 24px;
}
@include breakpoint-down('deskS') {
font-size: 36px;
margin: 21px 0 26px;
}
@include breakpoint-down('mobM') {
font-size: 31px;
margin: 15px 0 20px;
}
}
&-presenters {
display: flex;
gap: 42px;
margin-bottom: 42px;
@include breakpoint-down('deskM') {
margin-bottom: 22px;
}
@include breakpoint-down('deskS') {
margin-bottom: 24px;
}
@include breakpoint-down('tabM') {
flex-direction: column;
gap: 10px;
}
@include breakpoint-down('mobM') {
margin-bottom: 316px;
}
}
&-presenter {
display: flex;
gap: 25px;
@include breakpoint-down('deskS') {
gap: 18px;
}
@include breakpoint-down('mobM') {
width: 267px;
}
&__avatar {
img {
width: 60px;
height: 60px;
border-radius: 50%;
@include breakpoint-down('deskS') {
width: 42px;
height: 42px;
}
}
}
&__info {
padding: 4px 0;
@include breakpoint-down('mobM') {
flex-grow: 1;
}
}
&__name {
font-family: 'Proxima Nova';
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 29px;
letter-spacing: -0.01em;
margin-bottom: 3px;
color: #FFFFFF;
@include breakpoint-down('deskS') {
font-size: 16px;
line-height: 18px;
}
}
&__position {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 15px;
line-height: 120%;
/* identical to box height, or 18px */
letter-spacing: -0.02em;
color: #FFFFFF;
@include breakpoint-down('deskS') {
font-size: 12px;
line-height: 14.4px;
}
}
&__social {
display: flex;
align-content: center;
justify-content: space-around;
align-items: center;
a {
width: 32px;
height: 32px;
margin: 0 12px 0 0;
}
}
}
&__agenda {
max-width: 600px;
margin-bottom: 34px;
@include breakpoint-down('deskM') {
margin-bottom: 27px;
}
@include breakpoint-down('deskS') {
margin-bottom: 24px;
}
@include breakpoint-down('mobM') {
//margin-bottom: 24px;
}
h2 {
font-family: 'Proxima Nova';
font-style: normal;
font-weight: 700;
font-size: 40px;
line-height: 105%;
color: #FFFFFF;
margin-bottom: 21px;
@include breakpoint-down('deskM') {
margin-bottom: 18px;
}
@include breakpoint-down('deskS') {
margin-bottom: 21px;
}
@include breakpoint-down('mobM') {
font-size: 31px;
margin-bottom: 19px;
}
}
:global(ul) {
:global(li) {
margin-left: 25px;
display: block;
margin-bottom: 8px;
font-family: 'Proxima Nova';
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 125%;
color: #FFFFFF;
@include breakpoint-down('deskL') {
width: 60%;
}
@include breakpoint-down('deskM') {
margin-bottom: 1px;
}
@include breakpoint-down('deskS') {
font-size: 12px;
line-height: 15px;
margin-bottom: 8px;
width: 40%;
}
@include breakpoint-down('mobM') {
width: 100%;
}
&:before {
content: ' ';
box-sizing: border-box;
position: absolute;
width: 6px;
height: 6px;
background: #E72C39;
box-shadow: 0 2px 6px #E72C39, inset 0 1px 0 rgba(255, 255, 255, 0.25);
border-radius: 100px;
transform: matrix(1, 0, 0, -1, 0, 0) translate(-25px, -10px);
@include breakpoint-down('deskM') {
transform: matrix(1, 0, 0, -1, 0, 0) translate(-25px, -8px);
}
@include breakpoint-down('deskS') {
transform: matrix(1, 0, 0, -1, 0, 0) translate(-25px, -5px);
}
}
}
}
}
&__register {
display: flex;
justify-content: center;
align-items: center;
width: 280px;
height: 48px;
background: #E62334;
border-radius: 40px;
font-family: 'Proxima Nova';
font-style: normal;
font-weight: 700;
font-size: 20px;
line-height: 140%;
color: #FFFFFF;
@include breakpoint-down('deskS') {
width: 182px;
height: 42px;
font-size: 16px;
}
@include breakpoint-down('mobM') {
width: 100%;
}
}
}
}
</style>