Skip to content

Commit

Permalink
feat: add home page presentation section
Browse files Browse the repository at this point in the history 
Signed-off-by: Raman Yasel <[email protected]>
  • Loading branch information
@yasell @mtardy
yasell authored and mtardy committed Aug 9, 2024
1 parent 2fc399f commit c638b45
Show file tree
Hide file tree
Showing 5 changed files with 267 additions and 5 deletions.
1 change: 1 addition & 0 deletions docs/assets/scss/home.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
@import "home/videos";
@import "home/share";
@import "home/contact";
@import "home/presentation";

.home {
// dirty hack that should be changed if we change the size of the navbar
Expand Down
7 changes: 6 additions & 1 deletion docs/assets/scss/home/contact.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -265,13 +265,18 @@
display: block;
content: "";
top: 7px;
left: 4px;
left: 5px;
position: absolute;
width: 12px;
height: 10px;
opacity: 0;
background: no-repeat center center url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' fill='none' viewBox='0 0 12 10'%3E%3Cpath stroke='%23415559' stroke-width='2.4' d='M1 4.818 4.125 8 11 1'/%3E%3C/svg%3E");
background-size: contain;

@media (max-width: $desktop) {
top: 4px;
left: 3px;
}
}
}

Expand Down
213 changes: 213 additions & 0 deletions docs/assets/scss/home/presentation.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,213 @@
.presentation {
max-width: 1040px;
margin: 174px auto 0 auto;

@media (max-width: $mobile) {
margin-top: 168px;
}

&__list {
display: flex;
align-items: flex-start;
gap: 64px;
margin-bottom: 0;

@media (max-width: $tablet) {
gap: 32px;
}

@media (max-width: $mobile) {
flex-direction: column;
}
}

&__item {
width: 488px;

.title {
margin-top: 5px;
}

@media (max-width: $mobile) {
width: 100%;
}
}

&__banner {
position: relative;
padding: 12px;
background-color: #fff;
border-radius: 12px;
box-shadow: 0px 9px 22px rgba(0, 102, 102, 0.04);

&:before {
z-index: -1;
content: "";
position: absolute;
top: -62px;
left: -1%;
width: 102%;
height: 62px;
background-image: url("data:image/svg+xml,%3Csvg width='500' height='95' viewBox='0 0 500 95' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_dd_3038_2348)'%3E%3Cpath d='M70 25C70 20.0294 74.0294 16 79 16H421C425.971 16 430 20.0294 430 25H70Z' fill='white'/%3E%3C/g%3E%3Cg filter='url(%23filter1_dd_3038_2348)'%3E%3Cpath d='M54 35C54 29.4772 58.4772 25 64 25H436C441.523 25 446 29.4772 446 35H54Z' fill='white'/%3E%3C/g%3E%3Cg filter='url(%23filter2_dd_3038_2348)'%3E%3Cpath d='M38 47C38 40.3726 43.3726 35 50 35H450C456.627 35 462 40.3726 462 47V48H38V47Z' fill='white'/%3E%3C/g%3E%3Cg filter='url(%23filter3_dd_3038_2348)'%3E%3Cpath d='M22 60C22 53.3726 27.3726 48 34 48H466C472.627 48 478 53.3726 478 60V64H22V60Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_dd_3038_2348' x='48' y='0' width='404' height='56' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='9'/%3E%3CfeGaussianBlur stdDeviation='11'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0.4 0 0 0 0 0.4 0 0 0 0.04 0'/%3E%3CfeBlend mode='multiply' in2='BackgroundImageFix' result='effect1_dropShadow_3038_2348'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='-3'/%3E%3CfeGaussianBlur stdDeviation='6.5'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0.62 0 0 0 0 0.5084 0 0 0 0.1 0'/%3E%3CfeBlend mode='multiply' in2='effect1_dropShadow_3038_2348' result='effect2_dropShadow_3038_2348'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect2_dropShadow_3038_2348' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter1_dd_3038_2348' x='32' y='9' width='436' height='57' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='9'/%3E%3CfeGaussianBlur stdDeviation='11'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0.4 0 0 0 0 0.4 0 0 0 0.04 0'/%3E%3CfeBlend mode='multiply' in2='BackgroundImageFix' result='effect1_dropShadow_3038_2348'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='-3'/%3E%3CfeGaussianBlur stdDeviation='6.5'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0.62 0 0 0 0 0.5084 0 0 0 0.1 0'/%3E%3CfeBlend mode='multiply' in2='effect1_dropShadow_3038_2348' result='effect2_dropShadow_3038_2348'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect2_dropShadow_3038_2348' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter2_dd_3038_2348' x='16' y='19' width='468' height='60' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='9'/%3E%3CfeGaussianBlur stdDeviation='11'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0.4 0 0 0 0 0.4 0 0 0 0.04 0'/%3E%3CfeBlend mode='multiply' in2='BackgroundImageFix' result='effect1_dropShadow_3038_2348'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='-3'/%3E%3CfeGaussianBlur stdDeviation='6.5'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0.62 0 0 0 0 0.5084 0 0 0 0.1 0'/%3E%3CfeBlend mode='multiply' in2='effect1_dropShadow_3038_2348' result='effect2_dropShadow_3038_2348'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect2_dropShadow_3038_2348' result='shape'/%3E%3C/filter%3E%3Cfilter id='filter3_dd_3038_2348' x='0' y='32' width='500' height='63' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='9'/%3E%3CfeGaussianBlur stdDeviation='11'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0.4 0 0 0 0 0.4 0 0 0 0.04 0'/%3E%3CfeBlend mode='multiply' in2='BackgroundImageFix' result='effect1_dropShadow_3038_2348'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='-3'/%3E%3CfeGaussianBlur stdDeviation='6.5'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0.62 0 0 0 0 0.5084 0 0 0 0.1 0'/%3E%3CfeBlend mode='multiply' in2='effect1_dropShadow_3038_2348' result='effect2_dropShadow_3038_2348'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect2_dropShadow_3038_2348' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A");
background-size: cover;

@media (max-width: $tablet) {
top: -58px;
}

@media (max-width: $mobile) {
content: none;
}
}

&:after {
z-index: -1;
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 92%;
height: 88%;
background: linear-gradient(86.5deg, #84E1A3 2.87%, #74E2CF 100%);
filter: blur(14px);
border-radius: 8px;
transform: translate(-50%, -50%);
}

@media (max-width: $mobile) {
padding: 10px;
}

&-inner {
position: relative;
padding: 18px 135px 24px 20px;
border: 1px #deeded solid;
border-radius: 4px;

@media (max-width: $mobile) {
padding: 24px 18px;
}
}

&-list {
margin-top: 14px;
display: flex;
flex-direction: column;
gap: 12px;
}

&-item {
position: relative;
display: flex;
gap: 8px;
}

&-number {
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
font-weight: 600;
line-height: 14px;
width: 20px;
height: 20px;
background-color: rgba(207, 222, 252, 1);
border-radius: 100%;
margin-bottom: 2px;
}

&-decor {
position: relative;

&::before,
&::after {
content: "";
display: block;
background-color: rgba(233, 237, 237, 0.7);
height: 8px;
border-radius: 40px;
}

&::before {
width: 116px;
margin-bottom: 4px;
}

&::after {
width: 74px;
}

&--wide {
&::before {
width: 133px;
}

&::after {
width: 89px;
}
}
}

&-img {
z-index: 2;
position: absolute;
right: 7px;
bottom: 0;

@media (max-width: $mobile) {
top: -113px;
max-width: 147px;
height: auto;
left: 50%;
transform: translateX(-50%);
}
}

&-description {
margin-top: 24px;
margin-bottom: 0;
font-size: 14px;
line-height: 1.375;
color: #5e636e;

@media (max-width: $mobile) {
font-size: 16px;
margin-top: 8px;
line-height: 1.5;
}
}
}

&__title {
margin: 0;
font-weight: 600;
font-size: 22px;
line-height: 1.375;
color: rgba(37, 55, 55, 1);

@media (max-width: $mobile) {
font-size: 16px;
line-height: 22px;
}

&::after {
content: "";
display: block;
width: 263px;
border: 1px rgba(222, 237, 237, 1) solid;

@media (max-width: $mobile) {
max-width: 200px;
}
}
}

&__description {
max-width: 460px;
margin-top: 15px;
margin-bottom: 10px;
font-size: 16px;
line-height: 1.375;
color: #5e636e;
}
}
51 changes: 47 additions & 4 deletions docs/content/en/_index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -241,6 +241,53 @@ <h3 class="cards__title">Code of Conduct</h3>
</ul>
</div>

<div class="presentation">
<ul class="presentation__list">
<li class="presentation__item presentation__banner">
<div class="presentation__banner-inner">
<h2 class="presentation__title">What is a Tracing Policy?</h2>
<p class="presentation__banner-description">Tracing Policies define what situations Tetragon
should react to...</p>
<ul class="presentation__banner-list">
<li class="presentation__banner-item">
<span class="presentation__banner-number">1</span>
<span class="presentation__banner-decor"></span>
</li>
<li class="presentation__banner-item">
<span class="presentation__banner-number">2</span>
<span class="presentation__banner-decor presentation__banner-decor--wide"></span>
</li>
<li class="presentation__banner-item">
<span class="presentation__banner-number">3</span>
<span class="presentation__banner-decor"></span>
</li>
</ul>
<img class="presentation__banner-img" src="/images/home/jedi-bee-teacher.png" width="242" height="186"
alt="Jedi-Bee techer" />
</div>
</li>

<li class="presentation__item">
<h2 class="title">Showcase Tetragon: Slides for Speakers</h2>
<p class="presentation__description">We've created a slide deck for talks, presentations, and demos on
Tetragon. Feel free to use it as-is or customize it to fit your specific needs.</p>
<a class="button button--text"
href="https://docs.google.com/presentation/d/1jNJ0pPkHjvv4QN_K01FGbNLaWD5gqgbwxCNAehn4PBQ/edit#slide=id.p"
target="_blank">
See presentation
<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg"
aria-hidden="true">
<path
d="M1 5.12939C0.585787 5.12939 0.25 5.46518 0.25 5.87939C0.25 6.29361 0.585787 6.62939 1 6.62939V5.12939ZM12 5.12939L1 5.12939V6.62939L12 6.62939V5.12939Z"
fill="currentColor" />
<path d="M7.11108 1L12 5.7735L7.11108 10.7444" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</li>
</ul>
</div>

<div class="tabs">
<h2 class="title tabs__title">How to Install Tetragon?</h2>
<ul class="tabs__list">
Expand Down Expand Up @@ -749,10 +796,6 @@ <h2 class="title contact__title">Telling the Tetragon Story</h2>
errorBox.textContent = message || field.validationMessage;
})

field.addEventListener("blur", () => {
field.checkValidity();
})

field.addEventListener("input", () => {
const valid = field.checkValidity();
if (valid) {
Expand Down
Binary file added docs/static/images/home/jedi-bee-teacher.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit c638b45

Please sign in to comment.