Manage all your projects in one place
View plans, track progress, increase productivity and improve communication with Projectile.
Rated 4.9 onG2 & Capterra
View plans, track progress, increase productivity and improve communication with Projectile.
Rated 4.9 onG2 & Capterra
<body class="dark:bg-[#0B0B0B]">
<header class="h-screen md:h-[70vh] w-full">
<nav class="container mx-auto max-w-7xl px-4 py-4 md:flex md:items-center md:justify-between md:px-10">
<div class="flex items-center justify-between md:w-2/12">
<a href="#" class="flex items-center text-xl text-slate-900 dark:text-white md:text-2xl md:font-semibold">
<img class="mr-3 h-6 md:mt-0 md:h-8" src="https://res.cloudinary.com/ds4j2pmzp/image/upload/v1656977478/webwinds/logos/dummy-logo-4_bioobs.svg" alt="logo" />
<p>Project</p>
</a>
<!-- Mobile menu button -->
<div class="flex md:hidden">
<button type="button" class="text-slate-900 focus:text-slate-600 focus:outline-none dark:text-slate-400" aria-label="toggle menu">
<svg viewBox="0 0 24 24" class="h-6 w-6 fill-current"> <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"> </path> </svg>
</button>
</div>
</div>
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
<div class="hidden w-full md:ml-5 md:flex md:items-center md:justify-between">
<div></div>
<div class="flex flex-col md:flex-row">
<a href="#" class="my-4 mr-10 font-medium text-slate-900 dark:text-white md:my-0">Home</a>
<a href="#" class="my-4 mr-10 text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white md:my-0">Products</a>
<a href="#" class="my-4 mr-10 text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white md:my-0">Customers</a>
<a href="#" class="my-4 mr-10 text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white md:my-0">Articles</a>
</div>
<div class="flex flex-col md:flex-row items-center justify-center">
<button type="button" class="mt-4 inline-flex w-full items-center justify-center rounded-lg border-0 text-base text-slate-500 hover:text-slate-900 focus:outline-none dark:text-slate-400 dark:hover:text-white md:mt-0 md:mr-5 md:w-auto">
Sign in
</button>
<button type="button" class="my-4 inline-flex w-full items-center justify-center rounded-lg border-2 border-slate-900 py-2.5 px-5 text-base text-slate-900 hover:bg-slate-900 hover:text-white focus:outline-none dark:border-white dark:text-white hover:dark:bg-white hover:dark:text-slate-900 md:my-0 md:w-auto">
Start Free
</button>
</div>
</div>
</nav>
<main class="continer mx-auto flex h-full flex-col items-center justify-center px-5 md:max-w-4xl md:px-0">
<h1 class="text-center text-4xl font-semibold text-slate-900 dark:text-white md:text-7xl md:leading-tight">
Manage all your projects in one place
</h1>
<p class="mt-5 text-center text-slate-500 md:w-2/3 md:text-lg">
View plans, track progress, increase productivity and improve
communication with Projectile.
</p>
<div class="mt-10 flex w-full flex-col items-center justify-center md:flex-row">
<button class="w-full rounded-lg bg-[#C9FA75] px-10 py-5 text-lg text-black hover:bg-[#9FCF4D] md:w-auto">
Get Started For Free
</button>
<div class="mt-5 flex flex-col items-center md:ml-10 md:mt-0 md:items-start">
<img class="pb-3" src="https://res.cloudinary.com/ds4j2pmzp/image/upload/v1656977126/webwinds/images/star-rating_pr5lp7.svg" alt="" />
<p class="text-slate-600 dark:text-white">
Rated 4.9 onG2 & Capterra
</p>
</div>
</div>
</main>
</header>
<section class="mb-10 container mx-auto max-w-7xl md:my-20">
<img class="dark:hidden" src="https://res.cloudinary.com/ds4j2pmzp/image/upload/v1656977121/webwinds/images/Hero-image-6-light_am0rq8.svg" alt="">
<img class="hidden dark:block" src="https://res.cloudinary.com/ds4j2pmzp/image/upload/v1656977127/webwinds/images/Hero-image-6-dark_uurasm.svg" alt="">
</section>
</body>