Rewrite on the Bennett platform: Spring Boot + Vite/React SPA

Replaces the Next.js app. Same site, same look; the parts that were decisions rather than markup now live in Java. - catalogue, curated order, category filter and image URLs move from a TypeScript array into Postgres behind /api/products and /api/categories - contact form uses the shared platform-starter-contact: validate, RECORD, send, then fan out to n8n. Recording first means a relay outage costs a notification, not an enquiry - PageMetaController rewrites title/description/OG per route, replacing what Next's SSR gave crawlers and link-preview scrapers - 50MB of photos leave the repo for the MinIO bucket, re-encoded to webp (14MB) with EXIF (including phone GPS) stripped - fixes a catalogue typo: 'Strawberry Pie' was category 'Pies', which no filter matched, so it was unreachable unless browsing All Co-Authored-By: Claude Opus 4.8 <[email protected]> Claude-Session: https://claude.ai/code/session_01XXKjx7FNyRVAjU8dgB5KhN
2026-07-22 22:09:51 -05:00
parent 3f9efa178a
commit 11ae5f378d
164 changed files with 4223 additions and 14003 deletions
@@ -0,0 +1,52 @@
+import { Link } from 'react-router-dom';
+import Logo from './Logo';
+
+const Footer = () => {
+  return (
+    <footer className="bg-bakery-900 text-bakery-100">
+      <div className="container mx-auto px-4 py-14">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-10">
+          {/* Logo */}
+          <div className="col-span-1 md:col-span-2 flex items-start">
+            <Logo className="text-bakery-50" />
+          </div>
+
+          {/* Navigation Links */}
+          <div>
+            <h3 className="font-adbhashitha text-sm uppercase tracking-[0.18em] text-bakery-300 mb-4">Navigation</h3>
+            <ul className="space-y-2">
+              <li>
+                <Link to="/products" className="hover:text-white transition">Our Products</Link>
+              </li>
+              <li>
+                <Link to="/history" className="hover:text-white transition">Our Story</Link>
+              </li>
+              <li>
+                <Link to="/contact" className="hover:text-white transition">Contact</Link>
+              </li>
+            </ul>
+          </div>
+
+          {/* Contact Info */}
+          <div>
+            <h3 className="font-adbhashitha text-sm uppercase tracking-[0.18em] text-bakery-300 mb-4">Visit</h3>
+            <address className="not-italic space-y-2">
+              <p>215 E Main Street<br />Princeville, IL 61559</p>
+              <p><a href="tel:+13097010660" className="hover:text-white transition">(309) 701-0660</a></p>
+              <p className="break-words">
+                <a href="mailto:[email protected]" className="hover:text-white transition">contact@itsthevine.com</a>
+              </p>
+            </address>
+          </div>
+        </div>
+
+        {/* Bottom Bar */}
+        <div className="mt-12 text-center text-sm text-bakery-300">
+          <p>© {new Date().getFullYear()} The Vine Coffeehouse + Bakery</p>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
@@ -0,0 +1,106 @@
+import { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Link } from 'react-router-dom';
+import Logo from './Logo';
+
+const Header = () => {
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+
+  const navItems = [
+    { label: 'Our Products', href: '/products' },
+    { label: 'Our Story', href: '/history' },
+    { label: 'Contact', href: '/contact' },
+  ];
+
+  return (
+    <header className="sticky top-0 z-40 bg-bakery-50/90 backdrop-blur border-b border-bakery-200">
+      <div className="container mx-auto px-4">
+        <div className="flex items-center justify-between gap-2 h-20 md:h-24">
+          {/* Logo */}
+          <Logo className="text-bakery-700" />
+          {/* Desktop Navigation */}
+          <nav className="hidden md:flex items-center gap-8">
+            {navItems.map((item) => (
+              <Link
+                key={item.href}
+                to={item.href}
+                className="text-sm uppercase tracking-[0.15em] text-bakery-700 hover:text-bakery-900 transition"
+              >
+                {item.label}
+              </Link>
+            ))}
+          </nav>
+
+          {/* Mobile menu button */}
+          <button
+            className="md:hidden p-2 shrink-0"
+            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+            aria-label="Toggle menu"
+            aria-expanded={isMobileMenuOpen}
+          >
+            <svg
+              className="h-6 w-6 text-bakery-700"
+              fill="none"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path d="M4 6h16M4 12h16M4 18h16"></path>
+            </svg>
+          </button>
+        </div>
+
+        {/* Mobile Navigation — must UNMOUNT when closed. A panel parked off-screen
+            at translate-x-full still extends the scrollable area, which is what let
+            you scroll sideways and find the menu. */}
+        <AnimatePresence>
+          {isMobileMenuOpen && (
+            <motion.div
+              initial={{ x: '100%' }}
+              animate={{ x: 0 }}
+              exit={{ x: '100%' }}
+              transition={{ type: 'tween', duration: 0.25, ease: 'easeOut' }}
+              className="md:hidden fixed inset-0 bg-bakery-50 z-50"
+            >
+              <div className="p-4">
+                <div className="flex justify-between items-center gap-2 mb-8 h-16">
+                  <Logo className="text-bakery-800" />
+                  <button
+                    onClick={() => setIsMobileMenuOpen(false)}
+                    className="p-2 shrink-0"
+                    aria-label="Close menu"
+                  >
+                    <svg
+                      className="h-6 w-6 text-bakery-700"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                  </button>
+                </div>
+                <nav className="flex flex-col">
+                  {navItems.map((item) => (
+                    <Link
+                      key={item.href}
+                      to={item.href}
+                      className="text-bakery-800 hover:text-bakery-600 transition py-4 text-lg"
+                      onClick={() => setIsMobileMenuOpen(false)}
+                    >
+                      {item.label}
+                    </Link>
+                  ))}
+                </nav>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </header>
+  );
+};
+
+export default Header;
@@ -0,0 +1,64 @@
+import { Link } from 'react-router-dom';
+import Logo_R from '@/assets/logo_R.svg?react';
+import Logo_L from '@/assets/logo_L.svg?react';
+
+interface LogoProps {
+  /** Tailwind text-* class. The SVG marks fill with currentColor, so this colors the whole lockup. */
+  className?: string;
+  size?: 'sm' | 'lg';
+  /** The hero sits on the homepage, where a link back to "/" is pointless. */
+  linked?: boolean;
+}
+
+// The lockup: branch · "The Vine" over "Coffeehouse + Bakery" · branch.
+// Branch heights track the two-line wordmark so the marks read as part of it.
+const SIZES = {
+  sm: {
+    branch: 'w-12 h-12 sm:w-14 sm:h-14',
+    name: 'text-xl sm:text-2xl md:text-3xl',
+    tag: 'text-[0.6rem] sm:text-xs tracking-[0.18em]',
+    gap: 'gap-1.5 sm:gap-2',
+  },
+  lg: {
+    branch: 'w-20 h-20 sm:w-28 sm:h-28',
+    name: 'text-4xl sm:text-5xl md:text-6xl',
+    tag: 'text-xs sm:text-base tracking-[0.2em]',
+    gap: 'gap-2 sm:gap-4',
+  },
+};
+
+const Logo: React.FC<LogoProps> = ({ className = 'text-bakery-700', size = 'sm', linked = true }) => {
+  const s = SIZES[size];
+  const inner = (
+    <>
+      <Logo_R className={`${s.branch} shrink-0`} />
+      <span className="flex flex-col items-center leading-none min-w-0">
+        <span className={`font-lejour ${s.name}`} style={{ letterSpacing: '0.01em' }}>
+          The Vine
+        </span>
+        <span className={`font-adbhashitha ${s.tag} uppercase mt-1.5 whitespace-nowrap`}>
+          Coffeehouse + Bakery
+        </span>
+      </span>
+      <Logo_L className={`${s.branch} shrink-0`} />
+    </>
+  );
+
+  const classes = `flex items-center ${s.gap} min-w-0 shrink ${className}`;
+
+  if (!linked) {
+    return (
+      <div className={`${classes} justify-center`} role="img" aria-label="The Vine Coffeehouse + Bakery">
+        {inner}
+      </div>
+    );
+  }
+
+  return (
+    <Link to="/" className={classes} aria-label="The Vine Coffeehouse + Bakery, home">
+      {inner}
+    </Link>
+  );
+};
+
+export default Logo;
@@ -0,0 +1,63 @@
+import { useState } from 'react';
+
+interface ProductGalleryProps {
+  images: string[];
+  alt: string;
+}
+
+/**
+ * The square photo on a product card, with arrows when there's more than one shot.
+ *
+ * Replaces react-awesome-slider, which hasn't been published since 2020 and pins peer deps to
+ * React 16 — the same job in a fraction of the code, and one less unmaintained dependency in a
+ * build we gate on CVEs. Behaviour is what the old cards did: one image at a time, square crop,
+ * arrows only when they'd do something.
+ */
+const ProductGallery: React.FC<ProductGalleryProps> = ({ images, alt }) => {
+  const [index, setIndex] = useState(0);
+  const many = images.length > 1;
+
+  const step = (delta: number) => setIndex((i) => (i + delta + images.length) % images.length);
+
+  return (
+    <div className="relative aspect-square bg-bakery-100">
+      {images.map((src, i) => (
+        <img
+          key={src}
+          src={src}
+          // Only the visible frame gets described; the rest are decorative duplicates of the same item.
+          alt={i === 0 ? alt : ''}
+          loading="lazy"
+          decoding="async"
+          className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-300 ${
+            i === index ? 'opacity-100' : 'opacity-0 pointer-events-none'
+          }`}
+          aria-hidden={i === index ? undefined : true}
+        />
+      ))}
+
+      {many && (
+        <>
+          <button
+            type="button"
+            onClick={() => step(-1)}
+            aria-label={`Previous photo of ${alt}`}
+            className="absolute left-2 top-1/2 -translate-y-1/2 grid place-items-center h-10 w-10 rounded-full bg-bakery-900/40 text-white text-2xl leading-none backdrop-blur-sm transition hover:bg-bakery-900/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-white"
+          >
+            <span aria-hidden="true">{'<'}</span>
+          </button>
+          <button
+            type="button"
+            onClick={() => step(1)}
+            aria-label={`Next photo of ${alt}`}
+            className="absolute right-2 top-1/2 -translate-y-1/2 grid place-items-center h-10 w-10 rounded-full bg-bakery-900/40 text-white text-2xl leading-none backdrop-blur-sm transition hover:bg-bakery-900/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-white"
+          >
+            <span aria-hidden="true">{'>'}</span>
+          </button>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default ProductGallery;