fix: Apple HIG mobile responsiveness - hero typography, tables, SEO metadata
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:
@@ -1,8 +1,44 @@
|
||||
import type { Metadata } from "next";
|
||||
|
||||
const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? "https://routecommerce.com";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Indian River Direct | Peach & Citrus Truckload",
|
||||
title: {
|
||||
default: "Indian River Direct | Peach & Citrus Truckload",
|
||||
template: "%s | Indian River Direct",
|
||||
},
|
||||
description: "Fresh peaches and citrus from our Florida groves to truckload sales in your neighborhood. Family-owned since 1985. Pre-order now for 2026 season.",
|
||||
keywords: ["peaches", "citrus", "Florida produce", "truckload sales", "fresh fruit", "Indian River", "wholesale peaches"],
|
||||
openGraph: {
|
||||
title: "Indian River Direct | Fresh Peaches & Citrus",
|
||||
description: "Fresh peaches and citrus from our Florida groves to truckload sales in your neighborhood. Family-owned since 1985.",
|
||||
url: `${BASE_URL}/indian-river-direct`,
|
||||
siteName: "Indian River Direct",
|
||||
locale: "en_US",
|
||||
type: "website",
|
||||
images: [
|
||||
{
|
||||
url: "/og-indian-river.jpg",
|
||||
width: 1200,
|
||||
height: 630,
|
||||
alt: "Indian River Direct - Fresh Peaches & Citrus",
|
||||
},
|
||||
],
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
title: "Indian River Direct | Peach & Citrus Truckload",
|
||||
description: "Fresh peaches and citrus from our Florida groves. Family-owned since 1985. Pre-order for 2026 season.",
|
||||
site: "@IndianRiverDirect",
|
||||
images: ["/og-indian-river.jpg"],
|
||||
},
|
||||
alternates: {
|
||||
canonical: `${BASE_URL}/indian-river-direct`,
|
||||
},
|
||||
robots: {
|
||||
index: true,
|
||||
follow: true,
|
||||
},
|
||||
};
|
||||
|
||||
export default function IndianRiverLayout({ children }: { children: React.ReactNode }) {
|
||||
|
||||
+38
-3
@@ -1,10 +1,45 @@
|
||||
import type { Metadata } from "next";
|
||||
import type { Metadata, Viewport } from "next";
|
||||
import "./globals.css";
|
||||
import { Providers } from "@/components/Providers";
|
||||
|
||||
const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? "https://routecommerce.com";
|
||||
|
||||
export const viewport: Viewport = {
|
||||
width: "device-width",
|
||||
initialScale: 1,
|
||||
themeColor: "#0a0a0a",
|
||||
};
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Route Commerce",
|
||||
description: "B2B produce wholesale platform",
|
||||
title: {
|
||||
default: "Route Commerce | Fresh Produce Wholesale Platform",
|
||||
template: "%s | Route Commerce",
|
||||
},
|
||||
description: "Multi-tenant B2B e-commerce platform for fresh produce wholesale distribution. Brands sell to customers who pick up at scheduled stops or receive shipments.",
|
||||
keywords: ["wholesale produce", "farm fresh", "B2B e-commerce", "produce distribution", "pickup stops", "fresh produce"],
|
||||
metadataBase: new URL(BASE_URL),
|
||||
openGraph: {
|
||||
title: "Route Commerce | Fresh Produce Wholesale Platform",
|
||||
description: "Multi-tenant B2B e-commerce platform for fresh produce wholesale distribution.",
|
||||
url: BASE_URL,
|
||||
siteName: "Route Commerce",
|
||||
locale: "en_US",
|
||||
type: "website",
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
title: "Route Commerce | Fresh Produce Wholesale Platform",
|
||||
description: "Multi-tenant B2B e-commerce platform for fresh produce wholesale distribution.",
|
||||
site: "@RouteCommerce",
|
||||
},
|
||||
robots: {
|
||||
index: true,
|
||||
follow: true,
|
||||
googleBot: {
|
||||
index: true,
|
||||
follow: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
|
||||
@@ -1,12 +1,43 @@
|
||||
import type { Metadata } from "next";
|
||||
|
||||
const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? "https://routecommerce.com";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Tuxedo Corn | Fresh Produce Wholesale",
|
||||
title: {
|
||||
default: "Tuxedo Corn | Fresh Produce Wholesale",
|
||||
template: "%s | Tuxedo Corn",
|
||||
},
|
||||
description: "Premium sweet corn and seasonal produce delivered fresh from the farm to pickup stops near you. Shop wholesale pricing on Tuxedo Corn.",
|
||||
keywords: ["sweet corn", "Olathe Sweet", "Colorado produce", "wholesale corn", "farm fresh", "pickup stops", "wholesale produce"],
|
||||
openGraph: {
|
||||
title: "Tuxedo Corn",
|
||||
description: "Premium sweet corn and seasonal produce, delivered fresh from our farm to your community.",
|
||||
siteName: "Route Commerce",
|
||||
title: "Tuxedo Corn | Olathe Sweet Sweet Corn",
|
||||
description: "Premium sweet corn and seasonal produce, delivered fresh from our Colorado farm to pickup stops near you.",
|
||||
url: `${BASE_URL}/tuxedo`,
|
||||
siteName: "Tuxedo Corn",
|
||||
locale: "en_US",
|
||||
type: "website",
|
||||
images: [
|
||||
{
|
||||
url: "/og-tuxedo.jpg",
|
||||
width: 1200,
|
||||
height: 630,
|
||||
alt: "Tuxedo Corn - Olathe Sweet Sweet Corn",
|
||||
},
|
||||
],
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
title: "Tuxedo Corn | Fresh Produce Wholesale",
|
||||
description: "Premium sweet corn and seasonal produce delivered fresh from our Colorado farm to pickup stops near you.",
|
||||
site: "@TuxedoCorn",
|
||||
images: ["/og-tuxedo.jpg"],
|
||||
},
|
||||
alternates: {
|
||||
canonical: `${BASE_URL}/tuxedo`,
|
||||
},
|
||||
robots: {
|
||||
index: true,
|
||||
follow: true,
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@@ -266,7 +266,7 @@ function FeatureCard({ feature, index }: { feature: Feature; index: number }) {
|
||||
</div>
|
||||
|
||||
{/* Label */}
|
||||
<p className={`hidden sm:block text-[10px] font-bold uppercase tracking-[0.2em] transition-colors duration-300 ${
|
||||
<p className={`text-[9px] sm:text-[10px] font-bold uppercase tracking-[0.2em] transition-colors duration-300 ${
|
||||
feature.color === "emerald"
|
||||
? "text-emerald-600/60 group-hover:text-emerald-400/80"
|
||||
: "text-amber-600/60 group-hover:text-amber-400/80"
|
||||
@@ -317,9 +317,9 @@ function WhyTuxedoCorn() {
|
||||
initial={{ opacity: 0, y: 16 }}
|
||||
animate={headerInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 16 }}
|
||||
transition={{ duration: 0.7, delay: 0.1 }}
|
||||
className="text-5xl md:text-6xl font-black tracking-tight text-white leading-[1.05] mb-6"
|
||||
className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-black tracking-tight text-white leading-[1.05] mb-6"
|
||||
>
|
||||
Why Choose<br />Tuxedo Corn
|
||||
Why Choose<br className="hidden sm:block" />Tuxedo Corn
|
||||
</motion.h2>
|
||||
<motion.div
|
||||
initial={{ scaleX: 0 }}
|
||||
@@ -339,7 +339,7 @@ function WhyTuxedoCorn() {
|
||||
</div>
|
||||
|
||||
{/* Asymmetric masonry grid with staggered offsets */}
|
||||
<div className="grid grid-cols-2 gap-5 lg:grid-cols-4">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-5">
|
||||
{/* Row 1: tall, normal, tall, normal — with vertical offset stagger */}
|
||||
<div>
|
||||
<FeatureCard feature={FEATURES[0]} index={0} />
|
||||
@@ -397,15 +397,15 @@ function SectionHeader({
|
||||
accent?: "emerald" | "stone";
|
||||
}) {
|
||||
return (
|
||||
<div className="mb-14">
|
||||
<p className={`text-[11px] font-semibold uppercase tracking-widest ${accent === "emerald" ? "text-emerald-600" : "text-stone-500"} mb-4`}>
|
||||
<div className="mb-10 sm:mb-14">
|
||||
<p className={`text-[10px] sm:text-[11px] font-semibold uppercase tracking-widest ${accent === "emerald" ? "text-emerald-600" : "text-stone-500"} mb-3 sm:mb-4`}>
|
||||
{eyebrow}
|
||||
</p>
|
||||
<h2 className="text-5xl md:text-6xl font-black tracking-tight text-stone-950 leading-[1.05]">
|
||||
<h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-black tracking-tight text-stone-950 leading-[1.05]">
|
||||
{headline}
|
||||
</h2>
|
||||
<div className="mt-6 h-px w-12 bg-emerald-600" />
|
||||
<p className="mt-6 max-w-2xl text-lg text-stone-500 leading-relaxed">
|
||||
<div className="mt-5 sm:mt-6 h-px w-10 sm:w-12 bg-emerald-600" />
|
||||
<p className="mt-5 sm:mt-6 max-w-2xl text-base sm:text-lg text-stone-500 leading-relaxed">
|
||||
{subtext}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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",
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@@ -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>
|
||||
))}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user