Skip to content

feat: modern UI redesign with categories for govt websites - #10

Open
thenishantsapkota wants to merge 2 commits into
mainfrom
feat/modern-ui-redesign
Open

feat: modern UI redesign with categories for govt websites#10
thenishantsapkota wants to merge 2 commits into
mainfrom
feat/modern-ui-redesign

Conversation

@thenishantsapkota

Copy link
Copy Markdown
Contributor

No description provided.

@vercel

vercel Bot commented Apr 19, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
website Ready Ready Preview, Comment Jul 29, 2026 4:48am

bsantosh909
bsantosh909 previously approved these changes Jul 29, 2026

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Pull request overview

This PR modernizes the site’s UI with a new typographic system, reusable UI utility classes, and a redesigned navigation/home experience, while adding category-based filtering to the Government Websites page.

Changes:

  • Introduces new Tailwind theme tokens (fonts, shadows, animation) and global component classes (card, search-input, btn-*).
  • Redesigns Home page, navbar/footer, and layout spacing to match the updated visual system.
  • Updates Tech Companies and Government Websites pages with a refreshed search UI; adds category tabs + filtering for government websites.

Reviewed changes

Copilot reviewed 8 out of 9 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
tailwind.config.js Adds font families, new color shade, shadows, and a fade-in animation/keyframes.
src/pages/tech-companies.tsx Updates the listing UI to use new shared components and a redesigned search experience.
src/pages/homepage.tsx Replaces placeholder intro with a new hero + feature-card landing layout.
src/pages/government-websites.tsx Adds categorization + category tabs and refreshes the card/search UI.
src/layouts/default.layout.tsx Adjusts layout structure and container sizing for the new design.
src/index.css Adds base typography + reusable UI component utility classes.
src/components/app/navbar.tsx Redesigns navbar (sticky + active link styling) for the new UI.
src/components/app/footer.tsx Updates footer styling to match the new layout system.
index.html Loads Google Fonts (Inter + Space Grotesk) used by the new Tailwind font families.
Comments suppressed due to low confidence (4)

src/pages/tech-companies.tsx:88

  • The tech company logo is missing an alt attribute, which hurts screen reader accessibility. Add a meaningful alt text (or alt="" if you intentionally want it to be decorative).
                  <img
                    src={`https://raw.githubusercontent.com/Know-Nepal/tech-companies/main/logos/${company.logoName}`}
                    width={96}
                    height={96}

src/pages/government-websites.tsx:67

  • allCategories is recomputed on every render even though it only depends on data. Memoizing it avoids extra work when typing in the search box or switching tabs.
  const allCategories = [
    ...new Set(allItems.map((item) => getCategory(item.name))),
  ].sort();

src/pages/government-websites.tsx:73

  • new Fuse(allItems, …) runs on every render. For larger lists this can become noticeable when the user types; memoize the Fuse instance so it's only rebuilt when allItems changes.
  const fuse = new Fuse(allItems, {
    keys: ["name"],
    threshold: 0.3,
    ignoreLocation: true,
  });

src/pages/government-websites.tsx:144

  • This image is missing an alt attribute. If it's decorative (since the name/description are already shown), set alt="" so screen readers skip it.
                <img
                  src="/nepalLogo.png"
                  width={80}
                  height={80}

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines +68 to +71
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
placeholder="Search for tech company"
className="search-input pl-11"
Comment thread src/pages/government-websites.tsx Outdated
Comment on lines +107 to +112
type="text"
placeholder="Search for government website..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="search-input pl-11"
/>
- Add aria-label to search inputs on both list pages
- Add alt text to logo images
- Memoize Fuse instance and category list with useMemo
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants