Skip to content

Commit 07e185f

Browse files
mehul-m-prajapatimehul-m-prajapati
committed
added landing page
1 parent 6aee5cc commit 07e185f

File tree

9 files changed

+558
-384
lines changed

9 files changed

+558
-384
lines changed

‎src/App.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,20 @@ import Footer from "./components/Footer";
33
import ScrollProgressBar from "./components/ScrollProgressBar";
44
import { Toaster } from "react-hot-toast";
55
import Router from "./Routes/Router";
6-
import ThemeWrapper from "./context/ThemeContext"; // ✅ import your wrapper
6+
import ThemeWrapper from "./context/ThemeContext";
77

88
function App() {
99
return (
1010
<ThemeWrapper>
1111
<div className="relative flex flex-col min-h-screen">
1212
<ScrollProgressBar />
1313

14-
{/* Navbar */}
1514
<Navbar />
1615

17-
{/* Main content */}
18-
<main className="flex-grow bg-gray-50 dark:bg-gray-900 flex justify-center items-center">
16+
<main className="flex-grow bg-gray-50 dark:bg-gray-800 flex justify-center items-center">
1917
<Router />
2018
</main>
2119

22-
{/* Footer */}
2320
<Footer />
2421

2522
<Toaster
@@ -44,4 +41,4 @@ function App() {
4441
);
4542
}
4643

47-
export default App;
44+
export default App;

‎src/Routes/Router.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
import { Navigate, Route, Routes } from "react-router-dom";
2-
import Home from "../pages/Home/Home";
2+
import Tracker from "../pages/Tracker/Tracker.tsx";
33
import About from "../pages/About/About";
44
import Contact from "../pages/Contact/Contact";
55
import Contributors from "../pages/Contributors/Contributors";
66
import Signup from "../pages/Signup/Signup.tsx";
77
import Login from "../pages/Login/Login.tsx";
88
import ContributorProfile from "../pages/ContributorProfile/ContributorProfile.tsx";
9+
import Home from "../pages/Home/Home.tsx";
910

1011
const Router = () => {
1112
return (
1213
<Routes>
1314
<Route path="/" element={<Home />} />
15+
<Route path="/track" element={<Tracker />} />
1416
<Route path="/signup" element={<Signup />} />
1517
<Route path="/login" element={<Login />} />
1618
<Route path="/about" element={<About />} />

‎src/components/Features.tsx‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import { BarChart3, Users, Search, Zap, Shield, Globe } from 'lucide-react';
2+
3+
const Features = () => {
4+
const features = [
5+
{
6+
icon: BarChart3,
7+
title: 'Activity Analytics',
8+
description: 'Comprehensive charts and graphs showing commit patterns, contribution streaks, and repository activity over time.',
9+
bgColor: 'bg-blue-100',
10+
iconColor: 'text-blue-600'
11+
},
12+
{
13+
icon: Users,
14+
title: 'Multi-User Tracking',
15+
description: 'Monitor multiple GitHub users simultaneously and compare their activity levels and contribution patterns.',
16+
bgColor: 'bg-green-100',
17+
iconColor: 'text-green-600'
18+
},
19+
{
20+
icon: Search,
21+
title: 'Smart Search',
22+
description: 'Quickly find and add users to your tracking list with intelligent search and auto-suggestions.',
23+
bgColor: 'bg-purple-100',
24+
iconColor: 'text-purple-600'
25+
},
26+
{
27+
icon: Zap,
28+
title: 'Real-time Updates',
29+
description: 'Get instant notifications and updates when tracked users make new contributions or repositories.',
30+
bgColor: 'bg-orange-100',
31+
iconColor: 'text-orange-600'
32+
},
33+
{
34+
icon: Shield,
35+
title: 'Privacy First',
36+
description: 'All data is fetched from public GitHub APIs. We don\'t store personal information or require GitHub access.',
37+
bgColor: 'bg-red-100',
38+
iconColor: 'text-red-600'
39+
},
40+
{
41+
icon: Globe,
42+
title: 'Export & Share',
43+
description: 'Export activity reports and share insights with your team through various formats and integrations.',
44+
bgColor: 'bg-indigo-100',
45+
iconColor: 'text-indigo-600'
46+
}
47+
];
48+
49+
return (
50+
<section id="features" className="px-6 py-6 bg-white dark:bg-gray-900 transition-colors duration-300">
51+
<div className="mx-auto">
52+
<div className="text-center mb-16">
53+
<h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">Powerful Features</h2>
54+
<p className="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
55+
Everything you need to track, analyze, and understand GitHub activity patterns
56+
</p>
57+
</div>
58+
59+
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
60+
{features.map((feature, index) => {
61+
const IconComponent = feature.icon;
62+
return (
63+
<div key={index} className="bg-gray-50 dark:bg-gray-800 p-8 rounded-2xl hover:shadow-lg transition-all duration-300">
64+
<div className={`${feature.bgColor} w-12 h-12 rounded-lg flex items-center justify-center mb-6`}>
65+
<IconComponent className={`h-6 w-6 ${feature.iconColor}`} />
66+
</div>
67+
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">{feature.title}</h3>
68+
<p className="text-gray-600 dark:text-gray-300 leading-relaxed">
69+
{feature.description}
70+
</p>
71+
</div>
72+
);
73+
})}
74+
</div>
75+
</div>
76+
</section>
77+
);
78+
};
79+
80+
export default Features;

‎src/components/Footer.tsx‎

Lines changed: 23 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,33 @@
11
import { FaGithub } from 'react-icons/fa';
2+
import { Link } from 'react-router-dom';
23

34
function Footer() {
45
return (
5-
<footer className="py-6 shadow-lg bg-gray-100 dark:bg-gray-800 dark:text-white w-full">
6-
<div className="w-full text-center px-4">
7-
<p className="text-sm md:text-base font-medium flex flex-col sm:flex-row justify-center items-center gap-2 sm:gap-4">
8-
<span>
9-
Made with ❤️ by{" "}
6+
<footer className="dark:text-white bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800 py-2 px-6 transition-colors duration-300">
7+
<div className="max-w-7xl mx-auto">
8+
<div className="flex flex-col md:flex-row justify-between items-center p-3">
9+
<div className="flex items-center space-x-2 md:mb-0">
1010
<a
11-
href="https://github.com/mehul-m-prajapati"
12-
target="_blank"
13-
rel="noopener noreferrer"
14-
className="hover:text-gray-300 transition-colors"
11+
href="https://github.com/GitMetricsLab/github_tracker"
12+
target="_blank"
13+
rel="noopener noreferrer"
14+
className="inline-flex items-center hover:text-gray-300 transition-colors"
1515
>
16-
Mehul
16+
<FaGithub className="h-5 w-5 mr-1" />
17+
GitHub Tracker
1718
</a>
18-
</span>
19-
<span className="hidden sm:inline">|</span>
20-
<a
21-
href="https://github.com/mehul-m-prajapati/github_tracker"
22-
target="_blank"
23-
rel="noopener noreferrer"
24-
className="inline-flex items-center hover:text-gray-300 transition-colors"
25-
>
26-
<FaGithub className="h-5 w-5 mr-1" />
27-
GitHub Tracker
28-
</a>
29-
</p>
30-
<p className="text-xs md:text-sm mt-2 font-semibold">
31-
&copy; {new Date().getFullYear()}{" "}
32-
<span className="font-semibold">GitHub Tracker</span>. All rights reserved.
33-
</p>
19+
</div>
20+
<div className="flex space-x-6 text-gray-600 dark:text-gray-300">
21+
<Link to='/contact' className="hover:text-gray-900 dark:hover:text-white transition-colors">Contact Us</Link>
22+
<Link to='/about' className="hover:text-gray-900 dark:hover:text-white transition-colors">About</Link>
23+
</div>
24+
</div>
25+
<div className="p-2 border-t border-gray-200 dark:border-gray-800 text-center text-gray-600 dark:text-gray-400">
26+
<p className="text-xs md:text-sm font-semibold">
27+
&copy; {new Date().getFullYear()}{" "}
28+
<span className="font-semibold">GitHub Tracker</span>. All rights reserved.
29+
</p>
30+
</div>
3431
</div>
3532
</footer>
3633
);

‎src/components/Hero.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { Search, ArrowRight } from 'lucide-react';
2+
import { Link } from 'react-router-dom';
3+
4+
const Hero = () => {
5+
return (
6+
<section className="relative bg-gradient-to-br px-6 py-10">
7+
<div className="max-w-7xl mx-auto">
8+
<div className="text-center">
9+
<h1 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-6 leading-tight">
10+
Track GitHub Activity
11+
<span className="block text-blue-600">Like Never Before</span>
12+
</h1>
13+
<p className="text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-3xl mx-auto leading-relaxed">
14+
Monitor and analyze GitHub user activity with powerful insights. Perfect for developers,
15+
project managers, and teams who want to understand contribution patterns and repository engagement.
16+
</p>
17+
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
18+
<button className="bg-blue-600 text-white px-8 py-4 rounded-lg font-semibold hover:bg-blue-700 transition-all transform hover:scale-105 shadow-lg flex items-center space-x-2">
19+
<Search className="h-5 w-5" />
20+
<Link to='/track'>Start Tracking</Link>
21+
</button>
22+
{/*
23+
<button className="border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 px-8 py-4 rounded-lg font-semibold hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors flex items-center space-x-2">
24+
<span>View Demo</span>
25+
<ArrowRight className="h-5 w-5" />
26+
</button>*/}
27+
</div>
28+
</div>
29+
</div>
30+
</section>
31+
);
32+
};
33+
34+
export default Hero;

‎src/components/HowItWorks.tsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
2+
const HowItWorks = () => {
3+
const steps = [
4+
{
5+
number: 1,
6+
title: 'Search Users',
7+
description: 'Enter GitHub usernames or search for users by name. Add them to your tracking dashboard.'
8+
},
9+
{
10+
number: 2,
11+
title: 'Monitor Activity',
12+
description: 'Watch insights of commits, pull requests, issues, and other GitHub activities.'
13+
},
14+
{
15+
number: 3,
16+
title: 'Analyze Insights',
17+
description: 'Review detailed analytics, export reports, and gain valuable insights into development patterns.'
18+
}
19+
];
20+
21+
return (
22+
<section id="how-it-works" className="px-6 py-10 bg-gray-50 dark:bg-gray-800 transition-colors duration-300">
23+
<div className="mx-auto">
24+
<div className="text-center mb-16">
25+
<h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">How It Works</h2>
26+
<p className="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
27+
Get started in minutes with our simple three-step process
28+
</p>
29+
</div>
30+
31+
<div className="grid md:grid-cols-3 gap-8">
32+
{steps.map((step, index) => (
33+
<div key={index} className="text-center">
34+
<div className="bg-blue-600 text-white w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6 text-2xl font-bold">
35+
{step.number}
36+
</div>
37+
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">{step.title}</h3>
38+
<p className="text-gray-600 dark:text-gray-300 leading-relaxed">
39+
{step.description}
40+
</p>
41+
</div>
42+
))}
43+
</div>
44+
</div>
45+
</section>
46+
);
47+
};
48+
49+
export default HowItWorks;

‎src/components/Navbar.tsx‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,21 @@
11
import { Link } from "react-router-dom";
22
import { useState, useContext } from "react";
33
import { ThemeContext } from "../context/ThemeContext";
4+
import { Moon, Sun } from 'lucide-react';
5+
46

57
const Navbar: React.FC = () => {
8+
69
const [isOpen, setIsOpen] = useState<boolean>(false);
710
const themeContext = useContext(ThemeContext);
8-
if (!themeContext) return null;
11+
12+
if (!themeContext)
13+
return null;
914

1015
const { toggleTheme, mode } = themeContext;
1116

1217
return (
13-
<nav className="bg-white text-black dark:bg-gray-800 dark:text-white shadow-lg">
18+
<nav className="bg-white dark:bg-gray-900 text-black dark:text-white border-b border-gray-100 dark:border-gray-800 transition-colors duration-300">
1419
<div className="container mx-auto px-6 py-4 flex justify-between items-center">
1520
{/* Logo Section */}
1621
<Link
@@ -30,16 +35,10 @@ const Navbar: React.FC = () => {
3035
Home
3136
</Link>
3237
<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"
38+
to="/track"
4039
className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
4140
>
42-
Contact
41+
Tracker
4342
</Link>
4443
<Link
4544
to="/contributors"
@@ -57,7 +56,7 @@ const Navbar: React.FC = () => {
5756
onClick={toggleTheme}
5857
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"
5958
>
60-
{mode === "dark" ? "🌞 Light" : "🌙 Dark"}
59+
{mode === "dark" ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
6160
</button>
6261
</div>
6362

0 commit comments

Comments
 (0)