Design a mobile-first UI for a youth political engagement app called APC Youth Wing, built for Nigerian Gen Z and young millennials during campaign season. This is NOT a government portal or corporate app — it should feel like a movement, closer to Duolingo's playful energy or a well-designed Gen Z social app than a party website.
Visual Direction
Color palette: APC green as an accent color only, not a background flood. Primarily white/light neutral backgrounds with generous white space. Pair green with a punchy secondary color (gold or orange-red) used for CTAs, badges, and gamified elements. Avoid looking like an official government form — this should feel energetic and youth-made.
Typography: Bold, condensed sans-serif for headlines (Space Grotesk, Sora, or Clash Display style) paired with a highly readable body font (Inter or Manrope). Headlines should feel confident and a little irreverent.
Overall tone: Bold, modern, high-contrast, optimistic — think a youth-led digital organizing movement, not a bureaucratic app. Rounded corners, soft shadows, card-based layouts throughout.
Imagery style: Vibrant, high-energy — if using illustrations or icons, avoid generic corporate stock-photo feel; lean into bold flat illustration or authentic photography treatment.
Screens to Generate
Horizontal story-style scroller at the top ("happening now": live events, urgent shares, trending polls) — Instagram Stories-style circular avatars with a colored ring
Below: scrollable feed of cards mixing campaign news, featured events, and a "quick stats" card (member count, events this week)
A pinned "Action of the Week" card with a bold CTA button
Bottom tabs: Home, Events, Community, Profile
A hamburger/drawer menu (or top-left icon) revealing additional sections: Civic Hub, Business, Learning, Share Kit, Settings
Drawer should feel distinct from the tab bar — maybe a full-screen slide-in panel with large tappable rows, icons, and short descriptions per section
Toggle between List view and Map view
Each event card: cover image, title, date/time, location (state/LGA), RSVP button, attendee count
Filter chips at the top (by state, by date range)
Tab/segmented control: Forex | Crypto | NGX | Commodities
Each tab shows a scrollable list of items with: name, current value, small sparkline chart, percentage change (green/red), "last updated" timestamp
Clean, data-dense but not overwhelming — think Cash App or Robinhood's market list styling, adapted to this app's color palette
Grid or list of course cards (financial literacy, civic education, entrepreneurship)
Each card: cover image, title, progress bar (if started), estimated duration, difficulty badge
Lesson detail view: swipeable card format for content, progress dots at top, "mark complete" CTA
User's own rank + points prominently displayed at top (large number, animated feel)
Leaderboard list below: rank, avatar, name, points, small badge icons
Toggle between "My State," "My University," and "National" leaderboards
Referral code displayed with a copy/share button
Swipeable card stack for manifesto points (Tinder-card style: swipe through short, punchy policy explanations)
Separate "Know Your Ward" tool: search/select state → LGA → ward, showing polling unit info and countdown to election day
Quiz mode entry point: card with a "Test Your Knowledge" CTA and point reward shown upfront
Grid of template thumbnails (like an Instagram Story template picker)
Tapping a template opens a preview with one-tap share icons for WhatsApp, Instagram, X, TikTok
Avatar, name, state/LGA, points total, badges earned (as a horizontal scroll of badge icons)
Settings access, language toggle, PVC status indicator
Component Requirements
Use React with Tailwind CSS
Card-based components throughout, consistent border-radius and shadow system
Include a reusable Badge, ProgressBar, EventCard, LeaderboardRow, and MarketListItem component
Design for a narrow mobile viewport (390px) first, but keep components flexible enough to adapt to a web layout later
Include hover/active states even though this is mobile-first, since a web version will reuse the same design language
What I need from you
Generate the Home/Feed screen and the Business (Market Data) screen first, fully styled and componen
tized, so I can review the visual direction before generating the rest.