Feature:

- Added custom y position to InitialSection component.
- Created contact page with form to ask information to user.
- Added styles to contact page and edit some global styles for dark theme.

src/components/InitialSection.astro

@@ -5,6 +5,7 @@ export interface SectionProps {
     imgWidth?: number;
     imgHeight?: number;
     customXPosition?: string;
+    customYPosition?: string;
     logoSrc: string;
     logoAlt: string;
     mainTitle: string;
@@ -24,6 +25,7 @@ const {
     subtitle,
     buttonText,
     customXPosition,
+    customYPosition,
     autoHeight = false,
 } = Astro.props as SectionProps;
 ---
@@ -34,7 +36,7 @@ const {
         alt={imgAlt}
         class="main-img"
         fetchpriority="high"
-        style={`width: ${imgWidth ? imgWidth : "auto"}px; height: ${imgHeight ? imgHeight : "auto"}px; ${customXPosition ? `transform: translateX(${customXPosition});` : ""}`}
+        style={`width: ${imgWidth ? imgWidth : "auto"}px; height: ${imgHeight ? imgHeight : "auto"}px; ${customXPosition || customYPosition ? `transform: translate(${customXPosition ? customXPosition : "0"}, ${customYPosition ? customYPosition : "0"});` : ""}`}
     />
 
     <div class="landing-content">
@@ -62,6 +64,7 @@ const {
                 )
             }
         </div>
+
         <slot name="extraContent" />
     </div>
 </section>

src/pages/contact.astro

@@ -1,6 +1,8 @@
 ---
 // imports
 import Layout from "../layouts/Layout.astro";
+import InitialSection from "../components/InitialSection.astro";
+import "../styles/contactpage.css";
 
 // types
 
@@ -10,9 +12,154 @@ import Layout from "../layouts/Layout.astro";
 ---
 
 <Layout pageTitle="Contacto">
-    <h1>Contacto</h1>
+    <section class="contact-page">
-    <p>
+        <InitialSection
-        Aquí encontrarás información sobre cómo ponerte en contacto con
+            imgSrc="/src/assets/imgs/chat_3d_illustration.svg"
-        nosotros.
+            imgAlt="Ilustración 3D de unas burbujas de chat flotantes"
+            imgWidth={700}
+            customXPosition="-36%"
+            customYPosition="20%"
+            logoSrc="/src/assets/imgs/logo-naliia.svg"
+            logoAlt="Logo de Naliia"
+            mainTitle="Contactanos"
+            autoHeight={true}
+        >
+            <div slot="extraContent">
+                <div class="info-and-form">
+                    <div class="contact-methods">
+                        <div class="title-and-text">
+                            <h5 class="subtitle">
+                                Todas nuestras redes sociales y metodos de
+                                contacto
+                            </h5>
+
+                            <p class="phrase">
+                                Contactanos y toma el control total de tu
+                                negocio con Naliia.
                             </p>
+                        </div>
+
+                        <div class="socialmedia-icons">
+                            <a href="#" class="social-media-link">
+                                <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    width="48"
+                                    height="48"
+                                    viewBox="-2 -2 24 24"
+                                    ><g
+                                        fill="var(--main-icon-color)"
+                                        fill-rule="evenodd"
+                                        clip-rule="evenodd"
+                                        ><path
+                                            d="M9.516.012C4.206.262.017 4.652.033 9.929a9.8 9.8 0 0 0 1.085 4.465L.06 19.495a.387.387 0 0 0 .47.453l5.034-1.184a10 10 0 0 0 4.284 1.032c5.427.083 9.951-4.195 10.12-9.58C20.15 4.441 15.351-.265 9.516.011zm6.007 15.367a7.78 7.78 0 0 1-5.52 2.27a7.8 7.8 0 0 1-3.474-.808l-.701-.347l-3.087.726l.65-3.131l-.346-.672A7.6 7.6 0 0 1 2.197 9.9c0-2.07.812-4.017 2.286-5.48a7.85 7.85 0 0 1 5.52-2.271c2.086 0 4.046.806 5.52 2.27a7.67 7.67 0 0 1 2.287 5.48c0 2.052-.825 4.03-2.287 5.481z"
+                                        ></path><path
+                                            d="m14.842 12.045l-1.931-.55a.72.72 0 0 0-.713.186l-.472.478a.71.71 0 0 1-.765.16c-.913-.367-2.835-2.063-3.326-2.912a.69.69 0 0 1 .056-.774l.412-.53a.71.71 0 0 0 .089-.726L7.38 5.553a.723.723 0 0 0-1.125-.256c-.539.453-1.179 1.14-1.256 1.903c-.137 1.343.443 3.036 2.637 5.07c2.535 2.349 4.566 2.66 5.887 2.341c.75-.18 1.35-.903 1.727-1.494a.713.713 0 0 0-.408-1.072"
+                                        ></path></g
+                                    ></svg
+                                >
+                            </a>
+
+                            <a href="" class="social-media-link">
+                                <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    width="48"
+                                    height="48"
+                                    viewBox="0 0 24 24"
+                                    ><path
+                                        fill="var(--main-icon-color)"
+                                        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 href="#" class="social-media-link">
+                                <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    width="48"
+                                    height="48"
+                                    viewBox="0 0 24 24"
+                                    ><path
+                                        fill="var(--main-icon-color)"
+                                        d="M2 6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm3.519 0L12 11.671L18.481 6zM20 7.329l-7.341 6.424a1 1 0 0 1-1.318 0L4 7.329V18h16z"
+                                    ></path></svg
+                                >
+                            </a>
+                        </div>
+                    </div>
+
+                    <section class="contact-form sections">
+                        <div class="form-container">
+                            <div class="form-items">
+                                <h5 class="form-title">
+                                    O dejanos tus datos, nosotros te contactamos
+                                </h5>
+
+                                <form
+                                    class="contact-form"
+                                    id="contact-form"
+                                    name="contact-form"
+                                >
+                                    <div class="form-item">
+                                        <label for="" class="item-label"
+                                            >Nombre de contacto</label
+                                        >
+
+                                        <input
+                                            type="text"
+                                            class="form-input"
+                                            placeholder="Juan Carlos Garcia Velez"
+                                        />
+                                    </div>
+
+                                    <div class="form-item">
+                                        <label for="" class="item-label"
+                                            >Nombre de la empresa</label
+                                        >
+
+                                        <input
+                                            type="text"
+                                            class="form-input"
+                                            placeholder="Empresa XYZ S.A.S"
+                                        />
+                                    </div>
+
+                                    <div class="form-item">
+                                        <label for="" class="item-label"
+                                            >Numero de celular</label
+                                        >
+
+                                        <input
+                                            type="tel"
+                                            class="form-input"
+                                            placeholder="3104567890"
+                                        />
+                                    </div>
+
+                                    <div class="form-item">
+                                        <label for="" class="item-label"
+                                            >Correo electrónico</label
+                                        >
+
+                                        <input
+                                            type="email"
+                                            class="form-input"
+                                            placeholder="correoejemplo@gmail.com"
+                                        />
+                                    </div>
+                                </form>
+                            </div>
+
+                            <div>
+                                <button
+                                    form="contact-form"
+                                    class="submit-button"
+                                    >Enviar informacion</button
+                                >
+                            </div>
+                        </div>
+                    </section>
+                </div>
+            </div>
+        </InitialSection>
+    </section>
 </Layout>

src/styles/contactpage.css

@@ -0,0 +1,118 @@
+.contact-page {
+    display: flex;
+    overflow-x: hidden;
+    flex-direction: column;
+    gap: 140px;
+    background-color: transparent;
+    margin-bottom: 140px;
+}
+
+.info-and-form {
+    display: flex;
+    flex-direction: column;
+    gap: 140px;
+}
+
+.contact-methods {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xl-32px);
+
+    & .title-and-text {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-sm-8px);
+    }
+
+    & .subtitle {
+        font-weight: 900;
+    }
+
+    & .socialmedia-icons {
+        display: flex;
+        gap: var(--space-3xl-64px);
+    }
+}
+
+.sections {
+    display: flex;
+    flex-direction: column;
+    gap: 48px;
+}
+
+.form-container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2xl-48px);
+    background-color: var(--main-bg-color);
+    box-shadow: var(--main-boxshadow);
+    padding: 140px;
+    border: var(--main-border);
+    border-radius: var(--space-lg-24px);
+}
+
+.form-items {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xl-32px);
+}
+
+.form-title {
+    font-weight: bold;
+}
+
+.contact-form {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xl-32px);
+}
+
+.form-item {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm-8px);
+
+    & .item-label {
+        color: var(--main-text-color);
+        font-weight: bold;
+    }
+
+    & .form-input {
+        height: 56px;
+        padding: var(--padding-md-16px) var(--padding-xl-32px);
+        box-sizing: border-box;
+        border: var(--main-border);
+        border-radius: var(--space-md-16px);
+        font-family: var(--font-family-primary);
+        font-size: var(--font-desktop-base);
+        font-weight: bold;
+        color: var(--main-text-color);
+
+        &:focus {
+            border: 1px solid var(--main-pink-500);
+            outline: none;
+        }
+
+        &::placeholder {
+            color: var(--main-text-color);
+            opacity: 0.4;
+        }
+    }
+}
+
+.submit-button {
+    height: 44px;
+
+    background-color: var(--primarybutton-bgcolor);
+    color: var(--primarybutton-txtcolor);
+    font-family: var(--font-family-primary);
+    font-size: var(--font-desktop-base);
+    font-weight: bold;
+
+    border: none;
+    border-radius: var(--space-md-16px);
+    cursor: pointer;
+
+    padding: var(--padding-sm-8px) var(--padding-md-16px);
+}

src/styles/global.css

@@ -133,6 +133,7 @@
     /* Light theme (default) */
     --main-bg-color: var(--base-white);
     --main-text-color: var(--light-gray);
+    --main-boxshadow: 0px 4px 8px rgba(68, 68, 68, 0.1);
     --secundary-text-color: var(--base-white);
     --card-bg-color: var(--main-mistyRose-500);
     --naliia-n-bg-color: var(--main-pink-500);