feat: Modern UI redesign with Next.js 15 + shadcn/ui for key sections #47
Conversation
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Pull request overview
This pull request implements a modern UI redesign for the Keploy Writers Program website using Next.js 15, React 19, and shadcn/ui components. The redesign updates the site with a clean, contemporary design matching Keploy.io's design language, featuring improved visual hierarchy, accessibility enhancements, and responsive layouts.
Key Changes:
- Migration to Next.js 15.1.3 with React 19 and TypeScript configuration
- Implementation of shadcn/ui component library for consistent UI patterns
- Four redesigned sections: program offers, workflow, evaluation criteria, and content guidelines
- Enhanced accessibility with ARIA labels and semantic HTML
- Modern styling with Tailwind CSS and custom Keploy branding
Reviewed changes
Copilot reviewed 31 out of 164 changed files in this pull request and generated 36 comments.
Show a summary per file
| File | Description |
|---|---|
| package.json | Defines Next.js 15.1.3, React 19, shadcn/ui dependencies and project scripts |
| tsconfig.json | TypeScript configuration for Next.js with strict mode and path aliases |
| tailwind.config.ts | Tailwind configuration with Keploy brand colors and shadcn/ui theme extension |
| postcss.config.js | PostCSS configuration for Tailwind and autoprefixer |
| src/lib/utils.ts | Utility function for merging Tailwind classes |
| src/components/ui/*.tsx | Reusable shadcn/ui components (card, button, accordion) |
| src/app/layout.tsx | Root layout with metadata and Inter font configuration |
| src/app/globals.css | Global styles with Montserrat fonts, Keploy design tokens, and animations |
| src/app/page.tsx | Main page composition with all redesigned sections and footer |
| src/components/Header.tsx | Responsive navigation with mobile menu and GitHub stars badge |
| src/components/sections/HeroSection.tsx | Hero section with CTA buttons and Keploy bunny mascot |
| src/components/sections/AboutSection.tsx | About section introducing Keploy |
| src/components/sections/OffersSection.tsx | Three-card layout showing program benefits |
| src/components/sections/FlowSection.tsx | Six-step timeline showing program workflow |
| src/components/sections/CriteriaSection.tsx | Dark space-themed evaluation criteria with animated stars |
| src/components/sections/GuidelinesSection.tsx | Four-card grid linking to SEO guidelines |
| src/components/sections/CommunitySection.tsx | Community CTA with space background |
| public/images/* | New images, icons, and testimonial photos |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Signed-off-by: Gauarv Chaudhary <[email protected]>
ANAMASGARD
force-pushed
the
feat/modern-ui-components-3071
branch
from
1579bd8 to
f1d9826
Compare
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 19 out of 81 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 19 out of 81 changed files in this pull request and generated no new comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
I have read the CLA document and I hereby sign the CLA |
- Add hamburger menu with slide-in navigation panel - Add right-side social icons with hover tooltips (Slack, X, YouTube, LinkedIn, GitHub) - Update Hero section with exact wording from old website - Add orange underline to 'Writers Program' title - Increase icon sizes in Offers and Flow sections - Add dynamic GitHub stars count in header Closes #3071 Signed-off-by: Gauarv Chaudhary <[email protected]>
ANAMASGARD
force-pushed
the
feat/modern-ui-components-3071
branch
from
66ee5de to
63e0439
Compare
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 20 out of 82 changed files in this pull request and generated 5 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- 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 <[email protected]>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 20 out of 82 changed files in this pull request and generated no new comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
1 participant
Description
Redesigned the Writers Program website with modern UI components using Next.js 15 + shadcn/ui, matching the Keploy.io design language.
Sections Redesigned:
Tech Stack: Next.js 15.1.3, React 19, shadcn/ui, Tailwind CSS, Lucide React
Fixes keploy/keploy#3071
Type of change
ScreenShots
![Hero Section]
![Offers Section]
![Evaluation Criteria]
![Guidelines Section]
How Has This Been Tested?
npm install npm run dev # Open http://localhost:3000