feat(frontend): add react spa with wishlist flows and public profile

2026-04-23 16:05:27 +03:00
parent 5f6a551b6c
commit 00f01611ed
44 changed files with 2166 additions and 0 deletions
--- a/apps/frontend/src/styles/global.css
+++ b/apps/frontend/src/styles/global.css
@@ -0,0 +1,102 @@
+@import './tokens.css';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html,
+  body,
+  #root {
+    height: 100%;
+  }
+  body {
+    @apply bg-background text-ink font-sans antialiased;
+    background-image:
+      radial-gradient(1200px 600px at 0% -10%, rgba(244, 192, 78, 0.18), transparent 60%),
+      radial-gradient(900px 500px at 100% 110%, rgba(226, 120, 150, 0.18), transparent 55%);
+    background-attachment: fixed;
+  }
+  h1,
+  h2,
+  h3 {
+    @apply font-display text-ink;
+    letter-spacing: -0.01em;
+  }
+  a {
+    @apply transition-colors;
+  }
+}
+
+@layer components {
+  /* BEM-friendly classes: kept parallel to Tailwind utilities where possible. */
+  .wish-card {
+    @apply relative flex flex-col overflow-hidden rounded-lg bg-surface shadow-card transition-transform duration-200;
+  }
+  .wish-card:hover {
+    transform: translateY(-2px);
+  }
+  .wish-card--completed {
+    filter: saturate(0.45) brightness(0.98);
+  }
+  .wish-card--completed .wish-card__title {
+    text-decoration: line-through;
+    text-decoration-thickness: 2px;
+    text-decoration-color: rgb(var(--color-muted) / 0.6);
+  }
+
+  .wish-card__image-wrap {
+    @apply relative aspect-[4/3] bg-surface-muted overflow-hidden;
+  }
+  .wish-card__image {
+    @apply h-full w-full object-cover;
+  }
+  .wish-card__body {
+    @apply flex flex-col gap-2 p-4;
+  }
+  .wish-card__title {
+    @apply text-lg font-semibold leading-snug text-ink;
+  }
+  .wish-card__price {
+    @apply text-sm font-medium text-muted;
+  }
+  .wish-card__comment {
+    @apply text-sm text-muted line-clamp-2;
+  }
+
+  .wish-badge {
+    @apply inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-semibold uppercase tracking-wide;
+  }
+  .wish-badge--new {
+    @apply bg-primary text-primary-foreground;
+  }
+  .wish-badge--completed {
+    @apply bg-ink/5 text-ink;
+  }
+  .wish-badge--archived {
+    @apply bg-warning/20 text-warning;
+  }
+  .wish-badge--deleted {
+    @apply bg-danger/15 text-danger;
+  }
+
+  .field {
+    @apply flex flex-col gap-1.5;
+  }
+  .field__label {
+    @apply text-sm font-medium text-ink;
+  }
+  .field__input,
+  .field__textarea,
+  .field__select {
+    @apply w-full rounded-md border border-border bg-surface px-3 py-2.5 text-ink outline-none transition-all duration-150 placeholder:text-muted focus:border-primary focus:shadow-[var(--shadow-focus)];
+  }
+  .field__error {
+    @apply text-xs text-danger;
+  }
+}
+
+@layer utilities {
+  .container-page {
+    @apply mx-auto w-full max-w-6xl px-4 sm:px-6 lg:px-8;
+  }
+}