feat(producteur): content and style

3 files changed, 77 insertions, 17 deletions

diff --git a/src/pages/index.astro b/src/pages/index.astro
index d5b992d..410d036 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -56,6 +56,38 @@ import Base from "../layout/Base.astro";
         </p>
       </div>
     </section>
+    <section class="producteur">
+      <div class="blur">
+        <div class="content">
+          <div class="text">
+            <div>
+              <h2>Compositeur - Producteur</h2>
+              <h3>Artistes, médias, publicité, cinéma & audiovisuel</h3>
+            </div>
+            <div>
+              <p>
+                Mon travail s’articule principalement autour de la relation entre la section
+                rythmique et le lead. La mélodie et le rythme sont pour moi les deux aspects les
+                plus importants. L’habillage, le choix des arrangements et instruments, des textures
+                ainsi que la programmation et les traitements viennent ensuite.
+              </p>
+              <p>
+                C’est cette vision que j’apporte aux quotidien sur les projets que l’on me confie,
+                que ce soit pour des artistes, groupes, médias, agences et entreprises, éditeurs,
+                labels... pour leur single, Ep ou album, documentaire, jeu vidéo, film ou élément de
+                communication.
+              </p>
+            </div>
+            <div>
+              Visitez le site de mon studio&thinsp;: <a href="https://entreesortie.net/"
+                >Entrée Sortie Production</a
+              >.
+            </div>
+          </div>
+          <img src="/batteur/old2.jpg" />
+        </div>
+      </div>
+    </section>
   </main>
 </Base>
 
@@ -64,7 +96,7 @@ import Base from "../layout/Base.astro";
   document.addEventListener("scroll", () => {
     sections.forEach((section) => {
       const rect = section.getBoundingClientRect();
-      if (rect.top > window.scrollY || rect.bottom * 2 < window.scrollY) return;
+      if (rect.top > window.scrollY || rect.bottom * 2.5 < window.scrollY) return;
       const content = section.querySelector(".content");
       if (content == null || !(content instanceof HTMLElement))
         throw new Error(`Invalid section ${section}`);
diff --git a/src/pages/legal.astro b/src/pages/legal.astro
index b867f35..2b41b4a 100644
--- a/src/pages/legal.astro
+++ b/src/pages/legal.astro
@@ -17,21 +17,11 @@ import Base from "../layout/Base.astro";
         suivi&thinsp;:
       </p>
       <ul>
-        <li>
-          Nom commercial&thinsp;: ENTREE SORTIE PRODUCTION
-        </li>
-        <li>
-          Siret 497 786 772 00028 - RCS Évreux (27)
-        </li>
-        <li>
-          Capital 4 000 euros (€)
-        </li>
-        <li>
-          65 rue Pablo Picasso, 27140 Gisors, France
-        </li>
-        <li>
-          Créateur&thinsp;: ENTREE SORTIE PRODUCTION
-        </li>
+        <li>Nom commercial&thinsp;: ENTREE SORTIE PRODUCTION</li>
+        <li>Siret 497 786 772 00028 - RCS Évreux (27)</li>
+        <li>Capital 4 000 euros (€)</li>
+        <li>65 rue Pablo Picasso, 27140 Gisors, France</li>
+        <li>Créateur&thinsp;: ENTREE SORTIE PRODUCTION</li>
         <li>
           Directeur de la publication : Arnaud Hergès - <a href="mailto:contact@entreesortie.net"
             >contact@entreesortie.net</a
diff --git a/src/scss/style.scss b/src/scss/style.scss
index c4220af..e592e90 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -51,6 +51,9 @@ li {
 
 a {
   color: $text;
+  &:hover {
+    font-style: italic;
+  }
 }
 
 footer {
@@ -90,7 +93,7 @@ section {
   position: relative;
 }
 
-.content {
+section[data-scroll] .content {
   position: absolute;
   display: flex;
   flex-direction: column;
@@ -139,3 +142,38 @@ section {
     margin-bottom: 2rem;
   }
 }
+
+.producteur {
+  background-image: url("/home.jpg");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+
+  & .blur {
+    position: absolute;
+    backdrop-filter: blur(50px) brightness(0.8);
+    inset: 0;
+    display: flex;
+    justify-content: center;
+    height: 100%;
+  }
+  & .content {
+    padding: 4rem;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    align-items: center;
+    justify-items: center;
+    min-height: 75vh;
+    gap: 4rem;
+  }
+  & .text {
+    display: flex;
+    flex-direction: column;
+    gap: 4rem;
+    max-width: 800px;
+  }
+  & img {
+    box-shadow: 0 0 150px $background;
+  }
+}