Modern Contrast landing page #1343
Conversation
- Redesigned LandingPage.tsx with cyberpunk aesthetic (hero, features, CTA sections) - Added interactive 3D constellation particle network via ParticleBackground.tsx - Created CustomCursor.tsx with neon glow trail effect - Updated globals.css with scrollbar, glow animations, and cursor styles - Minor Footer.tsx styling updates for dark theme consistency
Pranav-chaudhari-2006
requested a review
from Priyanshu-byte-coder
as a code owner
|
@Pranav-chaudhari-2006 is attempting to deploy a commit to the PRIYANSHU DOSHI's projects Team on Vercel. A member of the Team first needs to authorize it. |
github-actions
Bot
added
gssoc26
GSSoC Label Checklist 🏷️@Priyanshu-byte-coder — please apply the appropriate labels before merging: Difficulty (pick one):
Quality (optional):
Validation (required to score):
|
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Thanks for your first PR on DevTrack! 🎉
A maintainer will review it within 48 hours. While you wait:
- Make sure CI is passing (type-check + lint)
- Double-check the PR description is filled out and the issue is linked
- Feel free to ask questions in Discussions if you need help
If you find DevTrack useful, a ⭐ star on the repo is always appreciated — it helps the project grow and attract more contributors!
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Updates the landing experience with a more “cinematic” UI: adds a custom cursor, upgrades the particle background to an interactive 3D constellation/HUD effect, and adjusts landing/footer styling to match the new theme.
Changes:
- Added a global custom cursor for the landing page and hid the native cursor within
.lnd-root. - Reworked
ParticleBackgroundinto a 3D constellation scene with gesture rotation/zoom, sparkles, HUD rings, and overlays. - Updated landing page widgets/colors/layout and removed the landing-specific footer in favor of the global
Footerwith landing-aware styling.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 12 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/landing/LandingPage.tsx | Adds CustomCursor, refines landing widgets styling, removes landing-only footer. |
| src/components/ParticleBackground.tsx | Major animation rewrite to interactive 3D constellation + overlays and new input handlers. |
| src/components/Footer.tsx | Makes footer landing-aware (transparent styling on /). |
| src/components/CustomCursor.tsx | New component rendering dot/ring cursor with hover detection. |
| src/app/globals.css | Tailwind directive change, landing-specific background/cursor rules, upgraded bento cell styling. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| @import "tailwindcss/base"; | ||
| @import "tailwindcss/components"; | ||
| @import "tailwindcss/utilities"; |
| /* Strip body background on landing page so the particle canvas (z-index: 0) is visible */ | ||
| body:has(.lnd-root) { |
| .lnd-root, | ||
| .lnd-root * { | ||
| cursor: none !important; |
| // Check if user is hovering over interactive components | ||
| const onMouseOver = (e: MouseEvent) => { | ||
| const target = e.target as HTMLElement; | ||
| if ( | ||
| target && | ||
| (target.closest("a") || | ||
| target.closest("button") || | ||
| target.closest(".lnd-cell") || | ||
| target.closest(".lnd-cta-primary") || | ||
| target.closest(".lnd-cta-secondary") || | ||
| target.closest(".lnd-nav-link") || | ||
| target.style.cursor === "pointer") | ||
| ) { | ||
| setIsHovered(true); | ||
| } else { | ||
| setIsHovered(false); | ||
| } | ||
| }; |
| useEffect(() => { | ||
| setMounted(true); |
| grad.addColorStop(1, "rgba(0,0,0,0)"); | ||
| const cx = canvas.width / 2; | ||
| const cy = canvas.height / 2; | ||
| scopeRotation += 1; |
| p.life -= 0.024; | ||
| p.x += p.vx; | ||
| p.y += p.vy; | ||
| p.vx *= 0.96; | ||
| p.vy *= 0.96; | ||
| p.vy -= 0.01; | ||
|
|
| shootingStars.forEach((s) => { | ||
| s.life -= 0.015; |
| "use client"; | ||
|
|
||
| import Link from "next/link"; | ||
| import { usePathname } from "next/navigation"; | ||
|
|
||
| const year = new Date().getFullYear(); | ||
|
|
||
| export default function Footer() { | ||
| const pathname = usePathname(); | ||
| const isLanding = pathname === "/"; | ||
|
|
| "use client"; | ||
|
|
||
| import Link from "next/link"; | ||
| import { usePathname } from "next/navigation"; | ||
|
|
||
| const year = new Date().getFullYear(); | ||
|
|
||
| export default function Footer() { | ||
| const pathname = usePathname(); | ||
| const isLanding = pathname === "/"; | ||
|
|
|
Thanks @Pranav-chaudhari-2006! The particle background and full redesign look creative, but this is too large a change to the landing page architecture — it conflicts with other improvements already in progress (#1355 merged, #1354, etc.). A full landing page redesign would need to be scoped carefully and coordinated with other active PRs. Consider breaking it down: (1) open a smaller PR for just the color/contrast changes, (2) a separate PR for the ParticleBackground component as an opt-in addition. Happy to review those! |
Ok , I will look upon it and create the PR according to the requirement asap. |
✨feat: Futuristic Landing Page Redesign
Overview
Redesigned the DevTrack public landing page with a modern minimal-cyberpunk aesthetic
inspired by Linear, Vercel, and Raycast. Focused on a premium dark-mode developer
experience with strong visual hierarchy and clean UI accents.
Changes Made
src/components/landing/LandingPage.tsx— Full Redesignand a mock terminal/dashboard UI panel on the right
subtle hover effects
#050505base, electric cyan/purple accent tonessrc/components/CustomCursor.tsx(New File)src/app/globals.css— Global Style Updatessrc/components/Footer.tsx— Minor Theme Fix🧪How to Test
git checkout feat/futuristic-landing-pagenpm install && npm run devhttp://localhost:3000📌Notes
🖼️Screenshots