mirror of
https://github.com/marcogll/noire_landing.git
synced 2026-03-15 12:25:05 +00:00
603 lines
30 KiB
HTML
603 lines
30 KiB
HTML
<!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>
|