103 lines
4.8 KiB
HTML
103 lines
4.8 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>{{.InitialTitle}}</title>
|
||
<link rel="stylesheet" href="/static/css/main.css?v={{.AssetVersion}}" />
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<div>
|
||
<div class="logo">{{.Brand}}</div>
|
||
<div class="auth-row">
|
||
<p class="auth-status is-hidden" id="auth-status"></p>
|
||
<a class="btn btn-secondary auth-logout" id="login-btn" href="/login" data-i18n="ctaLogin">Login</a>
|
||
<a class="btn btn-secondary auth-logout" id="register-btn" href="/signup" data-i18n="ctaRegister">Create account</a>
|
||
<button class="btn btn-secondary auth-logout is-hidden" id="logout-btn" type="button" data-i18n="ctaLogout">Logout</button>
|
||
</div>
|
||
</div>
|
||
<div class="header-actions">
|
||
<div class="lang-wrap">
|
||
<div class="lang-flags" aria-hidden="true">
|
||
<span title="English">🇬🇧</span>
|
||
<span title="Italiano">🇮🇹</span>
|
||
<span title="Français">🇫🇷</span>
|
||
<span title="Deutsch">🇩🇪</span>
|
||
<span title="Español">🇪🇸</span>
|
||
</div>
|
||
<select id="language-select" aria-label="Language selector">
|
||
<option value="en">English</option>
|
||
<option value="it">Italiano</option>
|
||
<option value="fr">Français</option>
|
||
<option value="de">Deutsch</option>
|
||
<option value="es">Español</option>
|
||
</select>
|
||
</div>
|
||
<div class="badge" data-i18n="badge">community beta</div>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="hero">
|
||
<div>
|
||
<h1 data-i18n="heroTitle">Give your bags a new life.</h1>
|
||
<p data-i18n="heroDesc">
|
||
Swap bags and handbags in a simple, safe, and sustainable way.
|
||
Upload your item, find real matches, and refresh your style without buying new every time.
|
||
</p>
|
||
<div class="actions">
|
||
<button class="btn btn-primary" id="start-swapping-btn" type="button" data-i18n="ctaPrimary">Start swapping</button>
|
||
<a class="btn btn-secondary" id="how-it-works-btn" href="/howtowork" data-i18n="ctaSecondary">See how it works</a>
|
||
</div>
|
||
</div>
|
||
<aside class="showcase">
|
||
<h2 data-i18n="howTitle">How it works in 3 steps</h2>
|
||
<ul>
|
||
<li data-i18n="step1">1. List your bag with photos and condition</li>
|
||
<li data-i18n="step2">2. Receive offers from people with similar taste</li>
|
||
<li data-i18n="step3">3. Confirm the swap through chat and tracked shipping</li>
|
||
</ul>
|
||
</aside>
|
||
</section>
|
||
|
||
<section class="grid">
|
||
<article class="card">
|
||
<h3 data-i18n="card1Title">Verified profiles only</h3>
|
||
<p data-i18n="card1Desc">We reduce risk with account verification, feedback, and transparent swap history.</p>
|
||
</article>
|
||
<article class="card">
|
||
<h3 data-i18n="card2Title">Save and add value</h3>
|
||
<p data-i18n="card2Desc">A smart way to renew your wardrobe while avoiding waste and unnecessary spending.</p>
|
||
</article>
|
||
<article class="card">
|
||
<h3 data-i18n="card3Title">Circular style</h3>
|
||
<p data-i18n="card3Desc">From daily bags to elegant clutches: every piece can find a new owner.</p>
|
||
</article>
|
||
</section>
|
||
<section class="community-note">
|
||
<h3 data-i18n="communityTitle">Videochat and grow your profile</h3>
|
||
<p data-i18n="communityDesc">You can videochat with people interested in your items or simply exchange opinions and advice. You can aspire to become a fashion bag influencer.</p>
|
||
</section>
|
||
|
||
<footer data-i18n="footer">{{.FooterText}}</footer>
|
||
</div>
|
||
|
||
<div class="modal-backdrop" id="subscribe-modal" aria-hidden="true">
|
||
<div class="modal-panel" role="dialog" aria-modal="true" aria-labelledby="subscribe-title">
|
||
<button class="modal-close" id="subscribe-close-btn" type="button" aria-label="Close">×</button>
|
||
<h3 id="subscribe-title" data-i18n="subscribeTitle">We are building Bag Exchange.</h3>
|
||
<p class="modal-desc" data-i18n="subscribeDesc">Enter your email to stay updated.</p>
|
||
<form class="subscribe-form" id="subscribe-form">
|
||
<input class="form-input" id="subscribe-email" type="email" required data-i18n-placeholder="subscribePlaceholder" placeholder="Your email" />
|
||
<button class="btn btn-primary" id="subscribe-submit-btn" type="submit" data-i18n="subscribeCta">Keep me updated</button>
|
||
</form>
|
||
<p class="subscribe-feedback is-hidden" id="subscribe-feedback" data-i18n="subscribeThanks">Thank you. We will keep you updated.</p>
|
||
<p class="subscribe-error is-hidden" id="subscribe-error"></p>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="/static/js/i18n.js?v={{.AssetVersion}}"></script>
|
||
</body>
|
||
</html>
|