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

feat: added responsive to all current pages, making them work in tablet and mobile devices. Also, implemented dark theme and persistance of theme in LocalStorage.

Browse Source
This commit is contained in:
Juan Diego Moreno Upegui
2026-02-16 09:07:23 -05:00
parent bf48a5dcf2
commit 7bebc0b97d
16 changed files with 802 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
src/components/CollapsableFeatures.astro Normal file
View File

@@ -0,0 +1,91 @@
---
// imports
// types
// props
interface CollapsableFeaturesProps {
basicFeatures?: boolean;
webAppFeatures?: boolean;
aiFeatures?: boolean;
}
// logic, variables, functions, etc.
const { basicFeatures, webAppFeatures, aiFeatures } =
Astro.props as CollapsableFeaturesProps;
---
<div class="collapsable-features">
<details>
<summary class="features-subtitle">Mira lo que incluye tu plan</summary>
<div class="features-list">
{
basicFeatures && (
<div class="basic-features">
<p>
<strong>Características básicas:</strong>
</p>
<p>
Control completo de usuarios, clientes, proveedores,
inventario, contabilidad y reportes financieros.
Módulos de ventas, compras y agenda de
profesionales.
</p>
</div>
)
}
{
webAppFeatures && (
<div class="webapp-features">
<p>
<strong>Aplicación web:</strong>
</p>
<p>
Acceso personalizado para gestionar servicios
diarios: control en tiempo real, registro de
evidencias, reportes y comunicación fluida con
central.
</p>
</div>
)
}
{
aiFeatures && (
<div class="ai-features">
<p>
<strong>Servicio al cliente y postventa:</strong>
</p>
<p>
Agendamiento y confirmación por WhatsApp/redes, con
notificaciones de salida vía WhatsApp o email.
</p>
</div>
)
}
</div>
</details>
</div>
<style>
.features-subtitle {
width: 100%;
font-weight: bold;
font-size: var(--font-desktop-base);
color: var(--base-white);
cursor: pointer;
margin-bottom: var(--space-md-16px);
text-decoration: underline;
}
@media (min-width: 768px) {
.collapsable-features {
display: none;
}
}
</style>

56
src/components/InitialSection.astro
View File

@@ -77,13 +77,27 @@ const {
display: flex;
flex-direction: column;
gap: var(--space-4xl-96px);
padding: 80px 300px 0px 300px;
padding: 0px 350px;
@media (max-width: 1023px) {
height: auto;
padding: 0px 48px;
}
@media (max-width: 767px) {
padding: 0px var(--padding-lg-24px);
gap: var(--space-3xl-64px);
}
}
.section-1[data-auto-height="true"] {
height: auto;
min-height: 100vh;
padding-bottom: 80px;
@media (max-width: 1023px) {
padding-bottom: 0px;
}
}
.main-img {
@@ -97,12 +111,20 @@ const {
transform: translateX(-32%);
z-index: -1;
pointer-events: none;
@media (max-width: 1023px) {
display: none;
}
}
.landing-content {
display: flex;
flex-direction: column;
gap: var(--space-4xl-96px);
@media (max-width: 767px) {
gap: var(--space-3xl-64px);
}
}
.logo-container {
@@ -111,8 +133,12 @@ const {
justify-content: start;
}
.logo-naliia-full {
height: 81px;
height: 82px;
width: auto;
@media (max-width: 767px) {
height: 50px;
}
}
.text-and-button-container {
@@ -120,6 +146,11 @@ const {
flex-direction: column;
gap: var(--space-3xl-64px);
max-width: 780px;
@media (max-width: 767px) {
gap: var(--space-xl-32px);
width: 100%;
}
}
.text-content {
@@ -129,9 +160,19 @@ const {
}
.main-title {
font-size: 80px;
line-height: calc(80px * 1.2);
@media (max-width: 767px) {
font-size: var(--font-mobile-h1);
line-height: var(--line-height-mobile-h1);
}
}
.subtitle {
max-width: 630px;
@media (max-width: 767px) {
width: 100%;
}
}
.call-to-action-button {
@@ -149,5 +190,16 @@ const {
justify-content: center;
color: white;
cursor: pointer;
@media (max-width: 1023px) {
padding: var(--padding-sm-8px) var(--padding-lg-24px);
}
@media (max-width: 767px) {
height: 44px;
font-size: var(--font-mobile-h6);
font-weight: bold;
padding: var(--padding-sm-8px) var(--padding-lg-24px);
}
}
</style>

6
src/components/PlanDetailsTable.astro
View File

@@ -194,6 +194,12 @@
border: var(--detailstable-primaryborder);
border-spacing: 0;
border-collapse: collapse;
@media (max-width: 1023px) {
display: block;
overflow-x: auto;
white-space: nowrap;
}
}
th {

16
src/components/PricingCard.astro
View File

@@ -7,6 +7,7 @@ export interface PricingCardProps {
featuresDescription: string;
buttonText: string;
isBestPlan?: boolean;
class?: string;
}
const {
@@ -17,10 +18,11 @@ const {
featuresDescription,
buttonText,
isBestPlan,
class: className,
} = Astro.props as PricingCardProps;
---
<div class="pricing-card" data-best-plan={isBestPlan}>
<div class:list={["pricing-card", className]} data-best-plan={isBestPlan}>
<div class="pricing-card-header">
<p class="plan-type">{`Plan ${planType}`}</p>
@@ -52,6 +54,10 @@ const {
.pricing-card[data-best-plan="true"] {
border: 4px solid var(--primarybutton-bgcolor);
height: 750px;
@media (max-width: 1023px) {
height: auto;
}
}
.pricing-card {
@@ -68,6 +74,12 @@ const {
padding: var(--space-3xl-64px) var(--space-xl-32px);
box-sizing: border-box;
@media (max-width: 1023px) {
height: auto;
gap: var(--space-2xl-48px);
padding: var(--padding-xl-32px);
}
}
.pricing-card-header {
@@ -107,7 +119,7 @@ const {
border-top: 1px solid var(--main-pink-500);
border-bottom: 1px solid var(--main-pink-500);
padding: var(--padding-lg-24px) 0;
gap: var(--space-xl-32px);
gap: var(--space-lg-24px);
& .features-title {
font-weight: bold;

6
src/components/footer/Footer.astro
View File

@@ -125,7 +125,9 @@ import "./footer.css";
<div class="footer-divider"></div>
<p>&copy; 2026 Naliia. Todos los derechos reservados.</p>
<p class="copyrigth-text">
&copy; 2026 Naliia. Todos los derechos reservados.
</p>
</div>
<div class="social-media">
@@ -170,6 +172,6 @@ import "./footer.css";
</a>
</div>
<p>Contáctanos para más información</p>
<p class="info-text">Contáctanos para más información</p>
</div>
</div>

32
src/components/footer/footer.css
View File

@@ -7,23 +7,45 @@
box-sizing: border-box;
background-color: var(--main-bg-color);
border-top: var(--main-border);
@media (max-width: 767px) {
padding: var(--padding-md-16px) var(--padding-lg-24px);
}
}
.logo-and-copyright {
display: flex;
align-items: center;
gap: var(--space-lg-24px);
@media (max-width: 1023px) {
gap: var(--space-md-16px);
}
}
.copyrigth-text {
@media (max-width: 767px) {
display: none;
}
}
.footer-divider {
width: 1px;
height: 40px;
background-color: rgba(68, 68, 68, 0.2);
@media (max-width: 767px) {
display: none;
}
}
.logo-naliia-footer {
height: 44px;
width: auto;
@media (max-width: 1023px) {
height: 32px;
}
}
.social-media {
@@ -35,6 +57,10 @@
.icons-social-media {
display: flex;
gap: var(--space-lg-24px);
@media (max-width: 1023px) {
gap: var(--space-md-16px);
}
}
.social-media-link {
@@ -44,3 +70,9 @@
align-items: center;
justify-content: center;
}
.info-text {
@media (max-width: 1023px) {
display: none;
}
}

80
src/components/navbar/Navbar.astro
View File

@@ -51,19 +51,93 @@ const currentPath: string = Astro.url.pathname;
<a href="/contact" class={currentPath === "/contact" ? "active" : ""}>
Contacto
</a>
<a href="/docs" class={currentPath === "/docs" ? "active" : ""}>
Documentación
</a>
</div>
<button class="theme-toggle">
<div class="navbar-buttons-container">
<button class="theme-toggle general-button">
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 2048 2048"
class="svg-container"
><path
class="svg-container light-icon"
>
<path
fill="var(--main-icon-color)"
d="M960 512q93 0 174 35t142 96t96 142t36 175q0 93-35 174t-96 142t-142 96t-175 36q-93 0-174-35t-142-96t-96-142t-36-175q0-93 35-174t96-142t142-96t175-36m0 768q66 0 124-25t101-69t69-102t26-124t-25-124t-69-101t-102-69t-124-26q-35 0-64 7v626q29 7 64 7m64-896H896V0h128zM896 1536h128v384H896zm1024-640v128h-384V896zM384 1024H0V896h384zm123-426L236 326l90-90l272 271zm906 724l271 272l-90 90l-272-271zm0-724l-91-91l272-271l90 90zm-906 724l91 91l-272 271l-90-90z"
></path>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 24 24"
class="svg-container dark-icon"
><path
fill="var(--main-icon-color)"
d="M20.742 13.045a8 8 0 0 1-2.077.271c-2.135 0-4.14-.83-5.646-2.336a8.03 8.03 0 0 1-2.064-7.723A1 1 0 0 0 9.73 2.034a10 10 0 0 0-4.489 2.582c-3.898 3.898-3.898 10.243 0 14.143a9.94 9.94 0 0 0 7.072 2.93a9.93 9.93 0 0 0 7.07-2.929a10 10 0 0 0 2.583-4.491a1 1 0 0 0-1.224-1.224m-2.772 4.301a7.95 7.95 0 0 1-5.656 2.343a7.95 7.95 0 0 1-5.658-2.344c-3.118-3.119-3.118-8.195 0-11.314a8 8 0 0 1 2.06-1.483a10.03 10.03 0 0 0 2.89 7.848a9.97 9.97 0 0 0 7.848 2.891a8 8 0 0 1-1.484 2.059"
></path></svg
>
</button>
<div class="icons-divider"></div>
<button class="mobile-menu-icon general-button">
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 24 24"
class="svg-container"
><path
fill="none"
stroke="var(--main-icon-color)"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"></path></svg
>
</button>
</div>
</nav>
<script>
const navContainer = document.querySelector(".nav-container");
const mobileMenuButton = document.querySelector(".mobile-menu-icon");
const themeToggler = document.querySelector(".theme-toggle");
// Inicializar el tema (por defecto "light" si no existe)
if (!document.documentElement.getAttribute("data-theme")) {
document.documentElement.setAttribute("data-theme", "light");
}
if (mobileMenuButton && navContainer) {
mobileMenuButton.addEventListener("click", () => {
navContainer.classList.toggle("menu-open");
});
}
if (themeToggler) {
themeToggler.addEventListener("click", () => {
const currentTheme =
document.documentElement.getAttribute("data-theme");
const newTheme = currentTheme === "light" ? "dark" : "light";
document.documentElement.setAttribute("data-theme", newTheme);
const persistedTheme = localStorage.getItem("theme");
if (persistedTheme) {
localStorage.setItem("theme", newTheme);
} else {
localStorage.setItem("theme", newTheme);
}
});
}
</script>

88
src/components/navbar/navbar.css
View File

@@ -3,10 +3,21 @@
justify-content: space-between;
align-items: center;
height: 72px;
width: 100%;
box-sizing: border-box;
padding: 16px 64px;
border-bottom: 1px solid var(--navbar-border-color);
background-color: var(--main-bg-color);
margin-bottom: 80px;
@media (max-width: 1023px) {
padding: 16px 48px;
}
@media (max-width: 767px) {
padding: 16px 24px;
position: relative;
}
}
.nav-link {
@@ -18,6 +29,28 @@
.pageslinks-container {
display: flex;
gap: 48px;
@media (max-width: 767px) {
display: none;
}
}
/* Mostrar el menú cuando tenga la clase 'menu-open' */
.nav-container.menu-open .pageslinks-container {
@media (max-width: 767px) {
display: flex;
flex-direction: column;
gap: 16px;
position: absolute;
top: 72px;
left: 0;
right: 0;
background-color: var(--main-bg-color);
padding: 24px;
border-bottom: 1px solid var(--navbar-border-color);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
z-index: 1000;
}
}
a {
@@ -40,7 +73,7 @@ a.active::after {
background-color: red;
}
.theme-toggle {
.general-button {
background: none;
border: none;
cursor: pointer;
@@ -56,3 +89,56 @@ a.active::after {
align-items: center;
justify-content: center;
}
.navbar-buttons-container {
@media (max-width: 767px) {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}
}
.icons-divider {
display: none;
@media (max-width: 767px) {
display: block;
width: 1px;
height: 24px;
background-color: var(--navbar-border-color);
}
}
.mobile-menu-icon {
display: none;
cursor: pointer;
transition: transform 0.1s ease-in-out;
@media (max-width: 767px) {
display: block;
}
}
/* Toggle de iconos del tema */
.theme-toggle {
position: relative;
}
/* Por defecto (modo claro): mostrar luna, ocultar sol */
.light-icon {
display: none;
}
.dark-icon {
display: block;
}
/* En modo oscuro: mostrar sol, ocultar luna */
[data-theme="dark"] .light-icon {
display: block;
}
[data-theme="dark"] .dark-icon {
display: none;
}

14
src/layouts/Layout.astro
View File

@@ -15,7 +15,6 @@ const { pageTitle } = Astro.props;
// logic, variables, functions, etc.
---
<!doctype html>
<html lang="es" data-theme="light">
<head>
<meta charset="UTF-8" />
@@ -54,6 +53,7 @@ const { pageTitle } = Astro.props;
width="48"
height="48"
viewBox="-2 -2 24 24"
class="whatsapp-icon"
><g
fill="white"
fill-rule="evenodd"
@@ -79,6 +79,7 @@ const { pageTitle } = Astro.props;
width="48"
height="48"
viewBox="0 0 32 32"
class="payment-icon"
><path
fill="var(--base-white)"
d="M2 9.5A4.5 4.5 0 0 1 6.5 5h19A4.5 4.5 0 0 1 30 9.5v13a4.5 4.5 0 0 1-4.5 4.5h-19A4.5 4.5 0 0 1 2 22.5zM6.5 7A2.5 2.5 0 0 0 4 9.5V11h24V9.5A2.5 2.5 0 0 0 25.5 7zM4 22.5A2.5 2.5 0 0 0 6.5 25h19a2.5 2.5 0 0 0 2.5-2.5V13H4zM21 19h3a1 1 0 1 1 0 2h-3a1 1 0 1 1 0-2"
@@ -99,3 +100,14 @@ const { pageTitle } = Astro.props;
</footer>
</body>
</html>
<script type="module">
const savedTheme = localStorage.getItem("theme");
if (savedTheme) {
document.documentElement.setAttribute("data-theme", savedTheme);
} else {
document.documentElement.setAttribute("data-theme", "light");
localStorage.setItem("theme", "light");
}
</script>

11
src/pages/docs.astro Normal file
View File

@@ -0,0 +1,11 @@
---
// imports
// types
// props
// logic, variables, functions, etc.
---
<section>Esta es la pagina de documentacion</section>

59
src/pages/index.astro
View File

@@ -1,7 +1,15 @@
---
// imports
import Layout from "../layouts/Layout.astro";
import InitialSection from "../components/InitialSection.astro";
import CollapsableFeatures from "../components/CollapsableFeatures.astro";
import "../styles/index.css";
// types
// props
// logic, variables, functions, etc.
---
<Layout pageTitle="Home page">
@@ -12,10 +20,11 @@ import "../styles/index.css";
logoSrc="/src/assets/imgs/logo-naliia.svg"
logoAlt="Logo de Naliia"
mainTitle="Transformamos el caos en claridad"
subtitle="Convertimos la complejidad de salones, spas y barberías en un ecosistema que respira orden, precisión y belleza."
subtitle="Convertimos la complejidad de negocios completos en un ecosistema que respira orden, precisión y belleza."
buttonText="Comienza tu experiencia aquí"
/>
<!-- ----- What we offer section ----- -->
<section class="offer-section second-sect-container sections">
<div class="title-and-phrase">
<h4>¿Qué ofrecemos?</h4>
@@ -84,7 +93,6 @@ import "../styles/index.css";
</section>
<!-- ----- Pricing section ----- -->
<section class="pricing-container">
<div class="title-and-phrase">
<h4>Elige tu plan</h4>
@@ -107,20 +115,16 @@ import "../styles/index.css";
La mejor opción para tu negocio!
</h6>
</div>
<div class="button-and-link-container">
<button class="button select-plan-button"
>Contáctanos</button
>
<a href="/pricing"
>O conoce a detalle todos los planes</a
>
</div>
</div>
<div class="divider"></div>
<CollapsableFeatures
basicFeatures={true}
webAppFeatures={true}
aiFeatures={true}
/>
<div class="features-container">
<p class="features-subtitle">Tu plan incluye:</p>
@@ -176,20 +180,15 @@ import "../styles/index.css";
total!
</p>
</div>
<div class="button-and-link-container">
<button class="button select-plan-button"
>Contáctanos</button
>
<a href="/pricing"
>O conoce a detalle todos los planes</a
>
</div>
</div>
<div class="divider"></div>
<CollapsableFeatures
basicFeatures={true}
webAppFeatures={true}
/>
<div class="features-container">
<p class="features-subtitle">Tu plan incluye:</p>
@@ -232,20 +231,12 @@ import "../styles/index.css";
Gestión esencial para tu negocio!
</p>
</div>
<div class="button-and-link-container">
<button class="button select-plan-button"
>Contáctanos</button
>
<a href="/pricing"
>O conoce a detalle todos los planes</a
>
</div>
</div>
<div class="divider"></div>
<CollapsableFeatures basicFeatures={true} />
<div class="features-container">
<p class="features-subtitle">Tu plan incluye:</p>
@@ -269,6 +260,10 @@ import "../styles/index.css";
</div>
</div>
<button class="calltoaction-button"
>Quiero obtener uno de los planes</button
>
<p class="important-information">
Todos los planes incluyen soporte de lunes a viernes de 8am a
6pm y sábados de 8am a 4pm. Además, cada plan cuenta con una

3
src/pages/pricing.astro
View File

@@ -29,6 +29,7 @@ import "../styles/pricingPage.css";
featuresTitle="Módulo administrativo"
featuresDescription="Centraliza la operación de tu negocio con herramientas administrativas, comerciales y contables que te permiten gestionar clientes, ventas, inventarios, agenda y reportes desde un solo sistema."
buttonText="Elegir Básico"
class="basic-plan"
/>
<PricingCard
@@ -39,6 +40,7 @@ import "../styles/pricingPage.css";
featuresDescription="Incluye todo lo del Plan Básico, la app web del Plan Intermedio y agentes de inteligencia artificial que automatizan el agendamiento de citas, confirmaciones y mensajes por WhatsApp y otros canales, mejorando la atención al cliente y la postventa."
buttonText="Elegir Avanzado"
isBestPlan={true}
class="advanced-plan"
/>
<PricingCard
@@ -48,6 +50,7 @@ import "../styles/pricingPage.css";
featuresTitle="Módulo administrativo + web app"
featuresDescription="Incluye todo lo del Plan Básico, más una aplicación web que permite al equipo acceder a su cuenta, gestionar servicios diarios, registrar avances, observaciones y evidencias, y consultar reportes en tiempo real."
buttonText="Elegir Intermedio"
class="intermediate-plan"
/>
</div>
</div>

14
src/styles/contactpage.css
View File

@@ -32,6 +32,12 @@
display: flex;
gap: var(--space-3xl-64px);
}
@media (max-width: 767px) {
.socialmedia-icons {
gap: var(--space-xl-32px);
}
}
}
.sections {
@@ -49,6 +55,14 @@
padding: 140px;
border: var(--main-border);
border-radius: var(--space-lg-24px);
@media (max-width: 1023px) {
padding: 64px 48px;
}
@media (max-width: 767px) {
padding: 32px 24px;
}
}
.form-items {

100
src/styles/global.css
View File

@@ -29,11 +29,19 @@
}
:root {
--responsive-breakpoint-mobile-min: 320px;
--responsive-breakpoint-mobile-max: 767px;
--responsive-breakpoint-tablet-min: 768px;
--responsive-breakpoint-tablet-max: 1023px;
--responsive-breakpoint-desktop-min: 1024px;
--responsive-breakpoint-desktop-max: 1920px;
/* Primitive values */
--bg-svg-color: #ffffff;
/* Colors */
--dark-gray: #252525;
--darker-gray: #1b1b1b;
--light-gray: #444444;
--base-white: #ffffff;
--base-black: #000000;
@@ -240,11 +248,48 @@
[data-theme="dark"] {
/* Dark theme */
--main-bg-color: var(--dark-gray);
--main-text-color: var(--base-white);
--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);
--main-icon-color: var(--base-white);
--navbar-border-color: rgba(255, 255, 255, 0.2);
--navbar-n-naliia-start: var(--base-white);
--navbar-n-naliia-end: var(--base-white);
--main-border: 1px solid rgba(255, 255, 255, 0.2);
--primarybutton-bgcolor: var(--main-pink-500);
--primarybutton-txtcolor: var(--base-white);
--pricingcard-bgcolor: var(--darker-gray);
--pricingcard-secundarybgcolor: var(--light-gray);
--pricingcard-section-bgcolor: var(--main-pink-500);
--pricingcard-sec-car-bgcolor: var(--light-gray);
--pricingcard-plantype-bgcolor: var(--main-pink-500);
--pricingcard-plantype-txtcolor: var(--base-white);
--pricingcard-value-txtcolor: var(--base-white);
--pricingcard-features-subtitlecolor: var(--main-pink-500);
--pricingcard-primarytextcolor: var(--base-white);
--detailstable-header-primarybgcolor: var(--light-gray);
--detailstable-header-txtcolor: var(--base-white);
--detailstable-primarytxtcolor: var(--base-white);
--detailstable-primaryborder: 1px solid rgba(255, 255, 255, 0.2);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
margin: 0;
width: 100%;
height: 100%;
min-height: 100vh;
overflow-x: hidden;
}
html,
body {
margin: 0;
width: 100%;
@@ -261,7 +306,7 @@ p {
margin: 0;
color: var(--main-text-color);
@media (max-width: 768px) {
@media (max-width: 767px) {
font-size: var(--font-mobile-base);
line-height: var(--line-height-mobile-base);
padding: 0;
@@ -276,7 +321,7 @@ h1 {
margin: 0;
color: var(--main-text-color);
@media (max-width: 768px) {
@media (max-width: 767px) {
font-size: var(--font-mobile-h1);
line-height: var(--line-height-mobile-h1);
padding: 0;
@@ -291,7 +336,7 @@ h2 {
margin: 0;
color: var(--main-text-color);
@media (max-width: 768px) {
@media (max-width: 767px) {
font-size: var(--font-mobile-h2);
line-height: var(--line-height-mobile-h2);
padding: 0;
@@ -306,7 +351,7 @@ h3 {
margin: 0;
color: var(--main-text-color);
@media (max-width: 768px) {
@media (max-width: 767px) {
font-size: var(--font-mobile-h3);
line-height: var(--line-height-mobile-h3);
padding: 0;
@@ -321,7 +366,7 @@ h4 {
margin: 0;
color: var(--main-text-color);
@media (max-width: 768px) {
@media (max-width: 767px) {
font-size: var(--font-mobile-h4);
line-height: var(--line-height-mobile-h4);
padding: 0;
@@ -336,7 +381,7 @@ h5 {
margin: 0;
color: var(--main-text-color);
@media (max-width: 768px) {
@media (max-width: 767px) {
font-size: var(--font-mobile-h5);
line-height: var(--line-height-mobile-h5);
padding: 0;
@@ -351,7 +396,7 @@ h6 {
margin: 0;
color: var(--main-text-color);
@media (max-width: 768px) {
@media (max-width: 767px) {
font-size: var(--font-mobile-h6);
line-height: var(--line-height-mobile-h6);
padding: 0;
@@ -367,7 +412,7 @@ summary {
font-size: var(--font-desktop-base);
line-height: var(--line-height-desktop-base);
@media (max-width: 768px) {
@media (max-width: 767px) {
font-size: var(--font-mobile-base);
line-height: var(--line-height-mobile-base);
}
@@ -424,6 +469,21 @@ main {
scale: 1.1;
transition: scale 0.4s ease;
}
@media (max-width: 767px) {
width: 56px;
height: 56px;
& .whatsapp-icon {
width: 40px;
height: 40px;
}
& .payment-icon {
width: 40px;
height: 40px;
}
}
}
.whatsapp-floatingbutton {
@@ -460,6 +520,17 @@ main {
opacity: 1;
visibility: visible;
}
@media (max-width: 767px) {
& .whatsapp-floatingbutton-text {
font-size: var(--font-mobile-sm);
padding: var(--padding-sm-8px) var(--padding-md-16px);
}
&:hover .whatsapp-floatingbutton-text {
right: 70px;
}
}
}
.payment-floatingbutton {
@@ -496,4 +567,15 @@ main {
opacity: 1;
visibility: visible;
}
@media (max-width: 767px) {
& .payment-floatingbutton-text {
font-size: var(--font-mobile-sm);
padding: var(--padding-sm-8px) var(--padding-md-16px);
}
&:hover .payment-floatingbutton-text {
right: 70px;
}
}
}

261
src/styles/index.css
View File

@@ -1,9 +1,18 @@
.homepage {
display: flex;
overflow-x: hidden;
overflow-y: hidden;
flex-direction: column;
gap: 140px;
gap: 120px;
background-color: transparent;
@media (max-width: 1023px) {
overflow-y: hidden;
}
@media (max-width: 767px) {
gap: var(--space-4xl-96px);
}
}
.sections {
@@ -11,12 +20,26 @@
flex-direction: column;
gap: 48px;
padding: 0px 350px;
@media (max-width: 1023px) {
padding: 0px 48px;
}
@media (max-width: 767px) {
padding: 0px var(--padding-lg-24px);
}
}
.sections-subtitle {
font-size: var(--font-desktop-base);
line-height: var(--line-height-desktop-base);
font-weight: bold;
@media (max-width: 767px) {
font-size: var(--font-mobile-base);
line-height: var(--line-height-mobile-base);
font-weight: normal;
}
}
/* ----- Offer section styles ----- */
@@ -41,42 +64,73 @@
border: var(--main-border);
border-radius: var(--space-lg-24px);
height: 200px;
padding: var(--space-3xl-64px);
height: 300px;
padding: var(--padding-3xl-64px);
display: flex;
align-items: center;
overflow: hidden;
position: relative;
@media (max-width: 1023px) {
height: auto;
padding: var(--padding-2xl-48px);
box-shadow: var(--main-boxshadow);
}
@media (max-width: 767px) {
padding: var(--padding-xl-32px);
}
}
.card-content {
max-width: 500px;
width: 500px;
display: flex;
flex-direction: column;
gap: var(--space-md-16px);
@media (max-width: 1023px) {
width: 100%;
}
}
.card-1 {
background-image: url("../assets/imgs/card_1.webp");
background-size: auto 136%;
background-position: right center;
background-repeat: no-repeat;
@media (max-width: 1023px) {
background-image: none;
}
}
.card-2 {
background-image: url("../assets/imgs/card_2.webp");
background-size: auto 136%;
background-position: right center;
background-repeat: no-repeat;
@media (max-width: 1023px) {
background-image: none;
}
}
.card-3 {
background-image: url("../assets/imgs/card_3.webp");
background-size: auto 136%;
background-position: right center;
background-repeat: no-repeat;
@media (max-width: 1023px) {
background-image: none;
}
}
.card-4 {
background-image: url("../assets/imgs/card_4.webp");
background-size: auto 136%;
background-position: right center;
background-repeat: no-repeat;
@media (max-width: 1023px) {
background-image: none;
}
}
/* ----- Pricing section styles ----- */
@@ -87,6 +141,14 @@
flex-direction: column;
gap: var(--space-2xl-48px);
padding: 0px 350px;
@media (max-width: 1023px) {
padding: 0px 48px;
}
@media (max-width: 767px) {
padding: 0px var(--padding-lg-24px);
}
}
.pricing-cards-container {
@@ -104,13 +166,25 @@
display: flex;
align-items: center;
gap: var(--space-2xl-48px);
padding: var(--space-xl-32px);
padding: var(--padding-xl-32px);
height: 372px;
width: 100%;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
background-color: var(--pricingcard-bgcolor);
box-sizing: border-box;
@media (max-width: 1023px) {
flex-direction: column;
height: auto;
gap: var(--space-xl-32px);
align-items: self-start;
}
@media (max-width: 767px) {
gap: var(--space-lg-24px);
border-radius: 16px;
}
}
.price-container {
@@ -119,7 +193,7 @@
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--space-xl-32px);
border-top-left-radius: var(--space-2xl-48px);
& .plan-type {
@@ -137,6 +211,15 @@
& a {
color: var(--pricingcard-value-txtcolor);
}
@media (max-width: 1023px) {
width: 100%;
gap: var(--space-2xl-48px);
}
@media (max-width: 767px) {
gap: var(--space-lg-24px);
}
}
.price-and-description {
@@ -148,6 +231,22 @@
p {
color: var(--pricingcard-value-txtcolor);
}
@media (max-width: 1023px) {
width: 100%;
gap: var(--space-sm-8px);
h4 {
font-size: var(--font-desktop-h3);
font-weight: bold;
}
}
@media (max-width: 767px) {
h4 {
font-size: var(--font-mobile-h3);
}
}
}
.button-and-link-container {
@@ -186,6 +285,16 @@
width: 1px;
height: 95%;
background-color: rgba(255, 255, 255, 0.2);
@media (max-width: 1023px) {
display: none;
}
}
.collapsable-features {
@media (width > 767px) {
display: none;
}
}
.features-container {
@@ -201,6 +310,10 @@
font-size: var(--font-desktop-base);
color: var(--pricingcard-features-subtitlecolor);
}
@media (max-width: 767px) {
display: none;
}
}
.features-list {
@@ -227,13 +340,32 @@
box-sizing: border-box;
& .pricing-card {
height: 300px;
height: 350px;
display: flex;
gap: var(--space-lg-24px);
padding: var(--space-xl-32px);
background-color: var(--pricingcard-sec-car-bgcolor);
}
@media (max-width: 1023px) {
flex-direction: column;
gap: var(--space-lg-24px);
& .pricing-card {
flex-direction: column;
height: auto;
width: 100%;
gap: var(--space-xl-32px);
align-items: self-start;
}
}
@media (max-width: 767px) {
.pricing-card {
border-radius: 16px;
}
}
}
.mid-plan {
@@ -246,7 +378,7 @@
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--space-xl-32px);
}
& .plan-type {
@@ -272,8 +404,45 @@
}
}
& a {
color: var(--pricingcard-value-txtcolor);
@media (max-width: 1023px) {
width: 100%;
gap: var(--space-lg-24px);
border-radius: 0px;
& .price-container {
width: 100%;
gap: var(--space-2xl-48px);
}
& .price-and-description {
width: 100%;
gap: var(--space-sm-8px);
& h5 {
font-size: var(--font-desktop-h3);
font-weight: bold;
}
}
}
@media (max-width: 767px) {
gap: var(--space-lg-24px);
border-radius: 0px;
& .price-container {
width: 100%;
gap: var(--space-lg-24px);
}
& .price-and-description {
width: 100%;
gap: var(--space-sm-8px);
& h5 {
font-size: var(--font-mobile-h3);
font-weight: bold;
}
}
}
}
@@ -283,11 +452,11 @@
& .price-container {
height: 100%;
width: 50%;
width: 70%;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--space-xl-32px);
}
& .plan-type {
@@ -313,8 +482,70 @@
}
}
& a {
color: var(--pricingcard-value-txtcolor);
@media (max-width: 1023px) {
width: 100%;
gap: var(--space-lg-24px);
border-bottom-left-radius: 48px;
border-bottom-right-radius: 48px;
& .price-container {
width: 100%;
gap: var(--space-2xl-48px);
}
& .price-and-description {
width: 100%;
gap: var(--space-sm-8px);
& h5 {
font-size: var(--font-desktop-h3);
font-weight: bold;
}
}
}
@media (max-width: 767px) {
gap: var(--space-lg-24px);
border-radius: 0px;
& .price-container {
width: 100%;
gap: var(--space-lg-24px);
}
& .price-and-description {
width: 100%;
gap: var(--space-sm-8px);
& h5 {
font-size: var(--font-mobile-h3);
font-weight: bold;
}
}
}
}
.calltoaction-button {
display: flex;
justify-content: center;
align-items: center;
height: 56px;
width: 100%;
padding: var(--space-sm-8px) var(--space-md-16px);
border: none;
border-radius: 16px;
background-color: var(--primarybutton-bgcolor);
color: var(--primarybutton-txtcolor);
font-family: var(--font-family-primary);
font-size: var(--font-desktop-h6);
font-weight: bold;
cursor: pointer;
box-shadow: var(--main-boxshadow);
box-sizing: border-box;
@media (max-width: 767px) {
font-size: var(--font-mobile-h6);
height: 44px;
}
}
@@ -327,6 +558,4 @@
border: 2px solid red;
border-radius: var(--space-md-16px);
font-weight: bold;
}

34
src/styles/pricingPage.css
View File

@@ -5,6 +5,10 @@
gap: 140px;
background-color: transparent;
margin-bottom: 140px;
@media (max-width: 1023px) {
gap: 120px;
}
}
.sections {
@@ -12,6 +16,10 @@
flex-direction: column;
gap: 48px;
padding: 0px 350px;
@media (max-width: 1023px) {
padding: 0px 48px;
}
}
.sections-subtitle {
@@ -34,19 +42,21 @@
gap: var(--space-lg-24px);
}
.plans-details-container {
display: flex;
}
.plan-details {
flex: 1;
display: flex;
@media (max-width: 1023px) {
.pricingcards {
flex-direction: column;
gap: var(--space-md-16px);
gap: var(--space-lg-24px);
}
.plan-title {
border: 1px solid black;
text-align: center;
padding: 24px;
.pricingcards .advanced-plan {
order: 1;
}
.pricingcards .intermediate-plan {
order: 2;
}
.pricingcards .basic-plan {
order: 3;
}
}