Enhance ScrollToTop functionality with navigation on hash targets, update sponsorship tiers with XAF equivalents, improve theme initialization logic, and refine light theme styles for better visual consistency.

Signed-off-by: Steve Yonkeu <yokwejuste@yahoo.com>

Author: yokwejuste

src/components/ScrollToTop.jsx

@@ -1,21 +1,25 @@
 import React, { useState, useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 const ScrollToTop = () => {
     const [isVisible, setIsVisible] = useState(false);
-    const { pathname, hash } = useLocation();
+    const { pathname, hash, search } = useLocation();
+    const navigate = useNavigate();
 
     // Scroll to top on route change, or to hash target if present
     useEffect(() => {
         if (hash) {
             const el = document.getElementById(hash.slice(1));
             if (el) {
-                setTimeout(() => el.scrollIntoView({ behavior: 'smooth' }), 100);
+                setTimeout(() => {
+                    el.scrollIntoView({ behavior: 'smooth' });
+                    navigate(pathname + search, { replace: true });
+                }, 100);
                 return;
             }
         }
         window.scrollTo(0, 0);
-    }, [pathname, hash]);
+    }, [pathname, hash, search, navigate]);
 
     // Show button when scrolling down
     useEffect(() => {

src/data/sponsors.js

@@ -5,6 +5,7 @@ export const internationalTiers = [
     name: 'Diamond',
     className: 'diamond',
     price: 'USD 5,000',
+    xafEquivalent: 'XAF 2,625,000',
     description: 'The ultimate sponsorship package for maximum visibility and impact.',
     features: [
       'Premium booth placement',
@@ -16,13 +17,13 @@ export const internationalTiers = [
       'Dedicated sponsor page on website',
       'Mention in all press releases',
     ],
-    btnClass: 'btn btn-primary btn-diamond',
-    btnStyle: { width: '100%', background: '#b9f2ff', color: 'var(--color-dark)', border: '1px solid #b9f2ff' },
+    btnClass: 'btn btn-tier btn-diamond',
   },
   {
     name: 'Gold',
     className: 'gold',
     price: 'USD 3,500',
+    xafEquivalent: 'XAF 1,837,500',
     description: 'Excellent visibility and engagement opportunities.',
     features: [
       'Exhibition booth',
@@ -32,48 +33,47 @@ export const internationalTiers = [
       'Tier 2 logo placement on website',
       'Mention in press releases',
     ],
-    btnClass: 'btn btn-primary btn-gold',
-    btnStyle: { width: '100%', background: 'var(--color-dark)', border: '1px solid var(--color-gold)', color: 'var(--color-gold)' },
+    btnClass: 'btn btn-tier btn-gold',
   },
   {
     name: 'Silver',
     className: 'silver',
     price: 'USD 2,000',
+    xafEquivalent: 'XAF 1,050,000',
     description: 'Great value for companies looking to support the community.',
     features: [
       '1 speaking slot',
       '3 conference tickets',
       'Tier 3 logo placement on website',
     ],
-    btnClass: 'btn btn-primary btn-silver',
-    btnStyle: { width: '100%', background: 'var(--color-dark)', border: '1px solid #c0c0c0', color: '#c0c0c0' },
+    btnClass: 'btn btn-tier btn-silver',
   },
   {
     name: 'Bronze',
     className: 'bronze',
     price: 'USD 1,000',
+    xafEquivalent: 'XAF 525,000',
     description: 'Ideal for startups and smaller organizations.',
     features: [
       '1 speaking slot',
       '1 conference ticket',
       'Company logo on website',
       'Branding on select materials',
     ],
-    btnClass: 'btn btn-primary btn-bronze',
-    btnStyle: { width: '100%', background: 'var(--color-dark)', border: '1px solid #cd7f32', color: '#cd7f32' },
+    btnClass: 'btn btn-tier btn-bronze',
   },
   {
     name: 'Community',
     className: 'community',
     price: 'USD 500',
+    xafEquivalent: 'XAF 262,500',
     description: 'Ideal for startups and smaller organizations.',
     features: [
       '1 conference ticket',
       'Company logo on website',
       'Branding on select materials',
     ],
-    btnClass: 'btn btn-primary',
-    btnStyle: { width: '100%', background: 'var(--color-dark)', border: '1px solid var(--color-green)', color: 'var(--color-green)' },
+    btnClass: 'btn btn-tier btn-community',
   },
 ];
 
@@ -94,8 +94,7 @@ export const localTiers = [
       'Dedicated sponsor page on website',
       'Mention in all press releases',
     ],
-    btnClass: 'btn btn-primary btn-diamond',
-    btnStyle: { width: '100%', background: '#b9f2ff', color: 'var(--color-dark)', border: '1px solid #b9f2ff' },
+    btnClass: 'btn btn-tier btn-diamond',
   },
   {
     name: 'Gold',
@@ -111,8 +110,7 @@ export const localTiers = [
       'Tier 2 logo placement on website',
       'Mention in press releases',
     ],
-    btnClass: 'btn btn-primary btn-gold',
-    btnStyle: { width: '100%', background: 'var(--color-dark)', border: '1px solid var(--color-gold)', color: 'var(--color-gold)' },
+    btnClass: 'btn btn-tier btn-gold',
   },
   {
     name: 'Silver',
@@ -126,8 +124,7 @@ export const localTiers = [
       'Conference signage with branding',
       'Tier 3 logo placement on website',
     ],
-    btnClass: 'btn btn-primary btn-silver',
-    btnStyle: { width: '100%', background: 'var(--color-dark)', border: '1px solid #c0c0c0', color: '#c0c0c0' },
+    btnClass: 'btn btn-tier btn-silver',
   },
   {
     name: 'Bronze',
@@ -141,8 +138,7 @@ export const localTiers = [
       'Company logo on website',
       'Branding on select materials',
     ],
-    btnClass: 'btn btn-primary btn-bronze',
-    btnStyle: { width: '100%', background: 'var(--color-dark)', border: '1px solid #cd7f32', color: '#cd7f32' },
+    btnClass: 'btn btn-tier btn-bronze',
   },
   {
     name: 'Community',
@@ -155,7 +151,6 @@ export const localTiers = [
       'Company logo on website',
       'Branding on select materials',
     ],
-    btnClass: 'btn btn-primary',
-    btnStyle: { width: '100%', background: 'var(--color-dark)', border: '1px solid var(--color-green)', color: 'var(--color-green)' },
+    btnClass: 'btn btn-tier btn-community',
   },
 ];

src/hooks/useTheme.js

@@ -3,6 +3,7 @@ import { useState, useEffect, useCallback } from 'react';
 function getInitialTheme() {
   const saved = localStorage.getItem('pycon-theme');
   if (saved === 'light' || saved === 'dark') return saved;
+  if (window.matchMedia?.('(prefers-color-scheme: light)').matches) return 'light';
   return 'dark';
 }
 

src/index.css

@@ -126,18 +126,22 @@
 }
 
 [data-theme="light"] .hero-background {
-    opacity: 0.15;
-    filter: blur(2px) saturate(0.6);
+    opacity: 0.45;
+    filter: blur(2px) saturate(0.85);
 }
 
 [data-theme="light"] .hero-overlay {
-    background: rgba(245, 245, 245, 0.75) !important;
+    background: linear-gradient(180deg,
+            rgba(245, 245, 245, 0.55) 0%,
+            rgba(245, 245, 245, 0.7) 50%,
+            rgba(245, 245, 245, 0.9) 100%) !important;
 }
 
 [data-theme="light"] .hero-title,
 [data-theme="light"] .hero-subtitle,
 [data-theme="light"] .hero-date {
     color: #1a1a1a;
+    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.6);
 }
 
 [data-theme="light"] .hero-title .highlight {
@@ -259,7 +263,69 @@
 
 [data-theme="light"] .sponsor-card {
     background: #ffffff;
-    border: 1px solid rgba(0, 0, 0, 0.08);
+    border: 2px solid rgba(0, 0, 0, 0.08);
+}
+
+[data-theme="light"] .sponsor-card.diamond {
+    border-color: #00b8d4;
+}
+
+[data-theme="light"] .sponsor-card.diamond .sponsor-tier {
+    color: #00838f;
+}
+
+[data-theme="light"] .sponsor-card.gold {
+    border-color: #c9a800;
+}
+
+[data-theme="light"] .sponsor-card.gold .sponsor-tier {
+    color: #b8860b;
+}
+
+[data-theme="light"] .sponsor-card.silver {
+    border-color: #909090;
+}
+
+[data-theme="light"] .sponsor-card.silver .sponsor-tier {
+    color: #666666;
+}
+
+[data-theme="light"] .sponsor-card.bronze {
+    border-color: #cd7f32;
+}
+
+[data-theme="light"] .sponsor-card.bronze .sponsor-tier {
+    color: #8b5a2b;
+}
+
+[data-theme="light"] .btn-tier.btn-diamond {
+    background: #00b8d4;
+    color: #ffffff;
+    border-color: #00b8d4;
+}
+
+[data-theme="light"] .btn-tier.btn-gold {
+    background: #b8860b;
+    color: #ffffff;
+    border-color: #b8860b;
+}
+
+[data-theme="light"] .btn-tier.btn-silver {
+    background: #666666;
+    color: #ffffff;
+    border-color: #666666;
+}
+
+[data-theme="light"] .btn-tier.btn-bronze {
+    background: #8b5a2b;
+    color: #ffffff;
+    border-color: #8b5a2b;
+}
+
+[data-theme="light"] .btn-tier.btn-community {
+    background: #2d8f4e;
+    color: #ffffff;
+    border-color: #2d8f4e;
 }
 
 [data-theme="light"] .timeline-item {
@@ -886,6 +952,40 @@ p {
 }
 
 /* Specific Tier Buttons */
+.btn-tier {
+    width: 100%;
+}
+
+.btn-tier.btn-diamond {
+    background: #b9f2ff;
+    color: #0d0d0d;
+    border-color: #b9f2ff;
+}
+
+.btn-tier.btn-gold {
+    background: #1a1a1a;
+    color: #d4aa00;
+    border-color: #d4aa00;
+}
+
+.btn-tier.btn-silver {
+    background: #1a1a1a;
+    color: #c0c0c0;
+    border-color: #c0c0c0;
+}
+
+.btn-tier.btn-bronze {
+    background: #1a1a1a;
+    color: #cd7f32;
+    border-color: #cd7f32;
+}
+
+.btn-tier.btn-community {
+    background: #1a1a1a;
+    color: #2d8f4e;
+    border-color: #2d8f4e;
+}
+
 .btn-diamond::before {
     background-image: var(--bg-beaded);
 }
@@ -2486,6 +2586,18 @@ img {
     margin-bottom: var(--spacing-sm);
 }
 
+.sponsor-price .price-hover {
+    display: none;
+}
+
+.sponsor-card:hover .price-hover {
+    display: inline;
+}
+
+.sponsor-card:hover .price-hover ~ .price-default {
+    display: none;
+}
+
 .sponsor-features {
     margin: var(--spacing-md) 0;
 }

src/pages/Sponsor.jsx

@@ -174,7 +174,12 @@ const Sponsor = () => {
                             <div key={tier.name} className={`card sponsor-card ${tier.className} animate-on-scroll slide-up`}
                                 style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
                                 <div className="sponsor-tier">{tier.name === 'Community' ? t('sponsor.communityPackage') : `${tier.name} ${t('sponsor.tier')}`}</div>
-                                <div className="sponsor-price">{tier.price}</div>
+                                <div className="sponsor-price">
+                                    {tier.xafEquivalent && (
+                                        <span className="price-hover">{tier.price} ≈ {tier.xafEquivalent}</span>
+                                    )}
+                                    <span className="price-default">{tier.price}</span>
+                                </div>
                                 {tier.priceNote && (
                                     <div style={{ fontSize: '0.9rem', color: 'var(--color-text-muted)', marginBottom: 'var(--spacing-md)' }}>
                                         ({tier.priceNote})
@@ -193,7 +198,7 @@ const Sponsor = () => {
 
                                 <a href={`mailto:organizers@pythoncameroon.org?subject=${tier.name} Sponsorship Inquiry`}
                                     className={tier.btnClass}
-                                    style={{ ...tier.btnStyle, marginTop: 'auto' }}>{t('sponsor.select')} {tier.name}</a>
+                                    style={{ marginTop: 'auto' }}>{t('sponsor.select')} {tier.name}</a>
                             </div>
                         ))}
                     </div>