feat: implement layout main

src/app/components/header/header.ts

@@ -62,7 +62,7 @@ export class Header implements Observer {
     const spanBurger3 = new ElementCreator({ tag: 'span', classes: 'block w-8 h-0.5 bg-secondary-color' });
     burger.appendNode(spanBurger1, spanBurger2, spanBurger3);
 
-    const nav = new ElementCreator({ tag: 'nav', classes: 'w-full flex items-center justify-between mt-5 gap-8' });
+    const nav = new ElementCreator({ tag: 'nav', classes: 'w-full flex items-center justify-between mt-5 gap-4 lg:gap-8' });
     const logo = new ElementAnchorCreator({ href: '/', html: logotype });
     logo.setHandler('click', (e) => {
       e.preventDefault();
@@ -72,7 +72,7 @@ export class Header implements Observer {
     this.listOfLinks.push(logo.getElement());
     const mobileMenu = new ElementCreator({
       tag: 'div',
-      classes: 'mobile-menu md:w-full md:max-w-full max-w-[390px] hidden justify-between md:flex gap-8',
+      classes: 'mobile-menu md:w-full md:max-w-full max-w-[390px] hidden justify-between md:flex gap-4 lg:gap-8',
     });
     const bg = new ElementCreator({ tag: 'div', classes: 'bg hidden' });
     nav.appendNode(logo, mobileMenu, burger, bg);

src/app/components/main/main.ts

@@ -1,9 +1,33 @@
-import { ElementCreator } from '../../utils/element-creator/element-creator';
+import { Autoplay, Pagination } from 'swiper/modules';
+import Swiper from 'swiper';
+
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
+
+import ads1 from '../../../assets/img/advertisement/ads1.png';
+import ads2 from '../../../assets/img/advertisement/ads2.png';
+import ads3 from '../../../assets/img/advertisement/ads3.png';
+
+import summer from '../../../assets/img/categories/summer.png';
+import peak from '../../../assets/img/categories/peak.png';
+import ball from '../../../assets/img/categories/ball.png';
+import ice from '../../../assets/img/categories/ice.png';
+
 import { Router } from '../../router/router';
 import { Consumer } from '../consumer/consumer';
-import { getProductIdBySlug } from '../../utils/api/api-product';
 import { Message } from '../../utils/message/toastify-message';
+import { getProductIdBySlug } from '../../utils/api/api-product';
 import { getTreeOfCategories } from '../../utils/api/api-categories';
+import { ElementCreator } from '../../utils/element-creator/element-creator';
+import { ElementImageCreator } from '../../utils/element-creator/element-image-creator';
+import { ElementAnchorCreator } from '../../utils/element-creator/element-anchor-creator';
+
+const advertisement = [
+  { img: ads1, href: '/categories/water-sports-gear' },
+  { img: ads2, href: '/catalog' },
+  { img: ads3, href: '/categories/peak-climber' },
+];
 
 export class Main implements Observer {
   router: Router;
@@ -90,13 +114,128 @@ export class Main implements Observer {
     }
   }
 
+  initAdsSwiper(wrapper: HTMLElement): void {
+    const swiperContainer = new ElementCreator({ tag: 'div', classes: 'swiper w-full rounded-xl overflow-hidden' });
+    const swiperWrapper = new ElementCreator({ tag: 'div', classes: 'swiper-wrapper' });
+
+    advertisement.forEach((ads) => {
+      const imgWrapper = new ElementAnchorCreator({ href: ads.href, classes: 'swiper-slide' });
+      imgWrapper.setHandler('click', (e) => {
+        e.preventDefault();
+        window.history.pushState({}, '', imgWrapper.getElement().href);
+        this.router.handleLocation();
+      });
+      imgWrapper.appendNode(new ElementImageCreator({ src: ads.img, alt: '', classes: 'w-full rounded-xl overflow-hidden' }));
+      swiperWrapper.appendNode(imgWrapper);
+    });
+
+    const swiperPagination = new ElementCreator({ tag: 'div', classes: 'swiper-pagination' });
+    swiperContainer.appendNode(swiperWrapper, swiperPagination.getElement());
+    wrapper.append(swiperContainer.getElement());
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const swiper = new Swiper('.swiper', {
+      modules: [Pagination, Autoplay],
+      slidesPerView: 1,
+      centerInsufficientSlides: true,
+      spaceBetween: 10,
+      direction: 'horizontal',
+      loop: true,
+      pagination: { el: '.swiper-pagination', clickable: true },
+      autoplay: {
+        delay: 5000,
+        disableOnInteraction: true,
+      },
+    });
+  }
+
   showMain(): void {
-    const mainMessage = new ElementCreator({
+    this.initAdsSwiper(this.mainView);
+    const links = [];
+    const categories = new ElementCreator({ tag: 'div', classes: 'bg-[#F1EFEF] rounded-xl w-full p-4 md:p-6 mt-6' });
+
+    const categoriesTitleContainer = new ElementCreator({ tag: 'div', classes: 'text-center my-4 sm:text-start' });
+    const categoriesSubtitle = new ElementCreator({ tag: 'h5', classes: 'h5 opacity-60', text: 'find something you enjoy' });
+    const categoriesTitle = new ElementCreator({ tag: 'h2', classes: '', text: 'Categories' });
+    categoriesTitleContainer.appendNode(categoriesSubtitle, categoriesTitle);
+
+    const categoriesContainer = new ElementCreator({
+      tag: 'div',
+      classes: 'grid grid-rows-2 grid-cols-2 gap-2 md:gap-4 lg:gap-6',
+    });
+
+    const summerTime = new ElementAnchorCreator({
+      href: '/categories/summer-time',
+      classes:
+        'bg-primary-color p-6 md:p-0 rounded-xl flex hover:drop-shadow-[3px_5px_5px_rgba(219,76,67,0.40)] hover:scale-[1.01] transition-all',
+    });
+    const summerTimeImage = new ElementCreator({ tag: 'div', classes: 'self-end hidden md:block' });
+    summerTimeImage.appendNode(new ElementImageCreator({ src: summer, alt: '' }));
+    const summerTitle = new ElementCreator({
+      tag: 'div',
+      classes: 'self-center open-sans font-semibold w-full text-center text-[3vw] text-white',
+      text: 'Summer time',
+    });
+    summerTime.appendNode(summerTimeImage, summerTitle);
+    links.push(summerTime);
+
+    const peakClimber = new ElementAnchorCreator({
+      href: '/categories/peak-climber',
+      classes:
+        'bg-[#FFBA5A] p-6 md:p-0 rounded-xl flex hover:drop-shadow-[3px_5px_5px_rgba(226,164,78,0.40)] hover:scale-[1.01] transition-all',
+    });
+    const peakClimberImage = new ElementCreator({ tag: 'div', classes: 'hidden md:block' });
+    peakClimberImage.appendNode(new ElementImageCreator({ src: peak, alt: '', classes: 'h-full' }));
+    const peakClimberTitle = new ElementCreator({
       tag: 'div',
-      classes: 'text-[#DFDDDF] text-8xl sd:text-[265px] mg:text-[350px] font-bold drop-shadow-[5px_4px_0px_rgba(57,62,77,0.18)]',
-      text: 'Main page',
+      classes: 'self-center open-sans font-semibold w-full text-center text-[3vw] text-white',
+      text: 'Peak climber',
     });
-    this.mainView.append(mainMessage.getElement());
+    peakClimber.appendNode(peakClimberTitle, peakClimberImage);
+    links.push(peakClimber);
+
+    const ballGames = new ElementAnchorCreator({
+      href: '/categories/ball-games',
+      classes:
+        'bg-[#4C7EC9] p-6 md:p-0 rounded-xl flex hover:drop-shadow-[3px_5px_5px_rgba(76,126,201,0.40)] hover:scale-[1.01] transition-all',
+    });
+    const ballGamesImage = new ElementCreator({ tag: 'div', classes: 'self-end hidden md:block' });
+    ballGamesImage.appendNode(new ElementImageCreator({ src: ball, alt: '' }));
+    const ballGamesTitle = new ElementCreator({
+      tag: 'div',
+      classes: 'self-center open-sans font-semibold w-full text-center text-[3vw] text-white',
+      text: 'Ball games',
+    });
+    ballGames.appendNode(ballGamesTitle, ballGamesImage);
+    links.push(ballGames);
+
+    const iceAdventures = new ElementAnchorCreator({
+      href: '/categories/ice-adventures',
+      classes:
+        'bg-[#3D93A3] p-6 md:p-0 rounded-xl flex hover:drop-shadow-[3px_5px_5px_rgba(61,147,163,0.40)] hover:scale-[1.01] transition-all',
+    });
+    const iceAdventuresImage = new ElementCreator({ tag: 'div', classes: 'self-end hidden md:block' });
+    iceAdventuresImage.appendNode(new ElementImageCreator({ src: ice, alt: '' }));
+    const iceAdventuresTitle = new ElementCreator({
+      tag: 'div',
+      classes: 'self-center open-sans font-semibold w-full text-center text-[3vw] text-white',
+      text: 'Ice adventures',
+    });
+    iceAdventures.appendNode(iceAdventuresImage, iceAdventuresTitle);
+    links.push(iceAdventures);
+
+    categoriesContainer.appendNode(summerTime, peakClimber, ballGames, iceAdventures);
+    categories.appendNode(categoriesTitleContainer, categoriesContainer);
+
+    links.forEach((link) => {
+      link.setHandler('click', (e) => {
+        e.preventDefault();
+        window.history.pushState({}, '', link.getElement().href);
+        this.router.handleLocation();
+      });
+    });
+
+    this.mainView.append(categories.getElement());
   }
 
   async showContact(): Promise<void> {

src/app/components/modal/product-modal.css

@@ -1,8 +1,3 @@
-.swiper-button-prev-modal,
-.swiper-button-next-modal {
-  --swiper-navigation-color: var(--main-color);
-}
-
 .swiper-slide-modal {
   display: flex;
   align-items: center;

src/app/components/product/product.css

@@ -13,5 +13,4 @@
 
 .swiper-pagination {
   --swiper-pagination-right: -32px;
-  --swiper-pagination-color: var(--main-color);
 }

src/app/components/profile/tab.ts

@@ -20,7 +20,7 @@ export abstract class AccordionTab {
   constructor(consumer: Consumer, svg: string, heading: string) {
     this.consumer = consumer;
     this.tab = new ElementCreator({ tag: 'div', classes: 'tab w-full p-4 md:p-6 bg-white rounded-xl' });
-    this.contentField = new ElementCreator({ tag: 'div', classes: 'content mx-2 sm:mx-4 md:mx-8 mt-2 hidden' });
+    this.contentField = new ElementCreator({ tag: 'div', classes: 'content mx-2 sm:mx-4 md:mx-2 mt-2 hidden' });
     this.editButton = new ElementButtonCreator({ classes: 'primary-button mt-3 py-1', text: 'edit' }).getElement();
     this.saveButton = new ElementButtonCreator({ disabled: true, classes: 'primary-button py-1', text: 'save' }).getElement();
     this.cancelButton = new ElementButtonCreator({ classes: 'secondary-button py-1', text: 'cancel' }).getElement();

src/app/components/profile/tabs/address-tab.ts

@@ -209,7 +209,7 @@ export class AddressTab extends AccordionTab {
     const wrapper = new ElementCreator({ tag: 'div', classes: 'flex flex-col gap-4' });
     const inputsContainer = new ElementCreator({
       tag: 'div',
-      classes: 'flex flex-col justify-between gap-4 md:flex-row md:flex-nowrap',
+      classes: 'flex flex-col justify-between gap-4 lg:flex-row lg:flex-nowrap',
     });
 
     const checkboxContainer = new ElementCreator({ tag: 'div', classes: 'flex gap-2 text-sm' });

src/app/components/profile/tabs/password-tab.ts

@@ -28,7 +28,7 @@ export class PasswordTab extends AccordionTab {
   createEdit(): HTMLElement {
     this.resetInputs();
 
-    const container = new ElementCreator({ tag: 'div', classes: 'flex flex-col sm:flex-row gap-4' });
+    const container = new ElementCreator({ tag: 'div', classes: 'flex flex-col md:flex-row gap-4' });
     container.appendNode(this.currentInputContainer.getContainer(), this.newInputContainer.getContainer());
     return container.getElement();
   }

src/app/components/profile/tabs/personal-tab.ts

@@ -60,7 +60,7 @@ export class PersonalTab extends AccordionTab {
 
     const inputsContainer = new ElementCreator({
       tag: 'div',
-      classes: 'flex flex-col justify-between gap-2 md:flex-row md:flex-nowrap md:gap-4',
+      classes: 'flex flex-col justify-between lg:flex-row md:flex-nowrap gap-4',
     });
 
     this.nameInputContainer.addLabel('name');

src/app/types/png.d.ts

@@ -0,0 +1 @@
+declare module '*.png';

src/styles/styles.css

@@ -19,3 +19,7 @@ input[type="checkbox"]:not(:disabled) + label {
 label {
   user-select: none;
 }
+
+.swiper-pagination {
+  --swiper-pagination-color: var(--main-color);
+}

src/styles/tailwind.css

@@ -41,6 +41,10 @@
     @apply text-lg md:text-xl font-normal;
   }
 
+  .open-sans {
+    font-family: var(--secondary-font-family);
+  }
+
   .link {
     font-family: var(--secondary-font-family);
     @apply text-lg font-medium text-primary-color hover:underline;