Merge pull request #28 from Andes-hosting/Mauricio-development

Add email and links faq, change description and prices
Andes-hosting · Mar 23, 2024 · b057e65 · b057e65
2 parents c3db95f + 399d87b
commit b057e65
Show file tree

Hide file tree

Showing 13 changed files with 147 additions and 60 deletions.
diff --git a/website-andes-hosting/public/index.html b/website-andes-hosting/public/index.html
@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Servidores de videojuegos para Latinoamérica. Con CPU ilimitada y baja latencia para la mejor experiencia!"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--

diff --git a/website-andes-hosting/src/components/btnPersonalized/Btn.scss b/website-andes-hosting/src/components/btnPersonalized/Btn.scss
@@ -24,5 +24,4 @@
     .btn{
         font-size: 11px;
      }
-
 }
diff --git a/website-andes-hosting/src/components/bubble/Bubble.js b/website-andes-hosting/src/components/bubble/Bubble.js
@@ -1,9 +1,9 @@
-import React, {useRef} from 'react'
+import React, { useRef } from 'react'
 import './Bubble.scss'
 import { useState } from 'react';
 import HelpIcon from '../helpIcon/HelpIcon';
 
-const Bubble = ({ isOpen, toggleDropdown}) => {
+const Bubble = ({ isOpen, toggleDropdown }) => {
     /* const [isOpen, setIsOpen] = useState(false);
     const bubbleRef = useRef(null);
 
@@ -20,32 +20,39 @@ const Bubble = ({ isOpen, toggleDropdown}) => {
     return (
         <div className='fixed'>
             <div class="dropup-start dropup">
-                    <button
-                        /* ref={bubbleRef} // Asigna la referencia al botón */
-                        class={`btn bubbleDefault ${isOpen ? 'bubbleOpen' : ''}`}
-                        type="button"
-                        onClick={toggleDropdown}
-                        data-bs-toggle="dropdown"
-                        aria-expanded="false"
+                <button
+                    /* ref={bubbleRef} // Asigna la referencia al botón */
+                    class={`btn bubbleDefault ${isOpen ? 'bubbleOpen' : ''}`}
+                    type="button"
+                    onClick={toggleDropdown}
+                    data-bs-toggle="dropdown"
+                    aria-expanded="false"
                         /* style={{ borderRadius: '50%', width: '80px', height: '80px', display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: '52px', color: 'white', background: '#883cae', border: '#883cae' }} */>
-                        <span className='bubbleIcon'><HelpIcon className='helpIcon'></HelpIcon></span>
-                    </button>
-                    <ul className={`dropdown-menu ${isOpen ? 'show speed-dial-animation' : ''} dropdown-menu-up`} >
-                        <li className="dropdown-item what" style={{ animationDelay: isOpen ? '0.4s' : '0s' }}>
-                            <a href="https://shlink.andes-hosting.com/9fSDH?text=Hola%20*Andes%20Hosting*,%20me%20gustaría%20hablar%20con%20alguien" target='_blank' style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', color: 'white' }}>
-                                <svg className='whatsapp' xmlns="http://www.w3.org/2000/svg" width="40" height="60" fill="currentColor" class="bi bi-whatsapp" viewBox="0 0 16 16" >
-                                    <path d="M13.601 2.326A7.85 7.85 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.9 7.9 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.9 7.9 0 0 0 13.6 2.326zM7.994 14.521a6.6 6.6 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.56 6.56 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592m3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.73.73 0 0 0-.529.247c-.182.198-.691.677-.691 1.654s.71 1.916.81 2.049c.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232" />
-                                </svg>
-                            </a>
-                        </li>
-                        <li className="dropdown-item tel" style={{ animationDelay: isOpen ? '0.2s' : '0s' }}>
-                            <a href="https://shlink.andes-hosting.com/WhQnt" target='_blank' style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', color: 'white' }}>
-                                <svg className='telegram' xmlns="http://www.w3.org/2000/svg" width="40" height="60" fill="currentColor" class="bi bi-telegram" viewBox="0 0 16 16">
-                                    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.287 5.906q-1.168.486-4.666 2.01-.567.225-.595.442c-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294q.39.01.868-.32 3.269-2.206 3.374-2.23c.05-.012.12-.026.166.016s.042.12.037.141c-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8 8 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629q.14.092.27.187c.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.4 1.4 0 0 0-.013-.315.34.34 0 0 0-.114-.217.53.53 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09" />
-                                </svg>
-                            </a>
-                        </li>
-                    </ul>
+                    <span className='bubbleIcon'><HelpIcon className='helpIcon'></HelpIcon></span>
+                </button>
+                <ul className={`dropdown-menu ${isOpen ? 'show speed-dial-animation' : ''} dropdown-menu-up`} >
+                    <li className="dropdown-item what" style={{ animationDelay: isOpen ? '0.6s' : '0s' }}>
+                        <a href="https://shlink.andes-hosting.com/9fSDH?text=Hola%20*Andes%20Hosting*,%20me%20gustaría%20hablar%20con%20alguien" target='_blank' style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', color: 'white' }}>
+                            <svg className='whatsapp' xmlns="http://www.w3.org/2000/svg" width="40" height="60" fill="currentColor" class="bi bi-whatsapp" viewBox="0 0 16 16" >
+                                <path d="M13.601 2.326A7.85 7.85 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.9 7.9 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.9 7.9 0 0 0 13.6 2.326zM7.994 14.521a6.6 6.6 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.56 6.56 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592m3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.73.73 0 0 0-.529.247c-.182.198-.691.677-.691 1.654s.71 1.916.81 2.049c.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232" />
+                            </svg>
+                        </a>
+                    </li>
+                    <li className="dropdown-item tel" style={{ animationDelay: isOpen ? '0.4s' : '0s' }}>
+                        <a href="https://shlink.andes-hosting.com/WhQnt" target='_blank' style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', color: 'white' }}>
+                            <svg className='telegram' xmlns="http://www.w3.org/2000/svg" width="40" height="60" fill="currentColor" class="bi bi-telegram" viewBox="0 0 16 16">
+                                <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.287 5.906q-1.168.486-4.666 2.01-.567.225-.595.442c-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294q.39.01.868-.32 3.269-2.206 3.374-2.23c.05-.012.12-.026.166.016s.042.12.037.141c-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8 8 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629q.14.092.27.187c.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.4 1.4 0 0 0-.013-.315.34.34 0 0 0-.114-.217.53.53 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09" />
+                            </svg>
+                        </a>
+                    </li>
+                    <li className="dropdown-item tel" style={{ animationDelay: isOpen ? '0.2s' : '0s' }}>
+                        <a href="https://shlink.andes-hosting.com/04VDQ" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', color: 'white' }}>
+                            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="60" fill="currentColor" class="bi bi-envelope" viewBox="0 0 16 16">
+                                <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z" />
+                            </svg>
+                        </a>
+                    </li>
+                </ul>
             </div>
         </div>
     )

diff --git a/website-andes-hosting/src/components/carousel/Carousel.js b/website-andes-hosting/src/components/carousel/Carousel.js
@@ -16,7 +16,7 @@ const CarouselHeader = () => {
 
             <div className='carouselInfo'>
                 <h1>Bienvenido a <span className='carouselTitle'>ANDES HOSTING</span></h1>
-                <p>Tu mejor aliado para servidores de videojuegos. Con CPU ilimitada y hosting de baja latencia<span className='delete-responsive'>, garantizamos una experiencia de juego sin igual. Asistencia personalizada y servidores privados para una diversión libre de trolls. Únete ahora y lleva tu experiencia de juego al siguiente nivel.</span></p>
+                <p>Tu mejor aliado para servidores de videojuegos. Con CPU ilimitada y hosting de baja latencia.<span className='delete-responsive'> Garantizamos una experiencia de juego sin igual, con asistencia personalizada y servidores privados para una diversión libre de trolls. Únete ahora y lleva tu experiencia de juego al siguiente nivel.</span></p>
                 <BtnSection className='carouselButton' text="¡Contratar un servidor ahora!" href="#planes" >
                     <RocketIcon className='carouselIcon' />
                 </BtnSection>

diff --git a/website-andes-hosting/src/components/faqItem/faqItem.js b/website-andes-hosting/src/components/faqItem/faqItem.js
@@ -3,20 +3,18 @@ import Accordion from 'react-bootstrap/Accordion';
 import './faqItem.scss'
 import DOMPurify from 'dompurify'; /* library to sanitize strings with html inputs for security */
 
-const FaqItem = ({question, answer, eventKey}) => {
+const FaqItem = ({question, answer, eventKey, url, answer2}) => {
 
-  const ANSWER = DOMPurify.sanitize(answer);
+  /* const ANSWER = DOMPurify.sanitize(answer); */
+
+    const link = url === undefined ? null : <a href={url} target='_blank'>este enlace</a>
   return (
         <Accordion defaultActiveKey={['0']} alwaysOpen>
-
           <Accordion.Item eventKey={eventKey}>
-
             <Accordion.Header>{question}</Accordion.Header>
-            <Accordion.Body dangerouslySetInnerHTML={{__html: ANSWER}}></Accordion.Body>
-
-          </Accordion.Item> 
+            <Accordion.Body >{answer}{link}{answer2}</Accordion.Body>
+          </Accordion.Item>
         </Accordion>
-
       );
 }
 

diff --git a/website-andes-hosting/src/faq.js b/website-andes-hosting/src/faq.js
@@ -1,17 +1,39 @@
 const FAQ = [
     /* Column 1 */
-    {question:'¿Cómo puedo contactar con alguien de soporte?', answer: `Puedes contactarte con nosostros siguiendo <a href="#">este enlace</a>. Nuestro equipo está listo para ayudarte a través de WhatsApp, Email y Telegram.`},
-    {question:'¿Cómo elijo el plan adecuado para mis necesidades?', answer:'Si tienes dudas sobre qué plan elegir, contáctanos directamente a través de <a href="#">este enlace</a> y te ayudaremos a elegir el adecuado para ti.'},
-    {question:'¿Es posible aumentar los recursos de mi servidor después de la compra?', answer:'Sí, puedes aumentar los recursos de tu servidor y se te cobrará el proporcional de los recursos adicionales durante el resto de tiempo que queda de tu plan contratado.'},
-    {question:'¿Es posible instalar plugins y mods en mi servidor de Minecraft?', answer:'Sí, una vez elijas una versión de Minecraft compatible con tus mods y/o plugins, puedes subir los archivos a la carpeta correspondiente en la sección de archivos del panel de administración de Pterodactyl. Si necesitas ayuda, contáctanos en nuestros canales de comunicación en <a href="#">este enlace</a>.'},
-    {question:'Para Minecraft ¿Puedo subir mi propio mundo al servidor?', answer:'Sí, puedes conectarte por protocolo SFTP al servidor para subir los archivos de tu mundo de Minecraft. Si necesitas ayuda o no sabes cómo hacerlo, contáctanos en <a href="#">este enlace</a>.'},
-
+    { question: '¿Cómo puedo contactar con alguien de soporte?',
+    answer: `Puedes contactarte con nosostros siguiendo `,
+    url: 'https://shlink.andes-hosting.com/kR3cx',
+    answer2: '. Nuestro equipo está listo para ayudarte a través de WhatsApp, Email y Telegram.' },
+    { question: '¿Cómo elijo el plan adecuado para mis necesidades?',
+    answer: 'Si tienes dudas sobre qué plan elegir, contáctanos directamente a través de ',
+    url: 'https://shlink.andes-hosting.com/kR3cx',
+    answer2: '.  y te ayudaremos a elegir el adecuado para ti.' },
+    { question: '¿Es posible aumentar los recursos de mi servidor después de la compra?',
+    answer: 'Sí, puedes aumentar los recursos de tu servidor y se te cobrará el proporcional de los recursos adicionales durante el resto de tiempo que queda de tu plan contratado.' },
+    { question: '¿Es posible instalar plugins y mods en mi servidor de Minecraft?',
+    answer: 'Sí, una vez elijas una versión de Minecraft compatible con tus mods y/o plugins, puedes subir los archivos a la carpeta correspondiente en la sección de archivos del panel de administración de Pterodactyl. Si necesitas ayuda, contáctanos en nuestros canales de comunicación en ',
+    url: 'https://shlink.andes-hosting.com/kR3cx',
+    answer2: '.' },
+    { question: 'Para Minecraft ¿Puedo subir mi propio mundo al servidor?',
+    answer: 'Sí, puedes conectarte por protocolo SFTP al servidor para subir los archivos de tu mundo de Minecraft. Si necesitas ayuda o no sabes cómo hacerlo, contáctanos en ',
+    url: 'https://shlink.andes-hosting.com/kR3cx',
+    answer2: '.' },
+
     /* Column 2 */
-    {question:'¿Cuánto tiempo demora en crearse mi servidor?', answer:'Después de hablar con nuestros agentes y seleccionar tu servidor, completaras el formulario que te enviaremos por mensaje privado. En minutos tu servidor estará listo.'},
-    {question:'¿Cuáles son las opciones de pago disponibles?', answer:'Aceptamos transferencias directas en pesos chilenos (CLP) si tienens cuenta bancaria en chile. También puedes pagar a través de PayPal en dólares (USD).'},
-    {question:'¿Es posible reducir los recursos de mi servidor después de la compra?', answer:'Sí, puedes reducirlos, pero no se realizará un reembolso por los recursos no utilizados.'},
-    {question:'Para Minecraft, ¿Puedo jugar con Bedrock y Java?', answer:'Sí, al seleccionar un servidor de Minecraft, elige la edición y luego la versión deseada. Si estás indeciso, contáctanos a través de <a href="#">este enlace</a> y te ayudaremos a elegir.'},
-    {question:'¿Es posible migrar mi servidor a Andes Hosting?', answer:'Sí, puedes conectarte por protocolo SFTP al servidor para subir los archivos de tu mundo de Minecraft. Si necesitas ayuda o no sabes cómo hacerlo, contáctanos en <a href="#">este enlace</a>.'}
+    { question: '¿Cuánto tiempo demora en crearse mi servidor?',
+    answer: 'Después de hablar con nuestros agentes y seleccionar tu servidor, completaras el formulario que te enviaremos por mensaje privado. En minutos tu servidor estará listo.' },
+    { question: '¿Cuáles son las opciones de pago disponibles?',
+    answer: 'Aceptamos transferencias directas en pesos chilenos (CLP) si tienens cuenta bancaria en chile. También puedes pagar a través de PayPal en dólares (USD).' },
+    { question: '¿Es posible reducir los recursos de mi servidor después de la compra?',
+    answer: 'Sí, puedes reducirlos, pero no se realizará un reembolso por los recursos no utilizados.' },
+    { question: 'Para Minecraft, ¿Puedo jugar con Bedrock y Java?',
+    answer: 'Sí, al seleccionar un servidor de Minecraft, elige la edición y luego la versión deseada. Si estás indeciso, contáctanos a través de ',
+    url: 'https://shlink.andes-hosting.com/kR3cx',
+    answer2: ' y te ayudaremos a elegir.' },
+    { question: '¿Es posible migrar mi servidor a Andes Hosting?',
+    answer: 'Sí, puedes conectarte por protocolo SFTP al servidor para subir los archivos de tu mundo de Minecraft. Si necesitas ayuda o no sabes cómo hacerlo, contáctanos en ',
+    url: 'https://shlink.andes-hosting.com/kR3cx',
+    answer2: '.' }
 ]
 
 export default FAQ
diff --git a/website-andes-hosting/src/games.js b/website-andes-hosting/src/games.js
@@ -26,9 +26,9 @@ const games = {
     palworld: {
         logo: <img src={palworld} alt="Palworld logo"/>,
         plans: [
-            { name: 'BRONCE', ram: "13", price:{CLP:13600 ,USD:14} , storage: 8, recomendedPlyers: 4, prominent: false, game: 'Palworld' },
-            { name: 'PLATA', ram: "15", price:{CLP:30400 ,USD:30} , storage: 8, recomendedPlyers: 10, prominent: true, game: 'Palworld' },
-            { name: 'ORO', ram: "20", price:{CLP:48800 ,USD:50} , storage: 12, recomendedPlyers: 16, prominent: false, game: 'Palworld' },
+            { name: 'BRONCE', ram: "8", price:{CLP:13600 ,USD:14} , storage: 4, recomendedPlyers: 4, prominent: false, game: 'Palworld' },
+            { name: 'PLATA', ram: "12", price:{CLP:18400 ,USD:19} , storage: 8, recomendedPlyers: 6, prominent: true, game: 'Palworld' },
+            { name: 'ORO', ram: "20", price:{CLP:30800 ,USD:31} , storage: 12, recomendedPlyers: 10, prominent: false, game: 'Palworld' },
             { name: 'PERSONALIZADO', ram: '', price:{CLP:'' ,USD:''}, storage: '∞', recomendedPlyers: '∞', prominent: false, game: 'Palworld' },
         ]
     },

diff --git a/website-andes-hosting/src/pages/about/AboutUs.js b/website-andes-hosting/src/pages/about/AboutUs.js
@@ -22,7 +22,7 @@ const AboutUs = () => {
             <h3 className="location-over-title">Tenemos</h3>
             <h2 className="location-title">LA UBICACIÓN IDEAL</h2>
             <p className="location-text">Experimenta el rendimiento excepcional de nuestros servidores, combinado con una ubicación estratégica que asegura la mejor latencia en Sudamérica. Ofrecemos un servicio premium a un costo incomparable en toda la región. <span className='about-bold'>Tu éxito es nuestra prioridad!</span></p>
-            <p className='about-location'>Valparaíso, Chile <ChileFlag /></p>
+            <p className='about-location'><span className='about-location-text'>Valparaíso, Chile </span><ChileFlag /></p>
             {/* <p className='about-location-ms'>123ms</p> */}
           </div>
         </div>

diff --git a/website-andes-hosting/src/pages/about/AboutUs.scss b/website-andes-hosting/src/pages/about/AboutUs.scss
@@ -202,6 +202,19 @@
     }
 }
 
+@media only screen and (max-width: 650px){
+    .gradien{
+        .location-container{
+            .location-text-container{
+                .about-location{
+                    position: absolute;
+                    transform: translate(100px,-50px);
+                }
+            }
+        }
+    }
+}
+
 @media only screen and (max-width: 600px) {
     .about-container{
         .about-text{
@@ -211,10 +224,41 @@
             width: 16px;
         }
     }
+    .gradien{
+        .location-container{
+            .location-text-container{
+                .about-location{
+                    transform: translate(50px,-50px);
+                }
+            }
+        }
+    }
 }
+
+@media only screen and (max-width: 500px){
+    .gradien{
+        .location-container{
+            .location-text-container{
+                .about-location{
+                    transform: translate(20px,-30px);
+                }
+            }
+        }
+    }
+}
+
 /* aqui */
 @media only screen and (max-width: 400px){
     .about-container{
         margin-bottom: 100px;
     }
+    .gradien{
+        .location-container{
+            .location-text-container{
+                .about-location{
+                    transform: translate(20px,-10px);
+                }
+            }
+        }
+    }
 }