update a lot of change since a while

2026-01-22 10:29:36 +01:00
parent a4dcb95d83
commit e1c1475f10
78 changed files with 4200 additions and 534 deletions
--- a/app/components/NewsletterCta.vue
+++ b/app/components/NewsletterCta.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="newslettercta">
+    <PageSection tone="brandreverse" :padded="false" content-size="default" padb="xs">
+      <SectionTitle as="h1" tone="invert" pad="xs">
+        NEWSLETTER
+      </SectionTitle>
+
+      <SectionContent pad="xs" class="newslettercta__content">
+        <div class="newslettercta__content_text">
+          <DsText as="p" tone="invert">
+            Recevez l'actualité des concerts de l'Orchestre national d'Île-de-France par infolettre !
+          </DsText>
+        </div>
+        <div class="newslettercta__button">
+          <DsButton
+            href="https://eb686efa.sibforms.com/serve/MUIFAP2a1WdNgM9e0cv4B5b_QwHC_QzCXtnwSoUEWllWVV1Kxq7vbzbRVWoIagXviq-jYQHuKv0-AN8cmEggeJnUds8C4VumwkC0dCTD0kQPVZ8nXWhXG5ABFo4EEys6OY-C_qQW4iUnWeq8cFA8X3dRaLj_q410BX_yvp6E8o5eOklPWsKkZnmXI1Qc31WqegQhTTkp_Z0Jhbg="
+            target="_blank"
+            rel="noopener noreferrer"
+            textColor="invert"
+            borderColor="invert"
+          >
+              Restez informé
+          </DsButton>
+        </div>
+
+      </SectionContent>
+    </PageSection>
+  </div>
+</template>
+
+<script setup>
+  import DsText from '@root/design-system/primitives/DsText.vue'
+  import DsButton from '@root/design-system/primitives/DsButton.vue'
+</script>
+
+<style lang="scss">
+
+  .newslettercta {
+    margin-bottom: 30px;
+  }
+
+  .newslettercta__content {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+
+    align-items: center;
+    row-gap: 15px;
+    column-gap: 15px;
+    padding-right: 10px;
+
+    .newslettercta__content_text {
+      grid-column: 1;
+    }
+    .newslettercta__button {
+      grid-column: 1;
+      justify-self: start;
+    }
+  }
+  @media (max-width: 300px) {
+      .newslettercta__content {
+          padding-left: calc(var(--section-title-pl, var(--sp-45)) - 20px);
+      }
+  }
+  @media (min-width: 500px) {
+    .newslettercta__content {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+      
+      .newslettercta__button {
+        grid-column: 2;
+      }
+    }
+  }
+</style>