vuefilemanager/resources/js/Oasis/Homepage/Components/OasisAboutUs.vue

<template>
    <div id="o-nas" class="oasis-about-us">
        <div class="container">
            <div class="content-wrapper">
                <div class="title-wrapper">
                    <h3 class="main-title-sm">
                        Kto Jsme?
                    </h3>
                    <h4 class="sub-title-sm">
                        Jsme česká společnost, která pro fyzické a právnické osoby (živnostníky a firmy) poskytuje cloudové uložiště dle evropské směrnice (GDPR) a následného zákona o zpracování osobních údajů (zákon 110/2019 sb.).
                    </h4>
                </div>
                <ul class="info-list">
                    <li v-for="(item, i) in infoList" :key="i" class="info-list-item">
                        <check-icon size="30" class="icon" />
                        <p class="description">{{ item }}</p>
                    </li>
                </ul>
                <router-link :to="{name: 'SignUp'}" class="base-button theme-color">
                    Vyzkouset OasisDrive
                </router-link>
            </div>
        </div>

        <img src="/oasis/about-us-background.svg" alt="oasis-about-us" class="hero">
    </div>
</template>

<script>
    import {CheckIcon} from 'vue-feather-icons'

    export default {
        name: 'OasisAboutUs',
        components: {
            CheckIcon,
        },
        data() {
            return {
                infoList: [
                    'Zakládáme si na kvalitě a nejlepší možné bezpečnosti pro uchovávání a zpracování dat a dokumentů.',
                    'Spolupracujeme rovněž se specialisty v oboru práva a IT.',
                    'Důležitá je pro nás uživatelská jednoduchost, stoprocentní funkčnost a přehlednost.',
                    'Bezpečnost uložení dat tak, jak nařizuje směrnice EU (GDPR) a zákon o zpracování osobních údajů.',
                ]
            }
        },
    }
</script>

<style lang="scss" scoped>
    @import '@assets/oasis/_components';
    @import '@assets/oasis/_homepage';
    @import '@assets/oasis/_responsive';

    .content-wrapper {
        margin-bottom: -860px;
        padding-left: 22%;
    }

    .hero {
        width: 100%;
        margin-bottom: -10px;
    }

    .oasis-about-us {
        padding-top: 150px;

        .sub-title-sm {
            max-width: 890px;
        }
    }

    .info-list {
        margin: 65px 0;

        .info-list-item {
            display: flex;
            align-items: start;
            margin-bottom: 40px;

            &:last-child {
                margin-bottom: 0;
            }

            .icon {
                margin-top: 5px;
                margin-right: 15px;

                polyline {
                    color: $pink;
                }
            }

            .description {
                max-width: 700px;
                @include font-size(24);
                color: $text-primary;
                font-weight: 800;
                line-height: 1.5;
            }
        }
    }

    @media only screen and (max-width: 960px) {
        .info-list {
            margin: 65px 0;

            .info-list-item {
                display: flex;
                align-items: start;
                margin-bottom: 40px;

                .description {
                    max-width: 700px;
                    @include font-size(19);
                    color: $text-primary;
                    font-weight: 800;
                    line-height: 1.5;
                }
            }
        }
    }
</style>