OneTeam/NaliiaWebsite
16
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Feature:

Browse Source 
- 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.
This commit is contained in:
Juan Diego Moreno Upegui
2026-02-09 13:08:09 -05:00
parent f22055f388
commit 8278073312
5 changed files with 317 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/assets/imgs/chat_3d_illustration.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 323 KiB

5
src/components/InitialSection.astro
View File

@@ -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>

157
src/pages/contact.astro
View File

@@ -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>
<p>
Aquí encontrarás información sobre cómo ponerte en contacto con
nosotros.
</p>
<section class="contact-page">
<InitialSection
imgSrc="/src/assets/imgs/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"
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>

118
src/styles/contactpage.css Normal file
View File

@@ -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);
}

1
src/styles/global.css
View File

@@ -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);