Fix light mode: theme tokens, footer nav links, persist theme

- Add accent, cardBorder, cardText, subtleText theme tokens
- Replace all hardcoded dark card colors across FAQ, Instructions,
  FIBAResources, AboutUs, SeeAlso, PrivacyPolicy with theme tokens
- ContentCard now uses cardBackground (theme-aware)
- PageBlurb and SeeAlso use subtleText token
- Footer internal links use React Router Link (no full-page reload)
- Theme choice persisted to localStorage so it survives navigation
- FAQ faqSchema moved to SEO schema prop (removes duplicate Helmet)
- Add Instruction.md to .gitignore

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

Author: ChengaDev

.gitignore

@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# Local notes
+Instruction.md

Instruction.md

@@ -0,0 +1,15 @@
+In this repo there is a simple application for practicing in opretaing a basketball shotclock.
+
+Please take this application one step forward and wrap it so it will be looking like a modern web application that have more content such as:
+FIBA resources links
+About Us
+Instructions for operating the shot clock
+
+Please make a menu and pages that can fit PC and mobile.
+
+
+Please take into consideration that in the future the app is planned to have 2 modes:
+1. Simple and free more as it is today
+2. Advance mode, which would enable to create scenarios based predefined series of actions of a basketball game and measture the response time of the user. It should not be implemented now but please take into considration in your design.
+
+The design should fit the current one, if you can improve it - go for it.

src/App.tsx

@@ -120,17 +120,26 @@ const pageRoutes = (
   </>
 )
 
+const THEME_KEY = 'sc_theme'
+
 const App = () => {
-  const [selectedTheme, setSelectedTheme] = useState(Themes.Dark)
+  const [selectedTheme, setSelectedTheme] = useState<string>(
+    () => localStorage.getItem(THEME_KEY) ?? Themes.Dark
+  )
   const theme = selectedTheme === Themes.Light ? lightTheme : darkTheme
 
+  const handleSetTheme = (t: string) => {
+    localStorage.setItem(THEME_KEY, t)
+    setSelectedTheme(t)
+  }
+
   return (
     <ThemeProvider theme={theme}>
       <Router>
         <LanguageProvider>
           <GlobalStyle />
           <AppContainer>
-            <Navigation currentTheme={selectedTheme} setTheme={setSelectedTheme} />
+            <Navigation currentTheme={selectedTheme} setTheme={handleSetTheme} />
             <PageWrapper>
               <MainContent>
                 <Suspense fallback={null}>
@@ -209,16 +218,15 @@ const MainContent = styled.main`
 `
 
 const ContentCard = styled.div`
-  background: ${props => props.theme.mainBackgroundColor};
+  background: ${props => props.theme.cardBackground};
   border-radius: 12px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   padding: 2rem;
   margin: 2rem auto;
   max-width: 1200px;
   width: 90%;
   backdrop-filter: blur(10px);
-  background-color: rgba(255, 255, 255, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  border: 1px solid ${props => props.theme.cardBorder};
   transform: translateY(0);
   transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
 

src/components/AboutUs.tsx

@@ -135,22 +135,21 @@ const Features = styled.div`
 `
 
 const FeatureCard = styled.div`
-  background: rgba(0, 0, 0, 0.6);
+  background: ${props => props.theme.cardBackground};
   border-radius: 16px;
   padding: 2rem;
   text-align: center;
   transition: all 0.3s ease;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid ${props => props.theme.cardBorder};
   backdrop-filter: blur(10px);
   animation: ${fadeInUp} 0.6s ease-out forwards;
   opacity: 0;
   animation-delay: 0.6s;
 
   &:hover {
     transform: translateY(-5px);
-    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
-    border-color: rgba(255, 215, 0, 0.3);
-    background: rgba(0, 0, 0, 0.7);
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
+    border-color: ${props => props.theme.accent};
   }
 `
 
@@ -161,19 +160,16 @@ const FeatureIcon = styled.div`
 
 const FeatureTitle = styled.h3`
   font-size: 1.3rem;
-  color: #ffd700;
+  color: ${props => props.theme.titleColor};
   margin-bottom: 1rem;
   font-weight: 600;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
 `
 
 const FeatureText = styled.p`
-  color: rgba(255, 255, 255, 0.95);
+  color: ${props => props.theme.cardText};
   margin: 0;
   line-height: 1.6;
   font-size: 1rem;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 `
 
 const ContactSection = styled.div`
@@ -183,13 +179,13 @@ const ContactSection = styled.div`
 
 const ContactTitle = styled.h2`
   font-size: 1.8rem;
-  color: #ffd700;
+  color: ${props => props.theme.titleColor};
   margin-bottom: 1rem;
   font-weight: 700;
 `
 
 const ContactText = styled.p`
-  color: rgba(255, 255, 255, 0.75);
+  color: ${props => props.theme.cardText};
   font-size: 1rem;
   margin-bottom: 2rem;
 `
@@ -207,16 +203,16 @@ const ContactLink = styled.a`
   gap: 0.5rem;
   padding: 0.65rem 1.5rem;
   border-radius: 8px;
-  border: 1px solid rgba(255, 215, 0, 0.35);
-  color: #ffd700;
+  border: 1px solid ${props => props.theme.accent}88;
+  color: ${props => props.theme.accent};
   font-size: 0.95rem;
   font-weight: 600;
   text-decoration: none;
   transition: all 0.2s ease;
 
   &:hover {
-    background: rgba(255, 215, 0, 0.1);
-    border-color: #ffd700;
+    background: ${props => props.theme.accent}18;
+    border-color: ${props => props.theme.accent};
   }
 `
 

src/components/FAQ.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
 import styled, { keyframes } from 'styled-components'
-import { Helmet } from 'react-helmet'
 import { useLocalization } from '../contexts/Language/LanguageProvider'
 import SEO from './SEO'
 import SeeAlso from './SeeAlso'
@@ -36,10 +35,8 @@ const FAQ = () => {
       <SEO
         title="FAQ | ShotClock Pro"
         description="Frequently asked questions about basketball shot clock rules, the 14-second reset, and how to use the ShotClock Pro training simulator."
+        schema={faqSchema}
       />
-      <Helmet>
-        <script type="application/ld+json">{JSON.stringify(faqSchema)}</script>
-      </Helmet>
 
       <AnimatedTitle>{locals.faqTitle}</AnimatedTitle>
       <Description>{locals.faqDescription}</Description>
@@ -103,16 +100,16 @@ const FaqList = styled.div`
 `
 
 const FaqItem = styled.div`
-  background: rgba(0, 0, 0, 0.5);
+  background: ${props => props.theme.cardBackground};
   border-radius: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid ${props => props.theme.cardBorder};
   overflow: hidden;
   animation: ${fadeInUp} 0.5s ease-out forwards;
   opacity: 0;
   transition: border-color 0.2s ease;
 
   &:hover {
-    border-color: rgba(255, 215, 0, 0.3);
+    border-color: ${props => props.theme.accent};
   }
 `
 
@@ -143,7 +140,7 @@ const QuestionText = styled.span`
 `
 
 const Chevron = styled.span<{ isOpen: boolean }>`
-  color: #ffd700;
+  color: ${props => props.theme.accent};
   font-size: 1.3rem;
   flex-shrink: 0;
   transform: ${props => props.isOpen ? 'rotate(180deg)' : 'rotate(0deg)'};
@@ -154,10 +151,10 @@ const Chevron = styled.span<{ isOpen: boolean }>`
 const Answer = styled.p`
   padding: 0 1.5rem 1.25rem;
   margin: 0;
-  color: rgba(255, 255, 255, 0.85);
+  color: ${props => props.theme.cardText};
   font-size: 1rem;
   line-height: 1.7;
-  border-top: 1px solid rgba(255, 255, 255, 0.07);
+  border-top: 1px solid ${props => props.theme.cardBorder};
   padding-top: 1rem;
 `
 

src/components/FIBAResources.tsx

@@ -151,20 +151,20 @@ const ResourcesGrid = styled.div`
 `
 
 const ResourceArrow = styled.span`
-  color: #ffd700;
+  color: ${props => props.theme.accent};
   font-size: 1.5rem;
   transition: transform 0.3s ease;
 `
 
 const ResourceCard = styled.a`
-  background: rgba(0, 0, 0, 0.6);
+  background: ${props => props.theme.cardBackground};
   border-radius: 16px;
   padding: 2rem;
   display: flex;
   align-items: center;
   gap: 1.5rem;
   text-decoration: none;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid ${props => props.theme.cardBorder};
   transition: all 0.3s ease;
   position: relative;
   overflow: hidden;
@@ -173,30 +173,13 @@ const ResourceCard = styled.a`
 
   &:hover {
     transform: translateY(-5px);
-    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
-    border-color: rgba(255, 215, 0, 0.3);
-    background: rgba(0, 0, 0, 0.7);
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
+    border-color: ${props => props.theme.accent};
 
     ${ResourceArrow} {
       transform: translateX(5px);
     }
   }
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(45deg, rgba(255, 215, 0, 0.1), rgba(255, 107, 107, 0.1));
-    opacity: 0;
-    transition: opacity 0.3s ease;
-  }
-
-  &:hover::before {
-    opacity: 1;
-  }
 `
 
 const ResourceIcon = styled.div`
@@ -209,20 +192,17 @@ const ResourceContent = styled.div`
 `
 
 const ResourceTitle = styled.h3`
-  color: #ffd700;
+  color: ${props => props.theme.titleColor};
   font-size: 1.3rem;
   margin: 0 0 0.5rem;
   font-weight: 600;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
-  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
 `
 
 const ResourceDescription = styled.p`
-  color: rgba(255, 255, 255, 0.95);
+  color: ${props => props.theme.cardText};
   margin: 0;
   font-size: 0.95rem;
   line-height: 1.5;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
 `
 
 const AdditionalInfo = styled.div`
@@ -250,20 +230,19 @@ const InfoGrid = styled.div`
 `
 
 const InfoCard = styled.div`
-  background: rgba(0, 0, 0, 0.6);
+  background: ${props => props.theme.cardBackground};
   border-radius: 16px;
   padding: 2rem;
   text-align: center;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid ${props => props.theme.cardBorder};
   transition: all 0.3s ease;
   animation: ${fadeInUp} 0.6s ease-out forwards;
   opacity: 0;
 
   &:hover {
     transform: translateY(-5px);
-    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
-    border-color: rgba(255, 215, 0, 0.3);
-    background: rgba(0, 0, 0, 0.7);
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
+    border-color: ${props => props.theme.accent};
   }
 `
 
@@ -273,11 +252,10 @@ const InfoIcon = styled.div`
 `
 
 const InfoText = styled.p`
-  color: rgba(255, 255, 255, 0.95);
+  color: ${props => props.theme.cardText};
   margin: 0;
   line-height: 1.6;
   font-size: 1rem;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 `
 
 export default FIBAResources 

src/components/Footer.tsx

@@ -1,10 +1,13 @@
 import styled from 'styled-components'
+import { Link } from 'react-router-dom'
 import DonateButton from './DonateButton'
 import LanguageSelector from './LanguageSelector'
 import { useLocalization } from '../contexts/Language/LanguageProvider'
+import AppRoutes from '../AppRoutes'
 
 const Footer = () => {
-  const { locals } = useLocalization()
+  const { locals, languageCode } = useLocalization()
+  const routes = AppRoutes(languageCode)
 
   return (
     <Container>
@@ -15,15 +18,15 @@ const Footer = () => {
             {locals.aboutContent[0]}
           </FooterText>
         </FooterSection>
-        
+
         <FooterSection>
           <FooterTitle>Quick Links</FooterTitle>
           <FooterLinks>
-            <FooterLink href="/instructions">{locals.instructions}</FooterLink>
-            <FooterLink href="/fiba-resources">{locals.fibaResources}</FooterLink>
-            <FooterLink href="/faq">{locals.faq}</FooterLink>
-            <FooterLink href="/about">{locals.about}</FooterLink>
-            <FooterLink href="/privacy-policy">Privacy Policy</FooterLink>
+            <FooterNavLink to={routes.Instructions}>{locals.instructions}</FooterNavLink>
+            <FooterNavLink to={routes.FIBAResources}>{locals.fibaResources}</FooterNavLink>
+            <FooterNavLink to={routes.FAQ}>{locals.faq}</FooterNavLink>
+            <FooterNavLink to={routes.About}>{locals.about}</FooterNavLink>
+            <FooterNavLink to="/privacy-policy">Privacy Policy</FooterNavLink>
           </FooterLinks>
         </FooterSection>
 
@@ -97,7 +100,7 @@ const FooterLinks = styled.div`
   gap: 0.5rem;
 `
 
-const FooterLink = styled.a`
+const footerLinkStyles = `
   color: rgba(255, 255, 255, 0.8);
   text-decoration: none;
   font-size: 0.9rem;
@@ -124,6 +127,14 @@ const FooterLink = styled.a`
   }
 `
 
+const FooterNavLink = styled(Link)`
+  ${footerLinkStyles}
+`
+
+const FooterLink = styled.a`
+  ${footerLinkStyles}
+`
+
 const FooterBottom = styled.div`
   max-width: 1200px;
   margin: 0 auto;