www-2021/src/routes/index.svelte

<script>
  import FemtoHeader from "../components/FemtoHeader.svelte";
  import Globe from "../components/Globe.svelte";
  import IntroText from "../components/IntroText.svelte";
  import TalkingPointContainer from "../components/TalkingPointContainer.svelte";
  import TalkingPointContent from "../components/TalkingPointContent.svelte";
  import TalkingPointName from "../components/TalkingPointName.svelte";
  import PartnerContainer from "../components/PartnerContainer.svelte";
</script>

<svelte:head>
  <title>FemtoStar</title>
</svelte:head>

<div class="site">
  <div class="hero">
    <div class="container">
      <Globe width="250" />
      <FemtoHeader />
    </div>
  </div>

  <TalkingPointContainer>
    <TalkingPointName text="Global Open Infrastructure" />
    <TalkingPointContent>
      <p>
        Our satellites are open infrastructure - that means anyone can use them
        without needing to go through an official gateway. This makes FemtoStar
        a flexible, open, and inherently net-neutral network, able not just to
        connect users to the services we provide, but to serve as a platform for
        what others build on top of it.
      </p>
      <p>
        <a rel="prefetch" href="./global-open-infrastructure">Learn more →</a>
      </p>
    </TalkingPointContent>
  </TalkingPointContainer>

  <TalkingPointContainer>
    <TalkingPointName text="Privacy by design, not just by promise" />
    <TalkingPointContent>
      <p>
        Many products only promise privacy. FemtoStar is different. Privacy and
        security are verifiably baked into every part of the system, all the way
        down to the lowest level details. We couldn't violate your privacy even
        if we wanted to.
      </p>
      <p>
        <a rel="prefetch" href="./privacy-by-design">Learn more →</a>
      </p>
    </TalkingPointContent>
  </TalkingPointContainer>

  <TalkingPointContainer>
    <TalkingPointName
      text="Free and open-source technology, built by a global community"
    />
    <TalkingPointContent>
      <p>
        FemtoStar is free and open-source technology. This goes for software and
        hardware alike, and, yes, even for the satellites themselves. You have
        access to the source files, and if you want to make sure the software on
        your terminal lives up to its privacy and security claims, the source is
        freely available to use, read, or modify.
      </p>
      <p>
        <a rel="prefetch" href="./free-open-source">Learn more →</a>
      </p>
    </TalkingPointContent>
  </TalkingPointContainer>

  <PartnerContainer />
</div>

<style>
  :global(.site a) {
    color: #72bbd9;
  }
  .site {
    margin-left: auto;
    margin-right: auto;
    max-width: 1024px;
    padding-left: 2em;
    padding-right: 2em;
    padding-bottom: 1em;
  }

  .hero {
    margin-top: 3em;
    margin-bottom: 3em;
    background-color: aqua;
  }

  .hero .container {
    background-color: aquamarine;
    display: grid;
    grid-template-columns: 400px auto;
    grid-template-rows: auto;
  }

  @media only screen and (max-device-width: 900px) and (orientation: portrait) {
    .hero {
      margin-top: 1em;
      margin-bottom: 1em;
    }

    .hero .container {
      grid-template-columns: auto;
      grid-template-rows: 260px auto;
    }
  }
</style>