Skip to content

fix(ui): make stats section horizontal and responsive #50

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

Open
shah0108 wants to merge 14 commits into
base: main
Choose a base branch
from
Open

fix(ui): make stats section horizontal and responsive #50

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
4c89fcd
Update index.html
shah0108 Oct 5, 2025
1ee3321
Update index.html
shah0108 Oct 5, 2025
797bf40
Update src/components/Hero.jsx
shah0108 Oct 5, 2025
45bf2d3
Update src/pages/Home.jsx
shah0108 Oct 5, 2025
1f0d39c
Update src/pages/Home.jsx
shah0108 Oct 5, 2025
1f75134
Update src/components/Hero.jsx
shah0108 Oct 5, 2025
d86bc84
Update src/components/About.jsx
shah0108 Oct 5, 2025
e3bc783
Update src/components/About.jsx
shah0108 Oct 5, 2025
cabc8e0
Update src/pages/Home.jsx
shah0108 Oct 5, 2025
b9ed228
Update src/pages/Home.jsx
shah0108 Oct 5, 2025
41103cd
Update src/components/About.jsx
shah0108 Oct 5, 2025
0fb8e37
Merge branch 'main' into stats
shah0108 Oct 6, 2025
4718474
Update src/components/About.jsx
shah0108 Oct 6, 2025
c9aaed7
Merge branch 'main' into stats
shah0108 Oct 10, 2025
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
12 changes: 2 additions & 10 deletions src/components/About.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,8 @@ export default function About() {
contributors in real-world projects.
</p>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="bg-gray-800/95 p-6 rounded-xl shadow-lg shadow-gray-900/80 text-center transition-all duration-200 hover:-translate-y-1.5 hover:shadow-xl hover:shadow-gray-900/90">
<span className="text-3xl block mb-3">🌍</span>
<h3 className="font-bold text-lg mb-2 text-white">Global Exposure</h3>
<p className="text-sm text-gray-300">
Connect with programs like <strong>LFX</strong>,{" "}
<strong>GSoC</strong>, and <strong>C4GT</strong> to contribute to
large-scale projects worldwide.
</p>
</div>

<div className="about-card">

<div className="bg-gray-800/95 p-6 rounded-xl shadow-lg shadow-gray-900/80 text-center transition-all duration-200 hover:-translate-y-1.5 hover:shadow-xl hover:shadow-gray-900/90">
<span className="text-3xl block mb-3">👩‍🏫</span>
Expand Down
52 changes: 34 additions & 18 deletions src/components/Hero.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,34 @@ export default function Hero() {
Join our vibrant community of developers, contributors, and mentors working together to build the future of technology through open source collaboration.
</p>

<div className="flex gap-3 flex-wrap mt-2.5" role="group" aria-label="Call to action">
<a className="inline-flex items-center justify-center py-2.5 px-5 rounded-xl no-underline font-semibold text-sm min-h-[44px] transition-all duration-150 bg-gradient-to-r from-blue-600 to-blue-400 text-white border-none shadow-lg shadow-blue-600/30 hover:-translate-y-1" href="#programs">Explore Programs</a>
<a
className="inline-flex items-center justify-center py-2.5 px-5 rounded-xl no-underline font-semibold text-sm min-h-[44px] transition-all duration-150 bg-white/5 text-white border-2 border-white/20 hover:-translate-y-1"
href="https://github.com/Open-Source-Kashmir"
target="_blank"
rel="noopener noreferrer"
>
Join GitHub
</a>
<a className="inline-flex items-center justify-center py-2.5 px-5 rounded-xl no-underline font-semibold text-sm min-h-[44px] transition-all duration-150 bg-white/5 text-white border-2 border-white/20 hover:-translate-y-1" href="#discord">Join Discord</a>
</div>
// At the top of src/components/Hero.jsx
import { Link } from 'react-router-dom';
import './Hero.css';

...

// In the JSX render (around lines 17–28)
Comment on lines +16 to +22
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Oct 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

Critical JSX syntax error: unescaped comments in JSX context.

Lines 16-22 contain plain JavaScript comments (// ...) in what appears to be JSX context. In JSX, comments must be wrapped in braces {/* ... */} or removed entirely. These explanatory comments will cause a syntax error during compilation.

Based on the static analysis hints from Biome, these appear to be documentation or instructional comments that should not be in the actual code. Remove these lines entirely:

-// At the top of src/components/Hero.jsx
-import { Link } from 'react-router-dom';
-import './Hero.css';
-
-...
-
-// In the JSX render (around lines 17–28)

Note: The actual imports (import { Link } from 'react-router-dom'; and import './Hero.css';) should already be at the top of the file (lines 1-2), not documented as comments here.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
// At the top of src/components/Hero.jsx
import { Link } from 'react-router-dom';
import './Hero.css';
...
// In the JSX render (around lines 17–28)
🤖 Prompt for AI Agents 
In src/components/Hero.jsx around lines 16 to 22, there are plain JavaScript
comment lines (e.g. "// ..." and similar) placed inside the JSX context which
causes a JSX syntax error; remove those inline comment lines entirely (or
convert them to proper JSX comments using {/* ... */} if you need to keep them)
and ensure only real imports remain at the top of the file (import { Link } from
'react-router-dom'; and import './Hero.css'; should be actual import statements,
not commented documentation).

<div className="hero-buttons" role="group" aria-label="Call to action">
<Link className="btn primary" to="/programs">
Explore Programs
</Link>
<a
className="btn outline"
href="https://github.com/Open-Source-Kashmir"
target="_blank"
rel="noopener noreferrer"
>
Join GitHub
</a>
<a
className="btn outline"
href="https://discord.gg/gEHBwfDX"
target="_blank"
rel="noopener noreferrer"
>
Join Discord
</a>
</div>
</div>

<div className="flex-0 basis-[360px] flex justify-center">
Expand All @@ -34,14 +50,14 @@ export default function Hero() {
<h3 className="text-base m-0 font-bold">Innovation</h3>
</div>

<div className="w-30 h-30 bg-gray-900/95 text-white rounded-2xl flex flex-col items-center justify-center shadow-xl shadow-gray-900/80 text-center p-2 transition-all duration-150 hover:-translate-y-2 hover:shadow-2xl hover:shadow-gray-900/90" role="listitem">
<div className="text-4xl mb-1" aria-hidden="true">💡</div>
<h3 className="text-base m-0 font-bold">Learning</h3>
<div className="card">
<div className="card-icon" aria-hidden="true">💡</div>
<h3 className="card-title">Learning</h3>
</div>

<div className="w-30 h-30 bg-gray-900/95 text-white rounded-2xl flex flex-col items-center justify-center shadow-xl shadow-gray-900/80 text-center p-2 transition-all duration-150 hover:-translate-y-2 hover:shadow-2xl hover:shadow-gray-900/90" role="listitem">
<div className="text-4xl mb-1" aria-hidden="true">🤝</div>
<h3 className="text-base m-0 font-bold">Collaboration</h3>
<div className="card">
<div className="card-icon" aria-hidden="true">🤝</div>
<h3 className="card-title">Collaboration</h3>
</div>
</div>
</div>
Expand Down