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/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.