Skip to content

Commit 3b5bcf0

Browse files
mehul-m-prajapatimehul-m-prajapati
authored
Merge pull request #476 from shreyasingh260/main
fix: improve hero section alignment and responsiveness
2 parents 2d0da17 + 9761ec0 commit 3b5bcf0

1 file changed

Lines changed: 94 additions & 79 deletions

File tree

‎src/components/Hero.tsx‎

Lines changed: 94 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -5,38 +5,45 @@ const MATRIX_CELLS = Array.from({ length: 21 }, (_, i) => i);
55

66
const Hero = () => {
77
return (
8-
<section className="relative flex min-h-[88vh] items-center overflow-hidden bg-slate-50 px-6 py-12 text-slate-900 transition-colors duration-500 dark:bg-[#030712] dark:text-white sm:py-16 lg:py-20">
9-
<div className="absolute inset-0 pointer-events-none bg-[linear-gradient(to_right,#e2e8f0_1px,transparent_1px),linear-gradient(to_bottom,#e2e8f0_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_70%_55%_at_50%_0%,#000_72%,transparent_100%)] dark:bg-[linear-gradient(to_right,#1f293710_1px,transparent_1px),linear-gradient(to_bottom,#1f293710_1px,transparent_1px)]" />
10-
<div className="absolute top-1/4 left-1/4 h-[500px] w-[500px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-blue-400/10 blur-[120px] pointer-events-none dark:bg-blue-500/10" />
11-
<div className="absolute bottom-1/4 right-1/4 h-[600px] w-[600px] translate-x-1/2 translate-y-1/2 rounded-full bg-cyan-400/10 blur-[160px] pointer-events-none dark:bg-cyan-500/10" />
12-
<div className="absolute -bottom-24 left-1/2 h-[220px] w-[720px] -translate-x-1/2 rounded-full bg-gradient-to-r from-blue-400/10 via-cyan-400/10 to-teal-400/10 blur-[90px] pointer-events-none" />
13-
14-
<div className="relative z-10 mx-auto w-full max-w-7xl">
15-
<div className="grid grid-cols-1 items-center gap-8 xl:gap-12 lg:grid-cols-12">
16-
<div className="mx-auto max-w-2xl space-y-5 text-left lg:col-span-5 lg:mx-0 lg:pt-2">
17-
<div className="inline-flex items-center gap-2 rounded-full border border-slate-200/80 bg-white/75 px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-600 shadow-sm backdrop-blur-md dark:border-slate-800/80 dark:bg-slate-900/60 dark:text-slate-300">
18-
<span className="h-2 w-2 rounded-full bg-cyan-500 shadow-[0_0_16px_rgba(34,211,238,0.8)]" />
19-
GitHub activity, refined
20-
</div>
21-
22-
<div className="space-y-1.5">
23-
<h1 className="text-4xl font-extrabold tracking-tight leading-[0.92] text-slate-900 sm:text-[3.15rem] xl:text-[4rem] dark:text-slate-100">
24-
Track GitHub Activity
25-
<span className="mt-1.5 block bg-gradient-to-r from-blue-600 via-cyan-500 to-teal-500 bg-clip-text text-transparent [filter:drop-shadow(0_0_30px_rgba(56,189,248,0.3))] dark:from-blue-400 dark:via-cyan-400 dark:to-teal-400">
26-
In Real Time
27-
</span>
28-
</h1>
29-
</div>
30-
31-
<p className="max-w-lg text-base leading-relaxed text-slate-600 md:text-[1.05rem] dark:text-slate-400">
32-
Track, compare, and review GitHub activity at a glance.
8+
<section className="relative overflow-hidden bg-slate-50 dark:bg-[#030712] text-slate-900 dark:text-white px-6 py-16 md:py-20 lg:py-24 flex items-center transition-colors duration-500">
9+
10+
{/* Background Grid */}
11+
<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_70%_60%_at_50%_0%,#000_70%,transparent_100%)] pointer-events-none" />
12+
13+
{/* Glow Effects */}
14+
<div className="absolute top-20 left-10 w-72 h-72 bg-blue-400/10 rounded-full blur-[100px] pointer-events-none" />
15+
<div className="absolute bottom-10 right-10 w-80 h-80 bg-cyan-400/10 rounded-full blur-[120px] pointer-events-none" />
16+
17+
<div className="relative z-10 max-w-7xl mx-auto w-full">
18+
19+
<div className="grid grid-cols-1 lg:grid-cols-2 gap-14 items-center">
20+
21+
{/* LEFT SIDE */}
22+
<div className="space-y-7 text-center lg:text-left">
23+
24+
<h1 className="text-4xl md:text-5xl xl:text-6xl font-extrabold leading-tight">
25+
Track GitHub Activity
26+
<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">
27+
Like Never Before
28+
</span>
29+
</h1>
30+
31+
<p className="text-base md:text-lg text-slate-600 dark:text-slate-400 leading-relaxed max-w-xl mx-auto lg:mx-0">
32+
Monitor and analyze GitHub user activity with powerful insights.
33+
Perfect for developers, project managers, and teams who want to
34+
understand contribution patterns and repository engagement.
3335
</p>
3436

35-
<div className="flex flex-wrap items-center gap-3 pt-1">
36-
<Link to="/track" className="group relative inline-flex items-center justify-center overflow-hidden rounded-xl bg-gradient-to-br from-blue-600 via-cyan-500 to-teal-500 p-0.5 text-sm font-semibold text-slate-900 shadow-md transition-all hover:-translate-y-0.5 hover:shadow-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-50 dark:from-blue-500 dark:via-cyan-400 dark:to-teal-400 dark:text-white dark:shadow-[0_0_20px_rgba(59,130,246,0.3)] dark:hover:shadow-[0_0_35px_rgba(34,211,238,0.5)] dark:focus-visible:ring-offset-[#030712]">
37-
<span className="relative flex items-center space-x-2 rounded-[10px] bg-white px-6 py-3 transition-all duration-75 ease-in group-hover:bg-opacity-0 dark:bg-[#030712]">
38-
<Search className="h-5 w-5 text-blue-600 transition-colors group-hover:text-white dark:text-cyan-400" />
39-
<span className="text-slate-900 group-hover:text-white dark:text-white">Start Tracking</span>
37+
<div className="flex justify-center lg:justify-start">
38+
<Link
39+
to="/track"
40+
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 text-white transition-all shadow-lg hover:scale-105 duration-300"
41+
>
42+
<span className="relative px-7 py-3.5 bg-white dark:bg-[#030712] rounded-[10px] flex items-center gap-2 group-hover:bg-transparent transition-all duration-300">
43+
<Search className="h-5 w-5 text-blue-600 dark:text-cyan-400 group-hover:text-white" />
44+
<span className="text-slate-900 dark:text-white group-hover:text-white">
45+
Start Tracking
46+
</span>
4047
</span>
4148
</Link>
4249

@@ -61,58 +68,70 @@ const Hero = () => {
6168
</div>
6269
</div>
6370

64-
<div className="relative flex min-h-[400px] items-center justify-center lg:col-span-7 md:min-h-[500px] xl:min-h-[560px]">
65-
<div className="relative z-10 w-full max-w-lg rounded-[1.75rem] border border-slate-200 bg-white/70 p-4.5 shadow-xl backdrop-blur-xl transition-transform duration-500 hover:scale-[1.02] dark:border-slate-800 dark:bg-slate-900/60 dark:shadow-2xl dark:shadow-cyan-950/20 sm:p-5">
66-
<div className="mb-4 flex items-center justify-between border-b border-slate-200 pb-3.5 dark:border-slate-800/60">
67-
<div className="flex items-center space-x-2">
68-
<Layout className="h-5 w-5 text-blue-600 dark:text-blue-400" />
69-
<span className="text-sm font-medium text-slate-700 dark:text-slate-300">Dashboard Insights</span>
71+
{/* RIGHT SIDE */}
72+
<div className="relative flex justify-center items-center">
73+
74+
{/* Dashboard Card */}
75+
<div className="relative w-full max-w-md bg-white/80 dark:bg-slate-900/70 backdrop-blur-xl border border-slate-200 dark:border-slate-800 rounded-2xl p-6 shadow-2xl">
76+
77+
{/* Header */}
78+
<div className="flex items-center justify-between border-b border-slate-200 dark:border-slate-800 pb-4 mb-6">
79+
<div className="flex items-center gap-2">
80+
<Layout className="w-5 h-5 text-blue-600 dark:text-blue-400" />
81+
<span className="text-sm font-medium">
82+
Dashboard Insights
83+
</span>
7084
</div>
71-
<div className="flex space-x-1.5">
72-
<span className="h-2.5 w-2.5 rounded-full bg-red-400 dark:bg-red-500/60"></span>
73-
<span className="h-2.5 w-2.5 rounded-full bg-yellow-400 dark:bg-yellow-500/60"></span>
74-
<span className="h-2.5 w-2.5 rounded-full bg-green-400 dark:bg-green-500/60"></span>
85+
86+
<div className="flex gap-1.5">
87+
<span className="w-2.5 h-2.5 rounded-full bg-red-400"></span>
88+
<span className="w-2.5 h-2.5 rounded-full bg-yellow-400"></span>
89+
<span className="w-2.5 h-2.5 rounded-full bg-green-400"></span>
7590
</div>
7691
</div>
7792

78-
<div className="space-y-3.5">
79-
<div className="grid grid-cols-2 gap-3.5">
80-
<div className="rounded-xl border border-slate-200/60 bg-slate-100/80 p-3.5 dark:border-slate-800/40 dark:bg-slate-950/80">
81-
<div className="mb-1 text-xs font-semibold uppercase tracking-wider text-slate-500">Weekly Commits</div>
82-
<div className="text-2xl font-bold text-slate-800 dark:text-slate-200">
83-
176 <span className="ml-1 text-xs font-normal text-emerald-600 dark:text-emerald-400">+12%</span>
84-
</div>
85-
<div className="mt-2.5 h-1.5 w-full overflow-hidden rounded-full bg-slate-200 dark:bg-slate-800">
86-
<div className="h-full w-[70%] rounded-full bg-gradient-to-r from-blue-600 to-cyan-500 dark:from-blue-500 dark:to-cyan-400 animate-pulse motion-reduce:animate-none motion-reduce:transition-none" />
87-
</div>
93+
{/* Stats */}
94+
<div className="space-y-5">
95+
96+
<div className="bg-slate-100 dark:bg-slate-950 p-4 rounded-xl border border-slate-200 dark:border-slate-800">
97+
<div className="text-xs uppercase tracking-wider text-slate-500 mb-1">
98+
Weekly Commits
8899
</div>
89100

90-
<div className="flex flex-col justify-between rounded-xl border border-slate-200/60 bg-slate-100/80 p-3.5 dark:border-slate-800/40 dark:bg-slate-950/80">
91-
<div>
92-
<div className="mb-1 text-xs font-semibold uppercase tracking-wider text-slate-500">Active Repos</div>
93-
<div className="text-2xl font-bold text-slate-800 dark:text-slate-200">24</div>
94-
</div>
95-
<div className="flex items-center gap-2 text-xs font-semibold text-cyan-600 dark:text-cyan-400">
96-
<span className="h-2 w-2 rounded-full bg-cyan-500 animate-pulse motion-reduce:animate-none motion-reduce:transition-none" />
97-
Updating now
98-
</div>
101+
<div className="text-2xl font-bold">
102+
176
103+
<span className="ml-2 text-sm text-emerald-500">
104+
+12%
105+
</span>
106+
</div>
107+
108+
<div className="w-full bg-slate-200 dark:bg-slate-800 h-1.5 rounded-full mt-3 overflow-hidden">
109+
<div className="bg-gradient-to-r from-blue-600 to-cyan-500 h-full w-[70%] rounded-full"></div>
99110
</div>
100111
</div>
101112

102-
<div className="rounded-xl border border-slate-200/60 bg-slate-100/80 p-3.5 dark:border-slate-800/40 dark:bg-slate-950/80">
103-
<div className="mb-2 text-xs font-semibold uppercase tracking-wider text-slate-500">Contribution Matrix</div>
104-
<div className="grid w-max grid-cols-7 gap-1.5">
105-
{MATRIX_CELLS.map((cellIndex) => {
106-
const intensitiesLight = ['bg-slate-200', 'bg-emerald-200', 'bg-emerald-300', 'bg-emerald-500', 'bg-emerald-600'];
107-
const intensitiesDark = ['dark:bg-slate-800', 'dark:bg-emerald-900/60', 'dark:bg-emerald-700', 'dark:bg-emerald-500', 'dark:bg-emerald-400'];
113+
{/* Contribution Grid */}
114+
<div className="bg-slate-100 dark:bg-slate-950 p-4 rounded-xl border border-slate-200 dark:border-slate-800">
115+
<div className="text-xs uppercase tracking-wider text-slate-500 mb-3">
116+
Contribution Matrix
117+
</div>
108118

109-
const lightClass = intensitiesLight[cellIndex % intensitiesLight.length];
110-
const darkClass = intensitiesDark[cellIndex % intensitiesDark.length];
119+
<div className="grid grid-cols-7 gap-1.5 w-max">
120+
{MATRIX_CELLS.map((cellIndex) => {
121+
const intensities = [
122+
'bg-slate-200 dark:bg-slate-800',
123+
'bg-emerald-200 dark:bg-emerald-900/60',
124+
'bg-emerald-300 dark:bg-emerald-700',
125+
'bg-emerald-500',
126+
'bg-emerald-600',
127+
];
111128

112129
return (
113130
<div
114131
key={cellIndex}
115-
className={`h-3 w-3 rounded-[2px] transition-all duration-300 hover:scale-125 ${lightClass} ${darkClass}`}
132+
className={`w-3 h-3 rounded-[2px] hover:scale-125 transition-all duration-300 ${
133+
intensities[cellIndex % intensities.length]
134+
}`}
116135
/>
117136
);
118137
})}
@@ -136,28 +155,24 @@ const Hero = () => {
136155
</div>
137156
</div>
138157

139-
<div
140-
style={{ animationDelay: '0s' }}
141-
className="absolute -top-4 left-4 z-20 animate-bounce motion-reduce:animate-none motion-reduce:transition-none rounded-xl border border-slate-200 bg-white p-3 shadow-md dark:border-slate-800 dark:bg-slate-900/80 dark:shadow-lg md:left-10"
142-
>
143-
<GitBranch className="h-6 w-6 text-blue-600 dark:text-blue-400" />
158+
{/* Floating Icons */}
159+
<div className="absolute top-0 left-10 bg-white dark:bg-slate-900 p-3 rounded-xl shadow-lg animate-bounce">
160+
<GitBranch className="w-6 h-6 text-blue-500" />
144161
</div>
145162

146163
<div
164+
className="absolute bottom-10 left-0 bg-white dark:bg-slate-900 p-3 rounded-xl shadow-lg animate-bounce"
147165
style={{ animationDelay: '1s' }}
148-
className="absolute bottom-10 left-0 z-20 animate-bounce motion-reduce:animate-none motion-reduce:transition-none rounded-xl border border-slate-200 bg-white p-3 shadow-md dark:border-slate-800 dark:bg-slate-900/80 dark:shadow-lg"
149166
>
150-
<GitCommit className="h-6 w-6 text-emerald-600 dark:text-emerald-400" />
167+
<GitCommit className="w-6 h-6 text-emerald-500" />
151168
</div>
152169

153170
<div
171+
className="absolute top-14 right-4 bg-white dark:bg-slate-900 p-3 rounded-xl shadow-lg animate-bounce"
154172
style={{ animationDelay: '0.5s' }}
155-
className="absolute top-12 right-2 z-20 animate-bounce motion-reduce:animate-none motion-reduce:transition-none rounded-xl border border-slate-200 bg-white p-3 shadow-md dark:border-slate-800 dark:bg-slate-900/80 dark:shadow-lg"
156173
>
157-
<GitPullRequest className="h-6 w-6 text-purple-600 dark:text-purple-400" />
174+
<GitPullRequest className="w-6 h-6 text-purple-500" />
158175
</div>
159-
160-
<div className="absolute inset-0 m-auto h-72 w-72 rounded-full bg-cyan-400/10 blur-[90px] z-0 pointer-events-none dark:bg-cyan-500/20" />
161176
</div>
162177
</div>
163178
</div>

0 commit comments

Comments
 (0)