Replace letter placeholders with SVG brand icons

[KaranUnique]

…yground; fix animation shorthand conflict in EverywhereFeatures

Addressed Issues:

Fixes #222

Screenshots/Recordings:

Screen.Recording.2026-08-07.103302.mp4

Before: Platform icons in the Hero section and Playground showed single letter placeholders (W, f, X, in, T, R, @) inside colored circles.

After: All platform buttons now display their official SVG brand icons — WhatsApp, Facebook, X (Twitter), LinkedIn, Telegram, Reddit, and Email — matching the icons already used in the core social-share-button.js library.

Additional Notes:

1. Replaced {network.name[0]} (first letter of name) with inline SVG brand icons using the same path data as the core library. No new dependencies introduced.

2. Removed the icon text field ("W", "f", "X", "in", "T", "R", "@") from each platform entry in INITIAL_PLATFORMS. Added a PLATFORM_ICONS map of SVG paths and updated both the preview mockup and the configuration panel toggles to render inline SVGs.

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

⚠️ AI Notice - Important!

We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact. AI slop is strongly discouraged and may lead to banning and blocking. Do not spam our repos with AI slop.

Summary by CodeRabbit

• Style
  • Updated social sharing icons in the hero preview with recognizable branded graphics for WhatsApp, Facebook, X, LinkedIn, and Telegram.
  • Replaced text-based platform markers in the playground preview and configuration panel with branded SVG icons.
  • Refined feature card animations while preserving their existing timing, easing, and looping behavior.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: ddd27104-c5a5-4a71-803e-9658f3b5fb2b

📥 Commits

Reviewing files that changed from the base of the PR and between 16291ac and 5dbf69c.

📒 Files selected for processing (3)

• landing-page/src/components/EverywhereFeatures.tsx
• landing-page/src/components/Hero.tsx
• landing-page/src/components/Playground.tsx

---

Walkthrough

The landing page now displays inline SVG icons for WhatsApp, Facebook, X, LinkedIn, and Telegram in the hero and playground. The card animation uses separate CSS animation properties with the existing behavior preserved.

Changes

Landing page UI updates

Layer / File(s)	Summary
Branded platform icon rendering landing-page/src/components/Hero.tsx, landing-page/src/components/Playground.tsx	The hero and playground replace letter markers with inline SVG icons. Playground uses shared platform path data in its preview and configuration list.
Card animation property split landing-page/src/components/EverywhereFeatures.tsx	The card animation uses separate name, duration, timing-function, and iteration-count properties. Existing hover disabling and floating animation values remain unchanged.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• AOSSIE-Org/SocialShareButton#177: This PR also changes Hero.tsx, although it addresses navigation behavior rather than platform icons.

Suggested labels: Typescript Lang

Suggested reviewers: amankv1234, kpj2006

Poem

I’m a rabbit with icons bright,
SVGs now hop into sight.
Letters rest while brands appear,
Animations stay smooth and clear.
Thump, thump—cleaner cards are here!

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes replacing letter placeholders with SVG brand icons, which is the main change.
Linked Issues check	✅ Passed	The changes satisfy issue #222 by replacing platform letters with inline SVG brand icons while preserving existing functionality.
Out of Scope Changes check	✅ Passed	All changes support the stated objectives, including the related animation shorthand fix in EverywhereFeatures.

✨ 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.}

[gitcordapp]

Link your account with Gitcord

Thanks for opening this PR, @KaranUnique!

To receive Discord notifications and contributor tracking for this organization:

1. Join Discord: https://discord.gg/hjUhu33uAn
2. In Discord, run /link KaranUnique
3. Paste the verification code into your GitHub bio (or a public gist)
4. Click Verify in Discord (or run /verify-link KaranUnique)

Once linked, Gitcord can notify you about reviews, merges, and more.

— Posted by Gitcord

[PrithvijitBose]

lgtm

[amankv1234]

lgtm