Skip to content

Refactor About Page for UI Consistency and Better UX #173

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mehul-m-prajapati merged 1 commit into from
Aug 3, 2025
Merged

Refactor About Page for UI Consistency and Better UX #173

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
"@primer/octicons-react": "^19.15.5",
"@vitejs/plugin-react": "^4.3.3",
"axios": "^1.7.7",
"framer-motion": "^12.23.12",
"lucide-react": "^0.525.0",
"octokit": "^4.0.2",
"postcss": "^8.4.47",
Expand Down
117 changes: 71 additions & 46 deletions src/pages/About/About.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,58 +1,83 @@
import { motion } from "framer-motion";
import { Lightbulb, Users, Settings, Search } from "lucide-react";

const features = [
{
icon: <Search size={40} className="text-indigo-600 dark:text-indigo-400" />,
title: "Simple Issue Tracking",
description: "Track your GitHub issues seamlessly with intuitive filters and search options.",
},
{
icon: <Users size={40} className="text-indigo-600 dark:text-indigo-400" />,
title: "Team Collaboration",
description: "Collaborate with your team in real-time, manage issues and pull requests effectively.",
},
{
icon: <Settings size={40} className="text-indigo-600 dark:text-indigo-400" />,
title: "Customizable Settings",
description: "Customize your issue tracking workflow to match your team's needs.",
},
];

const About = () => {
return (
<div className="about-container">
<div className="bg-gradient-to-br from-white to-gray-100 dark:from-gray-900 dark:to-gray-800 text-black dark:text-white min-h-screen">

{/* Hero Section */}
<section
className="
hero
bg-white text-black
dark:bg-gray-800 dark:text-white
py-12 px-4
"
>
<h1 className="text-4xl font-bold text-center">About Us</h1>
<p className="text-lg text-center mt-4">
Welcome to GitHub Tracker! We simplify issue tracking for developers.
</p>
<section className="py-24 text-center relative overflow-hidden">
<motion.h1
className="text-5xl font-extrabold mb-4 drop-shadow-sm"
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
>
About Us
</motion.h1>
<motion.p
className="text-xl max-w-xl mx-auto text-gray-600 dark:text-gray-300"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.2, duration: 0.6 }}
>
Welcome to <strong>GitHub Tracker</strong> — your smart solution to manage GitHub issues without chaos.
</motion.p>
</section>

{/* Mission Section */}
<section className="mission py-12 px-4 bg-white dark:bg-gray-800 dark:text-white">
<h2 className="text-3xl font-semibold text-center">Our Mission</h2>
<p className="text-lg text-center mt-4 max-w-3xl mx-auto">
We aim to provide an efficient and user-friendly way to track GitHub issues and pull requests.
Our goal is to make it easy for developers to stay organized and focused on their projects without getting bogged down by the details.
</p>
<section className="py-20 px-6 bg-white dark:bg-gray-900 text-center">
<motion.div
initial={{ opacity: 0, y: 10 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
>
<Lightbulb size={48} className="mx-auto text-indigo-600 dark:text-indigo-400 mb-4" />
<h2 className="text-4xl font-bold mb-6">Our Mission</h2>
<p className="text-lg max-w-3xl mx-auto text-gray-700 dark:text-gray-300 leading-relaxed">
We aim to provide an efficient and user-friendly way to track GitHub issues and pull requests.
Our goal is to make it easy for developers to stay organized and focused on their projects
without getting bogged down by the details.
</p>
</motion.div>
</section>

{/* Features Section */}
<section className="features bg-white dark:bg-gray-800 dark:text-white py-12 px-4">
<h2 className="text-3xl font-semibold text-center">What We Do</h2>

<div className="flex flex-col md:flex-row md:justify-around gap-8 mt-8">
<div className="feature-item text-center">
<div className="feature-icon text-4xl">🔍</div>
<h3 className="font-semibold mt-4 text-xl">Simple Issue Tracking</h3>
<p className="text-base mt-2">
Track your GitHub issues seamlessly with intuitive filters and search options.
</p>
</div>

<div className="feature-item text-center">
<div className="feature-icon text-4xl">👥</div>
<h3 className="font-semibold mt-4 text-xl">Team Collaboration</h3>
<p className="text-base mt-2">
Collaborate with your team in real-time, manage issues and pull requests effectively.
</p>
</div>

<div className="feature-item text-center">
<div className="feature-icon text-4xl">⚙️</div>
<h3 className="font-semibold mt-4 text-xl">Customizable Settings</h3>
<p className="text-base mt-2">
Customize your issue tracking workflow to match your team's needs.
</p>
</div>
<section className="py-24 px-6 bg-gray-50 dark:bg-gray-950">
<h2 className="text-4xl font-bold text-center mb-12">What We Do</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-10 max-w-6xl mx-auto">
{features.map((feature, idx) => (
<motion.div
key={idx}
className="p-8 bg-white dark:bg-gray-800 shadow-lg rounded-2xl hover:shadow-xl transition duration-300 text-center border border-gray-100 dark:border-gray-700"
whileHover={{ scale: 1.05 }}
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ delay: idx * 0.2, duration: 0.6 }}
>
<div className="mb-4">{feature.icon}</div>
<h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
<p className="text-gray-600 dark:text-gray-300">{feature.description}</p>
</motion.div>
))}
</div>
</section>
</div>
Expand Down