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 <assistant@shakespeare.diy>

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",

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",

src/components/Layout.tsx

@@ -360,7 +360,7 @@ export function Layout({ children }: LayoutProps) {
                 <MapPin className="h-5 w-5 text-white" />
               </div>
             </div>
-            <span className="text-xl font-black uppercase tracking-wider neon-red" style={{
+            <span className="font-display text-2xl neon-red tracking-wide" style={{
               textShadow: '0 0 10px #ff0040, 0 0 20px #ff0040'
             }}>SKATESPOTS</span>
           </Link>
@@ -543,7 +543,7 @@ export function Layout({ children }: LayoutProps) {
             <div className="w-9 h-9 rounded-lg bg-gradient-to-br from-red-500 to-orange-500 flex items-center justify-center flex-shrink-0 shadow-lg">
               <MapPin className="h-4 w-4 text-white" />
             </div>
-            <span className="text-lg font-black uppercase neon-red" style={{
+            <span className="font-display text-xl neon-red tracking-wide" style={{
               textShadow: '0 0 8px #ff0040'
             }}>SKATESPOTS</span>
           </Link>

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;
+  font-family: 'Bebas Neue', 'Impact', 'Arial Black', sans-serif;
-  letter-spacing: 0.1em;
+  letter-spacing: 0.06em;
 }
 
 .neon-red {

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
 

src/pages/Index.tsx

@@ -44,23 +44,28 @@ function HeroSection() {
         <div className="max-w-4xl mx-auto text-center">
           <div className="mb-6 xs:mb-8">
             <div className="inline-flex items-center px-3 xs:px-6 py-1.5 xs:py-2 rounded-full border-2 border-[#ff0040]/50 bg-black/50 backdrop-blur-sm mb-4 xs:mb-6">
-              <span className="text-[#ff0040] font-bold uppercase tracking-wider text-xs xs:text-sm">
+              <span className="font-condensed text-[#ff0040] uppercase tracking-[0.2em] text-sm xs:text-base" style={{ fontWeight: 600 }}>
                 <Sparkles className="inline h-3 w-3 xs:h-4 xs:w-4 mr-1 xs:mr-2" />
                 {t('home.tagline')}
               </span>
             </div>
 
-            <h1 className="text-3xl xs:text-4xl sm:text-5xl md:text-7xl lg:text-8xl font-black uppercase mb-4 xs:mb-6 leading-[0.9]" style={{
+            {/* Main headline — Bebas Neue split into two lines for visual impact */}
-              fontFamily: 'Impact, "Arial Black", sans-serif',
+            <h1 className="font-display mb-4 xs:mb-5 leading-[0.88] tracking-wide">
-              letterSpacing: '0.05em'
+              <span className="block text-[clamp(4rem,18vw,10rem)] gradient-text drop-shadow-[0_2px_24px_rgba(255,0,64,0.4)]">
-            }}>
+                SKATE
-              <span className="block gradient-text">{t('home.title')}</span>
+              </span>
+              <span className="block text-[clamp(4rem,18vw,10rem)] text-white drop-shadow-[0_2px_24px_rgba(204,255,0,0.25)]">
+                SPOTS
+              </span>
             </h1>
 
-            <p className="text-sm xs:text-base sm:text-lg md:text-xl lg:text-2xl text-gray-200 mb-2 md:mb-4 max-w-2xl mx-auto leading-relaxed font-bold uppercase tracking-wide px-2 xs:px-4">
+            {/* Subtitle — Barlow Condensed, bold and spaced */}
+            <p className="font-condensed font-700 text-[clamp(0.85rem,3.5vw,1.35rem)] text-gray-100 mb-2 md:mb-3 max-w-2xl mx-auto uppercase tracking-[0.18em] px-2 xs:px-4"
+               style={{ fontWeight: 700 }}>
               {t('home.subtitle')}
             </p>
-            <p className="text-xs xs:text-sm md:text-base text-gray-400 max-w-xl mx-auto px-2 xs:px-4 mb-6 xs:mb-8">
+            <p className="font-condensed text-[clamp(0.75rem,2.5vw,1rem)] text-gray-400 max-w-lg mx-auto px-2 xs:px-4 mb-6 xs:mb-8 tracking-wide italic">
               {t('home.description')}
             </p>
 
@@ -128,13 +133,10 @@ function FeaturedSpots() {
       <div className="container px-4">
         <div className="flex items-center justify-between mb-10">
           <div>
-            <h2 className="text-3xl md:text-4xl font-black uppercase neon-red mb-2" style={{
+            <h2 className="font-display text-4xl md:text-5xl neon-red mb-1 tracking-wide">
-              fontFamily: 'Impact, "Arial Black", sans-serif',
-              letterSpacing: '0.05em'
-            }}>
               {t('home.featuredSpots')}
             </h2>
-            <p className="text-gray-400 uppercase text-sm font-bold tracking-wide">
+            <p className="font-condensed text-gray-400 uppercase text-sm tracking-[0.15em]" style={{ fontWeight: 600 }}>
               {t('home.featuredSpotsDesc')}
             </p>
           </div>
@@ -188,13 +190,10 @@ function UpcomingEvents() {
       <div className="container px-4">
         <div className="flex items-center justify-between mb-10">
           <div>
-            <h2 className="text-3xl md:text-4xl font-black uppercase neon-lime mb-2" style={{
+            <h2 className="font-display text-4xl md:text-5xl neon-lime mb-1 tracking-wide">
-              fontFamily: 'Impact, "Arial Black", sans-serif',
-              letterSpacing: '0.05em'
-            }}>
               {t('home.upcomingEvents')}
             </h2>
-            <p className="text-gray-400 uppercase text-sm font-bold tracking-wide">
+            <p className="font-condensed text-gray-400 uppercase text-sm tracking-[0.15em]" style={{ fontWeight: 600 }}>
               {t('home.upcomingEventsDesc')}
             </p>
           </div>
@@ -253,13 +252,10 @@ function TheLabSection() {
       <div className="container px-4">
         <div className="flex items-center justify-between mb-10">
           <div>
-            <h2 className="text-3xl md:text-4xl font-black uppercase mb-2" style={{
+            <h2 className="font-display text-4xl md:text-5xl mb-1 tracking-wide">
-              fontFamily: 'Impact, "Arial Black", sans-serif',
-              letterSpacing: '0.05em'
-            }}>
               <span className="neon-red">THE</span> <span className="neon-orange">LAB</span>
             </h2>
-            <p className="text-gray-400 uppercase text-sm font-bold tracking-wide">
+            <p className="font-condensed text-gray-400 uppercase text-sm tracking-[0.15em]" style={{ fontWeight: 600 }}>
               {t('home.theLabDesc')}
             </p>
           </div>
@@ -427,10 +423,7 @@ function NewToNostrSection() {
           <div className="absolute inset-0 bg-[#ccff00]/5 blur-xl" />
 
           <div className="relative py-12 md:py-16 px-4 md:px-12 text-center">
-            <h2 className="text-3xl md:text-5xl font-black uppercase mb-4 neon-lime" style={{
+            <h2 className="font-display text-5xl md:text-7xl neon-lime mb-4 tracking-wide">
-              fontFamily: 'Impact, "Arial Black", sans-serif',
-              letterSpacing: '0.05em'
-            }}>
               NEW HERE?
             </h2>
             <p className="text-gray-300 max-w-2xl mx-auto mb-6 md:mb-8 text-base md:text-lg px-4">
@@ -481,10 +474,7 @@ function CTASection() {
           <div className="absolute bottom-0 left-0 w-96 h-96 bg-[#ccff00] opacity-15 rounded-full blur-[100px]" />
 
           <div className="relative py-16 px-6 md:px-12 text-center bg-black/50 backdrop-blur">
-            <h2 className="text-3xl md:text-5xl font-black uppercase mb-4 neon-orange" style={{
+            <h2 className="font-display text-5xl md:text-7xl neon-orange mb-4 tracking-wide">
-              fontFamily: 'Impact, "Arial Black", sans-serif',
-              letterSpacing: '0.05em'
-            }}>
               {t('home.readyToShare')}
             </h2>
             <p className="text-gray-300 max-w-2xl mx-auto mb-8 text-lg">
@@ -522,8 +512,7 @@ function Footer() {
             <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-[#ff0040] to-[#ff6600] flex items-center justify-center shadow-[0_0_20px_rgba(255,0,64,0.5)]">
               <MapPin className="h-5 w-5 text-white" />
             </div>
-            <span className="font-black uppercase text-xl neon-red" style={{
+            <span className="font-display text-2xl neon-red tracking-wide" style={{
-              fontFamily: 'Impact, "Arial Black", sans-serif',
               textShadow: '0 0 10px #ff0040'
             }}>SkateSpots</span>
           </div>