From bf8b9219fc1d7e882eb0ed3b6ea614474f8d1b01 Mon Sep 17 00:00:00 2001 From: elvira Date: Fri, 31 Jul 2026 17:41:55 +0300 Subject: [PATCH] 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 `