fregat/web-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign client cabinet UI with capsule nav and card layouts

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-04-01 18:59:20 +07:00
parent 5b5f6250d3
commit b4537c1483
9 changed files with 598 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
app/pages/index.vue
View File

@@ -1,12 +1,27 @@
<template>
<section class="space-y-6">
<h1 class="text-3xl font-bold">Личный кабинет клиента</h1>
<p class="text-base-content/80">Основные действия по спецификации: витрина, корзина, заказы и профиль с каналами уведомлений.</p>
<div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
<NuxtLink to="/products" class="card bg-base-100 border border-base-300 shadow-sm"><div class="card-body"><h2 class="card-title">Товары</h2></div></NuxtLink>
<NuxtLink to="/cart" class="card bg-base-100 border border-base-300 shadow-sm"><div class="card-body"><h2 class="card-title">Корзина</h2></div></NuxtLink>
<NuxtLink to="/orders" class="card bg-base-100 border border-base-300 shadow-sm"><div class="card-body"><h2 class="card-title">Заказы</h2></div></NuxtLink>
<NuxtLink to="/profile" class="card bg-base-100 border border-base-300 shadow-sm"><div class="card-body"><h2 class="card-title">Профиль</h2></div></NuxtLink>
<div class="surface-card rounded-[30px] p-6 md:p-8">
<h1 class="text-3xl font-extrabold text-[#0f2f20] md:text-4xl">Личный кабинет клиента</h1>
<p class="mt-2 max-w-2xl text-sm text-[#28543f]/80 md:text-base">
Быстрый доступ к каталогу, корзине, заказам и профилю в новом интерфейсе.
</p>
<div class="mt-6 grid gap-4 md:grid-cols-2 xl:grid-cols-5">
<NuxtLink to="/products" class="rounded-2xl border border-[#d2e9db] bg-white/80 p-4 transition hover:-translate-y-0.5 hover:shadow-md">
<h2 class="font-bold text-[#123824]">Каталог</h2>
</NuxtLink>
<NuxtLink to="/cart" class="rounded-2xl border border-[#d2e9db] bg-white/80 p-4 transition hover:-translate-y-0.5 hover:shadow-md">
<h2 class="font-bold text-[#123824]">Корзина</h2>
</NuxtLink>
<NuxtLink to="/orders" class="rounded-2xl border border-[#d2e9db] bg-white/80 p-4 transition hover:-translate-y-0.5 hover:shadow-md">
<h2 class="font-bold text-[#123824]">Мои заказы</h2>
</NuxtLink>
<NuxtLink to="/profile" class="rounded-2xl border border-[#d2e9db] bg-white/80 p-4 transition hover:-translate-y-0.5 hover:shadow-md">
<h2 class="font-bold text-[#123824]">Профиль</h2>
</NuxtLink>
<NuxtLink to="/notifications" class="rounded-2xl border border-[#d2e9db] bg-white/80 p-4 transition hover:-translate-y-0.5 hover:shadow-md">
<h2 class="font-bold text-[#123824]">Уведомления</h2>
</NuxtLink>
</div>
</div>
</section>
</template>