feat: comprehensive frontend polish - UI/UX improvements across all pages

Public Pages:
- Landing page with server/client split and metadata export
- Cart page with ARIA accessibility and loading states
- Checkout page with form accessibility and proper design system
- Contact page with SEO metadata and improved accessibility
- Pricing page with enhanced FAQ accessibility
- Login page with Suspense boundaries and secure patterns

Brand Storefronts:
- Premium loading skeletons for Tuxedo and Indian River Direct
- Branded error boundaries with animations
- Loading.tsx for about, contact, FAQ, stops pages
- Error.tsx for all storefront subpages

Admin Dashboard:
- AdminSidebar: ARIA labels, keyboard navigation, mobile improvements
- DashboardClient: Stats cards, quick actions, usage progress
- Admin layout: Toast provider integration

Admin Orders/Products/Stops:
- Toast notification system with auto-dismiss
- Skeleton loading components (Table, Card, Stats, Form)
- Bulk actions (mark picked up, publish stops)
- Form validation with error styling

Admin Communications:
- AnalyticsDashboard: sparklines, stat cards, engagement badges
- CampaignComposerPage: step wizard, template selection, email preview
- SegmentBuilderPage: empty state, active segment handling
- ContactListPanel: loading skeletons, professional empty states
- MessageLogPanel: stats cards, engagement indicators
- HarvestReachNav: branded tab navigation
- All pages: metadata exports and loading.tsx

Admin Settings:
- SquareSyncSettingsClient: design system colors, save/cancel UX
- ShippingSettingsForm: validation, dirty state tracking
- Integrations page: proper layout with AI and communications sections
- Billing: improved plan comparison, add-on cards
- PaymentSettings: toggle components, validation

Wholesale Portal:
- Portal: loading skeletons, quantity stepper, search/filter
- Login/Register: FormField validation, success states
- Success/Cancel pages: animated checkmarks
- Employee portal: skeletons, empty states, mobile responsive

Water Log:
- FieldClient: loading step, progress indicator, spinner
- AdminClient: loading skeletons
- Admin pages: loading.tsx files

New Components:
- Toast.tsx/ToastContainer.tsx: comprehensive notification system
- Skeleton.tsx: shimmer loading components
- AdminToggle.tsx: consistent toggle/switch
- CommunicationsLoading.tsx: loading skeleton for comms
- ToastExport.ts: exports

CSS Improvements:
- Shimmer animation keyframes
- Toast slide-in animation

Accessibility:
- ARIA labels throughout
- Keyboard navigation
- Focus states
- Semantic HTML
- Screen reader support

src/app/indian-river-direct/stops/[slug]/loading.tsx

@@ -1,18 +1,70 @@
+"use client";
+
+import { motion } from "framer-motion";
+
 export default function Loading() {
   return (
-    <main className="min-h-screen bg-blue-50 px-6 py-12">
-      <div className="mx-auto max-w-5xl">
-        <div className="animate-pulse space-y-6">
-          <div className="h-6 w-40 rounded bg-slate-200" />
-          <div className="h-12 w-80 rounded bg-slate-200" />
-          <div className="mt-8 rounded-2xl bg-white p-8 shadow-sm" />
-          <div className="mt-10 grid gap-6 md:grid-cols-3">
-            {[1, 2, 3, 4, 5, 6].map((i) => (
-              <div key={i} className="h-64 rounded-2xl bg-slate-200" />
+    <div className="min-h-screen bg-stone-50/80 backdrop-blur-xl">
+      <div className="mx-auto max-w-5xl px-6 py-20">
+        {/* Back navigation skeleton */}
+        <div className="mb-10 animate-pulse">
+          <div className="h-5 w-32 rounded bg-stone-200" />
+        </div>
+
+        {/* Stop header skeleton */}
+        <div className="mb-12 animate-pulse rounded-3xl bg-white/60 border border-white/50 p-8">
+          <div className="h-3 w-32 rounded bg-blue-100 mb-4" />
+          <div className="h-16 w-80 rounded-lg bg-stone-200 mb-4" />
+          <div className="h-5 w-full max-w-md rounded bg-stone-200 mb-4" />
+          <div className="h-px w-12 bg-blue-100" />
+        </div>
+
+        {/* Stop info skeleton */}
+        <div className="mb-14 rounded-3xl bg-white/80 border border-white/50 p-8 shadow-xl">
+          <div className="grid gap-4 md:grid-cols-3">
+            {[0, 1, 2].map((i) => (
+              <motion.div
+                key={i}
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: i * 0.1 }}
+                className="flex items-start gap-4 py-4 px-5 rounded-2xl bg-stone-50"
+              >
+                <div className="h-10 w-10 rounded-xl bg-blue-50" />
+                <div className="flex-1">
+                  <div className="h-3 w-12 rounded bg-stone-200 mb-2" />
+                  <div className="h-5 w-24 rounded bg-stone-200" />
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+
+        {/* Products section skeleton */}
+        <div className="animate-pulse">
+          <div className="h-4 w-20 rounded bg-blue-100 mb-4" />
+          <div className="h-10 w-48 rounded bg-stone-200 mb-4" />
+          <div className="h-4 w-64 rounded bg-stone-200 mb-10" />
+          <div className="grid gap-8 md:grid-cols-3">
+            {[0, 1, 2].map((i) => (
+              <motion.div
+                key={i}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: i * 0.1 }}
+                className="rounded-3xl bg-white overflow-hidden shadow-lg"
+              >
+                <div className="h-48 bg-gradient-to-br from-blue-50 to-white" />
+                <div className="p-6 space-y-3">
+                  <div className="h-6 w-3/4 rounded bg-stone-200" />
+                  <div className="h-4 w-full rounded bg-stone-100" />
+                  <div className="h-4 w-2/3 rounded bg-stone-100" />
+                </div>
+              </motion.div>
             ))}
           </div>
         </div>
       </div>
-    </main>
+    </div>
   );
 }