@orangesk/cms-templates 1.0.0-beta.32 → 1.0.0-beta.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (81) hide show
  1. package/README.md +26 -0
  2. package/build/assets/married-couple.png +0 -0
  3. package/build/changelog/index.html +157 -2
  4. package/build/components/ContactFormB2B/index.html +1 -1
  5. package/build/images/card-device-example.png +0 -0
  6. package/build/index.html +3 -3
  7. package/build/lib/base.css +1 -1
  8. package/build/lib/base.css.map +1 -1
  9. package/build/lib/components.css +1 -1
  10. package/build/lib/components.css.map +1 -1
  11. package/build/lib/footer.css +1 -1
  12. package/build/lib/footer.css.map +1 -1
  13. package/build/lib/footer.js +1 -1
  14. package/build/lib/footer.js.map +1 -1
  15. package/build/lib/megamenu.css +1 -1
  16. package/build/lib/megamenu.css.map +1 -1
  17. package/build/lib/megamenu.js +1 -1
  18. package/build/lib/megamenu.js.map +1 -1
  19. package/build/lib/scripts.js +1 -1
  20. package/build/lib/scripts.js.map +1 -1
  21. package/build/lib/style.css +1 -1
  22. package/build/lib/style.css.map +1 -1
  23. package/build/lib/utilities.css +1 -1
  24. package/build/lib/utilities.css.map +1 -1
  25. package/build/pages/basic-page-about-the-brand/index.html +1 -1
  26. package/build/pages/basic-page-gdpr/index.html +1 -1
  27. package/build/pages/blog-homepage-clovek/index.html +1 -1
  28. package/build/pages/blog-news-clovek/index.html +1 -1
  29. package/build/pages/blog-post-clovek/index.html +1 -1
  30. package/build/pages/business-trends-homepage/index.html +1 -1
  31. package/build/pages/business-trends-news/index.html +1 -1
  32. package/build/pages/business-trends-post/index.html +1 -1
  33. package/build/pages/career-at-orange/index.html +1 -1
  34. package/build/pages/components/basic/index.html +49 -0
  35. package/build/pages/components/benefit-section/index.html +67 -0
  36. package/build/pages/components/cards-section/index.html +60 -0
  37. package/build/pages/components/hero/index.html +57 -0
  38. package/build/pages/components/process-section/index.html +56 -0
  39. package/build/pages/components/promo-banner/index.html +76 -0
  40. package/build/pages/components/tiles-section/index.html +58 -0
  41. package/build/pages/device-lp-b2b/index.html +1 -1
  42. package/build/pages/device-lp-b2c/index.html +1 -1
  43. package/build/pages/device-lp-dvojicky-b2b/index.html +1 -1
  44. package/build/pages/device-lp-dvojicky-b2c/index.html +1 -1
  45. package/build/pages/digital-invoice/index.html +1 -1
  46. package/build/pages/help-and-support-b2b/index.html +1 -1
  47. package/build/pages/help-and-support-b2c/index.html +1 -1
  48. package/build/pages/homepage-b2b/index.html +1 -1
  49. package/build/pages/homepage-b2c/index.html +1 -1
  50. package/build/pages/increased-invoice/index.html +2 -2
  51. package/build/pages/invoices-and-payments/index.html +1 -1
  52. package/build/pages/job-offer-detail/index.html +1 -1
  53. package/build/pages/manuals-and-settings/index.html +1 -1
  54. package/build/pages/manuals-and-settings-general-template/index.html +1 -1
  55. package/build/pages/navody-a-nastavenia-apple-ios-16/index.html +1 -1
  56. package/build/pages/orange-tv-box/index.html +1 -1
  57. package/build/pages/press-and-news-releases/index.html +1 -1
  58. package/build/pages/press-and-news-releases-post/index.html +1 -1
  59. package/build/pages/press-center-docs-library/index.html +1 -1
  60. package/build/pages/press-center-general-terms/index.html +1 -1
  61. package/build/pages/press-center-informations-for-customers/index.html +1 -1
  62. package/build/pages/pricelist/index.html +1 -1
  63. package/build/pages/pricelist-tariff/index.html +1 -1
  64. package/build/pages/product-page-b2b-market-locator/index.html +1 -1
  65. package/build/pages/product-page-b2b-microsoft-365/index.html +1 -1
  66. package/build/pages/product-page-b2b-soc-as-a-service/index.html +1 -1
  67. package/build/pages/product-page-b2c-equipment-insurance/index.html +3 -3
  68. package/build/pages/product-page-b2c-online-security/index.html +1 -1
  69. package/build/pages/product-page-b2c-prima-volba/index.html +1 -1
  70. package/build/pages/roaming-b2b/index.html +2 -2
  71. package/build/pages/roaming-b2c/index.html +2 -2
  72. package/build/pages/roaming-b2c-detail/index.html +1 -1
  73. package/build/pages/roaming-b2c-overview/index.html +1 -1
  74. package/build/pages/signpost-insurance/index.html +1 -1
  75. package/build/pages/signpost-products-and-services/index.html +1 -1
  76. package/build/pages/tv-first-aid/index.html +1 -1
  77. package/build/pages/work-on-central/index.html +2 -2
  78. package/build/readme/index.html +22 -1
  79. package/build/shame.css +9 -3
  80. package/build/sprite.svg +1 -1
  81. package/package.json +7 -7
package/build/pages/components/promo-banner/index.html ADDED
@@ -0,0 +1,76 @@
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="sk">
4
+ <head>
5
+ <meta charset="UTF-8" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <meta name="author" content="Lighting Beetle s.r.o." />
8
+ <link rel="shortcut icon" href="/assets/favicon.ico" />
9
+ <link rel="stylesheet" href="/lib/style.css" />
10
+ <link rel="stylesheet" href="/lib/megamenu.css" />
11
+ <link rel="stylesheet" href="/lib/footer.css" />
12
+ <link rel="stylesheet" href="/lib/fonts.css" />
13
+ <link rel="stylesheet" href="/shame.css" />
14
+ <title>Page</title>
15
+ </head>
16
+ <body>
17
+ <div id="root">
18
+ <main>
19
+ <link rel="preload" as="image" href="/assets/soc-ako-sluzba.png"/><link rel="preload" as="image" href="/assets/apple-phone@tablet.png"/><link rel="preload" as="image" href="/assets/roaming-prima-karta.png"/><link rel="preload" as="image" href="https://placehold.co/420x572"/><link rel="preload" as="image" href="/assets/three-phones.png"/><link rel="preload" as="image" href="https://picsum.photos/seed/3/400/300"/><link rel="preload" as="image" href="/assets/6-mesiacov-zadarmo.png"/><link rel="preload" as="image" href="/assets/iPad_grey.png"/><link rel="preload" as="image" href="/assets/microsoft-copilot-logo-small-v2.png"/><div id="MDX_ROOT_71e2ef85-8d14-4282-a241-16b2bc07f7ca"><h1>Promo banner V2</h1>
20
+ <div class="section"><div class="container"><div class="promo-banner is-light"><div class="grid grid-column-gap--large"><div class="grid__col grid__col--12 grid__col--md-7 promo-banner__item"><h2 class="h1 mb-medium"> Chcete skúsiť nezávislosť?<span class="text-accent ml-small">Prima Voľba</span></h2><p class="mb-large"> Vyskúšajte si, aké je to byť v najlepšej mobilnej sieti na Slovensku vďaka karte Prima Voľba.</p><button type="button" class="btn btn--large btn--fill mb-none"> Mám záujem</button></div></div></div></div></div>
21
+ <br/>
22
+ <h1>Promo banner V3</h1>
23
+ <div class="section section--default" data-ods-id="product-page-b2b-soc-as-a-service__section-01"><div class="container"><div class="promo-banner promo-banner--flush-top-sm-down promo-banner--flush-bottom-sm-down"><div class="grid grid-column-gap--large"><div class="grid__col grid__col--12 grid__col--md-6 promo-banner__item"><h1 class="display-3">SOC ako služba</h1><p class="text-secondary"> Naše Security Operations Center nepretržite monitoruje, odhaľuje a rieši kybernetické hrozby, aby vaša spoločnosť zostala v bezpečí a mohla sa naplno venovať svojmu rastu.</p><div class="buttons mb-none"><button type="button" class="btn btn--large btn--primary"> Mám záujem</button><button type="button" class="btn btn--large">Kontaktovať odborníka</button></div></div><div class="grid__col grid__col--12 grid__col--md-6 promo-banner__image show-md"><img class="img mb-none" src="/assets/soc-ako-sluzba.png" alt="Obrázok"/></div></div></div></div></div>
24
+ <br/>
25
+ <h1>Promo banner V5</h1>
26
+ <div class="section section--default" data-ods-id="homepage-b2c__section-03"><div class="container"><div class="promo-banner surface-subtle promo-banner--vertical"><div class="grid grid-column-gap--large"><div class="grid__col grid__col--12 grid__col--sm-10 grid__col--md-8 grid__col--lg-6 promo-banner__item align-items-center align-center align-self-center"><h2 class="display-3 mb-medium"> Dobré čítanie <br/> pre ľudí, od ľudí</h2><p class="mb-large">Spájame vás s tým, na čom skutočne záleží</p><a href="/" class="btn btn--large btn--primary mb-none"> Chcem vedieť viac</a></div><div class="grid__col grid__col--12 promo-banner__image align-center"><img class="img mb-none" src="/assets/apple-phone@tablet.png" alt="Obrázok"/></div></div></div></div></div>
27
+ <br/>
28
+ <h1>Promo banner V7</h1>
29
+ <div class="cover cover--xlarge d-flex align-items-center justify-content-center"><div class="cover__content"><div class="container"><div class="mb-large d-flex align-items-center align-center flex-column is-dark"><h2 class="display-1 mb">Nadácia</h2><p class="mb-none">Spájame vás s tým, na čom skutočne záleží</p></div><div class="d-flex justify-content-center"><a href="/" class="btn btn--large btn--primary mb-none is-light"> Chcem vedieť viac</a></div></div></div><picture class="img cover__image"><source srcSet="/assets/clovek-blog-hero-exported.png" media="(min-width: 992px)"/><source srcSet="/assets/clovek-blog-hero-exported.png" media="(min-width: 768px)"/><img src="/assets/clovek-blog-hero-exported.png" alt="" data-ods-id="homepage-b2c__section-07"/></picture></div>
30
+ <br/>
31
+ <h1>Promo banner V10 (V8)</h1>
32
+ <div class="section section--default is-dark fill-primary" id="dalsie-benefity" data-ods-id="product-page-b2c-prima-volba__dalsie-benefity--03"><div class="container"><div class="promo-banner promo-banner--flush-top-sm-down"><div class="grid grid-column-gap--large"><div class="grid__col grid__col--12 grid__col--md-6 promo-banner__item"><p class="mb-xsmall">Svetové dáta vás spájajú aj vo svete</p><h2 class="h1 mb-medium"> Prvé roamingové balíky pre vašu<span class="text-accent ml-small"> Prima kartu</span></h2><p class="mb-large text-secondary">Aktivujte si nové Svetové dáta aj pre vašu kartu Prima, nech sú prílety a odlety dát bezstarostné kdekoľvek na svete.</p><button type="button" class="btn btn--large btn--primary mb-none fullwidth-xs-only">Chcem vedieť viac</button></div><div class="grid__col grid__col--12 grid__col--md-6 promo-banner__image"><img class="img mb-none" src="/assets/roaming-prima-karta.png" alt="Obrázok"/></div></div></div></div></div>
33
+ <br/>
34
+ <h1>Promo banner V11</h1>
35
+ <div class="section section--default"><div class="container"><div class="grid align-items-center grid-column-gap--large"><div class="grid__col grid__col--12 grid__col--lg-4"><p class="mb-xsmall">Nekonečné dáta v 5G</p><h2 class="h1 mb-medium">Stiahnite si aplikáciu Môj Orange</h2><p>Majte svoju spotrebu, faktúru a ďalšie dôležité údaje vždy pod kontrolou. Aplikáciu Môj Orange si môžete bezplatne stiahnuť na Google Play, App Store či Huawei App Gallery.</p></div><div class="grid__col grid__col--12 grid__col--lg-8"><div class="carousel mb-none carousel--scrollbar carousel--bleed-right" data-carousel="true" data-swiper-options="{&quot;pagination&quot;:{&quot;enabled&quot;:false},&quot;slidesPerView&quot;:1.1,&quot;breakpoints&quot;:{&quot;991&quot;:{&quot;slidesPerView&quot;:2}}}" id="carousel-insurance-cards"><div class="carousel__viewport-wrapper"><div class="carousel__viewport"><div class="carousel__track"><div class="carousel__slide"><img class="img mb-none" src="https://placehold.co/420x572" alt="Placeholder"/></div><div class="carousel__slide"><img class="img mb-none" src="https://placehold.co/420x572" alt="Placeholder"/></div></div></div></div><div class="carousel__scrollbar"><div class="carousel__scrollbar-drag"></div></div></div></div></div></div></div>
36
+ <br/>
37
+ <h1>Promo banner v12</h1>
38
+ <div class="section"><div class="container"><div class="carousel mb mb-md-none carousel--scrollbar carousel--bleed-right" data-carousel="true" data-swiper-options="{&quot;pagination&quot;:{&quot;enabled&quot;:false},&quot;slidesPerView&quot;:1.2,&quot;breakpoints&quot;:{&quot;768&quot;:{&quot;slidesPerView&quot;:2},&quot;1024&quot;:{&quot;slidesPerView&quot;:3}}}"><div class="carousel__viewport-wrapper"><div class="carousel__viewport"><div class="carousel__track"><div class="carousel__slide d-flex flex-column justify-content-center"><p class="mb-xsmall">Nekonečné dáta v 5G</p><h2 class="h1 mb-medium">Stiahnite si aplikáciu Môj Orange</h2><p class="mb-none">Majte svoju spotrebu, faktúru a ďalšie dôležité údaje vždy pod kontrolou. Aplikáciu Môj Orange si môžete bezplatne stiahnuť na Google Play, App Store či Huawei App Gallery.</p></div><div class="carousel__slide"><img class="img mb-none" src="https://placehold.co/420x572" alt="Placeholder"/></div><div class="carousel__slide"><img class="img mb-none" src="https://placehold.co/420x572" alt="Placeholder"/></div><div class="carousel__slide"><img class="img mb-none" src="https://placehold.co/420x572" alt="Placeholder"/></div><div class="carousel__slide"><img class="img mb-none" src="https://placehold.co/420x572" alt="Placeholder"/></div><div class="carousel__slide"><img class="img mb-none" src="https://placehold.co/420x572" alt="Placeholder"/></div></div></div></div><div class="carousel__scrollbar"><div class="carousel__scrollbar-drag"></div></div></div></div></div>
39
+ <br/>
40
+ <h1>Promo banner v13</h1>
41
+ <div class="section section--default" data-ods-id="homepage-b2c__section-02"><div class="container"><div class="bar align-items-center mb-large mb-large"><div class="bar__item bar__item--fill"><h2>Objavte výhodné zariadenia</h2></div><div class="bar__item show-md"><a href="/" class="link underline-hover">Prejsť do eshopu<svg class="icon icon--large link__icon-right" aria-hidden="true"><use xlink:href="/sprite.svg#chevron-right"></use></svg></a></div></div><div class="feature-accordion is-light mb-large mb-md-none" data-feature-accordion="true"><div class="feature-accordion__accordion"><ul class="accordion" data-accordion="true"><li class="accordion__item feature-accordion__item"><h3 class="accordion__header"><button type="button" class="accordion__button" aria-controls="item-1-section" id="item-1" data-feature-accordion-toggle="true"><span class="accordion__title">OPPO Reno12 séria s AI</span><svg class="icon icon--medium accordion__icon" aria-hidden="true"><use xlink:href="/sprite.svg#chevron-down"></use></svg></button></h3><div id="item-1-section" role="region" aria-labelledby="item-1" class="accordion__body" hidden=""><div class="feature-accordion__content"><h3>S 3-ročnou zárukou a výmenou rozbitého displeja</h3><button type="button" class="btn btn--fill">Chcem ho</button></div></div></li><li class="accordion__item feature-accordion__item"><h3 class="accordion__header"><button type="button" class="accordion__button" aria-controls="item-2-section" id="item-2" data-feature-accordion-toggle="true"><span class="accordion__title">Samsung Galaxy S24</span><svg class="icon icon--medium accordion__icon" aria-hidden="true"><use xlink:href="/sprite.svg#chevron-down"></use></svg></button></h3><div id="item-2-section" role="region" aria-labelledby="item-2" class="accordion__body" hidden=""><div class="feature-accordion__content"><h3>S 3-ročnou zárukou a výmenou rozbitého displeja</h3><button type="button" class="btn btn--fill">Chcem ho</button></div></div></li><li class="accordion__item feature-accordion__item"><h3 class="accordion__header"><button type="button" class="accordion__button" aria-controls="item-3-section" id="item-3" data-feature-accordion-toggle="true"><span class="accordion__title">Apple iPhone 15</span><svg class="icon icon--medium accordion__icon" aria-hidden="true"><use xlink:href="/sprite.svg#chevron-down"></use></svg></button></h3><div id="item-3-section" role="region" aria-labelledby="item-3" class="accordion__body" hidden=""><div class="feature-accordion__content"><h3>S 3-ročnou zárukou a výmenou rozbitého displeja</h3><button type="button" class="btn btn--fill">Chcem ho</button></div></div></li></ul></div><div class="feature-accordion__preview"><img class="img" src="/assets/three-phones.png" alt="Feature Accordion 1" data-feature-accordion-image="true"/><img class="img hide" src="/assets/three-phones.png" alt="Feature Accordion 2" data-feature-accordion-image="true"/><img class="img hide" src="https://picsum.photos/seed/3/400/300" alt="Feature Accordion 3" data-feature-accordion-image="true"/></div></div><a href="/" class="link hide-md underline-hover">Prejsť do eshopu<svg class="icon icon--large link__icon-right" aria-hidden="true"><use xlink:href="/sprite.svg#chevron-right"></use></svg></a></div></div>
42
+ <br/>
43
+ <h1>Promo banner v14</h1>
44
+ <div class="section section--default" data-ods-id="homepage-b2c__section-01"><div class="container"><div class="bar align-items-center mb-large mb-md-large"><div class="bar__item bar__item--fill"><h2>Vyberte si z našej ponuky</h2></div><div class="bar__item show-md"><a href="/" class="link underline-hover">Všetky ponuky<svg class="icon icon--large link__icon-right" aria-hidden="true"><use xlink:href="/sprite.svg#chevron-right"></use></svg></a></div></div><div class="carousel mb-large mb-md-none carousel--scrollbar carousel--bleed-right" data-carousel="true" data-swiper-options="{&quot;pagination&quot;:{&quot;enabled&quot;:false},&quot;slidesPerView&quot;:1.2,&quot;breakpoints&quot;:{&quot;768&quot;:{&quot;slidesPerView&quot;:2.5},&quot;1024&quot;:{&quot;slidesPerView&quot;:3}}}" id="carousel-bleed-right"><div class="carousel__viewport-wrapper"><div class="carousel__viewport"><div class="carousel__track"><div class="carousel__slide"><div class="card fullheight mb-none fill-contrast block-action" data-block-action="true"><div class="card__section card__section--fill card__section--space-small"><h3 class="h2 text-accent"><a href="/" class="link underline-hover block-action__control"> Dokončite objednávku v našom e-shope</a></h3><p class="text-inverse"> Automaticky získate jednorazovú 100 % zľavu z mesačného poplatku</p></div><div class="card__section"><a href="/" class="btn btn--large btn--primary is-dark block-action__override"> Dokončiť</a></div></div></div><div class="carousel__slide"><div class="card is-light mb-none fullheight block-action" data-block-action="true"><div class="card__section card__section--space-small"><p class="mb-none">6 mesiacov zadarmo</p><h3 class="mb"><a href="/" class="link underline-hover block-action__control"> Dokončite objednávku v našom e-shope</a></h3></div><img class="img" src="/assets/6-mesiacov-zadarmo.png" alt="6 mesiacov zadarmo"/></div></div><div class="carousel__slide"><div class="card mb-none fullheight is-light block-action" style="--color-surface-primary:#a8afb8" data-block-action="true"><div class="card__section card__section--fill card__section--space-small"><p class="mb-none">6 mesiacov zadarmo</p><h3 class="mb"><a href="/" class="link no-accent underline-hover block-action__control"> Optický internet a TV na 6 mesiacov zadarmo</a></h3></div><img class="img" src="/assets/iPad_grey.png" alt="iPad grey"/></div></div></div></div></div><div class="carousel__scrollbar"><div class="carousel__scrollbar-drag"></div></div></div><a href="/" class="link hide-md underline-hover">Všetky ponuky<svg class="icon icon--large link__icon-right" aria-hidden="true"><use xlink:href="/sprite.svg#chevron-right"></use></svg></a></div></div>
45
+ <br/>
46
+ <h1>Promo banner v15</h1>
47
+ <div class="section section--default" data-ods-id="homepage-b2c__section-01"><div class="container"><div class="bar align-items-center mb-large mb-md-large"><div class="bar__item bar__item--fill"><h2>Vyberte si z našej ponuky</h2></div><div class="bar__item show-md"><a href="/" class="link underline-hover">Všetky ponuky<svg class="icon icon--large link__icon-right" aria-hidden="true"><use xlink:href="/sprite.svg#chevron-right"></use></svg></a></div></div><div class="carousel mb-large mb-md-none carousel--scrollbar carousel--bleed-right" data-carousel="true" data-swiper-options="{&quot;pagination&quot;:{&quot;enabled&quot;:false},&quot;slidesPerView&quot;:1.2,&quot;breakpoints&quot;:{&quot;768&quot;:{&quot;slidesPerView&quot;:2.5},&quot;1024&quot;:{&quot;slidesPerView&quot;:3},&quot;1280&quot;:{&quot;slidesPerView&quot;:4}}}" id="carousel-bleed-right"><div class="carousel__viewport-wrapper"><div class="carousel__viewport"><div class="carousel__track"><div class="carousel__slide"><div class="card fullheight mb-none fill-contrast block-action" data-block-action="true"><div class="card__section card__section--fill card__section--space-small"><h3 class="h2 text-accent"><a href="/" class="link underline-hover block-action__control"> Dokončite objednávku v našom e-shope</a></h3><p class="text-inverse"> Automaticky získate jednorazovú 100 % zľavu z mesačného poplatku</p></div><div class="card__section"><a href="/" class="btn btn--large btn--primary is-dark block-action__override"> Dokončiť</a></div></div></div><div class="carousel__slide"><div class="card is-light mb-none fullheight block-action" data-block-action="true"><div class="card__section card__section--space-small"><p class="mb-none">6 mesiacov zadarmo</p><h3 class="mb"><a href="/" class="link underline-hover block-action__control"> Dokončite objednávku v našom e-shope</a></h3></div><img class="img" src="/assets/6-mesiacov-zadarmo.png" alt="6 mesiacov zadarmo"/></div></div><div class="carousel__slide"><div class="card mb-none fullheight is-light block-action" style="--color-surface-primary:#a8afb8" data-block-action="true"><div class="card__section card__section--fill card__section--space-small"><p class="mb-none">6 mesiacov zadarmo</p><h3 class="mb"><a href="/" class="link no-accent underline-hover block-action__control"> Optický internet a TV na 6 mesiacov zadarmo</a></h3></div><img class="img" src="/assets/iPad_grey.png" alt="iPad grey"/></div></div><div class="carousel__slide"><div class="card fullheight mb-none fill-contrast block-action" data-block-action="true"><div class="card__section card__section--fill card__section--space-small"><h3 class="h2 text-accent"><a href="/" class="link underline-hover block-action__control"> Dokončite objednávku v našom e-shope</a></h3><p class="text-inverse"> Automaticky získate jednorazovú 100 % zľavu z mesačného poplatku</p></div><div class="card__section"><a href="/" class="btn btn--large btn--primary is-dark block-action__override"> Dokončiť</a></div></div></div></div></div></div><div class="carousel__scrollbar"><div class="carousel__scrollbar-drag"></div></div></div><a href="/" class="link hide-md underline-hover">Všetky ponuky<svg class="icon icon--large link__icon-right" aria-hidden="true"><use xlink:href="/sprite.svg#chevron-right"></use></svg></a></div></div>
48
+ <br/>
49
+ <h1>Price banner</h1>
50
+ <div class="section section--default background-secondary" id="baliky-microsoft-365" data-ods-id="product-page-b2b-microsoft-365__baliky-microsoft-365--07"><div class="container"><div class="promo-banner promo-banner--vertical"><div class="grid grid-column-gap--large"><div class="grid__col grid__col--12 grid__col--sm-10 grid__col--md-8 grid__col--lg-6 promo-banner__item align-items-center align-center align-self-center pt-none pb-none"><div><img class="img" src="/assets/microsoft-copilot-logo-small-v2.png" alt="Microsoft 365 Copilot"/><h2 class="h1">Balíky Microsoft 365</h2><p class="align-selft-center mb-large"> Vyberte si z balíkov Microsoft 365 ten, ktorý najviac vyhovuje vášmu podnikaniu. Pripravili sme pre vás podrobný prehľad balíkov Microsoft 365.</p><p class="mb-large"> Cena bez DPH už od <br/><span class="h1">5,42</span><span class="large bold"> €/mes.</span></p><button type="button" class="btn btn--large btn--primary mb-none fullwidth-xs-only">Prejsť na prehľad balíkov</button></div></div></div></div></div></div></div>
51
+ </main>
52
+ </div>
53
+ <div id="root-tooltips"></div>
54
+ <div id="root-dropdowns"></div>
55
+ <div id="root-modals"></div>
56
+ <script type="module" src="/lib/scripts.js"></script>
57
+ <script type="module" src="/lib/megamenu.js"></script>
58
+ <script type="module" src="/lib/footer.js"></script>
59
+
60
+ <script>
61
+ function toggleDarkMode() {
62
+ document.body.classList.toggle('is-dark');
63
+ document.querySelector("[data-megamenu]").classList.toggle("is-dark");
64
+ document.querySelector("footer").classList.toggle("is-dark");
65
+ }
66
+ </script>
67
+ <button
68
+ id="toggle-dark-mode"
69
+ style="position: fixed; bottom: 20px; right: 20px; z-index: 1000;" class="btn btn--small"
70
+ onclick="toggleDarkMode()"
71
+ >
72
+ Dark mode
73
+ </button>
74
+
75
+ </body>
76
+ </html>
package/build/pages/components/tiles-section/index.html ADDED
@@ -0,0 +1,58 @@
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="sk">
4
+ <head>
5
+ <meta charset="UTF-8" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <meta name="author" content="Lighting Beetle s.r.o." />
8
+ <link rel="shortcut icon" href="/assets/favicon.ico" />
9
+ <link rel="stylesheet" href="/lib/style.css" />
10
+ <link rel="stylesheet" href="/lib/megamenu.css" />
11
+ <link rel="stylesheet" href="/lib/footer.css" />
12
+ <link rel="stylesheet" href="/lib/fonts.css" />
13
+ <link rel="stylesheet" href="/shame.css" />
14
+ <title>Page</title>
15
+ </head>
16
+ <body>
17
+ <div id="root">
18
+ <main>
19
+ <link rel="preload" as="image" href="/assets/married-couple.png"/><div id="MDX_ROOT_e6e536a1-9065-4eed-8ded-bb18320c8d3a"><h1>Tile 1</h1>
20
+ <div class="section section--xsmall" data-ods-id="homepage-b2c__tiles--01"><div class="container"><div class="bar bar--space-small horizontal-scroll justify-content-center--md mb-none"><div class="bar__item"><div class="tile tile--compact mb-xsmall mb-md-none background-primary block-action block-action--border-on-hover" data-block-action="true"><div class="tile__body"><svg class="icon icon--orange" aria-hidden="true"><use xlink:href="/sprite.svg#sim"></use></svg><a href="/" class="link h5 bold align-center underline-hover block-action__control">Paušály</a></div></div></div><div class="bar__item"><div class="tile tile--compact mb-xsmall mb-md-none background-primary block-action block-action--border-on-hover" data-block-action="true"><div class="tile__body"><svg class="icon icon--orange" aria-hidden="true"><use xlink:href="/sprite.svg#device-smart-phone"></use></svg><a href="/" class="link h5 bold align-center underline-hover block-action__control">Telefóny</a></div></div></div><div class="bar__item"><div class="tile tile--compact mb-xsmall mb-md-none background-primary block-action block-action--border-on-hover" data-block-action="true"><div class="tile__body"><svg class="icon icon--orange" aria-hidden="true"><use xlink:href="/sprite.svg#device-tv"></use></svg><a href="/" class="link h5 bold align-center underline-hover block-action__control">Televízia</a></div></div></div><div class="bar__item"><div class="tile tile--compact mb-xsmall mb-md-none background-primary block-action block-action--border-on-hover" data-block-action="true"><div class="tile__body"><svg class="icon icon--orange" aria-hidden="true"><use xlink:href="/sprite.svg#internet"></use></svg><a href="/" class="link h5 bold align-center underline-hover block-action__control">Internet</a></div></div></div></div></div></div>
21
+ <br/>
22
+ <h1>Tile 2</h1>
23
+ <div class="section section--default background-secondary" data-ods-id="help-and-support-b2c__section-02"><div class="container"><div class="grid"><div class="grid__col grid__col--12 grid__col--lg-4"><h2 class="mb mb-md-large">Vyberte si jednu z kategórií</h2></div><div class="grid__col grid__col--12 grid__col--lg-8"><div class="grid grid-column-gap--small grid-column-gap--md-default grid-row-gap--small grid-row-gap--md-medium" data-same-height="true"><div class="grid__col grid__col--6 grid__col--sm-4"><div class="tile surface-primary block-action block-action--border-on-hover" data-same-height-child="true" data-block-action="true"><div class="tile__body"><svg class="icon icon--orange mb-small mb-md-large" aria-hidden="true"><use xlink:href="/sprite.svg#invoice-euro"></use></svg><a href="/" class="link d-block underline-hover h4 block-action__control">Faktúry a platby</a></div></div></div><div class="grid__col grid__col--6 grid__col--sm-4"><div class="tile surface-primary block-action block-action--border-on-hover" data-same-height-child="true" data-block-action="true"><div class="tile__body"><svg class="icon icon--orange mb-small mb-md-large" aria-hidden="true"><use xlink:href="/sprite.svg#orange-dialler"></use></svg><a href="/" class="link d-block underline-hover h4 block-action__control">Volania, dáta a správy</a></div></div></div><div class="grid__col grid__col--6 grid__col--sm-4"><div class="tile surface-primary block-action block-action--border-on-hover" data-same-height-child="true" data-block-action="true"><div class="tile__body"><svg class="icon icon--orange mb-small mb-md-large" aria-hidden="true"><use xlink:href="/sprite.svg#device-laptop-computer-connected"></use></svg><a href="/" class="link d-block underline-hover h4 block-action__control">Internetové služby</a></div></div></div><div class="grid__col grid__col--6 grid__col--sm-4"><div class="tile surface-primary block-action block-action--border-on-hover" data-same-height-child="true" data-block-action="true"><div class="tile__body"><svg class="icon icon--orange mb-small mb-md-large" aria-hidden="true"><use xlink:href="/sprite.svg#device-tv"></use></svg><a href="/" class="link d-block underline-hover h4 block-action__control">Televízia</a></div></div></div><div class="grid__col grid__col--6 grid__col--sm-4"><div class="tile surface-primary block-action block-action--border-on-hover" data-same-height-child="true" data-block-action="true"><div class="tile__body"><svg class="icon icon--orange mb-small mb-md-large" aria-hidden="true"><use xlink:href="/sprite.svg#sim"></use></svg><a href="/" class="link d-block underline-hover h4 block-action__control">Nastavenie zariadení </a></div></div></div><div class="grid__col grid__col--6 grid__col--sm-4"><div class="tile surface-primary block-action block-action--border-on-hover" data-same-height-child="true" data-block-action="true"><div class="tile__body"><svg class="icon icon--orange mb-small mb-md-large" aria-hidden="true"><use xlink:href="/sprite.svg#syncronise"></use></svg><a href="/" class="link d-block underline-hover h4 block-action__control">Cloudové služby</a></div></div></div><div class="grid__col grid__col--6 grid__col--sm-4"><div class="tile surface-primary block-action block-action--border-on-hover" data-same-height-child="true" data-block-action="true"><div class="tile__body"><svg class="icon icon--orange mb-small mb-md-large" aria-hidden="true"><use xlink:href="/sprite.svg#e-shop"></use></svg><a href="/" class="link d-block underline-hover h4 block-action__control">Nákup online</a></div></div></div><div class="grid__col grid__col--6 grid__col--sm-4"><div class="tile surface-primary block-action block-action--border-on-hover" data-same-height-child="true" data-block-action="true"><div class="tile__body"><svg class="icon icon--orange mb-small mb-md-large" aria-hidden="true"><use xlink:href="/sprite.svg#user"></use></svg><a href="/" class="link d-block underline-hover h4 block-action__control">Môj Orange</a></div></div></div></div></div></div></div></div>
24
+ <br/>
25
+ <h1>Tile 3</h1>
26
+ <div class="section background-accent pb-none"><div class="container"><div class="grid"><div class="grid__col grid__col--12 grid__col--lg-4 d-flex flex-column justify-content-space-between"><h2 class="mb mb-md-large">Živé momenty</h2><img class="img mb-none show-lg" src="/assets/married-couple.png" alt="Married couple"/></div><div class="grid__col grid__col--12 grid__col--lg-8"><div class="grid grid-column-gap--small grid-column-gap--md-default grid-row-gap--small grid-row-gap--md-medium mb-large mb-md-xlarge" data-same-height="true"><div class="grid__col grid__col--6 grid__col--sm-4"><div class="tile surface-primary block-action block-action--border-on-hover" data-same-height-child="true" data-block-action="true"><div class="tile__body"><svg class="icon icon--orange mb-small mb-md-large" aria-hidden="true"><use xlink:href="/sprite.svg#invoice-euro"></use></svg><a href="/" class="link d-block underline-hover h4 block-action__control">Faktúry a platby</a></div></div></div><div class="grid__col grid__col--6 grid__col--sm-4"><div class="tile surface-primary block-action block-action--border-on-hover" data-same-height-child="true" data-block-action="true"><div class="tile__body"><svg class="icon icon--orange mb-small mb-md-large" aria-hidden="true"><use xlink:href="/sprite.svg#orange-dialler"></use></svg><a href="/" class="link d-block underline-hover h4 block-action__control">Volania, dáta a správy</a></div></div></div><div class="grid__col grid__col--6 grid__col--sm-4"><div class="tile surface-primary block-action block-action--border-on-hover" data-same-height-child="true" data-block-action="true"><div class="tile__body"><svg class="icon icon--orange mb-small mb-md-large" aria-hidden="true"><use xlink:href="/sprite.svg#device-laptop-computer-connected"></use></svg><a href="/" class="link d-block underline-hover h4 block-action__control">Internetové služby</a></div></div></div><div class="grid__col grid__col--6 grid__col--sm-4"><div class="tile surface-primary block-action block-action--border-on-hover" data-same-height-child="true" data-block-action="true"><div class="tile__body"><svg class="icon icon--orange mb-small mb-md-large" aria-hidden="true"><use xlink:href="/sprite.svg#device-tv"></use></svg><a href="/" class="link d-block underline-hover h4 block-action__control">Televízia</a></div></div></div></div></div></div></div></div>
27
+ <br/>
28
+ <h1>Tile 4</h1>
29
+ <div class="section section--default surface-moderate is-dark" data-ods-id="blog-homepage-clovek__action-tiles--01"><div class="container"><h2 class="mb mb-md-large">Pripravili sme pre vás</h2><div class="grid grid-row-gap--small grid-row-gap--md-medium" data-same-height="true"><div class="grid__col grid__col--12 grid__col--md-6 grid__col--lg-4"><div class="tile tile--action is-light block-action block-action--border-on-hover" data-same-height-child="true" data-block-action="true"><div class="tile__body"><a href="/" class="link d-block text-inverse underline-hover block-action__control">Biznis trendy</a><svg class="icon icon--medium icon--orange" aria-hidden="true"><use xlink:href="/sprite.svg#chevron-right"></use></svg></div></div></div><div class="grid__col grid__col--12 grid__col--md-6 grid__col--lg-4"><div class="tile tile--action is-light block-action block-action--border-on-hover" data-same-height-child="true" data-block-action="true"><div class="tile__body"><a href="/" class="link d-block text-inverse underline-hover block-action__control">Tlačové správy</a><svg class="icon icon--medium icon--orange" aria-hidden="true"><use xlink:href="/sprite.svg#chevron-right"></use></svg></div></div></div><div class="grid__col grid__col--12 grid__col--md-6 grid__col--lg-4"><div class="tile tile--action is-light block-action block-action--border-on-hover" data-same-height-child="true" data-block-action="true"><div class="tile__body"><a href="/" class="link d-block text-inverse underline-hover block-action__control">Nadácia Orange</a><svg class="icon icon--medium icon--orange" aria-hidden="true"><use xlink:href="/sprite.svg#chevron-right"></use></svg></div></div></div></div></div></div>
30
+ <br/>
31
+ <h1>Tile 5</h1>
32
+ <div class="section section--default background-secondary"><div class="container"><h2 class="mb mb-md-large">Vyberte si jednu z kategórií</h2><div class="grid grid-column-gap--small grid-column-gap--md-default grid-row-gap--small grid-row-gap--md-medium" data-same-height="true"><div class="grid__col grid__col--6 grid__col--sm-4 grid__col--lg-3"><div class="tile surface-primary block-action block-action--border-on-hover" data-same-height-child="true" data-block-action="true"><div class="tile__body"><svg class="icon icon--orange mb-small mb-md-large" aria-hidden="true"><use xlink:href="/sprite.svg#invoice-euro"></use></svg><a href="/" class="link d-block underline-hover h4 block-action__control">Faktúry a platby</a></div></div></div><div class="grid__col grid__col--6 grid__col--sm-4 grid__col--lg-3"><div class="tile surface-primary block-action block-action--border-on-hover" data-same-height-child="true" data-block-action="true"><div class="tile__body"><svg class="icon icon--orange mb-small mb-md-large" aria-hidden="true"><use xlink:href="/sprite.svg#orange-dialler"></use></svg><a href="/" class="link d-block underline-hover h4 block-action__control">Volania, dáta a správy</a></div></div></div><div class="grid__col grid__col--6 grid__col--sm-4 grid__col--lg-3"><div class="tile surface-primary block-action block-action--border-on-hover" data-same-height-child="true" data-block-action="true"><div class="tile__body"><svg class="icon icon--orange mb-small mb-md-large" aria-hidden="true"><use xlink:href="/sprite.svg#device-laptop-computer-connected"></use></svg><a href="/" class="link d-block underline-hover h4 block-action__control">Internetové služby</a></div></div></div><div class="grid__col grid__col--6 grid__col--sm-4 grid__col--lg-3"><div class="tile surface-primary block-action block-action--border-on-hover" data-same-height-child="true" data-block-action="true"><div class="tile__body"><svg class="icon icon--orange mb-small mb-md-large" aria-hidden="true"><use xlink:href="/sprite.svg#device-tv"></use></svg><a href="/" class="link d-block underline-hover h4 block-action__control">Televízia</a></div></div></div><div class="grid__col grid__col--6 grid__col--sm-4 grid__col--lg-3"><div class="tile surface-primary block-action block-action--border-on-hover" data-same-height-child="true" data-block-action="true"><div class="tile__body"><svg class="icon icon--orange mb-small mb-md-large" aria-hidden="true"><use xlink:href="/sprite.svg#sim"></use></svg><a href="/" class="link d-block underline-hover h4 block-action__control">Nastavenie zariadení </a></div></div></div><div class="grid__col grid__col--6 grid__col--sm-4 grid__col--lg-3"><div class="tile surface-primary block-action block-action--border-on-hover" data-same-height-child="true" data-block-action="true"><div class="tile__body"><svg class="icon icon--orange mb-small mb-md-large" aria-hidden="true"><use xlink:href="/sprite.svg#syncronise"></use></svg><a href="/" class="link d-block underline-hover h4 block-action__control">Cloudové služby</a></div></div></div><div class="grid__col grid__col--6 grid__col--sm-4 grid__col--lg-3"><div class="tile surface-primary block-action block-action--border-on-hover" data-same-height-child="true" data-block-action="true"><div class="tile__body"><svg class="icon icon--orange mb-small mb-md-large" aria-hidden="true"><use xlink:href="/sprite.svg#e-shop"></use></svg><a href="/" class="link d-block underline-hover h4 block-action__control">Nákup online</a></div></div></div><div class="grid__col grid__col--6 grid__col--sm-4 grid__col--lg-3"><div class="tile surface-primary block-action block-action--border-on-hover" data-same-height-child="true" data-block-action="true"><div class="tile__body"><svg class="icon icon--orange mb-small mb-md-large" aria-hidden="true"><use xlink:href="/sprite.svg#user"></use></svg><a href="/" class="link d-block underline-hover h4 block-action__control">Môj Orange</a></div></div></div></div></div></div></div>
33
+ </main>
34
+ </div>
35
+ <div id="root-tooltips"></div>
36
+ <div id="root-dropdowns"></div>
37
+ <div id="root-modals"></div>
38
+ <script type="module" src="/lib/scripts.js"></script>
39
+ <script type="module" src="/lib/megamenu.js"></script>
40
+ <script type="module" src="/lib/footer.js"></script>
41
+
42
+ <script>
43
+ function toggleDarkMode() {
44
+ document.body.classList.toggle('is-dark');
45
+ document.querySelector("[data-megamenu]").classList.toggle("is-dark");
46
+ document.querySelector("footer").classList.toggle("is-dark");
47
+ }
48
+ </script>
49
+ <button
50
+ id="toggle-dark-mode"
51
+ style="position: fixed; bottom: 20px; right: 20px; z-index: 1000;" class="btn btn--small"
52
+ onclick="toggleDarkMode()"
53
+ >
54
+ Dark mode
55
+ </button>
56
+
57
+ </body>
58
+ </html>