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

polish: consolidate typography to next/font variables, add atelier utility classes
Deploy to route.crispygoat.com / deploy (push) Successful in 4m33s
Details

Browse Source 
- Remove Google Fonts @import from 4 components (SiteHeader, LandingPageWrapper,
  TestimonialsAndCTA, FeaturesAndStats) — eliminate render-blocking external
  request and font flash
- Replace all unloaded Cormorant Garamond / Playfair Display / DM Sans /
  Plus Jakarta Sans references with the existing next/font variables
  (Fraunces, Manrope, Fragment_Mono) — visual coherence with the design system
- Update 9 pages (blog, brands, changelog, maintenance, protected-example,
  roadmap, security, waitlist, WaitlistForm) to use the loaded Fraunces
- Fix dead --font-geist / --font-jetbrains-mono references in
  admin-design-system.css (now point to --font-manrope / --font-fragment-mono
  which are actually loaded)
- Add atelier-pill, atelier-numerals, atelier-fineprint, atelier-canvas-soft
  utility classes; .atelier-input:focus-visible refined ring
- Add .ha-field-textarea, .ha-scroll, .ha-skeleton to admin design system
- Extend prefers-reduced-motion guard to atelier-enter/stagger/shimmer
- Apply atelier-fineprint to login/not-found/error pages for consistency
- No structural changes; build passes, 0 type errors
This commit is contained in:
Tyler
2026-06-16 23:50:16 -06:00
parent 4ebbc6dacf
commit c8fa2e8b52
19 changed files with 259 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/landing/FeaturesAndStats.tsx
+10 -12
View File
@@ -231,22 +231,20 @@ export default function FeaturesAndStats() {
return (
<div
style={{
fontFamily: "'Plus Jakarta Sans', sans-serif",
fontFamily: "var(--font-manrope)",
background: "#faf8f5",
color: "#1a1a1a",
minHeight: "100vh",
}}
>
<style jsx>{`
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");
:global(body) {
margin: 0;
padding: 0;
}
.section-label {
font-family: "Plus Jakarta Sans", sans-serif;
font-family: var(--font-manrope);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.15em;
@@ -256,7 +254,7 @@ export default function FeaturesAndStats() {
}
.section-title {
font-family: "Cormorant Garamond", serif;
font-family: var(--font-fraunces);
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 600;
color: #1a4d2e;
@@ -265,7 +263,7 @@ export default function FeaturesAndStats() {
}
.section-subtitle {
font-family: "Plus Jakarta Sans", sans-serif;
font-family: var(--font-manrope);
font-size: 1.125rem;
color: #4a4a4a;
line-height: 1.6;
@@ -304,7 +302,7 @@ export default function FeaturesAndStats() {
}
.feature-title {
font-family: "Cormorant Garamond", serif;
font-family: var(--font-fraunces);
font-size: 1.375rem;
font-weight: 600;
color: #1a4d2e;
@@ -326,7 +324,7 @@ export default function FeaturesAndStats() {
}
.stat-number {
font-family: "Cormorant Garamond", serif;
font-family: var(--font-fraunces);
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 700;
color: #1a4d2e;
@@ -570,7 +568,7 @@ export default function FeaturesAndStats() {
<span
style={{
display: "block",
fontFamily: "'Plus Jakarta Sans', sans-serif",
fontFamily: "var(--font-manrope)",
fontSize: "0.75rem",
fontWeight: 600,
letterSpacing: "0.15em",
@@ -583,7 +581,7 @@ export default function FeaturesAndStats() {
</span>
<h2
style={{
fontFamily: "'Cormorant Garamond', serif",
fontFamily: "var(--font-fraunces)",
fontSize: "clamp(2rem, 4vw, 2.75rem)",
fontWeight: 600,
color: "#faf8f5",
@@ -620,7 +618,7 @@ export default function FeaturesAndStats() {
>
<div
style={{
fontFamily: "'Cormorant Garamond', serif",
fontFamily: "var(--font-fraunces)",
fontSize: "clamp(2.25rem, 4.5vw, 3.75rem)",
fontWeight: 700,
color: "#faf8f5",
@@ -660,7 +658,7 @@ export default function FeaturesAndStats() {
</div>
<p
style={{
fontFamily: "'Plus Jakarta Sans', sans-serif",
fontFamily: "var(--font-manrope)",
fontSize: "0.875rem",
fontWeight: 500,
color: "#6b8f71",
src/components/landing/HeroSection.tsx
+16 -16
View File
@@ -310,7 +310,7 @@ export default function HeroSection() {
<h1
className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl xl:text-9xl font-bold leading-[0.9] tracking-tighter"
style={{
fontFamily: "'Playfair Display', 'Georgia', serif",
fontFamily: "var(--font-fraunces)",
color: "#1a1a1a",
}}
>
@@ -323,7 +323,7 @@ export default function HeroSection() {
<p
className="hero-reveal hero-subtitle text-lg sm:text-xl md:text-2xl max-w-xl leading-relaxed"
style={{
fontFamily: "'DM Sans', sans-serif",
fontFamily: "var(--font-manrope)",
color: "#4a6d56",
fontWeight: 400,
}}
@@ -393,7 +393,7 @@ export default function HeroSection() {
<div
className="text-2xl sm:text-3xl lg:text-4xl font-bold"
style={{
fontFamily: "'Playfair Display', serif",
fontFamily: "var(--font-fraunces)",
color: "#1a4d2e",
}}
>
@@ -611,7 +611,7 @@ export default function HeroSection() {
<div className="mb-8 reveal-scale">
<span
className="inline-block text-xs font-bold tracking-[0.3em] uppercase"
style={{ color: "#c97a3e", fontFamily: "'DM Sans', sans-serif" }}
style={{ color: "#c97a3e", fontFamily: "var(--font-manrope)" }}
>
The Challenge
</span>
@@ -621,7 +621,7 @@ export default function HeroSection() {
<h2
className="text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight mb-8"
style={{
fontFamily: "'Playfair Display', serif",
fontFamily: "var(--font-fraunces)",
color: "#faf8f5",
}}
>
@@ -636,7 +636,7 @@ export default function HeroSection() {
className="text-xl max-w-2xl mx-auto"
style={{
color: "#86868b",
fontFamily: "'DM Sans', sans-serif",
fontFamily: "var(--font-manrope)",
lineHeight: 1.7,
}}
>
@@ -669,14 +669,14 @@ export default function HeroSection() {
<div className="reveal-scale text-center mb-20">
<span
className="inline-block text-xs font-bold tracking-[0.2em] uppercase mb-6"
style={{ color: "#6b8f71", fontFamily: "'DM Sans', sans-serif" }}
style={{ color: "#6b8f71", fontFamily: "var(--font-manrope)" }}
>
Platform Features
</span>
<h2
className="text-5xl sm:text-6xl lg:text-7xl font-bold leading-tight"
style={{
fontFamily: "'Playfair Display', serif",
fontFamily: "var(--font-fraunces)",
color: "#1a4d2e",
}}
>
@@ -792,7 +792,7 @@ export default function HeroSection() {
<h3
className="text-2xl font-bold mb-4"
style={{
fontFamily: "'Playfair Display', serif",
fontFamily: "var(--font-fraunces)",
color: "#1a4d2e",
}}
>
@@ -802,7 +802,7 @@ export default function HeroSection() {
className="text-base leading-relaxed"
style={{
color: "#555",
fontFamily: "'DM Sans', sans-serif",
fontFamily: "var(--font-manrope)",
}}
>
{feature.description}
@@ -845,7 +845,7 @@ export default function HeroSection() {
<div className="text-center mb-16 reveal-scale">
<span
className="inline-block text-xs font-bold tracking-[0.2em] uppercase"
style={{ color: "#c97a3e", fontFamily: "'DM Sans', sans-serif" }}
style={{ color: "#c97a3e", fontFamily: "var(--font-manrope)" }}
>
Our Impact
</span>
@@ -863,7 +863,7 @@ export default function HeroSection() {
<div
className="text-5xl sm:text-6xl lg:text-7xl font-bold mb-4"
style={{
fontFamily: "'Playfair Display', serif",
fontFamily: "var(--font-fraunces)",
color: "#faf8f5",
lineHeight: 1,
}}
@@ -874,7 +874,7 @@ export default function HeroSection() {
</div>
<p
className="text-base font-medium"
style={{ color: "#6b8f71", fontFamily: "'DM Sans', sans-serif" }}
style={{ color: "#6b8f71", fontFamily: "var(--font-manrope)" }}
>
{stat.label}
</p>
@@ -914,7 +914,7 @@ export default function HeroSection() {
style={{
color: "#c97a3e",
background: "rgba(201, 122, 62, 0.1)",
fontFamily: "'DM Sans', sans-serif",
fontFamily: "var(--font-manrope)",
}}
>
Get Started Today
@@ -926,7 +926,7 @@ export default function HeroSection() {
<h2
className="text-5xl sm:text-6xl lg:text-7xl font-bold leading-tight mb-8"
style={{
fontFamily: "'Playfair Display', serif",
fontFamily: "var(--font-fraunces)",
color: "#1a4d2e",
}}
>
@@ -941,7 +941,7 @@ export default function HeroSection() {
className="text-xl mb-12 max-w-xl mx-auto"
style={{
color: "#555",
fontFamily: "'DM Sans', sans-serif",
fontFamily: "var(--font-manrope)",
}}
>
Join hundreds of farms already using Route Commerce to deliver fresher produce faster.
src/components/landing/LandingPageWrapper.tsx
+13 -17
View File
@@ -55,7 +55,7 @@ export function Header({ className = "" }: HeaderProps) {
<span
className="text-xl font-semibold tracking-tight"
style={{
fontFamily: "'Cormorant Garamond', Georgia, serif",
fontFamily: "var(--font-fraunces)",
color: "#1a1a1a",
}}
>
@@ -71,7 +71,7 @@ export function Header({ className = "" }: HeaderProps) {
href={link.href}
className="text-sm font-medium transition-colors hover:opacity-70"
style={{
fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
fontFamily: "var(--font-manrope)",
color: "#1a1a1a",
}}
>
@@ -86,7 +86,7 @@ export function Header({ className = "" }: HeaderProps) {
href="/login"
className="text-sm font-medium transition-opacity hover:opacity-70"
style={{
fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
fontFamily: "var(--font-manrope)",
color: "#1a4d2e",
}}
>
@@ -96,7 +96,7 @@ export function Header({ className = "" }: HeaderProps) {
href="/admin"
className="px-5 py-2.5 rounded-full text-sm font-semibold transition-all hover:opacity-90 active:scale-95"
style={{
fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
fontFamily: "var(--font-manrope)",
background: "rgba(26, 77, 46, 0.9)",
backdropFilter: "blur(10px)",
WebkitBackdropFilter: "blur(10px)",
@@ -160,7 +160,7 @@ export function Header({ className = "" }: HeaderProps) {
href={link.href}
className="px-4 py-3 text-base font-medium rounded-lg transition-colors hover:bg-[#6b8f71]/10"
style={{
fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
fontFamily: "var(--font-manrope)",
color: "#1a1a1a",
}}
onClick={() => setMobileMenuOpen(false)}
@@ -176,7 +176,7 @@ export function Header({ className = "" }: HeaderProps) {
href="/login"
className="py-3 text-base font-medium"
style={{
fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
fontFamily: "var(--font-manrope)",
color: "#1a4d2e",
}}
>
@@ -186,7 +186,7 @@ export function Header({ className = "" }: HeaderProps) {
href="/admin"
className="py-3 rounded-full text-base font-semibold text-center"
style={{
fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
fontFamily: "var(--font-manrope)",
background: "rgba(26, 77, 46, 0.9)",
backdropFilter: "blur(10px)",
border: "1px solid rgba(255, 255, 255, 0.2)",
@@ -252,7 +252,7 @@ export function Footer({ className = "" }: FooterProps) {
<span
className="text-sm font-medium tracking-tight"
style={{
fontFamily: "'Cormorant Garamond', Georgia, serif",
fontFamily: "var(--font-fraunces)",
color: "#1a1a1a",
}}
>
@@ -262,7 +262,7 @@ export function Footer({ className = "" }: FooterProps) {
<span
className="text-xs mt-1"
style={{
fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
fontFamily: "var(--font-manrope)",
color: "#9a9590",
}}
>
@@ -278,7 +278,7 @@ export function Footer({ className = "" }: FooterProps) {
href={link.href}
className="text-xs font-medium uppercase tracking-wider transition-colors hover:text-[#1a4d2e]"
style={{
fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
fontFamily: "var(--font-manrope)",
color: "#6b8f71",
letterSpacing: "0.08em",
}}
@@ -292,7 +292,7 @@ export function Footer({ className = "" }: FooterProps) {
<span
className="text-xs"
style={{
fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
fontFamily: "var(--font-manrope)",
color: "#b5b0a8",
}}
>
@@ -319,15 +319,11 @@ interface WrapperProps {
export function LandingPageWrapper({ children, className = "" }: WrapperProps) {
return (
<>
{/* Google Fonts Import */}
<style jsx global>{`
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");
`}</style>
{/* Fonts loaded via next/font in app/layout.tsx — no external @import needed */}
<div
className={`min-h-screen flex flex-col ${className}`}
style={{
fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
fontFamily: "var(--font-manrope)",
scrollBehavior: "smooth",
}}
>
src/components/landing/TestimonialsAndCTA.tsx
+6 -8
View File
@@ -59,7 +59,7 @@ export default function TestimonialsAndCTA() {
<section
style={{
background: "linear-gradient(180deg, #faf8f5 0%, #f5f2ed 100%)",
fontFamily: "'Plus Jakarta Sans', sans-serif",
fontFamily: "var(--font-manrope)",
}}
>
{/* Decorative botanical accent */}
@@ -132,7 +132,7 @@ export default function TestimonialsAndCTA() {
</span>
<h2
style={{
fontFamily: "'Cormorant Garamond', serif",
fontFamily: "var(--font-fraunces)",
fontSize: "clamp(2.5rem, 5vw, 3.5rem)",
fontWeight: 600,
lineHeight: 1.1,
@@ -193,7 +193,7 @@ export default function TestimonialsAndCTA() {
top: "-8px",
right: "20px",
fontSize: "80px",
fontFamily: "'Cormorant Garamond', serif",
fontFamily: "var(--font-fraunces)",
color: "rgba(26, 77, 46, 0.06)",
lineHeight: 1,
pointerEvents: "none",
@@ -295,7 +295,7 @@ export default function TestimonialsAndCTA() {
<div key={i} style={{ textAlign: "center" }}>
<div
style={{
fontFamily: "'Cormorant Garamond', serif",
fontFamily: "var(--font-fraunces)",
fontSize: "2.5rem",
fontWeight: 600,
color: "#1a4d2e",
@@ -326,7 +326,7 @@ export default function TestimonialsAndCTA() {
background: "linear-gradient(180deg, #f5f2ed 0%, #faf8f5 50%, #faf8f5 100%)",
position: "relative",
overflow: "hidden",
fontFamily: "'Plus Jakarta Sans', sans-serif",
fontFamily: "var(--font-manrope)",
}}
>
{/* Decorative gradient orbs */}
@@ -422,7 +422,7 @@ export default function TestimonialsAndCTA() {
{/* Headline */}
<h2
style={{
fontFamily: "'Cormorant Garamond', serif",
fontFamily: "var(--font-fraunces)",
fontSize: "clamp(2.75rem, 6vw, 4rem)",
fontWeight: 600,
lineHeight: 1.1,
@@ -626,8 +626,6 @@ export default function TestimonialsAndCTA() {
</section>
<style jsx>{`
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
@keyframes fadeInUp {
from {
opacity: 0;
src/components/layout/SiteHeader.tsx
+6 -11
View File
@@ -47,13 +47,8 @@ export default function SiteHeader() {
borderColor: "rgba(107, 143, 113, 0.15)",
}}
>
{/* Google Fonts */}
<style jsx global>{`
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");
`}</style>
<div className="mx-auto flex max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8 py-3 sm:py-4">
{/* Logo */}
{/* Logo — uses Fraunces (loaded via next/font) for a refined serif wordmark */}
<Link href="/" className="flex items-center gap-2.5 group">
<div
className="w-9 h-9 rounded-full flex items-center justify-center transition-transform group-hover:scale-105"
@@ -66,7 +61,7 @@ export default function SiteHeader() {
<span
className="text-lg sm:text-xl font-semibold tracking-tight"
style={{
fontFamily: "'Cormorant Garamond', Georgia, serif",
fontFamily: "var(--font-fraunces)",
color: "#1a1a1a",
}}
>
@@ -74,7 +69,7 @@ export default function SiteHeader() {
</span>
</Link>
{/* Navigation */}
{/* Navigation — uses Manrope (loaded via next/font) for consistent small caps */}
<nav className="flex items-center gap-5 sm:gap-6">
{/* Brand quick links */}
{(!isAdminRoute || isStorefrontRoute) && (
@@ -83,7 +78,7 @@ export default function SiteHeader() {
href="/tuxedo"
className="text-xs sm:text-sm font-medium uppercase tracking-wider transition-colors hover:opacity-70"
style={{
fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
fontFamily: "var(--font-manrope)",
color: "#6b8f71",
letterSpacing: "0.06em",
}}
@@ -94,7 +89,7 @@ export default function SiteHeader() {
href="/indian-river-direct"
className="text-xs sm:text-sm font-medium uppercase tracking-wider transition-colors hover:opacity-70"
style={{
fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
fontFamily: "var(--font-manrope)",
color: "#6b8f71",
letterSpacing: "0.06em",
}}
@@ -110,7 +105,7 @@ export default function SiteHeader() {
href="/admin"
className="text-xs sm:text-sm font-medium uppercase tracking-wider transition-colors hover:opacity-70"
style={{
fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
fontFamily: "var(--font-manrope)",
color: "#6b8f71",
letterSpacing: "0.06em",
}}
src/components/marketing/WaitlistForm.tsx
+1 -1
View File
@@ -57,7 +57,7 @@ export default function WaitlistForm({ className = "", onSuccess }: WaitlistForm
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</svg>
</div>
<h3 className="text-2xl font-bold text-[#1a1a1a] mb-2" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}>
<h3 className="text-2xl font-bold text-[#1a1a1a] mb-2" style={{ fontFamily: "var(--font-fraunces)" }}>
You&apos;re on the list!
</h3>
<p className="text-[#6b8f71]">