Home

<div class="hero-battle">
<div class="hero-overlay"></div>

<div class="hero-content">
<div class="logo-container">
<h1 class="brand-name">FIORA RENI</h1>
<p class="tagline">Dove lo stile diventa battaglia</p>
<p class="coming-soon">In arrivo • Giugno 2026</p>
</div>


<div class="countdown" id="countdown">
<div class="countdown-item">
<span class="countdown-number" id="days">00</span>
<span class="countdown-label">Giorni</span>
</div>
<div class="countdown-item">
<span class="countdown-number" id="hours">00</span>
<span class="countdown-label">Ore</span>
</div>
<div class="countdown-item">
<span class="countdown-number" id="minutes">00</span>
<span class="countdown-label">Minuti</span>
</div>
<div class="countdown-item">
<span class="countdown-number" id="seconds">00</span>
<span class="countdown-label">Secondi</span>
</div>
</div>

<div class="cta-container">
<a href="#storia" class="btn-primary">Scopri la Storia</a>
<a href="#waitlist" class="btn-secondary">Unisciti alla Lista VIP</a>
</div>
</div>


<div class="characters">
<div class="character character-left team-sofia" data-team="sofia">
<div class="character-placeholder">☕</div>
<div class="character-badge">
<span class="team-icon">☕</span>
<span class="team-name">SOFIA</span>
</div>
</div>

<div class="vs-badge">VS</div>

<div class="character character-right team-giulia" data-team="giulia">
<div class="character-placeholder">🍵</div>
<div class="character-badge">
<span class="team-icon">🍵</span>
<span class="team-name">GIULIA</span>
</div>
</div>
</div>
</div>

<section id="storia" class="storia-section">
<div class="container">
<h2 class="section-title">☕ La Nostra Storia 🍵</h2>

<div class="timeline">

<div class="timeline-item" data-chapter="1">
<div class="timeline-marker">
<span class="chapter-number">1</span>
</div>
<div class="timeline-content">
<div class="timeline-image">📍</div>
<h3>Il Bar</h3>
<p>Ogni venerdì, stesso bar, stesso tavolo... ma mai la stessa bevanda.</p>
<div class="drinks">
<span class="drink">Sofia ordina: Caffè ☕</span>
<span class="drink">Giulia ordina: Matcha 🍵</span>
</div>
</div>
</div>

<div class="timeline-item" data-chapter="2">
<div class="timeline-marker">
<span class="chapter-number">2</span>
</div>
<div class="timeline-content">
<div class="timeline-image">👗</div>
<h3>La Passione</h3>
<p>Adictas a la moda, ma con gusti completamente diversi.</p>
<div class="styles-comparison">
<div class="style-box">
<strong>Sofia:</strong> Eleganza classica, linee senza tempo
</div>
<div class="style-box">
<strong>Giulia:</strong> Moda audace, tendenze moderne
</div>
</div>
</div>
</div>

<div class="timeline-item" data-chapter="3">
<div class="timeline-marker">
<span class="chapter-number">3</span>
</div>
<div class="timeline-content">
<div class="timeline-image">💡</div>
<h3>L'Idea</h3>
<p>Una notte, tra risate e sogni scritti su un tovagliolo:</p>
<blockquote>"E se aprissimo la nostra boutique a Milano?"</blockquote>
</div>
</div>

<div class="timeline-item" data-chapter="4">
<div class="timeline-marker">
<span class="chapter-number">4</span>
</div>
<div class="timeline-content">
<div class="timeline-image">⚔️</div>
<h3>La Sfida</h3>
<p>Ma prima di aprire una boutique fisica...</p>
<div class="challenge-box">
<strong>LA DOMANDA:</strong><br>
Che stile preferisce l'Italia?<br>
Eleganza classica o moda audace?
</div>
<p><strong>La soluzione:</strong> Lasciare che siate VOI a decidere.</p>
</div>
</div>

<div class="timeline-item" data-chapter="5">
<div class="timeline-marker">
<span class="chapter-number">5</span>
</div>
<div class="timeline-content">
<h3>Tu Decidi</h3>
<p class="finale-text">
Ogni acquisto è un voto.<br>
Ogni cliente è parte della storia.<br>
Insieme costruiremo FIORA RENI.
</p>
<a href="#teams" class="btn-primary large">Scegli il Tuo Team →</a>
</div>
</div>

</div>
</div>
</section>

<section id="teams" class="teams-section">
<div class="container">
<h2 class="section-title">Chi Rappresenti?</h2>
<p class="section-subtitle">Scegli il tuo stile. Guadagna punti. Vinci premi esclusivi.</p>

<div class="teams-grid">

<div class="team-card team-sofia">
<div class="team-header">
<div class="team-avatar">☕</div>
<div class="team-badge-large">
<span class="icon">☕</span>
<h3>TEAM SOFIA</h3>
<p class="team-drink">Il Caffè</p>
</div>
</div>

<div class="team-description">
<h4>Lo Stile</h4>
<ul class="style-features">
<li>✓ Eleganza classica</li>
<li>✓ Linee senza tempo</li>
<li>✓ Colori neutri e sofisticati</li>
<li>✓ Raffinata e senza età</li>
</ul>

<h4>La Personalità</h4>
<ul class="personality-traits">
<li>☕ Caffè ogni mattina alle 7:00</li>
<li>📚 Adora leggere al tramonto</li>
<li>🎨 Gallerie d'arte nel weekend</li>
<li>🌙 Cene intime con amici</li>
</ul>
</div>

<div class="team-stats">
<div class="stat">
<span class="stat-number" id="sofia-points">15,240</span>
<span class="stat-label">Punti Totali</span>
</div>
<div class="stat">
<span class="stat-number" id="sofia-members">87</span>
<span class="stat-label">Sostenitrici</span>
</div>
</div>

<a href="#waitlist" class="btn-team btn-sofia">Esplora Collezione Sofia →</a>
</div>

<div class="team-card team-giulia">
<div class="team-header">
<div class="team-avatar">🍵</div>
<div class="team-badge-large">
<span class="icon">🍵</span>
<h3>TEAM GIULIA</h3>
<p class="team-drink">La Matcha</p>
</div>
</div>

<div class="team-description">
<h4>Lo Stile</h4>
<ul class="style-features">
<li>✓ Moda audace e provocante</li>
<li>✓ Tendenze di oggi</li>
<li>✓ Colori vibranti e statement</li>
<li>✓ Fresca e contemporanea</li>
</ul>

<h4>La Personalità</h4>
<ul class="personality-traits">
<li>🍵 Matcha energizzante tutto il giorno</li>
<li>🎵 Playlist sempre in aggiornamento</li>
<li>🌟 Rooftop bars e nuove esperienze</li>
<li>✨ Anima della festa</li>
</ul>
</div>

<div class="team-stats">
<div class="stat">
<span class="stat-number" id="giulia-points">14,100</span>
<span class="stat-label">Punti Totali</span>
</div>
<div class="stat">
<span class="stat-number" id="giulia-members">102</span>
<span class="stat-label">Sostenitrici</span>
</div>
</div>

<a href="#waitlist" class="btn-team btn-giulia">Esplora Collezione Giulia →</a>
</div>

</div>

<div class="battle-bar">
<div class="battle-progress">
<div class="progress-sofia" id="progress-sofia" style="width: 52%">
<span class="progress-label">52%</span>
</div>
<div class="progress-giulia" id="progress-giulia" style="width: 48%">
<span class="progress-label">48%</span>
</div>
</div>
<div class="battle-message" id="battle-message">
☕ Team Sofia è in vantaggio di 1,140 punti!
</div>
</div>

</div>
</section>

<section class="how-it-works">
<div class="container">
<h2 class="section-title">Come Funziona la Battaglia</h2>

<div class="steps-grid">

<div class="step-card">
<div class="step-icon">👗</div>
<h3>1. Scegli il Tuo Team</h3>
<p>Team Sofia (Caffè) o Team Giulia (Matcha). Ogni acquisto sostiene il tuo team.</p>
</div>

<div class="step-card">
<div class="step-icon">🛍️</div>
<h3>2. Acquista dalla Collezione</h3>
<p>Ogni prodotto vale punti. I pack moltiplicano i tuoi punti!</p>
<div class="points-preview">
<small>Vestiti: 20pts • Borse: 15pts • Scarpe: 15pts</small>
</div>
</div>

<div class="step-card">
<div class="step-icon">🏆</div>
<h3>3. Guadagna Punti</h3>
<p>Pack da 5 prodotti = +150 punti bonus! Accumula per il tuo team.</p>
</div>

<div class="step-card">
<div class="step-icon">🎁</div>
<h3>4. Vinci Premi</h3>
<p>Team vincente del mese riceve sconti esclusivi. Top 3 clienti vincono regali!</p>
</div>

</div>

<div class="prizes-box">
<h4>🎁 Premi Mensili</h4>
<div class="prizes-grid">
<div class="prize">
<strong>Team Vincente:</strong><br>
Sconto 15% + Spedizione Gratis
</div>
<div class="prize">
<strong>Top 3 Clienti:</strong><br>
Regali fino a €50
</div>
<div class="prize">
<strong>Tutte le Partecipanti:</strong><br>
Badge esclusivo + Early Access
</div>
</div>
</div>

</div>
</section>

<section id="waitlist" class="waitlist-section">
<div class="container">
<div class="waitlist-content">
<h2>Unisciti alla Lista VIP</h2>
<p>Ricevi accesso anticipato al lancio + sconto esclusivo 20% sul primo ordine</p>

<form class="waitlist-form" id="waitlist-form">
<div class="form-group">
<input type="email" placeholder="La tua email" required class="email-input" id="email-input">
</div>

<div class="form-group">
<label class="team-selector">
<input type="radio" name="team" value="sofia" required>
<span class="team-option team-option-sofia">☕ Sono Team Sofia</span>
</label>

<label class="team-selector">
<input type="radio" name="team" value="giulia" required>
<span class="team-option team-option-giulia">🍵 Sono Team Giulia</span>
</label>
</div>

<button type="submit" class="btn-submit">Iscriviti Ora →</button>

<p class="privacy-note">
<small>Riceverai max 2 email a settimana. Puoi annullare l'iscrizione in qualsiasi momento.</small>
</p>
</form>

<div class="waitlist-count">
<span id="waitlist-total">247</span> persone già nella lista VIP
</div>
</div>
</div>
</section>

<section class="instagram-section">
<div class="container">
<h2 class="section-title">Seguici su Instagram</h2>
<p class="section-subtitle">@fiorareni_official</p>

<div class="instagram-grid" id="instagram-feed">
<div class="instagram-placeholder">
<p>📸 Il nostro feed Instagram sarà presto pieno di stile!</p>
</div>
</div>

<a href="https://instagram.com/fiorareni_official" target="_blank" class="btn-instagram">
Seguici su Instagram →
</a>
</div>
</section>