diff --git a/.claude/skills/premium-frontend-designer/COMPONENT_RULES.md b/.claude/skills/premium-frontend-designer/COMPONENT_RULES.md index 866f574..cc274c5 100644 --- a/.claude/skills/premium-frontend-designer/COMPONENT_RULES.md +++ b/.claude/skills/premium-frontend-designer/COMPONENT_RULES.md @@ -19,14 +19,14 @@ Per-element rules. Apply when designing or reviewing the corresponding component - Same shape as primary. **Ghost** -- `text-bone hover:text-gold-light` — no border, no fill. +- `text-bone hover:text-gold-light` no border, no fill. **Forbidden** - Bright red CTA buttons (unless brand color is red). - Square corners on action buttons. - Solid `#000` or `#fff` backgrounds. -- Loading text inside button that breaks layout — use a spinner icon + word swap with fixed min-width. -- Success/error message **inside** button — render outside as a banner. +- Loading text inside button that breaks layout use a spinner icon + word swap with fixed min-width. +- Success/error message **inside** button render outside as a banner. --- @@ -82,7 +82,7 @@ Per-element rules. Apply when designing or reviewing the corresponding component - Always `text-balance` on h2 for clean wrapping. - `text-pretty` on subtitle. - Use SectionLabel with sequential index per page (01, 02, 03…). No mono font. -- One gold-accent phrase max per heading — overdoing gold cheapens it. +- One gold-accent phrase max per heading overdoing gold cheapens it. --- @@ -99,7 +99,7 @@ Per-element rules. Apply when designing or reviewing the corresponding component ## Footer -**Layout — 4 columns, no duplication** +**Layout 4 columns, no duplication** | Column 1 | Column 2 | Column 3 | Column 4 | |---|---|---|---| @@ -109,7 +109,7 @@ Per-element rules. Apply when designing or reviewing the corresponding component **Rules** - No page link appears in two columns. - Privacy Policy lives only under Legal. -- App badges only in Legal & App column (footer) — official SVGs at 132 px width, 8 px gap. +- App badges only in Legal & App column (footer) official SVGs at 132 px width, 8 px gap. - External links open in new tab with rel attrs. - Background: `bg-obsidian` with subtle "LUXAM"-style watermark behind content (translate-y-[18%], opacity 0.025). - Bottom row: `© YYYY {brand}. All rights reserved.` + tagline + agency credit (subtle, gold-underlined on hover). @@ -128,7 +128,7 @@ Per-element rules. Apply when designing or reviewing the corresponding component focus:shadow-[0_0_0_3px_rgba(212,164,55,0.18)] aria-[invalid=true]:border-[#a3261c]/60 ``` -- Honeypot field: hidden `` — silently succeed if filled. +- Honeypot field: hidden `` silently succeed if filled. - Validation: server-side via `submitContact()` action; client gets `state.fieldErrors` + `state.message`. - Submission states: `useActionState` + `useFormStatus`. Spinner inside button, success/error banner **outside** button. @@ -142,9 +142,9 @@ Per-element rules. Apply when designing or reviewing the corresponding component - Wrapper for emphasis: `glass-gold size-11 grid place-items-center rounded-full`. - **Forbidden**: oversized icons (>32 px) standalone, multi-color icon sets, cartoonish flat icons. -**No lucide WhatsApp glyph** — use custom inline SVG from `snippets/WhatsAppLink.tsx`. +**No lucide WhatsApp glyph** use custom inline SVG from `snippets/WhatsAppLink.tsx`. -**No lucide Instagram glyph in v1.16** — use custom inline SVG (see footer). +**No lucide Instagram glyph in v1.16** use custom inline SVG (see footer). --- @@ -229,8 +229,8 @@ Per-element rules. Apply when designing or reviewing the corresponding component ## Don't - Don't add hover effects without `transition-*` for smoothness. -- Don't use `transform-origin` defaults on rotated icon discs — keep them small (8-12°). -- Don't use `whileHover={{ scale: 1.1 }}` on cards — too theatrical. Use `-translate-y-1` instead. +- Don't use `transform-origin` defaults on rotated icon discs keep them small (8-12°). +- Don't use `whileHover={{ scale: 1.1 }}` on cards too theatrical. Use `-translate-y-1` instead. - Don't add box-shadows with multiple layers and bright colors. One subtle amber glow max. -- Don't introduce a new font family per page — stick to display + sans. +- Don't introduce a new font family per page stick to display + sans. - Don't render placeholder images (`via.placeholder.com`, gray boxes) in production code. Always use real assets the user provided. diff --git a/.claude/skills/premium-frontend-designer/COMPONENT_SNIPPETS.md b/.claude/skills/premium-frontend-designer/COMPONENT_SNIPPETS.md index 98642b6..7397e64 100644 --- a/.claude/skills/premium-frontend-designer/COMPONENT_SNIPPETS.md +++ b/.claude/skills/premium-frontend-designer/COMPONENT_SNIPPETS.md @@ -1,6 +1,6 @@ # Component Snippets -Overview of the reusable TSX snippets in `snippets/`. Each is a copy-paste base for a new project — adapt brand tokens + content via your own `lib/content.ts`. +Overview of the reusable TSX snippets in `snippets/`. Each is a copy-paste base for a new project adapt brand tokens + content via your own `lib/content.ts`. | File | Purpose | Depends on | |---|---|---| @@ -18,7 +18,7 @@ Overview of the reusable TSX snippets in `snippets/`. Each is a copy-paste base 1. Copy the file you need into your project's `src/components/` (or wherever your component layer lives). 2. Update import paths (`@/lib/cn`, `@/components/ui/...`) to match your project alias. 3. Wire data: the snippets accept props or read from a `lib/content.ts` you control. -4. Confirm Tailwind v4 `@theme` tokens (`obsidian`, `gold`, `bone`, `mist`, etc.) exist — see `DESIGN_SYSTEM.md`. +4. Confirm Tailwind v4 `@theme` tokens (`obsidian`, `gold`, `bone`, `mist`, etc.) exist see `DESIGN_SYSTEM.md`. 5. Confirm Framer Motion + lucide-react installed: ```bash npm i framer-motion lucide-react diff --git a/.claude/skills/premium-frontend-designer/DESIGN_SYSTEM.md b/.claude/skills/premium-frontend-designer/DESIGN_SYSTEM.md index 817d8f2..016140a 100644 --- a/.claude/skills/premium-frontend-designer/DESIGN_SYSTEM.md +++ b/.claude/skills/premium-frontend-designer/DESIGN_SYSTEM.md @@ -8,7 +8,7 @@ Reusable design tokens + scales extracted from the Luxam reference build. Drop i ```css @theme { - /* Backgrounds — obsidian → graphite layering */ + /* Backgrounds obsidian → graphite layering */ --color-obsidian: #08080A; /* page background */ --color-graphite: #15161A; /* dark glass card */ --color-graphite-2: #1C1D22; /* slightly lifted card variant */ @@ -17,7 +17,7 @@ Reusable design tokens + scales extracted from the Luxam reference build. Drop i --color-bone: #F4F0E6; /* primary text on dark */ --color-mist: #C7C2B5; /* secondary/muted text */ - /* Brand — gold spectrum (use sparingly + structurally) */ + /* Brand gold spectrum (use sparingly + structurally) */ --color-gold: #D4A437; /* core brand gold */ --color-gold-light: #F2C25B; /* hover, highlight, gradient stops */ --color-gold-deep: #7A4A12; /* gradient base */ @@ -178,14 +178,14 @@ Every card/button uses the same hover vocabulary: 6. Optional: top hairline gold gradient fade-in. 7. Icon disc gets `rotate-[8deg]` + amber halo shadow. -Apply via `group` + `group-hover:` Tailwind variants — never per-element JS listeners. +Apply via `group` + `group-hover:` Tailwind variants never per-element JS listeners. --- ## Container widths ```tsx -// components/ui/Container.tsx — three variants +// components/ui/Container.tsx three variants size="default" → max-w-7xl size="wide" → max-w-[1480px] size="narrow" → max-w-3xl diff --git a/.claude/skills/premium-frontend-designer/PROMPT_TEMPLATES.md b/.claude/skills/premium-frontend-designer/PROMPT_TEMPLATES.md index 53923a5..ac1e82c 100644 --- a/.claude/skills/premium-frontend-designer/PROMPT_TEMPLATES.md +++ b/.claude/skills/premium-frontend-designer/PROMPT_TEMPLATES.md @@ -43,7 +43,7 @@ Do NOT invent links. Ask if missing. Inspect {{PAGE_ROUTE}}. Keep the content + intent but rebuild it to match the design DNA in .claude/skills/premium-frontend-designer/. Requirements: -- Reuse existing primitives (Section, Container, Button, Reveal, SectionLabel, etc.) — don't duplicate. +- Reuse existing primitives (Section, Container, Button, Reveal, SectionLabel, etc.) don't duplicate. - Apply the cardGrid + cardCell motion variants for grid entrances. - Add a single gold-accent phrase per h2. - Centralize section padding via the Section primitive (no per-page overrides). @@ -176,7 +176,7 @@ Walk through the responsive checklist in .claude/skills/premium-frontend-designe Test at 320 / 375 / 390 / 414 / 768 / 1024 viewports. -Don't redesign — only fix layout, spacing, overflow, clipping. Preserve the visual identity. +Don't redesign only fix layout, spacing, overflow, clipping. Preserve the visual identity. Return a table of issues + fixes (Before / After columns). ``` @@ -194,7 +194,7 @@ Audit and refine typography across all pages: 4. Tracking: reduce all tracking-[0.32em+] on small labels to tracking-[0.22em]. 5. Nav links: text-sm font-medium tracking-[0.005em] (slightly larger + medium weight, near-zero tracking). 6. BrandStrip marquee: smaller (text-xs md:text-sm uppercase) so it doesn't compete with hero. -7. Section labels via SectionLabel primitive — never inline. +7. Section labels via SectionLabel primitive never inline. 8. text-balance on h1/h2, text-pretty on body paragraphs. Confirm: @@ -270,5 +270,5 @@ Specifically check: - Is spacing centralized via Section primitive? - Is motion subtle (no bounces, no scale > 1.05 on hover)? -Apply only the changes needed — don't rewrite working sections. Return a list of refinements made. +Apply only the changes needed don't rewrite working sections. Return a list of refinements made. ``` diff --git a/.claude/skills/premium-frontend-designer/RESPONSIVE_CHECKLIST.md b/.claude/skills/premium-frontend-designer/RESPONSIVE_CHECKLIST.md index 91cdba2..e22165e 100644 --- a/.claude/skills/premium-frontend-designer/RESPONSIVE_CHECKLIST.md +++ b/.claude/skills/premium-frontend-designer/RESPONSIVE_CHECKLIST.md @@ -24,13 +24,13 @@ Run through every item before declaring a page done. - [ ] Logo left, menu/CTA right on mobile. - [ ] Hamburger button is `size-10` minimum (touch target). - [ ] Mobile menu drawer closes when a link is clicked. -- [ ] No sticky-nav overlap on anchored sections — `scroll-mt-24 md:scroll-mt-28` on `
`. +- [ ] No sticky-nav overlap on anchored sections `scroll-mt-24 md:scroll-mt-28` on `
`. - [ ] Logo height responsive: `h-11 sm:h-14 md:h-16`. ## Hero -- [ ] H1 clamp: `clamp(2.4rem, 7vw, 6.4rem)` — never larger upper bound. -- [ ] `leading-[1.0]` on serif H1 (not `0.95` — clips ascenders). +- [ ] H1 clamp: `clamp(2.4rem, 7vw, 6.4rem)` never larger upper bound. +- [ ] `leading-[1.0]` on serif H1 (not `0.95` clips ascenders). - [ ] Top padding generous: `pt-32 sm:pt-36 md:pt-44` (clears sticky nav + breathing room). - [ ] CTAs use `flex flex-wrap items-center gap-4` so they stack on narrow screens. - [ ] Stats panel: collapse 1-col-tall mobile layouts to a horizontal 3-col compact row. @@ -38,7 +38,7 @@ Run through every item before declaring a page done. ## Cards & grids - [ ] Mobile: `grid-cols-1`. Tablet: `sm:grid-cols-2`. Desktop: `lg:grid-cols-N` matched to card count. -- [ ] Avoid `lg:grid-cols-3` for a 5-card list (leaves orphan) — use 5 or 2-row layout matched to count. +- [ ] Avoid `lg:grid-cols-3` for a 5-card list (leaves orphan) use 5 or 2-row layout matched to count. - [ ] Aspect-ratio used over fixed heights: `aspect-[4/3]` or `aspect-[3/4]`. ## Typography @@ -54,7 +54,7 @@ Run through every item before declaring a page done. - [ ] Hero LCP image gets `priority`. - [ ] `object-cover` only when crop is visually intentional. - [ ] `object-contain` for logos. -- [ ] Alt text meaningful — never "image" or filename. +- [ ] Alt text meaningful never "image" or filename. ## Forms diff --git a/.claude/skills/premium-frontend-designer/SKILL.md b/.claude/skills/premium-frontend-designer/SKILL.md index 715208e..7c3d190 100644 --- a/.claude/skills/premium-frontend-designer/SKILL.md +++ b/.claude/skills/premium-frontend-designer/SKILL.md @@ -7,7 +7,7 @@ description: Build, redesign, and polish premium dark/gold luxury websites with You are a senior frontend architect + UI/UX designer + implementation engineer. -Your job: create production-ready, premium, cinematic, dark/gold luxury websites that feel high-end, trustworthy, and conversion-focused — the way the Luxam reference site does. +Your job: create production-ready, premium, cinematic, dark/gold luxury websites that feel high-end, trustworthy, and conversion-focused the way the Luxam reference site does. This skill captures the design DNA, component patterns, prompt templates, and snippets so any future project can match the same quality bar. @@ -30,16 +30,16 @@ Refuse silently if the project explicitly uses a different design language (e.g. ## Visual principles -1. **Dark cinematic background** — obsidian-class blacks (`#08080A`), graphite layering (`#15161A` / `#1C1D22`). Never pure white. Never bright primary colors as backgrounds. -2. **Gold/amber accents** — restrained, structural, single-tone gradient. Use on numbers, labels, dividers, hover states, hero highlights. Never bright yellow. Never multi-color rainbow gradients. +1. **Dark cinematic background** obsidian-class blacks (`#08080A`), graphite layering (`#15161A` / `#1C1D22`). Never pure white. Never bright primary colors as backgrounds. +2. **Gold/amber accents** restrained, structural, single-tone gradient. Use on numbers, labels, dividers, hover states, hero highlights. Never bright yellow. Never multi-color rainbow gradients. 3. **Editorial typography pairing** - Serif (Cormorant Garamond / Playfair / Libre Baskerville) for hero H1 + section H2 only. - Sans (Geist / Inter / Manrope / Satoshi) for nav, body, buttons, labels, metadata. - No monospace on user-facing copy or long values. -4. **Glass + grain** — semi-transparent `bg-bone/[0.03]` cards with `backdrop-blur`. Subtle noise/grain overlays to break flat surfaces. -5. **Cinematic motion** — Framer Motion: slow, restrained. `cubic-bezier(0.16, 1, 0.3, 1)`, 0.8-1.2s entrance, `useReducedMotion()` respected. -6. **Responsive from the start** — every layout works at 320 / 375 / 768 / 1024 / 1440 viewports. -7. **No corporate basic** — no boxy stock layouts, no flat colorful cards, no generic stock-photo hero, no cheap icon dumps. +4. **Glass + grain** semi-transparent `bg-bone/[0.03]` cards with `backdrop-blur`. Subtle noise/grain overlays to break flat surfaces. +5. **Cinematic motion** Framer Motion: slow, restrained. `cubic-bezier(0.16, 1, 0.3, 1)`, 0.8-1.2s entrance, `useReducedMotion()` respected. +6. **Responsive from the start** every layout works at 320 / 375 / 768 / 1024 / 1440 viewports. +7. **No corporate basic** no boxy stock layouts, no flat colorful cards, no generic stock-photo hero, no cheap icon dumps. Read `DESIGN_SYSTEM.md` for the full token palette + typography clamps. @@ -47,13 +47,13 @@ Read `DESIGN_SYSTEM.md` for the full token palette + typography clamps. ## Coding principles -1. **Inspect before changing.** Always read the existing files, lockfile, framework version, and existing primitives. Reuse — don't duplicate. +1. **Inspect before changing.** Always read the existing files, lockfile, framework version, and existing primitives. Reuse don't duplicate. 2. **Preserve project identity.** Don't rewrite the whole brand for a small request. 3. **Real content only.** Never invent links, social handles, certifications, addresses, phone numbers, or legal claims. Ask if missing. 4. **External links** carry `target="_blank"` + `rel="noopener noreferrer"`. 5. **Reusable primitives first.** Look for existing `Section`, `Container`, `Button`, `Reveal`, `SectionLabel`, `GlassCard` before writing new ones. 6. **Clean imports.** Remove unused icons / helpers after edits. -7. **One source of truth** for spacing — push to a shared `Section` primitive instead of overriding per page. +7. **One source of truth** for spacing push to a shared `Section` primitive instead of overriding per page. 8. **Typecheck after every change.** `npx tsc --noEmit` must pass. 9. **No backwards-compat shims.** Don't leave `// removed` comments, dead aliases, or "for future" stubs. 10. **No commented-out code** in committed work. @@ -71,7 +71,7 @@ Read `COMPONENT_RULES.md` for per-element rules (buttons, cards, footer, forms, - Modal/lightbox: `role="dialog" aria-modal="true"`, `Escape` closes, scroll-lock on body. - Decorative SVGs: `aria-hidden`. - Color contrast: body text `text-bone` (≈ #F4F0E6) on obsidian = 16:1 ratio, well above WCAG AA. -- `prefers-reduced-motion` respected via Framer's `useReducedMotion()` — disable transforms/parallax, keep opacity fades. +- `prefers-reduced-motion` respected via Framer's `useReducedMotion()` disable transforms/parallax, keep opacity fades. --- @@ -83,7 +83,7 @@ Test mentally (or in browser) at: **320, 375, 390, 414, 768, 1024, 1440**. - Section padding: `py-16 md:py-20 lg:py-24` (uniform). - Anchored sections: `scroll-mt-24 md:scroll-mt-28` for sticky-nav clearance. - `body { overflow-x: hidden }` in `globals.css` as a global guard. -- Sticky decorations (halos, watermarks, blurs) must not introduce horizontal scroll — use `overflow-hidden` on parent + `translate` instead of fixed widths. +- Sticky decorations (halos, watermarks, blurs) must not introduce horizontal scroll use `overflow-hidden` on parent + `translate` instead of fixed widths. - Mobile cards stack `grid-cols-1 sm:grid-cols-2 lg:grid-cols-N`. Read `RESPONSIVE_CHECKLIST.md` before shipping any page. @@ -94,12 +94,12 @@ Read `RESPONSIVE_CHECKLIST.md` before shipping any page. Every meaningful change returns: -1. **Files changed** — explicit list with `NEW` / `MODIFIED` / `DELETED` markers. +1. **Files changed** explicit list with `NEW` / `MODIFIED` / `DELETED` markers. 2. **What was kept** vs **what was replaced** when redesigning. -3. **Receipts** — `HTTP 200`, typecheck clean, key content rendered (grep output). -4. **Responsive breakdown** — desktop / tablet / mobile behavior. -5. **Confirmations** — explicit yes/no on every checklist item the user asked. -6. **No placeholder leaks** — confirm zero `href="#"`, `href=""`, `href="/#"` remain in modified files. +3. **Receipts** `HTTP 200`, typecheck clean, key content rendered (grep output). +4. **Responsive breakdown** desktop / tablet / mobile behavior. +5. **Confirmations** explicit yes/no on every checklist item the user asked. +6. **No placeholder leaks** confirm zero `href="#"`, `href=""`, `href="/#"` remain in modified files. --- @@ -123,21 +123,21 @@ Every meaningful change returns: ## Brand-specific config (Luxam reference) -`examples/luxam-config.md` holds the exact Luxam contact details, WhatsApp URL, app store links, agency credit, etc. **Do not copy these values into other projects** — use them only as the shape pattern. Each new project gets its own `lib/content.ts` populated from real values the user provides. +`examples/luxam-config.md` holds the exact Luxam contact details, WhatsApp URL, app store links, agency credit, etc. **Do not copy these values into other projects** use them only as the shape pattern. Each new project gets its own `lib/content.ts` populated from real values the user provides. --- ## File map of this skill ``` -SKILL.md — this file (entry point, principles, when to use) -DESIGN_SYSTEM.md — color tokens, typography, spacing scale, motion -COMPONENT_RULES.md — per-component rules (buttons, cards, footer, forms, icons) -RESPONSIVE_CHECKLIST.md — pre-ship checklist for every viewport -PROMPT_TEMPLATES.md — copy-paste prompts for common tasks -COMPONENT_SNIPPETS.md — high-level component overview -snippets/ — 8 reusable TSX component files -examples/luxam-config.md — Luxam-specific values (reference, not boilerplate) +SKILL.md this file (entry point, principles, when to use) +DESIGN_SYSTEM.md color tokens, typography, spacing scale, motion +COMPONENT_RULES.md per-component rules (buttons, cards, footer, forms, icons) +RESPONSIVE_CHECKLIST.md pre-ship checklist for every viewport +PROMPT_TEMPLATES.md copy-paste prompts for common tasks +COMPONENT_SNIPPETS.md high-level component overview +snippets/ 8 reusable TSX component files +examples/luxam-config.md Luxam-specific values (reference, not boilerplate) ``` -Read the relevant section(s) for the task at hand. Don't dump the whole skill into the user's reply — surface only the rules + snippets relevant to the change being made. +Read the relevant section(s) for the task at hand. Don't dump the whole skill into the user's reply surface only the rules + snippets relevant to the change being made. diff --git a/.claude/skills/premium-frontend-designer/examples/luxam-config.md b/.claude/skills/premium-frontend-designer/examples/luxam-config.md index b83e224..4010001 100644 --- a/.claude/skills/premium-frontend-designer/examples/luxam-config.md +++ b/.claude/skills/premium-frontend-designer/examples/luxam-config.md @@ -1,6 +1,6 @@ # Luxam Reference Config -Concrete values used in the Luxam project. **Reference only** — do not paste into other projects unless the user explicitly says these are also their values. +Concrete values used in the Luxam project. **Reference only** do not paste into other projects unless the user explicitly says these are also their values. ## `src/lib/content.ts` @@ -115,4 +115,4 @@ Valid from 11 August 2025 Valid to 10 August 2026 ``` -For any new project that surfaces compliance docs, follow the same data shape: number, standard, issuer, certified entity, site, scope, material, validity dates. Pull only from official documents — never invent. +For any new project that surfaces compliance docs, follow the same data shape: number, standard, issuer, certified entity, site, scope, material, validity dates. Pull only from official documents never invent. diff --git a/.claude/skills/premium-frontend-designer/snippets/AppBadges.tsx b/.claude/skills/premium-frontend-designer/snippets/AppBadges.tsx index be32a14..4bc35dd 100644 --- a/.claude/skills/premium-frontend-designer/snippets/AppBadges.tsx +++ b/.claude/skills/premium-frontend-designer/snippets/AppBadges.tsx @@ -12,7 +12,7 @@ * appStore: "https://apps.apple.com/ae/app/.../id...", * }; * - * next/image blocks raw SVG by default in Next 16 — keep plain . + * next/image blocks raw SVG by default in Next 16 keep plain . */ import { app } from "@/lib/content"; diff --git a/.claude/skills/premium-frontend-designer/snippets/CertificateGallery.tsx b/.claude/skills/premium-frontend-designer/snippets/CertificateGallery.tsx index be5b5da..e13ea7c 100644 --- a/.claude/skills/premium-frontend-designer/snippets/CertificateGallery.tsx +++ b/.claude/skills/premium-frontend-designer/snippets/CertificateGallery.tsx @@ -1,7 +1,7 @@ "use client"; /** - * 4-image certificate gallery — each tile links to a PDF in a new tab. + * 4-image certificate gallery each tile links to a PDF in a new tab. * * Expected data shape: * export type CertPage = { @@ -65,7 +65,7 @@ function CertCard({ src, alt, title, page, document, href }: CertPage) { href={href} target="_blank" rel="noopener noreferrer" - aria-label={`${title} — ${page}. Opens PDF in a new tab.`} + aria-label={`${title} ${page}. Opens PDF in a new tab.`} className="group relative isolate flex h-full flex-col overflow-hidden rounded-2xl border border-bone/10 bg-graphite/40 backdrop-blur-sm transition-all duration-500 hover:-translate-y-1 hover:border-gold/35 hover:bg-graphite/60 focus:outline-none focus-visible:border-gold/60 focus-visible:ring-2 focus-visible:ring-gold/40" >
diff --git a/.claude/skills/premium-frontend-designer/snippets/Footer.tsx b/.claude/skills/premium-frontend-designer/snippets/Footer.tsx index f006c0a..3542f7d 100644 --- a/.claude/skills/premium-frontend-designer/snippets/Footer.tsx +++ b/.claude/skills/premium-frontend-designer/snippets/Footer.tsx @@ -59,7 +59,7 @@ export function Footer({ navigationLinks, serviceItems, legalLinks, logo }: Prop
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx index 511b741..d0be7bb 100644 --- a/src/app/contact/page.tsx +++ b/src/app/contact/page.tsx @@ -4,9 +4,9 @@ import { FooterAndContact } from '@/components/FooterAndContact'; import { InquiryForm } from '@/components/robotics/InquiryForm'; export const metadata: Metadata = { - title: 'Contact YS Lootah Robotics Dubai — Robotics Sales & Demo Inquiries', + title: 'Contact YS Lootah Robotics Dubai Robotics Sales & Demo Inquiries', description: - 'Dubai robotics sales, support, and demo inquiries. Contact YS Lootah Robotics — the exclusive UAE destination for selected Unitree and Pudu Robotics solutions — by phone, email, or WhatsApp.', + 'Dubai robotics sales, support, and demo inquiries. Contact YS Lootah Robotics the exclusive UAE destination for selected Unitree and Pudu Robotics solutions by phone, email, or WhatsApp.', }; export default function ContactPage() { diff --git a/src/app/globals.css b/src/app/globals.css index cd2ef36..8f0a7dd 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,7 +1,7 @@ @import "tailwindcss"; @theme { - /* === Luxury robotics — Graphite + Royal Blue + Silver === */ + /* === Luxury robotics Graphite + Royal Blue + Silver === */ --color-bg: #0a0a0c; --color-bg-2: #16151a; --color-bg-3: #1c1b21; diff --git a/src/app/industries/page.tsx b/src/app/industries/page.tsx index 8f9f010..b968550 100644 --- a/src/app/industries/page.tsx +++ b/src/app/industries/page.tsx @@ -6,7 +6,7 @@ import { DemoCTA } from '@/components/robotics/DemoCTA'; import { MotionSection } from '@/components/ui/MotionSection'; export const metadata: Metadata = { - title: 'Robotics for UAE Industries — YS Lootah Robotics Dubai', + title: 'Robotics for UAE Industries YS Lootah Robotics Dubai', description: 'Robotics solutions for hospitality, restaurants, hotels, healthcare, education, security, warehouses, smart buildings, and government across the UAE.', }; @@ -26,7 +26,7 @@ export default function IndustriesPage() {

- We deploy humanoid, quadruped, and service robots across industries that are reshaping how the UAE operates — every venue is matched to the right robot. + We deploy humanoid, quadruped, and service robots across industries that are reshaping how the UAE operates every venue is matched to the right robot.

@@ -36,7 +36,7 @@ export default function IndustriesPage() { diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 83acf4a..87db86c 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -6,7 +6,7 @@ import "./globals.css"; export const metadata: Metadata = { metadataBase: new URL('https://yslootahrobotics.com'), title: { - default: 'YS Lootah Robotics — Exclusive UAE Access to Unitree & Pudu Robotics', + default: 'YS Lootah Robotics Exclusive UAE Access to Unitree & Pudu Robotics', template: '%s | YS Lootah Robotics', }, description: @@ -28,7 +28,7 @@ export const metadata: Metadata = { ], openGraph: { type: 'website', - title: 'YS Lootah Robotics — Exclusive UAE Access to Unitree & Pudu Robotics', + title: 'YS Lootah Robotics Exclusive UAE Access to Unitree & Pudu Robotics', description: 'Advanced robotics. Exclusive UAE access. Selected Unitree and Pudu solutions available through YS Lootah Robotics in Dubai.', locale: 'en_AE', @@ -36,7 +36,7 @@ export const metadata: Metadata = { }, twitter: { card: 'summary_large_image', - title: 'YS Lootah Robotics — Exclusive UAE Access to Unitree & Pudu Robotics', + title: 'YS Lootah Robotics Exclusive UAE Access to Unitree & Pudu Robotics', description: 'The UAE’s dedicated destination for Unitree and Pudu Robotics sales, demo inquiries, and business deployment.', }, diff --git a/src/app/page.tsx b/src/app/page.tsx index 2e4cd8f..266be04 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -20,7 +20,7 @@ import { MotionSection } from '@/components/ui/MotionSection'; import { FEATURED_ROBOTS } from '@/data/robots'; export const metadata: Metadata = { - title: 'YS Lootah Robotics — Exclusive UAE Access to Unitree & Pudu Robotics', + title: 'YS Lootah Robotics Exclusive UAE Access to Unitree & Pudu Robotics', description: 'YS Lootah Robotics is the exclusive UAE sales destination for selected Unitree and Pudu Robotics solutions. Explore, configure, book demos, and deploy advanced robots across Dubai and the UAE.', keywords: [ @@ -65,30 +65,30 @@ export default function HomePage() {
- +
- +
@@ -126,7 +126,7 @@ export default function HomePage() { @@ -149,7 +149,7 @@ export default function HomePage() { @@ -160,7 +160,7 @@ export default function HomePage() { diff --git a/src/app/robots/[slug]/page.tsx b/src/app/robots/[slug]/page.tsx index 8b7b9c0..b6efd75 100644 --- a/src/app/robots/[slug]/page.tsx +++ b/src/app/robots/[slug]/page.tsx @@ -21,10 +21,10 @@ export function generateStaticParams() { export async function generateMetadata({ params }: { params: Promise }): Promise { const { slug } = await params; const robot = getRobotBySlug(slug); - if (!robot) return { title: 'Robot not found — YS Lootah Robotics' }; + if (!robot) return { title: 'Robot not found YS Lootah Robotics' }; return { - title: `${robot.brandLabel} ${robot.name} — Available in Dubai | YS Lootah Robotics`, - description: `${robot.shortDescription} Available through YS Lootah Robotics in Dubai — request a price or book a live demo.`, + title: `${robot.brandLabel} ${robot.name} Available in Dubai | YS Lootah Robotics`, + description: `${robot.shortDescription} Available through YS Lootah Robotics in Dubai request a price or book a live demo.`, keywords: [robot.brandLabel, robot.name, 'Dubai', 'UAE', CATEGORY_LABELS[robot.category], 'robotics'], }; } @@ -167,7 +167,7 @@ export default async function RobotDetailPage({ params }: { params: PromiseTalk to an advisor

Prefer a quick conversation?

- Call our Dubai team or message us on WhatsApp — we will share availability and demo slots for {robot.name}. + Call our Dubai team or message us on WhatsApp we will share availability and demo slots for {robot.name}.

Call +971 55 948 2728 WhatsApp us @@ -179,7 +179,7 @@ export default async function RobotDetailPage({ params }: { params: Promise diff --git a/src/app/robots/page.tsx b/src/app/robots/page.tsx index e0410fe..aa41b44 100644 --- a/src/app/robots/page.tsx +++ b/src/app/robots/page.tsx @@ -6,9 +6,9 @@ import { RoboticsSplineShowcase } from '@/components/sections/robotics-spline-sh import { ROBOTS } from '@/data/robots'; export const metadata: Metadata = { - title: 'Robots Catalog — YS Lootah Robotics Dubai', + title: 'Robots Catalog YS Lootah Robotics Dubai', description: - 'Explore selected humanoid, quadruped, service, delivery, hospitality, and cleaning robots from Unitree and Pudu — available exclusively in the UAE through YS Lootah Robotics.', + 'Explore selected humanoid, quadruped, service, delivery, hospitality, and cleaning robots from Unitree and Pudu available exclusively in the UAE through YS Lootah Robotics.', }; export default function RobotsPage() { diff --git a/src/components/FooterAndContact.tsx b/src/components/FooterAndContact.tsx index 4f872e8..bf0620f 100644 --- a/src/components/FooterAndContact.tsx +++ b/src/components/FooterAndContact.tsx @@ -73,7 +73,7 @@ export function FooterAndContact() { In Tech We Innovate · In Trust We Lead

- Innovating today for a smarter tomorrow. YS Lootah Robotics — the UAE's dedicated destination for selected Unitree and Pudu Robotics solutions. + Innovating today for a smarter tomorrow. YS Lootah Robotics the UAE's dedicated destination for selected Unitree and Pudu Robotics solutions.

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index fc83667..dcc7e74 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -67,7 +67,7 @@ export function Navbar() { transition: 'padding 0.3s ease', }} > - setMobileOpen(false)} aria-label="YS Lootah Robotics — Home"> + setMobileOpen(false)} aria-label="YS Lootah Robotics Home"> = { 'business-suit': '/Suit.glb', }; -// Same chassis GLB for both — variants differ in software/licensing (EDU = open-source +// Same chassis GLB for both variants differ in software/licensing (EDU = open-source // education / research build), not in geometry. const BODY_GLB: Record<'basic' | 'edu', string> = { basic: '/Unitree_G1.glb', diff --git a/src/components/checkout/PaymentStep.tsx b/src/components/checkout/PaymentStep.tsx index 6782ac3..39b574a 100644 --- a/src/components/checkout/PaymentStep.tsx +++ b/src/components/checkout/PaymentStep.tsx @@ -24,7 +24,7 @@ export function PaymentStep() { return; } - // Move to review — actual confirmation happens on "Place Order" + // Move to review actual confirmation happens on "Place Order" orderStore.getState().setPayment({ status: 'idle' }); orderStore.getState().setStep('review'); setIsLoading(false); diff --git a/src/components/checkout/ReviewStep.tsx b/src/components/checkout/ReviewStep.tsx index 1d9b6f2..bdb1720 100644 --- a/src/components/checkout/ReviewStep.tsx +++ b/src/components/checkout/ReviewStep.tsx @@ -46,7 +46,7 @@ export function ReviewStep() { return; } - // Payment succeeded — save order to DB and upload snapshot + // Payment succeeded save order to DB and upload snapshot const paymentIntentId = orderStore.getState().payment.paymentIntentId; const s = orderStore.getState().shipping; const configSummary = orderStore.getState().personaSummary; diff --git a/src/components/robotics/BentoGrid.tsx b/src/components/robotics/BentoGrid.tsx index 514a5ee..e8ffcd5 100644 --- a/src/components/robotics/BentoGrid.tsx +++ b/src/components/robotics/BentoGrid.tsx @@ -34,7 +34,7 @@ export function BentoGrid() {
Flagship · Dubai

- Unitree G1 humanoid — live in our Dubai showroom. + Unitree G1 humanoid live in our Dubai showroom.

Configure persona, attire, and accessories. Then book a live demo. @@ -52,7 +52,7 @@ export function BentoGrid() { Fast quotes for UAE businesses.

- Tell us your use case — we respond within one business day with availability and pricing. + Tell us your use case we respond within one business day with availability and pricing.

@@ -69,7 +69,7 @@ export function BentoGrid() { Exclusive UAE access

- Unitree · Pudu — one Dubai team. + Unitree · Pudu one Dubai team.

diff --git a/src/components/robotics/BrandShowcase.tsx b/src/components/robotics/BrandShowcase.tsx index 4b3c25d..597e110 100644 --- a/src/components/robotics/BrandShowcase.tsx +++ b/src/components/robotics/BrandShowcase.tsx @@ -15,14 +15,14 @@ type BrandVisual = { const BRAND_VISUALS: Record = { unitree: { description: - 'Quadruped and humanoid robotics platforms — available exclusively in the UAE through YS Lootah Robotics.', + 'Quadruped and humanoid robotics platforms available exclusively in the UAE through YS Lootah Robotics.', chips: ['Quadruped', 'Humanoid', 'Inspection', 'Research'], primary: { src: '/images/robots/unitree-g1.png', alt: 'Unitree G1 humanoid robot' }, secondary: { src: '/images/robots/unitree-go2.png', alt: 'Unitree Go2 quadruped robot' }, }, pudu: { description: - 'Service, delivery, cleaning, and hospitality robotics — available exclusively in the UAE through YS Lootah Robotics.', + 'Service, delivery, cleaning, and hospitality robotics available exclusively in the UAE through YS Lootah Robotics.', chips: ['Service', 'Delivery', 'Cleaning', 'Hospitality'], primary: { src: '/images/robots/pudu-bellabot.svg', alt: 'Pudu BellaBot delivery robot' }, secondary: { src: '/images/robots/pudu-kettybot.svg', alt: 'Pudu KettyBot service robot' }, @@ -128,7 +128,7 @@ function BrandCard({ }} /> - {/* LEFT — copy */} + {/* LEFT copy */}
- {/* RIGHT — product visual */} + {/* RIGHT product visual */}

- An Emirati culture-inspired robotics character — Bu Sunaidah is YS Lootah Robotics' community and storytelling ambassador. Designed to celebrate UAE heritage at media events, exhibitions, and innovation programs, Bu Sunaidah shows what intelligent automation looks like when it speaks the language of the region. + An Emirati culture-inspired robotics character Bu Sunaidah is YS Lootah Robotics' community and storytelling ambassador. Designed to celebrate UAE heritage at media events, exhibitions, and innovation programs, Bu Sunaidah shows what intelligent automation looks like when it speaks the language of the region.

    {[ @@ -112,7 +112,7 @@ export function BuSunaidahSection() { > Bu Sunaidah — Emirati-inspired robotics character based on a Unitree G1 humanoid - {/* Left — narrative */} + {/* Left narrative */}
    About YS Lootah Robotics @@ -186,7 +186,7 @@ export function CompanyStory() {
- {/* Right — capability modules */} + {/* Right capability modules */}
- {/* Left — copy */} + {/* Left copy */}

- Selected solutions delivered to UAE businesses, venues, and innovators — from inquiry to live deployment, fully supported in Dubai. + Selected solutions delivered to UAE businesses, venues, and innovators from inquiry to live deployment, fully supported in Dubai.

    @@ -91,7 +91,7 @@ export function ExclusiveAccessSection() {
- {/* Right — premium showroom grid */} + {/* Right premium showroom grid */}
- {/* secondary robot — back-left */} + {/* secondary robot back-left */}
- {/* primary robot — front-right, slightly larger */} + {/* primary robot front-right, slightly larger */}
- {/* abstract UAE "territory" graphic — ring map style */} + {/* abstract UAE "territory" graphic ring map style */}
- Exclusive sales rights — selected Unitree & Pudu solutions. + Exclusive sales rights selected Unitree & Pudu solutions.
); diff --git a/src/components/robotics/FounderSection.tsx b/src/components/robotics/FounderSection.tsx index 03e8e14..221a0ee 100644 --- a/src/components/robotics/FounderSection.tsx +++ b/src/components/robotics/FounderSection.tsx @@ -40,7 +40,7 @@ export function FounderSection() { Founder · Yousuf Saeed Lootah Investment Group

- Under the leadership of Mr. Yousif Bin Saeed Al Lootah, the group has championed innovation, trust, and long-term value creation across the UAE — from technology and robotics to investment and enterprise. YS Lootah Robotics carries that vision into the future of intelligent automation. + Under the leadership of Mr. Yousif Bin Saeed Al Lootah, the group has championed innovation, trust, and long-term value creation across the UAE from technology and robotics to investment and enterprise. YS Lootah Robotics carries that vision into the future of intelligent automation.

“Innovating today for a smarter tomorrow.” diff --git a/src/components/robotics/Hero3DRobotics.tsx b/src/components/robotics/Hero3DRobotics.tsx index 85c9c10..05b6fb7 100644 --- a/src/components/robotics/Hero3DRobotics.tsx +++ b/src/components/robotics/Hero3DRobotics.tsx @@ -155,7 +155,7 @@ export function Hero3DRobotics() {

- YS Lootah Robotics is the exclusive UAE sales destination for selected Unitree and Pudu Robotics solutions — helping businesses explore, configure, book demos, and deploy advanced robots across Dubai and the UAE. + YS Lootah Robotics is the exclusive UAE sales destination for selected Unitree and Pudu Robotics solutions helping businesses explore, configure, book demos, and deploy advanced robots across Dubai and the UAE.

In Tech We Innovate · In Trust We Lead @@ -309,7 +309,7 @@ export function Hero3DRobotics() { }} /> - {/* Robot image — main */} + {/* Robot image main */} {FEATURED_ROBOTS.map((r, idx) => (

- {/* Edge glass glare — silver/blue rim light */} + {/* Edge glass glare silver/blue rim light */}
- {/* Floating labels — keyed to active robot + parallax */} + {/* Floating labels keyed to active robot + parallax */}
{labels.map((l, i) => { /* labels drift opposite to tilt for parallax depth */ diff --git a/src/components/robotics/HowItWorks.tsx b/src/components/robotics/HowItWorks.tsx index f124f24..a906253 100644 --- a/src/components/robotics/HowItWorks.tsx +++ b/src/components/robotics/HowItWorks.tsx @@ -4,7 +4,7 @@ const STEPS = [ { n: '01', title: 'Discover', - body: 'Tell us about your venue and use case. We recommend a brand and model — humanoid, quadruped, service, delivery, cleaning, or commercial.', + body: 'Tell us about your venue and use case. We recommend a brand and model humanoid, quadruped, service, delivery, cleaning, or commercial.', accent: '#DEE0F0', }, { @@ -16,7 +16,7 @@ const STEPS = [ { n: '03', title: 'Deploy & support', - body: 'We handle procurement, setup, training, and ongoing service across the UAE — so your team can run, not maintain.', + body: 'We handle procurement, setup, training, and ongoing service across the UAE so your team can run, not maintain.', accent: '#8891C7', }, ]; diff --git a/src/components/robotics/InquiryForm.tsx b/src/components/robotics/InquiryForm.tsx index 810b754..92f7d22 100644 --- a/src/components/robotics/InquiryForm.tsx +++ b/src/components/robotics/InquiryForm.tsx @@ -85,7 +85,7 @@ export function InquiryForm({ defaultRobot = '', defaultCategory = '', intent =
{status === 'success' && (
- Thank you — your message was sent. Our team will reach out shortly. + Thank you your message was sent. Our team will reach out shortly.
)} {status === 'error' && ( diff --git a/src/components/robotics/ServicesGrid.tsx b/src/components/robotics/ServicesGrid.tsx index e7bfd60..f4a2572 100644 --- a/src/components/robotics/ServicesGrid.tsx +++ b/src/components/robotics/ServicesGrid.tsx @@ -20,7 +20,7 @@ const SERVICES: Service[] = [ }, { title: 'Collaborative & Flexible Robotics Integration', - body: 'Integration of robotic systems into existing workflows — collaborative, flexible, business-friendly.', + body: 'Integration of robotic systems into existing workflows collaborative, flexible, business-friendly.', icon: 'M12 2v6m0 8v6M4.93 4.93l4.24 4.24m5.66 5.66 4.24 4.24M2 12h6m8 0h6M4.93 19.07l4.24-4.24m5.66-5.66 4.24-4.24', }, { diff --git a/src/components/robotics/WhyUs.tsx b/src/components/robotics/WhyUs.tsx index d627656..081f282 100644 --- a/src/components/robotics/WhyUs.tsx +++ b/src/components/robotics/WhyUs.tsx @@ -3,25 +3,25 @@ const REASONS = [ { title: 'Exclusive UAE portfolio', - body: 'Selected Unitree and Pudu Robotics solutions — available exclusively in the UAE through YS Lootah Robotics for hospitality, security, education, and industry.', + body: 'Selected Unitree and Pudu Robotics solutions available exclusively in the UAE through YS Lootah Robotics for hospitality, security, education, and industry.', accent: '#DEE0F0', icon: 'M3 3h7v7H3V3Zm0 11h7v7H3v-7Zm11-11h7v7h-7V3Zm0 11h7v7h-7v-7Z', }, { title: 'Dubai sales and support', - body: 'A local Dubai team manages your inquiry, demo, deployment, and on-the-ground support — not just a website with a contact form.', + body: 'A local Dubai team manages your inquiry, demo, deployment, and on-the-ground support not just a website with a contact form.', accent: '#273F94', icon: 'M12 2 2 7v6c0 5 4 9 10 11 6-2 10-6 10-11V7l-10-5Z', }, { title: 'Custom configuration', - body: 'Configure persona, attire, and accessories for humanoid robots — visualize your deployment before you order with our 3D configurator.', + body: 'Configure persona, attire, and accessories for humanoid robots visualize your deployment before you order with our 3D configurator.', accent: '#8891C7', icon: 'M12 4a4 4 0 0 1 4 4v1h5v6h-5v1a4 4 0 0 1-8 0v-1H3V9h5V8a4 4 0 0 1 4-4Z', }, { title: 'End-to-end deployment', - body: 'From procurement and configuration to delivery, installation, training, and ongoing support — we handle the full lifecycle.', + body: 'From procurement and configuration to delivery, installation, training, and ongoing support we handle the full lifecycle.', accent: '#DEE0F0', icon: 'M3 12h4l3-7 4 14 3-7h4', }, diff --git a/src/components/sections/robotics-scroll-showcase.tsx b/src/components/sections/robotics-scroll-showcase.tsx index f6e3740..8dc6ab5 100644 --- a/src/components/sections/robotics-scroll-showcase.tsx +++ b/src/components/sections/robotics-scroll-showcase.tsx @@ -80,7 +80,7 @@ export function RoboticsScrollShowcase() { function ConsoleInterior() { return (
- {/* left sidebar — category rail */} + {/* left sidebar category rail */}