feat: add a textimage element, add news design, add a footer

packages/base/Resources/Public/Scss/components/_footer.scss

@@ -0,0 +1,81 @@
+.site-footer {
+  background: #f8f8ea;
+  color: #4b4b4b;
+  font-size: 0.9rem;
+  padding: 2rem 0;
+
+  &__top {
+    padding-bottom: 2rem;
+  }
+
+  &__grid {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+  }
+
+  &__left, &__right {
+    flex: 1 1 100%;
+  }
+
+  @media (min-width: 768px) {
+    &__grid {
+      flex-direction: row;
+      gap: 4rem;
+    }
+
+    &__left, &__right {
+      flex: 1;
+    }
+  }
+
+  &__divider {
+    border: none;
+    border-top: 1px solid #4b4b4b;
+    margin: 2rem 0;
+  }
+
+  &__bottom-grid {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: 1rem;
+  }
+
+  @media (min-width: 768px) {
+    &__bottom-grid {
+      flex-direction: row;
+      justify-content: space-between;
+      text-align: left;
+    }
+  }
+
+  &__legal {
+    list-style: none;
+    display: flex;
+    gap: 2rem;
+    padding: 0;
+    margin: 0;
+  }
+
+  &__copyright {
+    font-size: 0.9rem;
+  }
+}
+
+/* Social links styling based on href */
+a[href*="instagram.com"], a[href*="tiktok.com"], a[href*="linkedin.com"], a[href*="twitter.com"], a[href*="x.com"] {
+  display: inline-block;
+  text-decoration: none;
+  color: #4b4b4b;
+  transition: color 0.3s ease;
+}
+
+a[href*="instagram.com"]:hover,
+a[href*="tiktok.com"]:hover,
+a[href*="linkedin.com"]:hover,
+a[href*="twitter.com"]:hover,
+a[href*="x.com"]:hover {
+  color: #6B8E23;
+}

packages/base/Resources/Public/Scss/components/_news.scss

@@ -0,0 +1,144 @@
+.news-list-container {
+  margin: 2rem 0;
+}
+
+/* Mobile-first: single column by default */
+/* All items in a single column */
+.news-featured-wrapper,
+.news-side-items,
+.news-list-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1rem;
+}
+
+.news-item-featured,
+.news-item-side,
+.news-item-grid {
+  position: relative;
+  border-radius: 0.5rem;
+  overflow: hidden;
+}
+
+.news-item-featured-image,
+.news-item-side-image,
+.news-item-grid-image {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+.news-item-featured-content,
+.news-item-side-content,
+.news-item-grid-content {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 1rem;
+  background: #215A2A;
+  color: #fff;
+}
+
+.news-item-category {
+  font-size: 0.9rem;
+  opacity: 0.9;
+}
+
+.news-item-title {
+  font-size: 1.2rem;
+  font-weight: bold;
+  margin-top: 0.5rem;
+}
+
+.news-item-link {
+  position: absolute;
+  top: 0; left: 0; right: 0; bottom: 0;
+}
+
+.news-show-all {
+  margin-top: 2rem;
+  text-align: center;
+}
+
+.btn-show-all {
+  display: inline-block;
+  background: #6B8E23;
+  color: #fff;
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+  text-decoration: none;
+  font-weight: bold;
+}
+
+/* Adjust the title size for side and grid items */
+.news-item-side-content .news-item-title,
+.news-item-grid-content .news-item-title {
+  font-size: 1rem;
+}
+
+@media (min-width: 768px) and (max-width: 991px) {
+  /* On medium screens: switch to a 3-column grid for the first four items.
+     First four items are equal size and placed in a 3x grid. */
+  .news-featured-wrapper {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  /* For the first four items, we treat them all equally:
+     The first item (featured) plus next three (side items) fill a 3-column grid equally. */
+  .news-side-items {
+    display: contents; /* Merge side items into the same grid */
+  }
+
+  /* Additional items still in a 3-column grid */
+  .news-list-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (min-width: 992px) {
+  /* On wide screens: special layout:
+     - First item bigger: takes 2 columns and 3 rows
+     - Next 3 items stacked in one column (3 rows) to the right of the big one
+     
+     We'll create a 3-column grid for the first 4 items:
+     The first item (featured) will occupy the first two columns and span 3 rows.
+     The next 3 side items will each occupy the third column in their own row.
+  */
+
+  .news-featured-wrapper {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-rows: auto;
+    gap: 1rem;
+  }
+
+  /* The featured item (index 0) spans 2 columns and 3 rows */
+  .news-featured-item {
+    grid-column: 1 / span 2;
+    grid-row: 1 / span 3;
+  }
+
+  /* Side items should appear in the third column, one per row */
+  .news-side-items {
+    display: contents;
+  }
+
+  .news-side-items .news-item-side:nth-of-type(1) {
+    grid-column: 3;
+    grid-row: 1;
+  }
+  .news-side-items .news-item-side:nth-of-type(2) {
+    grid-column: 3;
+    grid-row: 2;
+  }
+  .news-side-items .news-item-side:nth-of-type(3) {
+    grid-column: 3;
+    grid-row: 3;
+  }
+
+  /* Additional items still in a 3-column grid below the first four */
+  .news-list-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}

packages/base/Resources/Public/Scss/main.scss

@@ -2,3 +2,6 @@
 @import 'abstracts/mixins';
 @import 'base/base';
 @import 'components/navigation';
+@import 'components/contentElements';
+@import 'components/news';
+@import 'components/footer';