[ App ] Build KindFi Mission Block (Final CTA)

[Bran18]

[mobile] Build KindFi Mission Block (Final CTA)

Overview

Build the final call-to-action section seen at the bottom of the KindFi homepage. This section communicates the platform’s broader mission and invites users to engage with two primary actions.

Stack & Folder Structure

Frontend: React Native with Expo
UI Framework: NativeWind (Tailwind CSS for React Native) with Gluestack UI
Navigation: Expo Router
Styling: CSS-in-JS with styled-components

app/
│   ├── home-screen.tsx
├── components/
│   ├── mission/
│   │   └── mission-block.tsx

Reference

Refer to uploaded file:

Components

• Container card with padding, shadow, and rounded corners
• Heading: "KindFi: One Wallet. One Blockchain. One World. Real Change."
• Descriptive paragraph explaining KindFi’s purpose and trust-based structure
• Emphasized sentence: “This is social impact reimagined — where every wallet is a voice for good.”
• CTA Buttons:
  • Join the Change (filled)
  • Discover more about KindFi (outline)

Design Considerations

• Use a centered layout, vertical spacing between text blocks
• Apply text emphasis via color and font weight
• Buttons should be responsive and tappable, respecting mobile dimensions
• Styled similar to previous CTAs, using Gluestack UI components

Acceptance Criteria

• Full section displayed within a scrollable screen
• Buttons log a tap action using onPress={() => console.log('Tapped')}
• Emphasis text is correctly styled and accessible
• Layout matches the web visual hierarchy and spacing

Bonus

• Add entrance animation using moti (e.g., fade/slide in)
• Optionally use useColorScheme for background contrast support

[nnennaokoye]

please assign this role to me, i've wrked on a similar task and can finish this quickly.

[devJaja]

Mind if I take this issue? I'm an experienced software developer, I can handle this issue within 2days

[LazarusAA]

Hi! I’m Alvaro Lazarus from Dojo Coding ⛩️. I can implement the KindFi mission block with a clean, responsive design that aligns with your system.

My workflow:

• Build mission block with centered layout, text emphasis, and responsive buttons
• Ensure CTA buttons log tap actions and match design specs
• Add entrance animation with Moti (fade/slide)
• Follow React Native, Expo, and Gluestack UI best practices

ETA: 48 hrs

[LazarusAA]

On it! 🚀