Agregue todo el contenido que faltaba, solo falta el responsive, url …

…de algunos links y detalles

frontend/src/assets/main.scss

@@ -9,7 +9,7 @@ html{
 .nav-link{
     padding: 0 !important;
     height: 2rem;
-    font-size: 1.2rem;
+    font-size: 1.3rem;
     display: flex;
     align-items: center;
 }
@@ -56,16 +56,17 @@ ul{
     vertical-align: top;
 }
 .lone-h2{
-    margin-bottom: 9rem!important;
+    margin-bottom: 15vh!important;
 }
-// @media only screen and (768px <= width <= 992px) {
-//     html{
-//         font-size: 15px;
-//     }
-// }
+@media only screen and (768px <= width <= 992px) {
+    html{
+        font-size: 14px;
+    }
+}
+
 @media only screen and (576px <= width <= 768px) {
     html{
-        font-size: 14.2px;
+        font-size: 13.5px;
     }
     .space-left{
         margin: 5vw;

frontend/src/components/premium/Formulario_pago.vue → frontend/src/components/empresas/FormularioPago.vue

@@ -8,31 +8,32 @@
                     <h4 class="modal-title fs-5" id="staticBackdropLabel">
                         {{ titulo_plan }}
                     </h4>
-                    <button type="button" data-bs-dismiss="modal" aria-label="Close" class="rounded-3"><svg
+                    <button type="button" data-bs-dismiss="modal" aria-label="Close" class="p-0 border-dark-subtle rounded-3 m-auto me-0">
+                        <svg
                             xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor"
-                            class="bi bi-x-square-fill" viewBox="0 0 16 16" loading="lazy">
+                            class="bi bi-x-square-fill w-100" viewBox="0 0 16 16" loading="lazy">
                             <path
                                 d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm3.354 4.646L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 1 1 .708-.708" />
-                        </svg></button>
+                        </svg>
+                    </button>
                 </div>
                 <div class="modal-body">
-                    <p class="h2">Gracias por elegir nuestro servicio!</p>
-                    <p class="text-start m-auto fw-light" style="width: 90%; font-size: 17px">Para completar tu compra,
+                    <p class="h3 w-auto m-0 m-auto mb-3">Gracias por elegir nuestro servicio!</p>
+                    <p class="text-start fw-light" style="width: 90%; font-size: 17px">Para completar tu compra,
                         necesitamos que nos proporciones tu
                         correo electrónico. Te enviaremos un email con un enlace seguro
                         para que puedas realizar el pago con el método que prefieras.
                     </p>
-                    <form action="https://formsubmit.co/[email protected]" method="POST" class="mt-4">
-                        <div class="mb-3 m-auto" style="width: 90%;">
-                            <label class="text-start d-block ">Correo
+                    <form action="" method="POST" class="mt-4 clas d-flex flex-column align-items-start">
+                        <div class="mb-3" style="width: 90%;">
+                            <label class="text-start d-block mb-2">Correo
                                 electronico:</label>
                             <div>
                                 <input type="email" class="form-control m-auto bg-dark-subtle" name="email"
                                     placeholder="[email protected]">
                             </div>
                         </div>
-                        <input type="submit" class="btn btn-outline-secondary w-25">
-                        <input type="hidden" name="_next" value="https://sugar.coach/premium">
+                        <input type="submit" class="btn btn-outline-secondary w-25 align-self-center">
                     </form>
                     <p class="mt-4 lead">Si tienes alguna duda o problema, puedes
                         contactarnos a [email protected]</p>
@@ -46,7 +47,7 @@
 </template>
 
 <script setup>
-name: 'Formulario_pago';
+name: 'formularioPago';
 props: ['titulo_plan'];
 
 </script>

frontend/src/components/empresas/PlanesEmpresas.vue

@@ -0,0 +1,29 @@
+<template>
+    <section>
+        <h2 class="text-center lone-h2">Elije tu plan ideal</h2>
+        <div class="d-flex justify-content-center gap-5 flex-wrap">
+            <paquetePremium v-for="item in props.paquetes" :key="item.id" :title="item.title"
+                :price="item.price" :texto-btn="item.btnText" :btn-url="item.btnUrl"  :beneficios="item.beneficios"
+                :color="props.color" :mensual="item.mensual"/>
+        </div>
+    </section>
+
+</template>
+
+<script setup>
+import paquetePremium from '../reutilizable/design/paquetePremium.vue';
+
+name: "planesPremium";
+components: [paquetePremium]
+const props = defineProps({
+    paquetes: {
+        type: Object,
+    },
+    color: {
+        type: String,
+        default: '#FFB800',
+    }
+})
+</script>
+
+<style scoped lang="scss"></style>

frontend/src/components/home/Contactanos.vue

@@ -8,7 +8,7 @@
                 illum
                 distinctio libero tempore maxime eos enim voluptas eum temporibus totam incidunt fuga consequatur quis
                 architecto repudiandae?</p>
-            <ctaBtn class="cta">Sobre nosotros</ctaBtn>
+            <ctaBtn class="cta" url="/about">Sobre nosotros</ctaBtn>
         </header>
         <formulario class="form me-0 me-xl-4" />
     </section>

frontend/src/components/home/sectionPremium.vue

@@ -1,5 +1,5 @@
 <template>
-    <sectionDividers>
+    <sectionDividers img_url="/contenido/corona.png" img_alt="corona">
         <header>
             <h2 class="text-center">SugarCoach Premium</h2>
             <h3 class="text-center">Obten nuevas funcionalidades</h3>

frontend/src/components/premium/Premios.vue

@@ -1,12 +1,12 @@
 <template>
-    <sectionDividers>
+    <sectionDividers img_url="/contenido/trofeo.png" img_alt="trofeo">
         <div class="d-flex align-items-center justify-content-center mb-5 w-100 ">
             <h2 class="text-center">Premios</h2>
             <trofeo size="50px" color="#FFB800"/>
         </div>
 
         <div class="contenedor-premios d-grid m-0 m-auto pt-4">
-            <img v-for="item in premios" :key="item.id" :src="item.url" :alt="item.alt">
+            <img class="m-auto m-0" v-for="item in premios" :key="item.id" :src="item.url" :alt="item.alt">
         </div>
         <div class="w-100 d-flex justify-content-center mt-5">
             <button class="btn px-5 py-3">Canjear puntos</button>
@@ -28,46 +28,47 @@ const premios = [
         id: 0
     },
     {
-        url: 'contenido/tarjeta-fornite.webp',
+        url: 'contenido/tarjeta-minecraft-transformed.webp',
         alt: 'Targeta de regalo fornite',
         id: 1
     },
     {
-        url: 'contenido/tarjeta-fornite.webp',
+        url: 'contenido/xbox_card_transformed.png',
         alt: 'Targeta de regalo fornite',
         id: 2
     },
     {
-        url: 'contenido/tarjeta-fornite.webp',
+        url: 'contenido/netflix_card.png',
         alt: 'Targeta de regalo fornite',
         id: 3
     },
     {
-        url: 'contenido/tarjeta-fornite.webp',
+        url: 'contenido/steam_card.png',
         alt: 'Targeta de regalo fornite',
         id: 4
     },
     {
-        url: 'contenido/tarjeta-fornite.webp',
+        url: 'contenido/google_play_card.png',
         alt: 'Targeta de regalo fornite',
         id: 5
     },
     {
-        url: 'contenido/tarjeta-fornite.webp',
+        url: 'contenido/playstation_card.png',
         alt: 'Targeta de regalo fornite',
         id: 6
     },
     {
-        url: 'contenido/tarjeta-fornite.webp',
+        url: 'contenido/switch_card.png',
         alt: 'Targeta de regalo fornite',
         id: 7
     },
     {
-        url: 'contenido/tarjeta-fornite.webp',
+        url: 'contenido/lol_card.webp',
         alt: 'Targeta de regalo fornite',
         id: 8
     },
 
+
 ]
 </script>
 

frontend/src/components/reutilizable/design/funcionalidadApp.vue

@@ -20,13 +20,12 @@
 			<div class="t1 h-100"></div>
 			<div class="t2 h-100"></div>
 		</div>
-
 	</div>
 
 </template>
 
 <script setup>
-import { onMounted } from 'vue';
+// import { onMounted } from 'vue';
 
 name: "funcionalidadApp";
 const props = defineProps({
@@ -181,7 +180,7 @@ $top: 3rem;
 	}
 }
 
-@media only screen and (max-width: 575px) {
+@media only screen and (max-width: 578px) {
 	h3 {
 		color: violet;
 	}

frontend/src/components/reutilizable/design/imgYtexto.vue

@@ -1,7 +1,12 @@
 <template>
-    <div class="d-flex align-items-center w-100 justify-content-center  gap-2 gap-sm-3 gap-md-5 flex-wrap"
+    <div class="contenedor-imgytextos d-flex align-items-center w-100 justify-content-center  gap-4 gap-sm-3 gap-md-5 flex-wrap"
         :class="props.direction === 'right' ? 'flex-row-reverse' : ''">
-        <img class="" :src="props.imagen" :alt="imagen_alt">
+        <img class="" v-if="props.imagen != 'cards'" :src="props.imagen" :alt="imagen_alt">
+        <div v-else class="cards position-relative d-flex justify-content-center pb-5">
+            <img class="fornite" src="../../../../public/contenido/tarjeta-fornite.webp" alt="">
+            <img class="minecraft" src="../../../../public/contenido/minecraft_card.png" alt="">
+            <img class="xbox" src="../../../../public/contenido/xbox_card.png" alt="">
+        </div>
         <div class="text d-flex flex-column align-self-start justify-content-start align-items-start">
             <h3 class="mt-0 mt-sm-4">{{ props.title }}</h3>
             <p class="mb-1">
@@ -51,20 +56,42 @@ const textColor = `color: ${props.color};`;
 </script>
 
 <style scoped lang="scss">
-img,
-.text {
-    width: 45%;
-    min-width: 250px;
+    img,
+    .text, .cards {
+        width: 45%;
+        min-width: 250px;
 
-    p {
-        max-width: 400px;
+        p {
+            max-width: 400px;
+        }
     }
-}
+    .cards{
+        filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.15));
+        img{
+            min-width: 100px;
+            width: 40%;
+            top: 0;
+            bottom: 0;
+            position: absolute;
+            &.fornite{
+                left: 15%;
+                transform: rotate(-35deg);
+            }
+            &.minecraft{
+                position: relative;
+            }
+            &.xbox{
+                right: 15%;
+                transform: rotate(35deg);
+            }
+        }
+    }
+
 
 @media only screen and (max-width: 575px) {
 
     img,
-    .text {
+    .text, .cards  {
         width: 75%;
     }
 }

frontend/src/components/reutilizable/design/integrante.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="d-flex flex-column justify-content-between align-items-center integrante p-3 text-center rounded-5 shadow-lg">
+    <div class="d-flex flex-column justify-content-between align-items-center integrante p-3 text-center rounded-5">
         <img :src="props.img_url" :alt="props.img_alt" class="rounded-circle mt-2">
         <div class="d-flex flex-column gap-0 mb-2">
             <span class="nombre fw-bold">{{ props.nombre }}</span>
@@ -36,6 +36,7 @@ const props = defineProps({
     width: 195px;
     height: 265px;
     background-color: #696AF5;
+    box-shadow: 3px 5px 10px rgba(0, 0, 0, 0.25);
     .nombre{
         font-size: 16px;
         color: #1C1C1C;

frontend/src/components/reutilizable/design/paquetePremium.vue

@@ -11,17 +11,23 @@
         <ul class="text-start w-100 p-0 d-flex flex-column gap-4 mb-3 mt-3">
             <li v-for="beneficio in props.beneficios" class=""><iconTick :color="props.color" /> {{ beneficio }}</li>
         </ul>
-        <a v-if="!props.texto" href="" class="btn btn-primary rounded-pill w-100 py-2" :style="colorBtn">{{ props.textoBtn }}</a>
+        <button :style="colorBtn" v-if="!props.texto && props.btnUrl === 'modal'" type="button" class="btn btn-primary rounded-pill w-100 py-2" data-bs-toggle="modal" data-bs-target="#modal_pago">
+            {{ props.textoBtn }}
+        </button>
+        <a  :href="props.btnUrl" v-else-if="!props.texto"  class="btn btn-primary rounded-pill w-100 py-2" :style="colorBtn">{{ props.textoBtn }}</a>
+        <!-- Modal -->
+        <FormularioPago/>
     </div>
 </template>
 
 <script setup>
+import FormularioPago from "@/components/empresas/FormularioPago.vue";
 import iconCorona from "../icons/_corona.vue";
 import iconGota from "../icons/_gota.vue";
 import iconTick from "../icons/_tick.vue";
 name: "paquetePremium";
 components: [
-    iconCorona, iconTick, iconGota
+    iconCorona, iconTick, iconGota, FormularioPago
 ]
 const props = defineProps({
     title: {
@@ -45,6 +51,10 @@ const props = defineProps({
         type: String,
         required: true,
     },
+    btnUrl:{
+        type: String,
+        required: true,
+    },
     color: {
         type: String,
         default: "#3F77E3"
@@ -62,7 +72,7 @@ const colorBtn =  `background-color: ${props.color}; border-color: ${props.color
 $padding: 1.5rem;
 $light-gray: rgba(217, 217, 217, 0.2);
 .paquete {
-    width: 20vw;
+    width: 22vw;
     max-width: 360px;
     min-width: 260px;
     background-color: $light-gray;

frontend/src/components/reutilizable/ui/preguntasFrecuentes.vue

@@ -1,6 +1,6 @@
 <template>
-    <section>
-        <h2 class="lone-h2 text-center">Faqs</h2>
+    <section class="mt-0">
+        <h2 class="mb-5 text-center">Faqs</h2>
         <div class="accordion w-75 m-0 m-auto" id="accordion">
             <div v-for="item in props.preguntas" :key="item.id" class="accordion-item mb-3 border-top border-dark-subtle rounded-2 shadow-sm">
                 <h3 class="accordion-header">

frontend/src/components/reutilizable/ui/sectionDividers.vue

@@ -1,6 +1,7 @@
 <template>
     <section class="position-relative overflow-hidden">
         <div class="rounded-circle d-top bg-white position-absolute"></div>
+        <img class="position-absolute" :class="props.img_alt" :src="props.img_url" :alt="props.img_alt">
         <slot></slot>
         <div class="rounded-circle d-bottom bg-white position-absolute"></div>
     </section>
@@ -41,6 +42,20 @@ section {
     height: auto;
     background-color: #f6f6f6;
 
+    img{
+        top: 11vh;
+        filter: drop-shadow(5px 10px 30px rgba(0, 0, 0, 0.25));
+        min-width: 140px;
+        max-width: 350px;
+        width: 30%;
+        &.corona{
+            top: 10vh;
+        }
+        &.trofeo{
+            top: 14vh;
+            transform: rotateZ(-20deg)
+        }
+    }
     .d-top {
         @include divider('top')
     }