238 lines
8.4 KiB
HTML
238 lines
8.4 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
|
<meta
|
|
name="apple-mobile-web-app-title"
|
|
content="nKode Authentication Evolved"
|
|
/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>nKode</title>
|
|
<link rel="icon" type="image/png" href="assets/n.png" />
|
|
<link rel="apple-touch-icon" href="assets/n.png" />
|
|
|
|
<!-- Tailwind CSS CDN -->
|
|
|
|
<link rel="stylesheet" href="assets/output.css" />
|
|
<!-- Google tag (gtag.js) -->
|
|
<script
|
|
async
|
|
src="https://www.googletagmanager.com/gtag/js?id=G-SR0MLMR2MR"
|
|
></script>
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag() {
|
|
dataLayer.push(arguments);
|
|
}
|
|
gtag("js", new Date());
|
|
|
|
gtag("config", "G-SR0MLMR2MR");
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="bg-white">
|
|
<header class="absolute inset-x-0 top-0 z-50">
|
|
<nav
|
|
class="fixed top-0 w-full z-50 flex items-center justify-between p-6 px-8 bg-white"
|
|
aria-label="Global"
|
|
>
|
|
<div class="flex flex-1">
|
|
<a href="#" class="-m-1.5 p-1.5">
|
|
<img class="h-8 w-auto" src="assets/lightmodenkode.svg" alt="" />
|
|
</a>
|
|
</div>
|
|
<div class="lg:flex lg:hidden">
|
|
<button
|
|
id="open-menu"
|
|
type="button"
|
|
class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-400"
|
|
>
|
|
<span class="sr-only">Open main menu</span>
|
|
<svg
|
|
class="h-6 w-6"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="currentColor"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="hidden lg:flex items-center gap-x-12">
|
|
<div
|
|
class="flex gap-x-6 text-lg font-semibold leading-6 text-black"
|
|
>
|
|
<a href="#contact-us">Contact Us</a>
|
|
</div>
|
|
<div class="ml-auto">
|
|
<button
|
|
class="bg-orange-500 text-white py-2 px-4 rounded-full hover:bg-orange-600 transition duration-200 text-sm sm:text-lg"
|
|
>
|
|
<a href="https://auth.nkode.tech"
|
|
>Try nKode <span aria-hidden="true">→</span></a
|
|
>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<!-- Mobile menu, show/hide based on menu open state. -->
|
|
<div
|
|
id="mobile-menu"
|
|
class="lg:hidden hidden"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
>
|
|
<!-- Background backdrop, show/hide based on slide-over state. -->
|
|
<div class="fixed inset-0 z-50"></div>
|
|
<div
|
|
class="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white px-6 py-6 lg:max-w-sm lg:ring-1 lg:ring-white/10"
|
|
>
|
|
<div class="flex items-center justify-between">
|
|
<a href="#" class="-m-1.5 p-1.5">
|
|
<span class="sr-only">Your Company</span>
|
|
<img
|
|
class="h-8 w-auto"
|
|
src="assets/lightmodenkode.svg"
|
|
alt=""
|
|
/>
|
|
</a>
|
|
<button
|
|
id="close-menu"
|
|
type="button"
|
|
class="-m-3 rounded-md p-4 text-black"
|
|
>
|
|
<span class="sr-only">Close menu</span>
|
|
<svg
|
|
class="h-8 w-8"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="currentColor"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M6 18 18 6M6 6l12 12"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="mt-6 flow-root">
|
|
<div class="-my-6 divide-y divide-white/25">
|
|
<div class="space-y-2 py-6">
|
|
<a
|
|
href="#create-an-nkode"
|
|
class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-black hover:bg-gray-200 mobile-nav"
|
|
>How to create an nKode</a
|
|
>
|
|
<a
|
|
href="#how-nkode-works"
|
|
class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-black hover:bg-gray-200 mobile-nav"
|
|
>How nKode Works</a
|
|
>
|
|
<a
|
|
href="#faq"
|
|
class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-black hover:bg-gray-200 mobile-nav"
|
|
>FAQ</a
|
|
>
|
|
<a
|
|
href="#contact-us"
|
|
class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-black hover:bg-gray-200 mobile-nav"
|
|
>Contact Us</a
|
|
>
|
|
</div>
|
|
|
|
<button
|
|
class="bg-orange-500 text-white py-2 px-4 rounded-full hover:bg-orange-600 transition duration-200 text-sm sm:text-large"
|
|
>
|
|
<a href="https://auth.nkode.tech"
|
|
>Try nKode <span aria-hidden="true">→</span></a
|
|
>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<main>
|
|
<div class="mx-auto lg:max-w-3xl sm:max-w-xl max-w-sm mb-8 mt-24">
|
|
<div class="flex flex-col items-center text-black mt-24 mb-12">
|
|
<div class="text-5xl lg:text-7xl tracking-tight">
|
|
<p>
|
|
<span class="text-orange-600 font-semibold">Easier</span> to
|
|
remember
|
|
</p>
|
|
<p>
|
|
More
|
|
<span class="text-orange-600 font-semibold">secure</span> than
|
|
</p>
|
|
<p>a password</p>
|
|
</div>
|
|
<div class="text-xl mt-8">
|
|
<p>nKode replaces your password with easy to remember icons.</p>
|
|
</div>
|
|
</div>
|
|
<div></div>
|
|
<div class="text-center mt-8 mb-24">
|
|
<button
|
|
class="bg-orange-500 text-white py-2 px-4 rounded-full hover:bg-orange-600 transition duration-200 text-sm sm:text-lg"
|
|
>
|
|
<a href="https://auth.nkode.tech"
|
|
>Try nKode <span aria-hidden="true">→</span></a
|
|
>
|
|
</button>
|
|
</div>
|
|
|
|
<section class="scroll-mt-24" id="contact-us">
|
|
<h3 class="text-4xl mt-8">Contact Us</h3>
|
|
<p class="mt-4 text-lg">
|
|
We'd love to hear from you! Whether you have questions, or
|
|
feedback, feel free to reach out to us at:
|
|
</p>
|
|
<a
|
|
href="mailto:hello@nkode.tech"
|
|
class="text-blue-600 hover:underline mt-2 text-lg font-semibold"
|
|
>hello@nkode.tech</a
|
|
>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Add your JavaScript just before the closing body tag -->
|
|
<script>
|
|
// Get the elements from the DOM
|
|
const openMenuButton = document.getElementById("open-menu");
|
|
const closeMenuButton = document.getElementById("close-menu");
|
|
const mobileMenu = document.getElementById("mobile-menu");
|
|
const mobileNavLinks = document.getElementsByClassName("mobile-nav");
|
|
// Function to show the mobile menu
|
|
openMenuButton.addEventListener("click", () => {
|
|
mobileMenu.classList.remove("hidden");
|
|
});
|
|
|
|
// Function to hide the mobile menu
|
|
closeMenuButton.addEventListener("click", () => {
|
|
mobileMenu.classList.add("hidden");
|
|
});
|
|
|
|
Array.from(mobileNavLinks).forEach((link) => {
|
|
link.addEventListener("click", () => {
|
|
mobileMenu.classList.add("hidden");
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|