<script setup>
  const { isMobile, isDesktopOrTablet } = useDevice();
</script>

<template>
  <div class="hero">
    <h1>Welcome to Handshake.</h1>
    <p>Handshake is a decentralized, permissionless naming protocol with the goal of creating 
      an alternative to existing Certificate Authorities and naming systems.</p>
    <NuxtLink to="https://handshake.org/" class="cta" target="_BLANK">Learn more</NuxtLink>
    <NuxtLink to="https://www.namebase.io/register/35xfyv" class="secondary">Register a domain</NuxtLink>
  </div>

  <!--
    <div class="guides">
      <h2>Handshake Guides</h2>
      <p>Discover the benefits Handshake offers and exciting possibilities.</p>
      <NuxtLink to="/guide/hosting-a-website">Hosting a website on Handshake</NuxtLink>
      <NuxtLink to="/guide/taken-name">My name <span v-if="isMobile">on Handshake</span> is already taken</NuxtLink>
      <NuxtLink to="/guide/future-of-domains">The future of <span v-if="isMobile">web3</span> domain names</NuxtLink>
      <NuxtLink to="/guide/ownership-and-security">Why replace the existing system</NuxtLink>
    </div>
  -->

  <div class="explore">
    <h2>Explore the ecosystem</h2>
    <p>Find valuable resources and see what others are building.</p>
  </div>
</template>