Design and implement a Crowdfunding Product Page, similar to Kickstarter-style layouts.
The page should display a product overview, funding status, remaining days, backer count, and reward tiers that users can choose from.
This is a UI-focused issue: no backend is required, but the page must visually simulate crowdfunding interactions (e.g., selecting a pledge tier).
The outcome should be a clean, responsive, and interactive page suitable for a crowdfunding campaign.
📋 Requirements
Functional Requirements
-Product header with title, description, and product image.
-Statistics section showing:
-Total amount backed
-Total number of backers
-Days left
-A progress bar showing percentage funded
Reward tiers section containing:
-Tier title
-Minimum pledge
-Description
-“Select Reward” button
-Modal or section where users choose a pledge amount (static UI — no real payments).
-Hover and focus states for all interactive elements.
Non-Functional Requirements
-Minimal, modern design inspired by crowdfunding platforms.
-Smooth animations for dropdowns/modals (if included).
-Semantic HTML where appropriate.
🧩 Tasks / Checklist
🎨 Layout & Structure
-Build hero/product header section (image, title, short description).
-Create stats section with amount backed, backers, and days left.
-Add progress bar with percentage fill.
-Build reward tier cards (3–5 tiers recommended).
-Add a “Select Reward” or “Back this project” interactive element.
🧭 Interactions
-Create a modal or expandable section to input a pledge amount (UI-only).
-Add hover and focus states for all buttons and cards.
-Add smooth transitions for opening/closing modal (if used).
-Ensure values adjust visually (static or sample values are fine).
♿ Accessibility
-Provide visible focus outlines.
-Add alt text for product images.
🧪 Testing
-Test progress bar display and responsiveness.
-Test modal open/close behavior.
-Verify hover/focus states.
🟩 Acceptance Criteria
✔ Functional
-Page shows product info, stats, and reward tiers clearly.
-Progress bar accurately visualizes funding completion.
-“Select Reward” triggers a modal or expandable UI element.
-Modal or section displays pledge input UI (static).
-All interactions have hover & focus states.
✔ UI/UX
-Layout appears clean, modern, and consistent.
-Reward tiers are visually distinguishable.
-Page looks balanced across screen sizes.
-Animations (if added) are smooth and not distracting.
✔ Responsiveness
-Fully responsive layout with no broken text or overlapping sections.
-Hero, stats, and tier cards adapt well on mobile.
✔ Accessibility
-Keyboard-accessible interactions.
-Focus states visible.
-Alt text provided.
Mockup:
Design and implement a Crowdfunding Product Page, similar to Kickstarter-style layouts.
The page should display a product overview, funding status, remaining days, backer count, and reward tiers that users can choose from.
This is a UI-focused issue: no backend is required, but the page must visually simulate crowdfunding interactions (e.g., selecting a pledge tier).
The outcome should be a clean, responsive, and interactive page suitable for a crowdfunding campaign.
📋 Requirements
Functional Requirements
-Product header with title, description, and product image.
-Statistics section showing:
-Total amount backed
-Total number of backers
-Days left
-A progress bar showing percentage funded
Reward tiers section containing:
-Tier title
-Minimum pledge
-Description
-“Select Reward” button
-Modal or section where users choose a pledge amount (static UI — no real payments).
-Hover and focus states for all interactive elements.
Non-Functional Requirements
-Minimal, modern design inspired by crowdfunding platforms.
-Smooth animations for dropdowns/modals (if included).
-Semantic HTML where appropriate.
🧩 Tasks / Checklist
🎨 Layout & Structure
-Build hero/product header section (image, title, short description).
-Create stats section with amount backed, backers, and days left.
-Add progress bar with percentage fill.
-Build reward tier cards (3–5 tiers recommended).
-Add a “Select Reward” or “Back this project” interactive element.
🧭 Interactions
-Create a modal or expandable section to input a pledge amount (UI-only).
-Add hover and focus states for all buttons and cards.
-Add smooth transitions for opening/closing modal (if used).
-Ensure values adjust visually (static or sample values are fine).
♿ Accessibility
-Provide visible focus outlines.
-Add alt text for product images.
🧪 Testing
-Test progress bar display and responsiveness.
-Test modal open/close behavior.
-Verify hover/focus states.
🟩 Acceptance Criteria
✔ Functional
-Page shows product info, stats, and reward tiers clearly.
-Progress bar accurately visualizes funding completion.
-“Select Reward” triggers a modal or expandable UI element.
-Modal or section displays pledge input UI (static).
-All interactions have hover & focus states.
✔ UI/UX
-Layout appears clean, modern, and consistent.
-Reward tiers are visually distinguishable.
-Page looks balanced across screen sizes.
-Animations (if added) are smooth and not distracting.
✔ Responsiveness
-Fully responsive layout with no broken text or overlapping sections.
-Hero, stats, and tier cards adapt well on mobile.
✔ Accessibility
-Keyboard-accessible interactions.
-Focus states visible.
-Alt text provided.
Mockup: