Polish responsive design across all screen sizes and refine card blocks
- 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
1 parent
b1ddda66ff
commit
903d175f2d
7 files changed
+194
-107
No files matched your search
@@ -9,13 +9,15 @@ export async function SiteFooter() {
|
||||
|
||||
return (
|
||||
<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={{
|
||||
backgroundColor: "var(--color-surface)",
|
||||
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 })}
|
||||
</div>
|
||||
<CmsInfoPopup />
|
||||
|
||||
@@ -36,7 +36,7 @@ export async function SiteHeader() {
|
||||
return (
|
||||
<div
|
||||
className="site-header relative w-full overflow-hidden"
|
||||
style={{ minHeight: "clamp(12rem, 30vw, 18rem)" }}
|
||||
style={{ minHeight: "clamp(10rem, 25vw, 18rem)" }}
|
||||
>
|
||||
{/* Background image */}
|
||||
<div
|
||||
@@ -65,19 +65,19 @@ export async function SiteHeader() {
|
||||
|
||||
{/* Decorative glows */}
|
||||
<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)" }}
|
||||
/>
|
||||
<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)" }}
|
||||
/>
|
||||
|
||||
{/* 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
|
||||
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 ? (
|
||||
<Image
|
||||
@@ -86,7 +86,11 @@ export async function SiteHeader() {
|
||||
alt={hotelName}
|
||||
width={200}
|
||||
height={120}
|
||||
style={{ maxHeight: 120, width: "auto", height: "auto" }}
|
||||
style={{
|
||||
maxHeight: "clamp(60px, 15vw, 120px)",
|
||||
width: "auto",
|
||||
height: "auto",
|
||||
}}
|
||||
unoptimized
|
||||
/>
|
||||
) : (
|
||||
@@ -95,7 +99,7 @@ export async function SiteHeader() {
|
||||
className="font-black tracking-tight leading-none text-white"
|
||||
style={{
|
||||
fontFamily: "var(--font-nunito)",
|
||||
fontSize: "clamp(2.8rem, 8vw, 5.5rem)",
|
||||
fontSize: "clamp(2rem, 7vw, 5.5rem)",
|
||||
textShadow:
|
||||
"0 2px 20px rgba(0,0,0,0.4), 0 8px 40px rgba(0,0,0,0.2)",
|
||||
letterSpacing: "0.04em",
|
||||
@@ -104,7 +108,7 @@ export async function SiteHeader() {
|
||||
{hotelName}
|
||||
</h1>
|
||||
<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={{
|
||||
color: "color-mix(in srgb, var(--color-primary) 70%, white)",
|
||||
textShadow: "0 2px 12px rgba(0,0,0,0.5)",
|
||||
@@ -119,7 +123,7 @@ export async function SiteHeader() {
|
||||
|
||||
{/* Online badge */}
|
||||
<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={{
|
||||
background: "rgba(255,255,255,0.08)",
|
||||
backdropFilter: "blur(16px)",
|
||||
@@ -128,12 +132,12 @@ export async function SiteHeader() {
|
||||
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="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
|
||||
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)" }}
|
||||
>
|
||||
{t("online", { count: online, hotel: hotelName })}
|
||||
|
||||
@@ -3,11 +3,11 @@ import type { CSSProperties, ReactNode } from "react";
|
||||
import Link from "@/components/link";
|
||||
|
||||
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 =
|
||||
"color-mix(in srgb, var(--color-text-muted) 8%, transparent)";
|
||||
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 {
|
||||
children: ReactNode;
|
||||
@@ -45,28 +45,39 @@ export function SurfaceCard({
|
||||
|
||||
return (
|
||||
<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={{
|
||||
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,
|
||||
}}
|
||||
>
|
||||
{hasHeader && (
|
||||
<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 }}
|
||||
>
|
||||
<div className="flex items-center gap-2.5">
|
||||
{icon && (
|
||||
<Image
|
||||
src={icon}
|
||||
alt=""
|
||||
width={18}
|
||||
height={18}
|
||||
unoptimized
|
||||
className="opacity-90"
|
||||
/>
|
||||
<div
|
||||
className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg"
|
||||
style={{
|
||||
background:
|
||||
"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)))",
|
||||
boxShadow:
|
||||
"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 && (
|
||||
<h2
|
||||
@@ -83,7 +94,7 @@ export function SurfaceCard({
|
||||
{actionHref && actionLabel && (
|
||||
<Link
|
||||
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)" }}
|
||||
>
|
||||
{actionLabel}
|
||||
|
||||
@@ -161,16 +161,16 @@ export async function TopHeader({ session }: { session: Session | null }) {
|
||||
return (
|
||||
<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="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
|
||||
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={{
|
||||
background: "rgba(255,255,255,0.08)",
|
||||
border: "1px solid rgba(255,255,255,0.10)",
|
||||
}}
|
||||
>
|
||||
<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)" }}
|
||||
>
|
||||
{t("online", { count: online, hotel: hotelName })}
|
||||
@@ -179,7 +179,7 @@ export async function TopHeader({ session }: { session: Session | null }) {
|
||||
|
||||
<Link
|
||||
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={{
|
||||
background: "var(--color-primary)",
|
||||
color: "var(--color-primary-foreground)",
|
||||
@@ -210,7 +210,7 @@ export async function TopHeader({ session }: { session: Session | null }) {
|
||||
/>
|
||||
</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
|
||||
action="/search"
|
||||
method="GET"
|
||||
@@ -231,7 +231,7 @@ export async function TopHeader({ session }: { session: Session | null }) {
|
||||
</form>
|
||||
<Link
|
||||
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
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
||||
Reference in new issue
Block a user