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

Mauricio development

website-andes-hosting/src/App.js

@@ -3,13 +3,8 @@ import './App.scss';
 import {BrowserRouter, Routes, Route} from 'react-router-dom'
 
 /* PAGES */
-import Header from './components/header/Header';
-import Footer from './components/footer/Footer';
-import Layout from './pages/layout/Layout';
-import Bubble from './components/bubble/Bubble';
 import Tyc from '../src/pages/tyc/Tyc'
 import Landing from '../src/pages/landing/Landing'
-import Plans from './pages/plans/Plans';
 
 function App() {
     return (

website-andes-hosting/src/components/benefits/Benefits.js

@@ -7,21 +7,20 @@ import SupportIcon from "../supportIcon/SupportIcon.js"
 import TutorialIcon from "../tutorialIcon/TutorialIcon.js"
 import MapIcon from "../mapIcon/MapIcon.js"
 import PerformanceIcon from "../performanceIcon/PerformanceIcon.js"
-import { Container, Row, Col} from 'react-bootstrap'
 
 const Benefits = () => {
   return (
     <div className="container-benefits-page">
       <h2 className="benefits-title">¿POR QUÉ ANDES HOSTING?</h2>
 
-      <div className="benefits-container">    
+      <div className="benefits-container">
               <BenefitsCard icon={<PrivateIcon/>} title="SERVIDORES PRIVADOS" text="Disfruta de juegos con tus amigos en un entorno privado y seguro, libre de tramposos y molestias. Aquí, la diversión es pura y auténtica."/>
               <BenefitsCard icon={<PerformanceIcon/>} title="MÁXIMA PERFORMANCE" text="Juega sin límites! Nuestra CPU ilimitada garantiza un rendimiento espectacular en tus juegos. Experimenta la máxima velocidad."/>
               <BenefitsCard icon={<MapIcon/>} title="EXPERIENCIA FLUIDA" text="Nuestra ubicación es la elección perfecta para jugadores en Sudamérica, ofreciendo una latencia mínima para una experiencia de juego sin igual."/>
-          
+
               <BenefitsCard icon={<SupportIcon/>} title="SOPORTE A TODA HORA" text="Asistencia personalizada al instante, sin necesidad de largas esperas. Resolveremos tus problemas de manera rápida y eficiente."/>
               <BenefitsCard icon={<PlayIcon/>} title="JUEGA AL INSTANTE" text="Acelera tu experiencia de juego con nuestro almacenamiento  SSD: ¡Inicia la diversión en segundos y sumérgete en el juego sin demoras."/>
-              <BenefitsCard icon={<TutorialIcon/>} title="TUTORIALES SENCILLOS" text="Domina la instalación y configuración de tu servidor con pasos sencillos, para disfrutar de un juego sin complicaciones de principio a fin."/> 
+              <BenefitsCard icon={<TutorialIcon/>} title="TUTORIALES SENCILLOS" text="Domina la instalación y configuración de tu servidor con pasos sencillos, para disfrutar de un juego sin complicaciones de principio a fin."/>
       </div>
     </div>
   )

website-andes-hosting/src/components/btnSection/BtnSection.js

@@ -1,7 +1,5 @@
 import React from 'react'
 import './Btn.scss'
-import { Link } from 'react-router-dom'
-import smoothScroll from '../../utils/smoothScroll'
 
 
 const BtnSection = ({ href, children, text, otherClass='' }) => {

website-andes-hosting/src/components/bubble/Bubble.js

@@ -1,6 +1,4 @@
-import React, { useRef } from 'react'
 import './Bubble.scss'
-import { useState } from 'react';
 import HelpIcon from '../helpIcon/HelpIcon';
 
 const Bubble = ({ isOpen, toggleDropdown }) => {

website-andes-hosting/src/components/faqItem/faqItem.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import Accordion from 'react-bootstrap/Accordion';
 import './faqItem.scss'
-import DOMPurify from 'dompurify'; /* library to sanitize strings with html inputs for security */
+/* import DOMPurify from 'dompurify'; library to sanitize strings with html inputs for security */
 
 const FaqItem = ({question, answer, eventKey, url, answer2}) => {
 

website-andes-hosting/src/components/footer/Footer.js

@@ -1,7 +1,6 @@
 import React, {useState} from 'react'
 import './Footer.scss'
 import { Link } from 'react-router-dom'
-import smoothScroll from '../../utils/smoothScroll'
 import Bubble from '../bubble/Bubble'
 /* import Tyc from '../../pages/Tyc/Tyc' */
 

website-andes-hosting/src/components/header/Header.js

@@ -3,8 +3,6 @@ import Navbar from '../navbar/NavBar.js'
 import CarouselHeader from '../carousel/Carousel.js'
 import Sidebar from '../sidebarNet/SidebarNet.js'
 import BannerTop from '../bannerTop/BannerTop.js'
-import Btn from '../btn/Btn.js'
-import helpIcon from '../../img/help_icon.png'
 import './Header.scss'
 
 function Header() {

website-andes-hosting/src/components/planCard/PlanCard.js

@@ -2,7 +2,6 @@ import React from 'react'
 import Card from 'react-bootstrap/Card'
 import "./PlanCard.scss"
 import Btn from '../btn/Btn.js'
-import BtnPersonalized from '../btnPersonalized/BtnPersonalized.js'
 
 const PlanCard = ({plan, currency}) => {
   let dir;

website-andes-hosting/src/components/planCard/PlanCard.scss

@@ -2,7 +2,8 @@
 
 .containerCard {
     position: relative;
-    width: 20%;
+    width: 250px;
+    /* width: 20%; */
     height: 459px;
     background: linear-gradient(180deg, #3e055b8a 0%, rgba(27, 9, 36, 0.9) 50.4%, #3e055b8a 100%);
     border: 3px solid rgba(255, 255, 255, 0.05);
@@ -48,7 +49,7 @@
             color: $Color-cyan;
             font-family: $font;
             font-weight: 600;
-            font-size: 50px;
+            font-size: 46px;
             text-align: center;
             width: 206px;
             height: 73px;
@@ -94,7 +95,20 @@
 
 @media only screen and (max-width: 1600px){
     .containerCard {
-        width: 23%;
+        width: 25%;
+    }
+}
+
+@media only screen and (max-width: 1461px){
+    .containerCard {
+        .containerCardBody{
+            .textRam{
+                font-size: 36px;
+            }
+            .textPrice{
+                font-size: 46px;
+            }
+        }
     }
 }
 

website-andes-hosting/src/components/pterodactyl/Pterodactyl.js

@@ -1,28 +1,51 @@
-import React from 'react'
+import React, { useState } from 'react'
 import "./Pterodactyl.scss"
 import image_logo from "../../img/ptero_img.png"
 import screen1 from "../../img/image_screen1.png"
 import screen2 from "../../img/image_screen2.png"
+import fullscreen1 from "../../img/image_fullscreen1.png"
+import fullscreen2 from "../../img/image_fullscreen2.png"
+import Modal from 'react-bootstrap/Modal';
 
 
 const Pterodactyl = () => {
+  const [showModalFirst, setShowModalFirst] = useState(false);
+
+  const handleModalShowFirst = () => setShowModalFirst(true);
+  const handleModalCloseFirst = () => setShowModalFirst(false);
+
+  const [showModalSecond, setShowModalSecond] = useState(false);
+
+  const handleModalShowSecond = () => setShowModalSecond(true);
+  const handleModalCloseSecond = () => setShowModalSecond(false);
+
   return (
     <>
-    <div className="ptero-container">
+      <div className="ptero-container">
         <h2 className="ptero-title">ADMINISTRA TUS SERVIDORES CON:</h2>
-        <img src={image_logo} alt="Pterodactyl logo"/>
+        <img src={image_logo} alt="Pterodactyl logo" />
         <p className="ptero-text">Descubre la revolución en la gestión de servidores de videojuegos con Pterodactyl. Nuestra elección del panel de control Pterodactyl no solo garantiza un rendimiento excepcional y estabilidad inigualable, sino que también ofrece una interfaz intuitiva que pone el poder de la administración de servidores en manos de nuestros clientes.<span className='ptero-delete'> Con Pterodactyl, la experiencia de juego se eleva a nuevas alturas, permitiendo a nuestros usuarios tener el control total desu experiencia de hosting con facilidad y eficiencia. ¡Experimenta la excelencia en administración de servidores con Pterodactyl, solo en nuestro servicio de hosting!</span></p>
-    </div>
-    <div className="img-section-background">
-        <div className= "img-container">
-            <img className="img-ptero" src={screen2} alt="Screenshot 2" width={540}/>
-            <p className="img-text">Con Pterodactyl, simplificamos la gestión de tus servidores para que puedas enfocarte en lo que realmente importa: disfrutar del juego. Nuestra plataforma de código abierto te permite visualizar y administrar fácilmente todos los servidores adquiridos en nuestro servicio. </p>
+      </div>
+      <div className="img-section-background">
+        <div className="img-container">
+          <img className="img-ptero" src={screen2} alt="Screenshot 2" width={540} onClick={handleModalShowFirst} />
+          <p className="img-text">Con Pterodactyl, simplificamos la gestión de tus servidores para que puedas enfocarte en lo que realmente importa: disfrutar del juego. Nuestra plataforma de código abierto te permite visualizar y administrar fácilmente todos los servidores adquiridos en nuestro servicio. </p>
         </div>
-        <div className= "img-container reverse">
-            <p className="img-text2">Visualiza la consola de comandos y los recursos disponibles que tienen a disposición, además de los botones “Start”, “Restart”, “Stop”. La barra de navegación en la parte superior, que les permite moverse desde la consola a otros lugares con muchas más opciones.</p>
-            <img className="img-ptero" src={screen1} alt="Screenshot 1"/>
+        <div className="img-container reverse">
+          <p className="img-text2">Visualiza la consola de comandos y los recursos disponibles que tienen a disposición, además de los botones “Start”, “Restart”, “Stop”. La barra de navegación en la parte superior, que les permite moverse desde la consola a otros lugares con muchas más opciones.</p>
+          <img className="img-ptero" src={screen1} alt="Screenshot 1" onClick={handleModalShowSecond} />
         </div>
-    </div>
+      </div>
+      <Modal centered show={showModalFirst} onHide={handleModalCloseFirst} size='xl' >
+        <Modal.Body className='p-0' >
+          <img className='rounded' src={fullscreen2} alt='Screenshot 2' style={{ width: '100%', height: 'auto' }}></img>
+        </Modal.Body>
+      </Modal>
+      <Modal centered show={showModalSecond} onHide={handleModalCloseSecond} size='xl' >
+        <Modal.Body className='p-0' >
+          <img className='rounded' src={fullscreen1} alt='Screenshot 1' style={{ width: '100%', height: 'auto' }}></img>
+        </Modal.Body>
+      </Modal>
     </>
   )
 }

website-andes-hosting/src/components/pterodactyl/Pterodactyl.scss

@@ -36,15 +36,21 @@
         .img-text{
             text-align: left;
             padding: 20px;
+            text-wrap: pretty;
         }
         .img-text2{
             text-align: right;
             padding: 20px;
+            text-wrap: pretty;
         }
         .img-ptero{
             width: 100%;
             /* width: 540px;
             height: 300px; */
+            transition: transform 150ms ease-out;
+            &:hover{
+                transform: scale(1.04);
+            }
         }
     }
 }

website-andes-hosting/src/pages/about/AboutUs.js

@@ -1,13 +1,10 @@
 import React from 'react'
 import "./AboutUs.scss"
 import map from "../../img/latam.png"
-import chile from '../../img/chile.png'
 import ChileFlag from '../../components/chileFlag/ChileFlag.js'
 
 import Pterodactyl from '../../components/pterodactyl/Pterodactyl'
-import Btn from '../../components/btn/Btn'
 import RocketIcon from '../../components/rocketIcon/RocketIcon'
-import InfoLink from '../../components/infolink/InfoLink.js'
 import Benefits from '../../components/benefits/Benefits.js'
 import BtnSection from '../../components/btnSection/BtnSection.js'
 

website-andes-hosting/src/pages/faq/FAQ.js

@@ -3,8 +3,6 @@ import FaqItem from '../../components/faqItem/faqItem'
 import { Col, Row } from 'react-bootstrap'
 import faq from '../../faq'
 import './FAQ.scss'
-import BtnSection from '../../components/btnSection/BtnSection'
-import RocketIcon from '../../components/rocketIcon/RocketIcon'
 
 const FAQ = () => {
   //creo 2 columnas indemendientes

website-andes-hosting/src/pages/plans/Plans.scss

@@ -56,7 +56,7 @@
             border-radius: 0%;
             margin-top: 0px;
             animation: none;
-            width: 6%;
+            width: 100%;
             min-width: 6%;
             height: auto;
             opacity: 1;

website-andes-hosting/src/pages/tyc/Tyc.js

@@ -2,24 +2,23 @@ import React, { useEffect } from "react";
 import './Tyc.scss'
 import Logo from "../../components/logo/Logo";
 import Footer from "../../components/footer/Footer";
-import smoothScroll from "../../utils/smoothScroll";
 
-const Tyc=()=> {
+const Tyc = () => {
     useEffect(() => {
         smoothScrollTarget('top')
     }, []);
 
     const smoothScrollTarget = (targetId) => {
         const target = document.getElementById(targetId);
         if (target) {
-          window.scrollTo({
-            top: target.offsetTop,
-            behavior: 'smooth'
-          });
+            window.scrollTo({
+                top: target.offsetTop,
+                behavior: 'smooth'
+            });
         }
-      };
+    };
 
-    return(
+    return (
         <div className="tyc" id="top">
             <div className="tyc-container">
                 <a href="/"><Logo className='tyc-logo' width={280} height={100} /></a>
@@ -28,38 +27,38 @@ const Tyc=()=> {
                     <h2>Cuenta</h2>
                     <p>Andes se reserva el derecho de cancelar la cuenta del usuario en caso de infracción de algún término establecido.
 
-        El usuario acepta el acuerdo de licencia de usuario final del videojuego correspondiente, como por ejemplo, el EULA de Minecraft.
-        </p>
+                        El usuario acepta el acuerdo de licencia de usuario final del videojuego correspondiente, como por ejemplo, el EULA de Minecraft.
+                    </p>
                     <h2>Pagos</h2>
                     <p>Los servicios solicitados a Andes no se activarán hasta que se reciba el pago y se verifique su autenticidad, pudiendo requerir una revisión manual. En caso de detectarse un pago fraudulento o sospechoso, nos reservamos el derecho de solicitar documentación para verificar la legitimidad del comprador.
 
-        Cualquier contracargo/charge-back malintencionado resultará en la cancelación inmediata de la cuenta y una investigación subsiguiente.
-        </p>
+                        Cualquier contracargo/charge-back malintencionado resultará en la cancelación inmediata de la cuenta y una investigación subsiguiente.
+                    </p>
                     <h2>Cancelaciones del servicio</h2>
                     <p>Pasados 30 días desde la finalización del periodo del servicio, se eliminarán todos los datos relacionados en nuestros servidores.
 
-        Para cancelar los servicios, el usuario debe realizar la solicitud dentro de los primeros 3 días después del pago, a través de nuestra área de facturación en <a href="https://shlink.andes-hosting.com/04VDQ">contacto@andes-hosting.com</a>. Consulte la política de reembolsos para obtener información detallada.</p>
+                        Para cancelar los servicios, el usuario debe realizar la solicitud dentro de los primeros 3 días después del pago, a través de nuestra área de facturación en <a href="https://shlink.andes-hosting.com/04VDQ">contacto@andes-hosting.com</a>. Consulte la política de reembolsos para obtener información detallada.</p>
                     <h2>Uso del servicio</h2>
                     <p>Los servidores solo pueden utilizarse para los fines designados y no se permite la instalación ni el uso de programas de terceros no autorizados. El intento de acceso o interferencia con los datos de otros clientes resultará en la suspensión de los servicios.
 
-        No se permite eludir deliberadamente ninguna limitación o restricción del servicio, como la ubicación, límites de RAM, restricciones de CPU o Slots para servidores de juego. Cualquier intento de modificar u omitir estas restricciones resultará en la suspensión de los servicios y la cancelación de la cuenta.
-        </p>
+                        No se permite eludir deliberadamente ninguna limitación o restricción del servicio, como la ubicación, límites de RAM, restricciones de CPU o Slots para servidores de juego. Cualquier intento de modificar u omitir estas restricciones resultará en la suspensión de los servicios y la cancelación de la cuenta.
+                    </p>
                     <h2>Responsabilidades</h2>
                     <p>Andes se reserva el derecho de restringir, alterar o modificar tarifas, beneficios, reglas, regulaciones, ofertas especiales, términos y condiciones de los servicios en cualquier momento y sin previo aviso.
 
-        Debido a la naturaleza de nuestros servicios, pueden surgir problemas como impactos en el rendimiento, corrupción de datos, pérdida de datos y retrasos, que están fuera de nuestro control. No somos responsables de estos problemas, aunque haremos esfuerzos razonables para ayudar en su resolución.
-        </p>
+                        Debido a la naturaleza de nuestros servicios, pueden surgir problemas como impactos en el rendimiento, corrupción de datos, pérdida de datos y retrasos, que están fuera de nuestro control. No somos responsables de estos problemas, aunque haremos esfuerzos razonables para ayudar en su resolución.
+                    </p>
                     <h2>Servicio</h2>
                     <p>El servicio implica exclusivamente el alquiler de servidores propiedad de Andes. Nos reservamos el derecho de modificar cualquier información en el sitio en cualquier momento.
 
-        No podemos garantizar la ausencia total de vulnerabilidades en el sitio. La explotación de cualquier área de <a href="https://web.andes-hosting.com">https://web.andes-hosting.com</a> o <a href="https://shlink.andes-hosting.com/zrDNe">https://panel.andes-hosting.com</a> resultará en la cancelación permanente de la cuenta.</p>
+                        No podemos garantizar la ausencia total de vulnerabilidades en el sitio. La explotación de cualquier área de <a href="https://web.andes-hosting.com">https://web.andes-hosting.com</a> o <a href="https://shlink.andes-hosting.com/zrDNe">https://panel.andes-hosting.com</a> resultará en la cancelación permanente de la cuenta.</p>
                     <h2>Reembolso</h2>
                     <p>Todos los reembolsos son a discreción de Andes, así como el método de reembolso. Se otorgarán reembolsos solo en casos de errores atribuibles a nuestra parte. Esto incluye, pero no se limita a problemas de rendimiento por sobrecarga de nodos, falta de respuestas por parte de Andes durante 72 horas o más, y problemas técnicos irremediables en el software del servidor de juego.
 
-        Andes no se hace responsable de la configuración de los servidores de juego; nuestro compromiso es proporcionar el entorno para su uso. Haremos todo lo posible para garantizar la mejor experiencia y resolver cualquier inconveniente.
+                        Andes no se hace responsable de la configuración de los servidores de juego; nuestro compromiso es proporcionar el entorno para su uso. Haremos todo lo posible para garantizar la mejor experiencia y resolver cualquier inconveniente.
 
-        No se proporcionarán reembolsos en caso de cancelación de cuenta debido a violación de los Términos de Servicio.
-        </p>
+                        No se proporcionarán reembolsos en caso de cancelación de cuenta debido a violación de los Términos de Servicio.
+                    </p>
                     <h2>Política de Privacidad</h2>
                     <p>No venderemos ni distribuiremos los datos de nuestros clientes, ni los utilizaremos de manera maliciosa. Los registros de nuestros servidores se utilizarán con fines de análisis interno y monitoreo de Andes. Bajo ninguna circunstancia se publicarán o venderán estos registros a terceros.<br></br><br></br>Para obtener más información sobre los procesos de análisis de datos en Andes, transparentamos dichos procesos publicándolos como código abierto en <a href="https://shlink.andes-hosting.com/UUQdF">GitHub</a>.</p>
                 </div>