Skip to content

Comments

Teemu/feature/628 implement reusable cta section component for main page#630

Open
temez26 wants to merge 8 commits intodevfrom
teemu/feature/628-Implement-reusable-cta-section-component-for-main-page
Open

Teemu/feature/628 implement reusable cta section component for main page#630
temez26 wants to merge 8 commits intodevfrom
teemu/feature/628-Implement-reusable-cta-section-component-for-main-page

Conversation

@temez26
Copy link
Contributor

@temez26 temez26 commented Feb 18, 2026

📄 Pull Request Overview

Closes #628

🔧 Changes Made

  1. Introduced a new reusable CTASection component in shared/ui/CtaSection

    • Supports image positioning (left/right)
    • Supports mobile button layout (row/column)
    • Accepts flexible props: actions, description, extraText
    • Centralizes responsive behavior and styling
    • Contains JSDoc documentation
    • Added Google Play badge asset
  2. Refactored PlayWithUs and ContactSection in preparedPages/MainPage/_components/sections

    • Replaced custom layouts with the new CTASection
    • Updated related tests to align with the new structure
    • Removed legacy SCSS styles
    • Minor updates to i18n JSON files and _getPage.ts for button texts

Checklist Before Submission

  • Functionality: I have tested my code, and it works as expected.
  • JSDoc: I have added or updated JSDoc comments for all relevant code.
  • Debugging: No console.log() or other debugging statements are left.
  • Clean Code: Removed commented-out or unnecessary code.
  • Tests: Added new tests or updated existing ones for the changes made.
  • Documentation: Documentation has been updated (if applicable).

📝 Additional Information

Provide any additional context or information that reviewers may need to know:

  • Screenshots: [Include any screenshots or videos if the changes affect the UI]
  • Dependencies: [Mention any new dependencies or breaking changes]
  • Known Issues: [List any known issues or limitations]

- Implemented a new CTASection component with responsive design and customizable links.
- Added localization strings for English and Finnish, including Discord link text.
- Introduced Google Play badge image asset.
- used the ctasection in contactsection & playwithus components
- updated test cases in playwithus.test.tsx
…ns/links; support mobile button layout for selecting flex-direction
…set to reduce duplication.

- Moved googleplaybadge.svg to the correct assets location.
- Removed the `links` prop from `CTASection` and updated usages to align with the related GitHub issue.
- Added JSDoc to `CTASection`
general SharedButton to reduce duplication and improve maintainability.
Copy link
Member

@Skoivumaki Skoivumaki left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Implement:

  • If vw is wider than 1920px, only then round the corners of component. Otherwise keep them "square" like in the footer.
Image

See comments:

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not an icon really. Move to images for clarity.

"newsSection-title": "ALT Uutiset",
"newsSection-seeMore": "Lue lisää"
"newsSection-seeMore": "Lue lisää",
"contact-discordLinkText": "Liity Discord-ryhmään"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pretty sure its called "yhteisö" and not "ryhmä". Will wait to see what UI/UX has to say about it.

/**
* Call-to-action section with image and optional actions.
*
* @example
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good documentation. 👍

…21px, and move googleplaybadge.png from icons/ to images/
@temez26
Copy link
Contributor Author

temez26 commented Feb 20, 2026

The other fixes are done 👍
I just need confirmation on what the Discord text should say.

@temez26 temez26 requested a review from Skoivumaki February 20, 2026 07:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants