<script setup>
  import PageLead from '../components/blocks/PageLead.vue';
  import MediaBlock from '../components/Sections/MediaBlock.vue';
  import IntroBlock from '../components/Sections/IntroBlock.vue'
  import SubscribeBlock from '../components/blocks/SubscribeBlock.vue';
  import ShopList from '../components/Sections/Shop.vue';
  import VideoList from '../components/listings/VideoList.vue';
</script>

<template>
  <main class="pt-4" style="margin:auto;width:95%;">
    <div class="text-center">
      <h1 class="text-2xl">Canin Carlos</h1>
      <!-- <h2 class="text-xl">the digital home of <a href="//canin.dreamfreely.org/about"></a>.</h2> -->
      <img src="../assets/cover.png" width="95%" class="pt-4 m-auto" />

      <PageLead class="p-4 m-4" />
      <span class="text-xl mt-8">
        <a href="https://canin.dreamfreely.org">Blog</a> 🍃 
        <a href="https://shop.dreamfreely.org">Shop</a> 🍃
        <a href="https://digisnaxx.com">Snaxx</a>
      </span>
      
      <IntroBlock class="py-4" />
      <span class="text-lg mt-8">
        <a href="https://bsky.app/profile/dreamfreely.org">Bluesky</a> 🍃 
        <a href="https://youtube.com/@canincarlos">YouTube</a> 🍃
        <a href="https://linkedin.com/in/canincarlos">LinkedIn</a>
      </span>
    </div>

    <ShopList class="p-8" />
    <MediaBlock />
    <VideoList class="p-8" />

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

  </main>
  
</template>