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

Redesign the home page #9

Merged
clement.freville2 merged 7 commits from new-style into master 12 months ago
Conversation 0 Commits 7 Files Changed 12
12 changed files with 970 additions and 194 deletions
Show Stats Download Patch File Download Diff File

95
src/app/components/footer/footer.component.html
Unescape View File

@ -5,92 +5,11 @@
</head>
<div class="footer">
<!--Logo and copyrights-->
<div class="rights">
<img
class="sandkasten-logo"
routerLink=""
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
[src]="sandkasten_logo"
alt="Logo-Sandkasten" />
<div class="title">Sandkasten</div>
<div class="copyright">{{ 'FooterPage.Rights' | translate }}</div>
</div>
<!--Navigation-->
<div class="navigation">
<div class="about">
<span class="title">{{ 'FooterPage.About' | translate }}</span>
<div class="links">
<!-- TODO - Add the router links -->
<a
routerLink="our-story"
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
>{{ 'FooterPage.Story' | translate }}</a
>
<a
routerLink=""
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
>{{ 'FooterPage.Contact' | translate }}</a
>
</div>
</div>
<div class="legals">
<span class="title">{{ 'FooterPage.Legal' | translate }}</span>
<div class="links">
<a
routerLink="terms-of-service"
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
>{{ 'FooterPage.Terms' | translate }}</a
>
<a
routerLink="privacy-policy"
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
>{{ 'FooterPage.Privacy' | translate }}</a
>
</div>
</div>
</div>
<!--Socials-->
<div class="socials">
<a href="https://twitter.com/Sandkasten3a">
<img
class="tiwtter-logo"
class="image"
routerLink=""
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
[src]="twitter_logo"
alt="Logo-Twitter" />
</a>
<a href="https://instagram.com">
<img
class="instagram-logo"
class="image"
routerLink=""
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
[src]="instagram_logo"
alt="Logo-Instagram" />
</a>
<a href="https://www.facebook.com/profile.php?id=61555217444337">
<img
class="facebook-logo"
class="image"
routerLink=""
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
[src]="facebook_logo"
alt="Logo-Facebook" />
</a>
</div>
<span class="footer--rights"
>Copyright © 2024 Sandcasten. All rights reserved.</span
>
<span class="footer__links">
<a>Mentions légales</a> - <a>Politique de confidentialité</a> -
<a>Conditions générales d'utilisation</a>
</span>
</div>

88
src/app/components/footer/footer.component.scss
Unescape View File

@ -1,84 +1,24 @@
@import '../../../styles';
.footer {
background-color: #494b92;
padding: 0.5rem 1rem;
display: flex;
flex-direction: row;
justify-content: space-between;
}
/* Logo and copyrights*/
.rights {
display: grid;
grid: 'logo title' auto 'copyright copyright' / auto 1fr;
flex-direction: column;
align-items: center;
gap: 0.5rem;
color: #ffffff;
padding: 0 4rem 4rem;
text-align: center;
.sandkasten-logo {
grid-area: logo;
width: 4rem;
height: auto;
aspect-ratio: 1;
&--rights {
font-size: 0.875rem;
color: $color-gray;
}
.title {
grid-area: title;
display: flex;
align-items: flex-end;
font-family: 'Podkova', sans-serif;
font-size: 1.25rem;
font-weight: 600;
text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.copyright {
grid-area: copyright;
font-size: 1rem;
}
}
/*Navigation*/
.navigation {
display: flex;
flex-direction: row;
gap: 3rem;
color: #818181;
.about,
.legals {
display: flex;
flex-direction: column;
gap: 0.5rem;
&__links {
font-size: 0.75rem;
color: $color-gray;
.title {
color: #ffffff;
text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
a {
cursor: pointer;
}
.links {
display: flex;
flex-direction: column;
gap: 0.25rem;
> a {
color: #818181;
text-decoration: none;
transition: color 0.3s ease;
}
:hover {
color: #ffffff;
}
}
}
}
.socials {
.image {
grid-area: logo;
width: 3rem;
height: auto;
aspect-ratio: 1;
padding-right: 10px;
}
}

5
src/app/components/header/header.component.html
Unescape View File

@ -1,4 +1,9 @@
<div class="header" role="banner" [ngClass]="themeClass">
<div
class="overlay"
[ngClass]="{ visible: isMenuOpen }"
(click)="openCloseMenu()"></div>
<div class="left_part">
<div class="left_part__logo--container">
<a routerLink="/" routerLinkActive="active">

23
src/app/components/header/header.component.scss
Unescape View File

@ -39,6 +39,7 @@ $color-stars: #fcfcfc;
transform: rotateZ($deg);
background-color: $color-cloud-inner;
}
//endregion
$theme-transition: all 0.3s ease-in-out;
@ -53,6 +54,21 @@ $theme-transition: all 0.3s ease-in-out;
justify-content: space-between;
gap: 2rem;
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(black, 0.2);
display: none;
&.visible {
display: block;
z-index: 1;
}
}
.left_part {
display: flex;
flex-direction: row;
@ -77,6 +93,8 @@ $theme-transition: all 0.3s ease-in-out;
// Dark mode button
.wrapper {
text-align: center;
display: flex;
align-items: center;
.toggle {
position: relative;
@ -84,6 +102,7 @@ $theme-transition: all 0.3s ease-in-out;
width: 100px;
padding: 4px;
border-radius: 40px;
scale: 0.75;
}
&:before,
@ -163,9 +182,11 @@ $theme-transition: all 0.3s ease-in-out;
background-color: #fff;
transform: scale(0.4);
transition: all 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94);
&:after {
@include cloudBubble(-65px, -42px, 15px, 15px, 70deg);
}
&:before {
@include cloudBubble(-25px, -10px, 30px, 30px, 30deg);
}
@ -339,6 +360,7 @@ $theme-transition: all 0.3s ease-in-out;
color: $color-white;
}
}
&__connexion {
&--register {
border-color: $color-white;
@ -358,6 +380,7 @@ $theme-transition: all 0.3s ease-in-out;
color: $color-white;
}
}
&__connexion {
&--register {
border-color: $color-white;

12
src/app/components/header/header.component.ts
Unescape View File

@ -54,13 +54,13 @@ export class HeaderComponent {
openCloseMenu() {
this.isMenuOpen = !this.isMenuOpen;
}
@HostListener('document:click', ['$event'])
clickout(event: MouseEvent) {
// If the menu is open and click is outside the menu, we close it
if (this.isMenuOpen && !this.menuRef.nativeElement.contains(event.target)) {
this.isMenuOpen = false;
if (this.isMenuOpen) {
// Add an overflow to the body
document.body.classList.add('no-scroll');
} else {
// Remove the overflow of the body
document.body.classList.remove('no-scroll');
}
}
}

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

@ -1,13 +1,468 @@
<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 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">
<button
class="landing-page__hero_left__buttons--editor"
routerLink="/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>
</button>
<a href="https://codefirst.iut.uca.fr/git/sandkasten">
<button 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>
</button>
</a>
</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">
Ce dont vous avez besoin de savoir sur notre éditeur
</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-->
<a href="https://www.open-std.org/jtc1/sc22/wg14/">
<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>
</a>
<!--C++-->
<a href="https://isocpp.org/">
<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>
</a>
<!--TS-->
<a href="https://www.typescriptlang.org/">
<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>
</a>
<!--JS-->
<a href="https://developer.mozilla.org/fr/docs/Web/JavaScript">
<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>
</a>
</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 Socials-->
<div class="landing-page__socials">
<span class="landing-page__socials--title"
>Rejoinez-nous sur nos réseaux</span
>
<div class="landing-page__socials__list">
<!--Twitter-->
<a href="https://twitter.com/Sandkasten3a">
<svg
width="48"
height="44"
viewBox="0 0 48 44"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_125_14)">
<path
d="M37.76 0H45.12L28.96 18.4L47.84 43.36H33.024L21.424 28.192L8.14397 43.36H0.783974L17.904 23.68L-0.176025 0H15.008L25.488 13.856L37.76 0ZM35.184 39.04H39.264L12.864 4.16H8.47997L35.184 39.04Z"
fill="black" />
</g>
<defs>
<clipPath id="clip0_125_14">
<rect width="48" height="43.36" fill="white" />
</clipPath>
</defs>
</svg>
</a>
<!--Instagram-->
<a href="https://instagram.com">
<svg
width="48"
height="48"
viewBox="0 0 48 48"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M24 36C30.6274 36 36 30.6274 36 24C36 17.3726 30.6274 12 24 12C17.3726 12 12 17.3726 12 24C12 30.6274 17.3726 36 24 36ZM24 32C28.4182 32 32 28.4182 32 24C32 19.5817 28.4182 16 24 16C19.5817 16 16 19.5817 16 24C16 28.4182 19.5817 32 24 32Z"
fill="#0F0F0F" />
<path
d="M36 10C34.8954 10 34 10.8954 34 12C34 13.1046 34.8954 14 36 14C37.1046 14 38 13.1046 38 12C38 10.8954 37.1046 10 36 10Z"
fill="#0F0F0F" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M3.30792 8.55212C2 11.1191 2 14.4794 2 21.2V26.8C2 33.5206 2 36.881 3.30792 39.4478C4.4584 41.7058 6.29416 43.5416 8.55212 44.692C11.1191 46 14.4794 46 21.2 46H26.8C33.5206 46 36.881 46 39.4478 44.692C41.7058 43.5416 43.5416 41.7058 44.692 39.4478C46 36.881 46 33.5206 46 26.8V21.2C46 14.4794 46 11.1191 44.692 8.55212C43.5416 6.29416 41.7058 4.4584 39.4478 3.30792C36.881 2 33.5206 2 26.8 2H21.2C14.4794 2 11.1191 2 8.55212 3.30792C6.29416 4.4584 4.4584 6.29416 3.30792 8.55212ZM26.8 6H21.2C17.7737 6 15.4445 6.00312 13.6442 6.1502C11.8905 6.29348 10.9937 6.55318 10.3681 6.87194C8.86278 7.63894 7.63894 8.86278 6.87194 10.3681C6.55318 10.9937 6.29348 11.8905 6.1502 13.6442C6.00312 15.4445 6 17.7737 6 21.2V26.8C6 30.2264 6.00312 32.5554 6.1502 34.3558C6.29348 36.1096 6.55318 37.0064 6.87194 37.632C7.63894 39.1372 8.86278 40.361 10.3681 41.128C10.9937 41.4468 11.8905 41.7066 13.6442 41.8498C15.4445 41.9968 17.7737 42 21.2 42H26.8C30.2264 42 32.5554 41.9968 34.3558 41.8498C36.1096 41.7066 37.0064 41.4468 37.632 41.128C39.1372 40.361 40.361 39.1372 41.128 37.632C41.4468 37.0064 41.7066 36.1096 41.8498 34.3558C41.9968 32.5554 42 30.2264 42 26.8V21.2C42 17.7737 41.9968 15.4445 41.8498 13.6442C41.7066 11.8905 41.4468 10.9937 41.128 10.3681C40.361 8.86278 39.1372 7.63894 37.632 6.87194C37.0064 6.55318 36.1096 6.29348 34.3558 6.1502C32.5554 6.00312 30.2264 6 26.8 6Z"
fill="#0F0F0F" />
</svg>
</a>
<!--Facebook-->
<a href="https://www.facebook.com/profile.php?id=61555217444337">
<svg
width="48"
height="48"
viewBox="0 0 48 48"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M2.73969 0H45.2603C46.7016 0 48 1.29836 48 2.7397V45.2603C48 46.7016 46.7016 48 45.2603 48H2.73969C1.29836 48 0 46.7016 0 45.2603V2.7397C0 1.29836 1.29836 0 2.73969 0ZM34.0871 26.9519H40.7172L41.0055 20.61H34.0871V15.9262C34.0871 14.1251 34.4468 13.115 36.753 13.115H40.7887L40.934 7.20438C40.934 7.20438 39.1329 6.91612 36.5385 6.91612C30.1966 6.91612 27.3854 10.8804 27.3854 15.1329V20.61H22.7016V26.9519H27.3854V44.5362H34.0871V26.9519Z"
fill="black" />
</svg>
</a>
</div>
</div>
<!--endregion-->
<!--region Get Started-->
<div class="landing-page__get_started">
<h3 class="landing-page__get_started--title">Allez essayer Sandkasten</h3>
<div class="landing-page__get_started--description">
Rejoignez dès maintenant la communauté Sandkasten en testant notre
éditeur !
</div>
<button class="landing-page__get_started--button" routerLink="/editor">
Get Started
</button>
</div>
<!--endregion-->
</div>
</div>

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

@ -1,40 +1,369 @@
@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;
&--container {
.wrapper {
max-width: 80rem;
display: flex;
flex-direction: column;
gap: 4rem;
}
//region Hero
&__hero {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
padding-bottom: 2rem;
gap: 2rem;
}
&__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: 0.75rem;
&--editor,
&--git {
border-radius: 4px;
padding: 0.625rem 1.25rem;
border: none;
cursor: pointer;
display: flex;
flex-direction: row;
align-items: center;
gap: 0.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;
}
}
//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: 0.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: 0.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;
}
}
}
&__informations_top {
display: flex;
flex-direction: column;
gap: 1rem;
&--title {
margin: 0;
font-size: 3rem;
font-weight: 700;
line-height: 1;
}
&--description {
font-size: 1rem;
color: #475569;
}
}
//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: 0.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: 0.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: 0.875rem;
}
}
}
}
&--subtitle {
font-size: 1rem;
font-weight: 400;
margin: 0;
//endregion
//region Socials
&__socials {
display: flex;
flex-direction: column;
gap: 2rem;
&--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 {
cursor: pointer;
width: 3rem;
height: auto;
aspect-ratio: 1;
}
}
}
&__button {
padding: 0.75rem 2rem;
background: $color-purple;
//endregion
//region Get Started
&__get_started {
background-color: $color-black;
padding: 3rem 5rem;
border-radius: 10px;
width: fit-content;
white-space: nowrap;
margin-inline: 6rem;
color: $color-white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
&--title {
//white-space: nowrap;
color: $color-white;
font-size: 3.75rem;
font-weight: 400;
text-align: center;
margin: 0;
}
&--description {
color: #94a4b8;
font-size: 1.25rem;
text-align: center;
}
&--button {
border: none;
margin-top: 0.25rem;
cursor: pointer;
background: $color-white;
padding: 0.75rem 1.5rem;
border-radius: 10px;
}
}
//endregion
@media (max-width: 80rem) {
//region Hero
&__hero_left {
&--title {
font-size: 3rem;
}
&--description {
font-size: 0.875rem;
}
}
//endregion
//region Informations
&__informations_top {
&--title {
font-size: 2rem;
}
}
//endregion
//region Get Started
&__get_started {
margin-inline: 3rem;
&--title {
font-size: 2.5rem;
}
}
//endregion
}
@media (max-width: 1024px) {
@ -42,6 +371,29 @@
flex-direction: column;
gap: 1rem;
//region Informations
&__informations {
&--lists {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
//endregion
//region About
&__about {
margin-inline: 3rem;
}
//endregion
//region Get Started
&__get_started {
padding: 3rem;
}
//endregion
&--title {
font-size: 4rem;
}
@ -50,11 +402,88 @@
@media (max-width: 767px) {
padding: 2rem;
//region Hero
&__hero {
display: flex;
flex-direction: column;
gap: 4rem;
}
&__hero_left {
&--title {
font-size: 2.5rem;
}
}
&__hero_right {
min-height: 25dvh;
}
//endregion
//region Informations
&__informations {
&--lists {
grid-template-columns: minmax(0, 1fr);
}
}
//endregion
//region Technologies
&__technologies {
&__list {
gap: 2rem;
}
}
//endregion
//region About
&__about {
margin-inline: 0;
&__members {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
//endregion
//region Socials
&__socials {
&__list {
gap: 2rem;
}
}
//endregion
//region Get Started
&__get_started {
padding: 2rem;
margin-inline: 0;
&--title {
font-size: 2rem;
}
&--description {
font-size: 1rem;
}
}
//endregion
&--title {
font-size: 2.5rem;
}
}
&--title {
font-size: 2.5rem;
}
&.dark-theme {
color: $color-white;
}

2
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 !"
},

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

5
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
* {
@ -11,4 +12,8 @@ $color-light-black: #333333;
body {
margin: 0;
&.no-scroll {
overflow: hidden;
}
}

Write Preview
Loading…
Cancel
Save