Add Professional, Elegant Newsletter Popup with Scroll Trigger #230
Conversation
|
@Samridha0305 is attempting to deploy a commit to the recode Team on Vercel. A member of the Team first needs to authorize it. |
|
Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. The estimated time for response is 5–8 hrs. In the meantime, please provide all necessary screenshots and make sure you run - npm build run , command and provide a screenshot, a video recording, or an image of the update you made below, which helps speed up the review and assignment. If you have questions, reach out to LinkedIn. Your contributions are highly appreciated!😊 Note: I maintain the repo issue every day twice at 8:00 AM IST and 9:00 PM IST. If your PR goes stale for more than one day, you can tag and comment on this same issue by tagging @sanjay-kv. We are here to help you on this journey of open source. Consistent 20 contributions are eligible for sponsorship 💰 🎁 check our list of amazing people we sponsored so far: GitHub Sponsorship. ✨ 📚Your perks for contribution to this community 👇🏻
If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊 |
|
@sanjay-kv have a look sir |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
sanjay-kv
added
area:backend-sql
I checked this in my local system, but it failed in the vercel deployment, can u investigate this. |
|
your development is damn good. |
|
|
i have fixed the newsletterpopup..please chcek @sanjay-kv |
thank you sir!! please let me know if i can work on any other issues. |
vercel is failing again
|
|
yes sir so sorry, i noticed and this time i have fixed it properly
…On Tue, 29 Jul 2025 at 20:30, Sanjay Viswanathan ***@***.***> wrote:
*sanjay-kv* left a comment (recodehive/recode-website#230)
<#230 (comment)>
image.png (view on web)
<https://github.com/user-attachments/assets/d251fb06-85dc-4f8e-b569-e9476556b889>
vercel is failing again
—
Reply to this email directly, view it on GitHub
<#230 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/BL35DE5BYLKLW7XBT2F5YQT3K6EBZAVCNFSM6AAAAACCSY5FOSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTCMZSHE2DENRTHA>
.
You are receiving this because you were assigned.Message ID:
***@***.***>
|
|
Awesome all checks has been completed now. Its alright its a new repository, now you got the handson how it works. |
Thank you sir |
2 participants
Description
This PR introduces a professionally styled, rich, and elegant newsletter popup to the RecodeHive website. Inspired by Substack’s design, the popup is non-intrusive yet visually appealing, and is shown to users once they scroll 80% of the page height.
The popup includes:
Smooth scroll-based trigger mechanism
localStorage persistence (recodehive_newsletter_popup) to ensure it's shown only once per user
Close and Subscribe button interactions
Fixes #207
Changes Made
Added NewsletterPopup.tsx component
Implemented useEffect to detect scroll and trigger popup
Applied rich and responsive Tailwind styling
Prevent repeated popup display using localStorage
Checklist
Responsive and accessible design
Appears only when user scrolls 80% of the page
localStorage key set to prevent repeat display
Easy to modify logic for testing (can set popup to always show)
Styled to look modern, luxurious, and non-intrusive
Tested and working without breaking any other component
My code follows the style guidelines of this project.
I have tested my changes across major browsers/devices
My changes do not generate new console warnings or errors , I ran
npm run buildand attached scrrenshot in this PR.This is already assigned Issue to me, not an unassigned issue
How to Test
Run the development server
Open the homepage
Scroll down slowly
Popup will show once you reach ~80% scroll height