@gudhub/ssg-web-components-library 1.0.0

package/src/components/edit-mode/edit-mode.scss

@@ -0,0 +1,69 @@
+body.edit-mode-enabled {
+    [gh-id] {
+        &:hover {
+            outline: 1px solid #2b61fa;
+        }
+    }
+}
+
+edit-mode {
+    margin-top: 15px;
+    margin-bottom: 15px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+
+    .edit-mode-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .edit-mode-switch {
+        height: 0;
+        width: 0;
+        visibility: hidden;
+    }
+
+    .edit-mode-label {
+        cursor: pointer;
+        text-indent: -9999px;
+        width: 60px;
+        height: 30px;
+        background: #dbdbdb;
+        display: block;
+        border-radius: 100px;
+        position: relative;
+    }
+
+    .edit-mode-label:after {
+        content: "";
+        position: absolute;
+        top: 2px;
+        left: 2px;
+        width: 26px;
+        height: 26px;
+        background: #fff;
+        border-radius: 90px;
+        transition: 0.3s;
+    }
+
+    .edit-mode-switch:checked + .edit-mode-label {
+        background: #2b61fa;
+    }
+
+    .edit-mode-switch:checked + .edit-mode-label:after {
+        left: calc(100% - 2px);
+        transform: translateX(-100%);
+    }
+
+    .edit-mode-label:active:after {
+        width: 36px;
+    }
+    
+    p {
+        font-size: 24px;
+        color: #fff;
+    }
+}

package/src/components/faq/config.js

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

package/src/components/faq/faq.html

@@ -0,0 +1,20 @@
+<section itemscope="" itemtype="https://schema.org/FAQPage" class="faq">
+    <div class="container">
+        <h2 gh-id="${ghId}.title">FAQ</h2>
+        <div class="block_faq">
+            ${
+                items.reduce((acc, item, index) => {
+                    return acc + `
+                <div onclick="openItem()" class="faq_item ${index === 0 ? 'active' : '' }" itemscope="" itemprop="mainEntity" itemtype="https://schema.org/Question">
+                    <h3 itemprop="name" gh-id="${ghId}.items.${index}.question"> QUESTION </h3>
+                    <div class="answer_wrapper" itemscope="" itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
+                        <div class="answer" itemprop="text" gh-id="${ghId}.items.${index}.answer">
+                            ANSWER
+                        </div>
+                    </div>
+                </div>
+                `}, '')
+            }
+        </div>
+    </div>
+</section>

package/src/components/faq/faq.js

@@ -0,0 +1,40 @@
+import html from './faq.html';
+import './faq.scss';
+
+class Faq extends GHComponent {
+    /**
+     * data-background - set background color in hex or rgb/a
+     */
+    constructor() {
+        super();
+    }
+
+    async onServerRender() {
+        this.ghId = this.getAttribute('data-gh-id') || null;
+        
+        const json = await super.getGhData(this.ghId);
+
+        this.items = json.items;
+        
+        const background = this.hasAttribute('data-background') ? this.getAttribute('data-background') : '#fff';
+
+        this.style.setProperty('--background', background);
+
+        super.render(html);
+    }
+
+    openItem(item) {
+        let items = this.querySelectorAll('.faq_item');
+        if (item.classList.contains('active')) {
+            item.classList.remove('active')
+        } else {
+            items.forEach(element => {
+                element.classList.remove('active')
+            });
+            item.classList.add('active')
+        }
+    }
+
+}
+
+window.customElements.define('faq-component', Faq);

package/src/components/faq/faq.scss

@@ -0,0 +1,80 @@
+.faq {
+    background: var(--background);
+    h2 {
+        text-align: center;
+    }
+    .block_faq {
+        width: 100%;
+        max-width: 1000px;
+        margin: 0 auto;
+    }
+    .faq_item {
+        background: var(--background);
+        border-bottom: 1px solid #141616;
+        cursor: pointer;
+
+        h3 {
+            color: #141616;
+            padding: 30px 50px;
+            margin-bottom: 0;
+            position: relative;
+            &::before {
+                content: '';
+                position: absolute;
+                top: calc(50% - 1px);
+                left: 0;
+                width: 20px;
+                height: 2px;
+                background-color: #141616;
+                transition: all .2s ease;
+            }
+            &::after {
+                content: '';
+                position: absolute;
+                top: calc(50% - 10px);
+                left: 9px;
+                width: 2px;
+                height: 20px;
+                background-color: #141616;
+                transition: all .2s ease;
+            }
+        }
+        .answer_wrapper {
+            height: 100%;
+            max-height: 0;
+            overflow: hidden;
+            transition: all .5s ease;
+            padding-bottom: 0;
+            font-weight: 400;
+            font-size: 16px;
+            line-height: 25px;
+            color: #4D555B;
+            ul {
+                list-style: disc;
+                padding-left: 20px;
+            }
+        }
+        &.active {
+            .answer_wrapper {
+                max-height: 1000px;
+                padding-bottom: 30px;
+            }
+            h3 {
+                &::after, &::before {
+                    transform: rotate(45deg);
+                }
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 600px) {
+    .faq .faq_item {
+        &.active .answer_wrapper {
+            padding-bottom: 20px;
+        }
+        h3 {
+            padding: 20px 30px;
+        }
+    }
+}

package/src/components/footer/config.js

@@ -0,0 +1,5 @@
+export const footerComponent = {
+  tag: 'footer-component',
+  src: '@gudhub/ssg-web-component-library/src/components/footer/footer.js',
+  serverOnly: true
+}

package/src/components/footer/footer.html

@@ -0,0 +1,74 @@
+<footer>
+    <div class="container">
+        <div class="footer_top">
+            <div class="footer_left">
+                <div class="logo">
+                    <a href="/">
+                        <img src="/assets/images/logo.svg" width="160" height="43" alt="Logo" title="GudHub Logo">
+                    </a>
+                </div>
+                <div class="like_a_list">
+                    <a target="blank" href="https://twitter.com/Gudhubplatform">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path></svg>
+                    </a>
+                    <a target="blank" href="https://www.instagram.com/gudhub.platform/">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"></path></svg>
+                    </a>
+                    <a target="blank" href="https://www.facebook.com/gudhub.platform/">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"></path></svg>
+                    </a>
+                    <a target="blank" href="https://www.linkedin.com/company/gudhubplatform/">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z"></path></svg>
+                    </a>
+                </div>
+            </div>
+            <div class="footer_right">
+                <a href="tel:380632715470" class="item">
+                    <div class="icon_wrapper">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="33" height="32" viewBox="0 0 33 32" fill="none"><path d="M29.0349 32H28.8228C4.30739 30.6092 0.826574 10.2031 0.340008 3.97539C0.300803 3.49118 0.358833 3.00409 0.510774 2.54204C0.662715 2.08 0.90558 1.65207 1.22545 1.28277C1.54533 0.913477 1.93592 0.610077 2.37486 0.389956C2.8138 0.169835 3.29245 0.0373191 3.78339 1.15396e-06H10.6577C11.1574 -0.000476094 11.6458 0.14709 12.0595 0.423585C12.4733 0.70008 12.7933 1.09276 12.9782 1.55077L14.8746 6.15385C15.0572 6.60129 15.1025 7.09179 15.0049 7.56442C14.9073 8.03705 14.6711 8.47098 14.3256 8.81231L11.6682 11.4585C12.0833 13.7855 13.213 15.9307 14.9044 17.6036C16.5958 19.2766 18.7673 20.3967 21.1251 20.8123L23.8324 18.1662C24.1836 17.8291 24.6276 17.6015 25.109 17.5118C25.5905 17.4221 26.088 17.4741 26.5397 17.6615L31.2431 19.52C31.7004 19.7082 32.0905 20.0264 32.3638 20.4341C32.6371 20.8417 32.7812 21.3205 32.7777 21.8092V28.3077C32.7777 29.287 32.3834 30.2261 31.6815 30.9186C30.9795 31.611 30.0275 32 29.0349 32ZM4.08282 2.46154C3.75193 2.46154 3.4346 2.59121 3.20063 2.82202C2.96666 3.05284 2.83521 3.36589 2.83521 3.69231V3.79077C3.40911 11.0769 7.08954 28.3077 28.96 29.5385C29.1239 29.5485 29.2882 29.5264 29.4435 29.4736C29.5987 29.4209 29.7419 29.3384 29.8648 29.2309C29.9876 29.1234 30.0878 28.993 30.1595 28.8473C30.2311 28.7015 30.273 28.5433 30.2825 28.3815V21.8092L25.579 19.9508L21.9984 23.4585L21.3996 23.3846C10.5454 22.0431 9.07323 11.3354 9.07323 11.2246L8.99837 10.6338L12.5416 7.10154L10.6702 2.46154H4.08282Z" fill="white"/></svg>
+                    </div>
+                    <div class="text">
+                        <div class="title">Телефон</div>
+                        <div class="tel">063 271 54 70</div>
+                    </div>
+                </a>
+                <a href="https://maps.app.goo.gl/wnwvtjsjGqRLK58u5" target="_blank" class="item">
+                    <div class="icon_wrapper">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="38" height="36" viewBox="0 0 38 36" fill="none"><path d="M18.834 6.71875C17.6847 6.71875 16.5613 7.05481 15.6058 7.68443C14.6503 8.31405 13.9055 9.20895 13.4657 10.256C13.026 11.303 12.9109 12.4551 13.1351 13.5666C13.3593 14.6781 13.9127 15.6991 14.7253 16.5005C15.5379 17.3018 16.5732 17.8476 17.7004 18.0687C18.8275 18.2897 19.9958 18.1763 21.0575 17.7426C22.1193 17.3089 23.0267 16.5745 23.6652 15.6322C24.3037 14.6899 24.6445 13.582 24.6445 12.4488C24.6445 10.9291 24.0323 9.47161 22.9426 8.39703C21.8529 7.32245 20.375 6.71875 18.834 6.71875ZM18.834 16.1788C18.0859 16.1788 17.3546 15.96 16.7326 15.5501C16.1105 15.1403 15.6257 14.5577 15.3395 13.8762C15.0532 13.1946 14.9783 12.4446 15.1242 11.7211C15.2702 10.9975 15.6304 10.3329 16.1594 9.81124C16.6884 9.28959 17.3623 8.93434 18.096 8.79042C18.8298 8.6465 19.5903 8.72036 20.2814 9.00268C20.9726 9.28499 21.5633 9.76308 21.9789 10.3765C22.3945 10.9899 22.6164 11.711 22.6164 12.4488C22.6137 13.4363 22.214 14.3824 21.5049 15.0798C20.7959 15.7771 19.8354 16.1688 18.834 16.1688V16.1788Z" fill="white"/><path d="M18.8361 2C15.6776 2.0026 12.6484 3.23769 10.4102 5.4355C8.17201 7.63331 6.9067 10.6152 6.89062 13.73C6.89062 18.4 9.54744 22.31 11.4944 25.16L11.8493 25.68C13.7865 28.4486 15.8645 31.1187 18.0756 33.68L18.8463 34.57L19.617 33.68C21.8278 31.1185 23.9058 28.4484 25.8432 25.68L26.1982 25.15C28.135 22.3 30.7918 18.4 30.7918 13.73C30.7757 10.6135 29.509 7.63007 27.2686 5.43197C25.0283 3.23388 21.9965 1.99996 18.8361 2ZM24.5047 24L24.1396 24.53C22.3955 27.11 20.0834 30 18.8361 31.43C17.6396 30 15.2768 27.11 13.5327 24.53L13.1777 24C11.3829 21.36 8.91873 17.75 8.91873 13.69C8.91873 12.4057 9.17525 11.1339 9.67365 9.94736C10.172 8.76079 10.9026 7.68265 11.8235 6.7745C12.7444 5.86634 13.8377 5.14595 15.0409 4.65446C16.2442 4.16297 17.5338 3.91 18.8361 3.91C20.1385 3.91 21.4281 4.16297 22.6314 4.65446C23.8346 5.14595 24.9279 5.86634 25.8488 6.7745C26.7697 7.68265 27.5003 8.76079 27.9986 9.94736C28.497 11.1339 28.7536 12.4057 28.7536 13.69C28.7536 17.79 26.2996 21.4 24.5047 24Z" fill="white"/></svg>
+                    </div>
+                    <div class="text">
+                        <div class="title">Адреса</div>
+                        <div class="address">
+                            <div class="flag">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="12" viewBox="0 0 18 12" fill="none"><g clip-path="url(#clip0_223_3589)"><path d="M0 0H18V11.9998H0V0Z" fill="#FFDA44"></path><path d="M0 0H18V5.99988H0V0Z" fill="#338AF3"></path></g><defs><clipPath id="clip0_223_3589"><rect width="18" height="12" fill="white"></rect></clipPath></defs></svg>
+                            </div>
+                            <div class="text_address">Вінниця, Україна<br>пл. Калічанська, 2</div>
+                        </div>
+                    </div>
+                </a>
+                <a href="mailto:sales@gudhub.com" class="item">
+                    <div class="icon_wrapper">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="62" height="61" viewBox="0 0 62 61" fill="none">
+                            <path d="M45.4215 18H17.0281C16.4902 18 15.9744 18.2107 15.594 18.5858C15.2137 18.9609 15 19.4696 15 20V40C15 40.5304 15.2137 41.0391 15.594 41.4142C15.9744 41.7893 16.4902 42 17.0281 42H45.4215C45.9594 42 46.4753 41.7893 46.8556 41.4142C47.236 41.0391 47.4496 40.5304 47.4496 40V20C47.4496 19.4696 47.236 18.9609 46.8556 18.5858C46.4753 18.2107 45.9594 18 45.4215 18ZM43.8599 40H18.7114L25.8098 32.76L24.3496 31.37L17.0281 38.84V21.52L29.6328 33.89C30.0127 34.2625 30.5268 34.4716 31.0626 34.4716C31.5984 34.4716 32.1124 34.2625 32.4924 33.89L45.4215 21.21V38.71L37.9581 31.35L36.5283 32.76L43.8599 40ZM18.3565 20H43.7788L31.0626 32.47L18.3565 20Z" fill="white"/>
+                          </svg>
+                    </div>
+                    <div class="text">
+                        <div class="title">E-mail</div>
+                        <div class="email">sales@gudhub.com</div>
+                    </div>
+                </a>
+            </div>
+        </div>
+        <div class="footer_bottom">
+            <div class="bottom_flex">
+                <div class="left">
+                    <div class="copyright">© ${new Date().getFullYear()} GudHub</div>
+                    <edit-mode></edit-mode>
+                </div>
+                <div class="right">
+                    <a href="https://atlasiko.com/services/web-development-services/" target="_blank">Web Development by Atlasiko Inc.</a>
+                </div>
+            </div>
+        </div>
+    </div>
+</footer>

package/src/components/footer/footer.js

@@ -0,0 +1,21 @@
+import html from './footer.html';
+import './footer.scss';
+
+class FooterComponent extends GHComponent {
+    
+    constructor() {
+        super();
+    }
+
+    async onServerRender() {
+        
+
+        super.render(html);
+
+    }
+
+}
+
+if(!customElements.get('footer-component')) {
+    customElements.define('footer-component', FooterComponent);
+}

package/src/components/footer/footer.scss

@@ -0,0 +1,356 @@
+footer {
+    background-color: #141616;
+    .footer_top {
+        padding: 30px 0;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-bottom: 1px solid #4D555B;
+        .soc_list {
+            display: flex;
+            align-items: center;
+            list-style: none;
+            svg path {
+                transition: all .2s ease;
+            }
+            li {
+                margin-right: 40px;
+                a {
+                    &:hover {
+                        svg path {
+                            fill: #00BFD6;
+                        }
+                    }
+                }
+                &:last-child {
+                    margin-right: 0;
+                }
+            }
+        }
+        .logo {
+            width: 100%;
+            max-width: 160px;
+        }
+        .like_a_list {
+            display: flex;
+            gap: 40px;
+            margin-top: 40px;
+            a {
+                width: 25px;
+                height: 25px;
+            }
+            svg path {
+                fill: #fff;
+            }
+        }
+        .footer_right {
+            display: flex;
+            align-items: center;
+            gap: 30px;
+            a {
+                display: flex;
+                align-items: center;
+                gap: 10px;
+                color: #fff;
+                .icon_wrapper {
+                    background-color: #2c2c2e;
+                    border-radius: 50%;
+                    width: 60px;
+                    height: 60px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    transition: all .2s ease;
+                }
+                .email, .address, .tel {
+                    transition: all .2s ease;
+                }
+                &:hover {
+                    .email, .address, .tel {
+                        color: #0A79FE;
+                    }
+                    .icon_wrapper {
+                        background-color: #0A79FE;
+                    }
+                }
+                .title {
+                    margin-bottom: 5px;
+                }
+                .address {
+                    display: flex;
+                    gap: 5px;
+                }
+            }
+        }
+    }
+    .footer_middle {
+        padding-top: 45px;
+        padding-bottom: 30px;
+        .like_a_title {
+            font-size: 24px;
+            line-height: 40px;
+            color: #fff;
+            margin-bottom: 30px;
+        }
+        .column {
+            margin-right: 5px;
+            width: 100%;
+            &:first-child {
+                max-width: 608px;
+            }
+            ul {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: space-between;
+            }
+            li {
+                width: 48%;
+            }
+            &:nth-child(2) {
+                max-width: 400px;
+            }
+            &:last-child {
+                margin-right: 0;
+            }
+            ul {
+                list-style: none;
+            }
+            li {
+                a {
+                    color: #DBE2E7;
+                    font-size: 16px;
+                    line-height: 22px;
+                    transition: all .2s ease;
+                    &:hover {
+                        color: #00BFD6;
+                    }
+                }
+                margin-bottom: 20px;
+                &:last-child {
+                    margin-bottom: 0;
+                }
+            }
+        }
+        .footer_contact {
+            max-width: 340px;
+            &_item {
+                margin-bottom: 15px;
+                a {
+                    font-size: 16px;
+                    line-height: 22px;
+                    color: #fff;
+                    transition: all .2s ease;
+                    &:hover {
+                        color: #00BFD6;
+                    }
+                    span {
+                        color: #00BFD6;
+                    }
+                }
+            }
+        }
+        .footer_columns {
+            display: flex;
+            justify-content: space-between;
+        }
+    }
+    .footer_bottom {
+        border-top: 1px solid #4D555B;
+        padding: 24px 0;
+        .bottom_flex {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .left {
+                display: flex;
+                align-items: center;
+                .copyright {
+                    margin-right: 10px;
+                    color: #878787;
+                    font-size: 16px;
+                    white-space: nowrap;
+                }
+            }
+            .right {
+                a {
+                    color: #DBE2E7;
+                    font-size: 16px;
+                    line-height: 22px;
+                    transition: all 0.2s ease;
+                    &:hover {
+                        color: #00BFD6;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 1200px) {
+    footer {
+        .footer_middle {
+            padding-top: 30px;
+            .footer_columns {
+                flex-wrap: wrap;
+                justify-content: initial;
+            }
+            .column {
+                width: 47%;
+                max-width: 100% !important;
+                margin-bottom: 20px;
+                margin-right: 15px;
+                &:nth-child(2n) {
+                    margin-right: 0;
+                }
+                li {
+                    margin-bottom: 15px;
+                    a {
+                        display: block;
+                    }
+                }
+            }
+            .like_a_title {
+                margin-bottom: 15px;
+            }
+        }
+    }
+}
+@media screen and (max-width: 1050px) {
+    footer .footer_top {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 30px;
+        .like_a_list {
+            margin-top: 30px;
+        }
+        .footer_right {
+            justify-content: space-between;
+            width: 100%;
+        }
+    }
+}
+@media screen and (max-width: 850px) {
+    footer .footer_middle {
+        .footer_columns {
+            flex-direction: column;
+        }
+        .column {
+            width: 100%;
+        }
+    }
+}
+
+@media screen and (max-width: 775px) {
+    footer .footer_top .footer_right {
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 30px 40px;
+        a {
+            &:first-child {
+                order: 1;
+            }
+            &:nth-child(3) {
+                order: 2;
+            }
+            &:nth-child(2) {
+                order: 3;
+                width: 100%;
+                justify-content: center;
+            }
+        }
+    }
+}
+@media screen and (max-width: 600px) {
+    footer .footer_top .soc_list {
+        justify-content: flex-end;
+    }
+    footer .footer_bottom .bottom_flex {
+        flex-direction: column;
+        .left {
+            width: 100%;
+        }
+        .right {
+            width: 100%;
+        }
+    }
+}
+@media screen and (max-width: 550px) {
+    footer {
+        .footer_middle {
+            .column {
+                width: 100%;
+                margin-right: 0;
+                li a {
+                    display: block;
+                }
+                &:first-child {
+                    ul {
+                        flex-direction: column;
+                        li {
+                            width: 100%;
+                        }
+                    }
+                }
+                &:nth-child(2), &:nth-child(2) {
+                    width: 100%;
+                    max-width: 100%;
+                }
+                &.footer_contact {
+                    margin-bottom: 0;
+                }
+            }
+            .footer_contact_item:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
+}
+@media screen and (max-width: 480px) {
+    footer .footer_top .footer_right a {
+        width: 100%;
+        &:nth-child(2) {
+            justify-content: flex-start;
+        }
+    }   
+}
+@media screen and (max-width: 450px) {
+    footer {
+        .footer_top {
+            .footer_menu ul {
+                flex-direction: column;
+                li {
+                    margin-bottom: 10px;
+                    a {
+                        padding-right: 0;
+                        &::after {
+                            content: none;
+                        }
+                    }
+                }
+            }
+            .footer_right {
+                align-items: flex-start;
+            }
+        }
+    }
+    footer .footer_middle .column:nth-child(2) {
+        ul {
+            flex-direction: column;
+            li {
+                width: 100%;
+            }
+        }
+    }
+}
+@media screen and (max-width: 400px) {
+    footer .footer_top .soc_list {
+        justify-content: flex-start;
+    }
+    footer .footer_left {
+        margin-bottom: 20px;
+    }
+    
+    footer .footer_top {
+        flex-direction: column;
+    }
+}