Improve case study cards UI#1691
Closed
Sachin-Rajakaruna wants to merge 101 commits intoChameleon-company:masterfrom
Closed
Improve case study cards UI#1691Sachin-Rajakaruna wants to merge 101 commits intoChameleon-company:masterfrom
Sachin-Rajakaruna wants to merge 101 commits intoChameleon-company:masterfrom
Conversation
…rrows, pagination dots, and optimized image sizing
…al_#dbConnection Database connection achieved in PostgreSql
…ationPlan Add MongoDB to PostgreSQL Migration Plan to the next_webapp folder
Designed DB ERD DFD and DB Schema
…ocations. Added function to display message when search is not found.
…secase_IshikaMandal Implemention Coworking_spaces.html for use case implementation
…g-usecase_IshikaMandal Wd community wellbeing usecase ishika mandal
…ecase_IshikaMandal Childcare facility usecase implementation ishika mandal
…secase_IshikaMandal Implementing urban tree planning use case
…ellbeing-Through-Public-Transport-usecase_IshikaMandal Implementing Enhancing_Community_Wellbeing_Through_Public_Transport
…case_IshikaMandal Implementing Night time safety index usecase into the web
…tions-usecase_IshikaMandal Implementing optimizing event location use case
…-Activity-usecase_IshikaMandal Population growth and activity usecase ishika mandal
…cessibility_Near_Healthcare_and_Education-usecase_IshikaMandal implementing optimizing parking accesibility use case
…diversity_Corridors_And_Heat_Vulnerability_SubUseCases Merged by Pratik WD_Frontend_Pratik#Linked_Biodiversity_Corridors_And_Heat_Vulnerability_SubUseCases
Completed Environmental Sustainability Page, updated data.ts, and added images/dummypages
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
10 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
### Overview
This pull request enhances the Use Cases card grid on the homepage by updating Insights.tsx. The changes focus on improving visual engagement, consistent layout, and user interaction across the card components.
### Changes Implemented
Introduced a categoryStyles mapping object that assigns a unique colour scheme to each use case category. Each card now displays a styled badge below the image, making categories instantly identifiable at a glance.
Applied a full card lift on hover (hover:-translate-y-1) and a smooth image zoom effect (group-hover:scale-105) using Tailwind's group utility, creating a polished and responsive feel across all cards.
Enhanced shadow behaviour from a static shadow-md to a dynamic shadow-2xl on hover, creating a strong depth effect that draws user attention to the active card.
Applied flex-grow to the description element so all cards maintain equal height regardless of content length, resolving the uneven card sizing present in the original layout.
Each card now displays a category-matched coloured border on hover, visually reinforcing the category identity already established by the badge.
The View Details button darkens on hover with an added shadow, and the arrow icon animates with a rightward slide (group-hover:translate-x-1), providing clear visual feedback to the user.
Added background colour transitions for both modes — a subtle grey tint (hover:bg-gray-100) in light mode and a slightly lighter dark shade (dark:hover:bg-[#455A64]) in dark mode — improving the hover experience across both themes.
Outcome
These improvements result in a more visually consistent and interactive Use Cases section. The addition of category badges, hover animations, and responsive styling significantly improves the user experience and visual presentation across both light and dark modes.
Improve.Case.Study.Cards.UI.mp4