---
name: luxury-website
description: Build elegant, high-end showcase websites with RTL Hebrew support, sophisticated animations, and luxury brand aesthetics. Use for Judaica, jewelry, art galleries, or any premium product showcase sites.
---

# Luxury Website Design Skill

Use this skill when building showcase websites for premium/luxury products that require:
- Refined, elegant aesthetics
- RTL Hebrew support
- Sophisticated animations
- High-end brand feel

## Design Principles

### Color Philosophy
- Use deep, rich primary colors (navy, burgundy, forest green)
- Gold/champagne accents for luxury feel
- Cream/off-white for elegant backgrounds
- Never use pure white or pure black

### Typography Hierarchy
- Display font for headlines (Playfair Display, Cormorant, Libre Baskerville)
- Clean sans-serif for body (Heebo for Hebrew, Lato, Source Sans)
- Generous line-height (1.7-1.9) for readability
- Letter-spacing on uppercase elements

### Spacing & Layout
- Generous whitespace - let elements breathe
- Asymmetric layouts add visual interest
- Content max-width: 1200px for readability
- Section padding: 80-120px vertical on desktop

### Animation Guidelines
- Subtle is better than flashy
- Use ease-out or cubic-bezier for smooth motion
- Stagger animations for sequential reveals
- Duration: 0.3-0.6s for most transitions
- Avoid animation on scroll for performance

## RTL Hebrew Implementation

```css
/* Base setup */
html {
  direction: rtl;
}

/* Flexbox RTL */
.nav {
  flex-direction: row-reverse; /* Not needed if dir="rtl" on html */
}

/* Specific LTR elements (phone numbers, emails) */
.ltr {
  direction: ltr;
  unicode-bidi: embed;
}

/* Text alignment */
.text-start {
  text-align: right; /* In RTL context */
}
```

## Component Patterns

### Hero Section
```astro
<section class="hero">
  <div class="hero-content">
    <h1 class="animate-fade-in">כותרת ראשית</h1>
    <p class="animate-fade-in delay-1">תיאור משני</p>
    <a href="#gallery" class="cta animate-fade-in delay-2">לצפייה בגלריה</a>
  </div>
  <div class="hero-decoration">
    <!-- Gold ornamental frame -->
  </div>
</section>
```

### Gallery with Lightbox
- Use CSS Grid with aspect-ratio
- Lazy load images
- Intersection Observer for scroll animations
- Keyboard accessible lightbox
- Touch/swipe support

### Contact Section
- WhatsApp as primary CTA (prominent button)
- Glass-morphism card effect
- Click-to-call and click-to-email links
- Social icons with hover effects

## Animation CSS

```css
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeInUp 0.6s ease-out forwards;
  opacity: 0;
}

.delay-1 { animation-delay: 0.15s; }
.delay-2 { animation-delay: 0.3s; }
.delay-3 { animation-delay: 0.45s; }
```

## Performance Checklist

- [ ] Images optimized and lazy-loaded
- [ ] Fonts preloaded (critical fonts only)
- [ ] CSS animations use transform/opacity only
- [ ] No layout shift on load
- [ ] Lighthouse Performance: 90+
- [ ] Lighthouse Accessibility: 90+

## SEO Requirements

- Semantic HTML structure
- Single H1 per page
- Descriptive alt text on all images
- Meta description in Hebrew
- Open Graph tags for social sharing
- JSON-LD structured data for LocalBusiness

## File Structure

```
src/
├── components/
│   ├── Header.astro
│   ├── Hero.astro
│   ├── Gallery.astro
│   ├── About.astro
│   ├── Process.astro
│   ├── Contact.astro
│   └── Footer.astro
├── layouts/
│   └── Layout.astro
├── pages/
│   └── index.astro
└── styles/
    └── global.css
```

## Quality Gates

Before completion, verify:
1. All animations smooth at 60fps
2. Mobile responsive at all breakpoints
3. RTL layout correct throughout
4. All interactive elements keyboard accessible
5. Color contrast meets WCAG AA
6. WhatsApp link works correctly