Homepage redesign

.gitignore

@@ -5,8 +5,11 @@ coverage
 .DS_STORE
 .env
 tmp
+.yarn
 
+.yarnrc.yml
 resources/css/styles.css
 resources/css/styles.css.map
 public/assets
 package-lock.json
+yarn.lock

resources/js/home.js

@@ -1,12 +1,42 @@
-textPresentation = document.querySelector('.presentation');
+const header_options = (delay) => {
+  return {
+    delay: delay + 50,
+    duration: 500,
+    origin: 'bottom',
+    distance: '20px',
+    opacity: 0,
+    easing: 'cubic-bezier(0.5, 0, 0, 1)',
+    reset: true
+  }
+}
 
 window.addEventListener('load', (e) => {
+  // Élements du header
+  ScrollReveal().reveal('.reveal-over_title', header_options(0));
+  ScrollReveal().reveal('.reveal-title', header_options(100));
+  ScrollReveal().reveal('.reveal-description', header_options(200));
+  ScrollReveal().reveal('.reveal-button', header_options(300));
 
-  setTimeout(() => {
-
-    textPresentation.classList.add('visible');
-
-  }, 100)
-
+  // Sections 
+  ScrollReveal().reveal('.reveal-section-title', {
+    delay: 50,
+    duration: 500,
+    origin: 'bottom',
+    distance: '20px',
+    scale: 0.95,
+    opacity: 0,
+    easing: 'cubic-bezier(0.5, 0, 0, 1)',
+    reset: false
+  });
 
+  ScrollReveal().reveal('.reveal-section-text', {
+    delay: 150,
+    duration: 500,
+    origin: 'bottom',
+    distance: '20px',
+    scale: 0.95,
+    opacity: 0,
+    easing: 'cubic-bezier(0.5, 0, 0, 1)',
+    reset: false
+  });
 })

resources/lang/en/ui.yaml

@@ -23,7 +23,12 @@ footer:
     the complete list of contributors
 
 index:
-  title: A free, modular and educational cellphone.
+  header:
+    over_title: Introducing Paxo
+    title: A free, modular and educational cellphone.
+    description: |
+      Paxo, is a free, modular and educational cellphone. It is designed to be made by everyone, open to all and fully customizable.
+    more_info: Get to know Paxo
   block1:
     title: Open
     p1: |

resources/lang/fr/ui.yaml

@@ -23,7 +23,12 @@ footer:
     la liste complète des contributeurs
 
 index:
-  title: Un téléphone libre, modulaire et pédagogique.
+  header:
+    over_title: Découvrez le Paxo Phone
+    title: Un téléphone libre, modulaire et pédagogique.
+    description: |
+      Paxo, c'est un téléphone libre, modulaire et pédagogique. Il est conçu pour être réalisé par chacun, ouvert à tous et entièrement personnalisable.
+    more_info: Plus d'informations
   block1:
     title: Libre
     p1: |
@@ -102,6 +107,11 @@ tutorials:
   title: Tutoriels
   description: Vous trouverez les tutos pour la conception du PaxoPhone ainsi que les autres projets signés Paxo.
   last_update: Dernière mise à jour
+  cards:
+    - title: Comment monter son Paxophone ?
+      description: Vidéo explicative du montage du Paxophone.
+    - title: Oshwlab
+      description: Plan détaillé du hardware du Paxophone (PCB, Schematic Diagram).
 
 contributors:
   seo_description: Liste des contributeurs au projet Paxo.

resources/scss/atoms/_sections.scss

@@ -0,0 +1,33 @@
+/* sections */
+
+.section-title {
+  font-weight: 600;
+  font-size: 1.7rem;
+}
+
+.section-text {
+  font-size: 0.9rem;
+  line-height: 1.3rem;
+  font-weight: 400;
+  opacity: 0.8;
+}
+
+.section-btn {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  border: 2px solid #fff;
+  border-radius: 0px;
+  padding: 10px 18px;
+  font-size: 0.9rem;
+  transition: all 0.3s ease;
+  animation: button-pulse 1.5s infinite;
+  width: fit-content;
+
+  &:hover {
+    background-color: #fff;
+    color: #000;
+  }
+}

resources/scss/atoms/_title.scss

@@ -0,0 +1,86 @@
+/* title */
+/* serves the main title on the index */
+
+.title-container {
+  height: 65vh;
+}
+
+@media screen and (max-width: map-get($breakpoints, md)) {
+  .title-container {
+    height: 80vh;
+  }
+}
+
+.cta-title {
+  color: #fff;
+  filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.7));
+
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+
+  margin-top: 2%;
+
+  > .title {
+    font-size: 1.8rem;
+    line-height: 2rem;
+    font-weight: 600;
+
+    max-width: 700px;
+  }
+
+  > .description {
+    font-size: 1rem;
+    font-weight: 400;
+
+    max-width: 800px;
+
+    opacity: 0.8;
+  }
+
+  > .over_title {
+    font-size: 0.9rem;
+    font-weight: 400;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    opacity: 0.8;
+
+    max-width: 800px;
+  }
+
+  > .button {
+    display: flex;
+    width: fit-content;
+
+    gap: 16px;
+    align-items: center;
+    justify-content: center;
+
+    color: #fff;
+    border: 2px solid #fff;
+    border-radius: 0px;
+    padding: 8px 16px;
+
+    font-size: 0.9rem;
+    transition: all 0.3s ease;
+
+    animation: button-pulse 1.5s infinite;
+
+    &:hover {
+      background-color: #fff;
+      color: #000;
+    }
+  }
+}
+
+@keyframes button-pulse {
+  0% {
+    outline: 0px solid #fff;
+  }
+  50% {
+    outline: 8px solid #ffffff00;
+  }
+  100% {
+    outline: 8px solid #ffffff00;
+  }
+}

resources/scss/base/_base.scss

@@ -9,6 +9,7 @@ html, body {
     color: $fg-color;
     font-family: $body-font-family;
     font-size: $body-font-size;
+    scroll-behavior: smooth;
 }
 
 @media screen and (min-width: map-get($breakpoints, md)) {

resources/scss/base/_fonts.scss

@@ -0,0 +1,31 @@
+/* fonts */
+
+@font-face {
+  font-family: "Paxo";
+  font-weight: 300;
+  src: url("/public/fonts/NotoSans-Light.ttf")
+}
+
+@font-face {
+  font-family: "Paxo";
+  font-weight: 400;
+  src: url("/public/fonts/NotoSans-Regular.ttf")
+}
+
+@font-face {
+  font-family: "Paxo";
+  font-weight: 500;
+  src: url("/public/fonts/NotoSans-Medium.ttf")
+}
+
+@font-face {
+  font-family: "Paxo";
+  font-weight: 600;
+  src: url("/public/fonts/NotoSans-SemiBold.ttf")
+}
+
+@font-face {
+  font-family: "Paxo";
+  font-weight: 700;
+  src: url("/public/fonts/NotoSans-Bold.ttf")
+}

resources/scss/base/_variables.scss

@@ -3,10 +3,10 @@
 $bg-color: #fff;
 $fg-color: #000;
 
-$body-font-family: Helvetica, Arial, sans-serif;
+$body-font-family: 'Paxo', sans-serif;
 $body-font-size: 16px;
 $body-font-size: 16px;
-$transition-duration: 0.2s;
+$transition-duration: 0.3s;
 
 $breakpoints: (
     xs: 0,

resources/scss/layout/_footer.scss

@@ -1,45 +1,49 @@
 /* footer */
 
 footer {
-    min-height: 10vh;
-    background: #0A0A0A;
+    background: #153029;
     color: #fff;
-    padding: 5%;
+    padding: 0px 8%;
 
     display: flex;
-    flex-direction: column;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
 
+    flex-direction: row;
+
     gap: 2rem;
 }
 
-footer > *
-{
-    flex: 1 1 0;
+.footer-text {
+    font-size: 14px;
+    width: 100%;
+    flex: 1;
+    max-width: 500px;
+    margin: 20px 0px;
 }
 
 .social {}
 
 .social ul {
     display: flex;
-    justify-content: center;
+    justify-content: flex-end;
     align-items: center;
     flex-direction: row;
-    gap: 1.4rem;
+    gap: 1.5rem;
+    width: fit-content;
 }
 
 
 .social ul li a {
     text-decoration: none;
     color: white;
-    font-size: 40px;
+    font-size: 26px;
     cursor: pointer;
-}
+    opacity: 0.5;
+
+    transition: all 0.3s ease;
 
-@media screen and (min-width: map-get($breakpoints, sm))
-{
-    footer {
-        flex-direction: row;
+    &:hover {
+        opacity: 1;
     }
 }