feat: Add environment variables

docker-compose.yaml

@@ -3,5 +3,8 @@ services:
     build:
       context: .
       dockerfile: Dockerfile
-    ports:
+    environment:
-      - "4321:4321"
+      - EMAIL_TO=${EMAIL_TO:-destinatary}
+      - EMAIL_FROM=${EMAIL_FROM:-owner}
+      - EMAIL_USER=${EMAIL_USER:-user}
+      - EMAIL_PASS=${EMAIL_PASS:-password}

src/actions/index.ts

@@ -22,8 +22,8 @@ export const server = {
 
 		handler: async (input) => {
 			const mailOptions = {
-                from: '"Juan Diego" <jdcorreosvarios@gmail.com>',
+				from: import.meta.env.EMAIL_FROM,
-                to: "jdcorreosvarios@gmail.com",
+				to: import.meta.env.EMAIL_TO,
 				subject: `Nueva persona interesada en Naliia: ${input.userName}`,
 				html: emailTemplate
 					.replace("{{userName}}", input.userName)

src/components/InitialSection.astro

@@ -11,6 +11,7 @@ export interface SectionProps {
     mainTitle: string;
     subtitle: string;
     buttonText?: string;
+    customHref?: string;
     autoHeight?: boolean;
 }
 
@@ -27,6 +28,7 @@ const {
     customXPosition,
     customYPosition,
     autoHeight = false,
+    customHref
 } = Astro.props as SectionProps;
 ---
 
@@ -56,13 +58,9 @@ const {
 
             {
                 buttonText && (
-                    <div class="button-container">
+                        <a href={customHref ? customHref : "#"} target="_blank" class="call-to-action-button">
-                        <a href="#">
-                            <button class="button call-to-action-button importantButton-hover-animation">
                             {buttonText}
-                            </button>
                         </a>
-                    </div>
                 )
             }
         </div>
@@ -219,7 +217,7 @@ const {
 
     .call-to-action-button {
         height: 56px;
-        width: auto;
+        width: fit-content;
         padding: var(--space-sm-8px) var(--space-lg-24px);
         border: none;
         border-radius: 16px;
@@ -232,10 +230,12 @@ const {
         justify-content: center;
         color: white;
         cursor: pointer;
+        animation: fadeAndMoveFromLeft 1s ease-in-out forwards;
 
         transition:
             translate 1s ease-in-out,
-            opacity 1s ease-in-out;
+            opacity 1s ease-in-out,
+            transform 3s ease-in-out,
 
         @media (max-width: 1023px) {
             padding: var(--padding-sm-8px) var(--padding-lg-24px);
@@ -250,6 +250,7 @@ const {
     }
 
     .call-to-action-button:hover {
-        animation: heartBeat 1.2s infinite;
+        background-color: #d9436a;
+        transform: scale(1.02);
     }
 </style>

src/components/PricingCard.astro

@@ -1,6 +1,6 @@
 ---
 export interface PricingCardProps {
-    planType: string;
+    planType: "basic" | "intermediate" | "advanced";
     price: string;
     description: string;
     featuresTitle: string;
@@ -20,11 +20,38 @@ const {
     isBestPlan,
     class: className,
 } = Astro.props as PricingCardProps;
+
+function getPlanTypeText(planType: "basic" | "intermediate" | "advanced") {
+    switch (planType) {
+        case "basic":
+            return "Básico";
+        case "intermediate":
+            return "Intermedio";
+        case "advanced":
+            return "Avanzado";
+        default:
+            return planType;
+    }
+}
+
+function getPlanWhatsappMessage(planType: "basic" | "intermediate" | "advanced") {
+    switch (planType) {
+        case "basic":
+            return "Hola, estoy interesado en el Plan Básico de Naliia. ¿Podrían brindarme más información sobre este plan y cómo puedo adquirirlo?";
+        case "intermediate":
+            return "Hola, estoy interesado en el Plan Intermedio de Naliia. ¿Podrían brindarme más información sobre este plan y cómo puedo adquirirlo?";
+        case "advanced":
+            return "Hola, estoy interesado en el Plan Avanzado de Naliia. ¿Podrían brindarme más información sobre este plan y cómo puedo adquirirlo?";
+        default:
+            return "Hola, estoy interesado en uno de los planes de Naliia. ¿Podrían brindarme más información sobre los planes y cómo puedo adquirirlos?";
+    }
+}
+
 ---
 
 <div class:list={["pricing-card", className]} data-best-plan={isBestPlan}>
     <div class="pricing-card-header">
-        <p class="plan-type">{`Plan ${planType}`}</p>
+        <p class="plan-type">{`Plan ${getPlanTypeText(planType)}`}</p>
 
         <div class="price-and-description">
             <h4 class="price">{price}</h4>
@@ -47,8 +74,8 @@ const {
         </div>
     </div>
 
-    <button class="button call-to-action-button button-hover-effect"
+    <a href={`https://wa.me/573001158180?text=${encodeURIComponent(getPlanWhatsappMessage(planType))}`} target="_blank" class="button call-to-action-button button-hover-effect"
-        >{buttonText}</button
+        >{buttonText}</a
     >
 </div>
 

src/components/footer/Footer.astro

@@ -132,7 +132,7 @@ import "./footer.css";
 
     <div class="social-media">
         <div class="icons-social-media">
-            <a href="#" class="social-media-link whatsapp-link">
+            <a href="https://wa.me/573001158180?text=Hola,%20estoy%20interesado%20en%20obtener%20más%20información%20sobre%20Naliia." class="social-media-link whatsapp-link" target="_blank">
                 <svg
                     xmlns="http://www.w3.org/2000/svg"
                     width="28"
@@ -152,7 +152,7 @@ import "./footer.css";
                 >
             </a>
 
-            <a href="" class="social-media-link instagram-link">
+            <!-- <a href="" class="social-media-link instagram-link">
                 <svg
                     xmlns="http://www.w3.org/2000/svg"
                     width="28"
@@ -164,9 +164,9 @@ import "./footer.css";
                         d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3"
                     ></path></svg
                 >
-            </a>
+            </a> -->
 
-            <a href="#" class="social-media-link email-link">
+            <a href="mailto:proyectos@ausolutionsit.com" class="social-media-link email-link">
                 <svg
                     xmlns="http://www.w3.org/2000/svg"
                     width="28"

src/layouts/Layout.astro

@@ -38,7 +38,7 @@ const { pageTitle } = Astro.props;
 
         <main>
             <div class="floating-buttons">
-                <a href="#">
+                <a href="https://wa.me/573001158180?text=Hola,%20estoy%20interesado%20en%20obtener%20más%20información%20sobre%20Naliia." target="_blank">
                     <div class="floating-button whatsapp-floatingbutton">
                         <svg
                             xmlns="http://www.w3.org/2000/svg"

src/pages/contact.astro

@@ -14,12 +14,12 @@ import "../styles/contactpage.css";
 <Layout pageTitle="Contacto">
     <section class="contact-page">
         <InitialSection
-            imgSrc="/src/assets/imgs/chat_3d_illustration.svg"
+            imgSrc="/images/chat_3d_illustration.svg"
             imgAlt="Ilustración 3D de unas burbujas de chat flotantes"
             imgWidth={700}
             customXPosition="-36%"
             customYPosition="20%"
-            logoSrc="/src/assets/imgs/logo-naliia.svg"
+            logoSrc="/images/logo-naliia.svg"
             logoAlt="Logo de Naliia"
             mainTitle="Contáctanos"
             autoHeight={true}
@@ -40,7 +40,7 @@ import "../styles/contactpage.css";
                         </div>
 
                         <div class="socialmedia-icons">
-                            <a href="#" class="social-media-link whatsapp-link">
+                            <a href="https://wa.me/573001158180?text=Hola,%20estoy%20interesado%20en%20obtener%20más%20información%20sobre%20Naliia." target="_blank" class="social-media-link whatsapp-link">
                                 <svg
                                     xmlns="http://www.w3.org/2000/svg"
                                     width="48"
@@ -60,7 +60,7 @@ import "../styles/contactpage.css";
                                 >
                             </a>
 
-                            <a href="" class="social-media-link instagram-link">
+                            <!-- <a href="" class="social-media-link instagram-link">
                                 <svg
                                     xmlns="http://www.w3.org/2000/svg"
                                     width="48"
@@ -72,9 +72,9 @@ import "../styles/contactpage.css";
                                         d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3"
                                     ></path></svg
                                 >
-                            </a>
+                            </a> -->
 
-                            <a href="#" class="social-media-link email-link">
+                            <a href="mailto:proyectos@ausolutionsit.com" class="social-media-link email-link">
                                 <svg
                                     xmlns="http://www.w3.org/2000/svg"
                                     width="48"

src/pages/index.astro

@@ -15,13 +15,14 @@ import "../styles/index.css";
 <Layout pageTitle="Home page">
     <section class="homepage">
         <InitialSection
-            imgSrc="/src/assets/imgs/mujer-con-tablet.svg"
+            imgSrc="/images/mujer-con-tablet.svg"
             imgAlt="Fotografía de una mujer sosteniendo una tablet"
-            logoSrc="/src/assets/imgs/logo-naliia.svg"
+            logoSrc="/images/logo-naliia.svg"
             logoAlt="Logo de Naliia"
             mainTitle="Transformamos el caos en claridad"
             subtitle="Convertimos la complejidad de negocios completos en un ecosistema que respira orden, precisión y belleza."
             buttonText="Comienza tu experiencia aquí"
+            customHref="https://wa.me/573001158180"
         />
 
         <!-- ----- What we offer section ----- -->
@@ -260,11 +261,11 @@ import "../styles/index.css";
                 </div>
             </div>
 
-            <button
+            <a href="https://wa.me/573001158180" target="_blank"
-                class="calltoaction-button button-hover-effect importantButton-hover-animation"
+                class="calltoaction-button button-hover-effect"
-            >
-                Quiero obtener uno de los planes</button
             >
+                Quiero obtener uno de los planes
+            </a>
 
             <p class="important-information">
                 Todos los planes incluyen soporte de lunes a viernes de 8am a

src/pages/pricing.astro

@@ -10,11 +10,11 @@ import "../styles/pricingPage.css";
 <Layout pageTitle="Precios y membresías">
     <section class="pricing-page">
         <InitialSection
-            imgSrc="/src/assets/imgs/phone_with-stats.svg"
+            imgSrc="/images/phone_with-stats.svg"
             imgAlt="Fotografía de un dispositivo móvil flotante con gráficas y estadísticas en la pantalla y con un borde amarillo brillante"
             imgWidth={520}
             customXPosition="-52%"
-            logoSrc="/src/assets/imgs/logo-naliia.svg"
+            logoSrc="/images/logo-naliia.svg"
             logoAlt="Logo de Naliia"
             mainTitle="Elige tu plan, impulsa tu negocio"
             subtitle="El siguiente nivel de tu negocio está a un clic. Elige, empieza y deja que los resultados hablen."
@@ -23,7 +23,7 @@ import "../styles/pricingPage.css";
             <div slot="extraContent">
                 <div class="pricingcards">
                     <PricingCard
-                        planType="Básico"
+                        planType="basic"
                         price="$100.000 COP"
                         description="¡Administra tu negocio desde el primer día!"
                         featuresTitle="Módulo administrativo"
@@ -33,7 +33,7 @@ import "../styles/pricingPage.css";
                     />
 
                     <PricingCard
-                        planType="Avanzado"
+                        planType="advanced"
                         price="$500.000 COP"
                         description="El mejor plan todo en uno para el control total de tu negocio."
                         featuresTitle="Módulo administrativo + web app + Inteligencia artificial"
@@ -44,7 +44,7 @@ import "../styles/pricingPage.css";
                     />
 
                     <PricingCard
-                        planType="Intermedio"
+                        planType="intermediate"
                         price="$300.000 COP"
                         description="Más control y colaboración con una web app para tu equipo de trabajo."
                         featuresTitle="Módulo administrativo + web app"