Feat/62386070 showcase page

src/_data/cases.json

@@ -0,0 +1,50 @@
+[
+    {
+      "title": "John Smith",
+      "images": ["/assets/img/imagesCases/Emily_Blunt-new.jpg", "/assets/img/сases/Koshak_Koteevich.jpg"],
+      "description": "Все, что человеческий разум способен понять и во что он способен поверить, достижимо.",
+      "link": "/"
+    },
+    {
+      "title": "Emily Blunt",
+      "images": ["/assets/img/imagesCases/John_Smith-new.jpg", "/assets/img/сases/Emily_Blunt-new.jpg", "/assets/img/imagesCases/Koshak_Koteevich.jpg"],
+      "description": "Сложнее всего начать действовать, все остальное зависит только от упорства.",
+      "link": "/"
+    },
+    {
+      "title": "Koshak Koteevich",
+      "images": ["/assets/img/imagesCases/Tigra_Leopardovich.jpg", "/assets/img/сases/Emily_Blunt-new.jpg", "/assets/img/imagesCases/Koshak_Koteevich.jpg"],
+      "description": "Неудача — это возможность начать заново, но уже более мудро.",
+      "link": "/"
+    },
+    {
+      "title": "Luna Lovegood",
+      "images": ["/assets/img/imagesCases/orange-wood-table.jpg", "/assets/img/сases/Koshak_Koteevich.jpg"],
+      "description": "Если проблему можно решить, не стоит о ней беспокоиться.",
+      "link": "/"
+    },
+    {
+      "title": "Milana Clark",
+      "images": ["/assets/img/imagesCases/Panda_Padlovna.jpg", "/assets/img/сases/orange-wood-table.jpg", "/assets/img/imagesCases/Emily_Blunt-new.jpg", "/assets/img/imagesCases/Koshak_Koteevich.jpg"],
+      "description": "Обстоятельства часто можно изменить, изменив свое отношение к ним.",
+      "link": "/"
+    },
+    {
+      "title": "Leopardovskiy Orange Apelsinovich",
+      "images": ["/assets/img/imagesCases/Koshak_Koteevich.jpg", "/assets/img/сases/Emily_Blunt-new.jpg"],
+      "description": "Обстоятельства часто можно изменить, изменив свое отношение к ним.",
+      "link": "/"
+    },
+    {
+      "title": "Panda Padlovna",
+      "images": ["/assets/img/imagesCases/Milana_Clark-new.jpg", "/assets/img/сases/Koshak_Koteevich.jpg"],
+      "description": "Вдохновение приходит только во время работы. Обстоятельства часто можно изменить, изменив свое отношение к ним.",
+      "link": "/"
+    },
+    {
+      "title": "Tigra Leopardovich",
+      "images": ["/assets/img/imagesCases/Luna_Lovegood-new.jpg", "/assets/img/сases/Emily_Blunt-new.jpg", "/assets/img/imagesCases/Koshak_Koteevich.jpg", "/assets/img/imagesCases/Panda_Padlovna.jpg"],
+      "description": "Если проблему можно решить, не стоит о ней беспокоиться.",
+      "link": "/"
+    }
+]

src/_data/navLinks.json

@@ -14,5 +14,9 @@
 	{
 		"link":"https://play.mlut.style/",
 		"text":"Sandbox"
+	},
+	{
+		"link":"/showcase",
+		"text":"Showcase"
 	}
 ]

src/_includes/components/show-card-swiper.ejs

@@ -0,0 +1,45 @@
+<%
+  const item = it.item;
+  const images = item.images && Array.isArray(item.images) ? item.images : [];
+%>
+
+<li>
+  <a class="Txd-n C-ih -Sz100p D-f Fld-c -Bdy -Bdyc-$accent750 -Bdyc-$brand_h Ts-bd,0.3s,e Cs" href="<%= item.link %>">
+    <slider-component>
+      <div class="P2.5u">
+        <div class="swiper">
+          <div class="swiper-wrapper">
+            <% if (images.length) { %>
+              <% images.forEach(img => { %>
+                <div class="swiper-slide">
+                  <div class="W100p H244">
+                    <img src="<%= img %>" alt="<%= item.title %>" class="-Sz100p Ojf-cv Ojp-c Bdrd8">
+                  </div>
+                </div>
+              <% }); %>
+            <% } else { %>
+              <div class="swiper-slide">Sorry, but there are no images</div>
+            <% } %>
+          </div>
+          <div class="swiper-pagination"></div>
+          <div class="D-f Jc-sb -Sz100p Ps-a T0 Zi1 O0 O1_h -Ts md_O0_h">
+            <button class="prev P1u Bg-n Bd-n Bdrd8">
+              <svg class="Fi-$gray200 Fi-$brand_a -Ts Tf -Rt180d Cs" width="26" height="26">
+                <use href="/assets/img/icons.svg#arrow-swiper"></use>
+              </svg>
+            </button>
+            <button class="next P1u Bg-n Bd-n Bdrd8">
+              <svg class="Fi-$gray200 Fi-$brand_a -Ts Cs" width="26" height="26">
+                <use href="/assets/img/icons.svg#arrow-swiper"></use>
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </slider-component>
+    <div class="D-f Fld-c P2.5u Bdt1;s;$accent750">
+      <span class="Mb3u Fns4u"><%= item.title ?? '' %></span>
+      <span class="Fns3u C-$gray350"><%= item.description ?? '' %></span>
+    </div>
+  </a>
+</li>

src/assets/script/swiper.js

@@ -0,0 +1,59 @@
+import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.mjs';
+
+const swiperCss = "https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css";
+if (!document.querySelector(`link[href*="swiper-bundle.min.css"]`)) {
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = swiperCss;
+  document.head.appendChild(link);
+}
+
+class SliderComponent extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    const swiperContainer = this.querySelector('.swiper');
+    if (!swiperContainer) return;
+
+    this.swiper = new Swiper(swiperContainer, {
+      pagination: {
+        el: this.querySelector('.swiper-pagination'),
+        clickable: false,
+        dynamicBullets: true
+      },
+      navigation: {
+        nextEl: '.next',
+        prevEl: '.prev'
+      },
+      loop: true,
+      speed: 300,
+      effect: 'fade',
+      fadeEffect: { crossFade: true },
+      simulateTouch: false,
+      allowTouchMove: true,
+      autoplay: false,
+      grabCursor: false
+    });
+
+    const totalSlides = this.querySelectorAll('.swiper-slide').length;
+    if (totalSlides <= 1) return;
+
+    swiperContainer.addEventListener('mousemove', (e) => {
+      const rect = swiperContainer.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const percentage = x / rect.width;
+      let slideIndex = Math.floor(percentage * totalSlides);
+      if (slideIndex >= totalSlides) slideIndex = totalSlides - 1;
+      if (slideIndex < 0) slideIndex = 0;
+      this.swiper.slideTo(slideIndex, 300, false);
+    });
+
+    swiperContainer.addEventListener('mouseleave', () => {
+      this.swiper.slideTo(0, 800, false);
+    });
+  }
+}
+
+customElements.define('slider-component', SliderComponent);

src/assets/style/style.scss

@@ -41,6 +41,8 @@ html{
 	--ml-blueGray:rgb(236, 240, 246,0.5);
 	--ml-gray200:#d1d5db;
 	--ml-gray350:#cacacaa0;
+	// showcase
+	--ml-bleedWidth: calc(100% + 280px);
 }
 
 
@@ -157,5 +159,4 @@ html{
 
 	}
 
-}
-
+}

src/layouts/base.ejs

@@ -17,7 +17,7 @@ if (it.area === "main"){
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="/assets/style/style.min.css">
-	<link rel="icon" href="/assets/img/favicon.png" type="image/x-icon">
+	<link rel="icon" type="image/x-icon" href="/assets/img/favicon.png">
 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github-dark.min.css">
   <title>mlut - make CSS exciting again!</title>
 </head>

src/showcase.ejs

@@ -0,0 +1,28 @@
+---
+title: Showcase
+layout: base.ejs
+---
+
+<%
+  const bdX = "-Bdx -Bdxc-$accent750";
+  const bdY = "-Bdy -Bdyc-$accent750";
+%>
+
+<div class="P-$headerH;5;0 D-f C-$accent900 md_P-$headerH;100;0">
+  <div class="D-n W8u <%= bdX %> md_D-f"></div>
+      <div class="Pb40 W100p">
+        <div class="M40;0;60 P0;20 W100p <%= bdY %> md_W-$bleedWidth md_M40;-140;80 md_P0;160">
+          <h1 class="Txa-c M10;0">Showcase</h1>
+        </div>
+        <div class="D-n H8u W-$bleedWidth Ml-140 <%= bdY %> md_D-f"></div>
+          <ul class="Lss-n P0 M8u;5u D-g Gtc-t1 Gap8u sm_Gtc-t2 xl_Gtc-t3 xxl_Gtc-t4">
+            <% for (let elem of it.cases) { %>
+              <%- include('_includes/components/show-card-swiper.ejs', { item: elem }) %>
+            <% } %>
+          </ul>
+        <div class="D-n H8u W-$bleedWidth Ml-140 <%= bdY %> md_D-f"></div>
+      </div>
+  <div class="D-n W8u <%= bdX %> md_D-f"></div>
+</div>
+
+<script src="/assets/script/swiper.js" type="module"></script>