sandkasten
/
sandkasten-web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change the style of the landing page

Browse Source
pull/9/head
Colin FRIZOT 1 year ago committed by matis.mazingue
parent 74a68d9743
commit 13cddc6fff
8 changed files with 594 additions and 40 deletions
Show Stats Download Patch File Download Diff File

306
src/app/components/landing-page/landing-page.component.html
Unescape View File

@ -1,13 +1,295 @@
<div class="landing-page" [ngClass]="themeClass">
<div class="landing-page--container">
<h2 class="landing-page--title">{{ 'LandingPage.Welcome' | translate }}</h2>
<span class="landing-page--subtitle">{{
'LandingPage.Description' | translate
}}</span>
<div class="landing-page__button">
<a class="landing-page__button--link" routerLink="/editor">{{
'LandingPage.Try' | translate
}}</a>
</div>
</div>
</div>
<div class="wrapper">
<!-- region Hero-->
<div class="landing-page__hero">
<div class="landing-page__hero_left">
<h1 class="landing-page__hero_left--title">{{ 'LandingPage.Welcome' | translate }}</h1>
<span class="landing-page__hero_left--description">{{ 'LandingPage.Description' | translate }}</span>
<div class="landing-page__hero_left__buttons">
<div class="landing-page__hero_left__buttons--editor">
<img class="landing-page__hero_left__buttons--editor--image" src="assets/img/logo.png"
alt="editor icon">
<!--TODO - Add trad-->
<span>Editeur de code</span>
</div>
<div class="landing-page__hero_left__buttons--git">
<img class="landing-page__hero_left__buttons--git--image"
src="assets/img/landing-page/gitea.png" alt="editor icon">
<!--TODO - Add trad-->
<span>Dépôt Git</span>
</div>
</div>
</div>
<div class="landing-page__hero_right">
<img class="landing-page__hero_right--image" src="assets/img/landing-page/cross.png" alt="landing page">
</div>
</div>
<!-- endregion-->
<!--region Informations-->
<div class="landing-page__informations">
<div class="landing-page__informations_top">
<h2 class="landing-page__informations_top--title">Everything you need to start a website</h2>
<span class="landing-page__informations_top--description">Astro comes batteries included. It takes the
best parts of state-of-the-art tools and adds its own innovations.</span>
</div>
<div class="landing-page__informations--lists">
<!--SECURITE-->
<div class="landing-page__informations__list">
<div class="landing-page__informations__list--icon">
<svg width="800px" height="800px" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<title>data-source-solid</title>
<g id="Layer_2" data-name="Layer 2">
<g id="invisible_box" data-name="invisible box">
<rect width="48" height="48" fill="none" />
</g>
<g id="icons_Q2" data-name="icons Q2">
<path
d="M46,9c0-6.8-19.8-7-22-7S2,2.2,2,9v7c0,.3,1.1,1.8,5.2,3.4h.3a40.3,40.3,0,0,0,8.6,2A65.6,65.6,0,0,0,24,22a65.6,65.6,0,0,0,7.9-.5,40.3,40.3,0,0,0,8.6-2h.3C44.9,17.8,46,16.3,46,16V9.3h0ZM2,31.3V39c0,6.8,19.8,7,22,7s22-.2,22-7V31.3C41.4,34.1,33.3,36,24,36S6.6,34.1,2,31.3Zm43.7-9.8a22.5,22.5,0,0,1-4.9,2.1A54.8,54.8,0,0,1,24,26,54.8,54.8,0,0,1,7.2,23.6a22.5,22.5,0,0,1-4.9-2.1L2,21.3V26c0,.3,1.2,1.9,5.5,3.5A50.2,50.2,0,0,0,24,32a50.2,50.2,0,0,0,16.5-2.5C44.8,27.9,46,26.3,46,26V21.3Z" />
</g>
</g>
</svg>
</div>
<div class="landing-page__informations__list--title">Sécurisé</div>
<div class="landing-page__informations__list--description">Pour garantir la solidité de notre outil
nous exécutons votre code sur un environnement fermé et limitant les requêtes trop coûteuse. Ce
procédé nous protège ainsi des tentatives de mauvaise utilisation du système.
</div>
</div>
<!--Import-->
<div class="landing-page__informations__list">
<div class="landing-page__informations__list--icon">
<svg fill="#000000" width="800px" height="800px" viewBox="0 0 1920 1920"
xmlns="http://www.w3.org/2000/svg">
<g fill-rule="evenodd">
<path
d="M1352.685 168.955V733.66h564.706v1016.47H675.038v-677.647h-458.88l272.979 272.98-79.962 79.848L-.011 1016.127l409.186-409.3 79.962 79.85-272.979 272.866h458.88V168.955h677.647Zm0 790.588H787.98v112.941h564.706v-112.94Z" />
<path d="M1465.649 620.776h434.823L1465.65 185.84z" />
</g>
</svg>
</div>
<div class="landing-page__informations__list--title">Import / Export</div>
<div class="landing-page__informations__list--description">Vous pouvez importez des fichiers et
l'éditeur va reconnaître le langage à partir de son extension. Vous pouvez aussi exporter le
code que vous avez fait en seulement un clic.
</div>
</div>
<!--Options-->
<div class="landing-page__informations__list">
<div class="landing-page__informations__list--icon">
<svg id="_x32_" xmlns="http://www.w3.org/2000/svg" width="800px" height="800px"
viewBox="0 0 512 512">
<g>
<path class="st0" d="M496,293.984c9.031-0.703,16-8.25,16-17.297v-41.375c0-9.063-6.969-16.594-16-17.313l-54.828-4.281
c-3.484-0.266-6.484-2.453-7.828-5.688l-18.031-43.516c-1.344-3.219-0.781-6.906,1.5-9.547l35.75-41.813
c5.875-6.891,5.5-17.141-0.922-23.547l-29.25-29.25c-6.406-6.406-16.672-6.813-23.547-0.922l-41.813,35.75
c-2.641,2.266-6.344,2.844-9.547,1.516l-43.531-18.047c-3.219-1.328-5.422-4.375-5.703-7.828l-4.266-54.813
C293.281,6.969,285.75,0,276.688,0h-41.375c-9.063,0-16.594,6.969-17.297,16.016l-4.281,54.813c-0.266,3.469-2.469,6.5-5.688,7.828
l-43.531,18.047c-3.219,1.328-6.906,0.75-9.563-1.516l-41.797-35.75c-6.875-5.891-17.125-5.484-23.547,0.922l-29.25,29.25
c-6.406,6.406-6.797,16.656-0.922,23.547l35.75,41.813c2.25,2.641,2.844,6.328,1.5,9.547l-18.031,43.516
c-1.313,3.234-4.359,5.422-7.813,5.688L16,218c-9.031,0.719-16,8.25-16,17.313v41.359c0,9.063,6.969,16.609,16,17.313l54.844,4.266
c3.453,0.281,6.5,2.484,7.813,5.703l18.031,43.516c1.344,3.219,0.75,6.922-1.5,9.563l-35.75,41.813
c-5.875,6.875-5.484,17.125,0.922,23.547l29.25,29.25c6.422,6.406,16.672,6.797,23.547,0.906l41.797-35.75
c2.656-2.25,6.344-2.844,9.563-1.5l43.531,18.031c3.219,1.344,5.422,4.359,5.688,7.844l4.281,54.813
c0.703,9.031,8.234,16.016,17.297,16.016h41.375c9.063,0,16.594-6.984,17.297-16.016l4.266-54.813
c0.281-3.484,2.484-6.5,5.703-7.844l43.531-18.031c3.203-1.344,6.922-0.75,9.547,1.5l41.813,35.75
c6.875,5.891,17.141,5.5,23.547-0.906l29.25-29.25c6.422-6.422,6.797-16.672,0.922-23.547l-35.75-41.813
c-2.25-2.641-2.844-6.344-1.5-9.563l18.031-43.516c1.344-3.219,4.344-5.422,7.828-5.703L496,293.984z M256,342.516
c-23.109,0-44.844-9-61.188-25.328c-16.344-16.359-25.344-38.078-25.344-61.203c0-23.109,9-44.844,25.344-61.172
c16.344-16.359,38.078-25.344,61.188-25.344c23.125,0,44.844,8.984,61.188,25.344c16.344,16.328,25.344,38.063,25.344,61.172
c0,23.125-9,44.844-25.344,61.203C300.844,333.516,279.125,342.516,256,342.516z" />
</g>
</svg>
</div>
<div class="landing-page__informations__list--title">Options</div>
<div class="landing-page__informations__list--description">Vous disposez de nombreuses options vous
permettant de personnalisé et d'optimiser votre utilisation de Sandkasten. Ces options sont
directement disponible depuis l'éditeur.
</div>
</div>
<!--Multi-language-->
<div class="landing-page__informations__list">
<div class="landing-page__informations__list--icon">
<svg fill="#000000" width="800px" height="800px" viewBox="0 0 36 36" version="1.1"
preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>language-solid</title>
<polygon points="11,16.5 10,19.6 12,19.6 11,16.5 " class="clr-i-solid clr-i-solid-path-1">
</polygon>
<path d="M30.3,3h-16v5h4v2h-13c-1.7,0-3,1.3-3,3v11c0,1.7,1.3,3,3,3h1v5.1l6.3-5.1h6.7v-7h11c1.7,0,3-1.3,3-3V6
C33.3,4.3,32,3,30.3,3z M13.1,22.9l-0.5-1.6H9.5l-0.6,1.6H6.5L9.8,14h2.4l3.3,8.9L13.1,22.9z M28.3,15v2c-1.3,0-2.7-0.4-3.9-1
c-1.2,0.6-2.6,0.9-4,1l-0.1-2c0.7,0,1.4-0.1,2.1-0.3c-0.9-0.9-1.5-2-1.8-3.2h2.1c0.3,0.9,0.9,1.6,1.6,2.2c1.1-0.9,1.8-2.2,1.9-3.7
h-6V8h3V6h2v2h3.3l0.1,1c0.1,2.1-0.7,4.2-2.2,5.7C27.1,14.9,27.7,15,28.3,15z" class="clr-i-solid clr-i-solid-path-2">
</path>
<rect x="0" y="0" width="36" height="36" fill-opacity="0" />
</svg>
</div>
<div class="landing-page__informations__list--title">Multi-language</div>
<div class="landing-page__informations__list--description">De nombreux langages de codes sont
reconnus dans Sandkasten. Lorsque vous taper du code ou en importer un fichier l'éditeur
reconnaît automatiquement le langage. Vous pouvez aussi directement le sélectionner dans
l'éditeur.
</div>
</div>
<!--TODO-->
<div class="landing-page__informations__list">
<div class="landing-page__informations__list--icon">
<svg fill="#000000" width="800px" height="800px" viewBox="0 0 1920 1920"
xmlns="http://www.w3.org/2000/svg">
<g fill-rule="evenodd">
<path
d="M1352.685 168.955V733.66h564.706v1016.47H675.038v-677.647h-458.88l272.979 272.98-79.962 79.848L-.011 1016.127l409.186-409.3 79.962 79.85-272.979 272.866h458.88V168.955h677.647Zm0 790.588H787.98v112.941h564.706v-112.94Z" />
<path d="M1465.649 620.776h434.823L1465.65 185.84z" />
</g>
</svg>
</div>
<div class="landing-page__informations__list--title">Lorem ipsum</div>
<div class="landing-page__informations__list--description">Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam,
</div>
</div>
<!--TODO-->
<div class="landing-page__informations__list">
<div class="landing-page__informations__list--icon">
<svg fill="#000000" width="800px" height="800px" viewBox="0 0 1920 1920"
xmlns="http://www.w3.org/2000/svg">
<g fill-rule="evenodd">
<path
d="M1352.685 168.955V733.66h564.706v1016.47H675.038v-677.647h-458.88l272.979 272.98-79.962 79.848L-.011 1016.127l409.186-409.3 79.962 79.85-272.979 272.866h458.88V168.955h677.647Zm0 790.588H787.98v112.941h564.706v-112.94Z" />
<path d="M1465.649 620.776h434.823L1465.65 185.84z" />
</g>
</svg>
</div>
<div class="landing-page__informations__list--title">Lorem ipsum</div>
<div class="landing-page__informations__list--description">Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam,
</div>
</div>
</div>
</div>
<!--endregion-->
<!--region Technologies-->
<div class="landing-page__technologies">
<span class="landing-page__technologies--title">Languages disponibles dès maintenant</span>
<div class="landing-page__technologies__list">
<!--C-->
<svg width="46" height="48" viewBox="0 0 46 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M32.9859 28.2029L45.5311 31.9948C44.6881 35.5133 43.3612 38.4524 41.5494 40.8117C39.7379 43.1703 37.4888 44.9512 34.8028 46.152C32.1166 47.353 28.6988 47.9534 24.548 47.9534C19.5131 47.9534 15.4 47.2213 12.2086 45.758C9.01669 44.295 6.26194 41.7221 3.94472 38.0373C1.62759 34.3534 0.46875 29.6369 0.46875 23.889C0.46875 16.2261 2.50725 10.3369 6.58369 6.22031C10.6597 2.10516 16.427 0.046875 23.885 0.046875C29.7206 0.046875 34.3075 1.22719 37.6466 3.58622C40.9862 5.94544 43.4662 9.56953 45.0891 14.4564L32.4486 17.2689C32.0061 15.8581 31.5426 14.8254 31.0584 14.1724C30.2575 13.0771 29.2777 12.2339 28.1193 11.6442C26.9605 11.0547 25.6647 10.7594 24.2326 10.7594C20.9879 10.7594 18.502 12.0644 16.7745 14.6735C15.4685 16.6098 14.8157 19.6501 14.8157 23.7945C14.8157 28.9291 15.5947 32.4486 17.1539 34.3525C18.7127 36.2565 20.9037 37.209 23.727 37.209C26.4656 37.209 28.5349 36.4394 29.9362 34.9023C31.3372 33.3649 32.3537 31.1313 32.9859 28.2029Z"
fill="black" />
</svg>
<!--C++-->
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M42.879 24.7409H41.3985V26.2214H39.918V24.7409H38.4375V23.2604H39.918V21.7799H41.3985V23.2604H42.879V24.7409ZM37.3275 24.7409H35.847V26.2214H34.3665V24.7409H32.886V23.2604H34.3665V21.7799H35.847V23.2604H37.3275V24.7409ZM24 37.3274C16.6395 37.3259 10.674 31.3604 10.674 23.9999C10.674 16.6394 16.6409 10.6724 24.0015 10.6724C28.9065 10.6724 33.1935 13.3229 35.5065 17.2694L35.541 17.3324L29.775 20.6684C28.602 18.6599 26.4555 17.3324 24.0015 17.3324C20.3205 17.3324 17.3355 20.3159 17.3355 23.9984C17.3355 27.6809 20.319 30.6644 24.0015 30.6644C26.4555 30.6644 28.6005 29.3384 29.757 27.3629L29.7735 27.3314L35.5425 30.6674C33.1875 34.6709 28.902 37.3184 24 37.3274ZM43.4835 12.7529C43.1865 12.2189 42.7725 11.7839 42.276 11.4689L42.261 11.4599L25.7355 1.91839C25.2315 1.65739 24.636 1.50439 24.003 1.50439C23.37 1.50439 22.7745 1.65739 22.2495 1.92739L22.2705 1.91689L5.74195 11.4584C4.74745 12.1154 4.08295 13.2029 4.01245 14.4479V14.4584V33.5399C4.08445 34.7954 4.74895 35.8814 5.72845 36.5309L5.74345 36.5399L22.269 46.0814C22.773 46.3409 23.37 46.4939 24.0015 46.4939C24.633 46.4939 25.23 46.3409 25.755 46.0724L25.734 46.0829L42.2595 36.5414C43.254 35.8844 43.917 34.7969 43.9875 33.5519V33.5414V14.4599C43.971 13.8269 43.785 13.2404 43.476 12.7394L43.485 12.7544L43.4835 12.7529Z"
fill="black" />
</svg>
<!--TS-->
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_119_4)">
<path
d="M0 24V48H48V0H0V24ZM38.679 22.086C39.8985 22.3905 40.827 22.938 41.6865 23.82C42.1245 24.288 42.78 25.1475 42.8355 25.359C42.8505 25.422 40.7655 26.82 39.4995 27.6015C39.453 27.633 39.2655 27.438 39.0615 27.132C38.445 26.2335 37.7955 25.8435 36.804 25.773C35.3505 25.6785 34.413 26.4375 34.4205 27.711C34.413 28.023 34.4835 28.3365 34.623 28.6095C34.944 29.274 35.5455 29.6715 37.404 30.477C40.842 31.953 42.3105 32.9295 43.224 34.3125C44.247 35.859 44.4735 38.328 43.7865 40.1715C43.0215 42.1635 41.13 43.5225 38.4735 43.968C37.653 44.1165 35.7 44.0925 34.8165 43.929C32.8875 43.5855 31.059 42.6315 29.934 41.382C29.4885 40.8975 28.629 39.624 28.6845 39.5385C28.7085 39.507 28.9035 39.3825 29.1225 39.2565C29.3415 39.1305 30.1455 38.6625 30.9045 38.2245L32.2875 37.4205L32.577 37.8495C32.9835 38.466 33.8655 39.3105 34.398 39.591C35.9295 40.404 38.031 40.287 39.0705 39.357C39.492 39.006 39.7275 38.466 39.696 37.92C39.696 37.365 39.6255 37.116 39.336 36.7005C38.961 36.1695 38.2035 35.7165 36.039 34.779C33.5625 33.708 32.4915 33.0525 31.524 31.998C30.915 31.302 30.462 30.483 30.204 29.5995C30.024 28.92 29.9775 27.216 30.1185 26.5365C30.627 24.138 32.439 22.4745 35.04 21.9825C35.8845 21.819 37.8525 21.8805 38.6805 22.0845L38.679 22.086ZM27.414 24.0945L27.429 26.055H21.1785V43.8135H16.7565V26.055H10.515V24.1335C10.515 23.0625 10.539 22.173 10.569 22.149C10.593 22.1175 14.3895 22.1025 18.999 22.11L27.39 22.134L27.414 24.0945Z"
fill="black" />
</g>
<defs>
<clipPath id="clip0_119_4">
<rect width="48" height="48" fill="white" />
</clipPath>
</defs>
</svg>
<!--JS-->
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_120_9)">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M36.7872 44.2371C32.5992 44.2371 29.892 42.2405 28.572 39.6293L32.244 37.5023C33.2112 39.0815 34.4664 40.241 36.6912 40.241C38.5584 40.241 39.7512 39.3068 39.7512 38.018C39.7512 36.0788 37.164 35.3211 35.3376 34.5387C32.0832 33.1539 29.9232 31.4139 29.9232 27.7395C29.9232 24.3579 32.5008 21.7805 36.5304 21.7805C39.396 21.7805 41.46 22.7787 42.9408 25.3875L39.4296 27.6434C38.6568 26.2586 37.8192 25.7109 36.5304 25.7109C35.208 25.7109 34.3704 26.549 34.3704 27.6434C34.3704 28.997 35.208 29.5444 37.1424 30.382C41.196 32.1196 44.2632 33.4847 44.2632 37.9535C44.2632 42.0143 41.0736 44.2371 36.7872 44.2371ZM26.4 37.4379C26.4 42.1107 23.5224 44.5805 19.5264 44.5805C15.9168 44.5805 13.7544 43.2 12.6912 40.8H12.6552H12.6384H12.6288L16.2984 38.2348C17.0064 39.49 17.6448 40.3805 19.1904 40.3805C20.6736 40.3805 21.6 39.6294 21.6 37.3758V21.6H26.4V37.4379ZM0 48H48V0H0V48Z"
fill="black" />
</g>
<defs>
<clipPath id="clip0_120_9">
<rect width="48" height="48" fill="white" />
</clipPath>
</defs>
</svg>
</div>
</div>
<!--endregion-->
<!--region About-->
<div class="landing-page__about">
<div class="landing-page__about__titles">
<h2 class="landing-page__about--title">Empowering the world with Astro.</h2>
<div class="landing-page__about--description">We're a multi-cultural team from around the world! We come
from diverse backgrounds, bringing different personalities, experiences and skills to the job. This
is what makes our team so special.
</div>
</div>
<div class="landing-page__about__members">
<!--Bastien-->
<div class="landing-page__about__member">
<div class="landing-page__about__member--image">
<img src="assets/img/landing-page/unknown.jpeg" alt="Bastien">
</div>
<div class="landing-page__about__member--texts">
<div class="landing-page__about__member--texts--name">Bastien</div>
<div class="landing-page__about__member--texts--role">Développeur</div>
</div>
</div>
<!--Clement-->
<div class="landing-page__about__member">
<div class="landing-page__about__member--image">
<img src="assets/img/landing-page/unknown.jpeg" alt="Bastien">
</div>
<div class="landing-page__about__member--texts">
<div class="landing-page__about__member--texts--name">Clément</div>
<div class="landing-page__about__member--texts--role">Développeur</div>
</div>
</div>
<!--Colin-->
<div class="landing-page__about__member">
<div class="landing-page__about__member--image">
<img src="assets/img/landing-page/unknown.jpeg" alt="Bastien">
</div>
<div class="landing-page__about__member--texts">
<div class="landing-page__about__member--texts--name">Colin</div>
<div class="landing-page__about__member--texts--role">Développeur</div>
</div>
</div>
<!--Hugo-->
<div class="landing-page__about__member">
<div class="landing-page__about__member--image">
<img src="assets/img/landing-page/unknown.jpeg" alt="Bastien">
</div>
<div class="landing-page__about__member--texts">
<div class="landing-page__about__member--texts--name">Hugo</div>
<div class="landing-page__about__member--texts--role">Développeur</div>
</div>
</div>
<!--Matis-->
<div class="landing-page__about__member">
<div class="landing-page__about__member--image">
<img src="assets/img/landing-page/unknown.jpeg" alt="Bastien">
</div>
<div class="landing-page__about__member--texts">
<div class="landing-page__about__member--texts--name">Matis</div>
<div class="landing-page__about__member--texts--role">Développeur</div>
</div>
</div>
</div>
</div>
<!--endregion-->
<!--region Get Started-->
<div class="landing-page__get_started">
<h3 class="landing-page__get_started--title">Get started with Astro</h3>
<div class="landing-page__get_started--description">Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore
</div>
<div class="landing-page__get_started--button">Get Started</div>
</div>
<!--endregion-->
</div>
</div>

323
src/app/components/landing-page/landing-page.component.scss
Unescape View File

@ -1,61 +1,332 @@
@import '../../../styles';
.landing-page {
padding: 6rem;
padding: 6rem 12rem;
display: flex;
flex-direction: row;
justify-content: center;
gap: 2rem;
color: $color-black;
transition: color 0.3s ease-in-out;
transition: color .3s ease-in-out;
&--container {
.wrapper {
max-width: 80rem;
display: flex;
flex-direction: column;
gap: 6rem;
}
//region Hero
&__hero {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
&__hero_left {
display: flex;
flex-direction: column;
gap: 1rem;
&--title {
font-size: 5rem;
font-weight: 700;
line-height: 1;
margin: 0;
}
&--description {
font-size: 1rem;
color: #475569;
}
&__buttons {
display: flex;
flex-direction: row;
gap: .75rem;
&--editor,
&--git {
border-radius: 4px;
padding: .625rem 1.25rem;
display: flex;
flex-direction: row;
align-items: center;
gap: .5rem;
&--image {
width: 1rem;
height: 1rem;
object-fit: cover;
}
}
&--editor {
background-color: $color-black;
color: $color-white;
}
&--git {
border: 2px solid $color-black;
}
}
}
&--title {
font-size: 5rem;
font-weight: 700;
margin: 0;
&__hero_right {
position: relative;
display: flex;
justify-content: center;
&--image {
position: absolute;
width: auto;
height: 100%;
object-fit: cover;
}
}
&--subtitle {
font-size: 1rem;
font-weight: 400;
margin: 0;
//endregion
//region Informations
&__informations {
display: flex;
flex-direction: column;
gap: 4rem;
&--lists {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 4rem;
}
&__list {
display: grid;
grid: 'icon title' 'icon description' / auto 1fr;
gap: .5rem 1rem;
&--icon {
grid-area: icon;
height: fit-content;
background: black;
border-radius: 999px;
display: flex;
justify-content: center;
align-items: center;
svg {
width: 1rem;
height: auto;
aspect-ratio: 1;
padding: .5rem;
path {
fill: white;
stroke: white;
}
}
}
&--title {
grid-area: title;
font-size: 1.125rem;
font-weight: 600;
}
&--description {
grid-area: description;
font-size: 1rem;
color: $color-gray;
}
}
}
&__button {
padding: 0.75rem 2rem;
background: $color-purple;
border-radius: 10px;
width: fit-content;
white-space: nowrap;
&__informations_top {
display: flex;
flex-direction: column;
gap: 1rem;
color: $color-white;
&--title {
margin: 0;
font-size: 3rem;
font-weight: 700;
line-height: 1;
}
&--description {
font-size: 1rem;
color: #475569;
}
}
@media (max-width: 1024px) {
padding: 4rem;
//endregion
//region Technologies
&__technologies {
display: flex;
flex-direction: column;
gap: 4rem;
&--title {
text-align: center;
font-size: 1rem;
font-weight: 700;
}
&__list {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 4rem;
svg {
width: 3rem;
height: auto;
aspect-ratio: 1;
}
}
}
//endregion
//region About
&__about {
display: flex;
flex-direction: column;
gap: 3rem;
margin-inline: 10rem;
&__titles {
display: flex;
flex-direction: column;
gap: .75rem;
}
&--title {
font-size: 2rem;
font-weight: 700;
margin: 0;
}
&--description {
font-size: 1.125rem;
}
&__members {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
}
&__member {
display: flex;
flex-direction: column;
gap: 1rem;
&--image {
position: relative;
width: 100%;
height: auto;
aspect-ratio: .8;
object-fit: contain;
img {
position: absolute;
width: 100%;
height: 100%;
}
}
&--texts {
display: flex;
flex-direction: column;
align-items: center;
&--name {
font-size: 1.125rem;
}
&--role {
font-size: .875rem;
}
}
}
}
//endregion
//region Get Started
&__get_started {
background-color: $color-black;
padding: 3rem 5rem;
border-radius: 10px;
margin-inline: 6rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
&--title {
font-size: 4rem;
color: $color-white;
font-size: 3.75rem;
font-weight: 400;
margin: 0;
}
&--description {
color: #94A4B8;
font-size: 1.25rem;
text-align: center;
}
&--button {
margin-top: .25rem;
cursor: pointer;
background: $color-white;
padding: .75rem 1.5rem;
border-radius: 10px;
}
}
@media (max-width: 767px) {
padding: 2rem;
//endregion
@media(max-width: 1024px) {
padding: 4rem;
flex-direction: column;
gap: 1rem;
&--title {
font-size: 2.5rem;
font-size: 4rem;
}
}
&.dark-theme {
color: $color-white;
&--title {
font-size: 4rem;
}
}
@media(max-width: 767px) {
padding: 2rem;
&--title {
font-size: 2.5rem;
}
}
&--title {
font-size: 2.5rem;
}
}
&.dark-theme {
color: $color-white;
}
&.dark-theme {
color: $color-white;
}
}

4
src/assets/i18n/fr.json
Unescape View File

@ -1,6 +1,6 @@
{
"LandingPage": {
"Welcome": "Bienvenue sur Sandkasten",
"Welcome": "Bienvenue sur Sandkasten",
"Description": "Vous voici arrivé sur le meilleur site bac à sable de test de code ! Nous vous permettons de tester tous vos programmes sur vos langages préférés. Grâce à l’éditeur Code Mirror et à notre gestion personalisée de l’exécution sur des conteneurs, votre code devient complétement inoffensif et vous pouvez donc vous amusez autant que vous le souhaitez !",
"Try": "Essayez maintenant !"
},
@ -116,4 +116,4 @@
},
"Date": "Ce document a été mis à jour pour la dernière fois le 10 janvier 2024."
}
}
}

BIN
src/assets/img/landing-page/astronaut_image.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 134 KiB

BIN
src/assets/img/landing-page/cross.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
src/assets/img/landing-page/gitea.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
src/assets/img/landing-page/unknown.jpeg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

1
src/styles.scss
Unescape View File

@ -3,6 +3,7 @@ $color-purple: #605ffc;
$color-white: #ffffff;
$color-black: #000000;
$color-light-black: #333333;
$color-gray: #64748B;
//endregion
* {

Write Preview
Loading…
Cancel
Save