commit bda1ed26477aa7eae6f56ea32fdd7efe761c3a06 Author: Marco Gallegos Date: Wed Jan 21 15:55:11 2026 -0600 first commit diff --git a/README.md b/README.md new file mode 100644 index 0000000..8fc9181 --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +# noire_landing diff --git a/assets/images/home/design.png b/assets/images/home/design.png new file mode 100644 index 0000000..bf4e8ce Binary files /dev/null and b/assets/images/home/design.png differ diff --git a/assets/images/home/editing.png b/assets/images/home/editing.png new file mode 100644 index 0000000..b3163ac Binary files /dev/null and b/assets/images/home/editing.png differ diff --git a/assets/images/home/forest.png b/assets/images/home/forest.png new file mode 100644 index 0000000..430381b Binary files /dev/null and b/assets/images/home/forest.png differ diff --git a/assets/images/home/man.png b/assets/images/home/man.png new file mode 100644 index 0000000..9362fbe Binary files /dev/null and b/assets/images/home/man.png differ diff --git a/assets/images/home/mountain.png b/assets/images/home/mountain.png new file mode 100644 index 0000000..ab463af Binary files /dev/null and b/assets/images/home/mountain.png differ diff --git a/assets/images/home/photography.png b/assets/images/home/photography.png new file mode 100644 index 0000000..eb0dcfc Binary files /dev/null and b/assets/images/home/photography.png differ diff --git a/assets/images/people/man.png b/assets/images/people/man.png new file mode 100644 index 0000000..da8af3a Binary files /dev/null and b/assets/images/people/man.png differ diff --git a/assets/images/people/man2.png b/assets/images/people/man2.png new file mode 100644 index 0000000..a4346f9 Binary files /dev/null and b/assets/images/people/man2.png differ diff --git a/assets/images/people/women.png b/assets/images/people/women.png new file mode 100644 index 0000000..7c3833f Binary files /dev/null and b/assets/images/people/women.png differ diff --git a/css/index.css b/css/index.css new file mode 100644 index 0000000..947d4ed --- /dev/null +++ b/css/index.css @@ -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; + } + +} \ No newline at end of file diff --git a/css/tailwind-build.css b/css/tailwind-build.css new file mode 100644 index 0000000..1d92bbb --- /dev/null +++ b/css/tailwind-build.css @@ -0,0 +1 @@ +/*! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.tw-absolute{position:absolute}.tw-relative{position:relative}.tw-right-3{right:.75rem}.tw-top-0{top:0}.tw-top-3{top:.75rem}.tw-z-20{z-index:20}.tw-z-50{z-index:50}.tw-z-\[1\]{z-index:1}.tw-mx-4{margin-left:1rem;margin-right:1rem}.tw-my-4{margin-top:1rem;margin-bottom:1rem}.tw-mt-10{margin-top:2.5rem}.tw-mt-2{margin-top:.5rem}.tw-mt-4{margin-top:1rem}.tw-mt-5{margin-top:1.25rem}.tw-mt-6{margin-top:1.5rem}.tw-mt-8{margin-top:2rem}.tw-mt-auto{margin-top:auto}.tw-flex{display:flex}.tw-h-\[150px\]{height:150px}.tw-h-\[1px\]{height:1px}.tw-h-\[200px\]{height:200px}.tw-h-\[300px\]{height:300px}.tw-h-\[30px\]{height:30px}.tw-h-\[400px\]{height:400px}.tw-h-\[40px\]{height:40px}.tw-h-\[50px\]{height:50px}.tw-h-\[60px\]{height:60px}.tw-h-fit{height:-moz-fit-content;height:fit-content}.tw-h-full{height:100%}.tw-max-h-\[580px\]{max-height:580px}.tw-min-h-\[100px\]{min-height:100px}.tw-min-h-\[100vh\]{min-height:100vh}.tw-min-h-\[450px\]{min-height:450px}.tw-min-h-\[80vh\]{min-height:80vh}.tw-w-\[30\%\]{width:30%}.tw-w-\[30px\]{width:30px}.tw-w-\[350px\]{width:350px}.tw-w-\[40px\]{width:40px}.tw-w-\[450px\]{width:450px}.tw-w-\[50\%\]{width:50%}.tw-w-\[60px\]{width:60px}.tw-w-\[80\%\]{width:80%}.tw-w-full{width:100%}.tw-w-max{width:-moz-max-content;width:max-content}.tw-min-w-\[350px\]{min-width:350px}.tw-max-w-\[100vw\]{max-width:100vw}.tw-max-w-\[450px\]{max-width:450px}.tw-max-w-\[50\%\]{max-width:50%}.tw-max-w-\[60\%\]{max-width:60%}.tw-max-w-\[650px\]{max-width:650px}.tw-break-inside-avoid{-moz-column-break-inside:avoid;break-inside:avoid}.tw-flex-col{flex-direction:column}.tw-flex-wrap{flex-wrap:wrap}.tw-place-content-center{place-content:center}.tw-place-content-around{place-content:space-around}.tw-place-items-center{place-items:center}.tw-justify-around{justify-content:space-around}.tw-gap-1{gap:.25rem}.tw-gap-10{gap:2.5rem}.tw-gap-2{gap:.5rem}.tw-gap-3{gap:.75rem}.tw-gap-4{gap:1rem}.tw-gap-5{gap:1.25rem}.tw-gap-6{gap:1.5rem}.tw-gap-8{gap:2rem}.tw-gap-\[20px\]{gap:20px}.tw-space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}.tw-overflow-hidden{overflow:hidden}.tw-overflow-clip{overflow:clip}.tw-rounded-full{border-radius:9999px}.tw-rounded-lg{border-radius:.5rem}.tw-rounded-md{border-radius:.375rem}.tw-rounded-xl{border-radius:.75rem}.tw-border-2{border-width:2px}.tw-border-\[1px\]{border-width:1px}.tw-border-solid{border-style:solid}.tw-border-black{--tw-border-opacity:1;border-color:rgb(0 0 0/var(--tw-border-opacity))}.tw-bg-\[\#e7e6e685\]{background-color:#e7e6e685}.tw-bg-\[\#edecec79\]{background-color:#edecec79}.tw-bg-\[\#f3f3f3b4\]{background-color:#f3f3f3b4}.tw-bg-\[\#fff\]{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.tw-bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.tw-bg-green-200{--tw-bg-opacity:1;background-color:rgb(187 247 208/var(--tw-bg-opacity))}.tw-bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.tw-bg-opacity-0{--tw-bg-opacity:0}.tw-object-contain{-o-object-fit:contain;object-fit:contain}.tw-object-cover{-o-object-fit:cover;object-fit:cover}.tw-p-1{padding:.25rem}.tw-p-2{padding:.5rem}.tw-p-4{padding:1rem}.tw-p-6{padding:1.5rem}.tw-p-\[2\%\]{padding:2%}.tw-p-\[4px\]{padding:4px}.tw-p-\[5\%\]{padding:5%}.tw-px-6{padding-left:1.5rem;padding-right:1.5rem}.tw-px-\[10\%\]{padding-left:10%;padding-right:10%}.tw-px-\[5\%\]{padding-left:5%;padding-right:5%}.tw-py-5{padding-top:1.25rem;padding-bottom:1.25rem}.tw-pl-4{padding-left:1rem}.tw-text-center{text-align:center}.tw-text-justify{text-align:justify}.tw-font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.tw-text-2xl{font-size:1.5rem;line-height:2rem}.tw-text-3xl{font-size:1.875rem;line-height:2.25rem}.tw-text-4xl{font-size:2.25rem;line-height:2.5rem}.tw-text-6xl{font-size:3.75rem;line-height:1}.tw-text-7xl{font-size:4.5rem;line-height:1}.tw-text-base{font-size:1rem;line-height:1.5rem}.tw-text-lg{font-size:1.125rem;line-height:1.75rem}.tw-text-xl{font-size:1.25rem;line-height:1.75rem}.tw-font-medium{font-weight:500}.tw-font-semibold{font-weight:600}.tw-uppercase{text-transform:uppercase}.tw-italic{font-style:italic}.tw-leading-\[85px\]{line-height:85px}.tw-text-\[\#595959\]{--tw-text-opacity:1;color:rgb(89 89 89/var(--tw-text-opacity))}.tw-text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.tw-text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.tw-text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity))}.tw-text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.tw-shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.tw-shadow-lg,.tw-shadow-xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.tw-shadow-xl{--tw-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color)}.tw-transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.tw-duration-\[0\.5s\]{transition-duration:.5s}.hover\:tw-bg-black:hover{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.hover\:tw-text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}@media not all and (min-width:1280px){.max-xl\:tw-place-items-center{place-items:center}}@media not all and (min-width:1024px){.max-lg\:tw-fixed{position:fixed}.max-lg\:tw-mr-auto{margin-right:auto}.max-lg\:tw-mt-\[30px\]{margin-top:30px}.max-lg\:tw-h-fit{height:-moz-fit-content;height:fit-content}.max-lg\:tw-max-h-\[320px\]{max-height:320px}.max-lg\:tw-min-h-\[180px\]{min-height:180px}.max-lg\:tw-w-\[300px\]{width:300px}.max-lg\:tw-w-\[320px\]{width:320px}.max-lg\:tw-w-full{width:100%}.max-lg\:tw-min-w-\[320px\]{min-width:320px}.max-lg\:tw-max-w-\[400px\]{max-width:400px}.max-lg\:tw-max-w-\[unset\]{max-width:unset}.max-lg\:tw-max-w-full{max-width:100%}.max-lg\:tw-flex-col{flex-direction:column}.max-lg\:tw-place-items-end{place-items:end}.max-lg\:tw-gap-5{gap:1.25rem}.max-lg\:tw-p-3{padding:.75rem}.max-lg\:tw-p-4{padding:1rem}.max-lg\:tw-px-4{padding-left:1rem;padding-right:1rem}.max-lg\:tw-text-3xl{font-size:1.875rem;line-height:2.25rem}.max-lg\:tw-text-4xl{font-size:2.25rem;line-height:2.5rem}.max-lg\:tw-shadow-md{--tw-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}}@media not all and (min-width:768px){.max-md\:tw-mt-\[50px\]{margin-top:50px}.max-md\:tw-w-full{width:100%}.max-md\:tw-columns-1{-moz-columns:1;column-count:1}.max-md\:tw-flex-col{flex-direction:column}.max-md\:tw-place-content-center{place-content:center}.max-md\:tw-text-2xl{font-size:1.5rem;line-height:2rem}.max-md\:tw-text-xl{font-size:1.25rem;line-height:1.75rem}.max-md\:tw-leading-snug{line-height:1.375}.max-md\:tw-opacity-0{opacity:0}}@media (min-width:1024px){.lg\:tw-sticky{position:sticky}.lg\:tw-top-\[20\%\]{top:20%}.lg\:tw-mx-auto{margin-left:auto;margin-right:auto}.lg\:tw-hidden{display:none}.lg\:tw-columns-2{-moz-columns:2;column-count:2}.lg\:tw-place-items-center{place-items:center}.lg\:tw-justify-around{justify-content:space-around}.lg\:tw-p-6{padding:1.5rem}}@media (min-width:1280px){.xl\:tw-columns-3{-moz-columns:3;column-count:3}} \ No newline at end of file diff --git a/css/tailwind.css b/css/tailwind.css new file mode 100644 index 0000000..0588121 --- /dev/null +++ b/css/tailwind.css @@ -0,0 +1,8 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer components{ +} + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..67aef64 --- /dev/null +++ b/index.html @@ -0,0 +1,602 @@ + + + + + + Noiré Collective — Marketing y Optimización para Emprendimientos + + + + + + + + + + + + + + + + + +
+ + Noiré Collective + + + +
+ +
+
+
+
+ + Noiré Collective + +
+
+ Marketing, desarrollo web y sistemas digitales para crecer con estructura. +
+
+ 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. +
+ +
+ + Platicar ahora +
+ +
+ +
+
+ +
+
+ app +
+
+
+
+ +
+
+

+ Nosotros +

+

+ 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. +

+

+ 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. +

+
+
+ +
+

+ Casos reales +

+
+
+
+
+
+ Escalamiento operativo en servicios +
+
+
+

Escalamiento operativo en servicios

+

+ Transición completa de procesos manuales a un sistema digital integrado con agenda, automatización y control de demanda. +

+ + Ver caso + + +
+
+ +
+
+
+ Marketing conectado a operación +
+
+
+

Marketing conectado a operación

+

+ Diseño de funnels y presencia digital alineados a la capacidad operativa del negocio, sin saturar equipos. +

+ + Ver caso + + +
+
+ +
+
+
+ Optimización con IA aplicada +
+
+
+

Optimización con IA aplicada

+

+ Implementación de automatizaciones e IA para reducir carga administrativa y optimizar tiempo y recursos humanos. +

+ + Ver caso + + +
+
+
+
+ +
+
+
+

+ Lo que dicen nuestros clientes +

+
+ +
+
+
+
+ cliente fundador +
+ +
+

Cliente fundador

+

+ Emprendimiento de servicios +

+
+
+
+ "Pasamos de operar con caos a tener claridad total en agenda, comunicación y decisiones. El sistema simplemente funciona." +
+
+ +
+
+
+ socio operador +
+ +
+

Socio operador

+

+ Negocio en crecimiento +

+
+
+
+ "No es marketing aislado. Es acompañamiento real que ordena todo el negocio mientras crece." +
+
+ +
+
+
+ director +
+ +
+

Director

+

+ PyME +

+
+
+
+ "Redujimos tareas manuales y errores sin contratar más gente. La optimización fue inmediata." +
+
+
+
+
+ +
+
+
+

+ Lo que hacemos +

+
+
+
+
+ +

+ Marketing funcional +

+
+
+ Estrategia de marketing alineada a objetivos de negocio. +
+
+
+
+ +

+ Desarrollo web & web apps +

+
+
+ Sitios web y aplicaciones funcionales para tu operación. +
+
+
+
+ +

+ Optimización operativa +

+
+
+ Estructura y procesos para escalar sin caos. +
+
+
+
+ +

+ Automatización aplicada +

+
+
+ Automatización como soporte, no como eje central. +
+
+
+
+ +

+ Customer Experience +

+
+
+ Surveys y feedback accionable para decisiones reales. +
+
+
+
+ +

+ Acompañamiento estratégico +

+
+
+ Ejecución con perspectiva estratégica y seguimiento. +
+
+
+ + + Platicar ahora +
+ +
+ +
+
+ +
+

+ Insights para crecer con orden +

+ +
+ +
+ Por qué el marketing sin operación colapsa negocios +
+

+ Por qué el marketing sin operación colapsa negocios +

+

+ La mayoría de los emprendimientos falla por procesos, no por ventas. +

+ + Leer más + + + + +
+ Lean Office aplicado a pequeños negocios +
+

+ Lean Office aplicado a pequeños negocios +

+

+ Cómo llevar disciplina industrial a oficinas y servicios. +

+ + Leer más + + + + +
+ IA práctica para emprendedores +
+

+ IA práctica para emprendedores +

+

+ Automatización real sin complejidad innecesaria. +

+ + Leer más + + + +
+
+ +
+ + + + + + + + + diff --git a/index.js b/index.js new file mode 100644 index 0000000..54be0fc --- /dev/null +++ b/index.js @@ -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, + }) + + +}) + + + diff --git a/readme.md b/readme.md new file mode 100644 index 0000000..39d06af --- /dev/null +++ b/readme.md @@ -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 + +``` +During production use + +```html + +``` + +To start Tailwind during development use +```html +npm run start:tailwind +``` + +To create a build file use +```html +npm run build:tailwind +``` \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..9269f78 --- /dev/null +++ b/tailwind.config.js @@ -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: [], +} +