<script>
  import FemtoStarLogo from "./FemtoStarLogo.svelte";
</script>

<div class="femtoHeader">
  <FemtoStarLogo />
  <h2>Satellite communications, done differently.</h2>

  <div class="introText">
    <p>
      The FemtoStar Project is a global community developing a satellite
      constellation for secure, open, and private communications - anywhere on
      planet Earth.
    </p>
  </div>
</div>

<style>
  div {
    display: flex;
    width: 100%;
    background-color: #00111d;
    color: #ffffff;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  svg {
    padding-top: 1em;
  }

  h2 {
    margin-top: 0.5em;
  }

  .introText {
    width: 100%;
    color: #ffffff;
  }

  p {
    max-width: 512px;
  }
</style>
