diff --git a/src/app/components/landing-page/landing-page.component.html b/src/app/components/landing-page/landing-page.component.html index 5b2fc1d..4685efb 100644 --- a/src/app/components/landing-page/landing-page.component.html +++ b/src/app/components/landing-page/landing-page.component.html @@ -1,13 +1,295 @@
-
-

{{ 'LandingPage.Welcome' | translate }}

- {{ - 'LandingPage.Description' | translate - }} -
- {{ - 'LandingPage.Try' | translate - }} -
-
-
+
+ +
+
+

{{ 'LandingPage.Welcome' | translate }}

+ {{ 'LandingPage.Description' | translate }} +
+
+ editor icon + + Editeur de code +
+
+ editor icon + + Dépôt Git +
+
+
+
+ landing page +
+
+ + + +
+
+

Everything you need to start a website

+ Astro comes batteries included. It takes the + best parts of state-of-the-art tools and adds its own innovations. +
+
+ +
+
+ + data-source-solid + + + + + + + + + +
+
Sécurisé
+
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. +
+
+ +
+
+ + + + + + +
+
Import / Export
+
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. +
+
+ +
+
+ + + + + +
+
Options
+
Vous disposez de nombreuses options vous + permettant de personnalisé et d'optimiser votre utilisation de Sandkasten. Ces options sont + directement disponible depuis l'éditeur. +
+
+ +
+
+ + language-solid + + + + + + +
+
Multi-language
+
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. +
+
+ +
+
+ + + + + + +
+
Lorem ipsum
+
Lorem ipsum dolor sit amet, consectetur + adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, +
+
+ +
+
+ + + + + + +
+
Lorem ipsum
+
Lorem ipsum dolor sit amet, consectetur + adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, +
+
+
+
+ + + +
+ Languages disponibles dès maintenant +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + +
+
+

Empowering the world with Astro.

+
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. +
+
+
+ +
+
+ Bastien +
+
+
Bastien
+
Développeur
+
+
+ +
+
+ Bastien +
+
+
Clément
+
Développeur
+
+
+ +
+
+ Bastien +
+
+
Colin
+
Développeur
+
+
+ +
+
+ Bastien +
+
+
Hugo
+
Développeur
+
+
+ +
+
+ Bastien +
+
+
Matis
+
Développeur
+
+
+
+
+ + + +
+

Get started with Astro

+
Lorem ipsum dolor sit amet, consectetur adipiscing + elit, sed do eiusmod tempor incididunt ut labore et dolore +
+
Get Started
+
+ +
+ \ No newline at end of file diff --git a/src/app/components/landing-page/landing-page.component.scss b/src/app/components/landing-page/landing-page.component.scss index bce692b..fbae131 100644 --- a/src/app/components/landing-page/landing-page.component.scss +++ b/src/app/components/landing-page/landing-page.component.scss @@ -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; +} +} \ No newline at end of file diff --git a/src/assets/i18n/fr.json b/src/assets/i18n/fr.json index 5d5f091..51afe1d 100644 --- a/src/assets/i18n/fr.json +++ b/src/assets/i18n/fr.json @@ -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." } -} +} \ No newline at end of file diff --git a/src/assets/img/landing-page/astronaut_image.png b/src/assets/img/landing-page/astronaut_image.png new file mode 100644 index 0000000..10f69c7 Binary files /dev/null and b/src/assets/img/landing-page/astronaut_image.png differ diff --git a/src/assets/img/landing-page/cross.png b/src/assets/img/landing-page/cross.png new file mode 100644 index 0000000..2902507 Binary files /dev/null and b/src/assets/img/landing-page/cross.png differ diff --git a/src/assets/img/landing-page/gitea.png b/src/assets/img/landing-page/gitea.png new file mode 100644 index 0000000..d128253 Binary files /dev/null and b/src/assets/img/landing-page/gitea.png differ diff --git a/src/assets/img/landing-page/unknown.jpeg b/src/assets/img/landing-page/unknown.jpeg new file mode 100644 index 0000000..eb5ce50 Binary files /dev/null and b/src/assets/img/landing-page/unknown.jpeg differ diff --git a/src/styles.scss b/src/styles.scss index af4dbb3..53e3d43 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -3,6 +3,7 @@ $color-purple: #605ffc; $color-white: #ffffff; $color-black: #000000; $color-light-black: #333333; +$color-gray: #64748B; //endregion * {