feat: add community volunteer section and polish team layouts by Sappymukherjee214 · Pull Request #160 · reactplay/react-kolkata

Sappymukherjee214 · 2026-02-15T08:18:25Z

Summary

This PR introduces a new Volunteer section to recognize community contributors and improve the overall structure and engagement of the React Kolkata landing page. It also includes UI improvements, i18n enhancements, test updates, and configuration fixes to ensure smooth integration.

Changes

Created reusable VolunteerCard and VolunteerSection components.
Integrated the Volunteer section on the landing page (placed after Core Team).
Added i18n support for volunteer content in:
- English
- Hindi
- Bengali
- Spanish
Enhanced the Core Team section with entry animations.
Resolved hydration mismatch issues in the LanguageSwitcher.
Updated image configuration to properly support GitHub avatar sources.
Synchronized the test suite and test utilities to support the new layout.
Added image type declarations for TypeScript to prevent type errors.

Testing

Verified UI layout and responsiveness across desktop and mobile.
Tested language switching for all supported languages.
Confirmed hydration warnings were resolved in development mode.
Ran the full test suite to ensure no regressions.
Validated TypeScript builds without errors.

Related Issue

Closes #157

Screenshot

Added Community Volunteers Section just after Core Teams Section

Notes

Volunteer data is currently managed statically and can be extended in the future.
The structure allows easy addition of new volunteers.
Animations are lightweight and do not affect performance noticeably.

Please review UI alignment and translations for accuracy before merging.

- Created reusable VolunteerCard and VolunteerSection components. - Integrated Volunteer section on the landing page after Core Team. - Added i18n support for volunteers in English, Hindi, Bengali, and Spanish. - Upgraded Core Team section with entry animations. - Resolved hydration mismatches in LanguageSwitcher. - Updated image configs to support GitHub avatars. - Synchronized test suite and test-utils for the new layout. - Added image type declarations for TypeScript.

netlify · 2026-02-15T08:18:31Z

✅ Deploy Preview for reactkolkata ready!

Name	Link
🔨 Latest commit	`3c2f5c0`
🔍 Latest deploy log	https://app.netlify.com/projects/reactkolkata/deploys/69955a84f641b60008efcd03
😎 Deploy Preview	https://deploy-preview-160--reactkolkata.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Sappymukherjee214 · 2026-02-15T08:21:08Z

@priyankarpal I have added the Community Volunteers Section just after Core Teams Section along with the Screenshot. Please label the PR for the issue #157

Sappymukherjee214 · 2026-02-15T08:22:05Z

@priyankarpal I have starred your repo also

Copilot

Pull request overview

This PR adds a new “Community Volunteers” section to the React Kolkata landing page and refactors team/section layout to improve presentation, animations, and i18n support, alongside related config and test updates.

Changes:

Added new VolunteerSection/VolunteerCard components and integrated them into the home page flow (after Core Team).
Updated Core Team styling and introduced shared AnimatedSection animations (now backed by framer-motion).
Extended i18n content, adjusted events tests/messages, and updated image/testing configuration.

Reviewed changes

Copilot reviewed 18 out of 20 changed files in this pull request and generated 12 comments.

Show a summary per file

File	Description
vitest.config.mts	Excludes root e2e tests from Vitest runs.
src/types/images.d.ts	Adds TS module declarations for common image extensions.
src/test-utils.tsx	Updates mock i18n messages to match new events/home copy.
src/modules/home/index.tsx	Reorders/extends landing sections to include Core Team + Volunteers.
src/modules/home/(sections)/volunteers/volunteer-card.tsx	Introduces volunteer card UI with avatars + social links.
src/modules/home/(sections)/volunteers/index.tsx	Introduces volunteer section UI + CTA and renders JSON-driven list.
src/modules/home/(sections)/event/tests/*.test.tsx	Updates tests to match new events layout/copy/link targets.
src/modules/home/(sections)/blogs/index.tsx	Removes Core Team rendering from blog section.
src/modules/home/(sections)/about/core-team/index.tsx	Refactors Core Team layout and wraps in AnimatedSection.
src/config/i18n/content/{en,hi,bn,es}.json	Adds Home.Volunteers translations.
src/config/data/volunteers.json	Adds initial volunteer dataset.
src/components/custom/language-switcher/index.tsx	Adds mount gating to avoid hydration mismatch.
src/components/custom/animated-section/index.tsx	Switches animation import to `framer-motion` and supports `id`.
next.config.ts	Updates remote image patterns (adds `github.com`).
package.json	Adds `@motionone/dom` and bumps `motion`.
pnpm-lock.yaml	Lockfile updates for dependency changes.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/components/custom/language-switcher/index.tsx

package.json

src/modules/home/(sections)/volunteers/volunteer-card.tsx

src/modules/home/(sections)/volunteers/index.tsx

src/modules/home/(sections)/volunteers/volunteer-card.tsx

src/modules/home/(sections)/volunteers/index.tsx

src/config/data/volunteers.json

priyankarpal · 2026-02-15T15:58:34Z

will review pr soon. Are you Apertre contributor?

Sappymukherjee214 · 2026-02-15T16:17:54Z

will review pr soon. Are you Apertre contributor?

yes

priyankarpal · 2026-02-16T07:24:17Z

src/config/data/volunteers.json

I will send all internal volunteer details here

priyankarpal · 2026-02-16T07:29:17Z

src/config/i18n/content/bn.json

+  },
+  "Home": {
+    "Volunteers": {
+      "title": "কমিউনিটি ভলান্টিয়ার্স",


change ভলান্টিয়ার্স to চ্যাম্পিয়ন

priyankarpal · 2026-02-16T07:29:24Z

src/config/i18n/content/en.json

+  },
+  "Home": {
+    "Volunteers": {
+      "title": "Community Volunteers",


change to Community Champion

priyankarpal · 2026-02-16T07:30:17Z

src/config/i18n/content/es.json

+  },
+  "Home": {
+    "Volunteers": {
+      "title": "Voluntarios de la Comunidad",


change to champion :)

priyankarpal · 2026-02-16T07:30:27Z

src/config/i18n/content/hi.json

+  },
+  "Home": {
+    "Volunteers": {
+      "title": "कम्युनिटी वॉलंटियर्स",


priyankarpal · 2026-02-16T07:37:16Z

src/modules/home/(sections)/volunteers/volunteer-card.tsx

+        {volunteer.socials.twitter && (
+          <Link
+            href={volunteer.socials.twitter}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="rounded-lg bg-white/5 p-2 text-slate-400 transition-colors hover:bg-white/10 hover:text-slate-100"
+            aria-label="Twitter Profile"
+          >
+            <Twitter className="h-4 w-4" />
+          </Link>
+        )}
+        {volunteer.socials.website && (
+          <Link
+            href={volunteer.socials.website}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="rounded-lg bg-white/5 p-2 text-slate-400 transition-colors hover:bg-white/10 hover:text-slate-100"
+            aria-label="Personal Website"
+          >
+            <Globe className="h-4 w-4" />
+          </Link>
+        )}


remove x.com & website

priyankarpal · 2026-02-16T07:37:47Z

src/modules/home/(sections)/volunteers/index.tsx

+        {/* Optional: Join as Volunteer CTA */}
+        <div className="mt-20 rounded-2xl border border-white/5 bg-white/5 p-8 text-center backdrop-blur-sm">
+          <h3 className="mb-4 text-xl font-semibold text-slate-100">{t("join_title")}</h3>
+          <p className="mx-auto mb-6 max-w-2xl text-slate-400">{t("join_description")}</p>
+          <a
+            href="https://bit.ly/react-kolkata-volunteer"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-2 rounded-full bg-gradient-to-r from-sky-600 to-blue-600 px-8 py-3 text-sm font-semibold text-white shadow-lg shadow-sky-500/25 transition-all hover:scale-105 hover:shadow-sky-500/40 active:scale-95"
+          >
+            {t("join_button")}
+          </a>
+        </div>


remove this section

priyankarpal · 2026-02-16T07:38:40Z

src/modules/home/index.tsx

blog section > core team > community champion
the order should be like this

priyankarpal · 2026-02-16T07:39:54Z

src/test-utils.tsx

+    upcoming_events: "Upcoming Events",
+    past_events: "Past Events",
+    call_for_speakers: "Call for Speakers",
+    call_for_volunteers: "Call for Volunteers",


it should be call_for_champion

priyankarpal · 2026-02-16T07:40:09Z

src/test-utils.tsx

+  Home: {
+    Volunteers: {
+      title: "Community Volunteers",
+      description: "Meet the dedicated individuals who volunteer their time.",
+      join_title: "Want to contribute?",
+      join_description: "We are always looking for passionate people.",
+      join_button: "Join as a Volunteer",
+    },


remove this

priyankarpal · 2026-02-16T15:42:52Z

hi @Sappymukherjee214 add these details in community champion list

{
    "name": "Arpan Kumar De",
    "role": "Event Organization",
    "bio": "Making events fun!",
    "photo": "https://github.com/arpankumarde.png",
    "socials": {
      "github": "https://github.com/arpankumarde",
      "linkedin": "https://www.linkedin.com/in/arpankumarde"
    }
}

{
    "name": "Priya Mahato",
    "role": "Event Organization",
    "bio": "Smoothness Controller",
    "photo": https://wsrv.nl/?url=https%3A%2F%2Fdrive.google.com%2Fuc%3Fexport%3Ddownload%26id%3D14tTMrfH7pOyv_naSi_9f5LVV1dnUvV-k&w=250&h=250",
    "socials": {
      "github": "https://github.com/priyamahato86",
      "linkedin": "https://www.linkedin.com/in/priyamahato86"
    }
}

    "name": "Titash Shil",
    "role": "Design team",
    "bio": "A tech-minded designer passionate about innovation, community, and creating meaningful digital experiences.",
    "photo": "github.com/Titash-shil/Titash-Self-pic",
    "socials": {
      "github": "https://github.com/Titash-shil",
      "linkedin": "https://www.linkedin.com/in/titash-shil-844857292/"
    }

   {
 "name": "Koustav Singh",
 "role": "Event Organizing Team",
 "bio": "In React Kolkata as part of the Event Organizing Team, contributing to planning, coordination, and execution of community-driven tech events.",
 "photo": "https://github.com/koustavx08.png",
 "socials": {
   "github": "https://github.com/koustavx08",
   "linkedin": "https://linkedin.com/in/koustavx08"
 }
}

{
"name": Hiya Sarkar",
    "role": "Event organisation team, Github & Website maintain team",
    "bio": "in react kolkata for event organisation and github & website maintain",
    "photo": "github.com/hiyasarkar.png",
    "socials": {
      "github": "https://github.com/hiyasarkar",
      "linkedin": "https://linkedin.com/in/hiyasarkar"
    }
 }

{
    "name": "Rishita Kundu",
    "role": "Design team",
    "bio": "Tech enthusiast and graphic designer who loves building projects, exploring new tech, and turning ideas into visually engaging real-world solutions.",
    "photo": "https://github.com/rix-04turtle/my-image/blob/main/Rishita.jpeg",
    "socials": {
      "github": "https://github.com/rix-04turtle",
      "linkedin": "https://www.linkedin.com/in/rishita-kundu"
    }

{
    "name": "Arup Matabber", 
    "role": "Design team",
    "bio": "I draw shapes using the Pen Tool", 
    "photo": "https://drive.google.com/file/d/1uIriyrdiyIqUXqa4G5b9rlwzbLj3IpI_/view?usp=sharing",
    "socials": {
      "github": "https://github.com/arup-matabber",
      "linkedin": "https://www.linkedin.com/in/arup-matabber/"
    }

{
    "name": "Chandika Sarkar",
    "role": "Content team, event organizing team",
    "bio": "In React Kolkata for content and event organization, I create engaging posts, manage communication, and support smooth event execution. I contribute to planning, coordination, and on-ground management to help build a strong and active developer community.",
    "photo": "github.com/chandikasarkar.png",
    "socials": {
      "github": "https://github.com/chandikasarkar",
      "linkedin": "https://www.linkedin.com/in/chandika-sarkar-059853254/"
    }

{
    "name": "Soumyodeep  Dey",
    "role": "Tech and Content team",
    "bio": "with react Kolkata because personally I got many things and support from  the community so want to give it back and love working with these amazing people",
    "photo": "https://soumyodeep-dey.vercel.app/Images/LOGO.webp",
    "socials": {
      "github": "https://github.com/Soumyodeep-Dey",
      "linkedin": "https://www.linkedin.com/in/soumyodeep-dey/",
    "twitter": "https://twitter.com/Soumyodeep2003",
 "portfolio": "https://soumyodeep-dey.vercel.app/"
    }

Copilot AI review requested due to automatic review settings February 15, 2026 08:18

Copilot started reviewing on behalf of Sappymukherjee214 February 15, 2026 08:18 View session

Copilot AI reviewed Feb 15, 2026

View reviewed changes

priyankarpal added apertre3.0 medium labels Feb 16, 2026

priyankarpal requested changes Feb 16, 2026

View reviewed changes

Merge branch 'main' into adding-volunteer-section

3c2f5c0

Conversation

Sappymukherjee214 commented Feb 15, 2026

Summary

Changes

Testing

Related Issue

Screenshot

Notes

Uh oh!

netlify bot commented Feb 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for reactkolkata ready!

Uh oh!

Sappymukherjee214 commented Feb 15, 2026

Uh oh!

Sappymukherjee214 commented Feb 15, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

priyankarpal commented Feb 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Sappymukherjee214 commented Feb 15, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

priyankarpal commented Feb 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

netlify bot commented Feb 15, 2026 •

edited

Loading

priyankarpal commented Feb 15, 2026 •

edited

Loading

priyankarpal commented Feb 16, 2026 •

edited

Loading