Redesign content pages, add basketball loader, fix landscape nav, scroll to top

- Add DSEG14 digital basketball loader shown on every page transition (1s)
- Add ScrollToTop component — scrolls to top on every navigation
- Fix navigation hamburger missing in landscape mode (max-height: 500px)
- Rewrite About, FAQ, Instructions, FIBA Resources to match home page design:
  - Gradient page titles (Poppins 900, titleColor→accent)
  - SVG icons replacing emoji
  - 22px border-radius cards with accent-tinted hover shadows
  - slideUp animation, · label · section headers, brand orange #E8761A
  - FIBA resource cards equal height via grid-auto-rows: 1fr
  - FAQ question text weight reduced to 400
- Landing page: feature cards wired to localization keys

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: ChengaDev

src/App.tsx

@@ -4,6 +4,7 @@ import { BrowserRouter as Router, Routes, Route, useLocation, useParams, Outlet,
 import styled, { ThemeProvider } from 'styled-components'
 import LanguageProvider, { useLocalization } from './contexts/Language/LanguageProvider'
 import Navigation from './components/Navigation'
+import BasketballLoader from './components/BasketballLoader'
 import ShareButtons from './components/ShareButtons'
 import Footer from './components/Footer'
 import CookieBanner from './components/CookieBanner'
@@ -25,6 +26,30 @@ const PlayPage = lazy(() => import('./components/PlayPage'))
 
 const NON_ENGLISH_LANGS = ['it', 'es', 'fr', 'el']
 
+const ScrollToTop: React.FC = () => {
+  const location = useLocation()
+  useEffect(() => {
+    window.scrollTo(0, 0)
+  }, [location.pathname])
+  return null
+}
+
+const PageTransition: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const location = useLocation()
+  const [loading, setLoading] = useState(false)
+  const prevPath = React.useRef(location.pathname)
+
+  useEffect(() => {
+    if (location.pathname === prevPath.current) return
+    prevPath.current = location.pathname
+    setLoading(true)
+    const id = setTimeout(() => setLoading(false), 1000)
+    return () => clearTimeout(id)
+  }, [location.pathname])
+
+  return loading ? <BasketballLoader /> : <>{children}</>
+}
+
 interface PageContentProps {
   children: React.ReactNode
   title: string
@@ -163,20 +188,23 @@ const App = () => {
             <Navigation currentTheme={selectedTheme} setTheme={handleSetTheme} />
             <PageWrapper>
               <MainContent>
-                <Suspense fallback={null}>
-                <Routes>
-                  {/* English — canonical URLs without lang prefix */}
-                  <Route path="/" element={<EnglishLayout />}>
-                    {pageRoutes}
-                  </Route>
-
-                  {/* Non-English languages + /en/* redirect */}
-                  <Route path="/:lang" element={<LangLayout />}>
-                    {pageRoutes}
-                  </Route>
-
-                  <Route path="*" element={<NotFound />} />
-                </Routes>
+                <Suspense fallback={<BasketballLoader />}>
+                  <ScrollToTop />
+                  <PageTransition>
+                    <Routes>
+                      {/* English — canonical URLs without lang prefix */}
+                      <Route path="/" element={<EnglishLayout />}>
+                        {pageRoutes}
+                      </Route>
+
+                      {/* Non-English languages + /en/* redirect */}
+                      <Route path="/:lang" element={<LangLayout />}>
+                        {pageRoutes}
+                      </Route>
+
+                      <Route path="*" element={<NotFound />} />
+                    </Routes>
+                  </PageTransition>
                 </Suspense>
               </MainContent>
               <Footer />