Updated DevRel website theme to match main website #34

ayushman31 · 2025-02-14T19:26:42Z

Rewrite Landing Page with TypeScript and NextJS

Summary

This PR rewrites the landing page using TypeScript to improve type safety, maintainability, and performance. The rewrite includes updates to the component structure, styling with dark mode, and interactions to enhance user experience.

✅ Pull Request Checklist

🎨 UI/UX Analysis

Analyzed the main website’s design (colors, fonts, buttons, layouts).
Documented key design elements for reference.

💅 Styling Updates

Updated DevRel website’s styles (CSS, Tailwind, or relevant framework) to match the main website.
Ensured color schemes, typography, and spacing align with the main website.

🌙 Dark Mode & Responsiveness

Implemented dark mode correctly.
Ensured full responsiveness across different screen sizes.

🔄 Component Replacement

Replaced outdated UI components with consistent buttons, cards, navigation menus, and headers.
Used the same assets as the DevRel website update to maintain uniformity.

🖼️ Branding & Optimization

Optimized images and icons to reflect branding.

🧪 Testing & Feedback

Reviewed and tested the updated design across desktop and mobile.
Gathered feedback and made necessary improvements.

Fixes # (issue)
PR for following issue: keploy/keploy#2535

Changes Made

TypeScript Integration: Converted all JavaScript files to TypeScript, adding type annotations for better type checking and error prevention.
Component Refactor: Refactored components to follow best practices, ensuring modularity and reusability.
Styling Updates: Updated styles to align with modern design principles and improved responsiveness.
Dark Mode: Added dark mode with theming.
Performance Optimizations: Implemented performance optimizations, such as lazy loading and code splitting, to reduce load times.
Added Animations: Incorporated animations to create a more dynamic and engaging user experience. Animations include transitions, hover effects, and interactive elements.

Key Benefits

Improved Type Safety: TypeScript's static typing helps catch errors early in the development process.
Enhanced Maintainability: The refactored codebase is easier to maintain and extend.
Better Performance: Optimizations lead to faster load times and smoother user interactions.

Testing

Manual Testing: Performed manual testing on various devices and browsers to ensure compatibility and responsiveness.

Screenshots

Notes

Please review the changes and provide feedback.
Ensure to test the landing page in different environments to confirm compatibility.

Fixes # (issue)
PR for following issue: keploy/keploy#2535

Signed-off-by: Ayushman Singh <ayushmans012@gmail.com>

ayushman31 · 2025-03-19T09:56:07Z

I have read the CLA Document and I hereby sign the CLA.

TvisharajiK · 2025-03-27T08:05:15Z

Hey @ayushman31 Can you change the buttons and theme to match the current keploy website?

Signed-off-by: Ayushman Singh <ayushmans012@gmail.com>

ayushman31 · 2025-03-28T05:00:14Z

hey @TvisharajiK , I have updated the design to ensure consistency.

2025-03-28.10-26-03.mp4

Please review it and let me know if any changes are needed.
Thank you. 😊

TvisharajiK · 2025-04-03T11:38:47Z

Hey @ayushman31 Can we have the star next to the github icon removed?

Signed-off-by: Ayushman Singh <ayushmans012@gmail.com>

ayushman31 · 2025-04-03T18:51:00Z

hey @TvisharajiK , i have made the required changes.

Please review it and let me know if any changes are needed.
Thank you. 😊

amaan-bhati · 2025-04-05T19:11:33Z

Hey @ayushman31 looks good to me, just comment out the newsletter section, team will review and decide on the design before merging or closing.

Signed-off-by: Ayushman Singh <ayushmans012@gmail.com>

ayushman31 · 2025-04-09T12:31:08Z

hey @amaan-bhati @TvisharajiK , i have made all the necessary changes. please review it and let me know if any changes are needed.
Thankyou. 😊

keploy-staging · 2025-04-14T10:53:03Z