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.
Use this skill when building showcase websites for premium/luxury products that require:
/* 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 */
}
<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>
@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; }
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
Before completion, verify: