Replace desktop showcase video with scroll-driven color backgrounds

2026-09-29 09:22:23 +03:30
parent 5d9fe204e7
commit fcded6f139
6 changed files with 640 additions and 401 deletions
@@ -1,4 +0,0 @@
-<changelist name="Uncommitted_changes_before_Checkout_at_9_20_26,_11_55 AM_[Changes]" date="1789898166789" recycled="true" deleted="true">
-  <option name="PATH" value="$PROJECT_DIR$/.idea/shelf/Uncommitted_changes_before_Checkout_at_9_20_26,_11_55 AM_[Changes]/shelved.patch" />
-  <option name="DESCRIPTION" value="Uncommitted changes before Checkout at 9/20/26, 11:55 AM [Changes]" />
-</changelist>
@@ -1,4 +0,0 @@
-<changelist name="Uncommitted_changes_before_Checkout_at_9_21_26,_1_17 PM_[Changes]" date="1789989456881" recycled="true" deleted="true">
-  <option name="PATH" value="$PROJECT_DIR$/.idea/shelf/Uncommitted_changes_before_Checkout_at_9_21_26,_1_17 PM_[Changes]/shelved.patch" />
-  <option name="DESCRIPTION" value="Uncommitted changes before Checkout at 9/21/26, 1:17 PM [Changes]" />
-</changelist>
@@ -4,8 +4,10 @@
    <option name="autoReloadType" value="SELECTIVE" />
  </component>
  <component name="ChangeListManager">
-    <list default="true" id="bb7b50a5-be9c-4cd7-a05b-979f0e91b173" name="Changes" comment="">
-      <change beforePath="$PROJECT_DIR$/components/HorizontalShowcase.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/components/HorizontalShowcase.tsx" afterDir="false" />
+    <list default="true" id="bb7b50a5-be9c-4cd7-a05b-979f0e91b173" name="Changes" comment="Replace desktop showcase video with scroll-driven color backgrounds">
+      <change beforePath="$PROJECT_DIR$/.idea/shelf/Uncommitted_changes_before_Checkout_at_9_20_26,_11_55 AM_[Changes]/shelved.patch" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/shelf/Uncommitted_changes_before_Checkout_at_9_20_26__11_55AM__Changes_.xml" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
    </list>
    <option name="SHOW_DIALOG" value="false" />
    <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -215,6 +217,9 @@
      <workItem from="1789973458932" duration="1450000" />
      <workItem from="1789981347522" duration="4504000" />
      <workItem from="1790050380142" duration="326000" />
+      <workItem from="1790568898974" duration="91000" />
+      <workItem from="1790569032481" duration="788000" />
+      <workItem from="1790573950198" duration="16000" />
    </task>
    <task id="LOCAL-00001" summary="update">
      <option name="closed" value="true" />
@@ -552,7 +557,15 @@
      <option name="project" value="LOCAL" />
      <updated>1789974962919</updated>
    </task>
-    <option name="localTasksCounter" value="43" />
+    <task id="LOCAL-00043" summary="Replace desktop showcase video with scroll-driven color backgrounds">
+      <option name="closed" value="true" />
+      <created>1790492715355</created>
+      <option name="number" value="00043" />
+      <option name="presentableId" value="LOCAL-00043" />
+      <option name="project" value="LOCAL" />
+      <updated>1790492715355</updated>
+    </task>
+    <option name="localTasksCounter" value="44" />
    <servers />
  </component>
  <component name="TypeScriptGeneratedFilesManager">
@@ -581,6 +594,7 @@
    <MESSAGE value="chore: configure prettier for consistent WebStorm formatting" />
    <MESSAGE value="FAZ1" />
    <MESSAGE value="Improve featured products layout and add support CTA" />
-    <option name="LAST_COMMIT_MESSAGE" value="Improve featured products layout and add support CTA" />
+    <MESSAGE value="Replace desktop showcase video with scroll-driven color backgrounds" />
+    <option name="LAST_COMMIT_MESSAGE" value="Replace desktop showcase video with scroll-driven color backgrounds" />
  </component>
 </project>
@@ -0,0 +1,622 @@
+# Next.js Frontend Architecture Guide
+
+## Objective
+
+This document defines the architecture rules for this Next.js project.
+
+Before implementing new features, refactoring existing code, or creating new modules, read and follow this architecture.
+
+The goal is to create a scalable, production-ready frontend suitable for a professional development team.
+
+---
+
+# Technology Stack
+
+The project must use:
+
+- Next.js (App Router)
+- React
+- TypeScript
+- Redux Toolkit
+- Axios
+- Tailwind CSS
+- Ant Design
+
+Do not introduce alternative frameworks or libraries unless explicitly requested.
+
+---
+
+# Architecture Pattern
+
+Use:
+
+## Feature-Based Architecture
+
+Organize code around business features, not technical file types.
+
+Avoid:
+
+```
+src/
+
+components/
+pages/
+services/
+utils/
+```
+
+as the main structure.
+
+Use:
+
+```
+src/
+
+├── app/
+│   ├── (routes)/
+│   ├── api/
+│   ├── providers/
+│   ├── layout.tsx
+│   ├── loading.tsx
+│   ├── error.tsx
+│   └── globals.css
+│
+├── features/
+│   ├── auth/
+│   ├── users/
+│   ├── products/
+│   ├── companies/
+│   └── ...
+│
+├── components/
+│   ├── ui/
+│   ├── common/
+│   └── layouts/
+│
+├── services/
+│   ├── api/
+│   ├── storage/
+│   └── websocket/
+│
+├── store/
+│
+├── hooks/
+│
+├── lib/
+│
+├── types/
+│
+├── utils/
+│
+└── config/
+```
+
+---
+
+# Next.js App Router Rules
+
+Use Next.js App Router.
+
+Routes must be created using:
+
+```
+app/
+```
+
+Example:
+
+```
+app/dashboard/page.tsx
+```
+
+creates:
+
+```
+/dashboard
+```
+
+Do not use React Router.
+
+Do not manually create routing logic.
+
+---
+
+# Server Components vs Client Components
+
+## Default Rule
+
+All components should be Server Components by default.
+
+Example:
+
+```tsx
+export default function UsersPage(){
+
+ return (
+   <div>
+     Users
+   </div>
+ )
+
+}
+```
+
+---
+
+## Client Components
+
+Use Client Components only when required.
+
+Examples:
+
+- useState
+- useEffect
+- Redux hooks
+- Browser APIs
+- Event handlers
+
+Then add:
+
+```tsx
+"use client"
+```
+
+at the top.
+
+Example:
+
+```tsx
+"use client"
+
+export default function LoginForm(){
+
+}
+```
+
+Do not add `"use client"` unnecessarily.
+
+---
+
+# Feature Structure
+
+Each business feature must be isolated.
+
+Example:
+
+```
+features/auth/
+
+├── api/
+│   └── auth.api.ts
+│
+├── components/
+│   └── LoginForm.tsx
+│
+├── hooks/
+│   └── useLogin.ts
+│
+├── store/
+│   └── auth.slice.ts
+│
+├── schemas/
+│   └── auth.schema.ts
+│
+├── types.ts
+│
+└── index.ts
+```
+
+Example business features:
+
+```
+features/
+
+auth
+users
+companies
+machines
+inventory
+sales
+payments
+reports
+settings
+```
+
+---
+
+# Component Architecture
+
+## Shared Components
+
+Reusable components belong here:
+
+```
+components/ui/
+```
+
+Examples:
+
+```
+Button
+Modal
+Input
+Table
+Dropdown
+Form
+```
+
+These components must not contain business logic.
+
+---
+
+Business components belong inside features:
+
+Example:
+
+```
+features/products/components/ProductCard.tsx
+```
+
+Not:
+
+```
+components/ProductCard.tsx
+```
+
+---
+
+# API Architecture
+
+All API communication must go through Axios.
+
+Never call Axios directly inside components.
+
+Wrong:
+
+```tsx
+function Users(){
+
+ axios.get("/users")
+
+}
+```
+
+Correct:
+
+```
+Component
+
+↓
+
+Hook
+
+↓
+
+Feature API
+
+↓
+
+Axios Service
+
+↓
+
+Backend API
+```
+
+---
+
+Axios configuration:
+
+```
+services/api/
+
+axios.ts
+interceptors.ts
+endpoints.ts
+```
+
+Example:
+
+```ts
+export const api = axios.create({
+ baseURL: process.env.NEXT_PUBLIC_API_URL
+})
+```
+
+---
+
+# Redux Toolkit Rules
+
+Redux Toolkit is used only for global client state.
+
+Examples:
+
+- Authentication state
+- User preferences
+- Application settings
+- Global UI state
+
+
+Structure:
+
+```
+store/
+
+├── index.ts
+├── provider.tsx
+└── slices/
+```
+
+Feature state:
+
+```
+features/auth/store/
+
+auth.slice.ts
+auth.selector.ts
+```
+
+---
+
+Do not store everything in Redux.
+
+Use:
+
+```
+useState
+```
+
+for local component state.
+
+Use Redux only for shared application state.
+
+---
+
+# Redux Provider in Next.js
+
+Redux Provider must be a Client Component.
+
+Example:
+
+```
+store/provider.tsx
+```
+
+```tsx
+"use client"
+
+import {Provider} from "react-redux"
+
+export function ReduxProvider({
+ children
+}){
+
+ return (
+   <Provider store={store}>
+      {children}
+   </Provider>
+ )
+
+}
+```
+
+Register it in:
+
+```
+app/layout.tsx
+```
+
+---
+
+# TypeScript Rules
+
+The project must be strongly typed.
+
+Avoid:
+
+```ts
+any
+```
+
+Prefer:
+
+```ts
+interface
+type
+generics
+unknown
+```
+
+Each feature owns its types:
+
+Example:
+
+```
+features/users/types.ts
+```
+
+---
+
+# Tailwind CSS Rules
+
+Use Tailwind for:
+
+- Layout
+- Spacing
+- Responsive design
+- Custom styling
+
+
+Example:
+
+```tsx
+<div className="flex items-center gap-4">
+```
+
+Avoid unnecessary CSS files.
+
+Global CSS should only contain:
+
+- Variables
+- Theme
+- Global styles
+
+---
+
+# Ant Design Rules
+
+Use Ant Design for complex UI components:
+
+Examples:
+
+- Tables
+- Forms
+- Modal
+- DatePicker
+- Dropdown
+- Pagination
+- Notification
+
+
+Use Tailwind for:
+
+- Layout
+- Positioning
+- Spacing
+- Responsive behavior
+
+
+Do not rewrite Ant Design components unless required.
+
+---
+
+# Data Fetching Rules
+
+Follow this structure:
+
+```
+Page
+
+↓
+
+Feature Component
+
+↓
+
+Custom Hook
+
+↓
+
+API Layer
+
+↓
+
+Axios
+
+↓
+
+Backend
+```
+
+Never put business API logic inside UI components.
+
+---
+
+# Dependency Rules
+
+Features should remain independent.
+
+Wrong:
+
+```
+features/products
+
+imports
+
+features/auth
+```
+
+Correct:
+
+```
+features/products
+
+↓
+
+services
+components
+utils
+```
+
+Shared logic belongs in:
+
+```
+components/
+services/
+utils/
+lib/
+```
+
+---
+
+# Refactoring Rules
+
+When refactoring an existing project:
+
+1. Analyze the current structure first.
+2. Do not rewrite everything immediately.
+3. Move code gradually into feature folders.
+4. Preserve existing functionality.
+5. Improve:
+   - Type safety
+   - Separation of concerns
+   - API abstraction
+   - Component reuse
+   - State management
+
+
+---
+
+# Code Quality Rules
+
+Every file should have one responsibility.
+
+Avoid:
+
+```
+User.tsx
+
+- UI
+- API
+- Validation
+- State
+```
+
+Prefer:
+
+```
+UserCard.tsx
+
+user.api.ts
+
+useUser.ts
+
+user.schema.ts
+```
+
+---
+
+# Final Architecture Goal
+
+The final project must be:
+
+- Scalable
+- Maintainable
+- Team-friendly
+- Type-safe
+- Easy to test
+- Ready for future features
+
+Always prefer clean architecture over fast implementation.
+
+Before creating code, understand where the code belongs in this architecture.