polish: typewriter SSR fix, Community link label, verify premium cards, loading skeleton

src/app/(site)/page.tsx

@@ -406,7 +406,7 @@ export default async function Home() {
 								</h3>
 							</div>
 							<Link href="/community" className="text-xs font-bold text-white/80 hover:text-white hover:underline">
-								{tp("allNews")}
+								{tp("allUsers")}
 							</Link>
 						</div>
 						<div className="p-4">

src/app/(site)/verify/page.tsx

@@ -1,13 +1,68 @@
+import { CheckCircle2, Clock, Link2, MailX } from "lucide-react";
 import Link from "next/link";
 import { getTranslations } from "next-intl/server";
 import { isValidVerificationToken } from "@/actions/email-verify";
-import { ContentCard, EmptyState } from "@/components/public/ui";
 import { prisma } from "@/lib/prisma";
 
 export const dynamic = "force-dynamic";
 
 type Status = "verified" | "already" | "invalid" | "unavailable";
 
+function StatusCard({
+	icon,
+	title,
+	subtitle,
+	children,
+	color,
+}: {
+	icon: React.ReactNode;
+	title: string;
+	subtitle: string;
+	children: React.ReactNode;
+	color: string;
+}) {
+	const gradientMap: Record<string, string> = {
+		green: "linear-gradient(140deg, #0A2F1A 0%, #0F3D22 20%, #154C2A 40%, #1B5A32 60%, #20683A 75%, #1A5A30 90%, #144826 100%)",
+		yellow: "linear-gradient(140deg, #3A2F0A 0%, #4A3D0F 20%, #5A4C15 40%, #6A5A1B 60%, #7A6820 75%, #6A5A1A 90%, #5A4814 100%)",
+		red: "linear-gradient(140deg, #3A0F0A 0%, #4A1A0F 20%, #5A2515 40%, #6A301B 60%, #7A3B20 75%, #6A301A 90%, #5A2514 100%)",
+		blue: "linear-gradient(140deg, #0A1A3A 0%, #0F254A 20%, #15305A 40%, #1B3B6A 60%, #20467A 75%, #1A3B6A 90%, #14305A 100%)",
+	};
+
+	return (
+		<main className="flex min-h-[60vh] items-center justify-center px-4">
+			<div
+				className="w-full max-w-md overflow-hidden rounded-xl border"
+				style={{
+					borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+					backgroundColor: "var(--color-surface)",
+				}}
+			>
+				<div
+					className="flex items-center gap-2.5 px-5 py-4"
+					style={{ background: gradientMap[color] ?? gradientMap.blue }}
+				>
+					<span className="text-white">{icon}</span>
+					<h1 className="text-sm font-bold text-white">{title}</h1>
+				</div>
+				<div className="flex flex-col items-center gap-4 px-6 py-8 text-center">
+					<div
+						className="flex h-16 w-16 items-center justify-center rounded-full"
+						style={{
+							background: "color-mix(in srgb, var(--color-primary) 12%, transparent)",
+						}}
+					>
+						{icon}
+					</div>
+					<p className="text-sm font-semibold" style={{ color: "var(--color-text-muted)" }}>
+						{subtitle}
+					</p>
+					{children}
+				</div>
+			</div>
+		</main>
+	);
+}
+
 export default async function VerifyPage({
 	searchParams,
 }: {
@@ -47,64 +102,82 @@ export default async function VerifyPage({
 		}
 	}
 
+	const linkClass =
+		"btn-shine inline-flex items-center gap-2 font-extrabold text-sm px-6 py-3 rounded-xl transition-all duration-200 hover:scale-[1.02] active:scale-95 shadow-lg";
+	const linkStyle = {
+		background: "var(--color-primary)",
+		color: "var(--color-primary-foreground)",
+		boxShadow: "0 4px 20px color-mix(in srgb, var(--color-primary) 30%, transparent)",
+	};
+
 	return (
-		<main style={{ maxWidth: 480, margin: "2rem auto" }}>
+		<>
 			{status === "verified" && (
-				<ContentCard
-					icon="✅"
+				<StatusCard
+					icon={<CheckCircle2 size={22} />}
 					title={t("verifiedTitle")}
 					subtitle={t("verifiedSubtitle")}
+					color="green"
 				>
-					<p className="muted" style={{ marginTop: 0 }}>
+					<p className="text-sm" style={{ color: "var(--color-text-muted)" }}>
 						{t("verifiedBody")}
 					</p>
-					<Link href="/login" className="btn btn-primary">
+					<Link href="/login" className={linkClass} style={linkStyle}>
 						{t("goToLogin")}
 					</Link>
-				</ContentCard>
+				</StatusCard>
 			)}
 
 			{status === "already" && (
-				<ContentCard
-					icon="✅"
+				<StatusCard
+					icon={<CheckCircle2 size={22} />}
 					title={t("alreadyTitle")}
 					subtitle={t("alreadySubtitle")}
+					color="yellow"
 				>
-					<p className="muted" style={{ marginTop: 0 }}>
+					<p className="text-sm" style={{ color: "var(--color-text-muted)" }}>
 						{t("alreadyBody")}
 					</p>
-					<Link href="/login" className="btn btn-primary">
+					<Link href="/login" className={linkClass} style={linkStyle}>
 						{t("goToLogin")}
 					</Link>
-				</ContentCard>
+				</StatusCard>
 			)}
 
 			{status === "unavailable" && (
-				<ContentCard
-					icon="⏳"
+				<StatusCard
+					icon={<Clock size={22} />}
 					title={t("unavailableTitle")}
 					subtitle={t("unavailableSubtitle")}
+					color="blue"
 				>
-					<p className="muted" style={{ margin: 0 }}>
+					<p className="text-sm" style={{ color: "var(--color-text-muted)" }}>
 						{t("unavailableBody")}
 					</p>
-				</ContentCard>
+				</StatusCard>
 			)}
 
 			{status === "invalid" && (
-				<ContentCard
-					icon="📧"
+				<StatusCard
+					icon={<MailX size={22} />}
 					title={t("invalidTitle")}
 					subtitle={t("invalidSubtitle")}
+					color="red"
 				>
-					<EmptyState icon="🔗">{t("invalidBody")}</EmptyState>
-					<div style={{ textAlign: "center" }}>
-						<Link href="/login" className="btn btn-outline">
-							{t("backToLogin")}
-						</Link>
-					</div>
-				</ContentCard>
+					<p className="text-sm" style={{ color: "var(--color-text-muted)" }}>
+						{t("invalidBody")}
+					</p>
+					<Link href="/login" className={`${linkClass} !shadow-none`}
+						style={{
+							background: "transparent",
+							color: "var(--color-text-readable)",
+							border: "2px solid color-mix(in srgb, var(--color-text-muted) 20%, transparent)",
+						}}
+					>
+						{t("backToLogin")}
+					</Link>
+				</StatusCard>
 			)}
-		</main>
+		</>
 	);
-}
+}

src/app/loading.tsx

@@ -1,15 +1,33 @@
 export default function RootLoading() {
 	return (
-		<div
-			style={{ display: "flex", justifyContent: "center", padding: "4rem 0" }}
-		>
-			<div
-				className="animate-spin w-8 h-8 border-4 rounded-full"
-				style={{
-					borderColor: "var(--color-primary)",
-					borderTopColor: "transparent",
-				}}
-			/>
+		<div style={{ maxWidth: 1280, margin: "0 auto", padding: "1.5rem 1rem" }}>
+			<div className="flex flex-col gap-10 pb-14">
+				<div
+					className="h-16 animate-pulse rounded-xl"
+					style={{
+						background: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+					}}
+				/>
+				<div className="relative overflow-hidden rounded-2xl" style={{ height: 280 }}>
+					<div
+						className="h-full w-full animate-pulse"
+						style={{
+							background: "color-mix(in srgb, var(--color-text-muted) 6%, transparent)",
+						}}
+					/>
+				</div>
+				<div className="grid grid-cols-3 gap-4">
+					{[1, 2, 3].map((i) => (
+						<div
+							key={i}
+							className="h-32 animate-pulse rounded-xl"
+							style={{
+								background: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+							}}
+						/>
+					))}
+				</div>
+			</div>
 		</div>
 	);
-}
+}

src/components/typewriter-text.tsx

@@ -10,13 +10,13 @@ export function TypewriterText({
 	text: string;
 	className?: string;
 }) {
-	const [displayed, setDisplayed] = useState("");
-	const [done, setDone] = useState(false);
+	const [displayed, setDisplayed] = useState(text[0] ?? "");
+	const [done, setDone] = useState(text.length <= 1);
 
 	useEffect(() => {
-		setDisplayed("");
-		setDone(false);
-		let i = 0;
+		setDisplayed(text[0] ?? "");
+		setDone(text.length <= 1);
+		let i = 1;
 		const id = setInterval(() => {
 			if (i < text.length) {
 				setDisplayed(text.slice(0, i + 1));
@@ -30,13 +30,14 @@ export function TypewriterText({
 	}, [text]);
 
 	return (
-		<motion.span
-			className={`${className ?? ""} ${!done ? "typing-cursor" : ""}`}
-			initial={{ opacity: 0 }}
-			animate={{ opacity: 1 }}
-			transition={{ duration: 0.3 }}
-		>
-			{displayed}
-		</motion.span>
+		<>
+			<span className="sr-only">{text}</span>
+			<motion.span
+				className={`${className ?? ""} ${!done ? "typing-cursor" : ""}`}
+				aria-hidden
+			>
+				{displayed}
+			</motion.span>
+		</>
 	);
 }

src/messages/bg.json

@@ -189,6 +189,7 @@
       "newsTitle": "Последни новини",
       "newsSubtitle": "Току що от хотела",
       "allNews": "Всички новини →",
+			"allUsers": "Общност →",
       "noArticles": "Все още няма статии.",
       "noPhotos": "Все още няма снимки.",
       "noUsers": "Няма потребители онлайн",

src/messages/cs.json

@@ -189,6 +189,7 @@
       "newsTitle": "Nejnovější zprávy",
       "newsSubtitle": "Čerstvé z hotelu",
       "allNews": "Všechny novinky →",
+			"allUsers": "Komunita →",
       "noArticles": "Zatím žádné články.",
       "noPhotos": "Zatím žádné fotky.",
       "noUsers": "Žádní uživatelé online",

src/messages/da.json

@@ -189,6 +189,7 @@
       "newsTitle": "Seneste nyt",
       "newsSubtitle": "Frisk fra hotellet",
       "allNews": "Alle nyheder →",
+			"allUsers": "Fællesskab →",
       "noArticles": "Ingen artikler endnu.",
       "noPhotos": "Ingen billeder endnu.",
       "noUsers": "Ingen brugere online",

src/messages/de.json

@@ -189,6 +189,7 @@
       "newsTitle": "Neueste Nachrichten",
       "newsSubtitle": "Frisch aus dem Hotel",
       "allNews": "Alle Nachrichten →",
+			"allUsers": "Community →",
       "noArticles": "Noch keine Artikel.",
       "noPhotos": "Noch keine Fotos.",
       "noUsers": "Keine Benutzer online",

src/messages/el.json

@@ -189,6 +189,7 @@
       "newsTitle": "Τελευταία νέα",
       "newsSubtitle": "Φρέσκο από το ξενοδοχείο",
       "allNews": "Όλα τα νέα →",
+			"allUsers": "Κοινότητα →",
       "noArticles": "Δεν υπάρχουν ακόμη άρθρα.",
       "noPhotos": "Δεν υπάρχουν ακόμα φωτογραφίες.",
       "noUsers": "Δεν υπάρχουν χρήστες στο διαδίκτυο",

src/messages/en.json

@@ -232,6 +232,7 @@
 			"newsTitle": "Latest news",
 			"newsSubtitle": "Fresh from the hotel",
 			"allNews": "All news →",
+			"allUsers": "Community →",
 			"noArticles": "No articles yet.",
 			"noPhotos": "No photos yet.",
 			"noUsers": "No users online",

src/messages/es.json

@@ -189,6 +189,7 @@
       "newsTitle": "Últimas noticias",
       "newsSubtitle": "Lo último del hotel",
       "allNews": "Todas las noticias →",
+			"allUsers": "Comunidad →",
       "noArticles": "Aún no hay artículos.",
       "noPhotos": "Aún no hay fotos.",
       "noUsers": "No hay usuarios en línea",

src/messages/fr.json

@@ -189,6 +189,7 @@
       "newsTitle": "Dernières actualités",
       "newsSubtitle": "Fraîchement sorties de l'hôtel",
       "allNews": "Toutes les actualités →",
+			"allUsers": "Communauté →",
       "noArticles": "Pas encore d'articles.",
       "noPhotos": "Pas encore de photos.",
       "noUsers": "Aucun utilisateur en ligne",

src/messages/hr.json

@@ -189,6 +189,7 @@
       "newsTitle": "Najnovije vijesti",
       "newsSubtitle": "Svježe iz hotela",
       "allNews": "Sve novosti →",
+			"allUsers": "Zajednica →",
       "noArticles": "Još nema članaka.",
       "noPhotos": "Još nema fotografija.",
       "noUsers": "Nema korisnika na mreži",

src/messages/hu.json

@@ -189,6 +189,7 @@
       "newsTitle": "Friss hírek",
       "newsSubtitle": "Frissen a szállodából",
       "allNews": "Minden hír →",
+			"allUsers": "Közösség →",
       "noArticles": "Még nincsenek cikkek.",
       "noPhotos": "Még nincsenek fényképek.",
       "noUsers": "Nincsenek online felhasználók",

src/messages/it.json

@@ -232,6 +232,7 @@
 			"newsTitle": "Ultime notizie",
 			"newsSubtitle": "Appena arrivate dall'hotel",
 			"allNews": "Tutte le notizie →",
+			"allUsers": "Community →",
 			"noArticles": "Ancora nessun articolo.",
 			"noPhotos": "Ancora nessuna foto.",
 			"noUsers": "Nessun utente online",

src/messages/nl.json

@@ -232,6 +232,7 @@
 			"newsTitle": "Laatste nieuws",
 			"newsSubtitle": "Vers van het hotel",
 			"allNews": "Al het nieuws →",
+			"allUsers": "Community →",
 			"noArticles": "Nog geen artikelen.",
 			"noPhotos": "Nog geen foto's.",
 			"noUsers": "Geen gebruikers online",

src/messages/no.json

@@ -189,6 +189,7 @@
       "newsTitle": "Siste nytt",
       "newsSubtitle": "Frisk fra hotellet",
       "allNews": "Alle nyheter →",
+			"allUsers": "Fellesskap →",
       "noArticles": "Ingen artikler ennå.",
       "noPhotos": "Ingen bilder ennå.",
       "noUsers": "Ingen brukere online",

src/messages/pl.json

@@ -189,6 +189,7 @@
       "newsTitle": "Najnowsze wiadomości",
       "newsSubtitle": "Świeżo z hotelu",
       "allNews": "Wszystkie aktualności →",
+			"allUsers": "Społeczność →",
       "noArticles": "Nie ma jeszcze artykułów.",
       "noPhotos": "Nie ma jeszcze zdjęć.",
       "noUsers": "Brak użytkowników online",

src/messages/pt.json

@@ -189,6 +189,7 @@
       "newsTitle": "Últimas notícias",
       "newsSubtitle": "Fresco do hotel",
       "allNews": "Todas as notícias →",
+			"allUsers": "Comunidade →",
       "noArticles": "Nenhum artigo ainda.",
       "noPhotos": "Ainda não há fotos.",
       "noUsers": "Nenhum usuário on-line",

src/messages/ro.json

@@ -189,6 +189,7 @@
       "newsTitle": "Ultimele știri",
       "newsSubtitle": "Proaspăt de la hotel",
       "allNews": "Toate știrile →",
+			"allUsers": "Comunitate →",
       "noArticles": "Încă nu există articole.",
       "noPhotos": "Nicio fotografie încă.",
       "noUsers": "Niciun utilizator online",

src/messages/ru.json

@@ -189,6 +189,7 @@
       "newsTitle": "Последние новости",
       "newsSubtitle": "Только что из отеля",
       "allNews": "Все новости →",
+			"allUsers": "Сообщество →",
       "noArticles": "Статей пока нет.",
       "noPhotos": "Фотографий пока нет.",
       "noUsers": "Нет пользователей в сети",

src/messages/sk.json

@@ -189,6 +189,7 @@
       "newsTitle": "Najnovšie správy",
       "newsSubtitle": "Čerstvé z hotela",
       "allNews": "Všetky novinky →",
+			"allUsers": "Komunita →",
       "noArticles": "Zatiaľ žiadne články.",
       "noPhotos": "Zatiaľ žiadne fotky.",
       "noUsers": "Žiadni používatelia online",

src/messages/sr.json

@@ -189,6 +189,7 @@
       "newsTitle": "Најновије вести",
       "newsSubtitle": "Свеже из хотела",
       "allNews": "Све вести →",
+			"allUsers": "Заједница →",
       "noArticles": "Још нема чланака.",
       "noPhotos": "Још нема фотографија.",
       "noUsers": "Нема корисника на мрежи",

src/messages/sv.json

@@ -189,6 +189,7 @@
       "newsTitle": "Senaste nyheterna",
       "newsSubtitle": "Färskt från hotellet",
       "allNews": "Alla nyheter →",
+			"allUsers": "Community →",
       "noArticles": "Inga artiklar ännu.",
       "noPhotos": "Inga foton än.",
       "noUsers": "Inga användare online",

src/messages/tr.json

@@ -189,6 +189,7 @@
       "newsTitle": "En son haberler",
       "newsSubtitle": "Otelden yeni çıkmış",
       "allNews": "Tüm haberler →",
+			"allUsers": "Topluluk →",
       "noArticles": "Henüz makale yok.",
       "noPhotos": "Henüz fotoğraf yok.",
       "noUsers": "Çevrimiçi kullanıcı yok",

src/messages/uk.json

@@ -189,6 +189,7 @@
       "newsTitle": "Останні новини",
       "newsSubtitle": "Щойно з готелю",
       "allNews": "Всі новини →",
+			"allUsers": "Спільнота →",
       "noArticles": "Ще немає статей.",
       "noPhotos": "Фото ще немає.",
       "noUsers": "Немає користувачів онлайн",