Create a modern, interactive UI for OpenReward, a decentralized Web3 bounty platform where users can list issues as bounties and earn cryptocurrency rewards for solving them. The design should embody the following specifications:
Color Scheme & Visual Style
Primary palette: GitHub-inspired with deep forest green (#2EA043) and oceanic blue (#0969DA) as accent colors
Secondary palette: Soft grays (#F6F8FA for backgrounds) and rich blacks (#24292F for text)
Incorporate subtle acrylic/glassmorphism effects with 15-20% opacity for cards and containers
Use frosted glass effects for modal backgrounds and dropdown menus
Add depth with subtle shadows (8px blur, 2px y-offset, 5% opacity)
Typography Primary font: Inter with variable weights (400 for body, 600 for headings)
Secondary accent font: Mona Sans for feature headings
Line height: 1.5 for body text, 1.2 for headings
Text sizes: Fluid scale from 14px (mobile) to 16px (desktop) for body text
Hero Section Include a hero section with:
Bold, gradient-animated heading: "Revolutionize Open Source Contributions"
Compelling subheading: "List bounties, solve challenges, and earn rewards in a transparent, decentralized ecosystem"
Animated illustration showing the bounty lifecycle with Framer Motion animations
Two prominent CTA buttons: "Explore Bounties" (primary) and "List a Bounty" (secondary)
"See on GitHub" button with subtle GitHub icon and hover animation
Background with subtle animated gradient mesh (very light, not distracting)
Navigation Clean, minimal navbar with frosted glass effect on scroll
Logo on left, navigation links in center, connect wallet button on right
Mobile: Hamburger menu with smooth animation for opening/closing
Include: Home, Explore, Dashboard, About sections
Bounty Cards Implement staggered animation when cards appear using Framer Motion
Cards should have subtle hover states with elevation change
Include: Bounty title, reward amount, difficulty tag, time remaining
Progress indicator showing bounty status
Avatar stack for users working on the bounty
Animations Using motion/react:
Implement page transitions with AnimatePresence
Add micro-interactions for buttons and interactive elements
Create a custom loading spinner with the OpenReward logo
Implement scroll-triggered animations for content sections
Add subtle parallax effects for background elements
Animate number counters for statistics (total bounties, rewards paid, etc.)
Key Features to Showcase Interactive bounty explorer with filtering capabilities
User profiles with reputation scores and completed bounties
Wallet connection interface with multiple wallet options
Activity feed showing recent bounty activities
Leaderboard of top contributors
Additional Elements Toast notifications with subtle slide-in animations
Custom form elements with validation animations
Dark/light mode toggle with smooth transition
Loading states with skeleton screens instead of spinners where appropriate
Confetti animation when a bounty is successfully completed
Responsive Considerations Fluid layouts that adapt seamlessly from mobile to desktop
Touch-friendly interactive elements on mobile
Simplified navigation on smaller screens
Maintain visual hierarchy across all device sizes
The design should feel premium and professional while maintaining excellent usability. Avoid generic component libraries like Shadcn or Aceternity UI - instead, create custom components with unique animations and interactions that give OpenReward a distinctive identity in the Web3 space.
I'll create a modern, interactive UI for OpenReward with custom components, animations, and a distinctive identity. Let's build this out with a focus on premium design and excellent usability.
I've created a modern, interactive UI for OpenReward with the following features:
Custom Design System
#2EA043) and oceanic blue (#0969DA)Hero Section
Navigation
Bounty Cards
Animations
Additional Features
The UI has a premium, professional feel while maintaining excellent usability across all device sizes.
change the navbar completely make someother designb for it also do not give any logo to it becuse same type of navbar i have used also in my previous project and else everything is great
I'll completely redesign the navbar with a unique approach while keeping everything else the same. Here's a new navbar design without a logo:
I've completely redesigned the navbar with a unique, minimalist approach:
Centered Navigation Pills - Created a distinctive pill-style navigation in the center with:
The new navbar has a completely different visual style while maintaining all the functionality of the original design. It's still responsive, includes the wallet connection, and has the theme toggle, but with a fresh approach that won't look like your previous project.
All other components remain unchanged as you mentioned everything else was great.
make the same ui in dark theme also