luxury-website

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

/* 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

<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

@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