refactor: update app.vue and various components to enhance UI consistency, replace color classes for improved accessibility, and refine layout for better user experience
This commit is contained in:
parent
7b4fb6c2fd
commit
24e8b7a3a8
41 changed files with 2395 additions and 1603 deletions
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div class="min-h-screen bg-gray-50 py-8">
|
||||
<div class="min-h-screen bg-neutral-50 py-8">
|
||||
<div class="container mx-auto max-w-4xl px-4">
|
||||
<!-- Header -->
|
||||
<div class="mb-8 text-center">
|
||||
<h1 class="text-4xl font-bold mb-4">Budget Planning Help</h1>
|
||||
<p class="text-xl text-gray-600">Learn how to build a sustainable financial plan for your co-op or studio</p>
|
||||
<p class="text-xl text-neutral-600">Learn how to build a sustainable financial plan for your co-op or studio</p>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
|
|
@ -15,19 +15,19 @@
|
|||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<a href="#revenue-diversification" class="block p-3 bg-blue-50 border-2 border-blue-200 rounded hover:bg-blue-100 transition-colors">
|
||||
<span class="font-semibold">Revenue Diversification</span>
|
||||
<p class="text-sm text-gray-600">How to develop multiple income streams</p>
|
||||
<p class="text-sm text-neutral-600">How to develop multiple income streams</p>
|
||||
</a>
|
||||
<a href="#budget-categories" class="block p-3 bg-green-50 border-2 border-green-200 rounded hover:bg-green-100 transition-colors">
|
||||
<span class="font-semibold">Budget Categories</span>
|
||||
<p class="text-sm text-gray-600">Understanding revenue and expense types</p>
|
||||
<p class="text-sm text-neutral-600">Understanding revenue and expense types</p>
|
||||
</a>
|
||||
<a href="#planning-tips" class="block p-3 bg-yellow-50 border-2 border-yellow-200 rounded hover:bg-yellow-100 transition-colors">
|
||||
<span class="font-semibold">Planning Tips</span>
|
||||
<p class="text-sm text-gray-600">Best practices for financial planning</p>
|
||||
<p class="text-sm text-neutral-600">Best practices for financial planning</p>
|
||||
</a>
|
||||
<a href="#getting-started" class="block p-3 bg-purple-50 border-2 border-purple-200 rounded hover:bg-purple-100 transition-colors">
|
||||
<span class="font-semibold">Getting Started</span>
|
||||
<p class="text-sm text-gray-600">Step-by-step setup guide</p>
|
||||
<p class="text-sm text-neutral-600">Step-by-step setup guide</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue