Skip to content

Conversation

@1046prt
Copy link
Collaborator

@1046prt 1046prt commented Jul 3, 2025

Description:

  • Refactored the existing blog page component for better readability, maintainability, and scalability.
  • Organized layout using modern utility classes to maintain consistency across screen sizes.
  • Added new blog post images to the /public/images/blog directory.
  • Linked each blog card to a relevant static image using a consistent naming convention.
  • Ensured proper alt tags are used for accessibility and SEO.

Fixes #97

Here are some screenshots:

Screenshot 2025-07-04 010134
Screenshot 2025-07-04 010146
Screenshot 2025-07-04 010210
Screenshot 2025-07-04 011131

@recursivezero
Copy link
Owner

recursivezero commented Jul 5, 2025

  1. font size is too big .make it large but not huge ( check for large screen always )
  2. list ites are not left aligned in mobile view ( attached screenshot )
  3. in light mode heading is not visible
    and why does heading font is smaller the blog content?

Screenshot from 2025-07-05 14-43-01
Screenshot from 2025-07-05 14-42-19

Copy link
Owner

@recursivezero recursivezero left a comment

Choose a reason for hiding this comment

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

  • remove inline css
  • extract svg into icons file
  • fix font size and alignment for large and mobile screen

<BackArrow/>
<div class="container__blog">
<header class="mb-12 text-center">
<h1
Copy link
Owner

Choose a reason for hiding this comment

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

remove inline style from all and use in blog.css or separate blog-article.css file using class names and no duplicate/unused css

<header class="blog-post-header">
<h1
style="background: linear-gradient(90deg, var(--text), var(--primary-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"
style="font-size:45px; background: linear-gradient(90deg, var(--text), var(--primary-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"
Copy link
Owner

Choose a reason for hiding this comment

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

remove inline style , use something written on blog,css

{
validatedData.description && (
<p class="mx-auto mt-4 max-w-2xl text-lg" style="color: var(--secondary)">
<p class="mx-auto mt-4 max-w-2xl text-lg" style="font-size:20px; color: var(--secondary)">
Copy link
Owner

Choose a reason for hiding this comment

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

this mt-4 max-w? these tailwind willnot work here as we are not having tailwind

@1046prt
Copy link
Collaborator Author

1046prt commented Jul 8, 2025

  • Resolve all the conflicts and also modified the instructed changes
  • seperate out the svgs to icons
  • Add help icon to blog page and add back button to blog pages
  • modified the responssivness in mobile / tab view
    Screenshot 2025-07-09 014054
    Screenshot 2025-07-09 014145
    Screenshot 2025-07-09 014014

@1046prt 1046prt changed the title Feature/RZA-250097: Refactor the Blog Page UI Feature/RZA-250097: Refactor the Blog Page UI and Added Stories Section Jul 9, 2025
@1046prt
Copy link
Collaborator Author

1046prt commented Jul 9, 2025

  • Screenshots of Story page
    Screenshot 2025-07-09 213247
    Screenshot 2025-07-09 213302
    Screenshot 2025-07-09 213310
    Screenshot 2025-07-09 213342
    Screenshot 2025-07-09 214744

@1046prt 1046prt force-pushed the feature/RZA-250097 branch from f0e7382 to d301887 Compare July 10, 2025 13:03
@recursivezero
Copy link
Owner

https://web.dev/patterns/components/settings?hl=en#css

try this kind of slider

@recursivezero recursivezero merged commit 3186240 into develop Jul 11, 2025
1 check passed
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.

4 participants