finished 9 modules (#14)

Co-authored-by: jmiras <[email protected]>

assets/theme/controllers/CarouselController.ts

@@ -0,0 +1,46 @@
+import {Controller} from "@hotwired/stimulus";
+import * as $ from 'jquery';
+
+export default class extends Controller {
+    static targets = ["track", "slide", "navButton"];
+
+    connect() {
+        this.currentIndex = 0;
+        this.updateNavButtons(); // Ensure updateNavButtons is called when the controller connects
+    }
+
+    updateNavButtons() {
+        this.navButtonTargets.forEach((button, index) => {
+            button.classList.toggle("active", index === this.currentIndex);
+        });
+    }
+
+    moveToSlide(index) {
+        this.currentIndex = index;
+        const slideWidth = this.slideTargets[0].offsetWidth;
+        this.trackTarget.style.transform = `translateX(-${slideWidth * index}px)`;
+        this.updateNavButtons(); // Call updateNavButtons to update navigation buttons
+    }
+
+    right() {
+        console.log('right cliekd')
+        if (this.currentIndex < this.slideTargets.length - 1) {
+            this.moveToSlide(this.currentIndex + 1);
+        } else {
+            this.moveToSlide(0); // Move to the first slide if currently on the last slide
+        }
+    }
+
+    left() {
+        if (this.currentIndex > 0) {
+            this.moveToSlide(this.currentIndex - 1);
+        } else {
+            this.moveToSlide(this.slideTargets.length - 1); // Move to the last slide if currently on the first slide
+        }
+    }
+
+    goTo(event) {
+        const index = this.navButtonTargets.indexOf(event.currentTarget);
+        this.moveToSlide(index);
+    }
+}

assets/theme/styles/blocks/_index.scss

@@ -1,8 +1,16 @@
-@import 'text';
-@import 'about';
-@import 'comments';
+@import 'advanced-text';
+@import 'card';
+@import 'content_flex';
 @import 'form';
 @import 'gallery';
 @import 'hero';
+@import 'nag-screen';
 @import 'navigation';
-@import 'team';
+@import 'quote';
+@import 'team';
+@import 'teaser-swiper';
+@import 'text';
+
+
+
+

assets/theme/styles/blocks/advanced-text.scss

@@ -0,0 +1,176 @@
+// ADVANCED-TEXT CSS
+.advance-text-block{
+  margin: 90px 0 50px;
+}
+.advanced-text-grid{
+  max-width: 1390px;
+  display: grid;grid-template-columns: repeat(6, 1fr);grid-gap: 51px;
+  margin: 0 auto;
+}
+.advanced-text-container{
+  display: flex;flex-direction: column;
+  grid-column: 2 /span 4;
+}
+.advanced-text-overline{
+  color: #000;
+  font-family: "Open Sans";
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 19px; /* 126.667% */
+  letter-spacing: 0.375px;
+  text-transform: uppercase;
+}
+.advanced-text-caps-headline{
+  margin-top: 5px;
+  color: #171717;
+  font-family: "Open Sans";
+  font-size: 50px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 64px; /* 128% */
+  text-transform: uppercase;
+}
+.advanced-text-copy{
+  margin-top: 20px;
+  color: #000;
+  font-family: "Open Sans";
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 26px; /* 144.444% */
+  letter-spacing: 0.18px;
+}
+.advanced-text-ctaTitle{
+  display: flex;
+  padding: 15px 30px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  color: #171717;
+  font-family: "Open Sans";
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 19px; /* 105.556% */
+  letter-spacing: 0.45px;
+  text-transform: uppercase;
+  border-radius: 40px;
+  border: 2px solid #000;
+}
+
+//ADVANCE-TEXT-BIG
+.advanced-text-text-big {
+  display: flex;
+  flex-direction: column;
+  grid-column: 2 /span 4;
+}
+.advanced-text-big-overline{
+  color: #000;
+  font-family: "Open Sans";
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 19px; /* 126.667% */
+  letter-spacing: 0.375px;
+  text-transform: uppercase;
+}
+.advanced-text-big-headline{
+  margin-top: 5px;
+  color: #171717;
+  font-family: "Open Sans";
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 32px; /* 133.333% */
+  text-transform: uppercase;
+}
+.advanced-text-big-copy{
+  margin-top: 20px;
+  color: #171717;
+  font-family: "Open Sans";
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 32px; /* 133.333% */
+}
+//ADVANCED-TEXT-ONE-COLUMN
+.advanced-text-one-column{
+  grid-column: 1 /span 4;
+}
+.advanced-text{
+  display: flex;
+  flex-direction: column;
+  grid-column: 1 /span 3;
+}
+.advanced-text-overline{
+  color: #000;
+  font-family: "Open Sans";
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 19px; /* 126.667% */
+  letter-spacing: 0.375px;
+  text-transform: uppercase;
+}
+.advanced-text-headline{
+  margin-top: 5px;
+  color: #171717;
+
+  /* Headline */
+  font-family: "Open Sans";
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 32px; /* 133.333% */
+  text-transform: uppercase;
+}
+.advanced-text-copy{
+  margin-top: 15px;
+  color: #000;
+  font-family: "Open Sans";
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 26px; /* 144.444% */
+  letter-spacing: 0.18px;
+}
+//ADVANCED-TEXT-TWO-COLUMN-WIDE
+.advanced-text-two-column-wide{
+  display: flex;
+  flex-direction: column;
+  grid-column: 2 /span 4;
+}
+//ADVANCED-TEXT-TWO-COLUMN
+.advanced-text-two-column{
+  display: flex;
+  flex-direction: column;
+  grid-column: 1 /span 3;
+}
+.column{
+  margin-top: 52px;
+  grid-column: 4 / span 3;
+}
+.two-button{
+  display: flex;justify-content: flex-end;align-items: end;
+}
+.two-column-button{
+  margin-top: 30px;
+  display: flex;
+  padding: 15px 30px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 40px;
+  border: 2px solid #000;
+  width: 280px;height: 51px;
+  color: #171717;
+  font-family: "Open Sans";
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 19px; /* 105.556% */
+  letter-spacing: 0.45px;
+  text-transform: uppercase;
+  grid-column: span 3;
+}