admin/softclick-landing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: customize coming soon page

Browse Source
This commit is contained in:
Zotov Ivan Yuryevich
2026-06-22 23:33:27 +03:00
parent 43b399745f
commit 226aedaf70
1 changed files with 103 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
src/pages/coming-soon.astro
View File

@@ -1,10 +1,10 @@
--- ---
// Standalone "Getting ready for launch" page shown to everyone who is NOT an // Standalone "Сайт в разработке" page shown to everyone who is NOT an unlocked
// unlocked client (strangers, search engines, bots). The gate in // client (strangers, search engines, bots). The gate in src/middleware.ts
// src/middleware.ts internally rewrites unauthorized requests to this route. // internally rewrites unauthorized requests to this route.
// //
// It is intentionally self-contained — no shared Layout and no Strapi data — so // It is intentionally self-contained — no shared Layout and no Strapi data — so
// it renders even while the rest of the site is gated. Edit the copy in <main>. // it renders even while the rest of the site is gated.
Astro.response.headers.set('X-Robots-Tag', 'noindex, nofollow') Astro.response.headers.set('X-Robots-Tag', 'noindex, nofollow')
--- ---
@@ -14,81 +14,123 @@ Astro.response.headers.set('X-Robots-Tag', 'noindex, nofollow')
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex, nofollow" /> <meta name="robots" content="noindex, nofollow" />
<title>Скоро запуск</title> <title>СОФТКЛИК — сайт в разработке</title>
</head> </head>
<body> <body>
<main> <div class="screen">
<div class="dot" aria-hidden="true"></div> <h1 class="logo">
<h1>Мы готовимся к запуску</h1> <span class="logo__line">СОФТ</span>
<p>Сайт скоро станет доступен. Спасибо, что заглянули — мы уже совсем близко.</p> <span class="logo__line logo__line--indent">КЛИК</span>
</main> </h1>
<div class="media">
<img class="astronaut" src="/astronaut.png" alt="Космонавт" width="960" height="1200" />
</div>
<p class="status">Сайт в разработке. Следите за обновлениями.</p>
</div>
<style is:global> <style is:global>
:root { :root {
color-scheme: dark; color-scheme: light;
--pad: 20px;
--media-bg: #efeeec;
} }
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
html, html,
body { body {
height: 100%;
margin: 0; margin: 0;
} }
body { body {
display: flex; font-family:
align-items: center; Inter,
justify-content: center; ui-sans-serif,
min-height: 100%; system-ui,
padding: 24px; -apple-system,
font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, 'Segoe UI',
Arial, sans-serif; Roboto,
color: #e7e9ee; Helvetica,
background: radial-gradient( Arial,
1200px 600px at 50% -10%, sans-serif;
#1b2a4a 0%, color: #000;
#0b1020 55%, background: #fff;
#070a14 100%
);
text-align: center;
} }
main {
max-width: 540px; /* Desktop: white content column on the left, astronaut on the right.
Logo pinned top-left, status pinned bottom-left. */
.screen {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr auto;
min-height: 100vh;
min-height: 100dvh;
} }
.dot {
width: 12px; .logo {
height: 12px; grid-column: 1;
margin: 0 auto 28px; grid-row: 1;
border-radius: 50%; align-self: start;
background: #5b8cff;
animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(91, 140, 255, 0.55);
}
70% {
box-shadow: 0 0 0 18px rgba(91, 140, 255, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(91, 140, 255, 0);
}
}
h1 {
margin: 0 0 14px;
font-size: clamp(28px, 5vw, 40px);
font-weight: 700;
letter-spacing: -0.02em;
}
p {
margin: 0; margin: 0;
font-size: clamp(15px, 2.5vw, 18px); padding: calc(var(--pad) * 4) var(--pad) 0 var(--pad);
line-height: 1.6; font-weight: 800;
color: #a8b0c2; text-transform: uppercase;
line-height: 0.88;
font-size: clamp(44px, 7vw, 104px);
} }
@media (prefers-reduced-motion: reduce) { .logo__line {
.dot { display: block;
animation: none; }
.logo__line--indent {
padding-left: 1ch;
}
.status {
grid-column: 1;
grid-row: 2;
align-self: end;
margin: 0;
padding: 0 var(--pad) var(--pad);
font-size: clamp(15px, 1.6vw, 20px);
font-weight: 500;
line-height: 1.5;
}
.media {
grid-column: 2;
grid-row: 1 / 3;
overflow: hidden;
background: var(--media-bg);
}
.astronaut {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center right;
transform: scaleX(-1);
}
/* Mobile: stack — logo on top, astronaut in the middle, status at bottom. */
@media (max-width: 768px) {
.screen {
grid-template-columns: 1fr;
grid-template-rows: auto minmax(0, 1fr) auto;
}
.logo {
grid-column: 1;
grid-row: 1;
font-size: clamp(40px, 16vw, 72px);
}
.media {
grid-column: 1;
grid-row: 2;
min-height: 42vh;
}
.status {
grid-column: 1;
grid-row: 3;
} }
} }
</style> </style>