From dbc8866056f2a94808fda3988cc0729754434be7 Mon Sep 17 00:00:00 2001 From: elvira Date: Thu, 9 Jul 2026 19:20:20 +0300 Subject: [PATCH 01/83] vite --- vite.config.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/vite.config.js b/vite.config.js index 98e081a..a4f1a7c 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,30 +1,30 @@ -import { defineConfig } from 'vite'; -import laravel from 'laravel-vite-plugin'; -import tailwindcss from '@tailwindcss/vite'; +import { defineConfig } from "vite"; +import laravel from "laravel-vite-plugin"; +import tailwindcss from "@tailwindcss/vite"; export default defineConfig({ build: { // Target browsers that support ES modules natively (Chrome 89+, Firefox 89+, // Safari 15+, Edge 89+). Eliminates legacy polyfills flagged by PageSpeed. - target: ['es2022', 'chrome89', 'firefox89', 'safari15', 'edge89'], + target: ["es2022", "chrome89", "firefox89", "safari15", "edge89"], }, plugins: [ laravel({ - input: ['resources/css/app.css', 'resources/js/app.js'], + input: ["resources/css/app.css", "resources/js/app.js"], refresh: true, }), tailwindcss(), ], server: { - host: '0.0.0.0', - port: 5173, + host: "0.0.0.0", + port: 5174, strictPort: true, cors: true, hmr: { - host: 'localhost', + host: "localhost", }, watch: { - ignored: ['**/storage/framework/views/**'], + ignored: ["**/storage/framework/views/**"], }, }, }); From ace8290c627fc66574bc1bb2cc10d9bd419a18c4 Mon Sep 17 00:00:00 2001 From: elvira Date: Fri, 10 Jul 2026 16:55:57 +0300 Subject: [PATCH 02/83] composer lock --- composer.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/composer.lock b/composer.lock index dec6718..9573c6c 100644 --- a/composer.lock +++ b/composer.lock @@ -565,11 +565,11 @@ }, { "name": "boboko/core", - "version": "0.1.1", + "version": "0.2.0", "source": { "type": "git", "url": "https://code.radical-elements.com/boboko/core.git", - "reference": "96ad89b6b8a99e628e438b6c724c2a0e4dde8c61" + "reference": "0524380ab0922729d177e7bf000c61be1fba440a" }, "require": { "laravel/framework": "^12.0", @@ -605,7 +605,7 @@ } }, "description": "Core module — authentication and shared panel behaviour", - "time": "2026-07-10T09:51:29+00:00" + "time": "2026-07-10T12:21:42+00:00" }, { "name": "brick/math", From bf8b9219fc1d7e882eb0ed3b6ea614474f8d1b01 Mon Sep 17 00:00:00 2001 From: elvira Date: Fri, 31 Jul 2026 17:41:55 +0300 Subject: [PATCH 03/83] setting up front 1 --- CLAUDE.md | 192 ++++++++++++ app/Http/Controllers/ProductController.php | 45 +++ package.json | 4 +- public/images/logo.png | Bin 0 -> 88966 bytes resources/css/app.css | 286 +++++++++++++++++- resources/css/fonts.css | 54 ++++ .../manrope/manrope-v20-greek_latin-200.woff2 | Bin 0 -> 16896 bytes .../manrope/manrope-v20-greek_latin-300.woff2 | Bin 0 -> 17516 bytes .../manrope/manrope-v20-greek_latin-500.woff2 | Bin 0 -> 17476 bytes .../manrope/manrope-v20-greek_latin-600.woff2 | Bin 0 -> 17580 bytes .../manrope/manrope-v20-greek_latin-700.woff2 | Bin 0 -> 17632 bytes .../manrope/manrope-v20-greek_latin-800.woff2 | Bin 0 -> 16996 bytes .../manrope-v20-greek_latin-regular.woff2 | Bin 0 -> 17512 bytes resources/js/app.js | 11 +- .../js/stimulus/back-to-top-controller.js | 22 ++ .../controllers/dropdown_controller.js | 17 ++ resources/js/stimulus/index.js | 20 ++ .../js/stimulus/product-form-controller.js | 50 +++ .../js/stimulus/product-gallery-controller.js | 116 +++++++ resources/js/stimulus/quantity-controller.js | 39 +++ .../js/stimulus/star-rating-controller.js | 31 ++ resources/js/stimulus/tabs-controller.js | 21 ++ resources/js/utils/strip-accents.js | 60 ++++ .../views/components/back-to-top.blade.php | 26 ++ .../views/components/breadcrumb.blade.php | 30 ++ resources/views/components/footer.blade.php | 66 ++++ resources/views/components/header.blade.php | 49 +++ .../views/components/newsletter.blade.php | 29 ++ .../views/components/product-grid.blade.php | 21 ++ .../views/components/review-card.blade.php | 27 ++ .../views/components/review-form.blade.php | 66 ++++ .../views/components/reviews-stars.blade.php | 36 +++ .../views/components/ui/button.blade.php | 26 ++ .../views/components/ui/checkbox.blade.php | 26 ++ .../components/ui/color-swatch.blade.php | 64 ++++ resources/views/components/ui/field.blade.php | 35 +++ resources/views/components/ui/icon.blade.php | 50 +++ resources/views/components/ui/input.blade.php | 26 ++ .../components/ui/payment-icon.blade.php | 53 ++++ .../components/ui/product-card.blade.php | 33 ++ .../views/components/ui/quantity.blade.php | 38 +++ resources/views/components/ui/tabs.blade.php | 50 +++ .../views/components/ui/textarea.blade.php | 22 ++ resources/views/layouts/app.blade.php | 37 +++ resources/views/product/show.blade.php | 236 +++++++++++++++ resources/views/product/show2.blade.php | 236 +++++++++++++++ routes/web.php | 9 +- vite.config.js | 2 +- 48 files changed, 2250 insertions(+), 11 deletions(-) create mode 100644 CLAUDE.md create mode 100644 app/Http/Controllers/ProductController.php create mode 100644 public/images/logo.png create mode 100644 resources/css/fonts.css create mode 100644 resources/fonts/manrope/manrope-v20-greek_latin-200.woff2 create mode 100644 resources/fonts/manrope/manrope-v20-greek_latin-300.woff2 create mode 100644 resources/fonts/manrope/manrope-v20-greek_latin-500.woff2 create mode 100644 resources/fonts/manrope/manrope-v20-greek_latin-600.woff2 create mode 100644 resources/fonts/manrope/manrope-v20-greek_latin-700.woff2 create mode 100644 resources/fonts/manrope/manrope-v20-greek_latin-800.woff2 create mode 100644 resources/fonts/manrope/manrope-v20-greek_latin-regular.woff2 create mode 100644 resources/js/stimulus/back-to-top-controller.js create mode 100644 resources/js/stimulus/controllers/dropdown_controller.js create mode 100644 resources/js/stimulus/index.js create mode 100644 resources/js/stimulus/product-form-controller.js create mode 100644 resources/js/stimulus/product-gallery-controller.js create mode 100644 resources/js/stimulus/quantity-controller.js create mode 100644 resources/js/stimulus/star-rating-controller.js create mode 100644 resources/js/stimulus/tabs-controller.js create mode 100644 resources/js/utils/strip-accents.js create mode 100644 resources/views/components/back-to-top.blade.php create mode 100644 resources/views/components/breadcrumb.blade.php create mode 100644 resources/views/components/footer.blade.php create mode 100644 resources/views/components/header.blade.php create mode 100644 resources/views/components/newsletter.blade.php create mode 100644 resources/views/components/product-grid.blade.php create mode 100644 resources/views/components/review-card.blade.php create mode 100644 resources/views/components/review-form.blade.php create mode 100644 resources/views/components/reviews-stars.blade.php create mode 100644 resources/views/components/ui/button.blade.php create mode 100644 resources/views/components/ui/checkbox.blade.php create mode 100644 resources/views/components/ui/color-swatch.blade.php create mode 100644 resources/views/components/ui/field.blade.php create mode 100644 resources/views/components/ui/icon.blade.php create mode 100644 resources/views/components/ui/input.blade.php create mode 100644 resources/views/components/ui/payment-icon.blade.php create mode 100644 resources/views/components/ui/product-card.blade.php create mode 100644 resources/views/components/ui/quantity.blade.php create mode 100644 resources/views/components/ui/tabs.blade.php create mode 100644 resources/views/components/ui/textarea.blade.php create mode 100644 resources/views/layouts/app.blade.php create mode 100644 resources/views/product/show.blade.php create mode 100644 resources/views/product/show2.blade.php diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..3e7a5ae --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,192 @@ +# Front-end Guidelines + +This is a Laravel 12 e-commerce project using Lunar PHP (headless). These guidelines apply to all front-end work. + +--- + +## Project Language Settings + + +- **Greek register:** `singular` — use the informal second person (εσύ/σου/σε). e.g. "Η κριτική σου", "Το όνομά σου", "Το email σου" + + +All UI text written for this project must follow the register above. + +--- + +## Tech Stack + +- **Laravel 12** + **Lunar PHP 1.3** (headless e-commerce) +- **Blade** for templating (`@extends`, `@section`, `@yield`, components) +- **Tailwind CSS v4** via `@tailwindcss/vite` — zero config, `@import 'tailwindcss'` only +- **Stimulus JS** for interactivity — controllers registered in `resources/js/stimulus/index.js` +- **Popover API** (native browser) for overlays — no JS overlay libraries +- SQLite database, `npm run dev` for local asset compilation + +--- + +## Key File Locations + +| What | Where | +|---|---| +| CSS entry point | `resources/css/app.css` | +| Font definitions | `resources/css/fonts.css` | +| JS entry point | `resources/js/app.js` | +| Stimulus controllers | `resources/js/stimulus/` | +| JS utilities | `resources/js/utils/` | +| Layout | `resources/views/layouts/app.blade.php` | +| UI components (atomic) | `resources/views/components/ui/` | +| Section components | `resources/views/components/` | +| Page views | `resources/views/{page}/` | +| Public assets | `public/images/` | + +--- + +## Design Reference + +The Bluebeard template (`resources/css/bluebeard.css`) is used as a **reference only** for colors, spacing, typography, and effects. It is never imported or used directly. Everything is translated to Tailwind utilities or custom CSS where unavoidable. + +The boboko project at `/Users/farenoubi/Projects/boboko-test` can be referenced for CSS architecture patterns. + +--- + +## Tailwind vs. Custom CSS + +**Prefer Tailwind utilities by default.** Write custom CSS only when something genuinely cannot be expressed as a utility: + +- Pseudo-elements (`::before`, `::after`) with dynamic transforms or transitions +- Complex descendant/sibling selectors (e.g. `.group:hover .nav-dropdown`) +- Keyframe animations +- The underline-slide animation on nav links (background-size trick) + +**Never** write inline CSS (`style="..."`). **Never** write custom CSS for something Tailwind already covers. + +When a component requires a CSS class (e.g. as a hook for a pseudo-element), still put all properties that can be Tailwind utilities as classes on the element in the component file. The CSS rule should contain only what genuinely cannot be a utility — pseudo-elements, complex selectors, keyframes. Do not default to putting all styles in the CSS class just because the class exists. + +When custom CSS is needed, add it to `resources/css/app.css` inside `@layer components`. Keep the rule minimal — only what can't be a utility. + +--- + +## Design Tokens + +Defined in `@theme {}` in `app.css`: + +- `--font-sans`: Manrope (body text) +- `--font-display`: Manrope (headings, nav, buttons) — kept separate from `--font-sans` in case they diverge later + +Reuse existing colors (`neutral-200`, `black`), font sizes, spacing, and border styles as components are built. Do not invent new values — check what's already in use first. + +--- + +## Component Structure + +### `resources/views/components/ui/` — atomic, reusable UI elements + +Single-purpose, stateless or minimally stateful elements used across many contexts: + +- `button.blade.php` ✓ +- `input.blade.php` +- `input-group.blade.php` +- `icon.blade.php` +- `image.blade.php` +- `tabs.blade.php` / `tab.blade.php` +- `accordion.blade.php` +- `tooltip.blade.php` +- `badge.blade.php` +- etc. + +### `resources/views/components/` — section-level or composite components + +Larger reusable blocks made of several elements, often with real content: + +- `header.blade.php` ✓ +- `footer.blade.php` +- `cta.blade.php` +- `product-card.blade.php` +- `contact-section.blade.php` +- etc. + +--- + +## Interactivity + +### Popover API for overlays + +For **tooltips, modals, dropdowns, and any overlay**: use the native [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) with CSS — no JS, no libraries. + +```html + +
...
+``` + +Style open/closed states with `[popover]` and `:popover-open` selectors in CSS. + +### Stimulus JS for behavior + +Use Stimulus when JS is genuinely needed (form handling, cart updates, dynamic state, etc.). + +- Keep controllers lean: manage state and coordinate the DOM, don't build UI inside them +- Use Stimulus values, targets, and outlets — avoid reading from the DOM imperatively +- **Never inject HTML strings or classes from inside a controller.** Instead, drive appearance via data attributes or CSS classes toggled on existing elements, and let CSS handle the visual result +- Never write inline JS (`onclick="..."`, etc.) + +### Pure CSS for simple interactions + +Hover dropdowns, focus states, active states — handle with CSS (`:hover`, `:focus-within`, `.group:hover`) before reaching for Stimulus. + +--- + +## Accessibility (ARIA) + +Always add ARIA attributes. This is not optional: + +- Interactive elements: `aria-label`, `aria-expanded`, `aria-controls`, `aria-haspopup` as appropriate +- Images: meaningful `alt` text, or `alt=""` + `aria-hidden="true"` for decorative images +- Icons used as buttons: `aria-label` on the button, `aria-hidden="true"` on the SVG +- Form fields: always associated `