[WEBSITE] - Revamp "Experience BlyFt" Section with Real App Screenshots #314
Description
Prerequisites
- I have searched existing website-related issues to avoid duplicates
- This issue is specifically about the website (not the app)
Issue Description
Description:
The "Experience BlyFt" section currently uses generic, placeholder images from Unsplash. To build trust and showcase our actual product, we need to replace these with high-quality screenshots of the BlyFt application. Furthermore, the current horizontal scroll bar is not aesthetically pleasing and should be replaced with a more attractive, seamless scrolling mechanism.
Files Likely to Change:
index.html
style.css
script.js
PR Submission Format:
Please title your Pull Request as: "Feat: Update Experience section with real app screenshots and improved carousel".
In the PR description, please list the features each new screenshot represents and describe the changes made to the carousel's navigation.
Proposed Solution
Guidelines & Steps to Fix:
Replace Dummy Images:
Source: Use the actual screenshots of the BlyFt app from our GitHub repository. You can find them in the /assets or /screenshots folder of the main repo or in a separate design folder. Please ask a maintainer for the direct link if you cannot find them.
Location: The carousel with IDs #SS and #carousel. Replace the four img tags with src attributes pointing to Unsplash.
Requirements:
Images should be clear and showcase key features (e.g., the main news feed, AI chatbot interface, settings/theming page).
Ensure the new images are optimized for web to avoid long loading times.
Update the descriptive text below each image if necessary to accurately reflect the new screenshot.
Improve Carousel UX/UI:
Problem: The current overflow-x-auto creates a visible and clunky scrollbar.
Fix: Hide the default scrollbar and implement a more elegant navigation system.
Implementation Suggestion:
CSS: Hide the scrollbar for a cleaner look. You can use Tailwind's overflow-x-scroll and scrollbar-hide (may require a plugin) or custom CSS like -ms-overflow-style: none; scrollbar-width: none;.
Enhanced Functionality (Bonus): Implement a smooth, horizontal scrolling carousel with next/previous buttons and/or dot indicators. This can be done with a simple JavaScript function that scrolls the carousel-container by a set amount.