Hindi/Vashla Text Overlap Fix: React Kolkata Bug Report
Hey guys! 👋 Let's dive into a pesky little bug that's been causing some trouble with the React Kolkata website. Specifically, we're seeing some text overlap issues when the language is switched to Hindi or Vashla. This is a common issue and we need to fix it.
The Bug: Text Overlap in the Hero Section 💥
So, the problem is pretty straightforward. When you're on the homepage and you select Hindi or Vashla as your language, the sub-headline text in the hero section gets partially hidden behind the main heading. It's like the words are playing a game of peek-a-boo and, frankly, it makes the tagline pretty tough to read. The hero section is the first thing people see, so it's super important to get it right. This overlap gives the whole thing a cluttered look, which isn't exactly the welcoming vibe we're going for, right? It's like having a billboard where half the words are covered up – not ideal for grabbing attention and getting the message across. It's not just about aesthetics; it's about usability. If people can't easily understand the tagline, they might bounce off the site without exploring further, which is something we definitely want to avoid.
The Problem in Detail:
The specific text affected is the sub-headline: "बनाएं। सीखें। जुड़ें।" in Hindi. When the language is switched, this text appears to be partially obscured by the main heading "रिएक्ट कोलकाता।". This overlap can make the sub-headline difficult to read and impacts the overall visual appeal of the hero section. This bug impacts the user experience, making it harder for visitors to understand the key message of the website. It is important to fix these text overlap issues to ensure that website content is accessible and easy to understand for all users, regardless of their preferred language. The layout issue hinders effective communication and can potentially frustrate users, leading to a negative perception of the website.
To make sure this bug is fixed, we need to ensure that the sub-headline "बनाएं। सीखें। जुड़ें।" is displayed correctly, with appropriate spacing and without any text overlap, irrespective of the selected language.
The goal is to provide a clean and professional appearance, improving user engagement and ensuring that the website's message is clearly communicated to all visitors.
Steps to Reproduce the Issue 👣
Alright, let's walk through how to see this bug in action. It's actually pretty easy to reproduce, which is good because it means we can nail down the fix without too much fuss. Here's what you need to do:
- Head to the Homepage: Start by navigating to the React Kolkata website's homepage. This is your starting point.
- Find the Language Selector: Look for the language selector. It's usually a dropdown or a set of buttons that let you switch between different languages. In this case, we're looking for the options that let you select Hindi or Vashla. The language selector is often found in the navigation bar or footer.
- Switch to Hindi or Vashla: Select either Hindi or Vashla from the language options. The website should reload or update to display the content in the chosen language. Once the language is switched, you should immediately notice the text overlap in the hero section.
- Observe the Hero Section: Take a good look at the hero section. This is typically the large, eye-catching area at the top of the homepage. You should see the main heading and the sub-headline. Check if the sub-headline is overlapping the main heading. If it is, then you've successfully reproduced the bug!
This straightforward process allows anyone to verify the text overlap, making it easy to identify and address the issue.
Expected Behavior: What Should Happen 💡
So, what should happen? What's the ideal scenario we're aiming for? Simple: the sub-headline should be crystal clear and easy to read, no matter the language selected. The primary goal is a clean, readable hero section that effectively communicates the message without any visual distractions. When the language is switched to Hindi or Vashla, the sub-headline "बनाएं। सीखें। जुड़ें।" needs to be clearly visible and completely separate from the main heading "रिएक्ट कोलकाता।". This means proper spacing, no overlap, and a layout that's both aesthetically pleasing and functional. The overall look should be professional, with the text elements arranged in a way that guides the user's eye and makes it easy to understand the key information. A well-designed hero section ensures that the website's message is communicated clearly and effectively to all visitors, regardless of their preferred language. The ultimate aim is to create a seamless and enjoyable user experience. By resolving the text overlap, the website will become more user-friendly and visually appealing.
Screenshots: Proof of the Bug 📸
To make things even clearer, we've got some screenshots to show you exactly what's going on. These images really drive home the point and help anyone see the problem at a glance. They make it super easy to understand the issue without having to go through the steps of reproducing it yourself.
Screenshot 1
Screenshot 2
These screenshots clearly illustrate the text overlap issue. You can see how the sub-headline is partially hidden behind the main heading, making it difficult to read. The images provide visual evidence of the problem, allowing developers and designers to quickly grasp the issue and work towards a solution. The screenshots showcase the negative impact of the text overlap on the user experience.
How to Get Involved: Let's Fix This! 🤝
If you're a developer and you're keen to help out, you're more than welcome to jump in and tackle this issue. We encourage everyone to contribute and help make the React Kolkata website even better. By fixing this text overlap, you'll be contributing to a more user-friendly and accessible website.
I would like to work on this issue, please assign it to me
If you're interested in working on this issue, please let us know! We're always looking for contributors to help improve the website.
Desktop or Mobile (Please provide your system information)
To help us understand the problem, please provide your system information. This includes your browser, operating system, and the language you are using. This information will help us to reproduce the issue and find a solution.
- Browser: Chrome/Firefox/Safari/Brave/etc.
- OS: Windows/macOS/Linux
- Language: Hindi / Vashla
Code of Conduct
I agree to follow this project's Code of Conduct