diff --git a/src/assets/imgs/chat_3d_illustration.svg b/src/assets/imgs/chat_3d_illustration.svg new file mode 100644 index 0000000..15a4663 --- /dev/null +++ b/src/assets/imgs/chat_3d_illustration.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/InitialSection.astro b/src/components/InitialSection.astro index d339b08..adebf5f 100644 --- a/src/components/InitialSection.astro +++ b/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"});` : ""}`} />
@@ -62,6 +64,7 @@ const { ) }
+ diff --git a/src/pages/contact.astro b/src/pages/contact.astro index a8e0b66..026d4f1 100644 --- a/src/pages/contact.astro +++ b/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"; --- -

Contacto

-

- Aquí encontrarás información sobre cómo ponerte en contacto con - nosotros. -

+
+ +
+
+
+
+
+ Todas nuestras redes sociales y metodos de + contacto +
+ +

+ Contactanos y toma el control total de tu + negocio con Naliia. +

+
+ + +
+ +
+
+
+
+ O dejanos tus datos, nosotros te contactamos +
+ +
+
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+
+
+ +
+ +
+
+
+
+
+ +
diff --git a/src/styles/contactpage.css b/src/styles/contactpage.css new file mode 100644 index 0000000..1779afd --- /dev/null +++ b/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); +} diff --git a/src/styles/global.css b/src/styles/global.css index ad2b3ab..0e301a0 100644 --- a/src/styles/global.css +++ b/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);