chore: Upgrade demo page aesthetics with animations, glassmorphism and modern font

[sejalkutriyar]

Addressed Issues:

This PR replaces the previously closed PR (#141). It significantly upgrades the aesthetics and visual experience of the index.html demo page. The goal is to make the documentation/demo page feel highly premium and modern, showcasing the SocialShareButton component in the best light possible to potential users.

Key Design Upgrades

• Animated Mesh Gradient: Replaced the static flat background with a dynamic, smoothly moving 15-second geometric gradient (linear-gradient with background-position animation) that makes the page feel alive.
• Glassmorphism 2.0: Enhanced the demo cards and main containers with modern frosted glass effects (backdrop-filter: blur(20px)) and subtle semi-transparent borders.
• Modern Typography: Integrated Plus Jakarta Sans via Google Fonts, replacing standard system fonts for a much cleaner, SaaS-like professional look.
• Bouncy Hover States: Added smooth scaling and transform translations (translateY(-8px) scale(1.02)) along with deepened box-shadows to the demo cards, buttons, and icons to create highly tactile micro-interactions.
• Improved CTA Buttons: Upgraded the call-to-action buttons with better padding, glowing box-shadows on hover, and smoother scaling animations.
• Code Quality: Formatted the entire codebase using the project's formatting tools to ensure strict alignment with style conventions.

Checklist

• My code follows the project's code style and conventions
• I have made corresponding changes to the documentation
• My changes generate no new warnings or errors
• I have joined the Discord server and I will share a link to this PR with the project maintainers there
• I have read the Contributing Guidelines

[coderabbitai]

Warning

Rate limit exceeded

@sejalkutriyar has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 54 minutes and 37 seconds before requesting another review.

Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 54 minutes and 37 seconds.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: c7478b02-507e-42e3-8eac-9a979adddb76

📥 Commits

Reviewing files that changed from the base of the PR and between d0686c4 and c764e99.

📒 Files selected for processing (12)

• CONTRIBUTING.md
• README.md
• docs/Roadmap.md
• eslint.config.js
• index.html
• landing-page/README.md
• landing-page/src/app/globals.css
• src/social-share-analytics.js
• src/social-share-button-preact.jsx
• src/social-share-button-react.jsx
• src/social-share-button.css
• src/social-share-button.js

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}