Created basic structure of home page

src/assets/icons/theme-icon.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Capa_2" data-name="Capa 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.5 22.5">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #2d2d2d;
+      }
+    </style>
+  </defs>
+  <g id="Capa_1-2" data-name="Capa 1">
+    <path class="cls-1" d="M11.25,6c.73,0,1.41.14,2.04.41s1.19.65,1.66,1.12.85,1.03,1.12,1.66.41,1.32.42,2.05c0,.73-.14,1.41-.41,2.04s-.65,1.19-1.12,1.66-1.03.85-1.66,1.12-1.32.41-2.05.42c-.73,0-1.41-.14-2.04-.41s-1.19-.65-1.66-1.12-.85-1.03-1.12-1.66-.41-1.32-.42-2.05c0-.73.14-1.41.41-2.04s.65-1.19,1.12-1.66,1.03-.85,1.66-1.12,1.32-.41,2.05-.42M11.25,15c.52,0,1-.1,1.45-.29s.85-.46,1.18-.81.61-.74.81-1.2.3-.94.3-1.45-.1-1-.29-1.45-.46-.85-.81-1.18-.74-.61-1.2-.81-.94-.3-1.45-.3c-.27,0-.52.03-.75.08v7.34c.23.05.48.08.75.08M12,4.5h-1.5V0h1.5v4.5ZM10.5,18h1.5v4.5h-1.5v-4.5ZM22.5,10.5v1.5h-4.5v-1.5h4.5ZM4.5,12H0v-1.5h4.5v1.5ZM5.94,7.01l-3.18-3.19,1.05-1.05,3.19,3.18-1.07,1.07ZM16.56,15.49l3.18,3.19-1.05,1.05-3.19-3.18,1.07-1.07ZM16.56,7.01l-1.07-1.07,3.19-3.18,1.05,1.05-3.18,3.19ZM5.94,15.49l1.07,1.07-3.19,3.18-1.05-1.05,3.18-3.19Z"/>
+  </g>
+</svg>

src/assets/imgs/img-preview.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Capa_2" data-name="Capa 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 450 200">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+
+      .cls-2 {
+        fill: url(#Degradado_sin_nombre_66);
+      }
+    </style>
+    <linearGradient id="Degradado_sin_nombre_66" data-name="Degradado sin nombre 66" x1="225" y1="200" x2="225" y2="0" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#ff4b77"/>
+      <stop offset=".33" stop-color="#ff7875"/>
+      <stop offset=".67" stop-color="#ff9e84"/>
+      <stop offset="1" stop-color="#ffb86f"/>
+    </linearGradient>
+  </defs>
+  <g id="Capa_1-2" data-name="Capa 1">
+    <rect class="cls-2" width="450" height="200"/>
+    <g>
+      <circle class="cls-1" cx="253.2" cy="66.67" r="10.25"/>
+      <path class="cls-1" d="M272.93,111.02c-.79-1.9-2.02-3.13-3.72-4.83l-5.71-5.71c-4.69-4.69-7.28-7.28-10.98-8.39-2.91-.88-5.98-.88-8.89,0-3.7,1.12-6.29,3.7-10.98,8.39-1.27,1.27-2.57,2.57-3.32,3.18-.47-.84-1.19-2.51-1.89-4.15l-.63-1.48c-4.49-10.47-6.96-16.23-12.73-18.63-1.5-.62-3.07-1-4.7-1.13-6.24-.48-11.05,3.53-19.8,10.82l-7.75,6.46c-2.08,1.74-3.59,2.99-4.56,5.05v.03c-.97,2.06-.97,4.03-.97,6.74v10.58c0,5.11,0,8.8.42,11.94.34,2.53,1.14,6.25,4.08,9.19,2.95,2.95,6.66,3.74,9.19,4.09,3.13.42,6.82.42,11.94.42h46.15c5.11,0,8.8,0,11.94-.42,2.53-.34,6.25-1.14,9.19-4.08,2.95-2.95,3.74-6.66,4.09-9.19.42-3.13.42-6.82.42-11.94v-.88c0-2.42,0-4.17-.78-6.05Z"/>
+    </g>
+  </g>
+</svg>

src/assets/imgs/logo-naliia-blanco.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Capa_2" data-name="Capa 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 389.44 147.78">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <g id="Capa_1-2" data-name="Capa 1">
+    <g>
+      <path class="cls-1" d="M113.28,67.85c3.79-5.22,6.69-9.77,8.63-13.53,2.02-3.91,3.04-7.93,3.04-11.93,0-1.59-.46-3.51-1.39-5.89-.9-2.27-1.94-4.24-3.09-5.86-.91-1.26-2.32-2.94-4.13-2.94-2.58,0-6.29,1.7-11.34,5.2-4.78,3.31-10.7,8.29-17.61,14.8-6.89,6.49-15.08,15.03-24.35,25.38-5.28,5.89-10.88,12.39-16.76,19.45l9.4-15.83c3.78-6.36,7.54-12.88,11.17-19.38,3.66-6.54,6.49-12.19,8.41-16.78,2.01-4.8,2.99-8.41,2.99-11.04,0-3.27-1.23-5.82-3.65-7.58-2.27-1.65-5.35-2.49-9.15-2.49-4.19,0-9.25,1.28-15.04,3.81-4.52,1.97-11.16,5.12-19.8,9.39.69-.61,1.44-1.22,2.24-1.83,2.09-1.57,2.7-2.3,2.7-3.26,0-1.27-.69-1.83-1.1-2.05-1.22-.66-2.53.16-3.07.5-9.46,5.43-17.11,11.85-22.73,19.09C2.82,52.55,0,58.44,0,63.06s3.07,4.95,4.01,4.95c.65,0,1.63,0,10.24-4.91,5.47-3.12,9.81-5.54,12.9-7.2,3.07-1.65,8.03-3.91,14.72-6.72,10.44-4.35,13.46-5,14.32-5,.5,0,.92.16,1.3.51.35.32.5.69.5,1.2,0,1.61-1.28,5.97-7.37,17.57-5,9.51-12.66,22.74-22.8,39.33h0c-1.92,3.24-4.48,7.27-7.6,11.99-4.41,6.68-5.01,8.73-5.01,9.86,0,1.53,1.17,3.38,3.8,6.01,2.6,2.6,4.67,3.8,6.52,3.8s3.68-1.32,5.81-4.13c3.76-4.9,7.46-9.72,11.1-14.48,3.64-4.75,6.93-9.04,9.86-12.85,2.91-3.78,5.79-7.4,8.59-10.76,2.8-3.37,4.79-5.69,5.9-6.92,23.14-25.91,30.9-29.78,33.47-29.78.12,0,.2,0,.25.02,0,.04,0,.09,0,.16,0,.77-.7,3.57-7.22,12.9-5.13,7.24-9.79,14.28-13.85,20.93-4.08,6.67-7.55,12.95-10.32,18.67-2.79,5.74-4.89,10.89-6.24,15.31-1.38,4.49-2.08,8.4-2.08,11.62,0,3.69,1.04,6.74,3.1,9.06,2.11,2.37,4.91,3.57,8.34,3.57,2.29,0,4.95-.75,7.9-2.22,2.81-1.41,6.02-3.5,9.54-6.23,3.47-2.69,7.19-5.87,11.08-9.44,3.87-3.56,8.32-7.9,13.22-12.92l.48-.49-.28-11.03-2.65,2.56c-3.43,3.32-6.88,6.43-10.25,9.23-3.32,2.77-6.2,4.84-8.55,6.15-2.19,1.22-4.08,1.85-5.62,1.85-3.1,0-4.36-1.19-4.36-4.11,0-4.75,2.41-11.23,7.16-19.25,4.87-8.22,12.73-19.67,23.36-34.04Z"/>
+      <path class="cls-1" d="M207.8,129.79h-12.77c-6.65,0-11.02-4.37-11.02-11.02v-3.32c-4.02,9.97-14.52,16.09-30.26,16.09-20.47,0-33.76-10.32-33.76-26.76,0-22.56,25.36-36.56,63.49-37.08-1.75-13.99-7.52-29.39-23.26-29.39-12.24,0-19.94,10.14-23.79,20.64l-9.27-9.45c8.92-9.27,21.34-12.94,33.93-12.94,25.36,0,41.11,13.82,41.11,39.88v37.43c0,5.07,2.1,11.37,5.25,15.57l.35.35ZM184.01,105.48v-28.34c0-2.45-.17-4.9-.35-7.7-27.29.7-45.3,14.87-45.3,36.21,0,14.34,8.05,23.61,20.99,23.61,13.99,0,24.66-11.37,24.66-23.79Z"/>
+      <path class="cls-1" d="M212.95,129.79l.35-.53c3.15-4.02,5.07-10.32,5.07-15.39V17.67c0-5.25-1.92-11.37-5.07-15.57l-.35-.35h12.77c6.65,0,11.02,4.37,11.02,11.02v106c0,6.65-4.37,11.02-11.02,11.02h-12.77Z"/>
+      <path class="cls-1" d="M244.8,129.79l.35-.53c3.15-4.02,5.07-10.32,5.07-15.39v-59.65c0-5.25-1.92-11.37-5.07-15.57l-.35-.35h12.77c6.65,0,11.02,4.37,11.02,11.02v69.44c0,6.65-4.37,11.02-11.02,11.02h-12.77ZM259.49,0c6.82,0,11.72,4.55,11.72,11.72,0,6.65-4.9,11.37-11.72,11.37-7.17,0-11.72-4.72-11.72-11.37,0-7.17,4.55-11.72,11.72-11.72Z"/>
+      <path class="cls-1" d="M287.98,129.79c-6.65,0-11.02-4.37-11.02-11.02V49.33c0-6.65,4.37-11.02,11.02-11.02h12.77s-.35.35-.35.35c-3.15,4.2-5.07,10.32-5.07,15.57v59.65c0,5.07,1.92,11.37,5.07,15.39l.35.53h-12.77ZM291.65,0c6.82,0,11.72,4.55,11.72,11.72,0,6.65-4.9,11.37-11.72,11.37-7.17,0-11.72-4.72-11.72-11.37,0-7.17,4.55-11.72,11.72-11.72Z"/>
+      <path class="cls-1" d="M389.44,129.79h-12.77c-6.65,0-11.02-4.37-11.02-11.02v-3.32c-4.02,9.97-14.52,16.09-30.26,16.09-20.47,0-33.76-10.32-33.76-26.76,0-22.56,25.36-36.56,63.49-37.08-1.75-13.99-7.52-29.39-23.26-29.39-12.24,0-19.94,10.14-23.79,20.64l-9.27-9.45c8.92-9.27,21.34-12.94,33.93-12.94,25.36,0,41.11,13.82,41.11,39.88v37.43c0,5.07,2.1,11.37,5.25,15.57l.35.35ZM365.65,105.48v-28.34c0-2.45-.18-4.9-.35-7.7-27.29.7-45.3,14.87-45.3,36.21,0,14.34,8.05,23.61,20.99,23.61,13.99,0,24.66-11.37,24.66-23.79Z"/>
+    </g>
+  </g>
+</svg>

src/assets/imgs/logo-naliia.svg

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Capa_2" data-name="Capa 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 389.44 147.78">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: url(#Degradado_sin_nombre_66-6);
+      }
+
+      .cls-2 {
+        fill: url(#Degradado_sin_nombre_66-4);
+      }
+
+      .cls-3 {
+        fill: url(#Degradado_sin_nombre_66-5);
+      }
+
+      .cls-4 {
+        fill: url(#Degradado_sin_nombre_66-3);
+      }
+
+      .cls-5 {
+        fill: url(#Degradado_sin_nombre_66-2);
+      }
+
+      .cls-6 {
+        fill: url(#Degradado_sin_nombre_66);
+      }
+    </style>
+    <linearGradient id="Degradado_sin_nombre_66" data-name="Degradado sin nombre 66" x1="62.47" y1="147.78" x2="62.47" y2="19.42" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#ff4b77"/>
+      <stop offset=".33" stop-color="#ff7875"/>
+      <stop offset=".67" stop-color="#ff9e84"/>
+      <stop offset="1" stop-color="#ffb86f"/>
+    </linearGradient>
+    <linearGradient id="Degradado_sin_nombre_66-2" data-name="Degradado sin nombre 66" x1="163.9" y1="131.54" x2="163.9" y2="36.56" xlink:href="#Degradado_sin_nombre_66"/>
+    <linearGradient id="Degradado_sin_nombre_66-3" data-name="Degradado sin nombre 66" x1="224.84" y1="129.79" x2="224.84" y2="1.75" xlink:href="#Degradado_sin_nombre_66"/>
+    <linearGradient id="Degradado_sin_nombre_66-4" data-name="Degradado sin nombre 66" x1="258.01" y1="129.79" x2="258.01" y2="0" xlink:href="#Degradado_sin_nombre_66"/>
+    <linearGradient id="Degradado_sin_nombre_66-5" data-name="Degradado sin nombre 66" x1="290.16" y1="129.79" x2="290.16" y2="0" xlink:href="#Degradado_sin_nombre_66"/>
+    <linearGradient id="Degradado_sin_nombre_66-6" data-name="Degradado sin nombre 66" x1="345.54" y1="131.54" x2="345.54" y2="36.56" xlink:href="#Degradado_sin_nombre_66"/>
+  </defs>
+  <g id="Capa_1-2" data-name="Capa 1">
+    <g>
+      <path class="cls-6" d="M113.28,67.85c3.79-5.22,6.69-9.77,8.63-13.53,2.02-3.91,3.04-7.93,3.04-11.93,0-1.59-.46-3.51-1.39-5.89-.9-2.27-1.94-4.24-3.09-5.86-.91-1.26-2.32-2.94-4.13-2.94-2.58,0-6.29,1.7-11.34,5.2-4.78,3.31-10.7,8.29-17.61,14.8-6.89,6.49-15.08,15.03-24.35,25.38-5.28,5.89-10.88,12.39-16.76,19.45l9.4-15.83c3.78-6.36,7.54-12.88,11.17-19.38,3.66-6.54,6.49-12.19,8.41-16.78,2.01-4.8,2.99-8.41,2.99-11.04,0-3.27-1.23-5.82-3.65-7.58-2.27-1.65-5.35-2.49-9.15-2.49-4.19,0-9.25,1.28-15.04,3.81-4.52,1.97-11.16,5.12-19.8,9.39.69-.61,1.44-1.22,2.24-1.83,2.09-1.57,2.7-2.3,2.7-3.26,0-1.27-.69-1.83-1.1-2.05-1.22-.66-2.53.16-3.07.5-9.46,5.43-17.11,11.85-22.73,19.09C2.82,52.55,0,58.44,0,63.06s3.07,4.95,4.01,4.95c.65,0,1.63,0,10.24-4.91,5.47-3.12,9.81-5.54,12.9-7.2,3.07-1.65,8.03-3.91,14.72-6.72,10.44-4.35,13.46-5,14.32-5,.5,0,.92.16,1.3.51.35.32.5.69.5,1.2,0,1.61-1.28,5.97-7.37,17.57-5,9.51-12.66,22.74-22.8,39.33h0c-1.92,3.24-4.48,7.27-7.6,11.99-4.41,6.68-5.01,8.73-5.01,9.86,0,1.53,1.17,3.38,3.8,6.01,2.6,2.6,4.67,3.8,6.52,3.8s3.68-1.32,5.81-4.13c3.76-4.9,7.46-9.72,11.1-14.48,3.64-4.75,6.93-9.04,9.86-12.85,2.91-3.78,5.79-7.4,8.59-10.76,2.8-3.37,4.79-5.69,5.9-6.92,23.14-25.91,30.9-29.78,33.47-29.78.12,0,.2,0,.25.02,0,.04,0,.09,0,.16,0,.77-.7,3.57-7.22,12.9-5.13,7.24-9.79,14.28-13.85,20.93-4.08,6.67-7.55,12.95-10.32,18.67-2.79,5.74-4.89,10.89-6.24,15.31-1.38,4.49-2.08,8.4-2.08,11.62,0,3.69,1.04,6.74,3.1,9.06,2.11,2.37,4.91,3.57,8.34,3.57,2.29,0,4.95-.75,7.9-2.22,2.81-1.41,6.02-3.5,9.54-6.23,3.47-2.69,7.19-5.87,11.08-9.44,3.87-3.56,8.32-7.9,13.22-12.92l.48-.49-.28-11.03-2.65,2.56c-3.43,3.32-6.88,6.43-10.25,9.23-3.32,2.77-6.2,4.84-8.55,6.15-2.19,1.22-4.08,1.85-5.62,1.85-3.1,0-4.36-1.19-4.36-4.11,0-4.75,2.41-11.23,7.16-19.25,4.87-8.22,12.73-19.67,23.36-34.04Z"/>
+      <path class="cls-5" d="M207.8,129.79h-12.77c-6.65,0-11.02-4.37-11.02-11.02v-3.32c-4.02,9.97-14.52,16.09-30.26,16.09-20.47,0-33.76-10.32-33.76-26.76,0-22.56,25.36-36.56,63.49-37.08-1.75-13.99-7.52-29.39-23.26-29.39-12.24,0-19.94,10.14-23.79,20.64l-9.27-9.45c8.92-9.27,21.34-12.94,33.93-12.94,25.36,0,41.11,13.82,41.11,39.88v37.43c0,5.07,2.1,11.37,5.25,15.57l.35.35ZM184.01,105.48v-28.34c0-2.45-.17-4.9-.35-7.7-27.29.7-45.3,14.87-45.3,36.21,0,14.34,8.05,23.61,20.99,23.61,13.99,0,24.66-11.37,24.66-23.79Z"/>
+      <path class="cls-4" d="M212.95,129.79l.35-.53c3.15-4.02,5.07-10.32,5.07-15.39V17.67c0-5.25-1.92-11.37-5.07-15.57l-.35-.35h12.77c6.65,0,11.02,4.37,11.02,11.02v106c0,6.65-4.37,11.02-11.02,11.02h-12.77Z"/>
+      <path class="cls-2" d="M244.8,129.79l.35-.53c3.15-4.02,5.07-10.32,5.07-15.39v-59.65c0-5.25-1.92-11.37-5.07-15.57l-.35-.35h12.77c6.65,0,11.02,4.37,11.02,11.02v69.44c0,6.65-4.37,11.02-11.02,11.02h-12.77ZM259.49,0c6.82,0,11.72,4.55,11.72,11.72,0,6.65-4.9,11.37-11.72,11.37-7.17,0-11.72-4.72-11.72-11.37,0-7.17,4.55-11.72,11.72-11.72Z"/>
+      <path class="cls-3" d="M287.98,129.79c-6.65,0-11.02-4.37-11.02-11.02V49.33c0-6.65,4.37-11.02,11.02-11.02h12.77s-.35.35-.35.35c-3.15,4.2-5.07,10.32-5.07,15.57v59.65c0,5.07,1.92,11.37,5.07,15.39l.35.53h-12.77ZM291.65,0c6.82,0,11.72,4.55,11.72,11.72,0,6.65-4.9,11.37-11.72,11.37-7.17,0-11.72-4.72-11.72-11.37,0-7.17,4.55-11.72,11.72-11.72Z"/>
+      <path class="cls-1" d="M389.44,129.79h-12.77c-6.65,0-11.02-4.37-11.02-11.02v-3.32c-4.02,9.97-14.52,16.09-30.26,16.09-20.47,0-33.76-10.32-33.76-26.76,0-22.56,25.36-36.56,63.49-37.08-1.75-13.99-7.52-29.39-23.26-29.39-12.24,0-19.94,10.14-23.79,20.64l-9.27-9.45c8.92-9.27,21.34-12.94,33.93-12.94,25.36,0,41.11,13.82,41.11,39.88v37.43c0,5.07,2.1,11.37,5.25,15.57l.35.35ZM365.65,105.48v-28.34c0-2.45-.18-4.9-.35-7.7-27.29.7-45.3,14.87-45.3,36.21,0,14.34,8.05,23.61,20.99,23.61,13.99,0,24.66-11.37,24.66-23.79Z"/>
+    </g>
+  </g>
+</svg>

src/assets/imgs/n-naliia-blanca.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Capa_2" data-name="Capa 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 124.94 128.36">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <g id="Capa_1-2" data-name="Capa 1">
+    <path class="cls-1" d="M113.28,48.43c3.79-5.22,6.69-9.77,8.63-13.53,2.02-3.91,3.04-7.93,3.04-11.93,0-1.59-.46-3.51-1.39-5.89-.9-2.27-1.94-4.24-3.09-5.86-.91-1.26-2.32-2.94-4.13-2.94-2.58,0-6.29,1.7-11.34,5.2-4.78,3.31-10.7,8.29-17.61,14.8-6.89,6.49-15.08,15.03-24.35,25.38-5.28,5.89-10.88,12.39-16.76,19.45l9.4-15.83c3.78-6.36,7.54-12.88,11.17-19.38,3.66-6.54,6.49-12.19,8.41-16.78,2.01-4.8,2.99-8.41,2.99-11.04,0-3.27-1.23-5.82-3.65-7.58-2.27-1.65-5.35-2.49-9.15-2.49-4.19,0-9.25,1.28-15.04,3.81-4.52,1.97-11.16,5.12-19.8,9.39.69-.61,1.44-1.22,2.24-1.83,2.09-1.57,2.7-2.3,2.7-3.26,0-1.27-.69-1.83-1.1-2.05-1.22-.66-2.53.16-3.07.5-9.46,5.43-17.11,11.85-22.73,19.09C2.82,33.13,0,39.02,0,43.64s3.07,4.95,4.01,4.95c.65,0,1.63,0,10.24-4.91,5.47-3.12,9.81-5.54,12.9-7.2,3.07-1.65,8.03-3.91,14.72-6.72,10.44-4.35,13.46-5,14.32-5,.5,0,.92.16,1.3.51.35.32.5.69.5,1.2,0,1.61-1.28,5.97-7.37,17.57-5,9.51-12.66,22.74-22.8,39.33h0c-1.92,3.24-4.48,7.27-7.6,11.99-4.41,6.68-5.01,8.73-5.01,9.86,0,1.53,1.17,3.38,3.8,6.01,2.6,2.6,4.67,3.8,6.52,3.8s3.68-1.32,5.81-4.13c3.76-4.9,7.46-9.72,11.1-14.48,3.64-4.75,6.93-9.04,9.86-12.85,2.91-3.78,5.79-7.4,8.59-10.76,2.8-3.37,4.79-5.69,5.9-6.92,23.14-25.91,30.9-29.78,33.47-29.78.12,0,.2,0,.25.02,0,.04,0,.09,0,.16,0,.77-.7,3.57-7.22,12.9-5.13,7.24-9.79,14.28-13.85,20.93-4.08,6.67-7.55,12.95-10.32,18.67-2.79,5.74-4.89,10.89-6.24,15.31-1.38,4.49-2.08,8.4-2.08,11.62,0,3.69,1.04,6.74,3.1,9.06,2.11,2.37,4.91,3.57,8.34,3.57,2.29,0,4.95-.75,7.9-2.22,2.81-1.41,6.02-3.5,9.54-6.23,3.47-2.69,7.19-5.87,11.08-9.44,3.87-3.56,8.32-7.9,13.22-12.92l.48-.49-.28-11.03-2.65,2.56c-3.43,3.32-6.88,6.43-10.25,9.23-3.32,2.77-6.2,4.84-8.55,6.15-2.19,1.22-4.08,1.85-5.62,1.85-3.1,0-4.36-1.19-4.36-4.11,0-4.75,2.41-11.23,7.16-19.25,4.87-8.22,12.73-19.67,23.36-34.04Z"/>
+  </g>
+</svg>

src/components/footer/Footer.astro

@@ -1,7 +1,62 @@
 ---
+import "./footer.css";
+---
 
----
+<div class="footer-container">
+    <div class="logo-and-copyright">
+        <img
+            src="/src/assets/imgs/logo-naliia-blanco.svg"
+            alt="Logo de Naliia de color blanco"
+            class="logo-naliia-footer"
+        />
 
-<footer>
-    <p>&copy; 2024 Naliia. Todos los derechos reservados.</p>
-</footer>
+        <div class="divider"></div>
+
+        <p>&copy; 2026 Naliia. Todos los derechos reservados.</p>
+    </div>
+
+    <div class="social-media">
+        <div class="icons-social-media">
+            <a href="#" class="social-media-link">
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="36"
+                    height="36"
+                    viewBox="0 0 24 24"
+                    ><path
+                        fill="#ffffff"
+                        d="M17.6 6.32A7.85 7.85 0 0 0 12 4a7.94 7.94 0 0 0-6.88 11.89L4 20l4.2-1.1a7.9 7.9 0 0 0 3.79 1a8 8 0 0 0 8-7.93a8 8 0 0 0-2.39-5.65M12 18.53a6.6 6.6 0 0 1-3.36-.92l-.24-.15l-2.49.66l.66-2.43l-.16-.25a6.6 6.6 0 0 1 10.25-8.17a6.65 6.65 0 0 1 2 4.66a6.66 6.66 0 0 1-6.66 6.6m3.61-4.94c-.2-.1-1.17-.58-1.35-.64s-.32-.1-.45.1a9 9 0 0 1-.63.77c-.11.14-.23.15-.43 0a5.33 5.33 0 0 1-2.69-2.35c-.21-.35.2-.33.58-1.08a.38.38 0 0 0 0-.35c0-.1-.45-1.08-.61-1.47s-.32-.33-.45-.34h-.39a.7.7 0 0 0-.53.25A2.2 2.2 0 0 0 8 10.17a3.8 3.8 0 0 0 .81 2.05a8.9 8.9 0 0 0 3.39 3a3.85 3.85 0 0 0 2.38.5a2 2 0 0 0 1.33-.94a1.6 1.6 0 0 0 .12-.94c-.09-.1-.22-.15-.42-.25"
+                    ></path></svg
+                >
+            </a>
+
+            <a href="" class="social-media-link">
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="32"
+                    height="32"
+                    viewBox="0 0 24 24"
+                    ><path
+                        fill="#ffffff"
+                        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="32"
+                    height="32"
+                    viewBox="0 0 24 24"
+                    ><path
+                        fill="#ffffff"
+                        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>
+
+        <p>Contáctanos para más información</p>
+    </div>
+</div>

src/components/footer/footer.css

@@ -0,0 +1,46 @@
+.footer-container {
+    height: 150px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 64px;
+    box-sizing: border-box;
+    background-color: var(--dark-gray);
+    border-top: 1px solid rgb(255, 255, 255, 0.2);
+}
+
+.logo-and-copyright {
+    display: flex;
+    align-items: center;
+    gap: var(--space-lg-24px);
+}
+
+.divider {
+    width: 1px;
+    height: 40px;
+    background-color: rgba(255, 255, 255, 0.2);
+}
+
+.logo-naliia-footer {
+    height: 50px;
+    width: auto;
+}
+
+.social-media {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm-8px);
+}
+
+.icons-social-media {
+    display: flex;
+    gap: var(--space-xl-32px);
+}
+
+.social-media-link {
+    color: white;
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

src/components/navbar/Navbar.astro

@@ -1,10 +1,45 @@
 ---
+// imports
+import "./navbar.css";
+
+// types
+
+// props
+
+// logic, variables, functions, etc.
+const currentPath: string = Astro.url.pathname;
+---
 
----
+<nav class="navbar nav-container">
+    <a href="/" class="nav-link"
+        ><img
+            src="/src/assets/imgs/n-naliia-blanca.svg"
+            alt="N del logo de Naliia"
+            class="logo-naliia"
+        /></a
+    >
 
-<nav>
-    <a href="/">Inicio</a>
-    <a href="/about">Acerca de</a>
-    <a href="/projects">Proyectos</a>
-    <a href="/contact">Contacto</a>
+    <div class="pageslinks-container">
+        <a href="/pricing" class={currentPath === "/pricing" ? "active" : ""}>
+            Precios y membresías
+        </a>
+
+        <a href="/contact" class={currentPath === "/contact" ? "active" : ""}>
+            Contacto
+        </a>
+    </div>
+
+    <button class="theme-toggle">
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="32"
+            height="32"
+            viewBox="0 0 2048 2048"
+            class="svg-container"
+            ><path
+                fill="#ffffff"
+                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
+        >
+    </button>
 </nav>

src/components/navbar/navbar.css

@@ -0,0 +1,63 @@
+.nav-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 72px;
+    box-sizing: border-box;
+    padding: 16px 64px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+    background-color: var(--bg-dark);
+}
+
+.nav-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.logo-naliia {
+    height: 32px;
+    width: auto;
+}
+
+.pageslinks-container {
+    display: flex;
+    gap: 48px;
+}
+
+a {
+    text-decoration: none;
+    position: relative;
+    color: white;
+    font-size: var(--font-desktop-base);
+    line-height: var(--line-height-desktop-h6);
+    font-weight: bold;
+}
+
+a.active::after {
+    content: "";
+    display: block;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 2px;
+    width: 100%;
+    background-color: red;
+}
+
+.theme-toggle {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.svg-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

src/layouts/Layout.astro

@@ -2,6 +2,7 @@
 // imports
 import Navbar from "../components/navbar/Navbar.astro";
 import Footer from "../components/footer/Footer.astro";
+import "../styles/global.css";
 
 // types
 export interface Props {
@@ -25,7 +26,9 @@ const { pageTitle } = Astro.props;
         <title>{pageTitle ? `Naliia | ${pageTitle}` : "Naliia"}</title>
     </head>
 
-    <body>
+    <body class="body-container">
+        <div class="bg-image" aria-hidden="true"></div>
+
         <header>
             <Navbar />
         </header>
@@ -39,12 +42,3 @@ const { pageTitle } = Astro.props;
         </footer>
     </body>
 </html>
-
-<style>
-    html,
-    body {
-        margin: 0;
-        width: 100%;
-        height: 100%;
-    }
-</style>

src/pages/contact.astro

@@ -0,0 +1,18 @@
+---
+// imports
+import Layout from "../layouts/Layout.astro";
+
+// types
+
+// props
+
+// logic, variables, functions, etc.
+---
+
+<Layout pageTitle="Contacto">
+    <h1>Contacto</h1>
+    <p>
+        Aquí encontrarás información sobre cómo ponerte en contacto con
+        nosotros.
+    </p>
+</Layout>

src/pages/index.astro

@@ -1,5 +1,205 @@
 ---
 import Layout from "../layouts/Layout.astro";
+import "../styles/index.css";
 ---
 
-<Layout pageTitle="Home page"> Sitio web de Naliia </Layout>
+<Layout pageTitle="Home page">
+    <section class="homepage">
+        <section class="section-1 first-sect-container">
+            <img
+                src="/src/assets/imgs/mujer-con-tablet.svg"
+                alt="Fotografia de una mujer sosteniendo una tablet"
+                class="lady-img"
+                fetchpriority="high"
+            />
+
+            <div class="landing-content">
+                <div class="logo-container">
+                    <img
+                        src="/src/assets/imgs/logo-naliia.svg"
+                        alt="Logo de Naliia"
+                        class="logo-naliia-full"
+                    />
+                </div>
+
+                <div class="text-and-button-container">
+                    <div class="text-content">
+                        <h1 class="main-title">
+                            Transformamos <br />el caos en claridad
+                        </h1>
+                        <h5 class="subtitle">
+                            Convertimos la complejidad de salones, spas y
+                            barberías en un ecosistema que respira orden,
+                            precisión y belleza.
+                        </h5>
+                    </div>
+
+                    <div class="button-container">
+                        <button class="button call-to-action-button"
+                            >Comienza tu experiencia aquí</button
+                        >
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section class="offer-section second-sect-container sections">
+            <div class="title-and-phrase">
+                <h4>¿Qué ofrecemos?</h4>
+
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                    Sint, saepe quisquam deleniti mollitia tempore, laborum
+                    neque commodi ipsam nobis placeat.
+                </p>
+            </div>
+
+            <div class="cards-container">
+                <div class="offer-card">
+                    <div class="card-content">
+                        <h5>Título tarjeta</h5>
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipisicing
+                            elit. Provident ut quisquam corrupti minus, in ab
+                            labore ratione aperiam ducimus cumque.
+                        </p>
+                    </div>
+                </div>
+
+                <div class="offer-card">
+                    <div class="card-content">
+                        <h5>Título tarjeta</h5>
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipisicing
+                            elit. Provident necessitatibus et non quia
+                            voluptates aperiam eligendi ut in error vero.
+                        </p>
+                    </div>
+                </div>
+
+                <div class="offer-card">
+                    <div class="card-content">
+                        <h5>Título tarjeta</h5>
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipisicing
+                            elit. Provident necessitatibus et non quia
+                            voluptates aperiam eligendi ut in error vero.
+                        </p>
+                    </div>
+                </div>
+
+                <div class="offer-card">
+                    <div class="card-content">
+                        <h5>Título tarjeta</h5>
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipisicing
+                            elit. Provident necessitatibus et non quia
+                            voluptates aperiam eligendi ut in error vero.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section class="pricing pricing-container">
+            <div class="title-and-phrase">
+                <h4>Elige tu plan</h4>
+
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                    Nobis labore consequatur reiciendis ullam veritatis
+                    inventore. Molestiae minima ab ut fugiat.
+                </p>
+            </div>
+
+            <div class="pricing-cards-container">
+                <div class="pricing-card">
+                    <p class="plan-type">Tipo de plan</p>
+
+                    <div class="price-and-description">
+                        <h4>$100.000</h4>
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipisicing
+                            elit. Repudiandae sapiente optio, quisquam ea
+                            placeat architecto dicta, suscipit quasi
+                            necessitatibus neque.
+                        </p>
+                    </div>
+
+                    <div class="features-container">
+                        <h6>Características</h6>
+                        <ul>
+                            <li>Característica #1 del plan</li>
+                            <li>Característica #2 del plan</li>
+                            <li>Característica #3 del plan</li>
+                            <li>Característica #4 del plan</li>
+                            <li>Característica #5 del plan</li>
+                        </ul>
+                    </div>
+
+                    <button class="button select-plan-button"
+                        >Contáctanos</button
+                    >
+                </div>
+
+                <div class="pricing-card best-plan-card">
+                    <p class="plan-type">Tipo de plan</p>
+
+                    <div class="price-and-description">
+                        <h4>$500.000</h4>
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipisicing
+                            elit. Repudiandae sapiente optio, quisquam ea
+                            placeat architecto dicta, suscipit quasi
+                            necessitatibus neque.
+                        </p>
+                    </div>
+
+                    <div class="features-container">
+                        <h6>Características</h6>
+                        <ul>
+                            <li>Característica #1 del plan</li>
+                            <li>Característica #2 del plan</li>
+                            <li>Característica #3 del plan</li>
+                            <li>Característica #4 del plan</li>
+                            <li>Característica #5 del plan</li>
+                        </ul>
+                    </div>
+
+                    <button class="button select-plan-button"
+                        >Contáctanos</button
+                    >
+                </div>
+
+                <div class="pricing-card">
+                    <p class="plan-type">Tipo de plan</p>
+
+                    <div class="price-and-description">
+                        <h4>$300.000</h4>
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipisicing
+                            elit. Repudiandae sapiente optio, quisquam ea
+                            placeat architecto dicta, suscipit quasi
+                            necessitatibus neque.
+                        </p>
+                    </div>
+
+                    <div class="features-container">
+                        <h6>Características</h6>
+                        <ul>
+                            <li>Característica #1 del plan</li>
+                            <li>Característica #2 del plan</li>
+                            <li>Característica #3 del plan</li>
+                            <li>Característica #4 del plan</li>
+                            <li>Característica #5 del plan</li>
+                        </ul>
+                    </div>
+
+                    <button class="button select-plan-button"
+                        >Contáctanos</button
+                    >
+                </div>
+            </div>
+        </section>
+    </section>
+</Layout>

src/pages/pricing.astro

@@ -0,0 +1,12 @@
+---
+// imports
+import Layout from "../layouts/Layout.astro";
+---
+
+<Layout pageTitle="Precios y membresías">
+    <h1>Precios y membresías</h1>
+    <p>
+        Aquí encontrarás información sobre los precios y las opciones de
+        membresía disponibles.
+    </p>
+</Layout>

src/styles/global.css

@@ -0,0 +1,320 @@
+@font-face {
+    font-family: "Gilroy";
+    src:
+        url("../assets/fonts/Gilroy-Bold.woff2") format("woff2"),
+        url("../assets/fonts/Gilroy-Bold.woff") format("woff");
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "Gilroy";
+    src:
+        url("../assets/fonts/Gilroy-Black.woff2") format("woff2"),
+        url("../assets/fonts/Gilroy-Black.woff") format("woff");
+    font-weight: 900;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "Gilroy";
+    src:
+        url("../assets/fonts/Gilroy-Regular.woff2") format("woff2"),
+        url("../assets/fonts/Gilroy-Regular.woff") format("woff");
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+:root {
+    /* Primitive values */
+
+    /* Colors */
+    --dark-gray: #252525;
+
+    /* Fonts */
+    --font-family-primary: "Gilroy";
+
+    /* Font sizes */
+    /* Desktop: */
+    --xsm-desktop: 8px;
+    --sm-desktop: 12px;
+    --base-desktop: 16px;
+    --h6-desktop: 20px;
+    --h5-desktop: 28px;
+    --h4-desktop: 40px;
+    --h3-desktop: 52px;
+    --h2-desktop: 68px;
+    --h1-desktop: 88px;
+    /* Movil: */
+    --xsm-mobile: 8px;
+    --sm-mobile: 12px;
+    --base-mobile: 16px;
+    --h6-mobile: 18px;
+    --h5-mobile: 20px;
+    --h4-mobile: 24px;
+    --h3-mobile: 28px;
+    --h2-mobile: 32px;
+    --h1-mobile: 36px;
+    /* line-heights */
+    /* Desktop: */
+    --lh-xsm-desktop: 12px;
+    --lh-sm-desktop: 18px;
+    --lh-base-desktop: 24px;
+    --lh-h6-desktop: 30px;
+    --lh-h5-desktop: 40px;
+    --lh-h4-desktop: 56px;
+    --lh-h3-desktop: 64px;
+    --lh-h2-desktop: 80px;
+    --lh-h1-desktop: 104px;
+    /* Movil: */
+    --lh-xsm-mobile: 12px;
+    --lh-sm-mobile: 18px;
+    --lh-base-mobile: 24px;
+    --lh-h6-mobile: 28px;
+    --lh-h5-mobile: 28px;
+    --lh-h4-mobile: 32px;
+    --lh-h3-mobile: 40px;
+    --lh-h2-mobile: 40px;
+    --lh-h1-mobile: 40px;
+
+    /* spacing, padding, margin */
+    --space-none: 0px;
+    --space-1: 8px;
+    --space-2: 16px;
+    --space-3: 24px;
+    --space-4: 32px;
+    --space-5: 48px;
+    --space-6: 64px;
+    --space-7: 96px;
+    --space-8: 128px;
+    --space-9: 160px;
+
+    /* Tokens */
+    --bg-dark: var(--dark-gray);
+
+    /* spacing, padding, margin */
+    --space-none-0: var(--space-none);
+    --space-sm-8px: var(--space-1);
+    --space-md-16px: var(--space-2);
+    --space-lg-24px: var(--space-3);
+    --space-xl-32px: var(--space-4);
+    --space-2xl-48px: var(--space-5);
+    --space-3xl-64px: var(--space-6);
+    --space-4xl-96px: var(--space-7);
+    --space-5xl-128px: var(--space-8);
+    --space-6xl-160px: var(--space-9);
+
+    --padding-none-0: var(--space-none);
+    --padding-sm-8px: var(--space-1);
+    --padding-md-16px: var(--space-2);
+    --padding-lg-24px: var(--space-3);
+    --padding-xl-32px: var(--space-4);
+    --padding-2xl-48px: var(--space-5);
+    --padding-3xl-64px: var(--space-6);
+    --padding-4xl-96px: var(--space-7);
+    --padding-5xl-128px: var(--space-8);
+    --padding-6xl-160px: var(--space-9);
+
+    --margin-none-0: var(--space-none);
+    --margin-sm-8px: var(--space-1);
+    --margin-md-16px: var(--space-2);
+    --margin-lg-24px: var(--space-3);
+    --margin-xl-32px: var(--space-4);
+    --margin-2xl-48px: var(--space-5);
+    --margin-3xl-64px: var(--space-6);
+    --margin-4xl-96px: var(--space-7);
+    --margin-5xl-128px: var(--space-8);
+    --margin-6xl-160px: var(--space-9);
+
+    /* Font-sizes */
+    /* Desktop: */
+    --font-desktop-xsm: var(--xsm-desktop);
+    --font-desktop-sm: var(--sm-desktop);
+    --font-desktop-base: var(--base-desktop);
+    --font-desktop-h6: var(--h6-desktop);
+    --font-desktop-h5: var(--h5-desktop);
+    --font-desktop-h4: var(--h4-desktop);
+    --font-desktop-h3: var(--h3-desktop);
+    --font-desktop-h2: var(--h2-desktop);
+    --font-desktop-h1: var(--h1-desktop);
+    /* Movil: */
+    --font-mobile-xsm: var(--xsm-mobile);
+    --font-mobile-sm: var(--sm-mobile);
+    --font-mobile-base: var(--base-mobile);
+    --font-mobile-h6: var(--h6-mobile);
+    --font-mobile-h5: var(--h5-mobile);
+    --font-mobile-h4: var(--h4-mobile);
+    --font-mobile-h3: var(--h3-mobile);
+    --font-mobile-h2: var(--h2-mobile);
+    --font-mobile-h1: var(--h1-mobile);
+
+    /* Line-heights */
+    /* Desktop: */
+    --line-height-desktop-xsm: var(--lh-xsm-desktop);
+    --line-height-desktop-sm: var(--lh-sm-desktop);
+    --line-height-desktop-base: var(--lh-base-desktop);
+    --line-height-desktop-h6: var(--lh-h6-desktop);
+    --line-height-desktop-h5: var(--lh-h5-desktop);
+    --line-height-desktop-h4: var(--lh-h4-desktop);
+    --line-height-desktop-h3: var(--lh-h3-desktop);
+    --line-height-desktop-h2: var(--lh-h2-desktop);
+    --line-height-desktop-h1: var(--lh-h1-desktop);
+    /* Movil: */
+    --line-height-mobile-xsm: var(--lh-xsm-mobile);
+    --line-height-mobile-sm: var(--lh-sm-mobile);
+    --line-height-mobile-base: var(--lh-base-mobile);
+    --line-height-mobile-h6: var(--lh-h6-mobile);
+    --line-height-mobile-h5: var(--lh-h5-mobile);
+    --line-height-mobile-h4: var(--lh-h4-mobile);
+    --line-height-mobile-h3: var(--lh-h3-mobile);
+    --line-height-mobile-h2: var(--lh-h2-mobile);
+    --line-height-mobile-h1: var(--lh-h1-mobile);
+}
+
+html,
+body {
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    min-height: 100vh;
+    background-color: var(--bg-dark);
+    font-family: var(--font-family-primary), sans-serif, Arial;
+}
+
+p {
+    font-size: var(--font-desktop-base);
+    line-height: var(--line-height-desktop-base);
+    padding: 0;
+    margin: 0;
+    color: white;
+
+    @media (max-width: 768px) {
+        font-size: var(--font-mobile-base);
+        line-height: var(--line-height-mobile-base);
+        padding: 0;
+        margin: 0;
+    }
+}
+
+h1 {
+    font-size: var(--font-desktop-h1);
+    line-height: var(--line-height-desktop-h1);
+    padding: 0;
+    margin: 0;
+    color: white;
+
+    @media (max-width: 768px) {
+        font-size: var(--font-mobile-h1);
+        line-height: var(--line-height-mobile-h1);
+        padding: 0;
+        margin: 0;
+    }
+}
+
+h2 {
+    font-size: var(--font-desktop-h2);
+    line-height: var(--line-height-desktop-h2);
+    padding: 0;
+    margin: 0;
+    color: white;
+
+    @media (max-width: 768px) {
+        font-size: var(--font-mobile-h2);
+        line-height: var(--line-height-mobile-h2);
+        padding: 0;
+        margin: 0;
+    }
+}
+
+h3 {
+    font-size: var(--font-desktop-h3);
+    line-height: var(--line-height-desktop-h3);
+    padding: 0;
+    margin: 0;
+    color: white;
+
+    @media (max-width: 768px) {
+        font-size: var(--font-mobile-h3);
+        line-height: var(--line-height-mobile-h3);
+        padding: 0;
+        margin: 0;
+    }
+}
+
+h4 {
+    font-size: var(--font-desktop-h4);
+    line-height: var(--line-height-desktop-h4);
+    padding: 0;
+    margin: 0;
+    color: white;
+
+    @media (max-width: 768px) {
+        font-size: var(--font-mobile-h4);
+        line-height: var(--line-height-mobile-h4);
+        padding: 0;
+        margin: 0;
+    }
+}
+
+h5 {
+    font-size: var(--font-desktop-h5);
+    line-height: var(--line-height-desktop-h5);
+    padding: 0;
+    margin: 0;
+    color: white;
+
+    @media (max-width: 768px) {
+        font-size: var(--font-mobile-h5);
+        line-height: var(--line-height-mobile-h5);
+        padding: 0;
+        margin: 0;
+    }
+}
+
+h6 {
+    font-size: var(--font-desktop-h6);
+    line-height: var(--line-height-desktop-h6);
+    padding: 0;
+    margin: 0;
+    color: white;
+
+    @media (max-width: 768px) {
+        font-size: var(--font-mobile-h6);
+        line-height: var(--line-height-mobile-h6);
+        padding: 0;
+        margin: 0;
+    }
+}
+
+.bg-image {
+    position: absolute;
+    top: -180px;
+    right: 0px;
+
+    width: 1400px;
+    height: 1400px;
+
+    transform: translateX(8%);
+    background-image: url("../assets/imgs/n-naliia-blanca.svg");
+    background-repeat: no-repeat;
+    background-size: contain;
+    z-index: -1;
+    pointer-events: none;
+    opacity: 0.02;
+}
+
+.body-container {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    z-index: 0;
+    overflow-x: hidden;
+}
+
+main {
+    flex: 1;
+}

src/styles/index.css

@@ -0,0 +1,212 @@
+.homepage {
+    display: flex;
+    overflow-x: hidden;
+    flex-direction: column;
+    gap: 220px;
+    background-color: transparent;
+}
+
+.sections {
+    display: flex;
+    flex-direction: column;
+    gap: 48px;
+    padding: 0px 350px;
+}
+
+.section-1 {
+    position: relative;
+    background-color: transparent;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4xl-96px);
+    padding: 80px 300px 0px 300px;
+}
+
+.main-title {
+    font-size: 80px;
+}
+
+.lady-img {
+    position: absolute;
+    top: 20px;
+    right: 0px;
+
+    width: 680px;
+    height: auto;
+
+    transform: translateX(-25%);
+    z-index: -1;
+    pointer-events: none;
+}
+
+.landing-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4xl-96px);
+}
+
+.logo-container {
+    display: flex;
+    align-items: center;
+    justify-content: start;
+}
+.logo-naliia-full {
+    height: 81px;
+    width: auto;
+}
+
+.text-and-button-container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3xl-64px);
+    max-width: 780px;
+}
+
+.text-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-md-16px);
+}
+.subtitle {
+    max-width: 630px;
+}
+
+.call-to-action-button {
+    height: 56px;
+    width: auto;
+    padding: var(--space-sm-8px) var(--space-lg-24px);
+    border: none;
+    border-radius: 16px;
+    background-color: #e54c75;
+    font-size: var(--font-desktop-h5);
+    font-weight: bold;
+    font-family: var(--font-family-primary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    cursor: pointer;
+}
+
+/* ----- Offer section styles ----- */
+.offer-section {
+    background-color: transparent;
+}
+
+.title-and-phrase {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm-8px);
+    align-items: flex-start;
+}
+
+.cards-container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-lg-24px);
+}
+
+.offer-card {
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: var(--space-lg-24px);
+
+    height: 200px;
+    padding: var(--space-3xl-64px);
+
+    display: flex;
+
+    background-image: url("../assets/imgs/img-preview.svg");
+    background-repeat: no-repeat;
+    background-position: right;
+    background-size: contain;
+}
+
+.card-content {
+    max-width: 500px;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-md-16px);
+}
+
+/* ----- Pricing section styles ----- */
+.pricing {
+    margin-bottom: 140px;
+    background-color: transparent;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2xl-48px);
+    padding: 0px 350px;
+}
+
+.pricing-cards-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: var(--space-lg-24px);
+}
+
+.pricing-card {
+    border-radius: var(--space-lg-24px);
+
+    padding: var(--space-3xl-64px) var(--space-xl-32px);
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2xl-48px);
+
+    height: 600px;
+    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
+    background-color: #363636;
+}
+
+.best-plan-card {
+    border: 4px solid #e54c75;
+    height: 620px;
+}
+
+.pricing-card .plan-type {
+    font-weight: bold;
+    background-color: #e54c75;
+    padding: var(--space-sm-8px) var(--space-md-16px);
+    border-radius: var(--space-md-16px);
+    width: fit-content;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.price-and-description {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm-8px);
+}
+
+.features-container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm-8px);
+
+    && li {
+        color: white;
+        font-size: var(--font-desktop-base);
+        line-height: var(--line-height-desktop-base);
+    }
+}
+
+.select-plan-button {
+    height: 42px;
+    width: auto;
+    padding: var(--space-sm-8px) var(--space-md-16px);
+    border: none;
+    border-radius: 16px;
+    background-color: #e54c75;
+    font-family: var(--font-family-primary);
+    font-size: var(--font-desktop-h6);
+    font-weight: bold;
+    color: white;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+}