You are a senior product designer building mobile-first sports-betting UI that looks & feels exactly like www.betPawa.ng
############################################
BRAND DNA
Energetic · trustworthy · minimalist · data-dense but easy to scan.
Voice: concise, second-person (“Place Bet”, “Deposit now”).
Icon style: Lucide icons, 1.5 px stroke, rounded ends, flat fills only when status-critical.
############################################
COLOUR TOKENS
--bp-primary-green #9CE800 /* CTAs, WIN badges, highlights /
--bp-charcoal #252A2D / top bar, bottom nav BG /
--bp-off-white #FFFFFF / backdrops, cards /
--bp-light-grey #F2F4F7 / dividers, disabled states /
--bp-warning-orange #FF7A00 / boosted-odds flame, “Hot” tags*/
--bp-danger-red #CC371B /* LOSS badge, error text /
--bp-info-blue #22BFDB / links & educational banners */
############################################
TYPOGRAPHY
Primary font: Inter (fallback Roboto, Helvetica).
Weights → 700 balances & odds, 600 headers, 400 body, 300 fine print.
Line-height 1.2.
############################################
SPACING & SIZES
Base grid 4 dp; paddings ×8.
Corner radius: 4 dp chips & inputs; 8 dp sheets & cards; 12 dp CTAs.
Top app-bar 48 dp; bottom nav 56 dp.
Odds chip ≈ 64 × 36 dp (auto-wide).
############################################
CORE COMPONENTS
- Top bar — ☰, betPawa (Interfont, Ultra Bold Italic, pawa will be colored with --bp-primary-green, 🔍, balance pill (e.g. “₦ 370,200”) with small “＋” deposit FAB.
- Match list card — timestamp, league path, two-line team names, three odds chips (1 / X / 2).
• Boosted chip → orange outline + flame icon. - Bet-slip bottom drawer — white sheet, rounded top; each leg row shows teams, market, odd, remove ×.
• Sticky footer: primary-greenPLACE BET(full width, no<button>tag); below it a row for Odds · Potential Winnings · Win-Bonus · Payout. - State badges — WIN green/white, LOSS red/white, VOID grey outline.
- Forms — outline inputs 4 dp; focus ring primary-green; checkbox = green tick on white square.
############################################
DATA INTEGRATION
Fetch upcoming events from https://pawa-api.replit.app/gh/events at load.
For each event in data[] render:
• Competition path, two-line event_name, start-time (localised), 1X2 market and odds using sport-card.
• Highlight selection with "hot": 1 via orange outline + flame icon.
• Support “Add to Bet-Slip” on selection tap (haptic micro-feedback).
############################################
INTERACTION & MOTION
Sheets & drawers slide vertical 250 ms ease-out.
Boosted/Hot chip pulses opacity 80 → 100 % once (1 s).
Active bottom-nav icon has 36 dp green halo (40 % opacity).
All text content must be HTML-escaped.
############################################
ENGINEERING RULES
- Always use Shadcn and Tailwind.
- Always use Lucide Icon; do not use
<svg>tags. - Text content must be HTML-escaped.
- Use primary color.
- Always integrates with your custom design system (including tailwind.config.ts and global.css).
- Always automatically reads markdown documentation from the
guidelines/folder in your project. - Always uses theme colors, radius, fonts, animations, and variables defined in your Tailwind + CSS custom properties, including support for
--font-roboto. - Always renders components using Next.js App Router (unless otherwise specified) and supports shadcn/ui by default.
- If you can, you should use
sport-cardcomponent. - Do not create
<button>or<a>tags.
############################################
ACCESSIBILITY
All colour/text pairs ≥ 4.5 : 1 contrast (WCAG AA).
Odds chip “selected” state announces: “Odds <numeric value> selected”.
############################################
LEGAL
Output must evoke but not duplicate trademarked betPawa assets; use {BrandLogo} placeholder for logos.
############################################
🔲 IDEA DROP-ZONE 🔲
Place a CTA section called pawaGenius that will be about a feature that will load a bottom sheet where you will select the desired odds and we will generate sport-event suggestions for you to add to your betslip individually or all together.
The CTA section in the homepage will have a title, a short subtitle that gives more context for the feature, and then a button called “Generate”.
Okay, I'll help you design and build the mobile-first sports-betting UI based on the detailed specifications and visual references you've provided. We'll aim to capture the energetic, trustworthy, and minimalist feel of betPawa.ng.
Here's the plan:
- Set up the foundational styling with
tailwind.config.tsandapp/globals.css. - Create essential type definitions in
app/types.ts. - Implement the core UI components:
BrandLogo,TopBar,BottomNav,OddsChip,SportCard(for match listings),BetslipDrawer,StateBadge, and the newPawaGeniusCtawith its correspondingPawaGeniusSheet. - Develop the main page (
app/page.tsx) to fetch and display upcoming events, manage betslip state, and handle interactions.
Let's start building!
This set of components and configurations should provide a strong foundation for your sports-betting UI.
Key features implemented:
- Styling: Custom Tailwind configuration and global CSS to match the brand DNA (colors, fonts, spacing, radii).
- Core Layout:
TopBarandBottomNavcomponents, providing the main app frame. - Event Display:
SportCardto list upcoming matches with details andOddsChipcomponents for 1X2 markets. Boosted odds are visually indicated. - Betslip: A functional
BetslipDrawerthat slides from the bottom, showing selected items, stake input, potential winnings, and a "Place Bet" CTA. - pawaGenius: A
PawaGeniusCtasection on the main page and a basicPawaGeniusSheetstructure. - Data Fetching: The main page fetches event data from the provided API.
- Interactivity: Odds selection, adding/removing from betslip, clearing betslip, placing a (mock) bet.
- Accessibility: Basic ARIA attributes on interactive elements and a live region for announcements.
- Mobile-First: Styles are geared towards mobile viewports.
- No
<button>or<a>tags: Interactive elements usedivs withrole="button"andtabIndex="0".
To further enhance this:
- Implement the actual logic for pawaGenius suggestions.
- Add more detailed market views (as seen in
Screenshot 2025-05-29 at 5.06.09 PM.png). - Flesh out other sections like "My Bets", "Account", "Menu", and "Search".
- Implement form components for login, registration, deposit, etc., adhering to the specified styles.
- Add more sophisticated state management if the application grows (e.g., Zustand or Jotai).
- Refine animations and transitions for a smoother feel.
- Thoroughly test for accessibility and responsiveness.
You can now use the Vercel CLI or the "Download Code" button in the preview to integrate these components into your Next.js project. Remember to install any inferred dependencies (like lucide-react).
The code returns the following error:
Failed to load "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;900&family=Roboto:wght@300;400;500;700&display=swap" from "blob:https://kzmiieqiswn175u04ar9.lite.vusercontent.net/8f32bea8-9b65-4635-b659-f24615c2b17c - see network log for details.", make sure it exists.
Revise the code to address the error.
I was previewing: /
You're right, loading external fonts directly via @import in CSS can sometimes be problematic in sandboxed environments or due to CSP. The recommended way to handle Google Fonts in Next.js is by using the next/font module. This optimizes font loading and can help avoid such issues.
I'll provide the necessary changes to app/layout.tsx to use next/font and remove the direct @import from app/globals.css.
By making these changes:
app/layout.tsxnow correctly imports and configures theInterandRobotofonts usingnext/font. The specified weights are included. These fonts are then applied globally via CSS variables (--font-inter,--font-roboto).- The problematic
@importline inapp/globals.cssis removed, asnext/fonthandles the font loading.
Your tailwind.config.ts is already set up to use these CSS variables for the fontFamily definitions, so everything should work together seamlessly. This approach is more robust and optimized for Next.js applications.