designtopack/src/views/DesignToLight.vue

<template>
  <!-- TODO: remplacer style par :style="'--background: url(\'"+page.content.background.url+'\')'" -->
  <article id="dtl-page" class="bg-black rounded-xl p-64" style="--background: url('https://plus.unsplash.com/premium_photo-1675355675464-2deabb1f893b?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')">
    <header class="flex flex-col justify-center | text-center text-white | flow" style="--flow-space: 2rem">
      <hgroup class="flow" data-icon="leaf-thin">
        <h1 class="text-xl font-serif">{{ page.content.sectiontitle }}</h1>
        <p class="intro" v-html="page.content.introduction"></p>
      </hgroup>
      <div class="ctas | flex" style="--column-gap: 1rem">
        <button class="btn btn--white-10" @click="isDialogOpen = true">Optimiser un projet existant</button>
        <button class="btn btn--white">Créer un nouveau projet avec DTL</button>
      </div>
    </header>
    <div class="presentation | mt-64 flow">
      <div v-for="row in page.presentation" :key="row.id" class="flex">
        <div v-for="column in row.columns" :key="column.id" class="flex-1 | flex flex-col" style="min-width: 16.5rem">
          <div v-for="block in column.blocks" :key="block.id" class="card w-full | bg-white-10 text-grey-200">
            <img :src="block.content.cover.url" alt="" width="" height="" class="rounded-md" />
              <h2 class="font-serif text-lg text-white">
                {{ block.content.title }}
              </h2>
              <div v-html="block.content.text"></div>
          </div>
        </div>
      </div>
    </div>
  </article>

  <OptimizationRequestDialog
    v-if="isDialogOpen"
    @close="isDialogOpen = false"
  />
</template>
<script setup>
import { storeToRefs } from "pinia";
import { usePageStore } from "../stores/page";
import OptimizationRequestDialog from "../components/design-to-light/OptimizationRequestDialog.vue";
import { ref } from "vue";

const { page } = storeToRefs(usePageStore());

const isDialogOpen = ref(false);
</script>