---
import FontAwesome from "@components/form/FontAwesome.svelte"
import ThemeSwitcher from "@components/form/ThemeSwitcher.svelte"
---

<div class="theme-switcher">
<ThemeSwitcher client:load />
</div>

<div class="hero">
  <h1>Awesome Privacy</h1>
  <p class="intro">
    Your guide to finding and comparing privacy-respecting alternatives to popular software and services.
  </p>
  <div class="github-link-wrap">
    <a href="https://github.com/lissy93/awesome-privacy">
      <FontAwesome iconName="github" />
      View on GitHub
    </a>
  </div>
</div>

<nav class="top-right">
  <ul>
    <li>
      <a href="/">Home</a>
    </li>
    <li>
      <a href="/search">Search</a>
    </li>
    <li>
      <a href="/browse">Browse</a>
    </li>
    <li>
      <a href="/about">About</a>
    </li>
    <li>
      <a href="https://github.com/lissy93/awesome-privacy">Source</a>
    </li>
    <li>
      <a href="https://as93.net">More Apps</a>
    </li>
  </ul>
</nav>


<style lang="scss">

	.hero {
    color: var(--accent-fg);
    border-radius: var(--curve-sm);
    padding: 2rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    @media(max-width: 768px) {
      padding: 2rem 1rem;
    }
	}
	svg {
		position: absolute;
		top: -32px;
		left: 50%;
		transform: translatex(-50%);
		width: 220px;
		height: auto;
		opacity: 0.6;
    display: none;
	}
	h1 {
    margin: 0;
		font-size: 5rem;
		font-weight: 700;
		line-height: 1;
		text-align: center;
    font-family: 'Libre Franklin', sans-serif;
    color: var(--accent-3);
    -webkit-text-fill-color: var(--accent-3);
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: var(--box-outline);
    text-shadow: 3px 3px 0 var(--box-outline);
    @media(max-width: 768px) {
      font-size: 4rem;
    }
	}
  .intro {
    text-align: center;
    font-size: 1.6rem;
    padding: 0.5rem 1rem;
    color: var(--accent-fg);
    background: var(--accent-3);
    border: 2px solid var(--box-outline);
    border-radius: var(--curve-sm);
    box-shadow: 6px 6px 0 var(--box-outline);
    font-family: "Lekton", sans-serif;
    font-weight: 700;
    max-width: 735px;
    margin: 0 auto;
  }
  .github-link-wrap {
    font-family: "Lekton", sans-serif;
    max-width: 735px;
    text-align: center;
    margin: 0 auto;
    border: 1px solid var(--box-outline);
    box-shadow: 3px 3px 0 var(--box-outline);
    background: var(--accent);
    border-radius: 18px;
    padding: 0.5rem 1rem;
    a {
      text-decoration: none;
      color: var(--accent-fg);;
      font-size: 1.2rem;
      font-family: "Lekton", sans-serif;
      font-weight: bold;
      display: flex;
      align-items: center;
      :global(svg) {
        width: 1.5rem;
        height: 1.5rem;
        color: var(--accent-fg);
        margin-right: 0.5rem;
      }
    }
  }

  .theme-switcher {
    position: absolute;
    right: 1rem;
    top: 1rem;
  }

  .top-right {
    position: absolute;
    top: 0;
    right: 1rem;
    opacity: 0.8;
    display: none;
    &:hover {
      opacity: 1;
    }
    ul {
      list-style: none;
      display: flex;
      padding: 0;
      gap: 0.5rem;
      li {
        &:not(:last-child) {
          border-right: 1px solid var(--accent);
          padding-right: 0.5rem;
        }
      }
      li a {
        text-decoration: none;
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
	
</style>
