refactor: enhance ProjectBudgetEstimate component layout, improve budget estimation calculations, and update CSS for better visual consistency and dark mode support

This commit is contained in:
Jennie Robinson Faber 2025-09-10 21:54:28 +01:00
parent f073f91569
commit b6e8d3b7ec
6 changed files with 502 additions and 358 deletions

View file

@ -33,7 +33,8 @@
</h3>
<p class="text-neutral-700 dark:text-neutral-200 mb-4">
A Miro template to help your team align on shared goals and
values through collaborative exercises.
values through collaborative exercises. Make sure to do this
WITH your full team!
</p>
<a
href="https://miro.com/miroverse/goals-values-exercise/"
@ -92,64 +93,6 @@
</div>
</div>
</section>
<!-- PDF Downloads Section -->
<section>
<h2
class="text-2xl font-semibold text-neutral-900 dark:text-white mb-4">
Wizard PDF Downloads
</h2>
<p class="text-neutral-700 dark:text-neutral-200 mb-4">
Download PDF versions of our wizards for offline use or printing.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div
v-for="pdf in pdfDownloads"
:key="pdf.id"
class="template-card">
<div
class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
<div
class="relative bg-white dark:bg-neutral-950 border border-black dark:border-white p-6">
<div class="flex items-start justify-between mb-2">
<h3
class="text-lg font-semibold text-neutral-900 dark:text-white">
{{ pdf.name }}
</h3>
<span
class="text-xs text-neutral-600 dark:text-neutral-400 bg-neutral-100 dark:bg-neutral-800 px-2 py-1 rounded">
PDF
</span>
</div>
<p
class="text-sm text-neutral-700 dark:text-neutral-200 mb-4">
{{ pdf.description }}
</p>
<button
:disabled="!pdf.available"
:class="[
'inline-flex items-center px-4 py-2 font-medium transition-opacity',
pdf.available
? 'bg-black dark:bg-white text-white dark:text-black hover:opacity-90'
: 'bg-neutral-200 dark:bg-neutral-800 text-neutral-500 dark:text-neutral-500 cursor-not-allowed',
]">
<svg
class="w-4 h-4 mr-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
{{ pdf.available ? "Download" : "Coming Soon" }}
</button>
</div>
</div>
</div>
</section>
</div>
</div>
</div>