Project-XR-website/docs/.vuepress/components/Plans.vue

<template>
    <section id="Plans">
        <div id="StepsContainer">
            <div class="TextContainer">
                <h2>How does it work</h2>
            </div>
            <div class="Steps">
                <div class="Step">
                    <h3>Step 1</h3>
                    <span id="Line"></span>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                </div>
                <div class="Step">
                    <h3>Step 2</h3>
                    <span id="Line"></span>
                    <p>Fugiat ex sunt quis minim pariatur tempor officia ad occaecat duis ea nisi ea et.</p>

                </div>
                <div class="Step">
                    <h3>Step 3</h3>
                    <span id="Line"></span>
                    <p>Sunt quis reprehenderit sit eiusmod cillum voluptate dolore enim adipisicing nostrud labore.</p>
                </div>
            </div>
            <button @click="goToOtherPage(3)" class="button">read more</button>
        </div>
        <div class="PlansContainer">
            <div class="TextContainer">
                <h2>Plans & Prizing</h2>
            </div>
            <div class="Plans">
                <div class="Plan" tabindex="0">
                    <div class="TextContainer2">
                        <h3 id="h3">Monthly sponsorship</h3>
                        <span id="Line"></span>

                    </div>
                    <button @click="goToOtherPage(3)" class="Choose">Choose this plan</button>
                </div>
                <div class="Plan" tabindex="0">
                    <div class="TextContainer2">
                        <h3 id="h3">Weekly sponsorship</h3>
                        <span id="Line"></span>

                    </div>
                    <button @click="goToOtherPage(2)" class="Choose">Choose this plan</button>
                </div>
                <div class="Plan" tabindex="0">
                    <div class="TextContainer2">
                        <h3 id="h3">Dayly sponsorship</h3>
                        <span id="Line"></span>


                    </div>
                    <button @click="goToOtherPage(2)" class="Choose">Choose this plan</button>
                </div>
            </div>
        </div>
    </section>
</template>
<script>
// import { useRouter } from 'vue-router';
import { ref } from 'vue';

export default {

    methods: {
        goToOtherPage(To) {
            this.$router.push({
                path: '/context', // Use the correct route without `.md`
                query: { someData: To } // Pass data via query parameters
            });
        }
    }
};
</script>

<style scoped>
#Plans {
    position: relative;
    height: 90vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 50px;
    margin-bottom: 0;
}

#StepsContainer {
    height: 40vw;
    position: relative;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    top: -10%;
    width: 80%;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.9);
    background-color: white;
    z-index: 1;
}

.Steps {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    padding: 0 10%;
    width: 100%;
    /* transition: all 1s ease; */
    /* margin-bottom: 10%; */
}

.Step {
    display: flex;
    flex-direction: column;
    width: 25%;
}
.Step p {
    font-size: 1.5vw;
}

#Line {
    display: block;
    background-color: black;
    width: 40%;
    height: 3px;
    margin-top: 3%;
}

.button {
    position: absolute;
    bottom: 5%;
}




#StepsContainer .TextContainer {
    display: flex;
    position: absolute;
    top: 5%;
    /* padding-left: 10%; */
    /* width: 100%; */
}
#StepsContainer .TextContainer h2 {
   font-size: 2vw;
}

.PlansContainer .TextContainer {
    display: flex;
    position: absolute;
    left: 15%;
    top: 45%;
    /* padding-left: 10%; */
    /* width: 100%; */
    /* margin-bottom: 10%; */
}



.Plan .TextContainer2 {
    position: absolute;
    left: 0;
    top: 0;
    padding: 10% 5%;
}

.Plan .TextContainer2 #h3 {
    font-size: 1.5vw;
    text-align: left;
    font-weight: 400;
    /* border-bottom: solid black; */

}

.PlansContainer {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-top: 10%;
    background-color: #8e97a3;
}

.Plans {
    display: flex;
    flex-direction: row;
    gap: 20px;
    position: absolute;
    bottom: 150px;

}

.Plan {
    cursor: pointer;
    position: relative;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20vw;
    background-color: #758795;
    height: 30vw;
    /* scale: 0.9; */
    transition: all 0.2s ease-in;

}

.Plan:hover {
    background-color: #ecebec;
    /* scale: 1.1; */
}

.Plan:focus {
    background-color: #ecebec;
    scale: 1.1;
}

.Choose {
    position: absolute;
    bottom: 10px;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    border-bottom: solid black;
    width: 15vw;

}

.Plan:focus .Choose {

    border-radius: 5px;
    border: solid black;
    transition: all 0.2s ease-in;

}
</style>