tyler/route-commerce
1
0
Fork 1
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

fix: Apple HIG mobile responsiveness - hero typography, tables, SEO metadata

Browse Source 
Mobile:
- HeroSection: scale typography 7xl → 4xl sm:5xl md:6xl lg:7xl, responsive px/py
- StorefrontFooter: newsletter input responsive w-full sm:w-52, larger touch targets
- AdminTable: add overflow-x-auto + min-w-[600px] for horizontal scroll
- AdminOrdersPanel: same table overflow fix
- AdminFilterTabs: increase text sizes sm:text-xs, add padding
- Tuxedo page: SectionHeader mobile-first sizing, feature grid grid-cols-1 sm:2
- Tuxedo feature labels: show on all screens (remove hidden sm:block)

SEO:
- Root layout: add viewport export, full OG/Twitter metadata, metadataBase
- Tuxedo layout: complete OG + Twitter card + canonical + keywords + robots
- Indian River layout: same complete SEO treatment

All TypeScript checks pass.
This commit is contained in:
default
2026-06-02 04:28:03 +00:00
parent 184dd2608b
commit c73da417af
9 changed files with 150 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/admin/AdminOrdersPanel.tsx
+2 -2
View File
@@ -306,8 +306,8 @@ export default function AdminOrdersPanel({
<p className="text-xs text-stone-400 mt-1">Try adjusting your filters</p>
</div>
) : (
<div className="overflow-hidden rounded-xl border border-[var(--admin-border)] bg-white">
<table className="w-full text-sm">
<div className="overflow-x-auto rounded-xl border border-[var(--admin-border)] bg-white">
<table className="w-full text-sm min-w-[700px]">
<thead className="bg-stone-50">
<tr className="border-b border-[var(--admin-border)]">
<th className="text-left px-4 py-3 font-semibold text-[var(--admin-text-muted)] text-xs">Order</th>
src/components/admin/design-system/AdminFilterTabs.tsx
+2 -2
View File
@@ -31,11 +31,11 @@ type AdminFilterTabsProps = {
const sizeClasses = {
sm: {
container: "p-0.5 gap-0.5",
tab: "px-2.5 py-1.5 text-[10px]",
tab: "px-2.5 sm:px-3 py-2 sm:py-1.5 text-xs sm:text-[10px]",
},
md: {
container: "p-1 gap-0.5",
tab: "px-3 py-1.5 text-xs",
tab: "px-3 sm:px-4 py-2.5 sm:py-1.5 text-sm sm:text-xs",
},
};
src/components/admin/design-system/AdminTable.tsx
+3 -3
View File
@@ -27,12 +27,12 @@ export default function AdminTable<T extends Record<string, unknown>>({
className = "",
}: AdminTableProps<T>) {
return (
<div className={`overflow-hidden rounded-2xl border border-[var(--admin-border)] bg-white shadow-[var(--admin-shadow-sm)] ${className}`}>
<table className="w-full text-left text-sm">
<div className={`overflow-x-auto rounded-2xl border border-[var(--admin-border)] bg-white shadow-[var(--admin-shadow-sm)] ${className}`}>
<table className="w-full text-left text-sm min-w-[600px]">
<thead>
<tr className="border-b border-[var(--admin-border)] bg-[var(--admin-bg-subtle)]">
{columns.map((col) => (
<th key={col.key} className={`px-5 py-3.5 text-[10px] font-bold uppercase tracking-widest text-[var(--admin-text-muted)] ${col.className ?? ""}`}>
<th key={col.key} className={`px-3 sm:px-5 py-3 text-xs sm:text-[10px] font-bold uppercase tracking-widest text-[var(--admin-text-muted)] whitespace-nowrap ${col.className ?? ""}`}>
{col.header}
</th>
))}
src/components/storefront/HeroSection.tsx
+21 -21
View File
@@ -47,25 +47,25 @@ export default function HeroSection({
: "linear-gradient(135deg, rgba(0,0,0,0.20) 0%, transparent 45%), linear-gradient(to top, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0.15) 55%, transparent 100%)"
}} />
<div className="mx-auto w-full max-w-6xl px-6 relative z-10">
<div className="mx-auto w-full max-w-6xl px-4 sm:px-6 relative z-10">
{eyebrow && (
<p className={`text-xs font-bold uppercase tracking-[0.25em] mb-6 ${isBlue ? "text-blue-200" : "text-white/60"}`}>
<p className={`text-[10px] sm:text-xs font-bold uppercase tracking-[0.25em] mb-4 sm:mb-6 ${isBlue ? "text-blue-200" : "text-white/60"}`}>
{eyebrow}
</p>
)}
<h1 className="text-7xl md:text-8xl font-black tracking-tight text-white leading-[1.0] max-w-3xl">
<h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black tracking-tight text-white leading-[1.05] max-w-3xl">
{title}
</h1>
<p className="mt-8 text-2xl text-white/70 leading-relaxed max-w-lg font-light">
<p className="mt-6 sm:mt-8 text-lg sm:text-xl md:text-2xl text-white/70 leading-relaxed max-w-lg font-light">
{description}
</p>
{(primaryButton || secondaryButton) && (
<div className="mt-12 flex flex-wrap gap-4">
<div className="mt-10 sm:mt-12 flex flex-wrap gap-3 sm:gap-4">
{primaryButton && (
<button
onClick={onPrimaryClick}
className={`rounded-full ${btnBg} px-10 py-4 text-sm font-bold tracking-wider text-white transition-all hover:-translate-y-0.5`}
className={`rounded-2xl ${btnBg} active:scale-95 px-6 sm:px-10 py-3 sm:py-4 text-sm sm:text-base font-semibold tracking-wide text-white transition-all`}
>
{primaryButton}
</button>
@@ -73,7 +73,7 @@ export default function HeroSection({
{secondaryButton && (
<button
onClick={onSecondaryClick}
className="rounded-full bg-white/10 backdrop-blur-sm border border-white/25 px-10 py-4 text-sm font-bold tracking-wider text-white hover:bg-white/20 hover:border-white/40 transition-all"
className="rounded-2xl bg-white/10 backdrop-blur-sm border border-white/25 px-6 sm:px-10 py-3 sm:py-4 text-sm sm:text-base font-semibold tracking-wide text-white hover:bg-white/20 hover:border-white/40 active:scale-95 transition-all"
>
{secondaryButton}
</button>
@@ -100,25 +100,25 @@ export default function HeroSection({
background: "linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0.6) 72%, rgba(0,0,0,0.88) 100%)"
}} />
<div className="mx-auto w-full max-w-6xl px-6 relative z-10">
<div className="mx-auto w-full max-w-6xl px-4 sm:px-6 relative z-10">
{eyebrow && (
<p className="text-xs font-bold uppercase tracking-[0.25em] mb-6 text-blue-200">
<p className="text-[10px] sm:text-xs font-bold uppercase tracking-[0.25em] mb-4 sm:mb-6 text-blue-200">
{eyebrow}
</p>
)}
<h1 className="text-7xl md:text-8xl font-black tracking-tight text-white leading-[1.0] max-w-3xl">
<h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black tracking-tight text-white leading-[1.05] max-w-3xl">
{title}
</h1>
<p className="mt-8 text-2xl text-white/70 leading-relaxed max-w-lg font-light">
<p className="mt-6 sm:mt-8 text-lg sm:text-xl md:text-2xl text-white/70 leading-relaxed max-w-lg font-light">
{description}
</p>
{(primaryButton || secondaryButton) && (
<div className="mt-12 flex flex-wrap gap-4">
<div className="mt-10 sm:mt-12 flex flex-wrap gap-3 sm:gap-4">
{primaryButton && (
<button
onClick={onPrimaryClick}
className="rounded-full bg-blue-600 hover:bg-blue-500 active:bg-blue-700 px-10 py-4 text-sm font-bold tracking-wider text-white transition-all hover:-translate-y-0.5"
className="rounded-2xl bg-blue-600 hover:bg-blue-500 active:bg-blue-700 active:scale-95 px-6 sm:px-10 py-3 sm:py-4 text-sm sm:text-base font-semibold tracking-wide text-white transition-all"
>
{primaryButton}
</button>
@@ -126,7 +126,7 @@ export default function HeroSection({
{secondaryButton && (
<button
onClick={onSecondaryClick}
className="rounded-full bg-white/10 backdrop-blur-sm border border-white/25 px-10 py-4 text-sm font-bold tracking-wider text-white hover:bg-white/20 hover:border-white/40 transition-all"
className="rounded-2xl bg-white/10 backdrop-blur-sm border border-white/25 px-6 sm:px-10 py-3 sm:py-4 text-sm sm:text-base font-semibold tracking-wide text-white hover:bg-white/20 hover:border-white/40 active:scale-95 transition-all"
>
{secondaryButton}
</button>
@@ -139,26 +139,26 @@ export default function HeroSection({
}
return (
<section className="py-28 px-6 bg-gradient-to-br from-stone-100 via-stone-50 to-stone-100">
<section className="py-16 sm:py-20 md:py-28 px-4 sm:px-6 bg-gradient-to-br from-stone-100 via-stone-50 to-stone-100">
<div className="mx-auto max-w-6xl">
{eyebrow && (
<p className={`text-xs font-bold uppercase tracking-[0.25em] mb-6 ${isBlue ? "text-blue-500" : "text-emerald-600"}`}>
<p className={`text-[10px] sm:text-xs font-bold uppercase tracking-[0.25em] mb-4 sm:mb-6 ${isBlue ? "text-blue-500" : "text-emerald-600"}`}>
{eyebrow}
</p>
)}
<h1 className="text-7xl md:text-8xl font-black tracking-tight leading-[1.0] max-w-3xl text-stone-950">
<h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black tracking-tight leading-[1.05] max-w-3xl text-stone-950">
{title}
</h1>
<p className="mt-8 text-2xl leading-relaxed max-w-lg font-light text-stone-600">
<p className="mt-6 sm:mt-8 text-lg sm:text-xl md:text-2xl leading-relaxed max-w-lg font-light text-stone-600">
{description}
</p>
{(primaryButton || secondaryButton) && (
<div className="mt-12 flex flex-wrap gap-4">
<div className="mt-10 sm:mt-12 flex flex-wrap gap-3 sm:gap-4">
{primaryButton && (
<button
onClick={onPrimaryClick}
className={`rounded-full ${btnBg} px-10 py-4 text-sm font-bold tracking-wider text-white transition-all hover:-translate-y-0.5`}
className={`rounded-2xl ${btnBg} active:scale-95 px-6 sm:px-10 py-3 sm:py-4 text-sm sm:text-base font-semibold tracking-wide text-white transition-all`}
>
{primaryButton}
</button>
@@ -166,7 +166,7 @@ export default function HeroSection({
{secondaryButton && (
<button
onClick={onSecondaryClick}
className="rounded-full bg-white px-10 py-4 text-sm font-bold tracking-wider text-stone-950 ring-1 ring-stone-300 hover:bg-stone-50 transition-all"
className="rounded-2xl bg-white px-6 sm:px-10 py-3 sm:py-4 text-sm sm:text-base font-semibold tracking-wide text-stone-950 ring-1 ring-stone-300 hover:bg-stone-50 active:scale-95 transition-all"
>
{secondaryButton}
</button>
src/components/storefront/StorefrontFooter.tsx
+3 -2
View File
@@ -57,11 +57,12 @@ export default function StorefrontFooter({
<input
type="email"
placeholder="your@email.com"
className="w-52 rounded-l-lg border border-stone-600 bg-stone-900 px-4 py-2.5 text-sm text-stone-200 placeholder-stone-500 focus:border-stone-400 focus:outline-none focus:ring-1 focus:ring-stone-400 sm:w-64"
aria-label="Email address"
className="w-full sm:w-52 lg:w-64 rounded-l-xl sm:rounded-l-lg border border-stone-600 bg-stone-900 px-4 py-3 sm:py-2.5 text-sm text-stone-200 placeholder-stone-500 focus:border-stone-400 focus:outline-none focus:ring-2 focus:ring-stone-400/50"
/>
<button
type="submit"
className={`rounded-r-lg ${subscribeBtnClass} px-5 py-2.5 text-sm font-medium text-white transition-colors`}
className={`rounded-r-xl sm:rounded-r-lg ${subscribeBtnClass} px-4 sm:px-5 py-3 sm:py-2.5 text-sm font-medium text-white transition-colors active:scale-95`}
>
Subscribe
</button>