feat(home): make index clearer with decluttered hero and live stats panel
This commit is contained in:
openhands committed
1 parent
a6e808a099
commit
d0db352f36
3 files changed
+83
-86
No files matched your search
+81
-86
@@ -349,66 +349,6 @@ export default async function Home() {
|
||||
{th("login")}
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center justify-center gap-2 sm:gap-2.5">
|
||||
{[
|
||||
{
|
||||
value: users,
|
||||
label: tp("statsCitizens"),
|
||||
icon: ICON_FRIENDS,
|
||||
live: false,
|
||||
},
|
||||
{
|
||||
value: rooms,
|
||||
label: tp("statsRooms"),
|
||||
icon: ICON_CATALOG,
|
||||
live: false,
|
||||
},
|
||||
{
|
||||
value: online,
|
||||
label: tp("statsOnline"),
|
||||
icon: ICON_NAV_ME,
|
||||
live: true,
|
||||
},
|
||||
].map((s) => (
|
||||
<div key={s.label} className="glass-chip">
|
||||
<Image
|
||||
src={s.icon}
|
||||
alt=""
|
||||
width={12}
|
||||
height={12}
|
||||
unoptimized
|
||||
className="opacity-70"
|
||||
/>
|
||||
<span
|
||||
className="glass-chip-dot"
|
||||
style={{
|
||||
background: s.live
|
||||
? "var(--color-primary)"
|
||||
: "color-mix(in srgb, var(--color-text-muted) 55%, transparent)",
|
||||
boxShadow: s.live
|
||||
? "0 0 10px color-mix(in srgb, var(--color-primary) 70%, transparent)"
|
||||
: "none",
|
||||
}}
|
||||
/>
|
||||
<span
|
||||
className="glass-chip-value"
|
||||
style={{
|
||||
color: "var(--color-text-readable)",
|
||||
fontSize: "13px",
|
||||
}}
|
||||
>
|
||||
{s.value === null ? (
|
||||
<span className="text-xs">{te("unavailable")}</span>
|
||||
) : s.live ? (
|
||||
<LiveOnlineCounter initial={s.value} />
|
||||
) : (
|
||||
<AnimatedCounter value={s.value} />
|
||||
)}
|
||||
</span>
|
||||
<span className="glass-chip-label">{s.label}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
@@ -423,18 +363,25 @@ export default async function Home() {
|
||||
</h2>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-3 sm:gap-4">
|
||||
{features.map((f) => (
|
||||
{features.map((f, i) => {
|
||||
const accentVar =
|
||||
i % 2 === 0 ? "var(--color-primary)" : "var(--color-accent)";
|
||||
return (
|
||||
<SurfaceCard
|
||||
key={f.title}
|
||||
className="group card-glow card-hairline relative p-4 sm:p-5 text-center transition-all duration-300 hover:-translate-y-1.5"
|
||||
>
|
||||
<div
|
||||
className="mx-auto mb-3 h-1 w-9 rounded-full opacity-80 transition-all duration-300 group-hover:w-14 group-hover:opacity-100"
|
||||
style={{
|
||||
background: `linear-gradient(90deg, ${accentVar}, color-mix(in srgb, ${accentVar} 45%, var(--color-accent)))`,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="mx-auto mb-3 flex h-11 w-11 sm:h-12 sm:w-12 items-center justify-center rounded-xl transition-transform duration-300 group-hover:scale-110 group-hover:rotate-3"
|
||||
style={{
|
||||
background:
|
||||
"color-mix(in srgb, var(--color-primary) 14%, transparent)",
|
||||
boxShadow:
|
||||
"inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 10%, transparent)",
|
||||
background: `color-mix(in srgb, ${accentVar} 14%, transparent)`,
|
||||
boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${accentVar} 10%, transparent)`,
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
@@ -461,7 +408,8 @@ export default async function Home() {
|
||||
{f.desc}
|
||||
</p>
|
||||
</SurfaceCard>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
@@ -469,13 +417,44 @@ export default async function Home() {
|
||||
{/* ── Stats + Login ── */}
|
||||
<Reveal>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-wrap items-end justify-between gap-3">
|
||||
<div>
|
||||
<span className="eyebrow">{tp("sectionStatsLabel")}</span>
|
||||
<h2 className="section-title mt-2 text-xl sm:text-2xl">
|
||||
{tp("sectionStatsTitle")}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3 sm:gap-4 md:grid-cols-4">
|
||||
<span
|
||||
className="hidden items-center gap-2 rounded-full border px-3 py-1.5 text-[10px] font-bold uppercase tracking-widest sm:inline-flex"
|
||||
style={{
|
||||
borderColor:
|
||||
"color-mix(in srgb, var(--color-primary) 22%, transparent)",
|
||||
background:
|
||||
"color-mix(in srgb, var(--color-primary) 8%, transparent)",
|
||||
color: "var(--color-primary-readable, var(--color-primary))",
|
||||
}}
|
||||
>
|
||||
<span className="relative flex h-1.5 w-1.5">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" />
|
||||
<span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-primary" />
|
||||
</span>
|
||||
{tp("liveUpdates")}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="card-glow card-hairline relative overflow-hidden rounded-3xl border p-5 sm:p-8"
|
||||
style={{
|
||||
borderColor:
|
||||
"color-mix(in srgb, var(--color-primary) 16%, transparent)",
|
||||
background:
|
||||
"linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, transparent), color-mix(in srgb, var(--color-accent) 8%, transparent))",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="brand-halo left-1/2 top-0 h-52 w-[640px] max-w-full -translate-x-1/2 -translate-y-1/2"
|
||||
/>
|
||||
<div className="relative grid grid-cols-2 gap-x-4 gap-y-7 lg:grid-cols-4">
|
||||
{[
|
||||
{
|
||||
value: users,
|
||||
@@ -502,17 +481,38 @@ export default async function Home() {
|
||||
live: false,
|
||||
},
|
||||
].map((s) => (
|
||||
<SurfaceCard
|
||||
<div
|
||||
key={s.label}
|
||||
className="card-glow card-hairline relative p-3 sm:p-5 text-center transition-all duration-300 ease-out hover:-translate-y-1.5 hover:shadow-xl"
|
||||
className="group relative flex flex-col items-center gap-2.5 text-center lg:border-l lg:border-[color-mix(in_srgb,var(--color-primary)_14%,transparent)] lg:first:border-l-0 lg:px-4"
|
||||
>
|
||||
<div
|
||||
className="mb-1 text-2xl sm:text-3xl font-black tracking-tight md:text-4xl"
|
||||
className="flex h-10 w-10 items-center justify-center rounded-xl transition-transform duration-300 group-hover:scale-110"
|
||||
style={{
|
||||
color: s.live
|
||||
? "var(--color-primary)"
|
||||
: "var(--color-text-readable)",
|
||||
background: s.live
|
||||
? "color-mix(in srgb, var(--color-primary) 18%, transparent)"
|
||||
: "color-mix(in srgb, var(--color-accent) 14%, transparent)",
|
||||
boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${
|
||||
s.live ? "var(--color-primary)" : "var(--color-accent)"
|
||||
} 18%, transparent)`,
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src={s.icon}
|
||||
alt=""
|
||||
width={20}
|
||||
height={20}
|
||||
unoptimized
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={`text-3xl font-black tracking-tight sm:text-4xl ${
|
||||
s.live ? "gradient-text" : ""
|
||||
}`}
|
||||
style={
|
||||
s.live
|
||||
? undefined
|
||||
: { color: "var(--color-text-readable)" }
|
||||
}
|
||||
>
|
||||
{s.value === null ? (
|
||||
<span className="text-base">{te("unavailable")}</span>
|
||||
@@ -523,10 +523,11 @@ export default async function Home() {
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className="mt-1.5 inline-flex items-center justify-center gap-1.5 px-2.5 py-0.5 rounded-full text-[10px] sm:text-xs font-bold uppercase tracking-widest"
|
||||
className="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[10px] font-bold uppercase tracking-widest sm:text-xs"
|
||||
style={{
|
||||
background:
|
||||
"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
|
||||
background: s.live
|
||||
? "color-mix(in srgb, var(--color-primary) 12%, transparent)"
|
||||
: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
|
||||
color: s.live
|
||||
? "var(--color-primary-readable, var(--color-primary))"
|
||||
: "var(--color-text-muted)",
|
||||
@@ -538,19 +539,13 @@ export default async function Home() {
|
||||
<span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-primary" />
|
||||
</span>
|
||||
)}
|
||||
<Image
|
||||
src={s.icon}
|
||||
alt=""
|
||||
width={13}
|
||||
height={13}
|
||||
unoptimized
|
||||
/>
|
||||
{s.label}
|
||||
</div>
|
||||
</SurfaceCard>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
|
||||
{/* ── Login + Online users ── */}
|
||||
@@ -635,7 +630,7 @@ export default async function Home() {
|
||||
href={`/news/${a.slug}`}
|
||||
className="group relative w-full overflow-hidden rounded-xl transition-all duration-500 hover:-translate-y-1 hover:shadow-xl"
|
||||
style={{
|
||||
height: "clamp(160px, 20vw, 200px)",
|
||||
height: "clamp(180px, 22vw, 220px)",
|
||||
backgroundColor: "var(--color-background)",
|
||||
border:
|
||||
"1px solid color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
|
||||
@@ -671,7 +666,7 @@ export default async function Home() {
|
||||
"linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 50%, transparent 100%)",
|
||||
}}
|
||||
>
|
||||
<h3 className="truncate text-sm sm:text-base font-bold text-primary-foreground text-shadow-sm">
|
||||
<h3 className="line-clamp-2 text-sm sm:text-base font-bold text-primary-foreground text-shadow-sm">
|
||||
{a.title}
|
||||
</h3>
|
||||
<p
|
||||
|
||||
@@ -287,6 +287,7 @@
|
||||
"sectionFeaturesTitle": "Everything a great hotel needs",
|
||||
"sectionStatsLabel": "Live stats",
|
||||
"sectionStatsTitle": "A community that keeps growing",
|
||||
"liveUpdates": "Live updates",
|
||||
"sectionCommunityLabel": "Community",
|
||||
"sectionCommunityTitle": "Make yourself at home",
|
||||
"joinCtaTitle": "Ready to make yourself at home?",
|
||||
|
||||
@@ -287,6 +287,7 @@
|
||||
"sectionFeaturesTitle": "Tutto ciò che un grande hotel merita",
|
||||
"sectionStatsLabel": "Statistiche live",
|
||||
"sectionStatsTitle": "Una community che continua a crescere",
|
||||
"liveUpdates": "Aggiornamenti live",
|
||||
"sectionCommunityLabel": "Community",
|
||||
"sectionCommunityTitle": "Fatti sentire a casa",
|
||||
"joinCtaTitle": "Pronto a sentirti a casa?",
|
||||
|
||||
Reference in new issue
Block a user