<script setup>
  import BlogLead from '../components/blocks/BlogLead.vue';
  import MediaBlock from '../components/blocks/MediaBlock.vue';
  import IntroBlock from '../components/blocks/IntroBlock.vue'
  import SubscribeBlock from '../components/blocks/SubscribeBlock.vue';
  import ShopList from '../components/Shop.vue';
</script>

<template>
  <main class="pt-4" style="margin:auto;width:85%;">
    <div class="text-center">
      <h1 class="text-2xl">Welcome to DigiSnaxx</h1>
      <h2 class="text-xl">a <a href="//www.dreamfreely.org">DreamFreely</a> Playground</h2>
      <img src="../assets/cover.png" width="95%" class="lg:hidden pt-4 m-auto" />
      <BlogLead class="p-2" />
      <span class="text-xl">
        <a href="https://canin.dreamfreely.org">Blog</a> 🍃 
        <a href="https://shop.dreamfreely.org">Shop</a>
      </span>
      <IntroBlock class="py-4" />
    </div>

    <MediaBlock />
    <ShopList />
    <div class="text-center p-4">
      DreamFreely &#169; 2025
    </div>

  </main>
  
</template>