Redesign the Word Grid

[BigBen-7]

"⚠️Please ensure you read and follow the contribution guidelines. Failure to do so may result in your contribution being rejected."

"⚠️Please include an expected delivery date in your application. Failure to do so may void your application. Also, test your code thoroughly to ensure it works as expected before creating a PR."

Description:
We need to redesign our word grid to match the new layout and improve the overall UI/UX. The new design should be visually appealing, properly aligned, and fully responsive across all screen sizes.

Tasks:

1. Implement the new word grid design based on the provided figma
2. Ensure proper spacing between grid cells for better readability.
3. Make the grid responsive for mobile, tablet, and desktop views.
4. Improve the styling to align with the project’s overall design language.

Acceptance Criteria:

• The new grid should match the provided design.
• It should be fully responsive on all devices.
• The grid structure should be clean, well-aligned, and visually appealing.

⚠️NOTE THIS GRID SHOULD BE REDESIGNED WHILE MAINTAINING EXISTING FUNCTIONALITY

Tech Stack:

• Frontend: Next.js
• Styling: Tailwind CSS

[4bdullah7eeshan]

Can I take this up @BigBen-7 ?

[Agbeleshe]

I am a front-end developer with over three years of experience, specializing in building responsive and visually appealing UI components.

To address this task, I will redesign the word grid to align with the provided Figma design while ensuring that the existing functionality remains intact. I will focus on improving spacing, alignment, and responsiveness across mobile, tablet, and desktop views using Tailwind CSS. The final implementation will seamlessly integrate with the project's overall design language, maintaining a clean and structured grid.

ETA: 24 hours.

[Crosstons]

I've been working as a Next Js developer for more than three years, and I'm skilled at styling components. For this specific problem, I'll make sure they look flawless on all devices with the right spacing and alignment. Since this is my first time using LeadStudios, I would really like to contribute.

ETA: - 10-12 hours

[Luluameh]

Hey! I’d love to work on this issue. I have 3+ years of experience in frontend development, specializing in React, Next.js, and Tailwind CSS. I'll ensure the redesigned word grid is fully responsive, well-aligned, and visually appealing while maintaining the existing functionality.

My Plan:
Implement the new grid UI based on the Figma design.
Ensure proper spacing & readability of grid cells.
Make it fully responsive for mobile, tablet, and desktop.
Improve styling to align with the project’s design language.
Thoroughly test to ensure existing functionality remains intact.
TG:@lulugreg.
ETA: 4-8 hours

[tali-creator]

Hi, I’m Moses, a front-end developer with expertise in React, Next.js, and Tailwind CSS. I have experience refining UI components for alignment, responsiveness, and overall user experience.

I will implement the new word grid design based on the provided Figma, ensuring that the structure closely follows the intended layout while keeping the code clean and efficient. Proper spacing will be applied using Tailwind’s utility classes to enhance readability and maintain a balanced look.

To make the grid responsive across all devices, I will use CSS Grid along with Tailwind’s responsive utilities, ensuring smooth adaptability for mobile, tablet, and desktop views. While redesigning the grid, I will ensure that all existing functionality remains intact and works as expected.

I will also focus on aligning the styling with the project’s design language by maintaining consistency in colors, typography, and UI elements so that the new grid integrates seamlessly with the rest of the application.

I anticipate completing this task within 6 hours, including testing and refinements to ensure a polished final result.

[anljvnsjnfnutdfns]

can i pls take this issue

[bakarezainab]

Hi, I'm a Frontend engineer with 2+ years of creating pixel-perfect UI. I am a first time contributor on OnlyDust. I am confident in my ability to implement the new word grid design based on the provided Figma.
I would love to tackle this issue.

ETA: 24-48 hours

[lucidfort]

Hi, I’m Epiphanus, a front-end developer with expertise in React, Next.js, and Tailwind CSS. I have experience optimizing grid layouts for readability, alignment, and responsiveness.

Plan to Address the Issue:

Grid Structure & Alignment: I will use CSS Grid or Flexbox to ensure a structured, well-aligned layout. I'll fine-tune cell sizes and positioning based on the provided Figma design.

Spacing & Readability: I'll apply consistent padding and margin rules, leveraging CSS variables or utility classes for uniform spacing.

Responsiveness: I'll implement media queries and CSS grid auto-placement to make the layout adapt seamlessly across different screen sizes.

Styling Consistency: I'll review the project's design language and use appropriate fonts, colors, and UI elements to ensure the grid blends well with the overall aesthetic.

Estimated Completion Time:

I anticipate completing this task within 12 hours, factoring in testing and refinements for a polished final result.

I’d really love to contribute to this project. Looking forward to your response!

[Shalomnze]

I am Nze Shalom, a full stack developer with strong foundation in modern web development frameworks and technologies. My expertise includes: Nuxt.js, Next.js and Tailwind CSS with a bit of knowledge in Cairo. I am Experienced in crafting responsive, visually appealing designs using Tailwind CSS, ensuring consistency and efficiency in the development process. I have gone through the contributors guide and the figma file. I would love to contribute to this project. ETA is 24hrs