Skip to content

Updated API Fellowship website theme to match main website #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

Updated API Fellowship website theme to match main website #25

wants to merge 8 commits into from

Conversation

@ayushman31
Copy link

@ayushman31 ayushman31 commented Feb 13, 2025 •
edited
Loading

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 Fellowship 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#2536

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

Screenshot 2025-02-13 213033
Screenshot 2025-02-13 213026

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#2536

@ayushman31 ayushman31 mentioned this pull request Feb 13, 2025
Open
9 tasks
@TvisharajiK
Copy link

TvisharajiK commented Mar 17, 2025

Hey @ayushman31,

Please ensure design consistency by:

Making the slider animation for buttons uniform with the existing landing page to maintain the design language.
Applying the same styling to the text in the header section for consistency.

Kindly update the design to align with the revamped home page.

@ayushman31
Copy link
Author

ayushman31 commented Mar 19, 2025

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

2025-03-19.16-29-17.mp4

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

@amaan-bhati
Copy link
Member

amaan-bhati commented Mar 21, 2025

@TvisharajiK hey can you please review this

@TvisharajiK
Copy link

TvisharajiK commented Apr 3, 2025

Hey @ayushman31 Can you remove the star next to the github icon?

@ayushman31
feat: removed the star icon
7119c46 
Signed-off-by: Ayushman Singh <[email protected]>
@ayushman31
Copy link
Author

ayushman31 commented Apr 3, 2025

hey @TvisharajiK , i have made the changes.

Screenshot 2025-04-04 001324

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

@manasmanohar
Copy link

manasmanohar commented Apr 4, 2025 •
edited
Loading

hi @ayushman31, thanks for contributing!
do consider these points

  1. fix navbar links (keploy.io), nav links open in new tab, mobile nav is missing
  2. fix the hero cta to form link
  3. comment out the newsletter component for now
  4. maintain consistency in text content (hero) with current website
  5. add user images and add ui hover state or interaction to let user know the links are clickable
    image
  6. use svg, webp images where possible
  7. follow all nextjs best practices, ensure lighthouse scores are great
  8. add favicon, open graph
  9. run npm run build
    refer to comments in the related pr. The final review and merge will be done after internal discussion.

@ayushman31
Copy link
Author

ayushman31 commented Apr 7, 2025 •
edited
Loading

hey @manasmanohar @TvisharajiK i have made all the necessary changes.

Screenshot 2025-04-08 023144

Screenshot 2025-04-08 023156

added images and links in the testimonials
have used .avif format for the images

Screenshot 2025-04-09 195517

Also have ensured lighthouse scores to be great !!

Screenshot 2025-04-08 040420

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

@ayushman31
feat: updated testimonials
f650505 
Signed-off-by: Ayushman Singh <[email protected]>
@keploy-staging
Copy link

keploy-staging bot commented Apr 14, 2025

⚠️ Oops! We currently support Unit Test Generation only for Go projects.
Stay tuned – support for more languages is coming soon! 🚀

4 similar comments
@keploy-staging
Copy link

keploy-staging bot commented Apr 14, 2025

⚠️ Oops! We currently support Unit Test Generation only for Go projects.
Stay tuned – support for more languages is coming soon! 🚀

@keploy-staging
Copy link

keploy-staging bot commented Apr 14, 2025

⚠️ Oops! We currently support Unit Test Generation only for Go projects.
Stay tuned – support for more languages is coming soon! 🚀

@keploy-staging
Copy link

keploy-staging bot commented Apr 14, 2025

⚠️ Oops! We currently support Unit Test Generation only for Go projects.
Stay tuned – support for more languages is coming soon! 🚀

@keploy-staging
Copy link

keploy-staging bot commented Apr 14, 2025

⚠️ Oops! We currently support Unit Test Generation only for Go projects.
Stay tuned – support for more languages is coming soon! 🚀

@keploy-staging
Copy link

keploy-staging bot commented Apr 14, 2025

Nice Pr 😄. We currently support Unit Test Generation only for Go projects.
Stay tuned – support for more languages is coming soon! 🚀

3 similar comments
@keploy-staging
Copy link

keploy-staging bot commented Apr 14, 2025

Nice Pr 😄. We currently support Unit Test Generation only for Go projects.
Stay tuned – support for more languages is coming soon! 🚀

@keploy-staging
Copy link

keploy-staging bot commented Apr 14, 2025 •
edited
Loading

Nice Pr 😄. We currently support Unit Test Generation only for Go projects.
Stay tuned – support for more languages is coming soon! 🚀

@keploy
Copy link

keploy bot commented Apr 15, 2025 •
edited
Loading

Nice Pr 😄. We currently support Unit Test Generation only for Go projects.
Stay tuned – support for more languages is coming soon! 🚀

amaan-bhati
amaan-bhati reviewed Jun 20, 2025
View reviewed changes
Copy link
Member

@amaan-bhati amaan-bhati left a comment

Choose a reason for hiding this comment

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

Hey @ayushman31 Thanks for submitting this pr and for your patience, just one concern here:
Screenshot 2025-06-20 at 5 19 17 PM
This is the student program's website, i dont think so we really need the join cloud waiting list button here, it should be something like get started/register that redirects to https://docs.google.com/forms/d/e/1FAIpQLSc5132o6GBa1PLZOVRK3ZxEwUE8DGJivguHoREwOprg0AMDzg/viewform

src/components/hero.tsx Outdated
className="gap-2 text-sm font-medium bg-gradient-to-r from-orange-500 to-red-500 hover:from-red-500 hover:to-orange-500 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 ease-in-out text-white px-8 py-2.5 flex items-center justify-center"
rel="noopener noreferrer"
>
<span>Join Cloud Waiting List</span>
Copy link
Member

@amaan-bhati amaan-bhati Jun 20, 2025

Choose a reason for hiding this comment

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

I dont think so this should be join cloud waiting lis, it should be register/get started and it should redirect to https://docs.google.com/forms/d/e/1FAIpQLSc5132o6GBa1PLZOVRK3ZxEwUE8DGJivguHoREwOprg0AMDzg/viewform

@ayushman31
Copy link
Author

ayushman31 commented Jun 20, 2025

hey @amaan-bhati , i have changed the button text to "Get Started"

image

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@amaan-bhati amaan-bhati amaan-bhati left review comments

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@ayushman31 @TvisharajiK @amaan-bhati @manasmanohar