From fad3a3323daf16d53b2e4b813ac2d377a910f1bb Mon Sep 17 00:00:00 2001 From: "shakespeare.diy" Date: Thu, 18 Jun 2026 00:37:32 +0700 Subject: [PATCH] Replace Impact with Bebas Neue + Barlow Condensed for authentic skate typography - Install @fontsource/bebas-neue and @fontsource/barlow-condensed - Add .font-display (Bebas Neue) and .font-condensed (Barlow Condensed) CSS utilities - Hero headline: split into two lines SKATE / SPOTS with clamp() fluid sizing, Bebas Neue replaces Impact throughout - Subtitle: Barlow Condensed 700 with wide letter-spacing - Description: Barlow Condensed italic - All section headings (Featured Spots, Events, The Lab, CTA, New Here?): Bebas Neue - Section subheadings: Barlow Condensed with tracked uppercase - Desktop + mobile header logo: Bebas Neue - Footer logo: Bebas Neue - Tagline badge: Barlow Condensed 600 Co-authored-by: shakespeare.diy --- package-lock.json | 16 ++++++++++++ package.json | 2 ++ src/components/Layout.tsx | 4 +-- src/index.css | 16 ++++++++++-- src/main.tsx | 8 +++++- src/pages/Index.tsx | 55 ++++++++++++++++----------------------- 6 files changed, 63 insertions(+), 38 deletions(-) diff --git a/package-lock.json b/package-lock.json index 57f4438..cc1fdb6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,8 @@ "@contextvm/sdk": "^0.12.0", "@fontsource-variable/inter": "^5.2.6", "@fontsource-variable/outfit": "^5.2.8", + "@fontsource/barlow-condensed": "^5.2.8", + "@fontsource/bebas-neue": "^5.2.7", "@getalby/bitcoin-connect": "^3.11.5", "@getalby/bitcoin-connect-react": "^3.11.5", "@getalby/sdk": "^5.1.1", @@ -1100,6 +1102,20 @@ "license": "OFL-1.1", "funding": "https://github.com/sponsors/ayuhito" }, + "node_modules/@fontsource/barlow-condensed": { + "version": "5.2.8", + "resolved": "https://registry.npmjs.org/@fontsource/barlow-condensed/-/barlow-condensed-5.2.8.tgz", + "integrity": "sha512-cmCWNfh7oCmfarGDlhiJRkl4HOgt9aOqki7IYtDOaI3qLCeEO/8VjiZeAx/2PEPf4K36YxXDjAlOWwW/anQUZA==", + "license": "OFL-1.1", + "funding": "https://github.com/sponsors/ayuhito" + }, + "node_modules/@fontsource/bebas-neue": { + "version": "5.2.7", + "resolved": "https://registry.npmjs.org/@fontsource/bebas-neue/-/bebas-neue-5.2.7.tgz", + "integrity": "sha512-DsmBrmq55d9BCU0mt4DT4RZDdH8vhWRKEUOfbuNB1EEjMuwbtFvM8N+3gIlkYSFbsb10P8Q19BV5OdpMu2h0fA==", + "license": "OFL-1.1", + "funding": "https://github.com/sponsors/ayuhito" + }, "node_modules/@getalby/bitcoin-connect": { "version": "3.11.5", "resolved": "https://registry.npmjs.org/@getalby/bitcoin-connect/-/bitcoin-connect-3.11.5.tgz", diff --git a/package.json b/package.json index 7dcec62..dc450f5 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,8 @@ "@contextvm/sdk": "^0.12.0", "@fontsource-variable/inter": "^5.2.6", "@fontsource-variable/outfit": "^5.2.8", + "@fontsource/barlow-condensed": "^5.2.8", + "@fontsource/bebas-neue": "^5.2.7", "@getalby/sdk": "^5.1.1", "@hookform/resolvers": "^3.9.0", "@modelcontextprotocol/sdk": "^1.29.0", diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index d185b13..62bed97 100644 --- a/src/components/Layout.tsx +++ b/src/components/Layout.tsx @@ -360,7 +360,7 @@ export function Layout({ children }: LayoutProps) { - SKATESPOTS @@ -543,7 +543,7 @@ export function Layout({ children }: LayoutProps) {
- SKATESPOTS diff --git a/src/index.css b/src/index.css index 00e7d18..ee7170f 100644 --- a/src/index.css +++ b/src/index.css @@ -127,10 +127,22 @@ 50% { text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor, 0 0 20px currentColor; } } +/* ── Display font utilities ───────────────────────────────────────────────── */ +/* Bebas Neue — used for all major headlines */ +.font-display { + font-family: 'Bebas Neue', 'Impact', 'Arial Black', sans-serif; + letter-spacing: 0.04em; +} + +/* Barlow Condensed — used for subheadings, labels, nav */ +.font-condensed { + font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; +} + .neon-header { animation: neon-glow 2s ease-in-out infinite; - font-family: 'Impact', 'Arial Black', sans-serif; - letter-spacing: 0.1em; + font-family: 'Bebas Neue', 'Impact', 'Arial Black', sans-serif; + letter-spacing: 0.06em; } .neon-red { diff --git a/src/main.tsx b/src/main.tsx index 4ddc5ec..0ff7000 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -7,8 +7,14 @@ import { ErrorBoundary } from '@/components/ErrorBoundary'; import App from './App.tsx'; import './index.css'; -// Outfit font for modern, clean typography +// Outfit font for body text import '@fontsource-variable/outfit'; +// Bebas Neue — bold condensed display font for headlines +import '@fontsource/bebas-neue'; +// Barlow Condensed — tight condensed font for subheadings and UI labels +import '@fontsource/barlow-condensed/400.css'; +import '@fontsource/barlow-condensed/600.css'; +import '@fontsource/barlow-condensed/700.css'; // Leaflet CSS is loaded via CDN in index.html to avoid build issues diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx index 92fcb37..d728751 100644 --- a/src/pages/Index.tsx +++ b/src/pages/Index.tsx @@ -44,23 +44,28 @@ function HeroSection() {
- + {t('home.tagline')}
-

- {t('home.title')} + {/* Main headline — Bebas Neue split into two lines for visual impact */} +

+ + SKATE + + + SPOTS +

-

+ {/* Subtitle — Barlow Condensed, bold and spaced */} +

{t('home.subtitle')}

-

+

{t('home.description')}

@@ -128,13 +133,10 @@ function FeaturedSpots() {
-

+

{t('home.featuredSpots')}

-

+

{t('home.featuredSpotsDesc')}

@@ -188,13 +190,10 @@ function UpcomingEvents() {
-

+

{t('home.upcomingEvents')}

-

+

{t('home.upcomingEventsDesc')}

@@ -253,13 +252,10 @@ function TheLabSection() {
-

+

THE LAB

-

+

{t('home.theLabDesc')}

@@ -427,10 +423,7 @@ function NewToNostrSection() {
-

+

NEW HERE?

@@ -481,10 +474,7 @@ function CTASection() {

-

+

{t('home.readyToShare')}

@@ -522,8 +512,7 @@ function Footer() {

- SkateSpots