Merge pull request #1 from QUBITABHAY/main

update ui background of website. Co-worker Vipul
nst-sdc · Feb 14, 2025 · 4fb56dd · 4fb56dd
2 parents c0987f4 + be62cbe
commit 4fb56dd
Show file tree

Hide file tree

Showing 20 changed files with 663 additions and 398 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@firebasegen/default-connector": "file:dataconnect-generated/js/default-connector",
     "@octokit/rest": "^20.0.2",
+    "@tailwindcss/typography": "^0.5.16",
     "axios": "^1.6.7",
     "date-fns": "^3.3.1",
     "firebase": "^10.14.1",
@@ -28,6 +29,7 @@
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.18",
+    "daisyui": "^4.12.23",
     "eslint": "^9.9.1",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.11",

diff --git a/src/App.tsx b/src/App.tsx
@@ -13,28 +13,33 @@ import SignInForm from './components/auth/SignInForm';
 import SignUpForm from './components/auth/SignUpForm';
 import AdminPanel from './components/admin/AdminPanel';
 import ProfilePage from './pages/ProfilePage';
+import ProjectPage from './pages/ProjectPage';
+import BackgroundLayout from './components/common/BackgroundLayout';
 
 function App() {
   return (
     <AuthProvider>
       <Router>
-        <div className="min-h-screen flex flex-col bg-gray-50">
-          <Navbar />
-          <main className="flex-grow pt-16 px-4 max-w-7xl mx-auto w-full">
-            <Routes>
-              <Route path="/" element={<HomePage />} />
-              <Route path="/coins" element={<CoinsPage />} />
-              <Route path="/members" element={<MembersPage />} />
-              <Route path="/leaderboard" element={<LeaderboardPage />} />
-              <Route path="/signin" element={<SignInForm />} />
-              <Route path="/signup" element={<SignUpForm />} />
-              <Route path="/admin" element={<AdminPanel />} />
-              <Route path="/profile" element={<ProfilePage />} />
-            </Routes>
-          </main>
-          <Footer />
-          <ToastContainer position="bottom-right" />
-        </div>
+        <BackgroundLayout>
+          <div className="min-h-screen flex flex-col">
+            <Navbar />
+            <main className="flex-grow pt-16 px-4 max-w-full mx-auto w-full">
+              <Routes>
+                <Route path="/" element={<HomePage />} />
+                <Route path="/projects" element={<ProjectPage />} />
+                <Route path="/coins" element={<CoinsPage />} />
+                <Route path="/members" element={<MembersPage />} />
+                <Route path="/leaderboard" element={<LeaderboardPage />} />
+                <Route path="/signin" element={<SignInForm />} />
+                <Route path="/signup" element={<SignUpForm />} />
+                <Route path="/admin" element={<AdminPanel />} />
+                <Route path="/profile" element={<ProfilePage />} />
+              </Routes>
+            </main>
+            <Footer />
+            <ToastContainer position="bottom-right" />
+          </div>
+        </BackgroundLayout>
       </Router>
     </AuthProvider>
   );

diff --git a/src/components/ChangePasswordModal.tsx b/src/components/ChangePasswordModal.tsx
@@ -53,7 +53,7 @@ export default function ChangePasswordModal({ user, isOpen, onClose }: ChangePas
 
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-      <div className="bg-white rounded-lg w-full max-w-md p-6 relative">
+      <div className="bg-gray-900 bg-opacity-90 rounded-lg w-full max-w-md p-6 relative">
         <button
           onClick={onClose}
           className="absolute top-4 right-4 text-gray-500 hover:text-gray-700"
@@ -63,12 +63,12 @@ export default function ChangePasswordModal({ user, isOpen, onClose }: ChangePas
 
         <div className="flex items-center space-x-2 mb-6">
           <Lock className="h-6 w-6 text-indigo-600" />
-          <h2 className="text-xl font-semibold">Change Password</h2>
+          <h2 className="text-xl text-white font-semibold">Change Password</h2>
         </div>
 
         <form onSubmit={handleSubmit} className="space-y-4">
           <div>
-            <label htmlFor="currentPassword" className="block text-sm font-medium text-gray-700 mb-1">
+            <label htmlFor="currentPassword" className="block text-sm font-medium text-indigo-100 mb-1">
               Current Password
             </label>
             <input
@@ -83,7 +83,7 @@ export default function ChangePasswordModal({ user, isOpen, onClose }: ChangePas
           </div>
 
           <div>
-            <label htmlFor="newPassword" className="block text-sm font-medium text-gray-700 mb-1">
+            <label htmlFor="newPassword" className="block text-sm font-medium text-indigo-100 mb-1">
               New Password
             </label>
             <input
@@ -98,7 +98,7 @@ export default function ChangePasswordModal({ user, isOpen, onClose }: ChangePas
           </div>
 
           <div>
-            <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700 mb-1">
+            <label htmlFor="confirmPassword" className="block text-sm font-medium text-indigo-100 mb-1">
               Confirm New Password
             </label>
             <input
@@ -112,7 +112,7 @@ export default function ChangePasswordModal({ user, isOpen, onClose }: ChangePas
             />
           </div>
 
-          <div className="text-sm text-gray-600">
+          <div className="text-sm text-indigo-100">
             Password must:
             <ul className="list-disc list-inside mt-1">
               <li>Be at least 8 characters long</li>
@@ -126,7 +126,7 @@ export default function ChangePasswordModal({ user, isOpen, onClose }: ChangePas
             <button
               type="button"
               onClick={onClose}
-              className="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900"
+              className="px-4 py-2 text-sm font-medium text-indigo-100 hover:text-gray-900"
             >
               Cancel
             </button>

diff --git a/src/components/EditProfileModal.tsx b/src/components/EditProfileModal.tsx
@@ -59,15 +59,15 @@ export default function EditProfileModal({ user, isOpen, onClose, onUpdate }: Ed
 
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-      <div className="bg-white rounded-lg w-full max-w-md p-6 relative">
+      <div className="bg-gray-900 bg-opacity-90 rounded-lg w-full max-w-md p-6 relative">
         <button
           onClick={onClose}
           className="absolute top-4 right-4 text-gray-500 hover:text-gray-700"
         >
           <X className="h-5 w-5" />
         </button>
 
-        <h2 className="text-xl font-semibold mb-6">Edit Profile</h2>
+        <h2 className="text-xl text-white font-semibold mb-6">Edit Profile</h2>
 
         <form onSubmit={handleSubmit} className="space-y-4">
           {/* Avatar Preview and Controls */}
@@ -92,7 +92,7 @@ export default function EditProfileModal({ user, isOpen, onClose, onUpdate }: Ed
                   value={formData.avatar}
                   onChange={handleChange}
                   placeholder="Custom avatar URL"
-                  className="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                  className="w-full px-3 py-2 text-sm text-white bg-gray-600 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
                 />
                 <button
                   type="button"
@@ -107,14 +107,14 @@ export default function EditProfileModal({ user, isOpen, onClose, onUpdate }: Ed
                   <RefreshCw className="h-5 w-5" />
                 </button>
               </div>
-              <p className="text-xs text-gray-500">
+              <p className="text-xs text-indigo-100">
                 Enter a custom avatar URL or use your GitHub avatar
               </p>
             </div>
           </div>
 
           <div>
-            <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
+            <label htmlFor="name" className="block text-sm font-medium text-indigo-100 mb-1">
               Name
             </label>
             <input
@@ -123,13 +123,13 @@ export default function EditProfileModal({ user, isOpen, onClose, onUpdate }: Ed
               name="name"
               value={formData.name}
               onChange={handleChange}
-              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
+              className="w-full px-3 py-2 border text-white bg-gray-600 border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
               required
             />
           </div>
 
           <div>
-            <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
+            <label htmlFor="email" className="block text-sm font-medium text-indigo-100 mb-1">
               Email
             </label>
             <input
@@ -138,13 +138,13 @@ export default function EditProfileModal({ user, isOpen, onClose, onUpdate }: Ed
               name="email"
               value={formData.email}
               onChange={handleChange}
-              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
+              className="w-full px-3 py-2 border text-white bg-gray-600 border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
               required
             />
           </div>
 
           <div>
-            <label htmlFor="github" className="block text-sm font-medium text-gray-700 mb-1">
+            <label htmlFor="github" className="block text-sm font-medium text-indigo-100 mb-1">
               GitHub Username
             </label>
             <input
@@ -153,13 +153,13 @@ export default function EditProfileModal({ user, isOpen, onClose, onUpdate }: Ed
               name="github"
               value={formData.github}
               onChange={handleChange}
-              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
+              className="w-full px-3 py-2 border text-white bg-gray-600 border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
               required
             />
           </div>
 
           <div>
-            <label htmlFor="linkedin" className="block text-sm font-medium text-gray-700 mb-1">
+            <label htmlFor="linkedin" className="block text-sm font-medium text-indigo-100 mb-1">
               LinkedIn URL
             </label>
             <input
@@ -168,7 +168,7 @@ export default function EditProfileModal({ user, isOpen, onClose, onUpdate }: Ed
               name="linkedin"
               value={formData.linkedin}
               onChange={handleChange}
-              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
+              className="w-full px-3 py-2 text-white bg-gray-600 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
               placeholder="https://linkedin.com/in/your-profile"
             />
           </div>
@@ -177,7 +177,7 @@ export default function EditProfileModal({ user, isOpen, onClose, onUpdate }: Ed
             <button
               type="button"
               onClick={onClose}
-              className="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900"
+              className="px-4 py-2 text-sm font-medium text-indigo-100 hover:text-gray-900"
             >
               Cancel
             </button>

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -1,36 +1,63 @@
 import React from 'react';
-import { Code2, Heart } from 'lucide-react';
+import { Code2, GithubIcon, Heart, Linkedin, TwitterIcon } from 'lucide-react';
 import { Link } from 'react-router-dom';
 
 export default function Footer() {
   const currentYear = new Date().getFullYear();
 
   return (
-    <footer className="bg-white border-t">
-      <div className="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
-        <div className="flex flex-col items-center space-y-4">
-          <Link to="/" className="flex items-center space-x-2">
-            <Code2 className="h-8 w-8 text-indigo-600" />
-            <span className="font-bold text-xl">Dev Club</span>
+    <footer className="footer p-6 bg-[#02191C]/80 backdrop-blur-md text-base-content border-t border-indigo-500/10">
+
+      <div className="max-w-7xl w-full mx-auto grid grid-cols-1 md:grid-cols-4 gap-8">
+        <div className="flex flex-col gap-2">
+          <Link to="/" className="flex items-center gap-2">
+            <Code2 className="h-6 w-6 text-indigo-400" />
+            <span className="font-bold text-lg text-gray-200">Dev Club</span>
           </Link>
-
-          <div className="flex items-center space-x-1 text-gray-500 text-sm">
+          <p className="text-sm text-gray-400">Building Developer Community</p>
+        </div>
+
+        <div className="flex flex-col gap-2">
+          <h3 className="text-gray-200 font-semibold mb-2">Quick Links</h3>
+          <Link to="/projects" className="text-sm text-zinc-300 hover:text-indigo-400 transition-colors">Projects</Link>
+          <Link to="/coins" className="text-sm text-zinc-300 hover:text-indigo-400 transition-colors">Dev Coins</Link>
+          <Link to="/members" className="text-sm text-zinc-300 hover:text-indigo-400 transition-colors">Members</Link>
+          <Link to="/leaderboard" className="text-sm text-zinc-300 hover:text-indigo-400 transition-colors">Leaderboard</Link>
+        </div>
+
+        <div className="flex flex-col gap-2">
+          <h3 className="text-gray-200 font-semibold mb-2">Resources</h3>
+          {/* <Link to="/docs" className="text-sm text-zinc-300 hover:text-indigo-400 transition-colors">Documentation</Link> */}
+          <a href="https://github.com/nst-sdc" target="_blank" rel="noopener noreferrer" 
+            className="text-sm text-zinc-300 hover:text-indigo-400 transition-colors">GitHub</a>
+          {/* <Link to="/faq" className="text-sm text-zinc-300 hover:text-indigo-400 transition-colors">FAQ</Link> */}
+        </div>
+
+        <div className="flex flex-col gap-4">
+          <h3 className="text-gray-200 font-semibold">Connect With Us</h3>
+            <div className="flex gap-4">
+            <a href="https://github.com/nst-sdc" target="_blank" rel="noopener noreferrer">
+              <GithubIcon className="h-6 w-6 text-gray-300 hover:text-indigo-400 transition-colors" />
+            </a>
+            <a href="https://www.linkedin.com/company/nst-sdc/" target="_blank" rel="noopener noreferrer">
+              <Linkedin className="h-6 w-6 text-gray-300 hover:text-indigo-400 transition-colors" />
+            </a>
+            <a href="https://x.com/NSTSDC_" target="_blank" rel="noopener noreferrer">
+              <TwitterIcon className="h-6 w-6 text-gray-300 hover:text-indigo-400 transition-colors" />
+            </a>
+            </div>
+          <div className="text-sm text-zinc-300 flex items-center gap-1">
             <span>Made with</span>
-            <Heart className="h-4 w-4 text-red-500 fill-current" />
+            <Heart className="h-3 w-3 text-red-500 fill-current animate-pulse" />
             <span>by</span>
-            <a 
-              href="https://github.com/aryanvbw"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-indigo-600 hover:text-indigo-500"
-            >
-              Vivek W
+            <a href="https://github.com/nst-sdc" target="_blank" rel="noopener noreferrer"
+              className="text-indigo-400 hover:text-indigo-300 transition-colors">
+              NST-SDC
             </a>
           </div>
 
-          <div className="text-sm text-gray-500">
-            © {currentYear} Dev Club. All rights reserved.
-          </div>
+          <p className="text-sm text-zinc-300">© {currentYear} NST-SDC</p>
+
         </div>
       </div>
     </footer>

diff --git a/src/components/MemberCard.tsx b/src/components/MemberCard.tsx
@@ -11,7 +11,7 @@ export default function MemberCard({ member, onClick }: MemberCardProps) {
   return (
     <div 
       onClick={onClick}
-      className="bg-white rounded-xl shadow-md overflow-hidden transition-transform hover:scale-105 cursor-pointer"
+      className="bg-gray-400 bg-opacity-15 rounded-xl shadow-md overflow-hidden transition-transform hover:scale-105 cursor-pointer"
     >
       <div className="p-6">
         <div className="flex items-center space-x-4">
@@ -21,11 +21,11 @@ export default function MemberCard({ member, onClick }: MemberCardProps) {
             className="h-16 w-16 rounded-full object-cover"
           />
           <div className="flex-1">
-            <h3 className="text-lg font-semibold text-gray-900">{member.name}</h3>
-            <p className="text-sm text-gray-500">{member.role}</p>
+            <h3 className="text-lg font-semibold text-green-400">{member.name}</h3>
+            <p className="text-sm text-gray-400">{member.role}</p>
           </div>
           <div className="flex flex-col items-end">
-            <div className="flex items-center space-x-1 text-indigo-600">
+            <div className="flex items-center space-x-1 text-yellow-400">
               <Award className="h-5 w-5" />
               <span className="font-semibold">{member.devCoins}</span>
             </div>