web/client/src/views/Home.vue

<script setup></script>

<template>
    <div class="container">
        <RouterLink to="#" class="box">
            <i class="fa-solid fa-video"></i>
            <p class="box__description">Real Time</p>
        </RouterLink>

        <RouterLink :to="{ name: 'VideoStreaming' }" class="box">
            <i class="fa-solid fa-upload"></i>
            <p class="box__description">Video Upload</p>
        </RouterLink>
    </div>
</template>

<style lang="scss" scoped>
.container {
    margin-top: 10rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4rem;

    .box {
        width: 20%;
        max-width: 200px;
        aspect-ratio: 1 / 1;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 1.2rem;
        cursor: pointer;
        border: 4px solid var(--primary-color);
        border-radius: 10%;
        box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset,
            rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
            rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
        transition: all 0.2s ease-in;

        i {
            font-size: 3rem;
            color: var(--primary-color);
        }

        &__description {
            font-size: 1.2rem;
            font-weight: 500;
            text-transform: uppercase;
            color: var(--secondary-color);
            transform: translateY(10px);
        }

        &:hover {
            transform: scale(1.05);
        }
    }
}
</style>