Skip to content

Commit a6e708b

Browse files
mehul-m-prajapatimehul-m-prajapati
authored
Merge pull request #316 from yuvraj-k-singh/feature/ux-hero-improvement
Improve hero section UI with dark and light mode
2 parents dcb6a44 + 42323cb commit a6e708b

1 file changed

Lines changed: 118 additions & 23 deletions

File tree

‎src/components/Hero.tsx‎

Lines changed: 118 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,129 @@
1-
import { Search } from 'lucide-react';
1+
import { Search, GitBranch, GitCommit, GitPullRequest, Layout } from 'lucide-react';
22
import { Link } from 'react-router-dom';
33

4+
// Fixed array declaration for data structure rendering stability
5+
const MATRIX_CELLS = Array.from({ length: 21 }, (_, i) => i);
6+
47
const Hero = () => {
58
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>*/}
9+
<section className="relative overflow-hidden bg-slate-50 dark:bg-[#030712] text-slate-900 dark:text-white px-6 py-20 lg:py-32 min-h-[90vh] flex items-center transition-colors duration-500">
10+
11+
{/* 1. Cyber Grid Overlay */}
12+
<div className="absolute inset-0 bg-[linear-gradient(to_right,#e2e8f0_1px,transparent_1px),linear-gradient(to_bottom,#e2e8f0_1px,transparent_1px)] dark:bg-[linear-gradient(to_right,#1f293710_1px,transparent_1px),linear-gradient(to_bottom,#1f293710_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)] pointer-events-none" />
13+
14+
{/* Ambient Radial Glow Elements */}
15+
<div className="absolute top-1/4 left-1/4 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] bg-blue-400/10 dark:bg-blue-500/10 rounded-full blur-[120px] pointer-events-none" />
16+
<div className="absolute bottom-1/4 right-1/4 translate-x-1/2 translate-y-1/2 w-[600px] h-[600px] bg-cyan-400/10 dark:bg-cyan-500/10 rounded-full blur-[160px] pointer-events-none" />
17+
18+
<div className="relative max-w-7xl mx-auto w-full z-10">
19+
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-8 items-center">
20+
21+
{/* LEFT COLUMN: Typography & CTA */}
22+
<div className="lg:col-span-6 text-left space-y-6 max-w-2xl mx-auto lg:mx-0">
23+
<h1 className="text-4xl md:text-5xl xl:text-6xl font-extrabold tracking-tight leading-none text-slate-900 dark:text-slate-100">
24+
Track GitHub Activity
25+
<span className="block mt-2 bg-gradient-to-r from-blue-600 via-cyan-500 to-teal-500 dark:from-blue-400 dark:via-cyan-400 dark:to-teal-400 bg-clip-text text-transparent [filter:drop-shadow(0_0_30px_rgba(56,189,248,0.3))]">
26+
Like Never Before
27+
</span>
28+
</h1>
29+
30+
<p className="text-base md:text-lg text-slate-600 dark:text-slate-400 leading-relaxed max-w-xl">
31+
Monitor and analyze GitHub user activity with powerful insights. Perfect for developers,
32+
project managers, and teams who want to understand contribution patterns and repository engagement.
33+
</p>
34+
35+
<div className="pt-4 flex flex-wrap gap-4">
36+
{/* Interactive Primary Link Button */}
37+
<Link to='/track' className="group relative inline-flex items-center justify-center p-0.5 overflow-hidden text-sm font-semibold rounded-xl bg-gradient-to-br from-blue-600 via-cyan-500 to-teal-500 dark:from-blue-500 dark:via-cyan-400 dark:to-teal-400 text-slate-900 dark:text-white transition-all shadow-md dark:shadow-[0_0_20px_rgba(59,130,246,0.3)] hover:shadow-lg dark:hover:shadow-[0_0_35px_rgba(34,211,238,0.5)] transform hover:-translate-y-0.5">
38+
<span className="relative px-7 py-3.5 transition-all ease-in duration-75 bg-white dark:bg-[#030712] rounded-[10px] group-hover:bg-opacity-0 flex items-center space-x-2">
39+
<Search className="h-5 w-5 text-blue-600 dark:text-cyan-400 group-hover:text-white transition-colors" />
40+
<span className="text-slate-900 dark:text-white group-hover:text-white">Start Tracking</span>
41+
</span>
42+
</Link>
43+
</div>
44+
</div>
45+
46+
{/* RIGHT COLUMN: Dashboard & Floating Git Elements */}
47+
<div className="lg:col-span-6 relative flex items-center justify-center h-[400px] md:h-[500px]">
48+
49+
{/* The Main Dashboard Mockup Card */}
50+
<div className="relative w-full max-w-md bg-white/70 dark:bg-slate-900/60 backdrop-blur-xl border border-slate-200 dark:border-slate-800 rounded-2xl p-6 shadow-xl dark:shadow-2xl dark:shadow-cyan-950/20 transform hover:scale-[1.02] transition-transform duration-500 z-10">
51+
<div className="flex items-center justify-between pb-4 border-b border-slate-200 dark:border-slate-800/60 mb-6">
52+
<div className="flex items-center space-x-2">
53+
<Layout className="w-5 h-5 text-blue-600 dark:text-blue-400" />
54+
<span className="text-sm font-medium text-slate-700 dark:text-slate-300">Dashboard Insights</span>
55+
</div>
56+
<div className="flex space-x-1.5">
57+
<span className="w-2.5 h-2.5 rounded-full bg-red-400 dark:bg-red-500/60"></span>
58+
<span className="w-2.5 h-2.5 rounded-full bg-yellow-400 dark:bg-yellow-500/60"></span>
59+
<span className="w-2.5 h-2.5 rounded-full bg-green-400 dark:bg-green-500/60"></span>
60+
</div>
61+
</div>
62+
63+
{/* Mockup Data widgets */}
64+
<div className="space-y-4">
65+
<div className="bg-slate-100/80 dark:bg-slate-950/80 p-4 rounded-xl border border-slate-200/60 dark:border-slate-800/40">
66+
<div className="text-xs text-slate-500 uppercase tracking-wider font-semibold mb-1">Weekly Commits</div>
67+
<div className="text-2xl font-bold text-slate-800 dark:text-slate-200">176 <span className="text-xs text-emerald-600 dark:text-emerald-400 font-normal ml-1">+12%</span></div>
68+
<div className="w-full bg-slate-200 dark:bg-slate-800 h-1.5 rounded-full mt-3 overflow-hidden">
69+
<div className="bg-gradient-to-r from-blue-600 to-cyan-500 dark:from-blue-500 dark:to-cyan-400 h-full w-[70%] rounded-full animate-pulse" />
70+
</div>
71+
</div>
72+
73+
{/* Simulated GitHub Contribution Grid */}
74+
<div className="bg-slate-100/80 dark:bg-slate-950/80 p-4 rounded-xl border border-slate-200/60 dark:border-slate-800/40">
75+
<div className="text-xs text-slate-500 uppercase tracking-wider font-semibold mb-2">Contribution Matrix</div>
76+
<div className="grid grid-cols-7 gap-1.5 w-max">
77+
{MATRIX_CELLS.map((cellIndex) => {
78+
// Fully qualified class names to ensure they aren't removed by Tailwind's compilation process
79+
const intensitiesLight = ['bg-slate-200', 'bg-emerald-200', 'bg-emerald-300', 'bg-emerald-500', 'bg-emerald-600'];
80+
const intensitiesDark = ['dark:bg-slate-800', 'dark:bg-emerald-900/60', 'dark:bg-emerald-700', 'dark:bg-emerald-500', 'dark:bg-emerald-400'];
81+
82+
const lightClass = intensitiesLight[cellIndex % intensitiesLight.length];
83+
const darkClass = intensitiesDark[cellIndex % intensitiesDark.length];
84+
85+
return (
86+
<div
87+
key={cellIndex}
88+
className={`w-3 h-3 rounded-[2px] transition-all duration-300 hover:scale-125 ${lightClass} ${darkClass}`}
89+
/>
90+
);
91+
})}
92+
</div>
93+
</div>
94+
</div>
95+
</div>
96+
97+
{/* Floating Git Icon Nodes using native inline styles for correct staggered delays */}
98+
<div
99+
style={{ animationDelay: '0s' }}
100+
className="absolute -top-4 left-6 md:left-12 bg-white dark:bg-slate-900/80 backdrop-blur-md p-3 rounded-xl border border-slate-200 dark:border-slate-800 shadow-md dark:shadow-lg z-20 animate-bounce"
101+
>
102+
<GitBranch className="w-6 h-6 text-blue-600 dark:text-blue-400" />
103+
</div>
104+
105+
<div
106+
style={{ animationDelay: '1s' }}
107+
className="absolute bottom-12 left-2 bg-white dark:bg-slate-900/80 backdrop-blur-md p-3 rounded-xl border border-slate-200 dark:border-slate-800 shadow-md dark:shadow-lg z-20 animate-bounce"
108+
>
109+
<GitCommit className="w-6 h-6 text-emerald-600 dark:text-emerald-400" />
110+
</div>
111+
112+
<div
113+
style={{ animationDelay: '0.5s' }}
114+
className="absolute top-12 right-6 bg-white dark:bg-slate-900/80 backdrop-blur-md p-3 rounded-xl border border-slate-200 dark:border-slate-800 shadow-md dark:shadow-lg z-20 animate-bounce"
115+
>
116+
<GitPullRequest className="w-6 h-6 text-purple-600 dark:text-purple-400" />
117+
</div>
118+
119+
{/* Subtle Neon Center Glow */}
120+
<div className="absolute inset-0 m-auto w-64 h-64 bg-cyan-400/10 dark:bg-cyan-500/20 rounded-full blur-[80px] z-0 pointer-events-none" />
27121
</div>
122+
28123
</div>
29124
</div>
30125
</section>
31126
);
32127
};
33128

34-
export default Hero;
129+
export default Hero;

0 commit comments

Comments
 (0)