Redesign homepage: cleaner Habbo layout, glass cards, hero with hotel bg, removed clutter

src/app/(site)/page.tsx

@@ -13,7 +13,7 @@ export const revalidate = 120;
 
 async function getHotelData() {
 	const [hotelName, imagerRaw] = await Promise.all([
-		siteSettings.get("hotel_name", "Hotel"),
+		siteSettings.get("hotel_name", "Atom"),
 		siteSettings.get(
 			"habbo_imaging_url",
 			"https://www.habbo.com/habbo-imaging/avatarimage",
@@ -73,50 +73,47 @@ export default async function Home() {
 	} = await getHotelData();
 
 	return (
-		<div className="flex flex-col gap-16 pb-16">
+		<div className="flex flex-col gap-14 pb-14">
-			<style>{`
+			{/* ── 1. Hero ── */}
-				@keyframes train-scroll {
-					0% { transform: translateX(0); }
-					100% { transform: translateX(-50%); }
-				}
-				.train-track {
-					animation: train-scroll 40s linear infinite;
-					display: flex;
-					gap: 0.75rem;
-					width: max-content;
-				}
-				.train-track:hover {
-					animation-play-state: paused;
-				}
-			`}</style>
-			{/* ── 1. Welcome section ── */}
-			<div className="flex flex-col lg:flex-row items-center gap-10 lg:gap-16">
-				<div className="flex-1 text-center lg:text-left">
 			<div
-						className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-xs font-bold uppercase tracking-widest mb-5 border"
+				className="relative overflow-hidden rounded-3xl border px-6 py-10 md:px-10 md:py-14 lg:py-16"
+				style={{
+					background: `url(/assets/images/background.png) center/cover no-repeat`,
+					borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+				}}
+			>
+				<div
+					className="absolute inset-0"
 					style={{
 						background:
-								"color-mix(in srgb, var(--color-primary) 12%, transparent)",
+							"linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 85%, transparent) 0%, color-mix(in srgb, var(--color-surface) 40%, transparent) 50%, color-mix(in srgb, var(--color-surface) 20%, transparent) 100%)",
-							borderColor:
+					}}
-								"color-mix(in srgb, var(--color-primary) 20%, transparent)",
+				/>
+				<div className="relative flex flex-col lg:flex-row items-center gap-8 lg:gap-14">
+					<div className="flex-1 text-center lg:text-left">
+						<div
+							className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-xs font-bold uppercase tracking-widest mb-5 border backdrop-blur-sm"
+							style={{
+								background: "color-mix(in srgb, var(--color-primary) 12%, transparent)",
+								borderColor: "color-mix(in srgb, var(--color-primary) 20%, transparent)",
 								color: "var(--color-primary-readable, var(--color-primary))",
 							}}
 						>
-						<span className="w-2 h-2 rounded-full bg-green-500" />
+							<span className="relative flex h-2 w-2">
-						{th("online", { count: online, hotel: hotelName ?? "Hotel" })}
+								<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
+								<span className="relative inline-flex rounded-full h-2 w-2 bg-green-500" />
+							</span>
+							{th("online", { count: online, hotel: hotelName ?? "Atom" })}
 						</div>
 						<h1
 							className="text-4xl md:text-5xl lg:text-6xl font-black leading-[1.05] tracking-tight mb-4"
 							style={{ color: "var(--color-text-readable)" }}
 						>
-						{tp("welcome", { hotelName: hotelName ?? "Hotel" })}
+							{tp("welcome", { hotelName: hotelName ?? "Atom" })}
 						</h1>
 						<p
 							className="text-base md:text-lg leading-relaxed max-w-xl mb-8"
-						style={{
+							style={{ color: "var(--color-text-muted)" }}
-							color:
-								"var(--color-text-muted-readable, var(--color-text-muted))",
-						}}
 						>
 							{th("tagline")}
 						</p>
@@ -127,276 +124,148 @@ export default async function Home() {
 								style={{
 									background: "var(--color-primary)",
 									color: "var(--color-primary-foreground)",
-								boxShadow:
+									boxShadow: "0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
-									"0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
 								}}
 							>
-							<Image
+								<Image src="/assets/images/EnterHubbly.png" alt="" width={20} height={20} unoptimized />
-								src="/assets/images/EnterHubbly.png"
+								{tp("enterHotel", { hotelName: hotelName ?? "Atom" })}
-								alt=""
-								width={20}
-								height={20}
-								unoptimized
-							/>
-							{tp("enterHotel", { hotelName: hotelName ?? "Hotel" })}
 							</Link>
 							<Link
 								href="/client"
-							className="inline-flex items-center gap-2 font-bold text-sm px-7 py-3.5 rounded-xl border-2 transition-all duration-200 hover:scale-[1.03] active:scale-95"
+								className="inline-flex items-center gap-2 font-bold text-sm px-7 py-3.5 rounded-xl border-2 transition-all duration-200 hover:scale-[1.03] active:scale-95 backdrop-blur-sm"
 								style={{
-								borderColor:
+									borderColor: "color-mix(in srgb, var(--color-text-muted) 20%, transparent)",
-									"color-mix(in srgb, var(--color-text-muted) 20%, transparent)",
 									color: "var(--color-text-readable)",
+									background: "color-mix(in srgb, var(--color-surface) 50%, transparent)",
 								}}
 							>
 								{th("nitroClient")}
 							</Link>
 						</div>
 					</div>
-				<div className="shrink-0 flex items-end gap-6">
+					<div className="shrink-0 relative">
-					<div className="relative">
 						<div
-							className="absolute -bottom-4 -left-4 w-48 h-48 rounded-full opacity-[0.1] blur-[60px]"
+							className="absolute -bottom-4 -left-4 w-48 h-48 rounded-full opacity-[0.15] blur-[60px]"
 							style={{ background: "var(--color-primary)" }}
 						/>
 						<Image
 							src="/assets/images/FrankwithBag.gif"
 							alt="Frank"
-							width={160}
+							width={180}
-							height={210}
+							height={240}
 							className="object-contain drop-shadow-2xl relative"
 							unoptimized
 							priority
 						/>
 					</div>
-					<div className="hidden sm:flex flex-col gap-2">
-						{recentUsers.slice(0, 5).map((u) => (
-							<div
-								key={u.username}
-								className="flex items-center gap-2 px-3 py-1.5 rounded-lg transition-colors hover:bg-black/5 dark:hover:bg-white/5"
-							>
-								<Image
-									src={avatarImageUrl(imager, u.look, {
-										headOnly: true,
-										direction: 2,
-										size: "s",
-									})}
-									alt=""
-									width={28}
-									height={34}
-									className="rounded-md"
-									unoptimized
-								/>
-								<div>
-									<p
-										className="text-xs font-bold leading-tight"
-										style={{ color: "var(--color-text-readable)" }}
-									>
-										{u.username}
-									</p>
-									<p className="text-[10px] font-semibold text-green-500">
-										{tp("statsOnline")}
-									</p>
-								</div>
-							</div>
-						))}
-					</div>
 				</div>
 			</div>
 
 			{/* ── 2. Stats ── */}
 			<div className="grid grid-cols-3 gap-4">
 				{[
-					{ value: online.toLocaleString(), label: tp("statsOnline"), icon: "🟢" },
+					{ value: online.toLocaleString(), label: tp("statsOnline"), icon: "/assets/images/icons/navigation/home.png" },
-					{ value: users.toLocaleString(), label: tp("statsCitizens"), icon: "👤" },
+					{ value: users.toLocaleString(), label: tp("statsCitizens"), icon: "/assets/images/icons/navigation/me.png" },
-					{ value: rooms.toLocaleString(), label: tp("statsRooms"), icon: "🏠" },
+					{ value: rooms.toLocaleString(), label: tp("statsRooms"), icon: "/assets/images/icons/catalog.png" },
 				].map((s) => (
 					<div
 						key={s.label}
-						className="rounded-2xl border p-5 text-center transition-all duration-200 hover:-translate-y-0.5"
+						className="relative overflow-hidden rounded-2xl border p-5 text-center transition-all duration-200 hover:-translate-y-0.5"
 						style={{
-							background: "var(--color-surface)",
+							background: "color-mix(in srgb, var(--color-surface) 70%, transparent)",
-							borderColor:
+							backdropFilter: "blur(8px)",
-								"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
+							WebkitBackdropFilter: "blur(8px)",
+							borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
 						}}
 					>
 						<div
-							className="text-3xl md:text-4xl font-black tracking-tight mb-0.5"
+							className="absolute -top-6 -right-6 w-20 h-20 rounded-full opacity-[0.06]"
-							style={{ color: "var(--color-primary)" }}
+							style={{ background: "var(--color-primary)" }}
-						>
+						/>
+						<div className="relative">
+							<Image src={s.icon} alt="" width={28} height={28} className="mx-auto mb-1.5 opacity-50" unoptimized />
+							<div className="text-3xl md:text-4xl font-black tracking-tight mb-0.5" style={{ color: "var(--color-primary)" }}>
 								{s.value}
 							</div>
-						<div
+							<div className="text-xs font-bold uppercase tracking-widest" style={{ color: "var(--color-text-muted)" }}>
-							className="text-xs font-bold uppercase tracking-widest"
-							style={{ color: "var(--color-text-muted)" }}
-						>
 								{s.label}
 							</div>
 						</div>
-				))}
-			</div>
-
-			{/* ── 3. User train ── */}
-			{recentUsers.length > 0 && (
-				<div
-					className="rounded-2xl border overflow-hidden py-3"
-					style={{
-						background: "var(--color-surface)",
-						borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
-					}}
-				>
-					<div className="train-track">
-						{[...recentUsers, ...recentUsers].map((u, i) => (
-							<div
-								key={`${u.username}-${i}`}
-								className="flex flex-col items-center gap-0.5 px-2 py-1.5 rounded-xl transition-all duration-200 hover:scale-110"
-								style={{
-									background: "color-mix(in srgb, var(--color-primary) 4%, transparent)",
-								}}
-							>
-								<Image
-									src={avatarImageUrl(imager, u.look, {
-										headOnly: true,
-										direction: 2,
-										size: "s",
-									})}
-									alt={u.username}
-									width={34}
-									height={42}
-									className="rounded-md"
-									unoptimized
-								/>
-								<span
-									className="text-[9px] font-bold truncate max-w-[54px] text-center leading-tight"
-									style={{ color: "var(--color-text-readable)" }}
-								>
-									{u.username}
-								</span>
 					</div>
 				))}
 			</div>
-				</div>
-			)}
 
-			{/* ── 4. Features ── */}
+			{/* ── 3. Features ── */}
 			<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
 				{[
-					{
+					{ img: "/assets/images/icons/star.gif", title: tp("featuresAvatar"), desc: tp("featuresAvatarDesc") },
-						img: "/assets/images/icons/star.gif",
+					{ img: "/assets/images/icons/catalog.png", title: tp("featuresFurniture"), desc: tp("featuresFurnitureDesc") },
-						title: tp("featuresAvatar"),
+					{ img: "/assets/images/icons/navigation/community.png", title: tp("featuresCommunity"), desc: tp("featuresCommunityDesc") },
-						desc: tp("featuresAvatarDesc"),
+					{ img: "/assets/images/icons/navigation/bb.png", title: tp("featuresGames"), desc: tp("featuresGamesDesc") },
-					},
-					{
-						img: "/assets/images/icons/catalog.png",
-						title: tp("featuresFurniture"),
-						desc: tp("featuresFurnitureDesc"),
-					},
-					{
-						img: "/assets/images/icons/navigation/community.png",
-						title: tp("featuresCommunity"),
-						desc: tp("featuresCommunityDesc"),
-					},
-					{
-						img: "/assets/images/icons/navigation/bb.png",
-						title: tp("featuresGames"),
-						desc: tp("featuresGamesDesc"),
-					},
 				].map((f) => (
 					<div
 						key={f.title}
 						className="rounded-2xl border p-5 transition-all duration-200 hover:-translate-y-0.5"
 						style={{
-							background: "var(--color-surface)",
+							background: "color-mix(in srgb, var(--color-surface) 70%, transparent)",
-							borderColor:
+							backdropFilter: "blur(8px)",
-								"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
+							WebkitBackdropFilter: "blur(8px)",
+							borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
 						}}
 					>
 						<div
 							className="w-11 h-11 rounded-xl flex items-center justify-center mb-3.5"
-							style={{
+							style={{ background: "color-mix(in srgb, var(--color-primary) 12%, transparent)" }}
-								background:
-									"color-mix(in srgb, var(--color-primary) 12%, transparent)",
-							}}
 						>
 							<Image src={f.img} alt="" width={24} height={24} unoptimized />
 						</div>
-						<h3
+						<h3 className="text-sm font-extrabold mb-1.5" style={{ color: "var(--color-text-readable)" }}>
-							className="text-sm font-extrabold mb-1.5"
-							style={{ color: "var(--color-text-readable)" }}
-						>
 							{f.title}
 						</h3>
-						<p
+						<p className="text-xs leading-relaxed" style={{ color: "var(--color-text-muted)" }}>
-							className="text-xs leading-relaxed"
-							style={{ color: "var(--color-text-muted)" }}
-						>
 							{f.desc}
 						</p>
 					</div>
 				))}
 			</div>
 
-			{/* ── 5. News + Sidebar ── */}
+			{/* ── 4. News ── */}
-			<div className="grid lg:grid-cols-12 gap-6">
+			<div className="space-y-4">
-				<div className="lg:col-span-8 space-y-4">
 				<div className="flex items-center justify-between">
-						<h2
+					<h2 className="text-xl font-black tracking-tight" style={{ color: "var(--color-text-readable)" }}>
-							className="text-xl font-black tracking-tight"
-							style={{ color: "var(--color-text-readable)" }}
-						>
 						{tp("latestNews")}
 					</h2>
-						<Link
+					<Link href="/news" className="text-sm font-bold hover:underline" style={{ color: "var(--color-primary)" }}>
-							href="/news"
-							className="text-sm font-bold hover:underline"
-							style={{ color: "var(--color-primary)" }}
-						>
 						{tp("allNews")}
 					</Link>
 				</div>
 				{articles.length > 0 ? (
-						<div className="space-y-3">
+					<div className="grid sm:grid-cols-2 gap-4">
 						{articles.slice(0, 4).map((a) => (
 							<Link
 								key={a.slug}
 								href={`/news/${a.slug}`}
-									className="flex gap-3.5 items-start rounded-2xl border p-4 transition-all duration-200 hover:-translate-y-0.5"
+								className="flex gap-4 items-start rounded-2xl border p-4 transition-all duration-200 hover:-translate-y-0.5"
 								style={{
-										background: "var(--color-surface)",
+									background: "color-mix(in srgb, var(--color-surface) 70%, transparent)",
-										borderColor:
+									backdropFilter: "blur(8px)",
-											"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
+									WebkitBackdropFilter: "blur(8px)",
+									borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
 									textDecoration: "none",
 								}}
 							>
 								<div className="relative w-14 h-14 shrink-0 rounded-xl overflow-hidden">
 									{a.image ? (
-											<Image
+										<Image src={a.image} alt="" fill className="object-cover" unoptimized />
-												src={a.image}
-												alt=""
-												fill
-												className="object-cover"
-												unoptimized
-											/>
 									) : (
-											<div
+										<div className="w-full h-full" style={{ background: `color-mix(in srgb, var(--color-primary) 15%, transparent)` }} />
-												className="w-full h-full"
-												style={{
-													background: `color-mix(in srgb, var(--color-primary) 15%, transparent)`,
-												}}
-											/>
 									)}
 								</div>
 								<div className="min-w-0">
-										<h3
+									<h3 className="text-sm font-extrabold leading-snug" style={{ color: "var(--color-text-readable)" }}>
-											className="text-sm font-extrabold leading-snug"
-											style={{ color: "var(--color-text-readable)" }}
-										>
 										{a.title}
 									</h3>
-										<p
+									<p className="text-xs font-semibold mt-1" style={{ color: "var(--color-text-muted)" }}>
-											className="text-xs font-semibold mt-1"
-											style={{ color: "var(--color-text-muted)" }}
-										>
 										{formatDate(a.createdAt, "date", "")}
 									</p>
 								</div>
@@ -404,55 +273,33 @@ export default async function Home() {
 						))}
 					</div>
 				) : (
-						<p className="text-sm" style={{ color: "var(--color-text-muted)" }}>
+					<p className="text-sm" style={{ color: "var(--color-text-muted)" }}>{tp("noArticles")}</p>
-							{tp("noArticles")}
-						</p>
 				)}
 			</div>
 
-				<aside className="lg:col-span-4 space-y-4">
+			{/* ── 5. Online users row ── */}
 			{recentUsers.length > 0 && (
-						<div
+				<div className="text-center">
-							className="rounded-2xl border p-4"
+					<h3 className="text-xs font-bold uppercase tracking-widest mb-3 flex items-center justify-center gap-2" style={{ color: "var(--color-text-muted)" }}>
-							style={{
-								background: "var(--color-surface)",
-								borderColor:
-									"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
-							}}
-						>
-							<h3
-								className="text-xs font-bold uppercase tracking-widest mb-3 flex items-center gap-2"
-								style={{ color: "var(--color-text-muted)" }}
-							>
 						<span className="w-2 h-2 rounded-full bg-green-500" />
 						{tp("recentUsers")}
 					</h3>
-							<div className="grid grid-cols-3 gap-2">
+					<div className="flex flex-wrap justify-center gap-2">
-								{recentUsers.slice(0, 9).map((u) => (
+						{recentUsers.slice(0, 10).map((u) => (
 							<div
 								key={u.username}
-										className="flex flex-col items-center gap-1 p-1.5 rounded-lg"
+								className="flex flex-col items-center gap-0.5 px-2 py-1.5 rounded-xl transition-all duration-200 hover:scale-110"
-										style={{
+								style={{ background: "color-mix(in srgb, var(--color-primary) 4%, transparent)" }}
-											background:
-												"color-mix(in srgb, var(--color-primary) 4%, transparent)",
-										}}
 							>
 								<Image
-											src={avatarImageUrl(imager, u.look, {
+									src={avatarImageUrl(imager, u.look, { headOnly: true, direction: 2, size: "s" })}
-												headOnly: true,
+									alt={u.username}
-												direction: 2,
-												size: "s",
-											})}
-											alt=""
 									width={30}
 									height={36}
 									className="rounded-md"
 									unoptimized
 								/>
-										<span
+								<span className="text-[9px] font-bold truncate max-w-[50px] text-center leading-tight" style={{ color: "var(--color-text-readable)" }}>
-											className="text-[9px] font-bold truncate w-full text-center leading-tight"
-											style={{ color: "var(--color-text-readable)" }}
-										>
 									{u.username}
 								</span>
 							</div>
@@ -461,28 +308,43 @@ export default async function Home() {
 				</div>
 			)}
 
-					{recentPhotos.length > 0 && (
+			{/* ── 6. Bottom CTA ── */}
 			<div
-							className="rounded-2xl border p-4"
+				className="relative overflow-hidden rounded-2xl border text-center px-6 py-10"
 				style={{
-								background: "var(--color-surface)",
+					background: `linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)), color-mix(in srgb, var(--color-surface) 70%, transparent))`,
-								borderColor:
+					borderColor: "color-mix(in srgb, var(--color-primary) 15%, transparent)",
-									"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
 				}}
 			>
-							<h3
+				<h2 className="text-2xl md:text-3xl font-black tracking-tight mb-2" style={{ color: "var(--color-text-readable)" }}>
-								className="text-xs font-bold uppercase tracking-widest mb-3"
+					{tp("joinNow", { hotelName: hotelName ?? "Atom" })}
-								style={{ color: "var(--color-text-muted)" }}
+				</h2>
+				<p className="text-sm mb-6 max-w-sm mx-auto" style={{ color: "var(--color-text-muted)" }}>
+					{tp("welcomeBody")}
+				</p>
+				<Link
+					href="/register"
+					className="inline-flex items-center gap-2.5 font-extrabold text-sm px-8 py-3.5 rounded-xl transition-all duration-200 hover:scale-[1.03] active:scale-95 shadow-lg"
+					style={{
+						background: "var(--color-primary)",
+						color: "var(--color-primary-foreground)",
+						boxShadow: "0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
+					}}
 				>
+					<Image src="/assets/images/EnterHubbly.png" alt="" width={20} height={20} unoptimized />
+					{tp("register")}
+				</Link>
+			</div>
+
+			{/* ── 7. Recent photos (compact) ── */}
+			{recentPhotos.length > 0 && (
+				<div className="text-center">
+					<h3 className="text-xs font-bold uppercase tracking-widest mb-3" style={{ color: "var(--color-text-muted)" }}>
 						{tp("recentPhotos")}
 					</h3>
-							<div className="grid grid-cols-2 gap-2">
+					<div className="grid grid-cols-4 gap-2 max-w-sm mx-auto">
-								{recentPhotos.map((p) => (
+						{recentPhotos.slice(0, 4).map((p) => (
-									<Link
+							<Link key={p.id} href="/photos" className="block rounded-lg overflow-hidden aspect-square">
-										key={p.id}
-										href="/photos"
-										className="block rounded-lg overflow-hidden aspect-square"
-									>
 								<Image
 									src={p.url}
 									alt=""
@@ -496,74 +358,6 @@ export default async function Home() {
 					</div>
 				</div>
 			)}
-
-					<div
-						className="rounded-2xl border p-5 text-center"
-						style={{
-							background: `linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)), transparent)`,
-							borderColor:
-								"color-mix(in srgb, var(--color-primary) 15%, transparent)",
-						}}
-					>
-						<Image
-							src="/assets/images/FrankwithBag.gif"
-							alt=""
-							width={48}
-							height={60}
-							className="object-contain mx-auto mb-2 opacity-50"
-							unoptimized
-						/>
-						<p
-							className="text-xs font-bold"
-							style={{ color: "var(--color-text-muted)" }}
-						>
-							{tp("joinNow", { hotelName: hotelName ?? "Hotel" })}
-						</p>
-					</div>
-				</aside>
-			</div>
-
-			{/* ── 6. CTA ── */}
-			<div
-				className="rounded-2xl border text-center px-6 py-10"
-				style={{
-					background: `linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)), var(--color-surface))`,
-					borderColor:
-						"color-mix(in srgb, var(--color-primary) 20%, transparent)",
-				}}
-			>
-				<h2
-					className="text-2xl md:text-3xl font-black tracking-tight mb-2"
-					style={{ color: "var(--color-text-readable)" }}
-				>
-					{tp("joinNow", { hotelName: hotelName ?? "Hotel" })}
-				</h2>
-				<p
-					className="text-sm mb-6 max-w-sm mx-auto"
-					style={{ color: "var(--color-text-muted)" }}
-				>
-					{tp("welcomeBody")}
-				</p>
-				<Link
-					href="/register"
-					className="inline-flex items-center gap-2.5 font-extrabold text-sm px-8 py-3.5 rounded-xl transition-all duration-200 hover:scale-[1.03] active:scale-95 shadow-lg"
-					style={{
-						background: "var(--color-primary)",
-						color: "var(--color-primary-foreground)",
-						boxShadow:
-							"0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
-					}}
-				>
-					<Image
-						src="/assets/images/EnterHubbly.png"
-						alt=""
-						width={20}
-						height={20}
-						unoptimized
-					/>
-					{tp("register")}
-				</Link>
-			</div>
 		</div>
 	);
 }