Added About page and added content in Home Page

src/App.tsx

@@ -15,6 +15,7 @@ import AdminPanel from './components/admin/AdminPanel';
 import ProfilePage from './pages/ProfilePage';
 import ProjectPage from './pages/ProjectPage';
 import BackgroundLayout from './components/common/BackgroundLayout';
+import AboutPage from './pages/AboutPage';
 
 function App() {
   return (
@@ -34,6 +35,7 @@ function App() {
                 <Route path="/signup" element={<SignUpForm />} />
                 <Route path="/admin" element={<AdminPanel />} />
                 <Route path="/profile" element={<ProfilePage />} />
+                <Route path="/about" element={<AboutPage />} />
               </Routes>
             </main>
             <Footer />

src/components/Navbar.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Code2, Users, Trophy, Home, LogIn, LogOut, UserPlus, User, FolderGit2 } from 'lucide-react';
+import { Code2, Users, Trophy, Home, LogIn, LogOut, UserPlus, User, FolderGit2, InfoIcon } from 'lucide-react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import { useAuth } from '../contexts/AuthContext';
 import { toast } from 'react-toastify';
@@ -39,6 +39,7 @@ export default function Navbar() {
             <NavLinkMobile to="/coins" icon={<Code2 className="w-4 h-4" />} text="Dev Coins" active={isActive('/coins')} />
             <NavLinkMobile to="/members" icon={<Users className="w-4 h-4" />} text="Members" active={isActive('/members')} />
             <NavLinkMobile to="/leaderboard" icon={<Trophy className="w-4 h-4" />} text="Leaderboard" active={isActive('/leaderboard')} />
+            <NavLinkMobile to="/about" icon={<InfoIcon className="w-4 h-4" />} text="About Us" active={isActive('/about')} />
           </ul>
         </div>
         <Link to="/" className="btn btn-ghost normal-case text-xl gap-2 ml-2">
@@ -54,6 +55,7 @@ export default function Navbar() {
           <NavLink to="/coins" icon={<Code2 className="w-4 h-4" />} text="Dev Coins" active={isActive('/coins')} />
           <NavLink to="/members" icon={<Users className="w-4 h-4" />} text="Members" active={isActive('/members')} />
           <NavLink to="/leaderboard" icon={<Trophy className="w-4 h-4" />} text="Leaderboard" active={isActive('/leaderboard')} />
+          <NavLink to="/about" icon={<InfoIcon className="w-4 h-4" />} text="About Us" active={isActive('/about')} />
         </ul>
       </div>
 

src/pages/AboutPage.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { Code2, Users, Trophy, Coins, Github } from 'lucide-react';
+
+export default function AboutPage() {
+  return (
+    <div className="min-h-screen pt-20 px-4">
+      {/* Hero Section */}
+      <div className="max-w-7xl mx-auto">
+        <div className="text-center mb-16">
+          <h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
+            About Dev Club
+          </h1>
+          <p className="text-xl text-gray-400 max-w-2xl mx-auto">
+            Building a community of passionate developers, fostering collaboration,
+            and rewarding contributions.
+          </p>
+        </div>
+
+        {/* Features Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
+          <FeatureCard
+            icon={<Users className="h-8 w-8 text-indigo-400" />}
+            title="Community"
+            description="Join a vibrant community of developers, share knowledge, and grow together."
+          />
+          <FeatureCard
+            icon={<Coins className="h-8 w-8 text-indigo-400" />}
+            title="Dev Coins"
+            description="Earn Dev Coins for your contributions and showcase your achievements."
+          />
+          <FeatureCard
+            icon={<Github className="h-8 w-8 text-indigo-400" />}
+            title="Open Source"
+            description="Contribute to projects, learn from others, and build your portfolio."
+          />
+        </div>
+
+        {/* Mission Section */}
+        <div className="bg-gray-400 bg-opacity-15 rounded-lg p-8 mb-16 backdrop-blur-sm border border-indigo-500/10">
+          <h2 className="text-2xl font-bold text-white mb-4">Our Mission</h2>
+          <p className="text-gray-400 mb-6">
+            Dev Club aims to create an inclusive environment where developers can learn,
+            collaborate, and grow together. We believe in:
+          </p>
+          <ul className="list-disc list-inside text-gray-400 space-y-2">
+            <li>Fostering a supportive community for developers of all levels</li>
+            <li>Encouraging open source contributions and collaboration</li>
+            <li>Recognizing and rewarding valuable contributions</li>
+            <li>Providing opportunities for learning and growth</li>
+          </ul>
+        </div>
+
+        {/* Stats Section */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-4">
+          <StatCard number="10+" label="Active Members" />
+          <StatCard number="10+" label="Projects Completed" />
+          <StatCard number="100+" label="Dev Coins Awarded" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Helper Components
+interface FeatureCardProps {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+}
+
+function FeatureCard({ icon, title, description }: FeatureCardProps) {
+  return (
+    <div className="bg-gray-400 bg-opacity-15 rounded-lg p-6 backdrop-blur-sm border border-indigo-500/10">
+      <div className="mb-4">{icon}</div>
+      <h3 className="text-xl font-semibold text-white mb-2">{title}</h3>
+      <p className="text-gray-400">{description}</p>
+    </div>
+  );
+}
+
+function StatCard({ number, label }: { number: string; label: string }) {
+  return (
+    <div className="bg-gray-400 bg-opacity-15 rounded-lg p-6 text-center backdrop-blur-sm border border-indigo-500/10">
+      <div className="text-3xl font-bold text-indigo-400 mb-2">{number}</div>
+      <div className="text-gray-400">{label}</div>
+    </div>
+  );
+}

src/pages/HomePage.tsx

@@ -1,28 +1,38 @@
 import React from 'react';
-import { Code2, Github, Terminal } from 'lucide-react';
+import { Code2, FolderKanban, Github, Terminal } from 'lucide-react';
 import { Link } from 'react-router-dom';
 
 export default function HomePage() {
   return (
+    <>
       <div className="relative z-10 pt-20 text-center">
         <div className="flex justify-center items-center mb-6">
           <Code2 className="h-16 w-16 text-indigo-400 mr-4" />
           <h1 className="text-5xl font-bold text-white">Dev Club</h1>
         </div>
         <p className="text-xl text-indigo-200 max-w-2xl mx-auto px-4 mb-8">
-          Join our community of passionate developers, earn Dev Coins, and showcase your contributions.
+          Join our community of passionate developers, earn Dev Coins, and
+          showcase your contributions.
         </p>
 
         <div className="flex justify-center space-x-4 mb-12">
-          <Link to="/signup"
-            className="px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors flex items-center">
-            <Terminal className="w-5 h-5 mr-2" />Get Started</Link>
-          <Link to="/projects"
-            className="px-6 py-3 bg-gray-800 text-white rounded-lg hover:bg-gray-700 transition-colors flex items-center">
-            <Github className="w-5 h-5 mr-2" />View Projects</Link>
+          <Link
+            to="/signup"
+            className="px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors flex items-center"
+          >
+            <Terminal className="w-5 h-5 mr-2" />
+            Get Started
+          </Link>
+          <Link
+            to="/projects"
+            className="px-6 py-3 bg-gray-800 text-white rounded-lg hover:bg-gray-700 transition-colors flex items-center"
+          >
+            <Github className="w-5 h-5 mr-2" />
+            View Projects
+          </Link>
         </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto px-4">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto px-4 mb-12">
           <div className="bg-gray-800 bg-opacity-50 rounded-lg p-6">
             <div className="text-3xl font-bold text-indigo-400 mb-2">10+</div>
             <div className="text-gray-300">Active Members</div>
@@ -37,5 +47,59 @@ export default function HomePage() {
           </div>
         </div>
       </div>
+
+      <div className='mb-12'>
+        <div className="hero-content flex-col lg:flex-row-reverse gap-12 max-w-7xl mx-auto px-4">
+          <div className="relative animate__animated animate__fadeInRight lg:w-2/3">
+            <div className="relative z-10 bg-[#1E1E1E] p-8 rounded-2xl shadow-2xl border border-gray-700/50">
+              <div className="space-y-8">
+          <div className="flex items-center gap-4 border-b border-gray-700/50 pb-4">
+            <div className="w-3 h-3 rounded-full bg-red-500"></div>
+            <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
+            <div className="w-3 h-3 rounded-full bg-green-500"></div>
+          </div>
+          <div className="space-y-6 font-mono text-sm">
+            <div className="h-4 bg-indigo-500/10 rounded w-3/4"></div>
+            <div className="h-4 bg-indigo-500/10 rounded"></div>
+            <div className="h-4 bg-indigo-500/10 rounded w-1/2"></div>
+            <div className="text-indigo-400">
+              Loading
+              <span className="animate-[dots_1.5s_ease-in-out_infinite]">.</span>
+              <span className="animate-[dots_1.5s_ease-in-out_0.5s_infinite]">.</span>
+              <span className="animate-[dots_1.5s_ease-in-out_1s_infinite]">.</span>
+            </div>
+          </div>
+          <div className="flex gap-6">
+            <div className="flex-1 h-24 bg-indigo-500/10 rounded-lg border border-indigo-500/20"></div>
+            <div className="flex-1 h-24 bg-indigo-500/10 rounded-lg border border-indigo-500/20"></div>
+          </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Left section - Text Content */}
+          <div className="lg:w-1/3 lg:text-left text-center px-4">
+        <h1 className="text-5xl font-bold text-white mb-3">Build. Learn.</h1>
+        <h1 className="text-5xl font-bold bg-gradient-to-r from-indigo-400 to-indigo-600 text-transparent bg-clip-text mb-8">Innovate.</h1>
+        <p className="mb-8 text-gray-300 text-lg">
+          Join the most active web development community on campus. 
+          Learn modern technologies, build amazing projects, and grow your skills with like-minded developers.
+        </p>
+        <div className="flex gap-6 flex-wrap justify-center lg:justify-start">
+          <Link to="/signup" className="btn btn-primary">Get Started</Link>
+          <a 
+            href="https://github.com/nst-sdc" 
+            target="_blank" 
+            rel="noopener noreferrer"
+            className="btn btn-ghost border-indigo-500/20 hover:bg-indigo-500/10"
+          >
+            <FolderKanban className="w-5 h-5 mr-2" />
+            View Projects
+          </a>
+        </div>
+          </div>
+        </div>
+      </div>
+    </>
   );
 }