<script>
  import Layout from "$/client/Layout.svelte";
  import Blockstart from "$/client/components/Blockstart.svelte";
  import Icon from "$/client/components/Icon.svelte";
  import { onMount } from "svelte";
  import { user } from "$/client/stores.js";

  let activate_warning = false;

  onMount(() => {
    setTimeout(() => activate_warning = true, 1000);
  });
</script>

<style>
</style>

<Layout testid="home-page" fullwidth={ true } authenticated={ true }>
  <Blockstart>
    <block class="center center-text" style="--value: 1; --text: 5; --h: 600px; --w: 100%;">
    <h1>A New Way to Learn</h1>
    <p>Sustainable cornhole tofu put a bird on it, normcore pitchfork locavore quinoa cardigan hashtag.</p>
    <button>Create Account</button>
  </block>

  <block class="horizontal">
    <left>
      <h6>Start Exploring <Icon name="graduation-cap" size="48" /></h6>
      <p>PBR&B man bun same taiyaki synth disrupt. Keytar mixtape salvia vibecession cronut knausgaard. Fashion axe single-origin coffee fanny pack.</p>
    </left>

    <right>
      <shape style="--w: 200px; --h: 250px;">Screen</shape>
    </right>
  </block>

  <block class="horizontal" style="--value: 8">

  <left>
    <card style="border: none; box-shadow: none;">
      <top>
        <Icon name="user" size="48" /> 
        <Icon name="user" size="48" /> 
        <Icon name="user" size="48" /> 
      </top>

      <middle>
        <h6>Random Header</h6>
        <p>Hella synth lyft fit blue bottle. Letterpress cornhole meditation, mlkshk offal mukbang portland plaid cloud bread.</p>
      </middle>

      <bottom>
        <a href="/">Questions</a>
      </bottom>
    </card>
  </left>

  <right>
    <card style="border: none; box-shadow: none;">
      <top>
        <Icon name="user" size="48" /> 
        <Icon name="user" size="48" /> 
        <Icon name="user" size="48" /> 
      </top>

      <middle>
        <h6>Random Header</h6>
        <p>Hella synth lyft fit blue bottle. Letterpress cornhole meditation, mlkshk offal mukbang portland plaid cloud bread.</p>
      </middle>

      <bottom>
        <a href="/">Questions</a>
      </bottom>
    </card>
  </right>

  </block>


  <block class="center center-text" style="--value: 8;">
    <card style="border: none; box-shadow: none;">
      <top>
      <Icon name="code-2" size="48" />
      </top>

      <middle>
        <h6>Developer</h6>
        <p>Hella synth lyft fit blue bottle. Letterpress cornhole meditation, mlkshk offal mukbang portland plaid cloud bread.</p>
      </middle>
    </card>
  </block>

  <block class="horizontal" style="--value: 8">
    <shape style="--w: 600px; --h: 400px">
      CODE
    </shape>

    <list>
      <ul>
        <li>Linked List</li>
        <li>Linked List</li>
        <li>Linked List</li>
        <li>Linked List</li>
      </ul>
    </list>

  </block>

  <block>
    <div class="center">
      <Icon name="trash-2" size="48"/>
    </div>

    <div class="center">
      <h6>Made with <Icon name="trash" /> in SF</h6>

      <p>Cornhole narwhal blackbird spyplane, master cleanse intelligentsia yuccie waistcoat jianbing butcher. Roof party knausgaard man braid mukbang etsy fingerstache.</p>

      <logos class="horizontal center center-text" style="font-size: 1.5em; font-weight: 600">
        <span>facebook</span>
        <span>leap</span>
        <span>facebook</span>
        <span>leap</span>
        <span>facebook</span>
        <span>leap</span>
        <span>facebook</span>
        <span>leap</span>
        <span>facebook</span>
        <span>facebook</span>
        <span>leap</span>
        <span>leap</span>
      </logos>

      <hr>


      <p class="center-text">Banh mi four dollar toast next level tote bag letterpress kickstarter quinoa.</p>

      <a href="/">Join Our Team</a>
  </block>
  </Blockstart>
</Layout>
