create footer

assets/scss/static.scss

@@ -37,7 +37,6 @@ h2 {
   font-size: 38px;
 }
 
-// TODO: add button hover state
 .btn {
   border: 1px solid;
   border-radius: 0.85em;
@@ -227,7 +226,6 @@ section.testimonial-section {
     font-weight: 400;
   }
 
-  // TODO: turn this into a carousel
   .testimonial-cards {
     display: flex;
     gap: 1rem;
@@ -270,7 +268,6 @@ section.faq {
     margin-bottom: 3rem;
   }
 
-  // TODO: animate the accordion https://css-tricks.com/how-to-animate-the-details-element/
   .faq-list {
     border: 1px solid white;
     border-radius: 12px;
@@ -337,4 +334,95 @@ section.book-club-benefits {
       font-size: 16px;
     }
   }
+}
+
+footer.somos-infinitos-footer {
+  padding-inline: 114px;
+  padding-top: 73px;
+  margin-top: 200px;
+  padding-bottom: 150px;
+  background-image: url('/wp-content/themes/somos-infinitos-theme/assets/images/footer-bg.svg');
+  background-repeat: no-repeat;
+  background-position: right;
+  background-size: contain;
+
+  .footer-navigation {
+    margin-top: 75px;
+    margin-bottom: 120px;
+    ul.footer-navigation--links {
+      list-style-type: none; 
+      padding-inline-start: 0;
+      display: grid;
+      grid-template-columns: repeat(3, 144px);
+      li {
+        a {
+          font-size: 14px;
+          display: inline-block;
+          margin-bottom: 14px;
+          font-weight: 400;
+          text-transform: uppercase;
+          text-decoration: none;
+          &:hover { text-decoration: underline; }
+        }
+      }
+    }
+  }
+
+  .email-cta {
+    h3 {
+      font-family: var(--wp--preset--font-family--eb-garamond);
+      font-size: 32px;
+      font-weight: 400;
+      line-height: 1;
+    }
+
+    form {
+      display: flex;
+      gap: 16px;
+      margin-block: 16px;
+      input {
+        padding: 1em;
+        font-family: inherit;
+        width: 370px;
+        color: var(--foreground-text);
+        background: transparent;
+        border: 1px solid var(--foreground-text);
+        border-radius: 12px;
+        &::placeholder {
+          color: var(--foreground-text);
+        }
+      }
+
+      button.btn {
+        font-family: inherit;
+        background-color: transparent;
+        color: var(--foreground-text);
+        border: 1px solid;
+        cursor: pointer;
+        &:hover {
+          transform: none;
+        }
+      }
+    }
+
+    .external-social-links {
+      display: flex;
+      align-items: center;
+      gap: 40px;
+      margin-top: 24px;
+      a {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-decoration: none;
+        &:hover { text-decoration: none; }
+        img { 
+          height: 20px;
+          &.insta, &.youtube {
+            height: 24px;
+          }
+        }
+      }
+    }
+  }
 }