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.
2026-06-02 04:28:03 +00:00
parent 184dd2608b
commit c73da417af
9 changed files with 150 additions and 47 deletions
@@ -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 }) {
@@ -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>