Merge pull request #104 from Krishdshah/Krishdshah/Broken-header-fixed

Broken Header Fixed:

Author: namish18

.gitignore

@@ -1 +1,2 @@
-node_modules/
+node_modules/
+.vscode/

.vscode/settings.json

@@ -12,7 +12,7 @@ import { ThemeProvider } from './themeContent';
 import ScrollToTop from './components/ScrollToTop/ScrollToTop';
 
 function App() {
-   
+  
   const [currentPage, setCurrentPage] = useState<string>('home');
 
   const handleNavigate = (page: string) => {
@@ -32,43 +32,43 @@ function App() {
       case 'submit':
         return <SubmitChallenge />;
       case 'community':
-        return <Community onNavigate={handleNavigate} />; {/* ✅ updated */}
+        return <Community onNavigate={handleNavigate} />;
       default:
         return (
           <div>
             <Hero onNavigate={handleNavigate} />
 
             {/* Quick Access Section */}
-            <div className="bg-white py-16">
+            <div className="bg-white dark:bg-gray-800 py-16 transition-colors duration-300">
               <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
                 <div className="text-center mb-12">
-                  <h2 className="text-3xl font-bold text-gray-900 mb-4">
+                  <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">
                     Quick Access
                   </h2>
-                  <p className="text-xl text-gray-600">
+                  <p className="text-xl text-gray-600 dark:text-gray-300">
                     Jump into what interests you most
                   </p>
                 </div>
 
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-                  <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')}>
+                  <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')}>
                     <div className="text-4xl mb-4">🚀</div>
-                    <h3 className="text-2xl font-bold text-purple-900 mb-3">Community Projects</h3>
-                    <p className="text-purple-700 mb-6">
+                    <h3 className="text-2xl font-bold text-purple-900 dark:text-purple-100 mb-3">Community Projects</h3>
+                    <p className="text-purple-700 dark:text-purple-200 mb-6">
                       Discover inclusive, collaborative projects that welcome contributors of all backgrounds and skill levels. Get hands-on experience with real codebases.
                     </p>
-                    <div className="inline-flex items-center text-purple-600 font-semibold">
+                    <div className="inline-flex items-center text-purple-600 dark:text-purple-300 font-semibold">
                       Explore Projects →
                     </div>
                   </div>
 
-                  <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')}>
+                  <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')}>
                     <div className="text-4xl mb-4">📝</div>
-                    <h3 className="text-2xl font-bold text-blue-900 mb-3">Community Blog</h3>
-                    <p className="text-blue-700 mb-6">
+                    <h3 className="text-2xl font-bold text-blue-900 dark:text-blue-100 mb-3">Community Blog</h3>
+                    <p className="text-blue-700 dark:text-blue-200 mb-6">
                       Stories celebrating diversity, inclusion, and positive collaboration in technology. Learn from community experiences and insights.
                     </p>
-                    <div className="inline-flex items-center text-blue-600 font-semibold">
+                    <div className="inline-flex items-center text-blue-600 dark:text-blue-300 font-semibold">
                       Read Stories →
                     </div>
                   </div>
@@ -82,28 +82,31 @@ function App() {
 
   return (
     <ThemeProvider>
-      <div className="min-h-screen">
+      {/* Added bg-gray-50 and dark mode colors here to ensure the full page background is correct */}
+      <div className="min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors duration-300">
+        
         <Header currentPage={currentPage} onNavigate={handleNavigate} />
-        <main>
+        
+        <main className="pt-16">
           {renderPage()}
         </main>
 
         {/* Footer */}
-        <footer className="bg-gray-900 text-white py-12">
+        <footer className="bg-gray-900 text-white py-12 border-t border-gray-800">
           <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
             <div className="flex items-center justify-center mb-6">
               <div className="bg-gradient-to-r from-purple-600 to-blue-600 text-white p-2 rounded-lg mr-3">
                 <span className="font-bold text-xl">CT</span>
               </div>
-              <div>
+              <div className="text-left">
                 <h3 className="text-xl font-bold">Can I Try This?</h3>
                 <p className="text-gray-400 text-sm">Real Challenges, Real Skills</p>
               </div>
             </div>
             <p className="text-gray-400 mb-6 max-w-2xl mx-auto">
               A safe space to explore real-world challenges in design, development, writing, data, and more.
             </p>
-            <div className="flex justify-center space-x-6 mb-8">
+            <div className="flex justify-center space-x-6 mb-8 flex-wrap gap-y-4">
               <button onClick={() => handleNavigate('challenges')} className="text-gray-400 hover:text-white transition-colors">Challenges</button>
               <button onClick={() => handleNavigate('projects')} className="text-gray-400 hover:text-white transition-colors">Projects</button>
               <button onClick={() => handleNavigate('blog')} className="text-gray-400 hover:text-white transition-colors">Blog</button>
@@ -120,4 +123,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;

src/App.tsx

@@ -11,22 +11,34 @@ export const Header: React.FC<HeaderProps> = ({ currentPage, onNavigate }) => {
   const { theme, toggleTheme } = useTheme();
 
   return (
-    <header className="bg-white dark:bg-gray-900 shadow-sm border-b border-gray-200 dark:border-gray-700 sticky top-0 z-50 transition-colors duration-300">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="flex justify-between items-center h-16">
-          {/* Logo */}
+    // Changed 'sticky' to 'fixed' for better stability across full width
+    <header className="fixed top-0 left-0 w-full z-50 h-16 bg-white dark:bg-gray-900 shadow-sm border-b border-gray-200 dark:border-gray-700 transition-colors duration-300">
+      
+      {/* LAYOUT FIX: 
+         1. Removed 'max-w-7xl' and 'mx-auto' (which concentrated items in the center).
+         2. Added 'w-full' to span the whole screen.
+         3. Increased horizontal padding (px-6 lg:px-12) to 'loosely' fit the edges.
+      */}
+      <div className="w-full px-6 lg:px-12 h-full">
+        <div className="flex justify-between items-center h-full">
+          
+          {/* Logo Section */}
           <div className="flex items-center cursor-pointer" onClick={() => onNavigate('home')}>
             <div className="bg-gradient-to-r from-purple-600 to-blue-600 text-white p-2 rounded-lg mr-3">
               <span className="font-bold text-xl">CT</span>
             </div>
-            <div className="hidden sm:block">
-              <h1 className="text-xl font-bold text-gray-900 dark:text-white">Can I Try This?</h1>
-              <p className="text-xs text-gray-500 dark:text-gray-400 -mt-1">Real Skills, Real Growth</p>
+            <div className="hidden sm:flex flex-col justify-center ml-2">
+              <h1 className="text-xl font-bold text-gray-900 dark:text-white leading-none">
+                Can I Try This?
+              </h1>
+              <p className="text-xs text-gray-500 dark:text-gray-400 mt-1 leading-none">
+                Real Skills, Real Growth
+              </p>
             </div>
           </div>
 
-          {/* Navigation */}
-          <nav className="hidden md:flex space-x-8">
+          {/* Navigation - Increased spacing (space-x-12) for a looser fit */}
+          <nav className="hidden md:flex items-center space-x-12">
             {[
               { key: 'home', label: 'Home' },
               { key: 'challenges', label: 'Challenges' },
@@ -50,14 +62,14 @@ export const Header: React.FC<HeaderProps> = ({ currentPage, onNavigate }) => {
             ))}
           </nav>
 
-          {/* Right side actions */}
-          <div className="flex items-center space-x-4">
+          {/* Right side actions - Added extra gap (space-x-6) */}
+          <div className="flex items-center space-x-6">
             <div className="hidden sm:block relative">
               <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400 dark:text-gray-500" />
               <input
                 type="text"
-                placeholder="Search challenges..."
-                className="pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+                placeholder="Search..."
+                className="pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent w-48 lg:w-64 transition-all"
               />
             </div>
 
@@ -69,7 +81,6 @@ export const Header: React.FC<HeaderProps> = ({ currentPage, onNavigate }) => {
               <User className="h-5 w-5" />
             </button>
 
-            {/* Dark/Light Mode Toggle Button */}
             <button 
               onClick={toggleTheme}
               className="p-2 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors"
@@ -86,4 +97,4 @@ export const Header: React.FC<HeaderProps> = ({ currentPage, onNavigate }) => {
       </div>
     </header>
   );
-};
+};