Tailwind CSS For Larger Screens and Animations with Intersection Observor.

For the past 3 weeks, I worked on revamping our Landing Page for our SAAS application and learnt & re-learnt numerous concepts about Frontend development and connecting dynamic data to our Next JS landing page.
We could have used a No Code solution, but we went with a out and out coded version with Next JS and Tailwind because we wanted 100% customisability of our Landing Page which No Code tools do not offer.
As we have a React Native app (Which I predominantly work most of the time with but worked on Landing page for business purposes as I am proficient in Both React/Next JS and React Native), we need to have deep linking support to our application so we had to use .well-known folder for Google and Apple Appstore verifications.
I am listing some of the concepts which I used to implemented to make our 15+ screens/pages with dynamic content,
1. Used Tailwind CSS to design for Mobile Devices, Tablets, Mac book style monitors and Large Monitors.
For this I had to design for sm, md, lg, xl and 2xl sizes with help of tailwind's utility classes.
For the larger monitors, I used the technique of center aligning the elements rather than expanding them out which will provide a stretched view of the components rather than a compact one.
2. Utilised Intersection observer and Animations to provide fade in animations and load dynamic content with TanStack query only when the user is in the view port of that component.
3. We have a variety of data to showcase in our Landing page and that needed to be indexed by Google for SEO - so I used Netflix SSR to generate the pages with programmatic SEO Headers injected directly to the page with proper OG Images for sharing it via Social Media.
These are a few technical concepts I utilised to make our landing page look stand out and drive conversions for our SAAS.
I have decided to share my learnings on how you can make Landing pages with Next JS and Tailwind CSS.
I have made a version in Tamil Language.
If you are comfortable with Tamil, you can check it out here: • பெரிய திரைகள் மற்றும் ...
PS: This is my first ever Video in Tamil as I do predominantly in English for a global audience.
----
Reach out to me if you need help in improving/making your landing pages for your business.
If you have any other queries, please leave it in the comments or contact me via email or Twitter (X).
Here is my Twitter (X) profile: x.com/gautham_...