тут нихуя не работает, ебаный рот этого казино

2025-01-08 15:14:15 +03:00
parent 847102e843
commit 8c4c3f2e38
56 changed files with 1448 additions and 267 deletions
--- a/frontend/style/NodeJS/.gitignore
+++ b/frontend/style/NodeJS/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/frontend/style/NodeJS/Product
+++ b/frontend/style/NodeJS/Product
--- a/frontend/style/NodeJS/README.md
+++ b/frontend/style/NodeJS/README.md
@@ -0,0 +1,8 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
--- a/frontend/style/NodeJS/eslint.config.js
+++ b/frontend/style/NodeJS/eslint.config.js
@@ -0,0 +1,38 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    settings: { react: { version: '18.3' } },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...react.configs['jsx-runtime'].rules,
+      ...reactHooks.configs.recommended.rules,
+      'react/jsx-no-target-blank': 'off',
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]
--- a/frontend/style/NodeJS/index.html
+++ b/frontend/style/NodeJS/index.html
@@ -0,0 +1,12 @@
+<!-- public/index.html -->
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Marketplace</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script src="src/main.jsx" type="module"></script>
+</body>
+</html>
--- a/frontend/style/NodeJS/package-lock.json
+++ b/frontend/style/NodeJS/package-lock.json
--- a/frontend/style/NodeJS/package.json
+++ b/frontend/style/NodeJS/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "nodejs",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@clerk/clerk-react": "^5.21.0",
+    "@coreui/react": "^5.4.1",
+    "@radix-ui/react-accordion": "^1.2.2",
+    "@radix-ui/react-checkbox": "^1.1.3",
+    "@radix-ui/react-navigation-menu": "^1.2.3",
+    "@radix-ui/react-slider": "^1.2.2",
+    "lucide-react": "^0.469.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^7.1.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.17.0",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "globals": "^15.14.0",
+    "vite": "^6.0.5"
+  }
+}
--- a/frontend/style/NodeJS/public/vite.svg
+++ b/frontend/style/NodeJS/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/frontend/style/NodeJS/src/App.css
+++ b/frontend/style/NodeJS/src/App.css
@@ -0,0 +1,28 @@
+body {
+  margin: 0;
+  font-family: Arial, sans-serif;
+  background: linear-gradient(135deg, #8e44ad, #ffffff);
+  color: #ffffff;
+}
+
+.app {
+  text-align: center;
+}
+
+.header {
+  padding: 30px;
+  background-color: #6c3483;
+}
+
+header h1 {
+  margin: 0;
+  font-size: 2.5rem;
+}
+
+.globe-container {
+  width: 100%;
+  height: 80vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
--- a/frontend/style/NodeJS/src/App.jsx
+++ b/frontend/style/NodeJS/src/App.jsx
@@ -0,0 +1,11 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+import "./index.css";
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById("root")
+);
--- a/frontend/style/NodeJS/src/assets/react.svg
+++ b/frontend/style/NodeJS/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/frontend/style/NodeJS/src/index.css
+++ b/frontend/style/NodeJS/src/index.css
@@ -0,0 +1,13 @@
+body {
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+      sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  
+  code {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+      monospace;
+  }
--- a/frontend/style/NodeJS/src/main.jsx
+++ b/frontend/style/NodeJS/src/main.jsx
@@ -0,0 +1,11 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+import "./index.css";
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById("root")
+);
--- a/frontend/style/NodeJS/styles.css
+++ b/frontend/style/NodeJS/styles.css
@@ -0,0 +1,113 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f9f9f9;
+    margin: 0;
+    padding: 0;
+    color: #333;
+  }
+  
+  .app {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+  }
+  
+  .header {
+    background-color: #0077b6;
+    color: white;
+    padding: 1rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .header .logo {
+    font-size: 2rem;
+    font-weight: bold;
+  }
+  
+  .nav-links {
+    list-style: none;
+    display: flex;
+    gap: 1rem;
+  }
+  
+  .nav-links li a {
+    color: white;
+    text-decoration: none;
+    font-size: 1rem;
+  }
+  
+  .nav-links li a:hover {
+    text-decoration: underline;
+  }
+  
+  .product-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    padding: 2rem;
+    gap: 2rem;
+  }
+  
+  .product-card {
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    width: 200px;
+    text-align: center;
+    padding: 1rem;
+    transition: transform 0.3s ease;
+  }
+  
+  .product-card:hover {
+    transform: scale(1.05);
+  }
+  
+  .product-card img {
+    width: 100%;
+    height: 200px;
+    object-fit: cover;
+    border-radius: 8px;
+  }
+  
+  .product-card button {
+    background-color: #0077b6;
+    color: white;
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+  
+  .product-card button:hover {
+    background-color: #005f80;
+  }
+  
+  .footer {
+    background-color: #0077b6;
+    color: white;
+    padding: 1rem;
+    text-align: center;
+  }
+  
+  .footer-links {
+    list-style: none;
+    padding: 0;
+    margin: 1rem 0;
+  }
+  
+  .footer-links li {
+    display: inline;
+    margin: 0 1rem;
+  }
+  
+  .footer-links li a {
+    color: white;
+    text-decoration: none;
+  }
+  
+  .footer-links li a:hover {
+    text-decoration: underline;
+  }
+  
--- a/frontend/style/NodeJS/vite.config.js
+++ b/frontend/style/NodeJS/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
--- a/frontend/style/app/api/cart/route.ts
+++ b/frontend/style/app/api/cart/route.ts
@@ -0,0 +1,19 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { getCart, saveCart, clearCart, CartItem } from '@/lib/cartStorage'
+
+export async function GET() {
+  const cart = getCart()
+  return NextResponse.json(cart)
+}
+
+export async function POST(request: NextRequest) {
+  const cartItems: CartItem[] = await request.json()
+  saveCart(cartItems)
+  return NextResponse.json({ message: 'Cart updated successfully' })
+}
+
+export async function DELETE() {
+  clearCart()
+  return NextResponse.json({ message: 'Cart cleared successfully' })
+}
+
--- a/frontend/style/app/api/disable-preview/route.ts
+++ b/frontend/style/app/api/disable-preview/route.ts
@@ -0,0 +1,12 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { draftMode } from 'next/headers'
+
+export async function GET(request: NextRequest) {
+  const { searchParams } = new URL(request.url)
+  const id = searchParams.get('id')
+
+  draftMode().disable()
+
+  return NextResponse.redirect(new URL(`/product/${id}`, request.url))
+}
+
--- a/frontend/style/app/api/preview/route.ts
+++ b/frontend/style/app/api/preview/route.ts
@@ -0,0 +1,23 @@
+import { NextRequest, NextResponse } from 'next/server'
+
+export async function GET(request: NextRequest) {
+  const { searchParams } = new URL(request.url)
+  const secret = searchParams.get('secret')
+  const id = searchParams.get('id')
+
+  // Check the secret and next parameters
+  // This secret should be only known to this API route and the CMS
+  if (secret !== process.env.PREVIEW_SECRET || !id) {
+    return NextResponse.json({ message: 'Invalid token' }, { status: 401 })
+  }
+
+  // Enable Preview Mode by setting the cookies
+  const res = NextResponse.next()
+  res.cookies.set('__prerender_bypass', process.env.PRERENDER_BYPASS_TOKEN || '')
+  res.cookies.set('__next_preview_data', process.env.PREVIEW_DATA_TOKEN || '')
+
+  // Redirect to the path from the fetched post
+  // We don't redirect to searchParams.slug as that might lead to open redirect vulnerabilities
+  return NextResponse.redirect(new URL(`/product/${id}`, request.url))
+}
+
--- a/frontend/style/app/cart/page.tsx
+++ b/frontend/style/app/cart/page.tsx
@@ -4,17 +4,12 @@ import { CartSummary } from "@/components/cart-summary"
 export default function CartPage() {
  return (
    <div className="container mx-auto px-4 py-8">
-      <div className="flex gap-8">
+      <h1 className="text-2xl font-bold mb-6">Корзина</h1>
+      <div className="flex flex-col md:flex-row gap-8">
        <div className="flex-1">
-          <div className="flex items-center justify-between mb-6">
-            <h1 className="text-2xl font-bold">Корзина</h1>
-            <button className="text-blue-600 hover:underline">
-              Поделиться
-            </button>
-          </div>
          <CartItems />
        </div>
-        <div className="w-80">
+        <div className="w-full md:w-80">
          <CartSummary />
        </div>
      </div>
--- a/frontend/style/app/favicon.ico
+++ b/frontend/style/app/favicon.ico
--- a/frontend/style/app/favorites/page.tsx
+++ b/frontend/style/app/favorites/page.tsx
@@ -0,0 +1,10 @@
+import { FavoriteItems } from "@/components/favorite-items"
+
+export default function FavoritesPage() {
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <FavoriteItems />
+    </div>
+  )
+}
+
--- a/frontend/style/app/fonts/GeistMonoVF.woff
+++ b/frontend/style/app/fonts/GeistMonoVF.woff
--- a/frontend/style/app/fonts/GeistVF.woff
+++ b/frontend/style/app/fonts/GeistVF.woff
--- a/frontend/style/app/globals.css
+++ b/frontend/style/app/globals.css
@@ -1,78 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-body {
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-}
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-    --radius: 0.5rem;
-  }
-  .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
--- a/frontend/style/app/layout.tsx
+++ b/frontend/style/app/layout.tsx
@@ -1,35 +1,35 @@
-import type { Metadata } from "next";
-import localFont from "next/font/local";
-import "./globals.css";
+import type { Metadata } from "next"
+import { Inter } from 'next/font/google'
+import { Header } from "@/components/header"
+import { CartProvider } from "@/contexts/cart-context"
+import { FavoritesProvider } from "@/contexts/favorites-context"
+import { AuthProvider } from "@/contexts/auth-context"

-const geistSans = localFont({
-  src: "./fonts/GeistVF.woff",
-  variable: "--font-geist-sans",
-  weight: "100 900",
-});
-const geistMono = localFont({
-  src: "./fonts/GeistMonoVF.woff",
-  variable: "--font-geist-mono",
-  weight: "100 900",
-});
+const inter = Inter({ subsets: ["latin"] })

 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
+  title: "Online Store",
+  description: "E-commerce platform",
+}

 export default function RootLayout({
  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
+}: {
+  children: React.ReactNode
+}) {
  return (
    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
+      <body className={inter.className}>
+        <AuthProvider>
+          <CartProvider>
+            <FavoritesProvider>
+              <Header />
+              <main className="min-h-screen bg-gray-50 px-4 sm:px-6 lg:px-8">{children}</main>
+            </FavoritesProvider>
+          </CartProvider>
+        </AuthProvider>
      </body>
    </html>
-  );
+  )
 }
+
--- a/frontend/style/app/login/page.tsx
+++ b/frontend/style/app/login/page.tsx
@@ -0,0 +1,52 @@
+"use client"
+
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { useAuth } from "@/contexts/auth-context"
+
+export default function LoginPage() {
+  const [email, setEmail] = useState("")
+  const [password, setPassword] = useState("")
+  const router = useRouter()
+  const { login } = useAuth()
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    // In a real application, you would validate credentials here
+    login()
+    router.push("/cart")
+  }
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <h1 className="text-2xl font-bold mb-6">Войти</h1>
+      <form onSubmit={handleSubmit} className="space-y-4 max-w-md mx-auto">
+        <div>
+          <Label htmlFor="email">Email</Label>
+          <Input
+            type="email"
+            id="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+          />
+        </div>
+        <div>
+          <Label htmlFor="password">Пароль</Label>
+          <Input
+            type="password"
+            id="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+          />
+        </div>
+        <Button type="submit" className="w-full">Войти</Button>
+      </form>
+    </div>
+  )
+}
+
--- a/frontend/style/app/page.tsx
+++ b/frontend/style/app/page.tsx
@@ -1,23 +1,21 @@
 import { ProductGrid } from "@/components/product-grid"
-import { Header } from "@/components/header"
-
 import { Banner } from "@/components/banner"
 import { ProductFilters } from "@/components/product-filters"
 import { Footer } from "@/components/footer"
+import { SAMPLE_PRODUCTS } from "@/lib/sample-products"

 export default function HomePage() {
  return (
    <>
-     
-      <div className="container mx-auto px-4 py-8">
-        <Header/>
-
+      <div className="container mx-auto py-8">
        <Banner />
-        <div className="my-8 flex gap-8">
-          <ProductFilters />
+        <div className="my-8 flex flex-col md:flex-row gap-8">
+          <div className="w-full md:w-64">
+            <ProductFilters />
+          </div>
          <div className="flex-1">
            <h2 className="text-2xl font-bold mb-6">Специальные предложения!</h2>
-            <ProductGrid />
+            <ProductGrid products={SAMPLE_PRODUCTS} />
          </div>
        </div>
      </div>
--- a/frontend/style/app/product/[id]/page.tsx
+++ b/frontend/style/app/product/[id]/page.tsx
@@ -0,0 +1,50 @@
+import { notFound } from 'next/navigation'
+import { ProductDetail } from "@/components/product-detail"
+import { SAMPLE_PRODUCTS } from "@/lib/sample-products"
+import { draftMode } from 'next/headers'
+
+async function getProduct(id: string, isDraft: boolean) {
+  // In a real application, you would fetch the product from an API or database
+  // For this example, we'll use the SAMPLE_PRODUCTS
+  const product = SAMPLE_PRODUCTS.find(p => p.id === parseInt(id))
+
+  if (!product) {
+    return null
+  }
+
+  if (isDraft) {
+    // Simulate draft data
+    return {
+      ...product,
+      title: `[Draft] ${product.title}`,
+      price: product.price * 0.9, // 10% discount in draft mode
+    }
+  }
+
+  return product
+}
+
+export default async function ProductPage({ params }: { params: { id: string } }) {
+  const draftModeData = draftMode()
+  const isDraftMode = draftModeData ? draftModeData.isEnabled : false
+  const product = await getProduct(params.id, isDraftMode)
+
+  if (!product) {
+    notFound()
+  }
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <ProductDetail product={product} />
+      {isDraftMode && (
+        <div className="fixed bottom-0 left-0 w-full bg-yellow-400 text-black p-2 text-center">
+          Preview Mode Enabled - {' '}
+          <a className="underline" href={`/api/disable-preview?id=${params.id}`}>
+            Exit Preview Mode
+          </a>
+        </div>
+      )}
+    </div>
+  )
+}
+
--- a/frontend/style/app/profile/page.tsx
+++ b/frontend/style/app/profile/page.tsx
@@ -0,0 +1,11 @@
+import { UserProfile } from "@/components/user-profile"
+
+export default function ProfilePage() {
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <h1 className="text-2xl font-bold mb-6">Личный кабинет</h1>
+      <UserProfile />
+    </div>
+  )
+}
+
--- a/frontend/style/app/register/page.tsx
+++ b/frontend/style/app/register/page.tsx
@@ -0,0 +1,11 @@
+import { RegisterForm } from "@/components/register-form"
+
+export default function RegisterPage() {
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <h1 className="text-2xl font-bold mb-6">Регистрация</h1>
+      <RegisterForm />
+    </div>
+  )
+}
+
--- a/frontend/style/app/search/page.tsx
+++ b/frontend/style/app/search/page.tsx
@@ -0,0 +1,25 @@
+import { ProductGrid } from "@/components/product-grid"
+import { SAMPLE_PRODUCTS } from "@/lib/sample-products"
+
+export default function SearchPage({
+  searchParams
+}: {
+  searchParams: { q: string }
+}) {
+  const searchTerm = searchParams.q || ''
+  const filteredProducts = SAMPLE_PRODUCTS.filter(product => 
+    product.title.toLowerCase().includes(searchTerm.toLowerCase())
+  )
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <h1 className="text-2xl font-bold mb-6">Результаты поиска для &quot;{searchTerm}&quot;</h1>
+      {filteredProducts.length > 0 ? (
+        <ProductGrid products={filteredProducts} />
+      ) : (
+        <p className="text-center text-gray-500">По вашему запросу ничего не найдено</p>
+      )}
+    </div>
+  )
+}
+
--- a/frontend/style/components/banner.tsx
+++ b/frontend/style/components/banner.tsx
@@ -15,7 +15,7 @@ export function Banner() {
          <div className="max-w-lg text-white">
            <h1 className="text-4xl font-bold mb-4">САМОЕ ЗАВЕТНОЕ!</h1>
            <p className="text-xl mb-6">
-              Исполняйте мечты с Eternos
+              Исполняйте мечты с Ozon Рассрочкой
            </p>
            <Button variant="secondary" size="lg">
              Подробнее
--- a/frontend/style/components/cart-items.tsx
+++ b/frontend/style/components/cart-items.tsx
@@ -5,25 +5,12 @@ import { Checkbox } from "./ui/checkbox"
 import { Button } from "./ui/button"
 import { Minus, Plus, Heart, Trash } from 'lucide-react'
 import Image from "next/image"
-
-const SAMPLE_ITEMS = [
-  {
-    id: 1,
-    name: "Бумага офисная SvetoCopy, 500 листов, А4",
-    price: 352,
-    oldPrice: 399,
-    image: "/placeholder.svg",
-  },
-  {
-    id: 2,
-    name: "Глюкометр Диаконт Концепт + тест-полоски",
-    price: 1450,
-    oldPrice: 1599,
-    image: "/placeholder.svg",
-  }
-]
+import { useCart } from "@/contexts/cart-context"
+import { useFavorites } from "@/contexts/favorites-context"

 export function CartItems() {
+  const { items, removeFromCart, addToCart, removeAllFromCart, updateQuantity } = useCart()
+  const { addToFavorites, removeFromFavorites, isFavorite } = useFavorites()
  const [selectedItems, setSelectedItems] = useState<number[]>([])

  const toggleItem = (id: number) => {
@@ -34,13 +21,25 @@ export function CartItems() {
    )
  }

+  const handleToggleFavorite = (item: typeof items[0]) => {
+    if (isFavorite(item.id)) {
+      removeFromFavorites(item.id)
+    } else {
+      addToFavorites(item)
+    }
+  }
+
+  const handleUpdateQuantity = (id: number, newQuantity: number) => {
+    updateQuantity(id, newQuantity)
+  }
+
  return (
    <div className="space-y-4">
      <div className="flex items-center gap-2 mb-4">
        <Checkbox 
-          checked={selectedItems.length === SAMPLE_ITEMS.length}
+          checked={selectedItems.length === items.length}
          onCheckedChange={(checked) => {
-            setSelectedItems(checked ? SAMPLE_ITEMS.map(item => item.id) : [])
+            setSelectedItems(checked ? items.map(item => item.id) : [])
          }}
        />
        <span>Выбрать все</span>
@@ -50,43 +49,43 @@ export function CartItems() {
          </button>
        )}
      </div>
-      {SAMPLE_ITEMS.map((item) => (
+      {items.map((item) => (
        <div key={item.id} className="flex gap-4 p-4 bg-white rounded-lg">
          <Checkbox 
            checked={selectedItems.includes(item.id)}
            onCheckedChange={() => toggleItem(item.id)}
          />
          <Image
-            src={item.image}
-            alt={item.name}
+            src={item.image || "/placeholder.svg"}
+            alt={item.title}
            width={100}
            height={100}
            className="object-cover"
          />
          <div className="flex-1">
-            <h3 className="font-medium">{item.name}</h3>
+            <h3 className="font-medium">{item.title}</h3>
            <div className="flex gap-4 mt-4">
              <div className="flex items-center gap-2">
-                <Button variant="outline" size="icon">
+                <Button variant="outline" size="icon" onClick={() => handleUpdateQuantity(item.id, item.quantity - 1)}>
                  <Minus className="h-4 w-4" />
                </Button>
-                <span className="w-8 text-center">1</span>
-                <Button variant="outline" size="icon">
+                <span className="w-8 text-center">{item.quantity}</span>
+                <Button variant="outline" size="icon" onClick={() => handleUpdateQuantity(item.id, item.quantity + 1)}>
                  <Plus className="h-4 w-4" />
                </Button>
              </div>
-              <Button variant="ghost" size="icon">
-                <Heart className="h-4 w-4" />
+              <Button variant="ghost" size="icon" onClick={() => handleToggleFavorite(item)}>
+                <Heart className={`h-4 w-4 ${isFavorite(item.id) ? 'fill-red-500 text-red-500' : ''}`} />
              </Button>
-              <Button variant="ghost" size="icon">
+              <Button variant="ghost" size="icon" onClick={() => removeAllFromCart(item.id)}>
                <Trash className="h-4 w-4" />
              </Button>
            </div>
          </div>
          <div className="text-right">
-            <div className="text-lg font-bold">{item.price} ₽</div>
-            <div className="text-sm text-muted-foreground line-through">
-              {item.oldPrice} ₽
+            <div className="text-lg font-bold">{item.price * item.quantity} ₽</div>
+            <div className="text-sm text-muted-foreground">
+              {item.price} ₽ за шт.
            </div>
          </div>
        </div>
--- a/frontend/style/components/cart-summary.tsx
+++ b/frontend/style/components/cart-summary.tsx
@@ -1,25 +1,49 @@
+"use client"
+
+import { useCart } from "@/contexts/cart-context"
+import { useAuth } from "@/contexts/auth-context"
 import { Button } from "./ui/button"
+import { useRouter } from "next/navigation"

 export function CartSummary() {
+  const { items, getTotalItems } = useCart()
+  const { isLoggedIn } = useAuth()
+  const router = useRouter()
+
+  const totalPrice = items.reduce((sum, item) => sum + item.price * item.quantity, 0)
+
+  const handleCheckout = () => {
+    if (!isLoggedIn) {
+      router.push('/login')
+    } else {
+      router.push('/checkout')
+    }
+  }
+
+  if (getTotalItems() === 0) {
+    return (
+      <div className="bg-white p-4 rounded-lg">
+        <h2 className="text-lg font-semibold mb-4">Ваша корзина</h2>
+        <p className="text-gray-500">В вашей корзине пока нет товаров</p>
+      </div>
+    )
+  }
+
  return (
    <div className="bg-white p-4 rounded-lg">
      <h2 className="text-lg font-semibold mb-4">Ваша корзина</h2>
      <div className="space-y-2 mb-4">
        <div className="flex justify-between">
-          <span>Товары (2)</span>
-          <span>10 236 ₽</span>
-        </div>
-        <div className="flex justify-between text-green-600">
-          <span>Скидка</span>
-          <span>- 4 387 ₽</span>
+          <span>Товары ({getTotalItems()})</span>
+          <span>{totalPrice} ₽</span>
        </div>
      </div>
      <div className="flex justify-between text-lg font-bold mb-4">
-        <span>С Ozon Картой</span>
-        <span>5 467 ₽</span>
+        <span>Итого</span>
+        <span>{totalPrice} ₽</span>
      </div>
-      <Button className="w-full" size="lg">
-        Перейти к оформлению
+      <Button className="w-full" size="lg" onClick={handleCheckout}>
+        {isLoggedIn ? "Перейти к оформлению" : "Войти для оформления"}
      </Button>
    </div>
  )
--- a/frontend/style/components/favorite-items.tsx
+++ b/frontend/style/components/favorite-items.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import { useFavorites } from "@/contexts/favorites-context"
+import { useCart } from "@/contexts/cart-context"
+import { Button } from "./ui/button"
+import { ShoppingCart, Trash } from 'lucide-react'
+import Image from "next/image"
+
+export function FavoriteItems() {
+  const { items, removeFromFavorites } = useFavorites()
+  const { addToCart } = useCart()
+
+  if (items.length === 0) {
+    return (
+      <div className="text-center py-12">
+        <h2 className="text-2xl font-semibold mb-4">Избранное</h2>
+        <p className="text-gray-500">У вас пока нет избранных товаров</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      {items.map((item) => (
+        <div key={item.id} className="flex gap-4 p-4 bg-white rounded-lg">
+          <Image
+            src={item.image || "/placeholder.svg"}
+            alt={item.title}
+            width={100}
+            height={100}
+            className="object-cover"
+          />
+          <div className="flex-1">
+            <h3 className="font-medium">{item.title}</h3>
+            <div className="text-lg font-bold mt-2">{item.price} ₽</div>
+            <div className="flex gap-4 mt-4">
+              <Button onClick={() => addToCart(item)}>
+                <ShoppingCart className="mr-2 h-4 w-4" /> В корзину
+              </Button>
+              <Button variant="outline" size="icon" onClick={() => removeFromFavorites(item.id)}>
+                <Trash className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
--- a/frontend/style/components/favorites-context.tsx
+++ b/frontend/style/components/favorites-context.tsx
@@ -0,0 +1,59 @@
+"use client"
+
+import React, { createContext, useContext, useState, useCallback } from 'react'
+
+type FavoriteItem = {
+  id: number
+  title: string
+  price: number
+}
+
+type FavoritesContextType = {
+  items: FavoriteItem[]
+  addToFavorites: (item: FavoriteItem) => void
+  removeFromFavorites: (id: number) => void
+  isFavorite: (id: number) => boolean
+  getTotalFavorites: () => number
+}
+
+const FavoritesContext = createContext<FavoritesContextType | undefined>(undefined)
+
+export const useFavorites = () => {
+  const context = useContext(FavoritesContext)
+  if (!context) {
+    throw new Error('useFavorites must be used within a FavoritesProvider')
+  }
+  return context
+}
+
+export const FavoritesProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [items, setItems] = useState<FavoriteItem[]>([])
+
+  const addToFavorites = useCallback((newItem: FavoriteItem) => {
+    setItems(currentItems => {
+      if (!currentItems.some(item => item.id === newItem.id)) {
+        return [...currentItems, newItem]
+      }
+      return currentItems
+    })
+  }, [])
+
+  const removeFromFavorites = useCallback((id: number) => {
+    setItems(currentItems => currentItems.filter(item => item.id !== id))
+  }, [])
+
+  const isFavorite = useCallback((id: number) => {
+    return items.some(item => item.id === id)
+  }, [items])
+
+  const getTotalFavorites = useCallback(() => {
+    return items.length
+  }, [items])
+
+  return (
+    <FavoritesContext.Provider value={{ items, addToFavorites, removeFromFavorites, isFavorite, getTotalFavorites }}>
+      {children}
+    </FavoritesContext.Provider>
+  )
+}
+
--- a/frontend/style/components/footer.tsx
+++ b/frontend/style/components/footer.tsx
@@ -5,7 +5,7 @@ export function Footer() {
  return (
    <footer className="bg-white border-t mt-16">
      <div className="container mx-auto px-4 py-12">
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          <div>
            <h3 className="font-semibold mb-4">О компании</h3>
            <ul className="space-y-2">
--- a/frontend/style/components/header.tsx
+++ b/frontend/style/components/header.tsx
@@ -1,33 +1,89 @@
+"use client"
+
+import { useState } from "react"
 import Link from "next/link"
 import { Search } from "./search"
 import { Button } from "./ui/button"
-import { ShoppingCart, Heart, Package2 } from 'lucide-react'
+import { ShoppingCart, Heart, Package2, User, Menu } from 'lucide-react'
 import { CatalogMenu } from "./catalog-menu"
+import { Sheet, SheetContent, SheetTrigger } from "./ui/sheet"
+import { useCart } from "@/contexts/cart-context"
+import { useFavorites } from "@/contexts/favorites-context"
+import { Badge } from "./ui/badge"

 export function Header() {
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+  const { getTotalItems } = useCart()
+  const { getTotalFavorites } = useFavorites()
+
  return (
    <header className="border-b sticky top-0 bg-white z-50">
      <div className="container mx-auto px-4">
        <div className="flex h-16 items-center justify-between">
-          <div className="flex items-center gap-8">
+          <div className="flex items-center gap-4">
            <Link href="/" className="text-2xl font-bold text-blue-600">
-              Eternos
+              STORE
            </Link>
-            <CatalogMenu />
+            <div className="hidden md:block">
+              <CatalogMenu />
+            </div>
+          </div>
+          <div className="hidden md:block flex-1 max-w-xl mx-4">
            <Search />
          </div>
          <div className="flex items-center gap-4">
-            <Button variant="ghost" size="icon">
-              <Package2 className="h-5 w-5" />
-            </Button>
-            <Button variant="ghost" size="icon">
-              <Heart className="h-5 w-5" />
-            </Button>
-            <Button variant="ghost" size="icon">
-              <ShoppingCart className="h-5 w-5" />
+            <div className="hidden md:flex items-center gap-4">
+              <Button variant="ghost" size="icon" asChild>
+                <Link href="/profile">
+                  <User className="h-5 w-5" />
+                </Link>
+              </Button>
+              <Button variant="ghost" size="icon">
+                <Package2 className="h-5 w-5" />
+              </Button>
+              <Button variant="ghost" size="icon" className="relative" asChild>
+                <Link href="/favorites">
+                  <Heart className="h-5 w-5" />
+                  {getTotalFavorites() > 0 && (
+                    <Badge variant="destructive" className="absolute -top-2 -right-2 h-5 w-5 flex items-center justify-center p-0">
+                      {getTotalFavorites()}
+                    </Badge>
+                  )}
+                </Link>
+              </Button>
+            </div>
+            <Button variant="ghost" size="icon" asChild className="relative">
+              <Link href="/cart">
+                <ShoppingCart className="h-5 w-5" />
+                {getTotalItems() > 0 && (
+                  <Badge variant="destructive" className="absolute -top-2 -right-2 h-5 w-5 flex items-center justify-center p-0">
+                    {getTotalItems()}
+                  </Badge>
+                )}
+              </Link>
            </Button>
+            <Sheet open={isMenuOpen} onOpenChange={setIsMenuOpen}>
+              <SheetTrigger asChild>
+                <Button variant="ghost" size="icon" className="md:hidden">
+                  <Menu className="h-5 w-5" />
+                </Button>
+              </SheetTrigger>
+              <SheetContent side="left" className="w-[300px] sm:w-[400px]">
+                <nav className="flex flex-col gap-4">
+                  <Link href="/" onClick={() => setIsMenuOpen(false)}>Главная</Link>
+                  <Link href="/profile" onClick={() => setIsMenuOpen(false)}>Профиль</Link>
+                  <Link href="/cart" onClick={() => setIsMenuOpen(false)}>Корзина</Link>
+                  <div className="md:hidden">
+                    <CatalogMenu />
+                  </div>
+                </nav>
+              </SheetContent>
+            </Sheet>
          </div>
        </div>
+        <div className="md:hidden mt-2 mb-4">
+          <Search />
+        </div>
      </div>
    </header>
  )
--- a/frontend/style/components/product-card.tsx
+++ b/frontend/style/components/product-card.tsx
@@ -1,24 +1,54 @@
+"use client"
+
 import Image from "next/image"
-import { Heart } from 'lucide-react'
+import Link from "next/link"
+import { Heart, ShoppingCart } from 'lucide-react'
 import { Button } from "./ui/button"
-import { Badge } from "./ui/badge"
+import { useCart } from "@/contexts/cart-context"
+import { useFavorites } from "@/contexts/favorites-context"

 interface ProductCardProps {
  product: {
    id: number
    title: string
    price: number
-    oldPrice: number
-    discount: number
    image: string
-    isHotDeal?: boolean
-    isSale?: boolean
  }
 }

 export function ProductCard({ product }: ProductCardProps) {
+  const { addToCart, removeFromCart } = useCart()
+  const { addToFavorites, removeFromFavorites, isFavorite } = useFavorites()
+
+  const handleAddToCart = (e: React.MouseEvent) => {
+    e.preventDefault()
+    addToCart({
+      id: product.id,
+      title: product.title,
+      price: product.price,
+    })
+  }
+
+  const handleRemoveFromCart = (e: React.MouseEvent) => {
+    e.preventDefault()
+    removeFromCart(product.id)
+  }
+
+  const handleToggleFavorite = (e: React.MouseEvent) => {
+    e.preventDefault()
+    if (isFavorite(product.id)) {
+      removeFromFavorites(product.id)
+    } else {
+      addToFavorites({
+        id: product.id,
+        title: product.title,
+        price: product.price,
+      })
+    }
+  }
+
  return (
-    <div className="group relative bg-white rounded-lg p-2 transition-shadow hover:shadow-lg">
+    <Link href={`/product/${product.id}`} className="group relative bg-white rounded-lg p-2 transition-shadow hover:shadow-lg block">
      <div className="relative aspect-square mb-2">
        <Image
          src={product.image}
@@ -30,31 +60,24 @@ export function ProductCard({ product }: ProductCardProps) {
          variant="ghost"
          size="icon"
          className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity"
+          onClick={handleToggleFavorite}
        >
-          <Heart className="h-5 w-5" />
+          <Heart className={`h-5 w-5 ${isFavorite(product.id) ? 'fill-red-500 text-red-500' : ''}`} />
        </Button>
-        {product.isHotDeal && (
-          <div className="absolute top-2 left-2 bg-pink-500 text-white px-2 py-1 text-xs font-medium rounded">
-            НАРАСХВАТ
-          </div>
-        )}
      </div>
      <div className="space-y-2">
-        <div className="flex items-baseline gap-2">
-          <span className="text-xl font-bold">{product.price} ₽</span>
-          <span className="text-sm text-muted-foreground line-through">
-            {product.oldPrice} ₽
-          </span>
-          <span className="text-sm text-red-500">-{product.discount}%</span>
-        </div>
+        <span className="text-xl font-bold">{product.price} ₽</span>
        <h3 className="text-sm line-clamp-2">{product.title}</h3>
-        {product.isSale && (
-          <Badge variant="destructive" className="mt-2">
-            Распродажа
-          </Badge>
-        )}
+        <div className="flex gap-2">
+          <Button onClick={handleAddToCart} className="flex-1">
+            <ShoppingCart className="mr-2 h-4 w-4" /> В корзину
+          </Button>
+          <Button onClick={handleRemoveFromCart} variant="outline" size="icon">
+            -
+          </Button>
+        </div>
      </div>
-    </div>
+    </Link>
  )
 }

--- a/frontend/style/components/product-detail.tsx
+++ b/frontend/style/components/product-detail.tsx
@@ -0,0 +1,97 @@
+"use client"
+
+import Image from "next/image"
+import { useState } from "react"
+import { Heart, ShoppingCart, Minus, Plus } from 'lucide-react'
+import { Button } from "./ui/button"
+import { useCart } from "@/contexts/cart-context"
+import { useFavorites } from "@/contexts/favorites-context"
+import { Product } from "@/types/product"
+
+interface ProductDetailProps {
+  product: Product
+}
+
+export function ProductDetail({ product }: ProductDetailProps) {
+  const [quantity, setQuantity] = useState(1)
+  const { addToCart } = useCart()
+  const { addToFavorites, removeFromFavorites, isFavorite } = useFavorites()
+
+  const handleAddToCart = () => {
+    addToCart({
+      id: product.id,
+      title: product.title,
+      price: product.price,
+      quantity: quantity
+    })
+  }
+
+  const handleToggleFavorite = () => {
+    if (isFavorite(product.id)) {
+      removeFromFavorites(product.id)
+    } else {
+      addToFavorites({
+        id: product.id,
+        title: product.title,
+        price: product.price,
+      })
+    }
+  }
+
+  return (
+    <div className="flex flex-col md:flex-row gap-8">
+      <div className="md:w-1/2">
+        <Image
+          src={product.image}
+          alt={product.title}
+          width={500}
+          height={500}
+          className="w-full h-auto object-cover rounded-lg"
+        />
+      </div>
+      <div className="md:w-1/2 space-y-4">
+        <h1 className="text-3xl font-bold">{product.title}</h1>
+        {product.title.startsWith('[Draft]') && (
+          <div className="bg-yellow-200 text-yellow-800 px-2 py-1 rounded inline-block">
+            Draft Version
+          </div>
+        )}
+        <div className="flex items-baseline gap-2">
+          <span className="text-2xl font-bold">{product.price} ₽</span>
+        </div>
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2">
+            <Button 
+              variant="outline" 
+              size="icon"
+              onClick={() => setQuantity(prev => Math.max(1, prev - 1))}
+            >
+              <Minus className="h-4 w-4" />
+            </Button>
+            <span className="w-8 text-center">{quantity}</span>
+            <Button 
+              variant="outline" 
+              size="icon"
+              onClick={() => setQuantity(prev => prev + 1)}
+            >
+              <Plus className="h-4 w-4" />
+            </Button>
+          </div>
+          <Button onClick={handleAddToCart} className="flex-1">
+            <ShoppingCart className="mr-2 h-4 w-4" /> Добавить в корзину
+          </Button>
+          <Button variant="outline" size="icon" onClick={handleToggleFavorite}>
+            <Heart className={`h-5 w-5 ${isFavorite(product.id) ? 'fill-red-500 text-red-500' : ''}`} />
+          </Button>
+        </div>
+        <div className="border-t pt-4">
+          <h2 className="text-xl font-semibold mb-2">Описание</h2>
+          <p className="text-gray-600">
+            Подробное описание товара. Здесь может быть длинный текст с характеристиками и особенностями продукта.
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
--- a/frontend/style/components/product-grid.tsx
+++ b/frontend/style/components/product-grid.tsx
@@ -1,67 +1,14 @@
 import { ProductCard } from "./product-card"
+import { Product } from "@/types/product"

-const SAMPLE_PRODUCTS = [
-  {
-    id: 1,
-    title: "Кофе растворимый Жокей Крепкий, 3 в 1, с сахаром",
-    price: 89,
-    oldPrice: 172,
-    discount: 48,
-    image: "/placeholder.svg",
-    isHotDeal: true,
-    isSale: true,
-  },
-  {
-    id: 2,
-    title: "Рексона Дезодорант женский твердый стик",
-    price: 235,
-    oldPrice: 397,
-    discount: 40,
-    image: "/placeholder.svg",
-    isHotDeal: true,
-  },
-  {
-    id: 3,
-    title: "Сухой корм Мираторг MEAT с нежной телятиной",
-    price: 187,
-    oldPrice: 294,
-    discount: 36,
-    image: "/placeholder.svg",
-    isHotDeal: true,
-  },
-  {
-    id: 4,
-    title: "Сухой корм KITEKAT™ для взрослых кошек «Мясной пир»",
-    price: 174,
-    oldPrice: 209,
-    discount: 16,
-    image: "/placeholder.svg",
-    isHotDeal: true,
-  },
-  {
-    id: 5,
-    title: "Специальное чистящее средство для стиральных машин",
-    price: 197,
-    oldPrice: 469,
-    discount: 57,
-    image: "/placeholder.svg",
-    isHotDeal: true,
-  },
-  {
-    id: 6,
-    title: "Крем для лица увлажняющий",
-    price: 184,
-    oldPrice: 413,
-    discount: 55,
-    image: "/placeholder.svg",
-    isHotDeal: true,
-  },
-]
+interface ProductGridProps {
+  products: Product[]
+}

-export function ProductGrid() {
+export function ProductGrid({ products }: ProductGridProps) {
  return (
-    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4">
-      {SAMPLE_PRODUCTS.map((product) => (
+    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
+      {products.map((product) => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
--- a/frontend/style/components/register-form.tsx
+++ b/frontend/style/components/register-form.tsx
@@ -0,0 +1,71 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import Link from "next/link"
+
+export function RegisterForm() {
+  const [formData, setFormData] = useState({
+    email: "",
+    password: "",
+    confirmPassword: "",
+  })
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target
+    setFormData(prev => ({ ...prev, [name]: value }))
+  }
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    // Here you would typically send the data to your backend
+    console.log("Form submitted:", formData)
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4 max-w-md mx-auto">
+      <div>
+        <Label htmlFor="email">Email</Label>
+        <Input
+          type="email"
+          id="email"
+          name="email"
+          value={formData.email}
+          onChange={handleChange}
+          required
+        />
+      </div>
+      <div>
+        <Label htmlFor="password">Пароль</Label>
+        <Input
+          type="password"
+          id="password"
+          name="password"
+          value={formData.password}
+          onChange={handleChange}
+          required
+        />
+      </div>
+      <div>
+        <Label htmlFor="confirmPassword">Подтвердите пароль</Label>
+        <Input
+          type="password"
+          id="confirmPassword"
+          name="confirmPassword"
+          value={formData.confirmPassword}
+          onChange={handleChange}
+          required
+        />
+      </div>
+      <Button type="submit" className="w-full">Зарегистрироваться</Button>
+      <div className="text-center">
+        <Link href="/recover-password" className="text-blue-600 hover:underline">
+          Забыли пароль?
+        </Link>
+      </div>
+    </form>
+  )
+}
+
--- a/frontend/style/components/search.tsx
+++ b/frontend/style/components/search.tsx
@@ -1,17 +1,36 @@
 "use client"

+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
 import { SearchIcon } from 'lucide-react'
 import { Input } from "./ui/input"
+import { Button } from "./ui/button"

 export function Search() {
+  const [searchTerm, setSearchTerm] = useState('')
+  const router = useRouter()
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (searchTerm.trim()) {
+      router.push(`/search?q=${encodeURIComponent(searchTerm.trim())}`)
+    }
+  }
+
  return (
-    <div className="relative w-full max-w-lg">
-      <SearchIcon className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+    <form onSubmit={handleSearch} className="relative w-full max-w-lg">
      <Input
+        type="search"
        placeholder="Искать на Store"
-        className="pl-8 w-full"
+        className="pl-10 pr-20 w-full"
+        value={searchTerm}
+        onChange={(e) => setSearchTerm(e.target.value)}
      />
-    </div>
+      <SearchIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+      <Button type="submit" className="absolute right-1 top-1/2 transform -translate-y-1/2">
+        Найти
+      </Button>
+    </form>
  )
 }

--- a/frontend/style/components/ui/label.tsx
+++ b/frontend/style/components/ui/label.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }
--- a/frontend/style/components/ui/sheet.tsx
+++ b/frontend/style/components/ui/sheet.tsx
@@ -0,0 +1,7 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+ 
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
--- a/frontend/style/components/user-profile.tsx
+++ b/frontend/style/components/user-profile.tsx
@@ -0,0 +1,32 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import Link from "next/link"
+
+export function UserProfile() {
+  const [isLoggedIn, setIsLoggedIn] = useState(false)
+
+  if (!isLoggedIn) {
+    return (
+      <div className="space-y-4 max-w-md mx-auto">
+        <Button asChild className="w-full">
+          <Link href="/login">Войти</Link>
+        </Button>
+        <Button asChild variant="outline" className="w-full">
+          <Link href="/register">Зарегистрироваться</Link>
+        </Button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4 max-w-md mx-auto">
+      <h2 className="text-xl font-semibold">Добро пожаловать, Иван Иванов!</h2>
+      <Button onClick={() => setIsLoggedIn(false)} className="w-full">Выйти</Button>
+    </div>
+  )
+}
+
--- a/frontend/style/contexts/auth-context.tsx
+++ b/frontend/style/contexts/auth-context.tsx
@@ -0,0 +1,33 @@
+"use client"
+
+import React, { createContext, useContext, useState } from 'react'
+
+type AuthContextType = {
+  isLoggedIn: boolean
+  login: () => void
+  logout: () => void
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined)
+
+export const useAuth = () => {
+  const context = useContext(AuthContext)
+  if (!context) {
+    throw new Error('useAuth must be used within an AuthProvider')
+  }
+  return context
+}
+
+export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [isLoggedIn, setIsLoggedIn] = useState(false)
+
+  const login = () => setIsLoggedIn(true)
+  const logout = () => setIsLoggedIn(false)
+
+  return (
+    <AuthContext.Provider value={{ isLoggedIn, login, logout }}>
+      {children}
+    </AuthContext.Provider>
+  )
+}
+
--- a/frontend/style/contexts/cart-context.tsx
+++ b/frontend/style/contexts/cart-context.tsx
@@ -0,0 +1,99 @@
+"use client"
+
+import React, { createContext, useContext, useState, useCallback, useEffect } from 'react'
+import { CartItem, saveCart, getCart, clearCart } from '@/lib/cartStorage'
+
+type CartContextType = {
+  items: CartItem[]
+  addToCart: (item: Omit<CartItem, 'quantity'>) => void
+  removeFromCart: (id: number) => void
+  removeAllFromCart: (id: number) => void
+  updateQuantity: (id: number, quantity: number) => void
+  clearCart: () => void
+  getTotalItems: () => number
+}
+
+const CartContext = createContext<CartContextType | undefined>(undefined)
+
+export const useCart = () => {
+  const context = useContext(CartContext)
+  if (!context) {
+    throw new Error('useCart must be used within a CartProvider')
+  }
+  return context
+}
+
+export const CartProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [items, setItems] = useState<CartItem[]>([])
+
+  useEffect(() => {
+    const savedCart = getCart()
+    if (savedCart.length > 0) {
+      setItems(savedCart)
+    }
+  }, [])
+
+  useEffect(() => {
+    saveCart(items)
+  }, [items])
+
+  const addToCart = useCallback((newItem: Omit<CartItem, 'quantity'>) => {
+    setItems(currentItems => {
+      const existingItem = currentItems.find(item => item.id === newItem.id)
+      if (existingItem) {
+        return currentItems.map(item =>
+          item.id === newItem.id ? { ...item, quantity: item.quantity + 1 } : item
+        )
+      }
+      return [...currentItems, { ...newItem, quantity: 1 }]
+    })
+  }, [])
+
+  const removeFromCart = useCallback((id: number) => {
+    setItems(currentItems => {
+      const existingItem = currentItems.find(item => item.id === id)
+      if (existingItem && existingItem.quantity > 1) {
+        return currentItems.map(item =>
+          item.id === id ? { ...item, quantity: item.quantity - 1 } : item
+        )
+      }
+      return currentItems.filter(item => item.id !== id)
+    })
+  }, [])
+
+  const removeAllFromCart = useCallback((id: number) => {
+    setItems(currentItems => currentItems.filter(item => item.id !== id))
+  }, [])
+
+  const updateQuantity = useCallback((id: number, quantity: number) => {
+    setItems(currentItems => 
+      currentItems.map(item => 
+        item.id === id ? { ...item, quantity: Math.max(1, quantity) } : item
+      )
+    )
+  }, [])
+
+  const clearCartItems = useCallback(() => {
+    setItems([])
+    clearCart()
+  }, [])
+
+  const getTotalItems = useCallback(() => {
+    return items.reduce((total, item) => total + item.quantity, 0)
+  }, [items])
+
+  return (
+    <CartContext.Provider value={{ 
+      items, 
+      addToCart, 
+      removeFromCart, 
+      removeAllFromCart, 
+      updateQuantity, 
+      clearCart: clearCartItems, 
+      getTotalItems 
+    }}>
+      {children}
+    </CartContext.Provider>
+  )
+}
+
--- a/frontend/style/contexts/favorites-context.tsx
+++ b/frontend/style/contexts/favorites-context.tsx
@@ -0,0 +1,59 @@
+"use client"
+
+import React, { createContext, useContext, useState, useCallback } from 'react'
+
+type FavoriteItem = {
+  id: number
+  title: string
+  price: number
+}
+
+type FavoritesContextType = {
+  items: FavoriteItem[]
+  addToFavorites: (item: FavoriteItem) => void
+  removeFromFavorites: (id: number) => void
+  isFavorite: (id: number) => boolean
+  getTotalFavorites: () => number
+}
+
+const FavoritesContext = createContext<FavoritesContextType | undefined>(undefined)
+
+export const useFavorites = () => {
+  const context = useContext(FavoritesContext)
+  if (!context) {
+    throw new Error('useFavorites must be used within a FavoritesProvider')
+  }
+  return context
+}
+
+export const FavoritesProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [items, setItems] = useState<FavoriteItem[]>([])
+
+  const addToFavorites = useCallback((newItem: FavoriteItem) => {
+    setItems(currentItems => {
+      if (!currentItems.some(item => item.id === newItem.id)) {
+        return [...currentItems, newItem]
+      }
+      return currentItems
+    })
+  }, [])
+
+  const removeFromFavorites = useCallback((id: number) => {
+    setItems(currentItems => currentItems.filter(item => item.id !== id))
+  }, [])
+
+  const isFavorite = useCallback((id: number) => {
+    return items.some(item => item.id === id)
+  }, [items])
+
+  const getTotalFavorites = useCallback(() => {
+    return items.length
+  }, [items])
+
+  return (
+    <FavoritesContext.Provider value={{ items, addToFavorites, removeFromFavorites, isFavorite, getTotalFavorites }}>
+      {children}
+    </FavoritesContext.Provider>
+  )
+}
+
--- a/frontend/style/lib/cartStorage.ts
+++ b/frontend/style/lib/cartStorage.ts
@@ -0,0 +1,39 @@
+import fs from 'fs'
+import path from 'path'
+
+const DATA_DIR = path.join(process.cwd(), 'data')
+const CART_FILE_PATH = path.join(DATA_DIR, 'cart.json')
+
+export interface CartItem {
+  id: number
+  title: string
+  price: number
+  quantity: number
+}
+
+const ensureDataDir = () => {
+  if (!fs.existsSync(DATA_DIR)) {
+    fs.mkdirSync(DATA_DIR, { recursive: true })
+  }
+}
+
+export const saveCart = (cartItems: CartItem[]): void => {
+  ensureDataDir()
+  const cartData = JSON.stringify(cartItems, null, 2)
+  fs.writeFileSync(CART_FILE_PATH, cartData)
+}
+
+export const getCart = (): CartItem[] => {
+  ensureDataDir()
+  if (!fs.existsSync(CART_FILE_PATH)) {
+    return []
+  }
+  const cartData = fs.readFileSync(CART_FILE_PATH, 'utf-8')
+  return JSON.parse(cartData)
+}
+
+export const clearCart = (): void => {
+  ensureDataDir()
+  fs.writeFileSync(CART_FILE_PATH, '[]')
+}
+
--- a/frontend/style/lib/cookieManager.js
+++ b/frontend/style/lib/cookieManager.js
@@ -0,0 +1,16 @@
+import Cookies from 'js-cookie';
+
+export const updateCartCookie = (cartItems) => {
+  const cartData = JSON.stringify(cartItems);
+  Cookies.set('cart', cartData, { expires: 7 }); // Cookie expires in 7 days
+};
+
+export const getCartFromCookie = () => {
+  const cartData = Cookies.get('cart');
+  return cartData ? JSON.parse(cartData) : [];
+};
+
+export const clearCartCookie = () => {
+  Cookies.remove('cart');
+};
+
--- a/frontend/style/lib/sample-products.ts
+++ b/frontend/style/lib/sample-products.ts
@@ -0,0 +1,60 @@
+import { Product } from "@/types/product"
+
+export const SAMPLE_PRODUCTS: Product[] = [
+  {
+    id: 1,
+    title: "Кофе растворимый Жокей Крепкий, 3 в 1, с сахаром",
+    price: 89,
+    oldPrice: 172,
+    discount: 48,
+    image: "/placeholder.svg",
+    isHotDeal: true,
+    isSale: true,
+  },
+  {
+    id: 2,
+    title: "Рексона Дезодорант женский твердый стик",
+    price: 235,
+    oldPrice: 397,
+    discount: 40,
+    image: "/placeholder.svg",
+    isHotDeal: true,
+  },
+  {
+    id: 3,
+    title: "Сухой корм Мираторг MEAT с нежной телятиной",
+    price: 187,
+    oldPrice: 294,
+    discount: 36,
+    image: "/placeholder.svg",
+    isHotDeal: true,
+  },
+  {
+    id: 4,
+    title: "Сухой корм KITEKAT™ для взрослых кошек «Мясной пир»",
+    price: 174,
+    oldPrice: 209,
+    discount: 16,
+    image: "/placeholder.svg",
+    isHotDeal: true,
+  },
+  {
+    id: 5,
+    title: "Специальное чистящее средство для стиральных машин",
+    price: 197,
+    oldPrice: 469,
+    discount: 57,
+    image: "/placeholder.svg",
+    isHotDeal: true,
+  },
+  {
+    id: 6,
+    title: "Крем для лица увлажняющий",
+    price: 184,
+    oldPrice: 413,
+    discount: 55,
+    image: "/placeholder.svg",
+    isHotDeal: true,
+  },
+]
+
--- a/frontend/style/lib/utils.ts
+++ b/frontend/style/lib/utils.ts
@@ -1,6 +1,7 @@
-import { clsx, type ClassValue } from "clsx"
+import { type ClassValue, clsx } from "clsx"
 import { twMerge } from "tailwind-merge"
-
+ 
 export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
 }
+
--- a/frontend/style/package-lock.json
+++ b/frontend/style/package-lock.json
@@ -13,14 +13,20 @@
        "@nextui-org/theme": "^2.4.5",
        "@radix-ui/react-accordion": "^1.2.2",
        "@radix-ui/react-checkbox": "^1.1.3",
+        "@radix-ui/react-dialog": "^1.1.4",
+        "@radix-ui/react-label": "^2.1.1",
        "@radix-ui/react-navigation-menu": "^1.2.3",
        "@radix-ui/react-slider": "^1.2.2",
        "@radix-ui/react-slot": "^1.1.1",
        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
        "framer-motion": "^11.16.0",
+        "fs": "^0.0.1-security",
+        "fs-react": "^0.0.4",
+        "js-cookie": "^3.0.5",
        "lucide-react": "^0.469.0",
        "next": "14.2.16",
+        "path": "^0.12.7",
        "react": "^18",
        "react-dom": "^18",
        "tailwind-merge": "^2.6.0",
@@ -890,6 +896,42 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.4.tgz",
+      "integrity": "sha512-Ur7EV1IwQGCyaAuyDRiOLA5JIUZxELJljF+MbM/2NC0BYwfuRrbpS30BiQBJrVruscgUkieKkqXYDOoByaxIoA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.3",
+        "@radix-ui/react-focus-guards": "1.1.1",
+        "@radix-ui/react-focus-scope": "1.1.1",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-portal": "1.1.3",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-slot": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "^2.6.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-direction": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.0.tgz",
@@ -932,6 +974,46 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz",
+      "integrity": "sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.1.tgz",
+      "integrity": "sha512-01omzJAYRxXdG2/he/+xy+c8a8gCydoQ1yOxnWNcRhrrBW5W+RQJ22EK1SaO8tb3WoUsuEw7mJjBozPzihDFjA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-id": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
@@ -950,6 +1032,29 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-label": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.1.tgz",
+      "integrity": "sha512-UUw5E4e/2+4kFMH7+YxORXGWggtY6sM8WIwh5RZchhLuUg2H1hc98Py+pr8HMz6rdaYrK2t296ZEjYLOCO5uUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-navigation-menu": {
      "version": "1.2.3",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.2.3.tgz",
@@ -986,6 +1091,30 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.3.tgz",
+      "integrity": "sha512-NciRqhXnGojhT93RPyDaMPfLH3ZSl4jjIFbZQ1b/vxvZEdHsBZ49wP9w8L3HzUQwep01LcWtkUvm0OVB5JAHTw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-presence": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.2.tgz",
@@ -1871,6 +2000,18 @@
      "dev": true,
      "license": "Python-2.0"
    },
+    "node_modules/aria-hidden": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz",
+      "integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
    "node_modules/aria-query": {
      "version": "5.3.2",
      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
@@ -2535,6 +2676,12 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
+      "license": "MIT"
+    },
    "node_modules/didyoumean": {
      "version": "1.2.2",
      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -3418,6 +3565,18 @@
        }
      }
    },
+    "node_modules/fs": {
+      "version": "0.0.1-security",
+      "resolved": "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz",
+      "integrity": "sha512-3XY9e1pP0CVEUCdj5BmfIZxRBTSDycnbqhIOGec9QYtmVH2fbLpj86CFWkrNOkt/Fvty4KZG5lTglL9j/gJ87w==",
+      "license": "ISC"
+    },
+    "node_modules/fs-react": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/fs-react/-/fs-react-0.0.4.tgz",
+      "integrity": "sha512-F7Yy/gDd3ewTusPCnqwT2C/qGsC1aDHq4uekrEjeFQdDfztqenSP1gAVUFpju41Tvnh+D/pTLsNGkdRP5teY7g==",
+      "license": "ISC"
+    },
    "node_modules/fs.realpath": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -3504,6 +3663,15 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/get-proto": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
@@ -4320,6 +4488,15 @@
        "jiti": "bin/jiti.js"
      }
    },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
    "node_modules/js-tokens": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -4931,6 +5108,16 @@
        "node": ">=6"
      }
    },
+    "node_modules/path": {
+      "version": "0.12.7",
+      "resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz",
+      "integrity": "sha512-aXXC6s+1w7otVF9UletFkFcDsJeO7lSZBPUQhtb5O0xJe8LtYhj/GxldoL09bBj9+ZmE2hNoHqQSFMN5fikh4Q==",
+      "license": "MIT",
+      "dependencies": {
+        "process": "^0.11.1",
+        "util": "^0.10.3"
+      }
+    },
    "node_modules/path-exists": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -5181,6 +5368,15 @@
        "node": ">= 0.8.0"
      }
    },
+    "node_modules/process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
    "node_modules/prop-types": {
      "version": "15.8.1",
      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -5255,6 +5451,75 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/react-remove-scroll": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.2.tgz",
+      "integrity": "sha512-KmONPx5fnlXYJQqC62Q+lwIeAk64ws/cUw6omIumRzMRPqgnYqhSSti99nbj0Ry13bv7dF+BKn7NB+OqkdZGTw==",
+      "license": "MIT",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.7",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.3",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz",
+      "integrity": "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-style-singleton": "^2.2.2",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
+      "integrity": "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==",
+      "license": "MIT",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/read-cache": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -6320,12 +6585,70 @@
        "punycode": "^2.1.0"
      }
    },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
+      "integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sidecar": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
+      "integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/util": {
+      "version": "0.10.4",
+      "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz",
+      "integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "2.0.3"
+      }
+    },
    "node_modules/util-deprecate": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
      "license": "MIT"
    },
+    "node_modules/util/node_modules/inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==",
+      "license": "ISC"
+    },
    "node_modules/which": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
--- a/frontend/style/package.json
+++ b/frontend/style/package.json
@@ -14,14 +14,20 @@
    "@nextui-org/theme": "^2.4.5",
    "@radix-ui/react-accordion": "^1.2.2",
    "@radix-ui/react-checkbox": "^1.1.3",
+    "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-label": "^2.1.1",
    "@radix-ui/react-navigation-menu": "^1.2.3",
    "@radix-ui/react-slider": "^1.2.2",
    "@radix-ui/react-slot": "^1.1.1",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "framer-motion": "^11.16.0",
+    "fs": "^0.0.1-security",
+    "fs-react": "^0.0.4",
+    "js-cookie": "^3.0.5",
    "lucide-react": "^0.469.0",
    "next": "14.2.16",
+    "path": "^0.12.7",
    "react": "^18",
    "react-dom": "^18",
    "tailwind-merge": "^2.6.0",
--- a/frontend/style/types/product.ts
+++ b/frontend/style/types/product.ts
@@ -0,0 +1,7 @@
+export interface Product {
+  id: number
+  title: string
+  price: number
+  image: string
+}
+
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>