Skip to content

Commit a99b22f

Browse files
ANAMASGARDANAMASGARD
committed
fix: address Copilot review feedback
- Remove unused imports (ArrowRight, Users) from HeroSection - Remove invalid next.revalidate option from client-side fetch in Header - Change CardTitle to use semantic h3 element for accessibility - Remove suppressHydrationWarning from html/body in layout - Extract star animation CSS to globals.css (DRY principle) Signed-off-by: Gauarv Chaudhary <chaudharygaurav2004@gmail.com>
1 parent 63e0439 commit a99b22f

7 files changed

Lines changed: 65 additions & 107 deletions

File tree

‎src/app/globals.css‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -188,4 +188,64 @@ html {
188188
html {
189189
scroll-behavior: auto;
190190
}
191+
}
192+
193+
/* Star Animation Layers - Used in CriteriaSection and CommunitySection */
194+
.stars-layer-1,
195+
.stars-layer-2,
196+
.stars-layer-3 {
197+
position: absolute;
198+
top: 0;
199+
left: 0;
200+
right: 0;
201+
bottom: 0;
202+
width: 100%;
203+
height: 100%;
204+
}
205+
206+
.stars-layer-1 {
207+
background-image: radial-gradient(2px 2px at 20px 30px, white, transparent),
208+
radial-gradient(2px 2px at 40px 70px, rgba(255, 255, 255, 0.8), transparent),
209+
radial-gradient(1px 1px at 90px 40px, white, transparent),
210+
radial-gradient(2px 2px at 160px 120px, rgba(255, 255, 255, 0.6), transparent),
211+
radial-gradient(1px 1px at 230px 80px, white, transparent),
212+
radial-gradient(2px 2px at 300px 150px, rgba(255, 255, 255, 0.7), transparent),
213+
radial-gradient(1px 1px at 370px 60px, white, transparent),
214+
radial-gradient(2px 2px at 440px 200px, rgba(255, 255, 255, 0.5), transparent);
215+
background-size: 500px 300px;
216+
animation: twinkle 4s ease-in-out infinite;
217+
}
218+
219+
.stars-layer-2 {
220+
background-image: radial-gradient(1px 1px at 50px 150px, rgba(255, 255, 255, 0.6), transparent),
221+
radial-gradient(2px 2px at 120px 80px, white, transparent),
222+
radial-gradient(1px 1px at 200px 200px, rgba(255, 255, 255, 0.8), transparent),
223+
radial-gradient(2px 2px at 280px 50px, rgba(255, 255, 255, 0.5), transparent),
224+
radial-gradient(1px 1px at 360px 180px, white, transparent),
225+
radial-gradient(2px 2px at 420px 100px, rgba(255, 255, 255, 0.7), transparent);
226+
background-size: 450px 350px;
227+
animation: twinkle 5s ease-in-out infinite;
228+
animation-delay: 1s;
229+
}
230+
231+
.stars-layer-3 {
232+
background-image: radial-gradient(1px 1px at 80px 100px, rgba(248, 149, 89, 0.6), transparent),
233+
radial-gradient(2px 2px at 180px 250px, rgba(248, 149, 89, 0.4), transparent),
234+
radial-gradient(1px 1px at 320px 150px, rgba(248, 149, 89, 0.5), transparent),
235+
radial-gradient(2px 2px at 450px 80px, rgba(248, 149, 89, 0.3), transparent);
236+
background-size: 550px 400px;
237+
animation: twinkle 6s ease-in-out infinite;
238+
animation-delay: 2s;
239+
}
240+
241+
@keyframes twinkle {
242+
243+
0%,
244+
100% {
245+
opacity: 0.5;
246+
}
247+
248+
50% {
249+
opacity: 1;
250+
}
191251
}

‎src/app/layout.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@ export default function RootLayout({
2424
children: React.ReactNode;
2525
}) {
2626
return (
27-
<html lang="en" className="scroll-smooth" suppressHydrationWarning>
28-
<body className={inter.className} suppressHydrationWarning>{children}</body>
27+
<html lang="en" className="scroll-smooth">
28+
<body className={inter.className}>{children}</body>
2929
</html>
3030
);
3131
}

‎src/components/Header.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,6 @@ function useGitHubStars(owner: string, repo: string): string {
3434
headers: {
3535
'Accept': 'application/vnd.github.v3+json',
3636
},
37-
// Cache for 1 hour to avoid rate limiting
38-
next: { revalidate: 3600 }
3937
}
4038
);
4139

‎src/components/sections/CommunitySection.tsx‎

Lines changed: 0 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -28,53 +28,6 @@ export function CommunitySection() {
2828
<div className="absolute bottom-1/3 right-1/3 w-72 h-72 bg-blue-500/5 rounded-full blur-[80px] animate-pulse" style={{ animationDelay: '1.5s' }} />
2929
</div>
3030

31-
{/* CSS for stars */}
32-
<style jsx>{`
33-
.stars-layer-1, .stars-layer-2, .stars-layer-3 {
34-
position: absolute;
35-
top: 0;
36-
left: 0;
37-
right: 0;
38-
bottom: 0;
39-
width: 100%;
40-
height: 100%;
41-
}
42-
.stars-layer-1 {
43-
background-image:
44-
radial-gradient(2px 2px at 30px 50px, white, transparent),
45-
radial-gradient(2px 2px at 80px 120px, rgba(255,255,255,0.8), transparent),
46-
radial-gradient(1px 1px at 150px 80px, white, transparent),
47-
radial-gradient(2px 2px at 220px 160px, rgba(255,255,255,0.6), transparent),
48-
radial-gradient(1px 1px at 300px 100px, white, transparent),
49-
radial-gradient(2px 2px at 380px 200px, rgba(255,255,255,0.7), transparent);
50-
background-size: 450px 300px;
51-
animation: twinkle 4s ease-in-out infinite;
52-
}
53-
.stars-layer-2 {
54-
background-image:
55-
radial-gradient(1px 1px at 60px 180px, rgba(255,255,255,0.6), transparent),
56-
radial-gradient(2px 2px at 140px 100px, white, transparent),
57-
radial-gradient(1px 1px at 240px 240px, rgba(255,255,255,0.8), transparent),
58-
radial-gradient(2px 2px at 320px 70px, rgba(255,255,255,0.5), transparent);
59-
background-size: 400px 320px;
60-
animation: twinkle 5s ease-in-out infinite;
61-
animation-delay: 1s;
62-
}
63-
.stars-layer-3 {
64-
background-image:
65-
radial-gradient(1px 1px at 100px 130px, rgba(248,149,89,0.5), transparent),
66-
radial-gradient(2px 2px at 200px 280px, rgba(248,149,89,0.4), transparent),
67-
radial-gradient(1px 1px at 350px 180px, rgba(248,149,89,0.5), transparent);
68-
background-size: 500px 380px;
69-
animation: twinkle 6s ease-in-out infinite;
70-
animation-delay: 2s;
71-
}
72-
@keyframes twinkle {
73-
0%, 100% { opacity: 0.4; }
74-
50% { opacity: 1; }
75-
}
76-
`}</style>
77-
7831
<div className="max-w-4xl mx-auto text-center relative z-10">
7932
{/* Badge */}
8033
<div className="inline-flex items-center gap-2 px-4 py-2 bg-white/5 border border-white/10 rounded-full mb-8 backdrop-blur-sm">

‎src/components/sections/CriteriaSection.tsx‎

Lines changed: 0 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -79,58 +79,6 @@ export function CriteriaSection() {
7979
<div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-purple-500/5 rounded-full blur-[80px] animate-pulse" style={{ animationDelay: '2s' }} />
8080
</div>
8181

82-
{/* CSS for stars - inline styles */}
83-
<style jsx>{`
84-
.stars-layer-1, .stars-layer-2, .stars-layer-3 {
85-
position: absolute;
86-
top: 0;
87-
left: 0;
88-
right: 0;
89-
bottom: 0;
90-
width: 100%;
91-
height: 100%;
92-
}
93-
.stars-layer-1 {
94-
background-image:
95-
radial-gradient(2px 2px at 20px 30px, white, transparent),
96-
radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
97-
radial-gradient(1px 1px at 90px 40px, white, transparent),
98-
radial-gradient(2px 2px at 160px 120px, rgba(255,255,255,0.6), transparent),
99-
radial-gradient(1px 1px at 230px 80px, white, transparent),
100-
radial-gradient(2px 2px at 300px 150px, rgba(255,255,255,0.7), transparent),
101-
radial-gradient(1px 1px at 370px 60px, white, transparent),
102-
radial-gradient(2px 2px at 440px 200px, rgba(255,255,255,0.5), transparent);
103-
background-size: 500px 300px;
104-
animation: twinkle 4s ease-in-out infinite;
105-
}
106-
.stars-layer-2 {
107-
background-image:
108-
radial-gradient(1px 1px at 50px 150px, rgba(255,255,255,0.6), transparent),
109-
radial-gradient(2px 2px at 120px 80px, white, transparent),
110-
radial-gradient(1px 1px at 200px 200px, rgba(255,255,255,0.8), transparent),
111-
radial-gradient(2px 2px at 280px 50px, rgba(255,255,255,0.5), transparent),
112-
radial-gradient(1px 1px at 360px 180px, white, transparent),
113-
radial-gradient(2px 2px at 420px 100px, rgba(255,255,255,0.7), transparent);
114-
background-size: 450px 350px;
115-
animation: twinkle 5s ease-in-out infinite;
116-
animation-delay: 1s;
117-
}
118-
.stars-layer-3 {
119-
background-image:
120-
radial-gradient(1px 1px at 80px 100px, rgba(248,149,89,0.6), transparent),
121-
radial-gradient(2px 2px at 180px 250px, rgba(248,149,89,0.4), transparent),
122-
radial-gradient(1px 1px at 320px 150px, rgba(248,149,89,0.5), transparent),
123-
radial-gradient(2px 2px at 450px 80px, rgba(248,149,89,0.3), transparent);
124-
background-size: 550px 400px;
125-
animation: twinkle 6s ease-in-out infinite;
126-
animation-delay: 2s;
127-
}
128-
@keyframes twinkle {
129-
0%, 100% { opacity: 0.5; }
130-
50% { opacity: 1; }
131-
}
132-
`}</style>
133-
13482
<div className="max-w-5xl mx-auto relative z-10">
13583
<div className="text-center mb-16">
13684
<div className="inline-flex items-center gap-2 px-4 py-2 bg-white/5 border border-white/10 rounded-full mb-6 backdrop-blur-sm">

‎src/components/sections/HeroSection.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22

33
import { Button } from "@/components/ui/button";
44
import Image from "next/image";
5-
import { ArrowRight, Users } from "lucide-react";
65

76
export function HeroSection() {
87
return (

‎src/components/ui/card.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,10 @@ const CardHeader = React.forwardRef<
3030
CardHeader.displayName = "CardHeader"
3131

3232
const CardTitle = React.forwardRef<
33-
HTMLDivElement,
34-
React.HTMLAttributes<HTMLDivElement>
33+
HTMLHeadingElement,
34+
React.HTMLAttributes<HTMLHeadingElement>
3535
>(({ className, ...props }, ref) => (
36-
<div
36+
<h3
3737
ref={ref}
3838
className={cn("font-semibold leading-none tracking-tight", className)}
3939
{...props}

0 commit comments

Comments
 (0)