@gudhub/ssg-web-components-library 1.0.0

package/index.js

@@ -0,0 +1,3 @@
+import * as components from './src/config.js';
+
+export const components_list = Object.values(components);

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@gudhub/ssg-web-components-library",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/GudHubPlatform/ssg-web-components-library.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/GudHubPlatform/ssg-web-components-library/issues"
+  },
+  "homepage": "https://github.com/GudHubPlatform/ssg-web-components-library#readme"
+}

package/src/components/about-us-banner/about-us-banner-data.json

@@ -0,0 +1,9 @@
+{
+    "title": "Title",
+    "subtitle": "Subtitle",
+    "image": {
+      "src": "/assets/images/banner-image.png",
+      "alt": "image alt",
+      "title": "image title"
+    }
+  }

package/src/components/about-us-banner/about-us-banner.html

@@ -0,0 +1,19 @@
+<section>
+    <div class="container">
+        <div class="flex-wrapper">
+            <div class="text">
+                <h1 gh-id="${ghId}.title"></h1>
+                <div class="subtitle" gh-id="${ghId}.subtitle"></div>
+                <div class="flex_button">
+                    ${json.buttons ? `
+                        <button-component data-popup-id="${json.buttons.primary.popupId}" data-placement="${json.buttons.primary.placement}">${json.buttons.primary.text}</button-component>
+                        <button-component data-popup-id="${json.buttons.secondary.popupId}" data-placement="${json.buttons.secondary.placement}" class="btn empty">${json.buttons.secondary.text}</button-component>
+                    ` : ''}
+                </div>
+            </div>
+            <div class="image">
+				<image-component lazyload src="${image.src}" alt="${image.alt}" title="${image.title}" width="578" height="385"></image-component>
+            </div>
+        </div>
+    </div>
+</section>

package/src/components/about-us-banner/about-us-banner.js

@@ -0,0 +1,23 @@
+import html from './about-us-banner.html';
+import './about-us-banner.scss';
+import jsonTemplate from './about-us-banner-data.json';
+
+class AboutUsBanner extends GHComponent {
+    constructor() {
+        super();
+        super.setDefaultData(jsonTemplate);
+    }
+
+    async onServerRender() {
+        this.ghId = this.getAttribute('data-gh-id') || null;
+
+        this.json = await super.getGhData(this.ghId);
+
+        this.image = this.json.image;
+
+        super.render(html);
+    }
+
+}
+
+window.customElements.define('about-us-banner', AboutUsBanner);

package/src/components/about-us-banner/about-us-banner.scss

@@ -0,0 +1,59 @@
+about-us-banner {
+    background-color: var(--primary-bg-color);
+    display: block;
+    .subtitle {
+        margin-bottom: 40px;
+    }
+    .flex_button {
+        display: flex;
+        gap: 20px;
+    }
+    .flex-wrapper {
+        gap: 40px;
+        .text {
+            max-width: calc((100% - 40px) / 2 + 70px);
+        }
+        .image {
+            max-width: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            img {
+                max-width: 100%;
+            }
+        }
+    }
+    .btn {
+        white-space: nowrap;
+    }
+
+    @media screen and (max-width: 1024px) {
+        .container {
+            .flex-wrapper {
+                flex-direction: column;
+                .text {
+                    flex-shrink: 0;
+                    max-width: 100%;
+                }
+                .image {
+                    max-width: 100%;
+                    justify-content: center;
+                    flex-shrink: 0;
+                    margin-top: -20px;
+                }
+                .flex_button {
+                    gap: 10px;
+                }
+            }
+        }
+    }
+
+    @media screen and (max-width: 550px) {
+        .flex_button {
+            flex-wrap: wrap;
+            & > * {
+                width: 100%;
+            }
+        }
+    }
+}

package/src/components/about-us-banner/config.js

@@ -0,0 +1,5 @@
+export const aboutUsBanner = {
+    tag: 'about-us-banner',
+    src: '@gudhub/ssg-web-component-library/src/components/about-us-banner/about-us-banner.js',
+    serverOnly: false
+}

package/src/components/about-us-image-counter/about-us-image-counter-data.json

@@ -0,0 +1,35 @@
+{
+    "title": "Title",
+    "subtitle": "Etiam sed ullamcorper tortor, sit amet dictum est. Ut posuere dolor sodales euismod feugiat",
+    "button_text": "Тестувати безкоштовно",
+    "items": [
+      {
+        "icon": {
+          "src": "/assets/images/lowes.png",
+          "alt": "Image alt",
+          "title": "image title"
+        }
+      },
+      {
+        "icon": {
+          "src": "/assets/images/formica.png",
+          "alt": "Tristique senectus",
+          "title": "Tristique senectus"
+        }
+      },
+      {
+        "icon": {
+          "src": "/assets/images/master-brand.png",
+          "alt": "Donec lacinia orci",
+          "title": "Donec lacinia orci"
+        }
+      },
+      {
+        "icon": {
+          "src": "/assets/images/lg.png",
+          "alt": "Suspendisse",
+          "title": "Suspendisse"
+        }
+      }
+    ]
+  }

package/src/components/about-us-image-counter/about-us-image-counter.html

@@ -0,0 +1,22 @@
+<section class="service_counter">
+    <div class="container">
+        <div class="top_part">
+            <h2 class="h2" gh-id="${ghId}.title"> TITLE </h2>
+            ${json.subtitle ? `
+                <p gh-id="${ghId}.subtitle" class="subtitle"> SUBTITLE </p>
+            ` : ''}
+        </div>
+        <div class="grid">
+            ${items.reduce((acc, item, index) => acc + `
+                    <div class="grid_item">
+                        <div class="image">
+                            <image-component src="${item.icon.src}" alt="${item.icon.alt}" title="${item.icon.title}" width="270" height="80"></image-component>
+                        </div>
+                    </div>
+                `, '')}
+        </div>
+        ${json.button ? `
+            <button-component data-popup-id="${json.button.popupId}" data-placement="${json.button.placement}">${json.button.text}</button-component>
+        `: ''}
+    </div>
+</section>

package/src/components/about-us-image-counter/about-us-image-counter.js

@@ -0,0 +1,23 @@
+import html from './about-us-image-counter.html';
+import './about-us-image-counter.scss';
+import jsonTemplate from './about-us-image-counter-data.json';
+
+class AboutUsImageCounter extends GHComponent {
+
+    constructor() {
+        super();
+        super.setDefaultData(jsonTemplate);
+    }
+
+    async onServerRender() {
+        this.ghId = this.getAttribute('data-gh-id') || null;
+
+        this.json = await super.getGhData(this.ghId);
+        this.items = this.json.items;
+
+        super.render(html);
+    }
+
+}
+
+window.customElements.define('about-us-image-counter', AboutUsImageCounter);

package/src/components/about-us-image-counter/about-us-image-counter.scss

@@ -0,0 +1,44 @@
+about-us-image-counter {
+    --column-grid-gap: 10px;
+    background-color: var(--primary-bg-color);
+    .container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    .top_part {
+        margin-bottom: 50px;
+    }
+    .h2 {
+        margin-bottom: 0;
+    }
+    .subtitle {
+        text-align: center;
+    }
+    .grid {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 10px var(--column-grid-gap);
+        margin-bottom: 50px;
+    }
+    .grid_item {
+        background-color: #fff;
+        border-radius: 10px;
+        img {
+            height: 83px;
+            object-fit: contain;
+        }
+    }
+
+    @media screen and (max-width: 650px) {
+        .top_part {
+            margin-bottom: 25px;
+        }
+        .grid {
+            margin-bottom: 25px;
+        }
+    }
+}

package/src/components/about-us-image-counter/config.js

@@ -0,0 +1,5 @@
+export const aboutUsImageCounter = {
+  tag: 'about-us-image-counter',
+  src: '@gudhub/ssg-web-component-library/src/components/about-us-image-counter/about-us-image-counter.js',
+  serverOnly: false
+}

package/src/components/about-us-team-members/about-us-team-members-data.json

@@ -0,0 +1,99 @@
+{
+    "title": "Title",
+    "subtitle": "Subtitle",
+    "items": [
+        {
+            "title": "Title",
+            "subtitle": "Subtitle",
+            "items": [
+                {
+                    "image": {
+                        "src": "/assets/images/placeholder392x324.png",
+                        "alt": "image alt",
+                        "title": "image title"
+                    },
+                    "name": "name",
+                    "position": "position"
+                },
+                {
+                    "image": {
+                        "src": "/assets/images/placeholder392x324.png",
+                        "alt": "image alt",
+                        "title": "image title"
+                    },
+                    "name": "name",
+                    "position": "position"
+                },
+                {
+                    "image": {
+                        "src": "/assets/images/placeholder392x324.png",
+                        "alt": "image alt",
+                        "title": "image title"
+                    },
+                    "name": "name",
+                    "position": "position"
+                },
+                {
+                    "image": {
+                        "src": "/assets/images/placeholder392x324.png",
+                        "alt": "image alt",
+                        "title": "image title"
+                    },
+                    "name": "name",
+                    "position": "position"
+                },
+                {
+                    "image": {
+                        "src": "/assets/images/placeholder392x324.png",
+                        "alt": "image alt",
+                        "title": "image title"
+                    },
+                    "name": "name",
+                    "position": "position"
+                },
+                {
+                    "image": {
+                        "src": "/assets/images/placeholder392x324.png",
+                        "alt": "image alt",
+                        "title": "image title"
+                    },
+                    "name": "name",
+                    "position": "position"
+                }
+            ]
+        },
+        {
+            "title": "Title",
+            "subtitle": "Subtitle",
+            "items": [
+                {
+                    "image": {
+                        "src": "/assets/images/placeholder392x324.png",
+                        "alt": "image alt",
+                        "title": "image title"
+                    },
+                    "name": "name",
+                    "position": "position"
+                },
+                {
+                    "image": {
+                        "src": "/assets/images/placeholder392x324.png",
+                        "alt": "image alt",
+                        "title": "image title"
+                    },
+                    "name": "name",
+                    "position": "position"
+                },
+                {
+                    "image": {
+                        "src": "/assets/images/placeholder392x324.png",
+                        "alt": "image alt",
+                        "title": "image title"
+                    },
+                    "name": "name",
+                    "position": "position"
+                }
+            ]
+        }
+    ]
+}

package/src/components/about-us-team-members/about-us-team-members.html

@@ -0,0 +1,25 @@
+<section>
+    <div class="container">
+        <div class="main-text">
+            <h2 class="h2" gh-id="${ghId}.title"> TITLE </h2>
+            <p gh-id="${ghId}.subtitle" class="subtitle"> SUBTITLE </p>
+        </div>
+        ${json.items.reduce((acc, item, gridIndex) => acc + `
+            <div class="grid-container">
+                <h3 class="h3" gh-id="${ghId}.items.${gridIndex}.title"> TITLE </h3>
+                <p gh-id="${ghId}.items.${gridIndex}.subtitle" class="subtitle"> SUBTITLE </p>
+                <div class="grid">
+                    ${item.items.reduce((acc, item, index) => acc + `
+                        <div class="grid-item">
+                            <div class="image">
+                                <image-component lazyload src="${item.image.src}" alt="${item.image.alt}" title="${item.image.title}" width="392" height="320"></image-component>
+                            </div>
+                            <h3 class="h3 name" gh-id="${ghId}.items.${gridIndex}.items.${index}.name"> NAME </h3>
+                            <div class="position accent-color" gh-id="${ghId}.items.${gridIndex}.items.${index}.position"> POSITION </div>
+                        </div>
+                    `, '')}
+                </div>
+            </div>
+        `,'')}
+    </div>
+</section>

package/src/components/about-us-team-members/about-us-team-members.js

@@ -0,0 +1,22 @@
+import html from './about-us-team-members.html';
+import './about-us-team-members.scss';
+import jsonTemplate from './about-us-team-members-data.json';
+
+class AboutUsTeamMembers extends GHComponent {
+
+    constructor() {
+        super();
+        super.setDefaultData(jsonTemplate);
+    }
+
+    async onServerRender() {
+        this.ghId = this.getAttribute('data-gh-id') || null;
+
+        this.json = await super.getGhData(this.ghId);
+
+        super.render(html);
+    }
+
+}
+
+window.customElements.define('about-us-team-members', AboutUsTeamMembers);

package/src/components/about-us-team-members/about-us-team-members.scss

@@ -0,0 +1,71 @@
+about-us-team-members {
+    background-color: var(--primary-bg-color);
+    --items-in-row: 3;
+    --col-gap: 20px;
+    --row-gap: 50px;
+    .container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    .main-text {
+        margin-bottom: 50px;
+        & > :last-child{
+            margin-bottom: 0;
+        }
+    }
+    .subtitle {
+        text-align: center;
+    }
+    .grid-container {
+        & > .h3 {
+            margin-bottom: 20px;
+            text-align: center;
+        }
+        .subtitle {
+            max-width: 775px;
+            margin: auto;
+            margin-bottom: 30px;
+        }
+        .grid {
+            display: flex;
+            flex-wrap: wrap;
+            gap: var(--row-gap) var(--col-gap);
+            .grid-item {
+                display: flex;
+                flex-direction: column;
+                .image {
+                    width: 100%;
+                    margin-bottom: 20px;
+                    img {
+                        width: 100%;
+                        height: auto;
+                    }
+                }
+                .h3 {
+                    margin-bottom: 5px;
+                }
+            }
+        }
+        &:not(:last-child) {
+            margin-bottom: 50px;
+        }
+    }
+
+    .grid-item {
+        max-width: calc((100% - (var(--col-gap) * (var(--items-in-row) - 1))) / var(--items-in-row));
+    }
+    @media screen and (max-width: 650px) {
+        --items-in-row: 1;
+        --row-gap: 25px;
+        .grid {
+            justify-content: center;
+        }
+    }
+
+    @media screen and (max-width: 900px) {
+        .main-text {
+            margin-bottom: 25px;
+        }
+    }
+}

package/src/components/about-us-team-members/config.js

@@ -0,0 +1,5 @@
+export const aboutUsTeamMembers = {
+  tag: 'about-us-team-members',
+  src: '@gudhub/ssg-web-component-library/src/components/about-us-team-members/about-us-team-members.js',
+  serverOnly: false
+}

package/src/components/animation-block/animation-block-data.json

@@ -0,0 +1,40 @@
+{
+    "title": "Інтеграції CRM для Бізнесу",
+    "subtitle": "Поєднайте інструменти, якими ви користуєтеся разом з вашим бізнесом для максимальної продуктивності та ефективності компанії.",
+    "buttons": [
+      {
+        "class": "btn",
+        "text": "Спробувати CRM"
+      },
+      {
+        "class": "btn empty",
+        "text": "Більше Інтеграцій"
+      }
+    ],
+    "rows": [
+      {
+        "row": [
+          {
+            "src": "/assets/images/slack.jpg",
+            "title": "Slack",
+            "alt": "Slack"
+          },
+          {
+            "src": "/assets/images/telegram.jpg",
+            "title": "Telegram",
+            "alt": "Telegram"
+          },
+          {
+            "src": "/assets/images/slack.jpg",
+            "title": "Slack",
+            "alt": "Slack"
+          },
+          {
+            "src": "/assets/images/telegram.jpg",
+            "title": "Telegram",
+            "alt": "Telegram"
+          }
+        ]
+      }
+    ]
+  }

package/src/components/animation-block/animation-block.html

@@ -0,0 +1,37 @@
+<section class="animation-block">
+    <div class="container">
+        <h2 gh-id="${ghId}.title"></h2>
+        <p class="subtitle" gh-id="${ghId}.subtitle"></p>
+        <div class="rows-wrapper">
+            ${
+                rows.reduce((acc, row, rowIndex) => {
+                    return acc + `
+                    <div class="row">
+                        ${
+                            row.row.reduce((acc, row_item, index) => {
+                                return acc + `
+                                    <div class="item">
+                                        <div class="icon-wrapper">
+                                            <img src="${row_item.image.src}" alt="${row_item.image.alt}" title="${row_item.image.title}">
+                                        </div>
+                                        <div class="item-text">
+                                            <div class="bold" gh-id="${ghId}.rows.${rowIndex}.row.${index}.title"></div>
+                                            <span gh-id="${ghId}.rows.${rowIndex}.row.${index}.subtitle"></span>
+                                        </div>
+                                    </div>
+                                `
+                            }, '')
+                        }
+                    </div>
+                    `
+                }, '')
+            }
+            ${json.buttons ? `
+                <div class="buttons">
+                    <button-component class="btn" data-popup-id="${json.buttons.primary.popupId}" data-placement="${json.buttons.primary.placement}">${json.buttons.primary.text}</button-component>
+                    <button-component class="btn empty" data-popup-id="${json.buttons.secondary.popupId}" data-placement="${json.buttons.secondary.placement}">${json.buttons.secondary.text}</button-component>
+                </div>
+            ` : ''}
+        </div>
+    </div>
+</section>

package/src/components/animation-block/animation-block.js

@@ -0,0 +1,23 @@
+import html from './animation-block.html';
+import './animation-block.scss';
+import jsonTemplate from './animation-block-data.json';
+class AnimationBlock extends GHComponent {
+    constructor() {
+        super();
+        super.setDefaultData(jsonTemplate);
+    }
+
+    async onServerRender() {
+        this.ghId = this.getAttribute('data-gh-id') || null;
+
+        
+        this.json = await super.getGhData(this.ghId);
+        this.rows = this.json.rows;
+        this.buttons = this.json.buttons;
+
+        super.render(html);
+    }
+
+}
+
+window.customElements.define('animation-block', AnimationBlock);