From 92cf4aba3b1f3b944b65f73df677228878c4d301 Mon Sep 17 00:00:00 2001 From: "Najjar\\NajjarV02" Date: Wed, 20 May 2026 17:22:47 +0400 Subject: [PATCH] feat: add robotics components and data structures - Introduced RobotProductCard component for displaying robot details. - Added WhyUs component highlighting key reasons for choosing our robotics solutions. - Implemented CursorSpotlight for enhanced user interaction. - Created GlassPanel for a stylish UI element. - Developed MotionSection for animated section visibility. - Added PremiumButton for versatile button options. - Established data structures for industries and robots, including detailed specifications and use cases. - Included utility functions for retrieving robots by slug and category. --- .../COMPONENT_RULES.md | 236 +++++++ .../COMPONENT_SNIPPETS.md | 45 ++ .../DESIGN_SYSTEM.md | 204 ++++++ .../PROMPT_TEMPLATES.md | 274 ++++++++ .../RESPONSIVE_CHECKLIST.md | 108 ++++ .../skills/premium-frontend-designer/SKILL.md | 143 +++++ .../examples/luxam-config.md | 118 ++++ .../snippets/AppBadges.tsx | 71 +++ .../snippets/CertificateGallery.tsx | 125 ++++ .../snippets/ClientLogoMarquee.tsx | 132 ++++ .../snippets/Footer.tsx | 188 ++++++ .../snippets/GlassCard.tsx | 75 +++ .../snippets/PremiumButton.tsx | 40 ++ .../snippets/SectionHeading.tsx | 76 +++ .../snippets/WhatsAppLink.tsx | 88 +++ .gitignore | 4 + YS Lootah Robotics final-1.png | Bin 0 -> 364011 bytes public/images/robots/pudu-bellabot.svg | 39 ++ public/images/robots/pudu-cc1.svg | 31 + public/images/robots/pudu-kettybot.svg | 35 + public/images/robots/pudu-pudubot.svg | 29 + public/images/robots/unitree-a2.png | Bin 0 -> 524513 bytes public/images/robots/unitree-as2.png | Bin 0 -> 1208109 bytes public/images/robots/unitree-b2.png | Bin 0 -> 380391 bytes public/images/robots/unitree-g1.png | Bin 0 -> 1279931 bytes public/images/robots/unitree-go2.png | Bin 0 -> 418543 bytes public/images/robots/unitree-h2.png | Bin 0 -> 940208 bytes public/images/robots/unitree-r1.png | Bin 0 -> 1108789 bytes src/app/about/page.tsx | 55 ++ src/app/admin/login/page.tsx | 344 +++++----- src/app/admin/page.tsx | 94 +-- src/app/book-demo/page.tsx | 56 ++ src/app/brands/page.tsx | 95 +++ src/app/configure/page.tsx | 70 +- src/app/contact/page.tsx | 72 +++ src/app/globals.css | 601 ++++++++---------- src/app/industries/page.tsx | 47 ++ src/app/layout.tsx | 44 +- src/app/page.tsx | 184 +++++- src/app/privacy-policy/page.tsx | 18 +- src/app/robots/CatalogClient.tsx | 125 ++++ src/app/robots/[slug]/page.tsx | 226 +++++++ src/app/robots/page.tsx | 37 ++ src/app/sitemap.ts | 51 +- src/app/terms-of-service/page.tsx | 18 +- src/components/CheckoutOverlay.tsx | 10 +- src/components/ConfigPanel.tsx | 12 +- src/components/ConfiguratorSection.tsx | 12 +- src/components/FooterAndContact.tsx | 533 ++++++---------- src/components/InteractiveHotspot.tsx | 4 +- src/components/LanguageSwitcher.tsx | 2 +- src/components/Navbar.tsx | 314 ++++----- src/components/PayloadMesh.tsx | 2 +- src/components/PricingEngine.tsx | 6 +- src/components/RobotCanvas.tsx | 10 +- src/components/ScrollOverlays.tsx | 34 +- src/components/ScrollScene.tsx | 2 +- src/components/SnapshotButton.tsx | 2 +- src/components/checkout/ConfirmationStep.tsx | 12 +- src/components/checkout/PaymentStep.tsx | 2 +- src/components/checkout/ReviewStep.tsx | 12 +- src/components/checkout/ShippingStep.tsx | 6 +- src/components/robotics/BentoGrid.tsx | 178 ++++++ src/components/robotics/BrandShowcase.tsx | 96 +++ src/components/robotics/ConfigureCTA.tsx | 67 ++ src/components/robotics/DemoCTA.tsx | 71 +++ .../robotics/ExclusiveAccessSection.tsx | 163 +++++ src/components/robotics/FloatingTechPanel.tsx | 56 ++ src/components/robotics/Hero3DRobotics.tsx | 361 +++++++++++ src/components/robotics/HowItWorks.tsx | 86 +++ src/components/robotics/IndustryUseCases.tsx | 73 +++ src/components/robotics/InquiryForm.tsx | 150 +++++ src/components/robotics/MarqueeStrip.tsx | 109 ++++ src/components/robotics/ProductFilterTabs.tsx | 54 ++ src/components/robotics/ProductGallery.tsx | 79 +++ src/components/robotics/ProductSpecTable.tsx | 30 + src/components/robotics/RobotCategoryGrid.tsx | 113 ++++ src/components/robotics/RobotProductCard.tsx | 216 +++++++ src/components/robotics/WhyUs.tsx | 63 ++ src/components/ui/CursorSpotlight.tsx | 62 ++ src/components/ui/GlassPanel.tsx | 26 + src/components/ui/MotionSection.tsx | 56 ++ src/components/ui/PremiumButton.tsx | 55 ++ src/data/industries.ts | 141 ++++ src/data/robots.ts | 418 ++++++++++++ src/store/usePersonaStore.ts | 418 ++++++------ tsconfig.json | 3 +- 87 files changed, 6887 insertions(+), 1430 deletions(-) create mode 100644 .claude/skills/premium-frontend-designer/COMPONENT_RULES.md create mode 100644 .claude/skills/premium-frontend-designer/COMPONENT_SNIPPETS.md create mode 100644 .claude/skills/premium-frontend-designer/DESIGN_SYSTEM.md create mode 100644 .claude/skills/premium-frontend-designer/PROMPT_TEMPLATES.md create mode 100644 .claude/skills/premium-frontend-designer/RESPONSIVE_CHECKLIST.md create mode 100644 .claude/skills/premium-frontend-designer/SKILL.md create mode 100644 .claude/skills/premium-frontend-designer/examples/luxam-config.md create mode 100644 .claude/skills/premium-frontend-designer/snippets/AppBadges.tsx create mode 100644 .claude/skills/premium-frontend-designer/snippets/CertificateGallery.tsx create mode 100644 .claude/skills/premium-frontend-designer/snippets/ClientLogoMarquee.tsx create mode 100644 .claude/skills/premium-frontend-designer/snippets/Footer.tsx create mode 100644 .claude/skills/premium-frontend-designer/snippets/GlassCard.tsx create mode 100644 .claude/skills/premium-frontend-designer/snippets/PremiumButton.tsx create mode 100644 .claude/skills/premium-frontend-designer/snippets/SectionHeading.tsx create mode 100644 .claude/skills/premium-frontend-designer/snippets/WhatsAppLink.tsx create mode 100644 YS Lootah Robotics final-1.png create mode 100644 public/images/robots/pudu-bellabot.svg create mode 100644 public/images/robots/pudu-cc1.svg create mode 100644 public/images/robots/pudu-kettybot.svg create mode 100644 public/images/robots/pudu-pudubot.svg create mode 100644 public/images/robots/unitree-a2.png create mode 100644 public/images/robots/unitree-as2.png create mode 100644 public/images/robots/unitree-b2.png create mode 100644 public/images/robots/unitree-g1.png create mode 100644 public/images/robots/unitree-go2.png create mode 100644 public/images/robots/unitree-h2.png create mode 100644 public/images/robots/unitree-r1.png create mode 100644 src/app/about/page.tsx create mode 100644 src/app/book-demo/page.tsx create mode 100644 src/app/brands/page.tsx create mode 100644 src/app/contact/page.tsx create mode 100644 src/app/industries/page.tsx create mode 100644 src/app/robots/CatalogClient.tsx create mode 100644 src/app/robots/[slug]/page.tsx create mode 100644 src/app/robots/page.tsx create mode 100644 src/components/robotics/BentoGrid.tsx create mode 100644 src/components/robotics/BrandShowcase.tsx create mode 100644 src/components/robotics/ConfigureCTA.tsx create mode 100644 src/components/robotics/DemoCTA.tsx create mode 100644 src/components/robotics/ExclusiveAccessSection.tsx create mode 100644 src/components/robotics/FloatingTechPanel.tsx create mode 100644 src/components/robotics/Hero3DRobotics.tsx create mode 100644 src/components/robotics/HowItWorks.tsx create mode 100644 src/components/robotics/IndustryUseCases.tsx create mode 100644 src/components/robotics/InquiryForm.tsx create mode 100644 src/components/robotics/MarqueeStrip.tsx create mode 100644 src/components/robotics/ProductFilterTabs.tsx create mode 100644 src/components/robotics/ProductGallery.tsx create mode 100644 src/components/robotics/ProductSpecTable.tsx create mode 100644 src/components/robotics/RobotCategoryGrid.tsx create mode 100644 src/components/robotics/RobotProductCard.tsx create mode 100644 src/components/robotics/WhyUs.tsx create mode 100644 src/components/ui/CursorSpotlight.tsx create mode 100644 src/components/ui/GlassPanel.tsx create mode 100644 src/components/ui/MotionSection.tsx create mode 100644 src/components/ui/PremiumButton.tsx create mode 100644 src/data/industries.ts create mode 100644 src/data/robots.ts diff --git a/.claude/skills/premium-frontend-designer/COMPONENT_RULES.md b/.claude/skills/premium-frontend-designer/COMPONENT_RULES.md new file mode 100644 index 0000000..866f574 --- /dev/null +++ b/.claude/skills/premium-frontend-designer/COMPONENT_RULES.md @@ -0,0 +1,236 @@ +# Component Rules + +Per-element rules. Apply when designing or reviewing the corresponding component. + +--- + +## Buttons + +**Primary** +- Gradient gold: `bg-gradient-to-r from-gold-light via-gold to-gold-deep` +- Text: `text-obsidian` (dark on gold for contrast) +- Shape: `rounded-full px-7 py-3.5 text-sm font-medium tracking-wide` +- Shadow: `shadow-[0_10px_40px_-12px_rgba(212,164,55,0.6)]` +- Hover shadow only: `hover:shadow-[0_18px_50px_-12px_rgba(242,194,91,0.8)]` +- Optional `magnetic` wrapper for cursor pull effect on desktop. + +**Outline** +- `border border-bone/20 text-bone hover:border-gold/60 hover:text-gold-light` +- Same shape as primary. + +**Ghost** +- `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. + +--- + +## Cards + +**Standard card** +```tsx +
+ {/* hover amber glow (decorative) */} + {/* content */} + {/* gold underline sweep at bottom */} +
+``` + +**Premium / featured card** (used for cert card, sale card, hero CTA) +- `border-gold/25` +- `bg-gradient-to-br from-[#1a1407] via-[#0c0a06] to-[#1e1409]` +- `shadow-[0_30px_120px_-30px_rgba(212,164,55,0.45)]` +- Often has animated `shimmer` hairline on top edge. + +**Grid layout** +- `grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-N gap-4 md:gap-5` +- Apply `cardGrid` + `cardCell` variants for staggered entry. + +**Inside the card** +- Top row: small icon disc (`size-11 glass-gold`) + optional mono micro-label. +- Heading: `font-display text-2xl md:text-3xl`. +- Body: `text-sm text-mist leading-relaxed`. +- Bottom: optional "Learn more" link or gold underline sweep. + +--- + +## Section heading + +```tsx +
{/* or items-start for left-aligned */} + Section name + +

+ Plain words and a{" "} + gold accent phrase. +

+
+ +

+ One refined sentence describing the section. +

+
+
+``` + +**Rules** +- 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. + +--- + +## Navbar + +- Fixed top: `fixed inset-x-0 top-0 z-50`. +- Logo left, nav center/right, primary CTA + WhatsApp icon right. +- Scrolled state: `backdrop-blur-xl bg-obsidian/70 border-b border-bone/5`. +- Nav links: `text-sm font-medium tracking-[0.005em] text-bone/85 hover:text-gold-light`. +- Active state via `usePathname()` → `text-gold-light` + full-width underline + `aria-current="page"`. +- Mobile: hamburger right, menu drawer below, links close on click. + +--- + +## Footer + +**Layout — 4 columns, no duplication** + +| Column 1 | Column 2 | Column 3 | Column 4 | +|---|---|---|---| +| Brand + contact | Navigation | Services | Legal & App | +| Logo, tagline, phone, email, WhatsApp, Instagram | Home + all top-level routes | Specific service items | Privacy Policy + 2 store badges | + +**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. +- 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). + +--- + +## Forms + +- Field wrapper: `