feat: integrate Tailwind CSS and remove legacy styles

2025-04-19 20:49:35 +02:00
parent 700066b2b2
commit 6c9d8966b0
17 changed files with 1618 additions and 563 deletions
--- a/packages/base/ContentBlocks/ContentElements/hero/assets/frontend.css
+++ b/packages/base/ContentBlocks/ContentElements/hero/assets/frontend.css
@@ -1,167 +0,0 @@
-.frame-type-cloonar_hero {
-  position: relative;
-  z-index: 1;
-  /* Use a relative path to correctly load the image */
-  background: #cecece;
-  background-repeat: repeat;
-  background: url('../../../Images/background.jpg') repeat;
-}
-
-.frame-type-cloonar_hero + .frame {
-    margin-top: -10.4rem;
-}
-.frame-type-cloonar_hero .container {
-    padding-bottom: 3rem;
-}
-
-/* Inner container with white background and padding */
-.frame-type-cloonar_hero .hero-inner {
-  padding: 3rem 1rem;
-  max-width: 1140px;
-  margin: 0 auto;
-}
-
-.frame-type-cloonar_hero .hero {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-}
-
-.frame-type-cloonar_hero .hero-subheader {
-  font-size: 2rem;
-  color: var(--bs-primary);
-  margin-bottom: 0rem;
-  line-height: 1;
-}
-
-.frame-type-cloonar_hero .hero-title {
-  text-transform: uppercase;
-  font-size: 4rem;
-  color: var(--bs-primary);
-  line-height: 1;
-  margin-bottom: 2rem;
-}
-
-.frame-type-cloonar_hero h4 {
-    text-transform: uppercase;
-}
-
-.frame-type-cloonar_hero .hero-text {
-  font-size: 1rem;
-  color: #333;
-  line-height: 1.4;
-  margin-bottom: 1rem;
-  max-width: 45ch;
-}
-
-.frame-type-cloonar_hero .hero-social-icons {
-  display: flex;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
-}
-
-/* Smaller icons on mobile */
-.frame-type-cloonar_hero .social-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1rem;
-  padding: 1rem;
-  text-decoration: none;
-  border-radius: 50%;
-  transition: background 0.3s;
-}
-
-.frame-type-cloonar_hero .hero-image-wrapper {
-  margin-top: 1rem;
-  align-self: flex-end;
-  width: 100%;
-}
-
-.frame-type-cloonar_hero .hero-image {
-  width: 100%;
-  height: auto;
-  border-radius: 0.5rem;
-}
-
-.frame-type-cloonar_hero img {
-    width: 100%;
-}
-
-@media (min-width: 768px) {
-    .frame-type-cloonar_hero .container {
-        padding-bottom: 4rem;
-    }
-
-  .frame-type-cloonar_hero .hero-subheader {
-    font-size: 3rem;
-  }
-
-  .frame-type-cloonar_hero .hero-title {
-    font-size: 5rem;
-  }
-
-  .frame-type-cloonar_hero .hero-text {
-    font-size: 1rem;
-  }
-
-  .frame-type-cloonar_hero .social-icon {
-    width: 2.5rem;
-    height: 2rem;
-    font-size: 2rem;
-    padding: 2.375rem;
-  }
-
-  .frame-type-cloonar_hero .hero-image {
-  }
-}
-
-@media (min-width: 992px) {
-  .frame-type-cloonar_hero .hero {
-    display: grid;
-    grid-template-columns: 1fr 40% 7.125rem;
-    grid-template-rows: auto auto 1fr;
-    grid-template-areas:
-      "subheader    image social"
-      "title        image social"
-      "text         image social";
-    align-items: start;
-    justify-items: start;
-    text-align: left;
-  }
-
-  .frame-type-cloonar_hero .hero-subheader {
-    grid-area: subheader;
-  }
-
-  .frame-type-cloonar_hero .hero-title {
-    grid-area: title;
-  }
-
-  .frame-type-cloonar_hero .hero-text {
-    grid-area: text;
-    font-size: 1rem;
-    max-width: 40ch;
-    margin-bottom: 1.5rem;
-  }
-
-  .frame-type-cloonar_hero .hero-social-icons {
-    grid-area: social;
-    flex-direction: column;
-    gap: 1rem;
-    margin-bottom: 0;
-    align-items: flex-start;
-    align-self: center;
-  }
-
-  .frame-type-cloonar_hero .hero-image-wrapper {
-    grid-area: image;
-    margin-top: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .frame-type-cloonar_hero .hero-image {
-  }
-}