@@ -12,7 +12,7 @@ import { ThemeProvider } from './themeContent';
1212import ScrollToTop from './components/ScrollToTop/ScrollToTop' ;
1313
1414function App ( ) {
15-
15+
1616 const [ currentPage , setCurrentPage ] = useState < string > ( 'home' ) ;
1717
1818 const handleNavigate = ( page : string ) => {
@@ -32,43 +32,43 @@ function App() {
3232 case 'submit' :
3333 return < SubmitChallenge /> ;
3434 case 'community' :
35- return < Community onNavigate = { handleNavigate } /> ; { /* ✅ updated */ }
35+ return < Community onNavigate = { handleNavigate } /> ;
3636 default :
3737 return (
3838 < div >
3939 < Hero onNavigate = { handleNavigate } />
4040
4141 { /* Quick Access Section */ }
42- < div className = "bg-white py-16" >
42+ < div className = "bg-white dark:bg-gray-800 py-16 transition-colors duration-300 " >
4343 < div className = "max-w-6xl mx-auto px-4 sm:px-6 lg:px-8" >
4444 < div className = "text-center mb-12" >
45- < h2 className = "text-3xl font-bold text-gray-900 mb-4" >
45+ < h2 className = "text-3xl font-bold text-gray-900 dark:text-white mb-4" >
4646 Quick Access
4747 </ h2 >
48- < p className = "text-xl text-gray-600" >
48+ < p className = "text-xl text-gray-600 dark:text-gray-300 " >
4949 Jump into what interests you most
5050 </ p >
5151 </ div >
5252
5353 < div className = "grid grid-cols-1 md:grid-cols-2 gap-8" >
54- < div className = "bg-gradient-to-br from-purple-50 to-purple-100 p-8 rounded-2xl border border-purple-200 hover:shadow-lg transition-shadow cursor-pointer" onClick = { ( ) => handleNavigate ( 'projects' ) } >
54+ < div className = "bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/20 p-8 rounded-2xl border border-purple-200 dark:border-purple-800 hover:shadow-lg transition-shadow cursor-pointer" onClick = { ( ) => handleNavigate ( 'projects' ) } >
5555 < div className = "text-4xl mb-4" > 🚀</ div >
56- < h3 className = "text-2xl font-bold text-purple-900 mb-3" > Community Projects</ h3 >
57- < p className = "text-purple-700 mb-6" >
56+ < h3 className = "text-2xl font-bold text-purple-900 dark:text-purple-100 mb-3" > Community Projects</ h3 >
57+ < p className = "text-purple-700 dark:text-purple-200 mb-6" >
5858 Discover inclusive, collaborative projects that welcome contributors of all backgrounds and skill levels. Get hands-on experience with real codebases.
5959 </ p >
60- < div className = "inline-flex items-center text-purple-600 font-semibold" >
60+ < div className = "inline-flex items-center text-purple-600 dark:text-purple-300 font-semibold" >
6161 Explore Projects →
6262 </ div >
6363 </ div >
6464
65- < div className = "bg-gradient-to-br from-blue-50 to-blue-100 p-8 rounded-2xl border border-blue-200 hover:shadow-lg transition-shadow cursor-pointer" onClick = { ( ) => handleNavigate ( 'blog' ) } >
65+ < div className = "bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 p-8 rounded-2xl border border-blue-200 dark:border-blue-800 hover:shadow-lg transition-shadow cursor-pointer" onClick = { ( ) => handleNavigate ( 'blog' ) } >
6666 < div className = "text-4xl mb-4" > 📝</ div >
67- < h3 className = "text-2xl font-bold text-blue-900 mb-3" > Community Blog</ h3 >
68- < p className = "text-blue-700 mb-6" >
67+ < h3 className = "text-2xl font-bold text-blue-900 dark:text-blue-100 mb-3" > Community Blog</ h3 >
68+ < p className = "text-blue-700 dark:text-blue-200 mb-6" >
6969 Stories celebrating diversity, inclusion, and positive collaboration in technology. Learn from community experiences and insights.
7070 </ p >
71- < div className = "inline-flex items-center text-blue-600 font-semibold" >
71+ < div className = "inline-flex items-center text-blue-600 dark:text-blue-300 font-semibold" >
7272 Read Stories →
7373 </ div >
7474 </ div >
@@ -82,28 +82,31 @@ function App() {
8282
8383 return (
8484 < ThemeProvider >
85- < div className = "min-h-screen" >
85+ { /* Added bg-gray-50 and dark mode colors here to ensure the full page background is correct */ }
86+ < div className = "min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors duration-300" >
87+
8688 < Header currentPage = { currentPage } onNavigate = { handleNavigate } />
87- < main >
89+
90+ < main className = "pt-16" >
8891 { renderPage ( ) }
8992 </ main >
9093
9194 { /* Footer */ }
92- < footer className = "bg-gray-900 text-white py-12" >
95+ < footer className = "bg-gray-900 text-white py-12 border-t border-gray-800 " >
9396 < div className = "max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center" >
9497 < div className = "flex items-center justify-center mb-6" >
9598 < div className = "bg-gradient-to-r from-purple-600 to-blue-600 text-white p-2 rounded-lg mr-3" >
9699 < span className = "font-bold text-xl" > CT</ span >
97100 </ div >
98- < div >
101+ < div className = "text-left" >
99102 < h3 className = "text-xl font-bold" > Can I Try This?</ h3 >
100103 < p className = "text-gray-400 text-sm" > Real Challenges, Real Skills</ p >
101104 </ div >
102105 </ div >
103106 < p className = "text-gray-400 mb-6 max-w-2xl mx-auto" >
104107 A safe space to explore real-world challenges in design, development, writing, data, and more.
105108 </ p >
106- < div className = "flex justify-center space-x-6 mb-8" >
109+ < div className = "flex justify-center space-x-6 mb-8 flex-wrap gap-y-4 " >
107110 < button onClick = { ( ) => handleNavigate ( 'challenges' ) } className = "text-gray-400 hover:text-white transition-colors" > Challenges</ button >
108111 < button onClick = { ( ) => handleNavigate ( 'projects' ) } className = "text-gray-400 hover:text-white transition-colors" > Projects</ button >
109112 < button onClick = { ( ) => handleNavigate ( 'blog' ) } className = "text-gray-400 hover:text-white transition-colors" > Blog</ button >
@@ -120,4 +123,4 @@ function App() {
120123 ) ;
121124}
122125
123- export default App ;
126+ export default App ;
0 commit comments