@ptcwebops/ptcw-design 4.8.2 → 4.8.3

package/dist/collection/components/ptc-preloader-section/ptc-preloader-section.css

@@ -278,6 +278,382 @@ ptc-link, ptc-square-card,
   display: flex;
 }
 
+.skeleton-home-page {
+  width: 100%;
+  background-color: #FFF;
+}
+.skeleton-home-page .skeleton-jumbo {
+  background-color: #F6F6F6;
+  padding-top: 2rem;
+  margin-bottom: 12rem;
+  height: 90vh;
+  max-height: 1000px;
+  position: relative;
+}
+.skeleton-home-page .skeleton-jumbo .bot {
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+}
+.skeleton-home-page .skeleton-jumbo .block {
+  background: linear-gradient(to right, var(--color-gray-02) 25%, var(--color-gray-03) 50%, var(--color-gray-02) 75%);
+  background-size: 200% 100%;
+  animation: loading 2.5s linear infinite;
+  border-radius: 4px;
+  margin-bottom: 8px;
+  left: 24px;
+  max-width: 100%;
+}
+.skeleton-home-page .skeleton-jumbo .block.tabs {
+  height: 35px;
+  width: 132px;
+  margin-bottom: 54px;
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-home-page .skeleton-jumbo .block.tabs {
+    height: 35px;
+    width: 779px;
+    margin-bottom: 134px;
+  }
+}
+.skeleton-home-page .skeleton-jumbo .block.block-1 {
+  width: 395px;
+  height: 36px;
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-home-page .skeleton-jumbo .block.block-1 {
+    width: 673px;
+    height: 54px;
+  }
+}
+.skeleton-home-page .skeleton-jumbo .block.block-2 {
+  width: 326px;
+  height: 36px;
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-home-page .skeleton-jumbo .block.block-2 {
+    width: 571px;
+    height: 54px;
+  }
+}
+.skeleton-home-page .skeleton-jumbo .block.block-3 {
+  width: 370px;
+  height: 36px;
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-home-page .skeleton-jumbo .block.block-3 {
+    width: 490px;
+    height: 54px;
+    margin-bottom: 16px;
+  }
+}
+.skeleton-home-page .skeleton-jumbo .block.block-4 {
+  width: 201px;
+  height: 36px;
+  margin-bottom: 32px;
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-home-page .skeleton-jumbo .block.block-4 {
+    display: none;
+  }
+}
+.skeleton-home-page .skeleton-jumbo .block.block-5 {
+  width: 422px;
+  height: 21px;
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-home-page .skeleton-jumbo .block.block-5 {
+    width: 720px;
+    height: 21px;
+  }
+}
+.skeleton-home-page .skeleton-jumbo .block.block-6 {
+  width: 395px;
+  height: 21px;
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-home-page .skeleton-jumbo .block.block-6 {
+    width: 598px;
+    height: 21px;
+  }
+}
+.skeleton-home-page .skeleton-jumbo .block.block-7 {
+  width: 422px;
+  height: 21px;
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-home-page .skeleton-jumbo .block.block-7 {
+    display: none;
+  }
+}
+.skeleton-home-page .skeleton-jumbo .block.block-8 {
+  width: 370px;
+  height: 21px;
+  margin-bottom: 32px;
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-home-page .skeleton-jumbo .block.block-8 {
+    width: 310px;
+    height: 21px;
+    margin-bottom: 32px;
+  }
+}
+.skeleton-home-page .skeleton-jumbo .block.block-9 {
+  width: 187px;
+  height: 49px;
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-home-page .skeleton-jumbo .block.block-9 {
+    width: 187px;
+    height: 49px;
+  }
+}
+.skeleton-home-page .skeleton-jumbo .slide-container {
+  overflow: hidden;
+  transform: translateY(80%);
+}
+.skeleton-home-page .skeleton-jumbo .slide-container .skeleton-slides {
+  width: 100%;
+  min-width: 936px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: nowrap;
+}
+.skeleton-home-page .skeleton-jumbo .slide-container .skeleton-slides .slide {
+  background: linear-gradient(to right, var(--color-gray-02) 25%, var(--color-gray-03) 50%, var(--color-gray-02) 75%);
+  background-size: 200% 100%;
+  animation: loading 2.5s linear infinite;
+  border-radius: 4px;
+  width: 296px;
+  height: 140px;
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-home-page .skeleton-jumbo .slide-container .skeleton-slides .slide {
+    width: 356px;
+    height: 116px;
+  }
+}
+
+.skeleton-homepage-toggle {
+  margin: 72px 0;
+  width: 100%;
+}
+.skeleton-homepage-toggle .block {
+  background: linear-gradient(to right, var(--color-gray-02) 25%, var(--color-gray-03) 50%, var(--color-gray-02) 75%);
+  background-size: 200% 100%;
+  animation: loading 2.5s linear infinite;
+  border-radius: 4px;
+  margin-bottom: 8px;
+  max-width: 100%;
+}
+.skeleton-homepage-toggle .block.top-1 {
+  width: 378px;
+  height: 31px;
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-homepage-toggle .block.top-1 {
+    width: 720px;
+    height: 37px;
+  }
+}
+.skeleton-homepage-toggle .block.top-2 {
+  width: 369px;
+  height: 31px;
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-homepage-toggle .block.top-2 {
+    display: none;
+  }
+}
+.skeleton-homepage-toggle .block.top-3 {
+  width: 414px;
+  height: 31px;
+  margin-bottom: 16px;
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-homepage-toggle .block.top-3 {
+    width: 617px;
+    height: 37px;
+  }
+}
+.skeleton-homepage-toggle .block.top-4 {
+  width: 423px;
+  height: 21px;
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-homepage-toggle .block.top-4 {
+    display: none;
+  }
+}
+.skeleton-homepage-toggle .block.top-5 {
+  width: 326px;
+  height: 21px;
+  margin-bottom: 32px;
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-homepage-toggle .block.top-5 {
+    width: 571px;
+    height: 21px;
+    margin-bottom: 48px;
+  }
+}
+.skeleton-homepage-toggle .block.selector {
+  width: 432px;
+  height: 69px;
+  margin-bottom: 40px;
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-homepage-toggle .block.selector {
+    display: none;
+  }
+}
+.skeleton-homepage-toggle .block.toggle-1, .skeleton-homepage-toggle .block.toggle-2 {
+  display: none;
+  width: 220px;
+  height: 117px;
+  margin-bottom: 64px;
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-homepage-toggle .block.toggle-1, .skeleton-homepage-toggle .block.toggle-2 {
+    display: block;
+  }
+}
+.skeleton-homepage-toggle .block.bot-1 {
+  width: 381px;
+  height: 24px;
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-homepage-toggle .block.bot-1 {
+    width: 438px;
+    height: 24px;
+  }
+}
+.skeleton-homepage-toggle .block.bot-2 {
+  width: 241px;
+  height: 24px;
+  margin-bottom: 12px;
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-homepage-toggle .block.bot-2 {
+    width: 321px;
+    height: 24px;
+  }
+}
+.skeleton-homepage-toggle .block.bot-3 {
+  width: 399px;
+  height: 21px;
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-homepage-toggle .block.bot-3 {
+    width: 534px;
+    height: 21px;
+  }
+}
+.skeleton-homepage-toggle .block.bot-4 {
+  width: 415px;
+  height: 21px;
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-homepage-toggle .block.bot-4 {
+    width: 555px;
+    height: 21px;
+  }
+}
+.skeleton-homepage-toggle .block.bot-5 {
+  width: 376px;
+  height: 21px;
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-homepage-toggle .block.bot-5 {
+    width: 503px;
+    height: 21px;
+  }
+}
+.skeleton-homepage-toggle .block.bot-6 {
+  width: 340px;
+  height: 21px;
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-homepage-toggle .block.bot-6 {
+    display: none;
+  }
+}
+.skeleton-homepage-toggle .block.bot-7 {
+  width: 362px;
+  height: 21px;
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-homepage-toggle .block.bot-7 {
+    display: none;
+  }
+}
+.skeleton-homepage-toggle .block.bot-8 {
+  width: 183px;
+  height: 21px;
+  margin-bottom: 32px;
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-homepage-toggle .block.bot-8 {
+    width: 455px;
+    height: 21px;
+  }
+}
+.skeleton-homepage-toggle .block.bot-9 {
+  width: 183px;
+  height: 49px;
+}
+.skeleton-homepage-toggle .picture {
+  background: var(--color-gray-01);
+  height: 500px;
+  width: 100%;
+  margin-bottom: 32px;
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-homepage-toggle .picture {
+    height: 733px;
+  }
+}
+.skeleton-homepage-toggle .toggle-section {
+  display: block;
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-homepage-toggle .toggle-section {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 24px;
+  }
+}
+.skeleton-homepage-toggle .cta-section-wrapper {
+  overflow: hidden;
+}
+.skeleton-homepage-toggle .cta-section-wrapper .cta-section {
+  margin-top: 48px;
+  display: flex;
+  align-items: flex-start;
+  gap: 24px;
+  width: 564px;
+}
+.skeleton-homepage-toggle .cta-section-wrapper .cta-section .cta-block {
+  width: 272px;
+  height: 108px;
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-homepage-toggle .cta-section-wrapper .cta-section {
+    margin-top: 72px;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-homepage-toggle {
+    margin: 112px 0;
+  }
+  .skeleton-homepage-toggle .is-center {
+    align-content: center;
+  }
+}
+
 .skeleton-background-video-tall {
   width: 100%;
   padding: 160px 0;

package/dist/collection/components/ptc-preloader-section/ptc-preloader-section.js

@@ -13,8 +13,8 @@ export class PtcPreloaderSection {
   }
   renderHTML() {
     switch (this.sectionType) {
-      case 'home-video-background':
-        return (h("div", { class: "preloader-wrapper" }, h("div", { class: "skeleton-background-video-tall" }, h("div", { class: "ptc-container" }, h("div", { class: "is-grid has-no-row-gap has-col-gap-lg" }, h("div", { class: "is-col-12 top-section" }, h("div", { class: "top-1 block" }), h("div", { class: "top-2 block" }), h("div", { class: "top-3 block" }), h("div", { class: "top-4 block" }), h("div", { class: "top-5 block" })), h("div", { class: "is-col-12 bottom-section" }, h("div", { class: "bottom-1 block" }), h("div", { class: "cards" }, h("div", { class: "card block" }), h("div", { class: "card block" }), h("div", { class: "card block" }), h("div", { class: "card block" }))))))));
+      case 'home-page':
+        return (h("div", { class: "preloader-wrapper" }, h("div", { class: "skeleton-home-page" }, h("div", { class: "skeleton-jumbo" }, h("div", { class: "ptc-container" }, h("div", { class: "is-grid has-no-row-gap has-col-gap-lg" }, h("div", { class: "is-col-12" }, h("div", { class: "tabs block" }), h("div", { class: "block-1 block" }), h("div", { class: "block-2 block" }), h("div", { class: "block-3 block" }), h("div", { class: "block-4 block" }), h("div", { class: "block-5 block" }), h("div", { class: "block-6 block" }), h("div", { class: "block-7 block" }), h("div", { class: "block-8 block" }), h("div", { class: "block-9 block" })))), h("div", { class: "bot" }, h("div", { class: "ptc-container" }, h("div", { class: "is-grid has-no-row-gap has-col-gap-lg" }, h("div", { class: "is-col-12" }, h("div", { class: "slide-container" }, h("div", { class: "skeleton-slides" }, h("div", { class: "slide" }), h("div", { class: "slide" }), h("div", { class: "slide" })))))))), h("div", { class: "skeleton-homepage-toggle" }, h("div", { class: "ptc-container" }, h("div", { class: "is-grid has-no-row-gap has-col-gap-lg" }, h("div", { class: "is-col-12" }, h("div", { class: "top-1 block" }), h("div", { class: "top-2 block" }), h("div", { class: "top-3 block" }), h("div", { class: "top-4 block" }), h("div", { class: "top-5 block" })), h("div", { class: "is-col-12 toggle-section" }, h("div", { class: "selector block" }), h("div", { class: "toggle-1 block" }), h("div", { class: "toggle-2 block" }), h("div", { class: "toggle-2 block" }), h("div", { class: "toggle-2 block" }), h("div", { class: "toggle-2 block" })), h("div", { class: "is-col-12 is-col-6-md" }, h("div", { class: "picture" })), h("div", { class: "is-col-12 is-col-6-md is-center" }, h("div", { class: "bot-1 block" }), h("div", { class: "bot-2 block" }), h("div", { class: "bot-3 block" }), h("div", { class: "bot-4 block" }), h("div", { class: "bot-5 block" }), h("div", { class: "bot-6 block" }), h("div", { class: "bot-7 block" }), h("div", { class: "bot-8 block" }), h("div", { class: "bot-9 block" }), h("div", { class: "bot-10 block" }), h("div", { class: "cta-section-wrapper" }, h("div", { class: "cta-section" }, h("div", { class: "cta-block block" }), h("div", { class: "cta-block block" }))))))), h("div", { class: "skeleton-background-video-tall" }, h("div", { class: "ptc-container" }, h("div", { class: "is-grid has-no-row-gap has-col-gap-lg" }, h("div", { class: "is-col-12 top-section" }, h("div", { class: "top-1 block" }), h("div", { class: "top-2 block" }), h("div", { class: "top-3 block" }), h("div", { class: "top-4 block" }), h("div", { class: "top-5 block" })), h("div", { class: "is-col-12 bottom-section" }, h("div", { class: "bottom-1 block" }), h("div", { class: "cards" }, h("div", { class: "card block" }), h("div", { class: "card block" }), h("div", { class: "card block" }), h("div", { class: "card block" })))))))));
       case 'cards':
         return (h("div", { class: "is-grid has-col-1 has-col-2-md has-col-3-lg has-col-gap-md has-row-gap-md cards-preload-min-height" }, Array.from({ length: this.numberOfCards }).map(() => (h("div", { class: "is-col-1" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-card-media" }), h("div", { class: "skeleton-text" }, h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block long" }))))))));
       case 'case-content':