Skip to content

Commit be411ce

Browse files
beereshbcbeereshbc
committed
Improving UIUX of a About page
1 parent 61dc8a2 commit be411ce

6 files changed

Lines changed: 122 additions & 141 deletions

File tree

‎backend/.env.example‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎backend/server.js‎

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,44 @@
1-
const express = require('express');
2-
const mongoose = require('mongoose');
3-
const session = require('express-session');
4-
const passport = require('passport');
5-
const bodyParser = require('body-parser');
6-
require('dotenv').config();
7-
const cors = require('cors');
1+
const express = require("express");
2+
const mongoose = require("mongoose");
3+
const session = require("express-session");
4+
const passport = require("passport");
5+
const bodyParser = require("body-parser");
6+
require("dotenv").config();
7+
const cors = require("cors");
88

99
// Passport configuration
10-
require('./config/passportConfig');
10+
require("./config/passportConfig");
1111

1212
const app = express();
1313

1414
// CORS configuration
15-
app.use(cors('*'));
15+
app.use(cors("*"));
1616

1717
// Middleware
1818
app.use(bodyParser.json());
19-
app.use(session({
19+
app.use(
20+
session({
2021
secret: process.env.SESSION_SECRET,
2122
resave: false,
2223
saveUninitialized: false,
23-
}));
24+
})
25+
);
2426
app.use(passport.initialize());
2527
app.use(passport.session());
2628

2729
// Routes
28-
const authRoutes = require('./routes/auth');
29-
app.use('/api/auth', authRoutes);
30+
const authRoutes = require("./routes/auth");
31+
app.use("/api/auth", authRoutes);
3032

3133
// Connect to MongoDB
32-
mongoose.connect(process.env.MONGO_URI, {}).then(() => {
33-
console.log('Connected to MongoDB');
34+
mongoose
35+
.connect(process.env.MONGO_URI, {})
36+
.then(() => {
37+
console.log("Connected to MongoDB");
3438
app.listen(process.env.PORT, () => {
35-
console.log(`Server running on port ${process.env.PORT}`);
39+
console.log(`Server running on port ${process.env.PORT}`);
3640
});
37-
}).catch((err) => {
38-
console.log('MongoDB connection error:', err);
39-
});
41+
})
42+
.catch((err) => {
43+
console.log("MongoDB connection error:", err);
44+
});

‎src/assets/git_icon.png‎

5.88 KB
Loading

‎src/components/Navbar.tsx‎

Lines changed: 47 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -10,127 +10,92 @@ const Navbar: React.FC = () => {
1010
const { toggleTheme, mode } = themeContext;
1111

1212
return (
13-
<nav className="bg-white text-black dark:bg-gray-800 dark:text-white shadow-lg">
13+
<nav className="bg-gradient-to-br from-indigo-100 to-slate-100 dark:from-blue-950 dark:to-gray-900 text-black dark:text-white border-b-2 border-blue-300 shadow-lg">
14+
{/* Top Nav */}
1415
<div className="container mx-auto px-6 py-4 flex justify-between items-center">
15-
{/* Logo Section */}
16+
{/* Logo */}
1617
<Link
1718
to="/"
18-
className="text-2xl font-bold hover:text-gray-300 cursor-pointer flex items-center"
19+
className="text-2xl font-bold hover:text-gray-500 dark:hover:text-gray-300 flex items-center"
1920
>
2021
<img src="/crl-icon.png" alt="CRL Icon" className="h-8 mr-2" />
2122
GitHub Tracker
2223
</Link>
2324

2425
{/* Desktop Links */}
25-
<div className="hidden md:flex space-x-6">
26-
<Link
27-
to="/"
28-
className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
29-
>
30-
Home
31-
</Link>
32-
<Link
33-
to="/about"
34-
className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
35-
>
36-
About
37-
</Link>
38-
<Link
39-
to="/contact"
40-
className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
41-
>
42-
Contact
43-
</Link>
44-
<Link
45-
to="/contributors"
46-
className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
47-
>
48-
Contributors
49-
</Link>
50-
<Link
51-
to="/login"
52-
className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
53-
>
54-
Login
55-
</Link>
26+
<div className="hidden md:flex space-x-6 items-center">
27+
{["/", "/about", "/contact", "/contributors", "/login"].map((path, idx) => {
28+
const labels = ["Home", "About", "Contact", "Contributors", "Login"];
29+
return (
30+
<Link
31+
key={path}
32+
to={path}
33+
className="text-lg font-medium hover:text-gray-600 dark:hover:text-gray-300 transition px-2 py-1 border border-transparent hover:border-gray-400 rounded"
34+
>
35+
{labels[idx]}
36+
</Link>
37+
);
38+
})}
39+
40+
{/* Theme Toggle */}
5641
<button
5742
onClick={toggleTheme}
58-
className="text-sm font-semibold px-3 py-1 rounded border border-gray-500 hover:text-gray-300 hover:border-gray-300 transition duration-200"
43+
className="text-sm font-semibold px-3 py-1 rounded border border-gray-500 dark:border-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 transition duration-200"
5944
>
6045
{mode === "dark" ? "🌞 Light" : "🌙 Dark"}
6146
</button>
6247
</div>
6348

64-
{/* Mobile Menu Button */}
49+
{/* Mobile Hamburger */}
6550
<div className="md:hidden">
6651
<button
6752
onClick={() => setIsOpen(!isOpen)}
68-
className="relative w-8 h-8 flex flex-col space-y-[5px] items-center group focus:outline-none"
53+
className="w-8 h-8 flex flex-col justify-between items-center focus:outline-none"
6954
>
7055
<span
71-
className={`block h-[3px] w-full bg-white rounded-lg transition-transform duration-300 ${
56+
className={`block h-[3px] w-full bg-black dark:bg-white rounded transition-transform duration-300 ${
7257
isOpen ? "rotate-45 translate-y-2" : ""
7358
}`}
74-
></span>
59+
/>
7560
<span
76-
className={`block h-[3px] w-full bg-white rounded-lg transition-opacity duration-300 ${
61+
className={`block h-[3px] w-full bg-black dark:bg-white rounded transition-opacity duration-300 ${
7762
isOpen ? "opacity-0" : ""
7863
}`}
79-
></span>
64+
/>
8065
<span
81-
className={`block h-[3px] w-full bg-white rounded-lg transition-transform duration-300 ${
66+
className={`block h-[3px] w-full bg-black dark:bg-white rounded transition-transform duration-300 ${
8267
isOpen ? "-rotate-45 -translate-y-2" : ""
8368
}`}
84-
></span>
69+
/>
8570
</button>
8671
</div>
8772
</div>
8873

89-
{/* Mobile Links */}
74+
{/* Mobile Dropdown Menu */}
9075
{isOpen && (
91-
<div className="md:hidden bg-gray-800">
92-
<div className="space-y-4 px-6 py-4">
93-
<Link
94-
to="/home"
95-
className="block text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
96-
onClick={() => setIsOpen(false)}
97-
>
98-
Home
99-
</Link>
100-
<Link
101-
to="/about"
102-
className="block text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
103-
onClick={() => setIsOpen(false)}
104-
>
105-
About
106-
</Link>
107-
<Link
108-
to="/contact"
109-
className="block text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
110-
onClick={() => setIsOpen(false)}
111-
>
112-
Contact
113-
</Link>
114-
<Link
115-
to="/contributors"
116-
className="block text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
117-
onClick={() => setIsOpen(false)}
118-
>
119-
Contributors
120-
</Link>
121-
<Link
122-
to="/login"
123-
className="block text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
124-
onClick={() => setIsOpen(false)}
125-
>
126-
Login
127-
</Link>
76+
<div className="md:hidden bg-gradient-to-br from-indigo-100 to-slate-100 dark:from-blue-950 dark:to-gray-900 text-black dark:text-white">
77+
<div className="space-y-4 px-6 py-6">
78+
{["/", "/about", "/contact", "/contributors", "/login"].map((path, idx) => {
79+
const labels = ["Home", "About", "Contact", "Contributors", "Login"];
80+
return (
81+
<Link
82+
key={path}
83+
to={path}
84+
onClick={() => setIsOpen(false)}
85+
className="block text-lg font-medium hover:text-gray-700 dark:hover:text-gray-300 transition px-2 py-1 border border-transparent hover:border-gray-400 rounded"
86+
>
87+
{labels[idx]}
88+
</Link>
89+
);
90+
})}
91+
92+
{/* Theme Toggle */}
12893
<button
12994
onClick={() => {
13095
toggleTheme();
13196
setIsOpen(false);
13297
}}
133-
className="text-sm font-semibold px-3 py-1 rounded border border-gray-500 hover:text-gray-300 hover:border-gray-300 transition duration-200 w-full text-left"
98+
className="text-sm font-semibold px-3 py-1 w-xl text-left rounded border border-gray-500 dark:border-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 transition duration-200"
13499
>
135100
{mode === "dark" ? "🌞 Light" : "🌙 Dark"}
136101
</button>

‎src/pages/About/About.tsx‎

Lines changed: 49 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,61 @@
11
const About = () => {
22
return (
3-
<div className="about-container">
4-
{/* Hero Section */}
5-
<section className="hero bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 py-12 px-4">
6-
<h1 className="text-4xl font-bold text-center">About Us</h1>
7-
<p className="text-lg text-center mt-4">
8-
Welcome to GitHub Tracker! We simplify issue tracking for developers.
9-
</p>
10-
</section>
3+
<div className="about-container w-full bg-gradient-to-br from-indigo-100 to-slate-100 dark:from-blue-950 dark:to-gray-900">
4+
{/* Main Flex Wrapper */}
5+
<div className="flex flex-col lg:flex-row mt-8 items-center justify-around gap-8 px-4">
6+
{/* Image Section */}
7+
<div className="border p-10 sm:p-14 border-indigo-400 rounded-lg shadow-lg hover:scale-105 duration-300 transition-all">
8+
<img className="w-32 sm:w-64 max-w-full h-auto" src="/crl-icon.png" alt="Logo" />
9+
</div>
1110

12-
{/* Mission Section */}
13-
<section className="mission py-12 text-gray-800 dark:text-gray-100 px-4">
14-
<h2 className="text-3xl font-semibold text-center">Our Mission</h2>
15-
<p className="text-lg text-center mt-4 max-w-3xl mx-auto">
16-
We aim to provide an efficient and user-friendly way to track GitHub
17-
issues and pull requests. Our goal is to make it easy for developers to
18-
stay organized and focused on their projects without getting bogged down
19-
by the details.
20-
</p>
21-
</section>
11+
{/* About & Mission Sections */}
12+
<div className="w-full lg:w-2/3">
13+
<section className="hero text-gray-900 dark:text-white py-10 sm:py-16 px-4 md:px-12 text-center">
14+
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold">About Us</h1>
15+
<p className="mt-6 max-w-3xl mx-auto text-base md:text-lg leading-relaxed border border-gray-300 dark:border-gray-600 px-6 py-4 rounded-lg hover:scale-105 transition-all duration-300 shadow-md dark:shadow-gray-800">
16+
Welcome to <span className="font-semibold text-indigo-600 dark:text-indigo-400">GitHub Tracker</span>!
17+
We simplify issue tracking for developers with clean design and powerful tools.
18+
</p>
19+
</section>
20+
21+
<section className="mission py-10 sm:py-16 px-4 md:px-12 text-center text-gray-800 dark:text-white">
22+
<h2 className="text-2xl sm:text-3xl md:text-4xl font-bold">Our Mission</h2>
23+
<p className="mt-6 max-w-3xl mx-auto text-base md:text-lg leading-relaxed border border-gray-300 dark:border-gray-600 px-6 py-4 rounded-lg hover:scale-105 transition-all duration-300 shadow-md dark:shadow-gray-800">
24+
We aim to provide an efficient and user-friendly way to track GitHub issues and pull requests.
25+
Our goal is to keep developers focused and organized without the hassle.
26+
</p>
27+
</section>
28+
</div>
29+
</div>
2230

2331
{/* Features Section */}
24-
<section className="features bg-gray-100 dark:bg-gray-800 py-12 text-gray-800 dark:text-gray-100 px-4">
25-
<h2 className="text-3xl font-semibold text-center">What We Do</h2>
26-
<div className="flex justify-around mt-8 flex-wrap gap-8">
27-
<div className="feature-item text-center max-w-xs">
28-
<div className="feature-icon text-4xl">🔍</div>
29-
<h3 className="font-semibold mt-4">Simple Issue Tracking</h3>
30-
<p className="text-lg mt-2 dark:text-gray-300">
31-
Track your GitHub issues seamlessly with intuitive filters and search options.
32+
<section className="features py-10 sm:py-16 px-4 md:px-12">
33+
<h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-center text-gray-800 dark:text-white">What We Do</h2>
34+
<div className="mt-10 flex flex-col md:flex-row justify-center items-stretch gap-10">
35+
{/* Feature 1 */}
36+
<div className="feature-item flex-1 max-w-sm w-full mx-auto text-center border border-gray-300 dark:border-gray-700 rounded-xl p-6 hover:bg-gradient-to-br from-indigo-100 to-pink-100 dark:from-indigo-900 dark:to-pink-900 transition-all duration-300 shadow-md dark:shadow-lg">
37+
<div className="text-5xl mb-4">🔍</div>
38+
<h3 className="text-xl font-semibold dark:text-white">Simple Issue Tracking</h3>
39+
<p className="mt-3 text-sm text-gray-700 dark:text-gray-300">
40+
Track GitHub issues with intuitive filters and fast search tools.
3241
</p>
3342
</div>
34-
<div className="feature-item text-center max-w-xs">
35-
<div className="feature-icon text-4xl">👥</div>
36-
<h3 className="font-semibold mt-4">Team Collaboration</h3>
37-
<p className="text-lg mt-2 dark:text-gray-300">
38-
Collaborate with your team in real-time, manage issues and pull requests effectively.
43+
44+
{/* Feature 2 */}
45+
<div className="feature-item flex-1 max-w-sm w-full mx-auto text-center border border-gray-300 dark:border-gray-700 rounded-xl p-6 hover:bg-gradient-to-br from-green-100 to-yellow-100 dark:from-green-900 dark:to-yellow-900 transition-all duration-300 shadow-md dark:shadow-lg">
46+
<div className="text-5xl mb-4">👥</div>
47+
<h3 className="text-xl font-semibold dark:text-white">Team Collaboration</h3>
48+
<p className="mt-3 text-sm text-gray-700 dark:text-gray-300">
49+
Collaborate in real-time with your team and manage pull requests effectively.
3950
</p>
4051
</div>
41-
<div className="feature-item text-center max-w-xs">
42-
<div className="feature-icon text-4xl">⚙️</div>
43-
<h3 className="font-semibold mt-4">Customizable Settings</h3>
44-
<p className="text-lg mt-2 dark:text-gray-300">
45-
Customize your issue tracking workflow to match your team's needs.
52+
53+
{/* Feature 3 */}
54+
<div className="feature-item flex-1 max-w-sm w-full mx-auto text-center border border-gray-300 dark:border-gray-700 rounded-xl p-6 hover:bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900 dark:to-purple-900 transition-all duration-300 shadow-md dark:shadow-lg">
55+
<div className="text-5xl mb-4">⚙️</div>
56+
<h3 className="text-xl font-semibold dark:text-white">Customizable Settings</h3>
57+
<p className="mt-3 text-sm text-gray-700 dark:text-gray-300">
58+
Tailor your workflow and preferences to fit your team’s needs and goals.
4659
</p>
4760
</div>
4861
</div>

‎src/pages/Home/Home.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,9 +132,10 @@ const Home: React.FC = () => {
132132
color: theme.palette.text.primary,
133133
}}
134134
>
135-
<form onSubmit={handleSubmit}>
135+
<form className="" onSubmit={handleSubmit}>
136136
<Box sx={{ display: "flex", gap: 2, flexWrap: "wrap" }}>
137137
<TextField
138+
className=""
138139
label="GitHub Username"
139140
value={username}
140141
onChange={(e) => setUsername(e.target.value)}

0 commit comments

Comments
 (0)