mirror of
https://github.com/marcogll/noire_landing.git
synced 2026-03-15 10:25:03 +00:00
first commit
This commit is contained in:
Marco Gallegos
BIN
assets/images/home/design.png
Normal file
BIN
assets/images/home/design.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
BIN
assets/images/home/editing.png
Normal file
BIN
assets/images/home/editing.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
BIN
assets/images/home/forest.png
Normal file
BIN
assets/images/home/forest.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
BIN
assets/images/home/man.png
Normal file
BIN
assets/images/home/man.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
BIN
assets/images/home/mountain.png
Normal file
BIN
assets/images/home/mountain.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
BIN
assets/images/home/photography.png
Normal file
BIN
assets/images/home/photography.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
BIN
assets/images/people/man.png
Normal file
BIN
assets/images/people/man.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
BIN
assets/images/people/man2.png
Normal file
BIN
assets/images/people/man2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
BIN
assets/images/people/women.png
Normal file
BIN
assets/images/people/women.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
205
css/index.css
Normal file
205
css/index.css
Normal file
@@ -0,0 +1,205 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
|
||||
|
||||
:root{
|
||||
|
||||
--btn-color: #fdfdfd;/* button color*/
|
||||
--btn-bg: #0d0d0d;/* button bg color*/
|
||||
|
||||
--primary-text-color: #000;
|
||||
--header-link-hover: #dddcdccf;
|
||||
--footer-link-hover: #6dbb00;
|
||||
--input-focus-bd-color: #0d0d0d;
|
||||
}
|
||||
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
font-family: "Roboto", sans-serif;
|
||||
}
|
||||
|
||||
header{
|
||||
/* background-color: #fff;
|
||||
color: #000; */
|
||||
}
|
||||
|
||||
|
||||
header > .collapsible-header{
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
background-color: inherit;
|
||||
place-content: center;
|
||||
overflow: hidden;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.outline-effect {
|
||||
color: black;
|
||||
-webkit-text-fill-color: transparent; /* Will override color (regardless of order) */
|
||||
-webkit-text-stroke: 2px black;
|
||||
}
|
||||
|
||||
.animated-collapse{
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.header-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: fit-content;
|
||||
border-radius: 25px;
|
||||
padding: 5px 15px;
|
||||
transition: background-color 0.5s, color 0.5s;
|
||||
}
|
||||
|
||||
|
||||
.header-links:hover {
|
||||
background-color: var(--header-link-hover);
|
||||
}
|
||||
|
||||
.material-icons.md-40 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.primary-text-color{
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
|
||||
.opacity-0{
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
.opacity-100{
|
||||
opacity: 100 !important;
|
||||
}
|
||||
|
||||
.btn{
|
||||
padding: 10px 15px;
|
||||
width: max-content;
|
||||
border-radius: 25px;
|
||||
color: var(--btn-color);
|
||||
background-color: var(--btn-bg);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn:hover{
|
||||
|
||||
}
|
||||
|
||||
.btn:disabled{
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.input{
|
||||
padding: 10px;
|
||||
background-color: transparent;
|
||||
border-radius: 25px;
|
||||
/* outline: none; */
|
||||
min-width: 100px;
|
||||
border: 2px solid #818080;
|
||||
transition: border 0.3s;
|
||||
}
|
||||
|
||||
.input:active, .input:focus, .input:focus-within{
|
||||
border: 2px solid var(--input-focus-bd-color);
|
||||
}
|
||||
|
||||
.input-error{
|
||||
border-bottom: 3px solid #ff1e1e;
|
||||
}
|
||||
|
||||
.input-error:focus-within{
|
||||
border-bottom: 3px solid #fd0101;
|
||||
}
|
||||
|
||||
|
||||
/* Navigation dots styling */
|
||||
.dots-container {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.footer-link{
|
||||
color: #0d0d0d;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.footer-link:hover{
|
||||
color: var(--footer-link-hover);
|
||||
}
|
||||
|
||||
|
||||
.review-container {
|
||||
position: relative;
|
||||
max-width: 600px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.review-card{
|
||||
box-shadow: 0px 2px 4px #757474a0;
|
||||
border-radius: 15px;
|
||||
/* width: 200px; */
|
||||
/* height: 550px; */
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/* --------- collapsible div ---------- */
|
||||
.collapsible {
|
||||
background-color: #f3f0f0;
|
||||
color: #2b2929;
|
||||
/* cursor: pointer; */
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
border: none;
|
||||
text-align: left;
|
||||
outline: none;
|
||||
font-size: 16px;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
/* Style for the collapsible content */
|
||||
.content {
|
||||
padding: 0 18px;
|
||||
/* display: none; */
|
||||
height: 0px;
|
||||
overflow: hidden;
|
||||
background-color: transparent;
|
||||
transition: height 0.5s;
|
||||
text-align: justify;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.collapsible .active,
|
||||
.collapsible:hover {
|
||||
/* background-color: #dedddd; */
|
||||
}
|
||||
|
||||
@media not all and (min-width: 1024px) {
|
||||
header .collapsible-header {
|
||||
position: fixed;
|
||||
right: 0px;
|
||||
flex-direction: column;
|
||||
opacity: 0;
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
height: 100dvh;
|
||||
width: 0vw;
|
||||
justify-content: space-between;
|
||||
padding: 5px;
|
||||
padding-top: 5%;
|
||||
padding-bottom: 5%;
|
||||
place-items: end;
|
||||
background-color: #ffffff;
|
||||
color: #000000;
|
||||
overflow-y: auto;
|
||||
box-shadow: 2px 0px 3px #000;
|
||||
}
|
||||
|
||||
.header-links{
|
||||
color: black;
|
||||
}
|
||||
|
||||
}
|
||||
1
css/tailwind-build.css
Normal file
1
css/tailwind-build.css
Normal file
File diff suppressed because one or more lines are too long
8
css/tailwind.css
Normal file
8
css/tailwind.css
Normal file
@@ -0,0 +1,8 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer components{
|
||||
}
|
||||
|
||||
|
||||
602
index.html
Normal file
602
index.html
Normal file
@@ -0,0 +1,602 @@
|
||||
<!doctype html>
|
||||
<html lang="es_MX">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Noiré Collective — Marketing y Optimización para Emprendimientos</title>
|
||||
<meta name="description" content="Marketing y desarrollo web para emprendimientos en crecimiento. Diseñamos sistemas digitales y optimización operativa que convierten esfuerzo en resultados reales." />
|
||||
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:title" content="Noiré Collective" />
|
||||
<meta property="og:description" content="Marketing y desarrollo web para emprendimientos. Sistemas digitales, optimización operativa y presencia digital que convierte esfuerzo en resultados." />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://noirecollective.com" />
|
||||
<meta property="og:image" content="" />
|
||||
|
||||
<!-- <link rel="stylesheet" href="../../tailwind-css/tailwind-runtime.css" /> -->
|
||||
<link rel="stylesheet" href="./css/tailwind-build.css" />
|
||||
<link rel="stylesheet" href="css/index.css" />
|
||||
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.3/font/bootstrap-icons.min.css"
|
||||
integrity="sha512-dPXYcDub/aeb08c63jRq/k6GaKccl256JQy/AnOq7CAnEZ9FzSL9wSbcZkMp4R26vBsMLFYH4kQ67/bbV8XaCQ=="
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"
|
||||
/>
|
||||
</head>
|
||||
<body
|
||||
class="tw-flex tw-min-h-[100vh] tw-flex-col tw-bg-[#fff] tw-font-mono"
|
||||
>
|
||||
<header
|
||||
class="tw-absolute tw-top-0 tw-z-20 tw-flex tw-h-[60px] tw-w-full tw-bg-opacity-0 tw-px-[5%] max-lg:tw-mr-auto max-lg:tw-px-4 lg:tw-justify-around"
|
||||
>
|
||||
<a
|
||||
class="tw-h-[50px] tw-p-[4px] tw-text-2xl tw-font-medium"
|
||||
href=""
|
||||
>
|
||||
Noiré Collective
|
||||
</a>
|
||||
<div
|
||||
class="collapsible-header animated-collapse max-lg:tw-shadow-md"
|
||||
id="collapsed-header-items"
|
||||
>
|
||||
<div
|
||||
class="tw-flex tw-h-full tw-w-max tw-gap-5 tw-text-base tw-text-black max-lg:tw-mt-[30px] max-lg:tw-flex-col max-lg:tw-place-items-end max-lg:tw-gap-5 lg:tw-mx-auto lg:tw-place-items-center"
|
||||
>
|
||||
<a class="header-links" href="#nosotros"> Nosotros </a>
|
||||
<a class="header-links" href="#casos"> Casos </a>
|
||||
<a class="header-links" href="#insights"> Insights </a>
|
||||
<a class="header-links" href="#contacto"> Contacto </a>
|
||||
</div>
|
||||
<div
|
||||
class="tw-mx-4 tw-flex tw-place-items-center tw-gap-[20px] tw-text-base max-md:tw-w-full max-md:tw-flex-col max-md:tw-place-content-center"
|
||||
>
|
||||
<a
|
||||
href="https://tally.so/r/woO0Kx"
|
||||
aria-label="signup"
|
||||
class="tw-flex tw-h-[40px] tw-place-items-center tw-gap-2 tw-rounded-full tw-bg-black tw-p-1 tw-pl-4 tw-text-white"
|
||||
>
|
||||
<span>¿Platicamos?</span>
|
||||
<div
|
||||
class="tw-flex tw-h-[30px] tw-w-[30px] tw-place-content-center tw-place-items-center tw-rounded-full tw-bg-white tw-font-semibold tw-text-black"
|
||||
>
|
||||
<i class="bi bi-arrow-up-right"></i>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="bi bi-list tw-absolute tw-right-3 tw-top-3 tw-z-50 tw-text-3xl tw-text-black lg:tw-hidden"
|
||||
onclick="toggleHeader()"
|
||||
aria-label="menu"
|
||||
id="collapse-btn"
|
||||
></button>
|
||||
</header>
|
||||
|
||||
<section
|
||||
class="tw-relative tw-flex tw-min-h-[100vh] tw-w-full tw-max-w-[100vw] tw-flex-col tw-overflow-hidden max-lg:tw-p-4 max-md:tw-mt-[50px]"
|
||||
>
|
||||
<div
|
||||
class="tw-flex tw-h-full tw-min-h-[100vh] tw-w-full tw-place-content-center tw-gap-6 tw-p-[5%] max-xl:tw-place-items-center max-lg:tw-flex-col"
|
||||
>
|
||||
<div class="tw-flex tw-flex-col tw-place-content-center">
|
||||
<div
|
||||
class="reveal-hero-text tw-flex tw-flex-wrap tw-text-7xl tw-font-semibold tw-uppercase tw-leading-[85px] max-lg:tw-text-4xl max-md:tw-leading-snug"
|
||||
>
|
||||
<span
|
||||
class="reveal-hero-text tw-bg-green-200 tw-p-1 tw-px-6"
|
||||
>
|
||||
Noiré Collective
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="reveal-hero-text tw-mt-2 tw-max-w-[450px] tw-p-2 tw-text-justify tw-text-xl tw-font-medium max-lg:tw-max-w-full"
|
||||
>
|
||||
Marketing, desarrollo web y sistemas digitales para crecer con estructura.
|
||||
</div>
|
||||
<div
|
||||
class="reveal-hero-text tw-mt-2 tw-max-w-[450px] tw-p-2 tw-text-justify tw-text-gray-600 max-lg:tw-max-w-full"
|
||||
>
|
||||
Ayudamos a emprendimientos a dejar la improvisación. Diseñamos marketing funcional, sitios web y sistemas digitales que ordenan la operación y escalan ingresos. La tecnología es un medio, no el discurso.
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="reveal-hero-text tw-mt-4 tw-flex tw-place-items-center tw-gap-4 tw-overflow-hidden tw-p-2"
|
||||
>
|
||||
<a
|
||||
href="https://tally.so/r/woO0Kx"
|
||||
aria-label="signup"
|
||||
class="tw-flex tw-h-[40px] tw-place-items-center tw-gap-2 tw-rounded-full tw-border-[1px] tw-border-solid tw-border-black tw-bg-black tw-p-1 tw-pl-4 tw-text-white tw-transition-colors tw-duration-[0.5s] hover:tw-bg-white hover:tw-text-black"
|
||||
>
|
||||
<span>Platicar ahora</span>
|
||||
<div
|
||||
class="tw-flex tw-h-[30px] tw-w-[30px] tw-place-content-center tw-place-items-center tw-rounded-full tw-bg-white tw-font-semibold tw-text-black"
|
||||
>
|
||||
<i class="bi bi-arrow-up-right"></i>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="tw-flex tw-w-full tw-max-w-[50%] tw-place-content-center tw-place-items-center tw-overflow-hidden max-lg:tw-max-w-[unset]"
|
||||
>
|
||||
<div
|
||||
class="tw-relative tw-flex tw-max-h-[580px] tw-min-h-[450px] tw-min-w-[350px] tw-max-w-[650px] tw-overflow-hidden max-lg:tw-h-fit max-lg:tw-max-h-[320px] max-lg:tw-min-h-[180px] max-lg:tw-w-[320px] max-lg:tw-min-w-[320px]"
|
||||
>
|
||||
<img
|
||||
src="./assets/images/home/man.png"
|
||||
alt="app"
|
||||
class="reveal-hero-img tw-z-[1] tw-h-full tw-w-full tw-object-contain"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
class="tw-relative tw-flex tw-min-h-[60vh] tw-w-full tw-max-w-[100vw] tw-flex-col tw-place-content-center tw-place-items-center tw-overflow-hidden tw-p-6 tw-py-10"
|
||||
id="nosotros"
|
||||
>
|
||||
<div
|
||||
class="tw-flex tw-flex-col tw-place-items-center tw-gap-8 tw-max-w-[800px] tw-text-center"
|
||||
>
|
||||
<h2 class="tw-text-4xl tw-font-semibold max-lg:tw-text-3xl">
|
||||
Nosotros
|
||||
</h2>
|
||||
<p class="tw-text-lg tw-text-gray-700 max-lg:tw-text-base">
|
||||
Noiré Collective es un estudio de marketing y desarrollo enfocado en crecimiento real. Construimos presencia digital, funnels y plataformas web alineadas a la capacidad operativa del negocio.
|
||||
</p>
|
||||
<p class="tw-text-lg tw-text-gray-700 max-lg:tw-text-base">
|
||||
Cuando el proyecto lo requiere, integramos automatización y tecnología avanzada para optimizar procesos, reducir fricción y liberar tiempo. Todo con un enfoque práctico, medible y sostenible.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
class="tw-relative tw-flex tw-min-h-[100vh] tw-w-full tw-max-w-[100vw] tw-flex-col tw-place-items-center tw-overflow-hidden tw-p-6 tw-py-5"
|
||||
id="casos"
|
||||
>
|
||||
<h3 class="reveal-up tw-text-6xl tw-font-medium max-lg:tw-text-3xl">
|
||||
Casos reales
|
||||
</h3>
|
||||
<div
|
||||
class="reveal-up tw-my-4 tw-h-[1px] tw-w-[80%] tw-bg-black"
|
||||
></div>
|
||||
<div
|
||||
class="tw-mt-8 tw-gap-10 tw-space-y-8 max-md:tw-columns-1 lg:tw-columns-3"
|
||||
>
|
||||
<div
|
||||
class="reveal-up tw-flex tw-h-fit tw-w-[450px] tw-break-inside-avoid tw-flex-col tw-gap-2 tw-rounded-lg tw-bg-[#f3f3f3b4] tw-p-4 tw-shadow-lg max-lg:tw-w-full max-lg:tw-max-w-[400px]"
|
||||
>
|
||||
<div class="tw-flex tw-place-items-center tw-gap-3">
|
||||
<div
|
||||
class="tw-h-[300px] tw-w-full tw-overflow-hidden tw-rounded-lg"
|
||||
>
|
||||
<img
|
||||
src="./assets/images/home/design.png"
|
||||
class="tw-h-full tw-w-full tw-object-cover"
|
||||
alt="Escalamiento operativo en servicios"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tw-flex tw-flex-col tw-gap-2">
|
||||
<h3 class="tw-text-xl tw-font-medium">Escalamiento operativo en servicios</h3>
|
||||
<p class="tw-text-gray-600">
|
||||
Transición completa de procesos manuales a un sistema digital integrado con agenda, automatización y control de demanda.
|
||||
</p>
|
||||
<a href="http://" class="tw-mt-4">
|
||||
<span>Ver caso</span>
|
||||
<i class="bi bi-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="reveal-up tw-flex tw-h-fit tw-w-[450px] tw-break-inside-avoid tw-flex-col tw-gap-2 tw-rounded-lg tw-bg-[#f3f3f3b4] tw-p-4 tw-shadow-lg max-lg:tw-w-full max-lg:tw-max-w-[400px]"
|
||||
>
|
||||
<div class="tw-flex tw-place-items-center tw-gap-3">
|
||||
<div
|
||||
class="tw-h-[300px] tw-w-full tw-overflow-hidden tw-rounded-lg"
|
||||
>
|
||||
<img
|
||||
src="./assets/images/home/editing.png"
|
||||
class="tw-h-full tw-w-full tw-object-cover"
|
||||
alt="Marketing conectado a operación"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tw-flex tw-flex-col tw-gap-2">
|
||||
<h3 class="tw-text-xl tw-font-medium">Marketing conectado a operación</h3>
|
||||
<p class="tw-text-gray-600">
|
||||
Diseño de funnels y presencia digital alineados a la capacidad operativa del negocio, sin saturar equipos.
|
||||
</p>
|
||||
<a href="http://" class="tw-mt-4">
|
||||
<span>Ver caso</span>
|
||||
<i class="bi bi-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="reveal-up tw-flex tw-h-fit tw-w-[450px] tw-break-inside-avoid tw-flex-col tw-gap-2 tw-rounded-lg tw-bg-[#f3f3f3b4] tw-p-4 tw-shadow-lg max-lg:tw-w-full max-lg:tw-max-w-[400px]"
|
||||
>
|
||||
<div class="tw-flex tw-place-items-center tw-gap-3">
|
||||
<div
|
||||
class="tw-h-[300px] tw-w-full tw-overflow-hidden tw-rounded-lg"
|
||||
>
|
||||
<img
|
||||
src="./assets/images/home/photography.png"
|
||||
class="tw-h-full tw-w-full tw-object-cover"
|
||||
alt="Optimización con IA aplicada"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tw-flex tw-flex-col tw-gap-2">
|
||||
<h3 class="tw-text-xl tw-font-medium">Optimización con IA aplicada</h3>
|
||||
<p class="tw-text-gray-600">
|
||||
Implementación de automatizaciones e IA para reducir carga administrativa y optimizar tiempo y recursos humanos.
|
||||
</p>
|
||||
<a href="http://" class="tw-mt-4">
|
||||
<span>Ver caso</span>
|
||||
<i class="bi bi-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
class="tw-relative tw-mt-10 tw-flex tw-min-h-[100vh] tw-w-full tw-max-w-[100vw] tw-flex-col tw-place-content-center tw-place-items-center lg:tw-p-6"
|
||||
id="testimonios"
|
||||
>
|
||||
<div
|
||||
class="tw-flex tw-h-full tw-w-full tw-justify-around tw-gap-8 tw-rounded-xl tw-bg-[#e7e6e685] tw-p-4 max-lg:tw-max-w-full max-lg:tw-flex-col"
|
||||
>
|
||||
<div
|
||||
class="reveal-up tw-flex tw-h-full tw-w-[50%] tw-place-content-center max-lg:tw-w-full lg:tw-sticky lg:tw-top-[20%]"
|
||||
>
|
||||
<h3
|
||||
class="tw-text-center tw-text-6xl tw-font-medium max-lg:tw-text-3xl"
|
||||
>
|
||||
Lo que dicen nuestros clientes
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="reveal-up tw-flex tw-w-[30%] tw-flex-col tw-place-items-center tw-gap-4 tw-p-2 max-lg:tw-w-full"
|
||||
>
|
||||
<div
|
||||
class="tw-flex tw-h-fit tw-w-full tw-flex-col tw-gap-4 tw-border-2 tw-border-black tw-bg-white tw-p-4"
|
||||
>
|
||||
<div
|
||||
class="tw-flex tw-w-full tw-place-items-center tw-gap-4 tw-p-2"
|
||||
>
|
||||
<div
|
||||
class="tw-flex tw-h-[60px] tw-w-[60px] tw-overflow-hidden tw-rounded-full"
|
||||
>
|
||||
<img
|
||||
src="./assets/images/people/women.png"
|
||||
alt="cliente fundador"
|
||||
class="tw-h-full tw-w-full tw-object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="tw-text-xl tw-font-semibold">Cliente fundador</p>
|
||||
<p class="tw-text-lg tw-text-gray-600">
|
||||
Emprendimiento de servicios
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tw-text-justify tw-text-gray-800">
|
||||
"Pasamos de operar con caos a tener claridad total en agenda, comunicación y decisiones. El sistema simplemente funciona."
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="tw-flex tw-h-fit tw-w-full tw-flex-col tw-gap-4 tw-border-2 tw-border-black tw-bg-white tw-p-4"
|
||||
>
|
||||
<div
|
||||
class="tw-flex tw-w-full tw-place-items-center tw-gap-4 tw-p-2"
|
||||
>
|
||||
<div
|
||||
class="tw-flex tw-h-[60px] tw-w-[60px] tw-overflow-hidden tw-rounded-full"
|
||||
>
|
||||
<img
|
||||
src="./assets/images/people/man.png"
|
||||
alt="socio operador"
|
||||
class="tw-h-full tw-w-full tw-object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="tw-text-xl tw-font-semibold">Socio operador</p>
|
||||
<p class="tw-text-lg tw-text-gray-600">
|
||||
Negocio en crecimiento
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tw-text-justify tw-text-gray-800">
|
||||
"No es marketing aislado. Es acompañamiento real que ordena todo el negocio mientras crece."
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="tw-flex tw-h-fit tw-w-full tw-flex-col tw-gap-4 tw-border-2 tw-border-black tw-bg-white tw-p-4"
|
||||
>
|
||||
<div
|
||||
class="tw-flex tw-w-full tw-place-items-center tw-gap-4 tw-p-2"
|
||||
>
|
||||
<div
|
||||
class="tw-flex tw-h-[60px] tw-w-[60px] tw-overflow-hidden tw-rounded-full"
|
||||
>
|
||||
<img
|
||||
src="./assets/images/people/man2.png"
|
||||
alt="director"
|
||||
class="tw-h-full tw-w-full tw-object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="tw-text-xl tw-font-semibold">Director</p>
|
||||
<p class="tw-text-lg tw-text-gray-600">
|
||||
PyME
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tw-text-justify tw-text-gray-800">
|
||||
"Redujimos tareas manuales y errores sin contratar más gente. La optimización fue inmediata."
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
class="tw-relative tw-flex tw-min-h-[80vh] tw-w-full tw-max-w-[100vw] tw-flex-col tw-place-content-center tw-place-items-center tw-overflow-hidden tw-p-6"
|
||||
id="servicios"
|
||||
>
|
||||
<div
|
||||
class="tw-mt-8 tw-flex tw-flex-col tw-place-items-center tw-gap-5"
|
||||
>
|
||||
<div
|
||||
class="reveal-up tw-mt-5 tw-flex tw-flex-col tw-gap-3 tw-text-center"
|
||||
>
|
||||
<h2 class="tw-text-4xl tw-font-semibold">
|
||||
Lo que hacemos
|
||||
</h2>
|
||||
</div>
|
||||
<div
|
||||
class="tw-mt-6 tw-flex tw-max-w-[60%] tw-flex-wrap tw-place-content-center tw-gap-2 max-lg:tw-flex-col"
|
||||
>
|
||||
<div
|
||||
class="reveal-up tw-flex tw-h-[150px] tw-w-[350px] tw-flex-col tw-gap-2 tw-p-4"
|
||||
>
|
||||
<div class="tw-flex tw-gap-1">
|
||||
<i class="bi bi-megaphone-fill tw-text-2xl"></i>
|
||||
<h3 class="tw-text-2xl tw-font-semibold">
|
||||
Marketing funcional
|
||||
</h3>
|
||||
</div>
|
||||
<div class="tw-text-[#595959]">
|
||||
Estrategia de marketing alineada a objetivos de negocio.
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="reveal-up tw-flex tw-h-[150px] tw-w-[350px] tw-flex-col tw-gap-2 tw-p-4"
|
||||
>
|
||||
<div class="tw-flex tw-gap-1">
|
||||
<i class="bi bi-code-slash tw-text-2xl"></i>
|
||||
<h3 class="tw-text-2xl tw-font-semibold">
|
||||
Desarrollo web & web apps
|
||||
</h3>
|
||||
</div>
|
||||
<div class="tw-text-[#595959]">
|
||||
Sitios web y aplicaciones funcionales para tu operación.
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="reveal-up tw-flex tw-h-[150px] tw-w-[350px] tw-flex-col tw-gap-2 tw-p-4"
|
||||
>
|
||||
<div class="tw-flex tw-gap-1">
|
||||
<i class="bi bi-gear-fill tw-text-2xl"></i>
|
||||
<h3 class="tw-text-2xl tw-font-semibold">
|
||||
Optimización operativa
|
||||
</h3>
|
||||
</div>
|
||||
<div class="tw-text-[#595959]">
|
||||
Estructura y procesos para escalar sin caos.
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="reveal-up tw-flex tw-h-[150px] tw-w-[350px] tw-flex-col tw-gap-2 tw-p-4"
|
||||
>
|
||||
<div class="tw-flex tw-gap-1">
|
||||
<i class="bi bi-cpu-fill tw-text-2xl"></i>
|
||||
<h3 class="tw-text-2xl tw-font-semibold">
|
||||
Automatización aplicada
|
||||
</h3>
|
||||
</div>
|
||||
<div class="tw-text-[#595959]">
|
||||
Automatización como soporte, no como eje central.
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="reveal-up tw-flex tw-h-[150px] tw-w-[350px] tw-flex-col tw-gap-2 tw-p-4"
|
||||
>
|
||||
<div class="tw-flex tw-gap-1">
|
||||
<i class="bi bi-heart-fill tw-text-2xl"></i>
|
||||
<h3 class="tw-text-2xl tw-font-semibold">
|
||||
Customer Experience
|
||||
</h3>
|
||||
</div>
|
||||
<div class="tw-text-[#595959]">
|
||||
Surveys y feedback accionable para decisiones reales.
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="reveal-up tw-flex tw-h-[150px] tw-w-[350px] tw-flex-col tw-gap-2 tw-p-4"
|
||||
>
|
||||
<div class="tw-flex tw-gap-1">
|
||||
<i class="bi bi-person-lines-fill tw-text-2xl"></i>
|
||||
<h3 class="tw-text-2xl tw-font-semibold">
|
||||
Acompañamiento estratégico
|
||||
</h3>
|
||||
</div>
|
||||
<div class="tw-text-[#595959]">
|
||||
Ejecución con perspectiva estratégica y seguimiento.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href="https://tally.so/r/woO0Kx"
|
||||
aria-label="signup"
|
||||
class="reveal-up tw-flex tw-h-[40px] tw-place-items-center tw-gap-2 tw-rounded-full tw-bg-black tw-p-1 tw-pl-4 tw-text-white"
|
||||
>
|
||||
<span>Platicar ahora</span>
|
||||
<div
|
||||
class="tw-flex tw-h-[30px] tw-w-[30px] tw-place-content-center tw-place-items-center tw-rounded-full tw-bg-white tw-font-semibold tw-text-black"
|
||||
>
|
||||
<i class="bi bi-arrow-up-right"></i>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
class="tw-mt-5 tw-flex tw-w-full tw-flex-col tw-place-items-center tw-p-[2%] max-lg:tw-p-3"
|
||||
id="insights"
|
||||
>
|
||||
<h3
|
||||
class="reveal-up tw-text-center tw-text-4xl tw-font-medium max-md:tw-text-2xl"
|
||||
>
|
||||
Insights para crecer con orden
|
||||
</h3>
|
||||
<!-- pricing -->
|
||||
<div
|
||||
class="reveal-up tw-mt-10 tw-flex tw-flex-wrap tw-place-content-center tw-gap-10 max-lg:tw-flex-col"
|
||||
>
|
||||
<a
|
||||
href=""
|
||||
class="tw-flex tw-h-[400px] tw-w-[350px] tw-flex-col tw-gap-2 tw-overflow-clip tw-rounded-lg tw-bg-[#edecec79] tw-p-4 tw-shadow-xl max-lg:tw-w-[300px]"
|
||||
>
|
||||
<div
|
||||
class="tw-h-[200px] tw-w-full tw-overflow-hidden tw-rounded-md"
|
||||
>
|
||||
<img
|
||||
src="./assets/images/home/forest.png"
|
||||
alt="Por qué el marketing sin operación colapsa negocios"
|
||||
class="tw-h-full tw-w-full tw-object-cover"
|
||||
srcset=""
|
||||
/>
|
||||
</div>
|
||||
<h3 class="tw-text-2xl tw-font-semibold max-md:tw-text-xl">
|
||||
Por qué el marketing sin operación colapsa negocios
|
||||
</h3>
|
||||
<p class="tw-mt-2 tw-text-gray-600">
|
||||
La mayoría de los emprendimientos falla por procesos, no por ventas.
|
||||
</p>
|
||||
<span>
|
||||
<span>Leer más</span>
|
||||
<i class="bi bi-arrow-right"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
href=""
|
||||
class="tw-flex tw-h-[400px] tw-w-[350px] tw-flex-col tw-gap-2 tw-overflow-clip tw-rounded-lg tw-bg-[#edecec79] tw-p-4 tw-shadow-xl max-lg:tw-w-[300px]"
|
||||
>
|
||||
<div
|
||||
class="tw-h-[200px] tw-w-full tw-overflow-hidden tw-rounded-md"
|
||||
>
|
||||
<img
|
||||
src="./assets/images/home/mountain.png"
|
||||
alt="Lean Office aplicado a pequeños negocios"
|
||||
class="tw-h-full tw-w-full tw-object-cover"
|
||||
srcset=""
|
||||
/>
|
||||
</div>
|
||||
<h3 class="tw-text-2xl tw-font-semibold max-md:tw-text-xl">
|
||||
Lean Office aplicado a pequeños negocios
|
||||
</h3>
|
||||
<p class="tw-mt-2 tw-text-gray-600">
|
||||
Cómo llevar disciplina industrial a oficinas y servicios.
|
||||
</p>
|
||||
<span>
|
||||
<span>Leer más</span>
|
||||
<i class="bi bi-arrow-right"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
href=""
|
||||
class="tw-flex tw-h-[400px] tw-w-[350px] tw-flex-col tw-gap-2 tw-overflow-clip tw-rounded-lg tw-bg-[#edecec79] tw-p-4 tw-shadow-xl max-lg:tw-w-[300px]"
|
||||
>
|
||||
<div
|
||||
class="tw-h-[200px] tw-w-full tw-overflow-hidden tw-rounded-md"
|
||||
>
|
||||
<img
|
||||
src="./assets/photography.png"
|
||||
alt="IA práctica para emprendedores"
|
||||
class="tw-h-full tw-w-full tw-object-cover"
|
||||
srcset=""
|
||||
/>
|
||||
</div>
|
||||
<h3 class="tw-text-2xl tw-font-semibold max-md:tw-text-xl">
|
||||
IA práctica para emprendedores
|
||||
</h3>
|
||||
<p class="tw-mt-2 tw-text-gray-600">
|
||||
Automatización real sin complejidad innecesaria.
|
||||
</p>
|
||||
<span>
|
||||
<span>Leer más</span>
|
||||
<i class="bi bi-arrow-right"></i>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="tw-mt-4" />
|
||||
|
||||
<footer
|
||||
class="tw-mt-auto tw-flex tw-min-h-[100px] tw-w-full tw-place-content-around tw-place-items-center tw-gap-3 tw-p-[2%] tw-px-[10%] tw-text-black max-md:tw-flex-col"
|
||||
id="contacto"
|
||||
>
|
||||
<div class="tw-flex tw-flex-col tw-gap-2">
|
||||
<p class="tw-text-lg tw-font-medium">Noiré Collective</p>
|
||||
<p class="tw-text-sm tw-text-gray-600">Marketing · Desarrollo Web · Optimización de Emprendimientos</p>
|
||||
</div>
|
||||
<div class="tw-flex tw-gap-6 tw-text-2xl">
|
||||
<a href="" aria-label="Instagram">
|
||||
<i class="bi bi-instagram"></i>
|
||||
</a>
|
||||
<a href="" aria-label="LinkedIn">
|
||||
<i class="bi bi-linkedin"></i>
|
||||
</a>
|
||||
<a href="" aria-label="WhatsApp">
|
||||
<i class="bi bi-whatsapp"></i>
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
<script
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.0/gsap.min.js"
|
||||
integrity="sha512-B1lby8cGcAUU3GR+Fd809/ZxgHbfwJMp0jLTVfHiArTuUt++VqSlJpaJvhNtRf3NERaxDNmmxkdx2o+aHd4bvw=="
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"
|
||||
></script>
|
||||
<script
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.0/ScrollTrigger.min.js"
|
||||
integrity="sha512-AY2+JxnBETJ0wcXnLPCcZJIJx0eimyhz3OJ55k2Jx4RtYC+XdIi2VtJQ+tP3BaTst4otlGG1TtPJ9fKrAUnRdQ=="
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"
|
||||
></script>
|
||||
|
||||
<script src="./index.js"></script>
|
||||
</html>
|
||||
124
index.js
Normal file
124
index.js
Normal file
@@ -0,0 +1,124 @@
|
||||
// initialization
|
||||
|
||||
const RESPONSIVE_WIDTH = 1024
|
||||
|
||||
let headerWhiteBg = false
|
||||
let isHeaderCollapsed = window.innerWidth < RESPONSIVE_WIDTH
|
||||
const collapseBtn = document.getElementById("collapse-btn")
|
||||
const collapseHeaderItems = document.getElementById("collapsed-header-items")
|
||||
|
||||
|
||||
|
||||
function onHeaderClickOutside(e) {
|
||||
|
||||
if (!collapseHeaderItems.contains(e.target)) {
|
||||
toggleHeader()
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
function toggleHeader() {
|
||||
if (isHeaderCollapsed) {
|
||||
// collapseHeaderItems.classList.remove("max-md:tw-opacity-0")
|
||||
collapseHeaderItems.classList.add("opacity-100",)
|
||||
collapseHeaderItems.style.width = "60vw"
|
||||
collapseBtn.classList.remove("bi-list")
|
||||
collapseBtn.classList.add("bi-x", "max-lg:tw-fixed")
|
||||
isHeaderCollapsed = false
|
||||
|
||||
setTimeout(() => window.addEventListener("click", onHeaderClickOutside), 1)
|
||||
|
||||
} else {
|
||||
collapseHeaderItems.classList.remove("opacity-100")
|
||||
collapseHeaderItems.style.width = "0vw"
|
||||
collapseBtn.classList.remove("bi-x", "max-lg:tw-fixed")
|
||||
collapseBtn.classList.add("bi-list")
|
||||
isHeaderCollapsed = true
|
||||
window.removeEventListener("click", onHeaderClickOutside)
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function responsive() {
|
||||
if (window.innerWidth > RESPONSIVE_WIDTH) {
|
||||
collapseHeaderItems.style.width = ""
|
||||
|
||||
} else {
|
||||
isHeaderCollapsed = true
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("resize", responsive)
|
||||
|
||||
|
||||
/**
|
||||
* Animations
|
||||
*/
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger)
|
||||
|
||||
gsap.to(".reveal-hero-text", {
|
||||
opacity: 0,
|
||||
y: "100%",
|
||||
})
|
||||
|
||||
gsap.to(".reveal-hero-img", {
|
||||
opacity: 0,
|
||||
y: "100%",
|
||||
})
|
||||
|
||||
|
||||
gsap.to(".reveal-up", {
|
||||
opacity: 0,
|
||||
y: "100%",
|
||||
})
|
||||
|
||||
|
||||
window.addEventListener("load", () => {
|
||||
// animate from initial position
|
||||
gsap.to(".reveal-hero-text", {
|
||||
opacity: 1,
|
||||
y: "0%",
|
||||
duration: 0.8,
|
||||
// ease: "power3.out",
|
||||
stagger: 0.5, // Delay between each word's reveal,
|
||||
// delay: 3
|
||||
})
|
||||
|
||||
gsap.to(".reveal-hero-img", {
|
||||
opacity: 1,
|
||||
y: "0%",
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
|
||||
|
||||
// ------------- reveal section animations ---------------
|
||||
|
||||
const sections = gsap.utils.toArray("section")
|
||||
|
||||
sections.forEach((sec) => {
|
||||
|
||||
const revealUptimeline = gsap.timeline({paused: true,
|
||||
scrollTrigger: {
|
||||
trigger: sec,
|
||||
start: "10% 80%", // top of trigger hits the top of viewport
|
||||
end: "20% 90%",
|
||||
// markers: true,
|
||||
// scrub: 1,
|
||||
}})
|
||||
|
||||
revealUptimeline.to(sec.querySelectorAll(".reveal-up"), {
|
||||
opacity: 1,
|
||||
duration: 0.8,
|
||||
y: "0%",
|
||||
stagger: 0.2,
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
25
readme.md
Normal file
25
readme.md
Normal file
@@ -0,0 +1,25 @@
|
||||
## Usage
|
||||
|
||||
* This template uses tailwind css every tailwind class are prefixed with `tw-`, to help differentiate
|
||||
between tailwind classes and other classes
|
||||
|
||||
During development add the following to head tag
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="tailwind-runtime.css"><!--replace with path to your tailwind runtime-->
|
||||
```
|
||||
During production use
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="tailwind-build.css"><!--replace with path to your tailwind build-->
|
||||
```
|
||||
|
||||
To start Tailwind during development use
|
||||
```html
|
||||
npm run start:tailwind
|
||||
```
|
||||
|
||||
To create a build file use
|
||||
```html
|
||||
npm run build:tailwind
|
||||
```
|
||||
20
tailwind.config.js
Normal file
20
tailwind.config.js
Normal file
@@ -0,0 +1,20 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
prefix: 'tw-',
|
||||
important: false,
|
||||
content: [
|
||||
"**/*.{html, jsx, js}",
|
||||
"**/*.js",
|
||||
"**/*.html",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: "#000",
|
||||
secondary: "#fff",
|
||||
}
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user