@blinkpage/composer-tools 1.0.0

package/editor-components/stats/stats11/stats11.module.scss

@@ -0,0 +1,167 @@
+@use "../../../composer-base-components/base/utitilities/viewports.module.scss"
+  as *;
+
+.container {
+  .max-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    .content-grid {
+      display: grid;
+      grid-template-columns: fit-content 1px fit-content;
+
+      gap: 0;
+    }
+
+    .left {
+      align-self: center;
+      grid-column: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: flex-start;
+      padding-right: calc(2 * var(--composer-gap-xl));
+
+      .stats-list {
+        display: flex;
+        flex-direction: column;
+        gap: var(--composer-gap-md);
+        margin-bottom: var(--composer-gap-md);
+        width: 100%;
+        .stat-item {
+          display: flex;
+          align-items: baseline;
+          gap: var(--composer-gap-md);
+          .stat-value {
+            font-size: 3.5rem;
+            color: var(--composer-primary-color);
+            margin: 0;
+          }
+          .stat-label {
+            font-size: 3.5rem;
+            margin: 0;
+            color: var(--composer-font-color-primary);
+          }
+        }
+      }
+      .image-box {
+        margin-top: var(--composer-gap-md);
+        width: fit-content;
+        img.image {
+          width: 100%;
+          height: auto;
+          object-fit: cover;
+        }
+      }
+      &.center {
+        .stats-list {
+          .stat-item {
+            justify-content: center;
+          }
+        }
+        .image-box {
+          display: flex;
+          justify-content: center;
+        }
+      }
+    }
+
+    .stick {
+      width: 1px;
+      background-color: var(--composer-tertiary-color);
+      margin: 0;
+    }
+
+    .right {
+      grid-column: 3;
+      display: flex;
+      flex-direction: column;
+      margin-left: var(--composer-gap-lg);
+      padding-left: var(--composer-gap-lg);
+      .subTitle {
+        width: fit-content;
+        margin-top: 0;
+        margin-bottom: var(--composer-gap-sm);
+      }
+      .title {
+        margin-top: 0;
+        margin-bottom: var(--composer-gap-md);
+      }
+      .text {
+        width: 100%;
+      }
+
+      .button-container {
+        width: fit-content;
+        display: flex;
+        flex-direction: row;
+        gap: var(--composer-gap-md);
+        flex-wrap: wrap;
+        align-items: stretch;
+        width: 100%;
+
+        .button {
+          content: "";
+          margin-top: var(--composer-gap-md);
+        }
+      }
+
+      &.center {
+        flex-direction: column;
+
+        .button-container {
+          justify-content: center;
+        }
+      }
+    }
+  }
+}
+
+@container (max-width: #{$composer-tablet-width}) {
+  .container {
+    .max-content {
+      .left {
+        border-right: none;
+        padding-right: 0;
+        margin-right: var(--composer-gap-md);
+        .image-box {
+          margin-top: var(--composer-gap-sm);
+        }
+      }
+      .stick {
+        display: none;
+      }
+      .right {
+        margin-left: var(--composer-gap-md);
+        padding-left: 0;
+      }
+    }
+  }
+}
+
+@container (max-width: #{$composer-phone-width}) {
+  .container {
+    .max-content {
+      .content-grid {
+        grid-template-columns: 1fr;
+        gap: var(--composer-gap-md);
+      }
+      .left {
+        border-right: none;
+        padding-right: 0;
+        .image-box {
+          margin-top: var(--composer-gap-sm);
+        }
+      }
+      .stick {
+        display: none;
+      }
+      .right {
+        margin-left: 0;
+        grid-column: inherit;
+        padding-left: 0;
+      }
+    }
+  }
+}

package/editor-components/stats/stats11/stats11.tsx

@@ -0,0 +1,242 @@
+import * as React from "react";
+import { BaseStats } from "../../EditorComponent";
+import styles from "./stats11.module.scss";
+import { Base } from "../../../composer-base-components/base/base";
+import ComposerLink from "../../../../custom-hooks/composer-base-components/Link/link";
+import { INPUTS } from "composer-tools/custom-hooks/input-templates";
+interface StatItem {
+  value: React.JSX.Element;
+  label: React.JSX.Element;
+}
+
+class Stats11 extends BaseStats {
+  constructor(props?: any) {
+    super(props, styles);
+
+    this.addProp({
+      type: "array",
+      key: "statItems",
+      displayer: "Stat Items",
+      value: [
+        {
+          type: "object",
+          key: "statItem",
+          displayer: "Stat Item",
+          value: [
+            { type: "string", key: "value", displayer: "Value", value: "12" },
+            {
+              type: "string",
+              key: "label",
+              displayer: "Label",
+              value: "Years",
+            },
+          ],
+        },
+        {
+          type: "object",
+          key: "statItem",
+          displayer: "Stat Item",
+          value: [
+            { type: "string", key: "value", displayer: "Value", value: "68" },
+            {
+              type: "string",
+              key: "label",
+              displayer: "Label",
+              value: "Projects",
+            },
+          ],
+        },
+        {
+          type: "object",
+          key: "statItem",
+          displayer: "Stat Item",
+          value: [
+            { type: "string", key: "value", displayer: "Value", value: "16" },
+            {
+              type: "string",
+              key: "label",
+              displayer: "Label",
+              value: "Award",
+            },
+          ],
+        },
+      ],
+    });
+
+    this.addProp({
+      type: "image",
+      key: "image",
+      displayer: "Image",
+      value:
+        "https://woodmart.xtemos.com/wp-content/uploads/2023/03/w-architecture-image.jpg.webp",
+    });
+    this.addProp({
+      type: "boolean",
+      key: "faintLine",
+      displayer: "Faint Line",
+      value: true,
+    });
+
+    this.addProp({
+      type: "string",
+      key: "subTitle",
+      displayer: "Subtitle",
+      value: "Our services",
+    });
+    this.addProp({
+      type: "string",
+      key: "title",
+      displayer: "Title",
+      value: "Work with love",
+    });
+    this.addProp({
+      type: "string",
+      key: "text1",
+      displayer: "Text",
+      value:
+        "We help our clients realise their ambitions through architecture that’s grounded in people, their experiences and their environments, applying our integrated expertise and the most advanced digital tools to unlock the potential in every project.",
+    });
+    this.addProp({
+      type: "string",
+      key: "text2",
+      displayer: "Text 2",
+      value:
+        "It’s an approach that’s allowed us to create exhilarating sporting venues, bring greener futures to commercial developments, connect communities through more intuitive and efficient transport systems, and deliver cutting edge scientific and industrial facilities.",
+    });
+
+    this.addProp({
+      type: "string",
+      key: "buttonText",
+      displayer: "Button Text",
+      value: "Send Request",
+    });
+    this.addProp({
+      type: "page",
+      key: "buttonLink",
+      displayer: "Button Link",
+      value: "",
+    });
+
+    this.addProp({
+      type: "array",
+      key: "buttons",
+      displayer: "Buttons",
+      value: [
+        INPUTS.BUTTON(
+          "button",
+          "Button",
+          "Send Request",
+          "",
+          null,
+          null,
+          "Primary"
+        ),
+      ],
+    });
+  }
+
+  static getName(): string {
+    return "Stats 11";
+  }
+
+  render() {
+    const statItems = this.castToObject<StatItem[]>("statItems");
+    const image = this.getPropValue("image");
+    const subTitle = this.getPropValue("subTitle");
+    const title = this.getPropValue("title");
+    const text1 = this.getPropValue("text1");
+    const text2 = this.getPropValue("text2");
+    const alignment = Base.getContentAlignment();
+    const faintLine = this.getPropValue("faintLine");
+    const buttons = this.castToObject<INPUTS.CastedButton[]>("buttons");
+
+    return (
+      <Base.Container className={this.decorateCSS("container")}>
+        <Base.MaxContent className={this.decorateCSS("max-content")}>
+          <Base.ContainerGrid className={this.decorateCSS("content-grid")}>
+            <Base.GridCell
+              className={`${this.decorateCSS("left")} ${
+                alignment === "center" && this.decorateCSS("center")
+              }`}
+            >
+              <div className={this.decorateCSS("stats-list")}>
+                {statItems.map((item, idx) => (
+                  <div className={this.decorateCSS("stat-item")} key={idx}>
+                    {this.castToString(item.value) && (
+                      <Base.P className={this.decorateCSS("stat-value")}>
+                        {item.value}
+                      </Base.P>
+                    )}
+                    {this.castToString(item.label) && (
+                      <Base.P className={this.decorateCSS("stat-label")}>
+                        {item.label}
+                      </Base.P>
+                    )}
+                  </div>
+                ))}
+              </div>
+              {image && (
+                <div className={this.decorateCSS("image-box")}>
+                  <Base.Media
+                    className={this.decorateCSS("image")}
+                    value={{ type: "image", url: image }}
+                  />
+                </div>
+              )}
+            </Base.GridCell>
+            {faintLine && <hr className={this.decorateCSS("stick")} />}
+            <Base.GridCell
+              className={`${this.decorateCSS("right")} ${
+                alignment === "center" && this.decorateCSS("center")
+              }`}
+            >
+              {this.castToString(subTitle) && (
+                <Base.SectionSubTitle className={this.decorateCSS("subTitle")}>
+                  {subTitle}
+                </Base.SectionSubTitle>
+              )}
+              {this.castToString(title) && (
+                <Base.SectionTitle className={this.decorateCSS("title")}>
+                  {title}
+                </Base.SectionTitle>
+              )}
+              {text1 && (
+                <Base.SectionDescription className={this.decorateCSS("text")}>
+                  {text1}
+                </Base.SectionDescription>
+              )}
+              {text2 && (
+                <Base.SectionDescription className={this.decorateCSS("text")}>
+                  {text2}
+                </Base.SectionDescription>
+              )}
+
+              {buttons.length > 0 && (
+                <div className={this.decorateCSS("button-container")}>
+                  {buttons.map((item: INPUTS.CastedButton, index: number) => {
+                    return (
+                      <div>
+                        {this.castToString(item.text) && (
+                          <ComposerLink path={item.url}>
+                            <Base.Button
+                              buttonType={item.type}
+                              className={this.decorateCSS("button")}
+                            >
+                              {item.text}
+                            </Base.Button>
+                          </ComposerLink>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </Base.GridCell>
+          </Base.ContainerGrid>
+        </Base.MaxContent>
+      </Base.Container>
+    );
+  }
+}
+
+export default Stats11;

package/editor-components/stats/stats12/stats12.module.scss

@@ -0,0 +1,244 @@
+@use "../../../composer-base-components/base/utitilities/viewports.module.scss" as *;
+
+.container {
+  background: color-mix(
+    in srgb,
+    var(--composer-html-background),
+    var(--composer-font-color-primary) 5%
+  );
+  gap: var(--composer-gap-xl);
+  overflow-x: hidden;
+  position: relative;
+
+  .max-content {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    gap: var(--composer-gap-xl);
+    width: 100%;
+
+    &.cols-1 .feature {
+      flex: 1 1 100%;
+    }
+
+    &.cols-2 .feature {
+      flex: 1 1 48%;
+    }
+
+    &.cols-3 .feature {
+      flex: 1 1 calc((100% - 2 * var(--composer-gap-xl)) / 3);
+    }
+
+
+    &.cols-4 .feature {
+      flex: 1 1 22%;
+    }
+
+    .feature {
+      min-width: 150px !important;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      text-align: left;
+      gap: var(--composer-gap-xs);
+      border-radius: var(--composer-border-radius-xs);
+
+      .top-row {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--composer-gap-lg);
+        width: 100%;
+      }
+
+      .icon {
+        font-size: 2.5rem;
+        flex-shrink: 0;
+        color: var(--composer-font-color-primary);
+        margin: 0;
+        padding: 0;
+        line-height: 1.2;
+      }
+
+      .text-group {
+        display: flex;
+        flex-direction: column;
+        gap: var(--composer-gap-xs);
+        flex: 1;
+      }
+
+      .title {
+        font-size: 1.5rem;
+        font-weight: 600;
+        color: var(--composer-font-color-primary);
+        margin: 0;
+        line-height: 1.2;
+        margin-right: auto ;
+        text-align: left;
+      }
+
+      .description {
+        font-size: 1rem;
+        color: var(--composer-tertiary-color);
+        line-height: 1.5;
+        margin-top: 10;
+        margin-right: auto !important;
+        text-align: left!important;
+        margin-left: unset;
+      }
+
+      &.no-icon {
+        .top-row {
+          gap: 0;
+        }
+
+        .description {
+          margin-right: auto !important;
+          text-align: left!important;
+          margin-left: unset;
+        }
+      }
+    }
+  }
+
+  .desktop-wrapper {
+    display: flex;
+
+    @container (max-width: #{$composer-phone-width}) {
+      display: none;
+    }
+  }
+
+  .mobile-wrapper {
+    display: none;
+    position: relative;
+
+    @container (max-width: #{$composer-phone-width}) {
+      display: block;
+    }
+
+    .mobile-slider {
+      margin: 0 50px;
+      
+      .slick-slide {
+        display: flex !important;
+        justify-content: center;
+      }
+
+      .feature {
+        max-width: 90%;
+        margin: 0 auto;
+        min-width: 150px !important;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        text-align: left;
+        gap: var(--composer-gap-xs);
+        border-radius: var(--composer-border-radius-xs);
+
+        .top-row {
+          display: flex;
+          align-items: flex-start;
+          gap: var(--composer-gap-lg);
+          width: 100%;
+        }
+
+        .icon {
+          font-size: 2.5rem;
+          flex-shrink: 0;
+          color: var(--composer-font-color-primary);
+          margin: 0;
+          padding: 0;
+          line-height: 1.2;
+        }
+
+        .text-group {
+          display: flex;
+          flex-direction: column;
+          gap: var(--composer-gap-xs);
+          flex: 1;
+        }
+
+        .title {
+          font-size: 1.5rem;
+          font-weight: 600;
+          color: var(--composer-font-color-primary);
+          margin: 0;
+          line-height: 1.2;
+          margin-right: auto ;
+          text-align: left;
+        }
+
+        .description {
+          font-size: 1rem;
+          color: var(--composer-tertiary-color);
+          line-height: 1.5;
+          margin: 0;
+          margin-right: auto !important;
+          text-align: left!important;
+          margin-left: unset;
+        }
+      }
+
+      .slick-prev,
+      .slick-next {
+        z-index: 10;
+        top: 45%;
+        width: 30px;
+        height: 30px;
+        background-color: transparent;
+        border: none;
+        color: var(--composer-font-color-primary);
+
+        &:before {
+          content: ""; 
+        }
+      }
+
+      .slick-prev {
+        left: 5px;
+      }
+
+      .slick-next {
+        right: 5px;
+      }
+    }
+
+    .slider-buttons {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      pointer-events: none;
+      z-index: 10;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 10px;
+
+      button {
+        width: 30px;
+        height: 30px;
+        background-color: transparent;
+        border: none;
+        color: var(--composer-font-color-primary);
+        cursor: pointer;
+        pointer-events: auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 10;
+
+        &:hover {
+          opacity: 0.7;
+        }
+      }
+
+      .prev-button,
+      .next-button {
+        position: static;
+        transform: none;
+      }
+    }
+  }
+}