remco/EpicNext-Cms
1
1 Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Polish responsive design across all screen sizes and refine card blocks
CI / check (push) Failing after 26s
Details
CI / release (push) Skipped
Details
CI / deploy (push) Skipped
Details

Browse Source 
- Enhance SurfaceCard with refined borders, layered shadows, and polished
  primary-tinted header with an icon container
- Update homepage blocks (hero, features, stats, login, news, photos) for
  proper mobile/tablet/desktop responsiveness and tighter mobile spacing
- Improve content-card, stat-block, card-grid and card styling with subtle
  depth (layered shadow + inner hairline) and smoother hover states
- Refine site header, footer, top header and site layout spacing for small
  screens while keeping a consistent professional look on large screens
- Add min-tap-height targets and responsive typography on mobile
This commit is contained in:
openhands committed 2026-08-31 11:45:02 +02:00
1 parent b1ddda66ff
commit 903d175f2d
7 files changed
+194 -107
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/(site)/layout.tsx
+1 -1
View File
@@ -28,7 +28,7 @@ export default async function SiteLayout({
</> </>
) : null} ) : null}
<main> <main>
<div className="mx-auto mt-6 grid max-w-7xl grid-cols-12 gap-x-3 gap-y-6 px-4 py-4 md:mt-0 md:p-6"> <div className="mx-auto mt-4 grid max-w-7xl grid-cols-12 gap-x-3 gap-y-5 px-3 py-3 sm:px-4 sm:py-4 md:mt-0 md:px-6 md:py-6 md:gap-y-6">
<div className="col-span-12 min-w-0"> <div className="col-span-12 min-w-0">
<MotionPageWrapper>{children}</MotionPageWrapper> <MotionPageWrapper>{children}</MotionPageWrapper>
</div> </div>
src/app/(site)/page.tsx
+44 -42
View File
File diff suppressed because it is too large. Load diff
src/app/globals.css
+98 -30
View File
File diff suppressed because it is too large. Load diff
src/components/site-footer.tsx
+4 -2
View File
@@ -9,13 +9,15 @@ export async function SiteFooter() {
return ( return (
<footer <footer
className="mt-auto flex min-h-14 w-full flex-col items-center justify-center gap-1 px-4 py-3 text-sm md:flex-row md:gap-3 md:px-8" className="mt-auto flex min-h-14 w-full flex-col items-center justify-center gap-1 px-3 py-3 text-xs sm:text-sm md:flex-row md:gap-3 md:px-8"
style={{ style={{
backgroundColor: "var(--color-surface)", backgroundColor: "var(--color-surface)",
color: "var(--color-text-muted-readable, var(--color-text-muted))", color: "var(--color-text-muted-readable, var(--color-text-muted))",
borderTop:
"1px solid color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
}} }}
> >
<div className="md:font-semibold text-[12px] md:text-[14px]"> <div className="md:font-semibold text-[11px] sm:text-[12px] md:text-[14px]">
{t("copyright", { year, hotel: hotelName })} {t("copyright", { year, hotel: hotelName })}
</div> </div>
<CmsInfoPopup /> <CmsInfoPopup />
src/components/site-header.tsx
+16 -12
View File
@@ -36,7 +36,7 @@ export async function SiteHeader() {
return ( return (
<div <div
className="site-header relative w-full overflow-hidden" className="site-header relative w-full overflow-hidden"
style={{ minHeight: "clamp(12rem, 30vw, 18rem)" }} style={{ minHeight: "clamp(10rem, 25vw, 18rem)" }}
> >
{/* Background image */} {/* Background image */}
<div <div
@@ -65,19 +65,19 @@ export async function SiteHeader() {
{/* Decorative glows */} {/* Decorative glows */}
<div <div
className="absolute -top-24 -right-24 w-96 h-96 rounded-full opacity-[0.12] blur-[120px]" className="absolute -top-24 -right-24 w-64 h-64 sm:w-96 sm:h-96 rounded-full opacity-[0.12] blur-[120px]"
style={{ background: "var(--color-primary)" }} style={{ background: "var(--color-primary)" }}
/> />
<div <div
className="absolute -bottom-24 -left-24 w-72 h-72 rounded-full opacity-[0.08] blur-[100px]" className="absolute -bottom-24 -left-24 w-48 h-48 sm:w-72 sm:h-72 rounded-full opacity-[0.08] blur-[100px]"
style={{ background: "var(--color-primary)" }} style={{ background: "var(--color-primary)" }}
/> />
{/* Content */} {/* Content */}
<div className="relative flex flex-col items-center justify-center px-4 py-8 md:py-12 min-h-[clamp(12rem,30vw,18rem)]"> <div className="relative flex flex-col items-center justify-center px-3 py-6 sm:px-4 sm:py-8 md:py-12 min-h-[clamp(10rem,25vw,18rem)]">
<Link <Link
href="/" href="/"
className="transition-transform duration-300 hover:scale-105 mb-8" className="transition-transform duration-300 hover:scale-105 mb-5 sm:mb-8"
> >
{logo ? ( {logo ? (
<Image <Image
@@ -86,7 +86,11 @@ export async function SiteHeader() {
alt={hotelName} alt={hotelName}
width={200} width={200}
height={120} height={120}
style={{ maxHeight: 120, width: "auto", height: "auto" }} style={{
maxHeight: "clamp(60px, 15vw, 120px)",
width: "auto",
height: "auto",
}}
unoptimized unoptimized
/> />
) : ( ) : (
@@ -95,7 +99,7 @@ export async function SiteHeader() {
className="font-black tracking-tight leading-none text-white" className="font-black tracking-tight leading-none text-white"
style={{ style={{
fontFamily: "var(--font-nunito)", fontFamily: "var(--font-nunito)",
fontSize: "clamp(2.8rem, 8vw, 5.5rem)", fontSize: "clamp(2rem, 7vw, 5.5rem)",
textShadow: textShadow:
"0 2px 20px rgba(0,0,0,0.4), 0 8px 40px rgba(0,0,0,0.2)", "0 2px 20px rgba(0,0,0,0.4), 0 8px 40px rgba(0,0,0,0.2)",
letterSpacing: "0.04em", letterSpacing: "0.04em",
@@ -104,7 +108,7 @@ export async function SiteHeader() {
{hotelName} {hotelName}
</h1> </h1>
<p <p
className="text-sm md:text-base font-bold tracking-[0.15em] uppercase mt-1" className="text-xs sm:text-sm md:text-base font-bold tracking-[0.15em] uppercase mt-1"
style={{ style={{
color: "color-mix(in srgb, var(--color-primary) 70%, white)", color: "color-mix(in srgb, var(--color-primary) 70%, white)",
textShadow: "0 2px 12px rgba(0,0,0,0.5)", textShadow: "0 2px 12px rgba(0,0,0,0.5)",
@@ -119,7 +123,7 @@ export async function SiteHeader() {
{/* Online badge */} {/* Online badge */}
<div <div
className="flex items-center gap-3 px-6 py-3 rounded-full" className="flex items-center gap-2 sm:gap-3 px-4 sm:px-6 py-2 sm:py-3 rounded-full"
style={{ style={{
background: "rgba(255,255,255,0.08)", background: "rgba(255,255,255,0.08)",
backdropFilter: "blur(16px)", backdropFilter: "blur(16px)",
@@ -128,12 +132,12 @@ export async function SiteHeader() {
boxShadow: "0 4px 24px rgba(0,0,0,0.12)", boxShadow: "0 4px 24px rgba(0,0,0,0.12)",
}} }}
> >
<span className="relative flex h-2.5 w-2.5"> <span className="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" /> <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.5 w-2.5 bg-green-500" /> <span className="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-green-500" />
</span> </span>
<span <span
className="text-sm font-bold tracking-wide" className="text-xs sm:text-sm font-bold tracking-wide"
style={{ color: "rgba(255,255,255,0.9)" }} style={{ color: "rgba(255,255,255,0.9)" }}
> >
{t("online", { count: online, hotel: hotelName })} {t("online", { count: online, hotel: hotelName })}
src/components/surface-card.tsx
+25 -14
View File
@@ -3,11 +3,11 @@ import type { CSSProperties, ReactNode } from "react";
import Link from "@/components/link"; import Link from "@/components/link";
const CARD_BORDER = const CARD_BORDER =
"color-mix(in srgb, var(--color-text-muted) 12%, transparent)"; "color-mix(in srgb, var(--color-text-muted) 10%, transparent)";
const CARD_DIVIDER = const CARD_DIVIDER =
"color-mix(in srgb, var(--color-text-muted) 8%, transparent)"; "color-mix(in srgb, var(--color-text-muted) 8%, transparent)";
const CARD_HEADER_BG = const CARD_HEADER_BG =
"color-mix(in srgb, var(--color-primary) 10%, var(--color-surface))"; "linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)), color-mix(in srgb, var(--color-primary) 4%, var(--color-surface)))";
export interface SurfaceCardProps { export interface SurfaceCardProps {
children: ReactNode; children: ReactNode;
@@ -45,28 +45,39 @@ export function SurfaceCard({
return ( return (
<div <div
className={`overflow-hidden rounded-2xl border bg-[var(--color-surface)] ${className}`} className={`surface-card overflow-hidden rounded-2xl border bg-[var(--color-surface)] ${className}`}
style={{ style={{
borderColor: CARD_BORDER, borderColor: CARD_BORDER,
boxShadow: "var(--shadow-card)", boxShadow:
"0 1px 2px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.03), 0 0 0 0.5px color-mix(in srgb, var(--color-text-muted) 6%, transparent)",
...style, ...style,
}} }}
> >
{hasHeader && ( {hasHeader && (
<div <div
className="flex items-center justify-between gap-3 border-b px-5 py-3.5" className="flex items-center justify-between gap-3 px-5 py-3.5 border-b"
style={{ borderColor: CARD_DIVIDER, background: CARD_HEADER_BG }} style={{ borderColor: CARD_DIVIDER, background: CARD_HEADER_BG }}
> >
<div className="flex items-center gap-2.5"> <div className="flex items-center gap-2.5">
{icon && ( {icon && (
<Image <div
src={icon} className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg"
alt="" style={{
width={18} background:
height={18} "linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 18%, var(--color-surface)), color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)))",
unoptimized boxShadow:
className="opacity-90" "inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 14%, transparent)",
/> }}
>
<Image
src={icon}
alt=""
width={16}
height={16}
unoptimized
className="opacity-80"
/>
</div>
)} )}
{title && ( {title && (
<h2 <h2
@@ -83,7 +94,7 @@ export function SurfaceCard({
{actionHref && actionLabel && ( {actionHref && actionLabel && (
<Link <Link
href={actionHref} href={actionHref}
className="text-xs font-semibold transition-colors hover:text-[var(--color-primary)] hover:underline" className="shrink-0 rounded-md px-2 py-1 text-xs font-semibold transition-colors hover:bg-[color-mix(in_srgb,var(--color-primary)_8%,transparent)] hover:text-[var(--color-primary)]"
style={{ color: "var(--color-text-muted)" }} style={{ color: "var(--color-text-muted)" }}
> >
{actionLabel} {actionLabel}
src/components/top-header.tsx
+6 -6
View File
@@ -161,16 +161,16 @@ export async function TopHeader({ session }: { session: Session | null }) {
return ( return (
<div style={{ backgroundColor: "var(--color-navbar)" }}> <div style={{ backgroundColor: "var(--color-navbar)" }}>
<div className="max-w-7xl min-h-[44px] sm:min-h-[60px] px-2 sm:px-4 flex items-center justify-between mx-auto"> <div className="max-w-7xl min-h-[44px] sm:min-h-[60px] px-2 sm:px-4 flex items-center justify-between mx-auto">
<div className="flex flex-wrap items-center gap-x-2 sm:gap-x-6"> <div className="flex flex-wrap items-center gap-x-1.5 sm:gap-x-4 md:gap-x-6">
<div <div
className="flex items-center gap-2 px-3 py-1 rounded-full" className="flex items-center gap-1.5 sm:gap-2 px-2 sm:px-3 py-1 rounded-full"
style={{ style={{
background: "rgba(255,255,255,0.08)", background: "rgba(255,255,255,0.08)",
border: "1px solid rgba(255,255,255,0.10)", border: "1px solid rgba(255,255,255,0.10)",
}} }}
> >
<span <span
className="text-xs sm:text-sm font-bold tracking-wide" className="text-[10px] sm:text-sm font-bold tracking-wide"
style={{ color: "rgba(255,255,255,0.9)" }} style={{ color: "rgba(255,255,255,0.9)" }}
> >
{t("online", { count: online, hotel: hotelName })} {t("online", { count: online, hotel: hotelName })}
@@ -179,7 +179,7 @@ export async function TopHeader({ session }: { session: Session | null }) {
<Link <Link
href="/client" href="/client"
className="flex items-center gap-1.5 rounded-xl border py-1.5 px-3 font-extrabold text-xs transition-all duration-200 hover:scale-[1.02] active:scale-95 shadow-lg" className="hidden sm:flex items-center gap-1.5 rounded-xl border py-1.5 px-3 font-extrabold text-xs transition-all duration-200 hover:scale-[1.02] active:scale-95 shadow-lg"
style={{ style={{
background: "var(--color-primary)", background: "var(--color-primary)",
color: "var(--color-primary-foreground)", color: "var(--color-primary-foreground)",
@@ -210,7 +210,7 @@ export async function TopHeader({ session }: { session: Session | null }) {
/> />
</div> </div>
<div className="flex items-center gap-x-1 sm:gap-x-3"> <div className="flex items-center gap-x-0.5 sm:gap-x-3">
<form <form
action="/search" action="/search"
method="GET" method="GET"
@@ -231,7 +231,7 @@ export async function TopHeader({ session }: { session: Session | null }) {
</form> </form>
<Link <Link
href="/messages" href="/messages"
className="relative flex items-center gap-1 rounded-lg px-2 py-1.5 transition-colors hover:bg-white/10" className="relative flex items-center gap-1 rounded-lg px-1.5 sm:px-2 py-1.5 transition-colors hover:bg-white/10"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"