tailwind.config = {
theme: {
extend: {
fontFamily: {
orbitron: [‘Orbitron’, ‘sans-serif’],
serif: [‘Cormorant Garamond’, ‘serif’],
sans: [‘Inter’, ‘sans-serif’],
},
colors: {
cosmic: {
900: ‘#0a0a0f’,
800: ‘#12121a’,
700: ‘#1a1a2e’,
600: ‘#252542’,
},
neon: {
gold: ‘#ffd700’,
rose: ‘#ff69b4’,
violet: ‘#b026ff’,
cyan: ‘#00ffff’,
amber: ‘#ffbf00’,
},
heritage: {
gold: ‘#d4af37’,
sand: ‘#c9b896’,
rose: ‘#d4a5a5’,
}
},
animation: {
‘float’: ‘float 6s ease-in-out infinite’,
‘float-delayed’: ‘float 6s ease-in-out 3s infinite’,
‘pulse-slow’: ‘pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite’,
‘glow’: ‘glow 2s ease-in-out infinite alternate’,
‘shimmer’: ‘shimmer 2s linear infinite’,
‘particle’: ‘particle 20s linear infinite’,
},
keyframes: {
float: {
‘0%, 100%’: { transform: ‘translateY(0px)’ },
‘50%’: { transform: ‘translateY(-20px)’ },
},
glow: {
‘0%’: { boxShadow: ‘0 0 5px #ffd700, 0 0 10px #ffd700’ },
‘100%’: { boxShadow: ‘0 0 20px #ffd700, 0 0 30px #ffd700’ },
},
shimmer: {
‘0%’: { backgroundPosition: ‘-200% 0’ },
‘100%’: { backgroundPosition: ‘200% 0’ },
},
particle: {
‘0%’: { transform: ‘translateY(100vh) scale(0)’, opacity: ‘0’ },
‘10%’: { opacity: ‘1’ },
‘90%’: { opacity: ‘1’ },
‘100%’: { transform: ‘translateY(-100vh) scale(1)’, opacity: ‘0’ },
}
}
}
}
}

/* Base cosmic background */
body {
background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #12121a 100%);
color: #f5f5f5;
overflow-x: hidden;
}

/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #0a0a0f;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #ffd700, #ff69b4);
border-radius: 4px;
}

/* Neon text effect */
.text-neon-gold {
text-shadow: 0 0 10px rgba(255, 215, 0, 0.5),
0 0 20px rgba(255, 215, 0, 0.3),
0 0 30px rgba(255, 215, 0, 0.2);
}

.text-neon-rose {
text-shadow: 0 0 10px rgba(255, 105, 180, 0.5),
0 0 20px rgba(255, 105, 180, 0.3);
}

/* Holographic card effect */
.holo-card {
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,215,0,0.2);
transition: all 0.4s ease;
}

.holo-card:hover {
border-color: rgba(255,215,0,0.6);
box-shadow: 0 0 30px rgba(255,215,0,0.2),
inset 0 0 30px rgba(255,105,180,0.1);
transform: translateY(-5px);
}

/* Animated gradient border */
.gradient-border {
position: relative;
background: linear-gradient(135deg, #1a1a2e 0%, #12121a 100%);
border-radius: 16px;
}

.gradient-border::before {
content:  »;
position: absolute;
inset: -2px;
border-radius: 18px;
background: linear-gradient(45deg, #ffd700, #ff69b4, #b026ff, #ffd700);
background-size: 400% 400%;
animation: gradient-rotate 3s ease infinite;
z-index: -1;
}

@keyframes gradient-rotate {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}

/* Particle background */
.particles {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
overflow: hidden;
}

.particle {
position: absolute;
width: 4px;
height: 4px;
background: radial-gradient(circle, #ffd700 0%, transparent 70%);
border-radius: 50%;
opacity: 0.6;
}

/* Floating geometric shapes */
.geo-shape {
position: absolute;
opacity: 0.1;
animation: float 8s ease-in-out infinite;
}

/* Button neon glow */
.btn-neon {
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}

.btn-neon::before {
content:  »;
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, #ffd700, #ff69b4, #b026ff, #ffd700);
background-size: 400%;
z-index: -1;
animation: glow-move 3s linear infinite;
border-radius: inherit;
opacity: 0;
transition: opacity 0.3s;
}

.btn-neon:hover::before {
opacity: 1;
}

@keyframes glow-move {
0% { background-position: 0 0; }
50% { background-position: 400% 0; }
100% { background-position: 0 0; }
}

/* Scroll reveal */
.reveal {
opacity: 0;
transform: translateY(50px) scale(0.95);
transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
opacity: 1;
transform: translateY(0) scale(1);
}

/* Carrousel */
.carousel-track {
display: flex;
gap: 2rem;
animation: scroll 30s linear infinite;
}

.carousel-track:hover {
animation-play-state: paused;
}

@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}

/* Light sweep effect */
.light-sweep {
position: relative;
overflow: hidden;
}

.light-sweep::after {
content:  »;
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent 40%, rgba(255,215,0,0.1) 50%, transparent 60%);
transform: rotate(45deg);
transition: all 0.6s;
opacity: 0;
}

.light-sweep:hover::after {
opacity: 1;
transform: rotate(45deg) translate(50%, 50%);
}

/* Heritage pattern overlay */
.heritage-pattern {
background-image: url(« data:image/svg+xml,%3Csvg width=’60’ height=’60’ viewBox=’0 0 60 60′ xmlns=’http://www.w3.org/2000/svg’%3E%3Cg fill=’none’ fill-rule=’evenodd’%3E%3Cg fill=’%23ffd700′ fill-opacity=’0.03’%3E%3Cpath d=’M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z’/%3E%3C/g%3E%3C/g%3E%3C/svg%3E »);
}

/* Mobile optimizations */
@media (max-width: 768px) {
.text-neon-gold {
text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}
}

Vendre en Ligne Gratuit Femme

Du Passé à l’Avenir

Nos grand-mères tissaient l’avenir avec des fils d’or et des rêves de soie.
Aujourd’hui, nous héritons de cette précieuse ambition.

ZAHRA fusionne l’élégance intemporelle du savoir-faire algérien avec la puissance
de la technologie du futur. Une plateforme où l’héritage rencontre l’innovation,
où chaque créatrice devient architecte de son destin numérique.

« Le futur s’écrit au féminin. Et il commence maintenant. »

10K+

Créatrices

50K+

Produits

48

Wilayas

TRANSFORMATION DIGITALE

De l’atelier traditionnel à la vitrine holographique

Elles Brillent Déjà

Des créatrices algériennes qui façonnent le futur

AMINA

Alger

« Abayas qui illuminent le futur »

SARAH

Oran

« Joaillerie d’un nouveau monde »

YASMINE

Constantine

« Tradition en lumière digitale »

LYNA

Annaba

« Cuir et néon, l’élégance réinventée »

NOUR

Tlemcen

« Caftans du futur, racines du passé »

AMINA

Alger

« Abayas qui illuminent le futur »

Voix Féminines

« 

« ZAHRA a transformé ma passion en entreprise prospère. En 3 mois,
j’ai vendu plus de 200 pièces à travers toute l’Algérie. Gratuit,
féminin, futuriste. C’est exactement ce dont nous avions besoin. »

LAYLA

Constantine • Créatrice de bijoux

« 

« J’ai enfin une vitrine qui reflète la qualité de mes abayas.
Le design futuriste attire une clientèle jeune et exigeante.
Et surtout, je garde 100% de mes bénéfices ! »

RANIA

Alger • Créatrice d’abayas

// Generate floating particles
function createParticles() {
const container = document.getElementById(‘particles’);
const particleCount = 30;

for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
particle.style.left = Math.random() * 100 + '%';
particle.style.animationDuration = (Math.random() * 20 + 10) + 's';
particle.style.animationDelay = Math.random() * 10 + 's';
particle.style.opacity = Math.random() * 0.5 + 0.1;
container.appendChild(particle);
}
}

// CTA section particles
function createCTAParticles() {
const container = document.getElementById('cta-particles');
for (let i = 0; i {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add(‘active’);
observer.unobserve(entry.target);
}
});
}, observerOptions);

document.querySelectorAll(‘.reveal’).forEach(el => observer.observe(el));

// Mobile menu
const mobileMenuBtn = document.getElementById(‘mobile-menu-btn’);
const mobileMenu = document.getElementById(‘mobile-menu’);

mobileMenuBtn.addEventListener(‘click’, () => {
mobileMenu.classList.toggle(‘hidden’);
});

// Navbar scroll effect
const navbar = document.getElementById(‘navbar’);
window.addEventListener(‘scroll’, () => {
if (window.scrollY > 50) {
navbar.classList.add(‘shadow-lg’, ‘shadow-neon-gold/5’);
} else {
navbar.classList.remove(‘shadow-lg’, ‘shadow-neon-gold/5’);
}
});

// Initialize
createParticles();
createCTAParticles();

// Parallax effect on scroll
window.addEventListener(‘scroll’, () => {
const scrolled = window.pageYOffset;
const parallaxElements = document.querySelectorAll(‘.geo-shape’);
parallaxElements.forEach((el, index) => {
const speed = 0.5 + (index * 0.1);
el.style.transform = `translateY(${scrolled * speed}px)`;
});
});