diff --git a/components/FeaturedOpportunities.tsx b/components/FeaturedOpportunities.tsx new file mode 100644 index 0000000..8f7a76f --- /dev/null +++ b/components/FeaturedOpportunities.tsx @@ -0,0 +1,129 @@ +import React, { useState } from 'react'; + +interface BountyOpportunity { + id: string; + title: string; + category: 'Development' | 'Design' | 'Content' | 'Community'; + rewardUsdc: number; + rewardSol: number; + tags: string[]; + daysLeft: number; +} + +const mockBounties: BountyOpportunity[] = [ + { + id: "g-01", + title: "Solana Anchor Smart Contract Security Optimization", + category: "Development", + rewardUsdc: 2500, + rewardSol: 18.5, + tags: ["Rust", "Anchor", "Solana"], + daysLeft: 4 + }, + { + id: "g-02", + title: "DeFi App UI/UX Redesign & Interactive Component Kit", + category: "Design", + rewardUsdc: 1200, + rewardSol: 9.0, + tags: ["Figma", "Tailwind", "UI/UX"], + daysLeft: 6 + }, + { + id: "g-03", + title: "Technical Documentation & On-Chain Bounty Guidebook", + category: "Content", + rewardUsdc: 850, + rewardSol: 6.2, + tags: ["Docs", "Markdown", "Ecosystem"], + daysLeft: 3 + } +]; + +export const FeaturedOpportunities = () => { + const [activeFilter, setActiveFilter] = useState('All'); + const categories = ['All', 'Development', 'Design', 'Content', 'Community']; + + const filtered = activeFilter === 'All' + ? mockBounties + : mockBounties.filter(b => b.category === activeFilter); + + return ( +
+
+
+
+ + Live Opportunities + +

+ Featured Opportunities +

+
+
+ {categories.map((cat) => ( + + ))} +
+
+ +
+ {filtered.map((bounty) => ( +
+
+
+ {bounty.category} + + {bounty.daysLeft}d left + +
+

+ {bounty.title} +

+
+ {bounty.tags.map(t => ( + + #{t} + + ))} +
+
+ +
+
+
+ ${bounty.rewardUsdc.toLocaleString()} USDC +
+
+ ≈ {bounty.rewardSol} SOL +
+
+ + Apply Task + +
+
+ ))} +
+
+
+ ); +};