fix(coming-soon): match the app's light brand design

Rebuild the landing on the real site language: white background with the same
pastel violet/sky/rose/amber hero blobs, the actual hero copy with the blue→violet
gradient highlight on «هوش مصنوعی», light countdown cards, light feature chips, and
the violet→blue gradient button. Countdown still to ۱ تیر ۱۴۰۵.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
soroush.asadi
2026-06-02 16:29:54 +03:30
parent 814eb8d54e
commit e3f025cd2d
+101 -136
View File
@@ -3,144 +3,128 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>فلت‌رندر — به‌زودی | FlatRender — Coming Soon</title> <title>فلت‌رندر — به‌زودی</title>
<meta name="description" content="فلت‌رندر؛ ساخت ویدیو و تصویر حرفه‌ای با هوش مصنوعی در چند دقیقه. به‌زودی." /> <meta name="description" content="ویدیو ساز و تصویر ساز مبتنی بر هوش مصنوعی با بیش از ۱٬۲۰۰ قالب. به‌زودی." />
<meta property="og:title" content="فلت‌رندر — به‌زودی" /> <meta property="og:title" content="فلت‌رندر — به‌زودی" />
<meta property="og:description" content="ساخت ویدیو و تصویر حرفه‌ای با هوش مصنوعی. به‌زودی راه‌اندازی می‌شود." /> <meta property="og:description" content="ویدیوها و تصاویر خیره‌کننده با هوش مصنوعی در چند دقیقه بسازید. به‌زودی." />
<meta property="og:type" content="website" />
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' rx='9' fill='%232563EB'/%3E%3Cpath d='M12 12.5L12 27.5L24.5 20L12 12.5Z' fill='white'/%3E%3C/svg%3E" /> <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' rx='9' fill='%232563EB'/%3E%3Cpath d='M12 12.5L12 27.5L24.5 20L12 12.5Z' fill='white'/%3E%3C/svg%3E" />
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vazirmatn@33.003/Vazirmatn-font-face.css" />
<style> <style>
:root { :root {
--blue: #2563eb; --blue-600: #2563eb;
--blue-light: #3b82f6; --blue-500: #3b82f6;
--violet: #7c3aed; --violet-600: #7c3aed;
--ink: #0b1020; --violet-500: #8b5cf6;
--muted: #94a3b8; --violet-50: #f5f3ff;
--card: rgba(255, 255, 255, 0.04); --violet-100: #ede9fe;
--border: rgba(255, 255, 255, 0.08); --blue-light: #eff6ff;
--n900: #171717;
--n700: #404040;
--n600: #525252;
--n500: #737373;
--n200: #e5e5e5;
--n100: #f5f5f5;
} }
* { margin: 0; padding: 0; box-sizing: border-box; } * { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; } html, body { height: 100%; }
body { body {
font-family: "Vazirmatn", Tahoma, "Segoe UI", system-ui, -apple-system, sans-serif; font-family: "Vazirmatn", Tahoma, "Segoe UI", system-ui, sans-serif;
background: var(--ink); color: var(--n900);
color: #e6ecff; background: #ffffff;
min-height: 100vh; min-height: 100vh;
overflow-x: hidden; display: flex; flex-direction: column;
position: relative; position: relative; overflow-x: hidden;
display: flex;
flex-direction: column;
}
/* Animated brand gradient blobs */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.blob {
position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.55;
animation: float 16s ease-in-out infinite;
}
.blob.b1 { width: 520px; height: 520px; background: var(--blue); top: -160px; right: -120px; }
.blob.b2 { width: 460px; height: 460px; background: var(--violet); bottom: -160px; left: -120px; animation-delay: -5s; }
.blob.b3 { width: 360px; height: 360px; background: #0ea5e9; top: 40%; left: 30%; opacity: 0.3; animation-delay: -9s; }
@keyframes float {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(0, -40px) scale(1.08); }
}
.grid-overlay {
position: fixed; inset: 0; z-index: 0; opacity: 0.4;
background-image: linear-gradient(var(--border) 1px, transparent 1px),
linear-gradient(90deg, var(--border) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: radial-gradient(ellipse 80% 60% at 50% 35%, #000 40%, transparent 100%);
} }
/* Light hero gradient + soft pastel blobs (matches the site hero) */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bg .wash { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(245,243,255,.9), rgba(255,255,255,.8) 55%, #fff); }
.blob { position: absolute; border-radius: 50%; filter: blur(64px); opacity: .4; animation: drift 15s ease-in-out infinite; }
.blob.v { width: 384px; height: 384px; background: #ddd6fe; top: 2%; right: 0%; }
.blob.s { width: 320px; height: 320px; background: #bae6fd; top: 6%; left: 0%; animation-delay: -4s; }
.blob.r { width: 288px; height: 288px; background: #ffe4e6; bottom: 18%; right: 28%; animation-delay: -7s; }
.blob.a { width: 256px; height: 256px; background: #fef3c7; bottom: 8%; left: 22%; animation-delay: -10s; }
@keyframes drift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(0,-22px) scale(1.06); } }
.topbar { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 20px 24px; }
.topbar svg { width: 36px; height: 36px; }
.topbar .name { font-weight: 800; font-size: 19px; color: var(--n900); }
main { main {
position: relative; z-index: 1; flex: 1; position: relative; z-index: 1; flex: 1;
display: flex; flex-direction: column; align-items: center; justify-content: center; display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; padding: 48px 20px; text-align: center; padding: 24px 20px 56px;
} }
.logo { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.logo svg { width: 52px; height: 52px; filter: drop-shadow(0 8px 24px rgba(37,99,235,.5)); }
.logo-name { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; }
.badge { .badge {
display: inline-flex; align-items: center; gap: 8px; display: inline-flex; align-items: center; gap: 7px;
background: var(--card); border: 1px solid var(--border); border: 1px solid var(--violet-100); background: rgba(255,255,255,.8); backdrop-filter: blur(6px);
padding: 8px 16px; border-radius: 999px; font-size: 13px; color: #c7d2fe; margin-bottom: 24px; padding: 7px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 500; color: var(--n600);
backdrop-filter: blur(8px); box-shadow: 0 1px 2px rgba(0,0,0,.04); margin-bottom: 26px;
} }
.badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 12px #22c55e; animation: pulse 2s infinite; } .badge .star { color: #f59e0b; }
@keyframes pulse { 50% { opacity: .4; } }
h1 { h1 {
font-size: clamp(34px, 7vw, 68px); font-weight: 800; line-height: 1.15; letter-spacing: -1px; font-size: clamp(30px, 6vw, 52px); font-weight: 800; line-height: 1.18; letter-spacing: -.5px;
margin-bottom: 18px; color: var(--n900); max-width: 16ch; margin-bottom: 20px;
} }
h1 .grad { h1 .grad {
background: linear-gradient(120deg, var(--blue-light), var(--violet)); background: linear-gradient(90deg, var(--blue-600), var(--violet-500), var(--blue-500));
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
} }
.lead { font-size: clamp(16px, 2.4vw, 21px); color: #b6c2e0; max-width: 640px; line-height: 1.9; margin-bottom: 40px; } .lead { font-size: clamp(15px, 2.2vw, 19px); color: var(--n600); max-width: 620px; line-height: 1.9; margin-bottom: 34px; }
/* Countdown */
.countdown { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; } /* Countdown — light cards */
.unit { .countdown { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
background: var(--card); border: 1px solid var(--border); border-radius: 18px; .unit { background: #fff; border: 1px solid var(--n100); border-radius: 16px; width: 100px; padding: 16px 8px; box-shadow: 0 4px 16px rgba(37,99,235,.06); }
width: 104px; padding: 18px 10px; backdrop-filter: blur(10px); .unit .num { font-size: clamp(30px, 5.5vw, 42px); font-weight: 800; line-height: 1; color: var(--n900); font-variant-numeric: tabular-nums; }
} .unit .lbl { font-size: 12.5px; color: var(--n500); margin-top: 9px; }
.unit .num { .target { font-size: 14px; color: var(--n500); margin-bottom: 40px; }
font-size: clamp(34px, 6vw, 48px); font-weight: 800; line-height: 1; .target b { color: var(--violet-600); font-weight: 700; }
font-variant-numeric: tabular-nums; color: #fff;
} /* Feature chips — light */
.unit .lbl { font-size: 13px; color: var(--muted); margin-top: 10px; } .features { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: 820px; margin-bottom: 40px; }
.target { font-size: 14px; color: var(--muted); margin-bottom: 44px; } .feat { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--n100); border-radius: 12px; padding: 10px 16px; font-size: 14px; color: var(--n700); box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.target b { color: #c7d2fe; font-weight: 600; } .feat svg { width: 18px; height: 18px; color: var(--blue-600); flex-shrink: 0; }
/* Features */
.features { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; max-width: 860px; margin-bottom: 44px; }
.feat {
display: flex; align-items: center; gap: 10px;
background: var(--card); border: 1px solid var(--border); border-radius: 14px;
padding: 12px 18px; font-size: 14.5px; color: #cdd8f3; backdrop-filter: blur(8px);
}
.feat svg { width: 20px; height: 20px; color: var(--blue-light); flex-shrink: 0; }
/* Notify form */ /* Notify form */
.notify { display: flex; gap: 10px; width: 100%; max-width: 440px; } .notify { display: flex; gap: 10px; width: 100%; max-width: 440px; }
.notify input { .notify input { flex: 1; background: #fff; border: 1px solid var(--n200); color: var(--n900); padding: 13px 16px; border-radius: 12px; font-size: 15px; font-family: inherit; outline: none; transition: border-color .15s; }
flex: 1; background: var(--card); border: 1px solid var(--border); color: #fff; .notify input::placeholder { color: var(--n500); }
padding: 14px 18px; border-radius: 14px; font-size: 15px; font-family: inherit; outline: none; .notify input:focus { border-color: var(--blue-600); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
}
.notify input::placeholder { color: var(--muted); }
.notify input:focus { border-color: var(--blue); }
.notify button { .notify button {
background: linear-gradient(120deg, var(--blue), var(--violet)); color: #fff; border: 0; background: linear-gradient(90deg, var(--violet-600), var(--blue-600)); color: #fff; border: 0;
padding: 14px 26px; border-radius: 14px; font-size: 15px; font-weight: 700; font-family: inherit; padding: 13px 24px; border-radius: 12px; font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer;
cursor: pointer; transition: transform .15s, box-shadow .15s; white-space: nowrap; box-shadow: 0 4px 14px rgba(37,99,235,.25); transition: transform .15s, box-shadow .15s; white-space: nowrap;
} }
.notify button:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(37,99,235,.45); } .notify button:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(37,99,235,.35); }
.notify-msg { font-size: 14px; color: #34d399; margin-top: 14px; min-height: 20px; } .notify-msg { font-size: 14px; color: #059669; margin-top: 13px; min-height: 20px; font-weight: 500; }
footer { position: relative; z-index: 1; text-align: center; padding: 24px; color: var(--muted); font-size: 13px; }
footer a { color: #c7d2fe; text-decoration: none; } footer { position: relative; z-index: 1; text-align: center; padding: 22px; color: var(--n500); font-size: 13px; border-top: 1px solid var(--n100); }
@media (max-width: 480px) { .unit { width: 76px; } } footer a { color: var(--blue-600); text-decoration: none; }
@media (max-width: 480px) { .unit { width: 74px; } }
</style> </style>
</head> </head>
<body> <body>
<div class="bg"> <div class="bg">
<div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div> <div class="wash"></div>
<div class="blob v"></div><div class="blob s"></div><div class="blob r"></div><div class="blob a"></div>
</div> </div>
<div class="grid-overlay"></div>
<header class="topbar">
<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<rect width="40" height="40" rx="9" fill="#2563EB" />
<path d="M12 12.5L12 27.5L24.5 20L12 12.5Z" fill="white" />
<rect x="27" y="13" width="7" height="2.5" rx="1.25" fill="white" fill-opacity="0.9" />
<rect x="27" y="18.75" width="5.5" height="2.5" rx="1.25" fill="white" fill-opacity="0.75" />
<rect x="27" y="24.5" width="4" height="2.5" rx="1.25" fill="white" fill-opacity="0.6" />
</svg>
<span class="name">فلت‌رندر</span>
</header>
<main> <main>
<div class="logo"> <div class="badge"><span class="star"></span> به‌زودی راه‌اندازی می‌شود</div>
<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<rect width="40" height="40" rx="9" fill="#2563EB" />
<path d="M12 12.5L12 27.5L24.5 20L12 12.5Z" fill="white" />
<rect x="27" y="13" width="7" height="2.5" rx="1.25" fill="white" fill-opacity="0.9" />
<rect x="27" y="18.75" width="5.5" height="2.5" rx="1.25" fill="white" fill-opacity="0.75" />
<rect x="27" y="24.5" width="4" height="2.5" rx="1.25" fill="white" fill-opacity="0.6" />
</svg>
<span class="logo-name">فلت‌رندر</span>
</div>
<div class="badge"><span class="dot"></span> به‌زودی راه‌اندازی می‌شود</div> <h1>ویدیوها و تصاویر خیره‌کننده با <span class="grad">هوش مصنوعی</span> در چند دقیقه بسازید</h1>
<p class="lead">ویدیو ساز و تصویر ساز مبتنی بر هوش مصنوعی با بیش از ۱٬۲۰۰ قالب ساخته‌شده توسط طراحان حرفه‌ای موشن.</p>
<h1>ساخت <span class="grad">ویدیو و تصویر</span><br />با هوش مصنوعی، در چند دقیقه</h1>
<p class="lead">
استودیوی آنلاین فلت‌رندر؛ ساخت ویدیوهای حرفه‌ای، ویرایش تصویر، و بیش از ۱۲۰۰ قالب آمادهٔ ساخته‌شده توسط طراحان موشن — همه در مرورگر شما. به‌زودی…
</p>
<div class="countdown" id="countdown" aria-live="polite"> <div class="countdown" id="countdown" aria-live="polite">
<div class="unit"><div class="num" id="d">۰۰</div><div class="lbl">روز</div></div> <div class="unit"><div class="num" id="d">۰۰</div><div class="lbl">روز</div></div>
@@ -153,9 +137,8 @@
<div class="features"> <div class="features">
<div class="feat"><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg> ویدیوساز هوش مصنوعی</div> <div class="feat"><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg> ویدیوساز هوش مصنوعی</div>
<div class="feat"><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg> ویرایشگر تصویر</div> <div class="feat"><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg> ویرایشگر تصویر</div>
<div class="feat"><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 2l2.4 7.4H22l-6 4.6 2.3 7.4L12 17l-6.3 4.4L8 14 2 9.4h7.6z"/></svg> بیش از ۱۲۰۰ قالب</div> <div class="feat"><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 2l2.4 7.4H22l-6 4.6 2.3 7.4L12 17l-6.3 4.4L8 14 2 9.4h7.6z"/></svg> بیش از ۱٬۲۰۰ قالب</div>
<div class="feat"><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg> موسیقی و صداگذاری</div> <div class="feat"><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg> موسیقی و صداگذاری</div>
<div class="feat"><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 4h16v12H4z"/><path d="M2 20h20"/></svg> خروجی HD و ۴K</div>
</div> </div>
<form class="notify" id="notify" onsubmit="return notifyMe(event)"> <form class="notify" id="notify" onsubmit="return notifyMe(event)">
@@ -165,45 +148,27 @@
<p class="notify-msg" id="notifyMsg"></p> <p class="notify-msg" id="notifyMsg"></p>
</main> </main>
<footer> <footer>© <span id="year">۱۴۰۵</span> فلت‌رندر — تمامی حقوق محفوظ است. · <a href="mailto:hello@flatrender.com">hello@flatrender.com</a></footer>
© <span id="year"></span> فلت‌رندر — تمامی حقوق محفوظ است. ·
<a href="mailto:hello@flatrender.com">hello@flatrender.com</a>
</footer>
<script> <script>
// ── Countdown to 1 Tir 1405 (22 June 2026, 00:00 Iran time, UTC+03:30) ── // Countdown to 1 Tir 1405 (22 June 2026, 00:00 Iran time, UTC+03:30)
var TARGET = new Date("2026-06-22T00:00:00+03:30").getTime(); var TARGET = new Date("2026-06-22T00:00:00+03:30").getTime();
var faDigits = function (n) { function fa(n) { return String(n).padStart(2, "0").replace(/[0-9]/g, function (d) { return "۰۱۲۳۴۵۶۷۸۹"[d]; }); }
return String(n).padStart(2, "0").replace(/[0-9]/g, function (d) {
return "۰۱۲۳۴۵۶۷۸۹"[d];
});
};
function tick() { function tick() {
var diff = TARGET - Date.now(); var diff = Math.max(0, TARGET - Date.now());
if (diff < 0) diff = 0;
var s = Math.floor(diff / 1000); var s = Math.floor(diff / 1000);
document.getElementById("d").textContent = faDigits(Math.floor(s / 86400)); document.getElementById("d").textContent = fa(Math.floor(s / 86400));
document.getElementById("h").textContent = faDigits(Math.floor((s % 86400) / 3600)); document.getElementById("h").textContent = fa(Math.floor((s % 86400) / 3600));
document.getElementById("m").textContent = faDigits(Math.floor((s % 3600) / 60)); document.getElementById("m").textContent = fa(Math.floor((s % 3600) / 60));
document.getElementById("s").textContent = faDigits(s % 60); document.getElementById("s").textContent = fa(s % 60);
} }
tick(); tick(); setInterval(tick, 1000);
setInterval(tick, 1000);
document.getElementById("year").textContent = "۱۴۰۵";
// ── Notify-me (stores locally; POSTs to /subscribe if a backend is wired) ──
function notifyMe(e) { function notifyMe(e) {
e.preventDefault(); e.preventDefault();
var email = document.getElementById("email").value; var email = document.getElementById("email").value;
var msg = document.getElementById("notifyMsg"); try { fetch("/subscribe", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ email: email }) }).catch(function () {}); } catch (_) {}
try { document.getElementById("notifyMsg").textContent = "ممنون! به‌محض راه‌اندازی به شما اطلاع می‌دهیم. ✓";
fetch("/subscribe", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ email: email }),
}).catch(function () {});
} catch (_) {}
msg.textContent = "ممنون! به‌محض راه‌اندازی به شما اطلاع می‌دهیم. ✓";
document.getElementById("notify").reset(); document.getElementById("notify").reset();
return false; return false;
} }