Skip to content

feat: Implementation of CTA section (issue#25) - #95

Open
IshimweIsaac wants to merge 2 commits into
react-rwanda:mainfrom
IshimweIsaac:feat/cta-section
Open

feat: Implementation of CTA section (issue#25)#95
IshimweIsaac wants to merge 2 commits into
react-rwanda:mainfrom
IshimweIsaac:feat/cta-section

Conversation

@IshimweIsaac

Copy link
Copy Markdown

Overview

This PR implements the Call to Action (CTA) banner component for the landing page as outlined in Issue #25. It closely adheres to the provided Figma mockups and design guidelines.

Closes #25

What was done

  • Component Created: Built components/home/cta-section.tsx.
  • Figma Alignment:
    • Implemented the full-width dark (bg-neutral-950) section container.
    • Set the exact font sizing: text-4xl lg:text-[40px] with font-extrabold for the headline to match Figma wrapping perfectly.
    • Styled the sub-paragraph text to 14px (text-[14px] text-neutral-400).
    • Added the decorative background code snippet with a muted opacity (opacity-20).
  • Responsive Layout:
    • Used CSS Grid (lg:grid-cols-[1fr_auto]) to position the text on the left and the code snippet on the right for desktop screens.
    • Ensured the primary ("Join Discord") and secondary ("Sponsor Community") buttons stack properly and go full-width on mobile devices (flex-col sm:flex-row, w-full sm:w-auto).
  • Color Fixes:
    • Updated the default styling in components/ui/button.tsx to ensure the accent variant matches the exact cyan color requested by the design team.

Screenshots

(Desktop view showing layout and font-wrapping)

Screenshot From 2026-05-28 13-39-01

Notes for Reviewer

Comment thread components/home/cta-section.tsx Outdated
Comment on lines +5 to +16
const CODE_DECORATION = `export default function Community() {
return (
<Layout>
<KigaliHub>
<Developers
count={1200}
vibe="High Energy"
/>
</KigaliHub>
</Layout>
)
}`;

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

It would be better to put this in a separate file and import it here, just to reserve components files for components and other contents like stabs, data and so on in their respective files

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Thank you Janvier for adressing that out, I've moved the CODE_DECORATION constant into a separate data.ts file now the component is clean and the content is not in the logic anymore
!!!

@IshimweIsaac IshimweIsaac self-assigned this Jun 1, 2026
@IshimweIsaac IshimweIsaac changed the title Implementation of CTA section feat: Implementation of CTA section Jun 1, 2026
@IshimweIsaac IshimweIsaac changed the title feat: Implementation of CTA section feat: Implementation of CTA section (issue#25) Jun 1, 2026

@Habinezajanvier Habinezajanvier left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

LGTM

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.

ISSUE-025 — Landing CTA banner

2 participants