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

<template>
    <div class="oasis-features text-center">

        <div class="title-wrapper container">
            <h3 class="main-title-sm">
                {{ $t('homepage_feature_title') }}
            </h3>
            <h4 class="sub-title-sm">
                {{ $t('homepage_feature_description') }}
            </h4>
        </div>

        <ul class="features-box container">
            <li v-for="(feature, i) in features" :key="i" class="box">
                <cloud-icon v-if="feature.icon === 'cloud'" size="72" class="box-icon" />
                <file-text-icon v-if="feature.icon === 'file'" size="72" class="box-icon" />
                <lock-icon v-if="feature.icon === 'lock'" size="72" class="box-icon" />

                <h5 class="box-title">
                    {{ feature.title }}
                </h5>
                <p class="box-description">
                    {{ feature.excerp }}
                </p>
                <!--<div class="box-more-info">
                    <span>{{ $t('more_info') }}</span>
                    <chevron-right-icon size="18" class="icon" />
                </div>-->
            </li>
        </ul>

        <router-link :to="{name: 'SignUp'}" class="base-button theme-color cta">
            {{ $t('try_drive') }}
        </router-link>

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

<script>
    import {
        ChevronRightIcon,
        FileTextIcon,
        CloudIcon,
        LockIcon,
    } from 'vue-feather-icons'
    import {mapGetters} from 'vuex'
    import axios from 'axios'

    export default {
        name: 'OasisFeatures',
        components: {
            ChevronRightIcon,
            FileTextIcon,
            CloudIcon,
            LockIcon,
        },
        computed: {
            ...mapGetters([
                'config'
            ]),
        },
        data() {
            return {
                features: [
                    {
                        icon: 'lock',
                        title: this.$t('feature_1_title'),
                        excerp: this.$t('feature_1_description'),
                        content: '',
                    },
                    {
                        icon: 'file',
                        title: this.$t('feature_2_title'),
                        excerp: this.$t('feature_2_description'),
                        content: '',
                    },
                    {
                        icon: 'cloud',
                        title: this.$t('feature_3_title'),
                        excerp: this.$t('feature_3_description'),
                        content: '',
                    },
                ]
            }
        },
    }
</script>

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

    .oasis-features {
        background: $theme-bg-dark;
        padding-top: 90px;
        position: relative;

        .title-wrapper {
            margin-bottom: 90px;
        }

        .main-title-sm {
            color: white;
            max-width: 690px;
            margin-left: auto;
            margin-right: auto;
        }

        .sub-title-sm {
            margin: 0 auto;
            color: $text-dark-subtitle;
        }

        .features-box {
            margin-bottom: -230px;
        }

        .cta {
            top: 300px;
            position: relative;
        }

        .wave-background {
            transform: translateY(100%);
            position: absolute;
            width: 100%;
            z-index: 0;
            bottom: 3px;
            left: 0;
            right: 0;
        }
    }

    .features-box {
        grid-template-columns: 1fr 1fr 1fr;
        position: relative;
        display: grid;
        z-index: 1;
        gap: 60px;

        .box {
            background: $theme-bg-light;
            box-shadow: 0 22px 34px -20px #232142;
            border-radius: 12px;
            text-align: center;
            padding: 40px 25px 45px;
            display: block;

            .box-title {
                color: white;
                margin-top: 22px;
                margin-bottom: 25px;
                @include font-size(32);
            }

            .box-description {
                color: $text-dark-secondary;
                @include font-size(19);
                line-height: 1.55;
                margin-bottom: 25px;
            }

            .box-more-info {
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;

                .icon {
                    margin-left: 5px;

                    polyline {
                        stroke: $theme;
                        stroke-width: 1.2;
                        @include transition(150ms);
                    }
                }

                span {
                    @include font-size(17);
                    color: $theme;
                    font-weight: 700;
                    @include transition(150ms);
                }

                &:hover {
                    span, polyline {
                        stroke: lighten($theme, 10%);
                        stroke-width: 1.2;
                    }
                }
            }

            &:nth-child(1) {

                .box-icon {
                    rect, path {
                        stroke: $theme;
                        stroke-width: 1.2;
                    }
                }
            }

            &:nth-child(2) {

                .box-icon {
                    line, polyline, path {
                        stroke: $cyan;
                        stroke-width: 1.2;
                    }
                }
            }

            &:nth-child(3) {

                .box-icon {
                    path {
                        stroke: $pink;
                        stroke-width: 1.2;
                    }
                }
            }
        }
    }

    @media only screen and (max-width: 1370px) {
        .features-box {
            gap: 30px;
        }
    }

    @media only screen and (max-width: 1024px) {

        .oasis-features {
            padding-top: 60px;

            .title-wrapper {
                margin-bottom: 65px;
            }

            .main-title-sm {
                max-width: 600px;
            }

            .cta {
                top: 280px;
            }
        }

        .features-box {
            max-width: 700px;
            margin: 0 auto;
            grid-template-columns: 1fr;
        }
    }

    @media only screen and (max-width: 960px) {

        .oasis-features .main-title-sm {
            max-width: 440px;
        }

        .features-box {

            .box {

                .box-title {
                    @include font-size(26);
                }

                .box-description {
                    @include font-size(18);
                    line-height: 1.55;
                }
            }
        }
    }

    @media (prefers-color-scheme: dark) {


    }

</style>