latest community shoutouts

\n \n {loading ? : shoutouts.length === 0 ? : \n {shoutouts.map((shoutout, index) => \n \n )}\n }\n \n {}\n

weekly rewards pool

\n \n

\n \n Top performers share the weekly $HYH pool\n

\n \n

\n 1st place\n 60%\n

\n \n

\n 2nd place\n 25%\n

\n \n

\n 3rd place\n 15%\n

\n \n {weeklyLeaders.length > 0 ?

current leaders this week

\n {weeklyLeaders.map((leader, i) => openUserProfile(leader)}>\n \n {i + 1}\n \n \n

\n \n {leader.username}\n \n

\n {leader.points}\n pts\n

\n \n

\n {i === 0 ? '60%' : i === 1 ? '25%' : i === 2 ? '15%' : '0%'}\n

\n )}\n

\n no weekly leaders yet! start giving and receiving shoutouts to appear here.\n

}\n

\n }\n\n {activeTab === 'give' && \n

give someone props!

\n \n

\n your balance:\n {hyhBalance.toFixed(2)} $HYH\n

\n \n \n \n \n random shoutout\n \n

\n \n

\n recipient's twitter handle\n

\n \n

\n setRecipientHandle(e.target.value)} placeholder=\"@username\" className={`w-full pl-10 px-4 py-3 rounded-2xl ${darkMode ? 'bg-white/10' : 'bg-white/40'} ${darkMode ? 'placeholder-white/40' : 'placeholder-[#222222]/40'} focus:outline-none focus:ring-2 focus:ring-[#f8c8dc] ${darkMode ? 'text-white' : 'text-[#222222]'} backdrop-blur-md border border-white/20`} required />\n

\n\n

\n \n what's amazing about them?\n \n

setShoutoutMessage(e.target.value)} placeholder=\"they helped me with my project and went above and beyond!\" className={`w-full px-4 py-3 rounded-2xl ${darkMode ? 'bg-white/10' : 'bg-white/40'} ${darkMode ? 'placeholder-white/40' : 'placeholder-[#222222]/40'} focus:outline-none focus:ring-2 focus:ring-[#f8c8dc] ${darkMode ? 'text-white' : 'text-[#222222]'} backdrop-blur-md border border-white/20`} rows={4} required />\n                </div>\n                \n                <div className=\"space-y-4\">\n                  <div className=\"flex items-center bg-gradient-to-r from-[#f8c8dc]/20 to-[#cad7ff]/20 p-4 rounded-2xl\">\n                    <input type=\"checkbox\" id=\"boost\" checked={boostShoutout} onChange={() => {\n                  setBoostShoutout(!boostShoutout);\n                  if (!boostShoutout) setShoutoutPowerUp('none');\n                }} className=\"w-5 h-5 rounded border-white/30 text-[#f8c8dc] focus:ring-[#f8c8dc] mr-3\" />\n                    <div className=\"flex-1\">\n                      <label htmlFor=\"boost\" className={`font-medium lowercase ${darkMode ? 'text-white' : 'text-[#222222]'}`}>\n                        boost this shoutout! (0.03 $HYH)\n                      </label>\n                      <div className={`text-sm ${darkMode ? 'text-white/70' : 'text-[#222222]/70'} pl-7`}>\n                        <p>recipient earns 2x points (20 instead of 10)</p>\n                      </div>\n                    </div>\n                    <div className=\"flex items-center\">\n                      <Star size={18} className=\"text-[#fff4aa] mr-1\" />\n                      <span className={`text-sm font-bold ${darkMode ? 'text-[#fff4aa]' : 'text-[#222222]'}`}>2x</span>\n                    </div>\n                  </div>\n                  \n                  <div className={`p-4 rounded-2xl bg-gradient-to-r from-[#fff4aa]/20 via-[#d8f9d0]/20 to-[#cad7ff]/20 ${shoutoutPowerUp !== 'none' || !boostShoutout ? 'opacity-100' : 'opacity-50'}`}>\n                    <div className=\"mb-3\">\n                      <h3 className={`font-bold lowercase mb-1 ${darkMode ? 'text-white' : 'text-[#222222]'}`}>\n                        shoutout power-ups\n                      </h3>\n                      <p className={`text-sm ${darkMode ? 'text-white/70' : 'text-[#222222]/70'}`}>\n                        enhance your shoutout with special effects (0.05 $HYH each)\n                      </p>\n                    </div>\n                    \n                    <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n                      <div className={`p-3 rounded-xl flex items-center cursor-pointer transition-all ${shoutoutPowerUp === 'fire' ? `${darkMode ? 'bg-white/30' : 'bg-white/60'} border-2 border-orange-400` : `${darkMode ? 'bg-white/10' : 'bg-white/30'} border border-white/30 hover:border-orange-400/50`} ${!boostShoutout ? 'pointer-events-none opacity-50' : ''}`} onClick={() => boostShoutout && setShoutoutPowerUp(shoutoutPowerUp === 'fire' ? 'none' : 'fire')}>\n                        <div className=\"w-10 h-10 rounded-full bg-gradient-to-r from-orange-400 to-red-500 flex items-center justify-center mr-3 shadow-lg\">\n                          <Flame size={20} className=\"text-white\" />\n                        </div>\n                        <div>\n                          <h4 className={`font-bold text-sm lowercase ${darkMode ? 'text-white' : 'text-[#222222]'}`}>\n                            🔥 fire drop\n                          </h4>\n                          <p className={`text-xs ${darkMode ? 'text-white/70' : 'text-[#222222]/70'}`}>\n                            3x points to recipient\n                          </p>\n                        </div>\n                      </div>\n                      \n                      <div className={`p-3 rounded-xl flex items-center cursor-pointer transition-all ${shoutoutPowerUp === 'cosmic' ? `${darkMode ? 'bg-white/30' : 'bg-white/60'} border-2 border-blue-400` : `${darkMode ? 'bg-white/10' : 'bg-white/30'} border border-white/30 hover:border-blue-400/50`} ${!boostShoutout ? 'pointer-events-none opacity-50' : ''}`} onClick={() => boostShoutout && setShoutoutPowerUp(shoutoutPowerUp === 'cosmic' ? 'none' : 'cosmic')}>\n                        <div className=\"w-10 h-10 rounded-full bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center mr-3 shadow-lg\">\n                          <Pin size={20} className=\"text-white\" />\n                        </div>\n                        <div>\n                          <h4 className={`font-bold text-sm lowercase ${darkMode ? 'text-white' : 'text-[#222222]'}`}>\n                            💫 cosmic shout\n                          </h4>\n                          <p className={`text-xs ${darkMode ? 'text-white/70' : 'text-[#222222]/70'}`}>\n                            pins for 1 hour at top\n                          </p>\n                        </div>\n                      </div>\n                    </div>\n                    \n                    {!boostShoutout && <div className=\"mt-2 text-xs text-center text-orange-500\">\n                        enable boost first to unlock power-ups\n                      </div>}\n                  </div>\n                </div>\n                \n                <div className=\"bg-white/20 backdrop-blur-md rounded-xl p-4 border border-white/30 shadow-[0_4px_16px_rgba(0,0,0,0.03)]\">\n                  <div className=\"flex items-center mb-2\">\n                    <Twitter size={18} className={`mr-2 ${darkMode ? 'text-[#1DA1F2]' : 'text-[#1DA1F2]'}`} />\n                    <span className={`lowercase font-medium ${darkMode ? 'text-white' : 'text-[#222222]'}`}>this will create a tweet from your account</span>\n                  </div>\n                  <div className={`text-sm ${darkMode ? 'text-white/70' : 'text-[#222222]/70'} pl-7 space-y-2`}>\n                    <p>your shoutout will be published as a tweet from your twitter account</p>\n                    <p className=\"font-medium\">tweet preview:</p>\n                    <div className={`${darkMode ? 'bg-white/10' : 'bg-white/20'} p-2 rounded-lg font-mono text-xs border border-white/10`}>\n                      {shoutoutPowerUp === 'fire' ? '🔥 ' : shoutoutPowerUp === 'cosmic' ? '💫 ' : ''}giving props to @{recipientHandle || 'username'} 💜<br />\n                      {shoutoutMessage || '[your message]'}<br />\n                      via @pumphyh<br />\n                      https://dev.fun/a25f823660c6042027ab\n                    </div>\n                  </div>\n                  <div className=\"mt-4 flex items-start bg-gradient-to-r from-[#fff4aa]/20 to-[#f8c8dc]/20 p-3 rounded-lg\">\n                    <AlertCircle size={16} className=\"text-yellow-600 mr-2 mt-0.5 flex-shrink-0\" />\n                    <p className=\"text-xs\">\n                      Points are calculated based on tweet engagement! More likes, retweets, and comments = more points for the recipient!\n                    </p>\n                  </div>\n                </div>\n\n                <div className=\"flex justify-center pt-4\">\n                  <button type=\"submit\" disabled={transactionPending} className={`w-full sm:w-auto bg-gradient-to-r from-[#f8c8dc] to-[#cad7ff] hover:from-[#f8c8dc]/90 hover:to-[#cad7ff]/90 text-[#222222] font-bold py-4 px-10 rounded-full shadow-lg transform transition-all hover:scale-105 active:scale-95 flex items-center justify-center space-x-3 lowercase relative overflow-hidden ${transactionPending ? 'opacity-70 cursor-not-allowed' : ''}`}>\n                    <div className=\"absolute bottom-0 left-0 right-0 h-1.5 bg-gradient-to-r from-[#cad7ff] via-[#d8f9d0] via-[#fff4aa] via-[#f8c8dc] to-[#cad7ff] opacity-70\"></div>\n                    \n                    <div className=\"flex items-center space-x-2\">\n                      {shoutoutPowerUp === 'fire' ? <Flame size={20} className=\"text-orange-500\" /> : shoutoutPowerUp === 'cosmic' ? <Pin size={20} className=\"text-purple-500\" /> : <Sparkles size={20} />}\n                      <span>{transactionPending ? 'preparing tweet...' : 'send the love!'}</span>\n                      <span className=\"text-sm font-mono bg-black/10 px-2 py-0.5 rounded\">\n                        {shoutoutPowerUp !== 'none' ? '0.05' : boostShoutout ? '0.03' : '0.01'} $HYH\n                      </span>\n                    </div>\n                    \n                    <ArrowUpRight size={16} className=\"ml-1\" />\n                  </button>\n                </div>\n              </form>\n\n              <div className=\"mt-10 grid grid-cols-1 sm:grid-cols-2 gap-4\">\n                <motion.button onClick={() => openLink(\"https://x.com/devfunpump\")} className=\"bg-gradient-to-r from-[#d8f9d0]/80 to-[#cad7ff]/80 hover:from-[#d8f9d0] hover:to-[#cad7ff] text-[#222222] font-medium py-2 px-4 rounded-xl shadow-md transition-all flex items-center justify-center space-x-2 lowercase backdrop-blur-md border border-white/30\" whileHover={{\n              y: -2,\n              boxShadow: \"0 10px 15px -3px rgba(0,0,0,0.1)\"\n            }} whileTap={{\n              y: 1\n            }}>\n                  <span>learn about dev.fun</span>\n                  <ExternalLink size={14} />\n                </motion.button>\n\n                <motion.button onClick={() => openLink(\"https://x.com/devfunpump\")} className=\"bg-gradient-to-r from-[#fff4aa]/80 to-[#f8c8dc]/80 hover:from-[#fff4aa] hover:to-[#f8c8dc] text-[#222222] font-medium py-2 px-4 rounded-xl shadow-md transition-all flex items-center justify-center space-x-2 lowercase backdrop-blur-md border border-white/30\" whileHover={{\n              y: -2,\n              boxShadow: \"0 10px 15px -3px rgba(0,0,0,0.1)\"\n            }} whileTap={{\n              y: 1\n            }}>\n                  <span>follow dev.fun on x</span>\n                  <Twitter size={14} />\n                </motion.button>\n              </div>\n            </motion.div>}\n\n          {activeTab === 'leaderboard' && <motion.div initial={{\n          opacity: 0\n        }} animate={{\n          opacity: 1\n        }} transition={{\n          duration: 0.4\n        }}>\n              <h2 className={`text-3xl font-bold mb-6 text-center lowercase ${darkMode ? 'text-white' : 'text-purple-900'}`}>community rockstars</h2>\n              \n              {}\n              <div className=\"overflow-x-auto mb-6\">\n                <div className=\"flex space-x-2 py-2 px-1 min-w-max mx-auto max-w-fit\">\n                  {['all', 'builders', 'chillers', 'degens', 'projects', 'underrated'].map(category => <button key={category} onClick={() => setLeaderboardCategory(category)} className={`px-4 py-2 rounded-full text-sm font-medium transition-all lowercase whitespace-nowrap ${leaderboardCategory === category ? `bg-gradient-to-r ${category === 'all' ? 'from-[#f8c8dc] to-[#cad7ff]' : category === 'builders' ? 'from-[#d8f9d0] to-[#cad7ff]' : category === 'chillers' ? 'from-[#fff4aa] to-[#f8c8dc]' : category === 'degens' ? 'from-[#f8c8dc] to-[#fff4aa]' : category === 'projects' ? 'from-[#cad7ff] to-[#d8f9d0]' : 'from-[#fff4aa] to-[#d8f9d0]'} text-[#222222] shadow-md` : `${darkMode ? 'bg-white/10 hover:bg-white/20' : 'bg-white/30 hover:bg-white/50'} ${darkMode ? 'text-white' : 'text-purple-900'}`}`}>\n                      {category === 'all' ? 'all stars' : category === 'builders' ? 'top builders' : category === 'chillers' ? 'top chillers' : category === 'degens' ? 'top degens' : category === 'projects' ? 'top projects' : 'most underrated'}\n                      \n                      {}\n                      <span className=\"ml-1.5 inline-flex items-center\">\n                        {category === 'builders' ? <Code size={12} /> : category === 'chillers' ? <Coffee size={12} /> : category === 'degens' ? <Zap size={12} /> : category === 'projects' ? <Gift size={12} /> : category === 'underrated' ? <Users size={12} /> : null}\n                      </span>\n                    </button>)}\n                </div>\n              </div>\n              \n              {loading ? <LoadingState darkMode={darkMode} /> : leaderboardCategory === 'all' && leaderboard.length === 0 || leaderboardCategory !== 'all' && (!categorizedLeaderboard[leaderboardCategory] || categorizedLeaderboard[leaderboardCategory].length === 0) ? <EmptyState message={`no one in the ${leaderboardCategory} category yet! start giving shoutouts!`} darkMode={darkMode} /> : <div className={`${darkMode ? 'bg-white/10' : 'bg-white/30'} backdrop-blur-xl rounded-3xl overflow-hidden shadow-xl border border-white/30`}>\n                  {}\n                  {(leaderboardCategory === 'all' ? leaderboard : categorizedLeaderboard[leaderboardCategory]).slice(0, 3).length > 0 && <div className=\"p-8 pb-0\">\n                      <h3 className={`text-xl font-bold mb-6 text-center lowercase ${darkMode ? 'text-white' : 'text-purple-900'}`}>\n                        {leaderboardCategory === 'all' ? 'top contributors' : `top ${leaderboardCategory}`}\n                      </h3>\n                      <div className=\"flex justify-center items-end gap-6 mb-12\">\n                        {}\n                        {(leaderboardCategory === 'all' ? leaderboard : categorizedLeaderboard[leaderboardCategory]).length > 1 && <motion.div initial={{\n                  y: 50,\n                  opacity: 0\n                }} animate={{\n                  y: 0,\n                  opacity: 1\n                }} transition={{\n                  delay: 0.2\n                }} className=\"flex flex-col items-center\" onClick={() => openUserProfile((leaderboardCategory === 'all' ? leaderboard : categorizedLeaderboard[leaderboardCategory])[1])}>\n                            <div className=\"relative\">\n                              <div className=\"w-20 h-20 rounded-full overflow-hidden border-2 border-white/50 bg-gradient-to-b from-gray-200 to-gray-400 shadow-[0_0_15px_rgba(255,255,255,0.3)]\">\n                                <img src={(leaderboardCategory === 'all' ? leaderboard : categorizedLeaderboard[leaderboardCategory])[1].avatarUrl || `https://avatars.dicebear.com/api/bottts/${(leaderboardCategory === 'all' ? leaderboard : categorizedLeaderboard[leaderboardCategory])[1].userId}.svg`} alt={(leaderboardCategory === 'all' ? leaderboard : categorizedLeaderboard[leaderboardCategory])[1].username} className=\"w-full h-full object-cover\" />\n                              </div>\n                              <motion.div initial={{\n                      scale: 0.8\n                    }} animate={{\n                      scale: [0.8, 1.1, 1]\n                    }} transition={{\n                      duration: 0.5,\n                      delay: 0.5\n                    }} className=\"absolute -bottom-2 -right-2 bg-gradient-to-br from-gray-300 to-gray-500 text-gray-800 rounded-full w-8 h-8 flex items-center justify-center font-bold border-2 border-white shadow-lg\">\n                                2\n                              </motion.div>\n                              {(leaderboardCategory === 'all' ? leaderboard : categorizedLeaderboard[leaderboardCategory])[1].badges && (leaderboardCategory === 'all' ? leaderboard : categorizedLeaderboard[leaderboardCategory])[1].badges.includes('top3') && <motion.div initial={{\n                      opacity: 0,\n                      scale: 0\n                    }} animate={{\n                      opacity: 1,\n                      scale: 1\n                    }} transition={{\n                      delay: 0.7\n                    }} className=\"absolute -top-1 -left-1 bg-gradient-to-r from-purple-400 to-pink-400 rounded-full p-1 shadow-lg\">\n                                  <Award size={14} className=\"text-white\" />\n                                </motion.div>}\n                            </div>\n                            <p className={`mt-3 font-medium text-sm lowercase ${darkMode ? 'text-white' : 'text-purple-900'}`}>\n                              {(leaderboardCategory === 'all' ? leaderboard : categorizedLeaderboard[leaderboardCategory])[1].username}\n                            </p>\n                            <p className=\"text-xs font-bold bg-clip-text text-transparent bg-gradient-to-r from-gray-200 to-gray-400\">\n                              {(leaderboardCategory === 'all' ? leaderboard : categorizedLeaderboard[leaderboardCategory])[1].points} pts\n                            </p>\n                          </motion.div>}\n\n                        {}\n                        {leaderboard.length > 0 && <motion.div initial={{\n                  y: 50,\n                  opacity: 0\n                }} animate={{\n                  y: 0,\n                  opacity: 1\n                }} transition={{\n                  delay: 0.1\n                }} className=\"flex flex-col items-center\" onClick={() => openUserProfile(leaderboard[0])}>\n                            <div className=\"relative mb-4\">\n                              <motion.div animate={{\n                      y: [0, -5, 0]\n                    }} transition={{\n                      repeat: Infinity,\n                      duration: 2\n                    }} className=\"absolute -top-8 left-1/2 transform -translate-x-1/2\">\n                                <Crown size={24} className=\"text-yellow-400\" />\n                              </motion.div>\n                              <div className=\"w-28 h-28 rounded-full overflow-hidden border-4 border-yellow-400 bg-gradient-to-b from-yellow-300 to-yellow-500 shadow-[0_0_20px_rgba(250,204,21,0.5)]\">\n                                <img src={leaderboard[0].avatarUrl || `https://avatars.dicebear.com/api/bottts/${leaderboard[0].userId}.svg`} alt={leaderboard[0].username} className=\"w-full h-full object-cover\" />\n                              </div>\n                              <motion.div initial={{\n                      scale: 0.8\n                    }} animate={{\n                      scale: [0.8, 1.2, 1]\n                    }} transition={{\n                      duration: 0.6,\n                      delay: 0.4\n                    }} className=\"absolute -bottom-2 -right-2 bg-gradient-to-br from-yellow-300 to-yellow-600 text-yellow-900 rounded-full w-10 h-10 flex items-center justify-center font-bold text-lg border-2 border-white shadow-lg\">\n                                1\n                              </motion.div>\n                              {leaderboard[0].badges && leaderboard[0].badges.length > 0 && <div className=\"absolute -top-1 -left-1 flex\">\n                                  {leaderboard[0].badges.includes('top3') && <motion.div initial={{\n                        opacity: 0,\n                        scale: 0\n                      }} animate={{\n                        opacity: 1,\n                        scale: 1\n                      }} transition={{\n                        delay: 0.7\n                      }} className=\"bg-gradient-to-r from-yellow-400 to-orange-400 rounded-full p-1 shadow-lg mr-1\">\n                                      <Trophy size={16} className=\"text-white\" />\n                                    </motion.div>}\n                                  {leaderboard[0].badges.includes('century') && <motion.div initial={{\n                        opacity: 0,\n                        scale: 0\n                      }} animate={{\n                        opacity: 1,\n                        scale: 1\n                      }} transition={{\n                        delay: 0.8\n                      }} className=\"bg-gradient-to-r from-blue-400 to-cyan-400 rounded-full p-1 shadow-lg\">\n                                      <Star size={16} className=\"text-white\" />\n                                    </motion.div>}\n                                </div>}\n                            </div>\n                            <p className={`mt-3 font-bold lowercase ${darkMode ? 'text-white' : 'text-purple-900'}`}>{leaderboard[0].username}</p>\n                            <p className=\"text-sm font-bold bg-clip-text text-transparent bg-gradient-to-r from-yellow-300 to-yellow-600\">\n                              {leaderboard[0].points} pts\n                            </p>\n                          </motion.div>}\n\n                        {}\n                        {leaderboard.length > 2 && <motion.div initial={{\n                  y: 50,\n                  opacity: 0\n                }} animate={{\n                  y: 0,\n                  opacity: 1\n                }} transition={{\n                  delay: 0.3\n                }} className=\"flex flex-col items-center\" onClick={() => openUserProfile(leaderboard[2])}>\n                            <div className=\"relative\">\n                              <div className=\"w-20 h-20 rounded-full overflow-hidden border-2 border-white/50 bg-gradient-to-b from-amber-600 to-amber-800 shadow-[0_0_15px_rgba(217,119,6,0.3)]\">\n                                <img src={leaderboard[2].avatarUrl || `https://avatars.dicebear.com/api/bottts/${leaderboard[2].userId}.svg`} alt={leaderboard[2].username} className=\"w-full h-full object-cover\" />\n                              </div>\n                              <motion.div initial={{\n                      scale: 0.8\n                    }} animate={{\n                      scale: [0.8, 1.1, 1]\n                    }} transition={{\n                      duration: 0.5,\n                      delay: 0.6\n                    }} className=\"absolute -bottom-2 -right-2 bg-gradient-to-br from-amber-600 to-amber-800 text-amber-100 rounded-full w-8 h-8 flex items-center justify-center font-bold border-2 border-white shadow-lg\">\n                                3\n                              </motion.div>\n                              {leaderboard[2].badges && leaderboard[2].badges.includes('top3') && <motion.div initial={{\n                      opacity: 0,\n                      scale: 0\n                    }} animate={{\n                      opacity: 1,\n                      scale: 1\n                    }} transition={{\n                      delay: 0.7\n                    }} className=\"absolute -top-1 -left-1 bg-gradient-to-r from-amber-400 to-orange-400 rounded-full p-1 shadow-lg\">\n                                  <Award size={14} className=\"text-white\" />\n                                </motion.div>}\n                            </div>\n                            <p className={`mt-3 font-medium text-sm lowercase ${darkMode ? 'text-white' : 'text-purple-900'}`}>{leaderboard[2].username}</p>\n                            <p className=\"text-xs font-bold bg-clip-text text-transparent bg-gradient-to-r from-amber-600 to-amber-800\">\n                              {leaderboard[2].points} pts\n                            </p>\n                          </motion.div>}\n                      </div>\n                    </div>}\n\n                  <div className=\"divide-y divide-white/10\">\n                    {leaderboard.slice(3).map((user, index) => {\n                const hasChanged = leaderboardChanges[user.userId]?.changed;\n                const changeDirection = leaderboardChanges[user.userId]?.direction;\n                return <motion.div key={user.userId} className={`flex items-center p-4 ${darkMode ? 'hover:bg-white/10' : 'hover:bg-white/50'} transition-colors relative ${hasChanged ? 'overflow-hidden' : ''} cursor-pointer`} animate={hasChanged ? {\n                  backgroundColor: [darkMode ? 'rgba(255,255,255,0.05)' : 'rgba(255,255,255,0.3)', darkMode ? 'rgba(255,255,255,0.2)' : 'rgba(255,255,255,0.6)', darkMode ? 'rgba(255,255,255,0.05)' : 'rgba(255,255,255,0.3)']\n                } : {}} transition={{\n                  duration: 2,\n                  ease: \"easeOut\"\n                }} onClick={() => openUserProfile(user)}>\n                        {hasChanged && <motion.div className=\"absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent\" initial={{\n                    x: '-100%'\n                  }} animate={{\n                    x: '100%'\n                  }} transition={{\n                    duration: 1.5,\n                    ease: \"easeInOut\"\n                  }} />}\n                        \n                        <div className={`w-8 text-center font-bold ${darkMode ? 'text-white/70' : 'text-purple-900/70'} flex items-center justify-center`}>\n                          {index + 4}\n                          {hasChanged && changeDirection === 'up' && <motion.div initial={{\n                      opacity: 0,\n                      y: 10\n                    }} animate={{\n                      opacity: 1,\n                      y: 0\n                    }} className=\"ml-1 text-green-400\">\n                              ↑\n                            </motion.div>}\n                          {hasChanged && changeDirection === 'down' && <motion.div initial={{\n                      opacity: 0,\n                      y: -10\n                    }} animate={{\n                      opacity: 1,\n                      y: 0\n                    }} className=\"ml-1 text-red-400\">\n                              ↓\n                            </motion.div>}\n                        </div>\n                        \n                        <div className=\"w-10 h-10 rounded-full overflow-hidden bg-purple-200 border-2 border-white/30 mx-3 relative shadow-md\">\n                          <img src={user.avatarUrl || `https://avatars.dicebear.com/api/bottts/${user.userId}.svg`} alt={user.username} className=\"w-full h-full object-cover\" />\n                          {hasChanged && <motion.div className=\"absolute inset-0 bg-white/40 rounded-full\" initial={{\n                      opacity: 0.8\n                    }} animate={{\n                      opacity: 0\n                    }} transition={{\n                      duration: 2\n                    }} />}\n                        </div>\n                        <div className=\"flex-1 min-w-0\">\n                          <p className={`font-medium truncate lowercase ${darkMode ? 'text-white' : 'text-purple-900'}`}>{user.username}</p>\n                          {user.badges && user.badges.length > 0 && <div className=\"flex mt-1 space-x-1\">\n                              {user.badges.map((badge, i) => {\n                        const BadgeIcon = badge === 'top3' ? Trophy : badge === 'top10' ? Award : badge === 'century' ? Star : Sparkles;\n                        const colors = badge === 'top3' ? 'from-yellow-400 to-orange-400' : badge === 'top10' ? 'from-purple-400 to-pink-400' : badge === 'century' ? 'from-blue-400 to-cyan-400' : 'from-green-400 to-teal-400';\n                        return <div key={i} className={`bg-gradient-to-r ${colors} rounded-full p-0.5 shadow`}>\n                                    <BadgeIcon size={12} className=\"text-white\" />\n                                  </div>;\n                      })}\n                            </div>}\n                        </div>\n                        <div className={`${darkMode ? 'bg-white/20' : 'bg-white/40'} px-3 py-1 rounded-full text-sm font-bold backdrop-blur-md border border-white/20`}>\n                          {user.points} pts\n                        </div>\n                      </motion.div>;\n              })}\n                  </div>\n                </div>}\n            </motion.div>}\n        </div>\n        \n        {}\n        <AnimatePresence>\n          {showProfileModal && selectedProfile && <motion.div initial={{\n          opacity: 0\n        }} animate={{\n          opacity: 1\n        }} exit={{\n          opacity: 0\n        }} className=\"fixed inset-0 bg-black/40 backdrop-blur-sm z-50 flex items-center justify-center p-4\" onClick={() => setShowProfileModal(false)}>\n              <motion.div initial={{\n            scale: 0.9,\n            opacity: 0\n          }} animate={{\n            scale: 1,\n            opacity: 1\n          }} exit={{\n            scale: 0.9,\n            opacity: 0\n          }} className={`${darkMode ? 'bg-gradient-to-br from-purple-900/80 to-indigo-900/80' : 'bg-gradient-to-br from-white/90 to-purple-50/90'} backdrop-blur-xl rounded-3xl p-6 max-w-md w-full shadow-2xl border border-white/30`} onClick={e => e.stopPropagation()}>\n                <div className=\"flex justify-between items-start mb-6\">\n                  <h3 className={`text-2xl font-bold lowercase ${darkMode ? 'text-white' : 'text-purple-900'}`}>user profile</h3>\n                  <button className={`${darkMode ? 'bg-white/10 hover:bg-white/20' : 'bg-purple-100 hover:bg-purple-200'} p-2 rounded-full transition-colors`} onClick={() => setShowProfileModal(false)}>\n                    <X size={18} className={darkMode ? 'text-white' : 'text-purple-900'} />\n                  </button>\n                </div>\n                \n                <div className=\"flex items-center mb-6\">\n                  <div className=\"w-20 h-20 rounded-full overflow-hidden bg-purple-200 border-2 border-white/50 shadow-lg mr-4\">\n                    <img src={selectedProfile.avatarUrl || `https://avatars.dicebear.com/api/bottts/${selectedProfile.userId}.svg`} alt={selectedProfile.username} className=\"w-full h-full object-cover\" />\n                  </div>\n                  <div>\n                    <h4 className={`text-xl font-bold lowercase ${darkMode ? 'text-white' : 'text-purple-900'}`}>\n                      {selectedProfile.username}\n                    </h4>\n                    <p className={`${darkMode ? 'text-white/70' : 'text-purple-900/70'} lowercase`}>\n                      {selectedProfile.bio || \"no bio yet\"}\n                    </p>\n                    <div className=\"mt-2 flex items-center\">\n                      <Trophy size={16} className={`mr-2 ${darkMode ? 'text-purple-300' : 'text-purple-700'}`} />\n                      <span className={`font-bold ${darkMode ? 'text-white' : 'text-purple-900'}`}>\n                        {selectedProfile.points} points\n                      </span>\n                    </div>\n                  </div>\n                </div>\n                \n                {}\n                <div className=\"mb-6\">\n                  <h4 className={`text-lg font-bold mb-3 lowercase ${darkMode ? 'text-white' : 'text-purple-900'}`}>badges</h4>\n                  {selectedProfile.badges && selectedProfile.badges.length > 0 ? <div className=\"grid grid-cols-2 gap-3\">\n                      {selectedProfile.badges.map((badge, i) => {\n                  let badgeInfo;\n                  switch (badge) {\n                    case 'top3':\n                      badgeInfo = {\n                        name: \"top 3 performer\",\n                        description: \"reached the top 3 on the leaderboard\",\n                        icon: Trophy,\n                        colors: \"from-yellow-400 to-orange-500\"\n                      };\n                      break;\n                    case 'top10':\n                      badgeInfo = {\n                        name: \"top 10 performer\",\n                        description: \"reached the top 10 on the leaderboard\",\n                        icon: Award,\n                        colors: \"from-purple-400 to-pink-500\"\n                      };\n                      break;\n                    case 'century':\n                      badgeInfo = {\n                        name: \"century club\",\n                        description: \"earned 100+ recognition points\",\n                        icon: Star,\n                        colors: \"from-blue-400 to-cyan-500\"\n                      };\n                      break;\n                    default:\n                      badgeInfo = {\n                        name: \"special badge\",\n                        description: \"earned a special achievement\",\n                        icon: Sparkles,\n                        colors: \"from-green-400 to-teal-500\"\n                      };\n                  }\n                  const BadgeIcon = badgeInfo.icon;\n                  return <motion.div key={i} initial={{\n                    opacity: 0,\n                    y: 10\n                  }} animate={{\n                    opacity: 1,\n                    y: 0\n                  }} transition={{\n                    delay: i * 0.1\n                  }} className={`${darkMode ? 'bg-white/10' : 'bg-white/40'} backdrop-blur-md rounded-xl p-3 flex items-center border border-white/20 group hover:scale-105 transition-transform`}>\n                            <div className={`w-10 h-10 rounded-full bg-gradient-to-r ${badgeInfo.colors} flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform mr-3`}>\n                              <BadgeIcon size={20} className=\"text-white\" />\n                            </div>\n                            <div>\n                              <p className={`font-bold text-sm lowercase ${darkMode ? 'text-white' : 'text-purple-900'}`}>{badgeInfo.name}</p>\n                              <p className={`text-xs ${darkMode ? 'text-white/70' : 'text-purple-900/70'}`}>{badgeInfo.description}</p>\n                            </div>\n                          </motion.div>;\n                })}\n                    </div> : <div className={`${darkMode ? 'bg-white/10' : 'bg-white/30'} backdrop-blur-md rounded-xl p-4 text-center border border-white/20`}>\n                      <p className={`${darkMode ? 'text-white/70' : 'text-purple-900/70'} lowercase`}>no badges earned yet</p>\n                    </div>}\n                </div>\n                \n                {}\n                <div className=\"mb-6\">\n                  <h4 className={`text-lg font-bold mb-3 lowercase ${darkMode ? 'text-white' : 'text-purple-900'}`}>personal stats</h4>\n                  {selectedProfile.stats ? <UserStatsCard userStats={selectedProfile.stats} darkMode={darkMode} /> : <div className={`${darkMode ? 'bg-white/10' : 'bg-white/30'} backdrop-blur-md rounded-xl p-4 text-center border border-white/20`}>\n                      <p className={`${darkMode ? 'text-white/70' : 'text-purple-900/70'} lowercase`}>stats loading...</p>\n                    </div>}\n                </div>\n                \n                {}\n                <div>\n                  <h4 className={`text-lg font-bold mb-3 lowercase ${darkMode ? 'text-white' : 'text-purple-900'}`}>recent activity</h4>\n                  <div className={`${darkMode ? 'bg-white/10' : 'bg-white/30'} backdrop-blur-md rounded-xl overflow-hidden border border-white/20 max-h-60 overflow-y-auto`}>\n                    {shoutouts.filter(s => s.recipientId === selectedProfile.userId || s.senderId === selectedProfile.userId).length > 0 ? <div className=\"divide-y divide-white/10\">\n                        {shoutouts.filter(s => s.recipientId === selectedProfile.userId || s.senderId === selectedProfile.userId).slice(0, 5).map(shoutout => {\n                    const isRecipient = shoutout.recipientId === selectedProfile.userId;\n                    const otherUser = users.find(u => u.userId === (isRecipient ? shoutout.senderId : shoutout.recipientId)) || {\n                      username: 'unknown user'\n                    };\n                    return <div key={shoutout.id} className=\"p-3\">\n                                <div className=\"flex items-center\">\n                                  <span className={`text-xs px-2 py-1 rounded-full ${isRecipient ? 'bg-green-500/20 text-green-300' : 'bg-blue-500/20 text-blue-300'} mr-2`}>\n                                    {isRecipient ? 'received' : 'sent'}\n                                  </span>\n                                  <span className={`text-sm ${darkMode ? 'text-white/80' : 'text-purple-900/80'}`}>\n                                    {isRecipient ? `from ${otherUser.username}` : `to ${otherUser.username}`}\n                                  </span>\n                        {shoutout.boosted && <span className=\"ml-2 flex items-center text-yellow-400 text-xs\">\n                                      <Star size={12} className=\"mr-0.5\" />\n                                      boosted\n                                    </span>}\n                </div>\n                                <p className={`mt-1 text-sm ${darkMode ? 'text-white/60' : 'text-purple-900/60'} lowercase`}>\"{shoutout.message}\"</p>\n                                <p className={`mt-1 text-xs ${darkMode ? 'text-white/50' : 'text-purple-900/50'}`}>{getTimeAgo(new Date(shoutout.createdAt))}</p>\n                              </div>;\n                  })}\n                      </div> : <div className=\"p-4 text-center\">\n                        <p className={`${darkMode ? 'text-white/70' : 'text-purple-900/70'} lowercase`}>no recent activity</p>\n                      </div>}\n                  </div>\n                </div>\n              </motion.div>\n            </motion.div>}\n        </AnimatePresence>\n      </main>\n      \n      <ConfettiExplosion animation={animation} setAnimation={setAnimation} />\n      \n      <AnimatePresence>\n        {glassRipple.active && <motion.div className=\"fixed inset-0 pointer-events-none z-40\" initial={{\n        opacity: 0\n      }} animate={{\n        opacity: 1\n      }} exit={{\n        opacity: 0\n      }}>\n            <GlassRippleEffect x={glassRipple.x} y={glassRipple.y} />\n          </motion.div>}\n      </AnimatePresence>\n      \n      <footer className={`fixed bottom-0 inset-x-0 ${darkMode ? 'bg-gradient-to-r from-indigo-900/90 to-purple-900/90' : 'bg-gradient-to-r from-white/90 to-purple-100/90'} py-3 px-4 text-center ${darkMode ? 'text-white/70' : 'text-purple-900/70'} text-sm backdrop-blur-md border-t border-white/20 lowercase`}>\n        <div className=\"container mx-auto flex flex-col sm:flex-row justify-between items-center\">\n          <div className=\"flex items-center space-x-2 mb-2 sm:mb-0\">\n            <p className=\"text-center sm:text-left\">hypehouse — elevate your community with recognition ✨</p>\n            <button onClick={() => setShowFaq(true)} className={`text-xs px-2 py-0.5 rounded-full ${darkMode ? 'bg-white/10 hover:bg-white/20' : 'bg-white/30 hover:bg-white/50'} transition-colors flex items-center`} aria-label=\"Show FAQ\">\n              <HelpCircle size={10} className=\"mr-1\" />\n              <span>faq</span>\n            </button>\n          </div>\n          <div className=\"flex flex-col sm:flex-row items-center space-y-3 sm:space-y-0 sm:space-x-3\">\n            <a href=\"https://x.com/iamXD79\" target=\"_blank\" rel=\"noopener noreferrer\" className={`text-xs px-4 py-1.5 rounded-full ${darkMode ? 'bg-white/10 hover:bg-white/20' : 'bg-white/30 hover:bg-white/50'} transition-colors flex items-center w-full sm:w-auto text-center justify-center sm:justify-start`}>\n              <Info size={10} className=\"mr-1.5\" />\n              <span>built by @iamXD79</span>\n            </a>\n            <button onClick={openHyhPurchaseLink} className={`text-xs px-4 py-1.5 rounded-full ${darkMode ? 'bg-white/10 hover:bg-white/20' : 'bg-white/40 hover:bg-white/60'} transition-colors flex items-center w-full sm:w-auto justify-center`}>\n              <DollarSign size={12} className=\"mr-1.5\" />\n              <span>buy $HYH</span>\n            </button>\n            <button onClick={openTwitterLink} className={`text-xs px-4 py-1.5 rounded-full ${darkMode ? 'bg-white/10 hover:bg-white/20' : 'bg-white/40 hover:bg-white/60'} transition-colors w-full sm:w-auto flex justify-center items-center`}>\n              <Twitter size={10} className=\"mr-1.5\" />\n              <span>@pumphyh</span>\n            </button>\n          </div>\n        </div>\n      </footer>\n\n      {}\n      <AnimatePresence>\n        {showFaq && <motion.div initial={{\n        opacity: 0\n      }} animate={{\n        opacity: 1\n      }} exit={{\n        opacity: 0\n      }} className=\"fixed inset-0 bg-black/40 backdrop-blur-sm z-50 flex items-center justify-center p-4\" onClick={() => setShowFaq(false)}>\n            <motion.div initial={{\n          scale: 0.9,\n          opacity: 0\n        }} animate={{\n          scale: 1,\n          opacity: 1\n        }} exit={{\n          scale: 0.9,\n          opacity: 0\n        }} className={`${darkMode ? 'bg-gradient-to-br from-purple-900/90 to-indigo-900/90' : 'bg-gradient-to-br from-white/90 to-purple-50/90'} backdrop-blur-xl rounded-3xl p-6 max-w-2xl w-full shadow-2xl border border-white/30 max-h-[80vh] overflow-y-auto`} onClick={e => e.stopPropagation()}>\n              <div className=\"flex justify-between items-start mb-6\">\n                <h3 className={`text-2xl font-bold lowercase ${darkMode ? 'text-white' : 'text-purple-900'}`}>frequently asked questions</h3>\n                <button className={`${darkMode ? 'bg-white/10 hover:bg-white/20' : 'bg-purple-100 hover:bg-purple-200'} p-2 rounded-full transition-colors`} onClick={() => setShowFaq(false)}>\n                  <X size={18} className={darkMode ? 'text-white' : 'text-purple-900'} />\n                </button>\n              </div>\n              \n              <div className=\"space-y-4\">\n                <FaqItem question=\"what is $HYH?\" answer=\"$HYH is the token used to send shout-outs in hypehouse. it powers the point system and weekly rewards.\" darkMode={darkMode} />\n                \n                <FaqItem question=\"do i need a wallet?\" answer=\"Yes, you'll need a wallet to pay for shout-outs, but the shout-outs themselves are sent as tweets from your Twitter account.\" darkMode={darkMode} />\n                \n                <FaqItem question=\"how are points tracked?\" answer=\"Points are calculated based on tweet engagement! Each shout-out earns base points (10 or 20 if boosted), plus bonus points for likes, retweets, and comments the tweet receives.\" darkMode={darkMode} />\n                \n                <FaqItem question=\"how are rewards paid?\" answer=\"top 3 weekly users receive $HYH from the pool: 60% to 1st, 25% to 2nd, and 15% to 3rd place. sent manually or automatically.\" darkMode={darkMode} />\n                \n                <FaqItem question=\"can i shout-out a project or brand?\" answer=\"absolutely! shout-outs can go to people, creators, projects, or DAOs. anyone with a twitter handle can receive props.\" darkMode={darkMode} />\n                \n                <FaqItem question=\"why do I need to connect Twitter?\" answer=\"Twitter integration is required to publish your shout-outs, use your profile data, and track engagement on your tweets for the points system.\" darkMode={darkMode} />\n              </div>\n            </motion.div>\n          </motion.div>}\n          \n        {showTwitterModal && <motion.div initial={{\n        opacity: 0\n      }} animate={{\n        opacity: 1\n      }} exit={{\n        opacity: 0\n      }} className=\"fixed inset-0 bg-black/60 backdrop-blur-md z-50 flex items-center justify-center p-4\" onClick={() => setShowTwitterModal(false)}>\n          <motion.div initial={{\n          scale: 0.9,\n          opacity: 0\n        }} animate={{\n          scale: 1,\n          opacity: 1\n        }} exit={{\n          scale: 0.9,\n          opacity: 0\n        }} className={`${darkMode ? 'bg-gradient-to-br from-gray-900 to-indigo-900/90' : 'bg-gradient-to-br from-white/90 to-indigo-50/90'} backdrop-blur-xl rounded-3xl p-6 max-w-md w-full shadow-2xl border border-white/30`} onClick={e => e.stopPropagation()}>\n            <div className=\"flex flex-col items-center text-center\">\n              <div className=\"w-16 h-16 rounded-full bg-yellow-100 flex items-center justify-center mb-4\">\n                <AlertTriangle size={32} className=\"text-yellow-600\" />\n              </div>\n              \n              <h3 className={`text-xl font-bold mb-4 ${darkMode ? 'text-white' : 'text-purple-900'}`}>\n                Twitter Account Requirements\n              </h3>\n              \n              <p className={`mb-6 ${darkMode ? 'text-white/80' : 'text-purple-800/90'}`}>\n                {twitterValidationError || \"Your Twitter account doesn't meet our requirements.\"}\n              </p>\n              \n              <div className={`w-full p-4 rounded-xl ${darkMode ? 'bg-white/10' : 'bg-white/40'} backdrop-blur-md mb-6 border border-white/20`}>\n                <h4 className={`font-bold mb-2 ${darkMode ? 'text-white' : 'text-purple-900'}`}>Requirements:</h4>\n                <ul className={`space-y-2 text-left ${darkMode ? 'text-white/80' : 'text-purple-800/80'}`}>\n                  <li className=\"flex items-start\">\n                    <div className={`w-5 h-5 rounded-full flex-shrink-0 mr-2 ${twitterInfo && twitterInfo.followers >= 100 ? 'bg-green-500' : 'bg-red-500'} flex items-center justify-center mt-0.5`}>\n                      {twitterInfo && twitterInfo.followers >= 100 ? <Check size={12} className=\"text-white\" /> : <X size={12} className=\"text-white\" />}\n                    </div>\n                    <span>At least 100 followers</span>\n                  </li>\n                  <li className=\"flex items-start\">\n                    <div className={`w-5 h-5 rounded-full flex-shrink-0 mr-2 ${twitterInfo && new Date() - new Date(twitterInfo.createdAt) >= 1000 * 60 * 60 * 24 * 90 ? 'bg-green-500' : 'bg-red-500'} flex items-center justify-center mt-0.5`}>\n                      {twitterInfo && new Date() - new Date(twitterInfo.createdAt) >= 1000 * 60 * 60 * 24 * 90 ? <Check size={12} className=\"text-white\" /> : <X size={12} className=\"text-white\" />}\n                    </div>\n                    <span>Account at least 3 months old</span>\n                  </li>\n                  <li className=\"flex items-start\">\n                    <div className={`w-5 h-5 rounded-full flex-shrink-0 mr-2 ${twitterInfo && twitterInfo.tweetsCount >= 90 ? 'bg-green-500' : 'bg-red-500'} flex items-center justify-center mt-0.5`}>\n                      {twitterInfo && twitterInfo.tweetsCount >= 90 ? <Check size={12} className=\"text-white\" /> : <X size={12} className=\"text-white\" />}\n                    </div>\n                    <span>At least 90 tweets</span>\n                  </li>\n                </ul>\n              </div>\n              \n              <button onClick={() => setShowTwitterModal(false)} className={`px-6 py-3 rounded-full ${darkMode ? 'bg-white/20 hover:bg-white/30' : 'bg-purple-100 hover:bg-purple-200'} font-medium transition-all`}>\n                Got it\n              </button>\n            </div>\n          </motion.div>\n        </motion.div>}\n      </AnimatePresence>\n    </div>;\n}\nfunction Header({\n  darkMode,\n  setDarkMode,\n  hyhBalance,\n  showWelcome,\n  showTutorial\n}) {\n  return <header className={`sticky top-0 z-10 ${darkMode ? 'bg-gradient-to-r from-[#222222]/90 to-[#333333]/90' : 'bg-gradient-to-r from-[#f2f2f2]/80 to-white/80'} border-b border-white/20 backdrop-blur-xl`}>\n      <div className=\"container mx-auto px-4 py-4 flex justify-between items-center\">\n        <div className=\"flex items-center space-x-3\">\n          <div className=\"w-9 h-9 overflow-hidden flex items-center justify-center\">\n            <img src=\"https://cdn.dev.fun/asset/a25f823660c6042027ab/ChatGPT%20Image%20Jun%2011,%202025,%2011_13_40%20AM_b1386a99.png\" alt=\"hypehouse logo\" className=\"w-full h-full object-contain filter drop-shadow-lg\" />\n          </div>\n          <h1 className={`text-2xl font-bold lowercase ${darkMode ? 'bg-clip-text text-transparent bg-gradient-to-r from-[#f8c8dc] to-[#cad7ff]' : 'bg-clip-text text-transparent bg-gradient-to-r from-[#f8c8dc] to-[#cad7ff]'}`}>\n            hypehouse\n          </h1>\n        </div>\n        \n        <div className=\"flex items-center space-x-3\">\n          {hyhBalance !== undefined && !showWelcome && !showTutorial && <div className={`hidden md:flex items-center px-3 py-1.5 rounded-full ${darkMode ? 'bg-white/10' : 'bg-white/40'} backdrop-blur-md border border-white/30`}>\n              <span className={`${darkMode ? 'text-white/70' : 'text-[#222222]/70'} text-sm mr-1.5 lowercase`}>balance:</span>\n              <span className={`font-bold ${darkMode ? 'text-[#cad7ff]' : 'text-[#222222]'}`}>{hyhBalance.toFixed(2)} $HYH</span>\n            </div>}\n          \n          <button onClick={() => setDarkMode(!darkMode)} className={`p-2.5 rounded-full transition-colors ${darkMode ? 'bg-white/10 hover:bg-white/20' : 'bg-[#f2f2f2] hover:bg-[#f2f2f2]/80'} mr-1`} aria-label={darkMode ? \"Switch to light mode\" : \"Switch to dark mode\"}>\n            {darkMode ? <Sun size={20} className=\"text-[#fff4aa]\" /> : <Moon size={20} className=\"text-[#222222]\" />}\n          </button>\n          \n          {!showWelcome && !showTutorial && <UserButton height=\"2.5rem\" radius=\"1.25rem\" bgColor={darkMode ? \"#cad7ff\" : \"#f8c8dc\"} textColor=\"#222222\" hoverBgColor={darkMode ? \"#d1e0ff\" : \"#f8c8dc\"} />}\n        </div>\n      </div>\n    </header>;\n}\nfunction LoadingState({\n  darkMode\n}) {\n  return <div className=\"flex justify-center items-center py-12\">\n      <div className=\"animate-pulse flex flex-col items-center\">\n        <div className={`w-16 h-16 rounded-full ${darkMode ? 'bg-white/20' : 'bg-purple-200'} mb-4`}></div>\n        <div className={`h-4 w-24 ${darkMode ? 'bg-white/20' : 'bg-purple-200'} rounded-full mb-2`}></div>\n        <div className={`h-3 w-32 ${darkMode ? 'bg-white/10' : 'bg-purple-100'} rounded-full`}></div>\n      </div>\n    </div>;\n}\nfunction EmptyState({\n  message,\n  darkMode\n}) {\n  return <div className={`${darkMode ? 'bg-white/10' : 'bg-white/30'} backdrop-blur-xl rounded-3xl p-8 text-center shadow-xl border border-white/30`}>\n      <div className=\"flex justify-center mb-4\">\n        <motion.div animate={{\n        y: [0, -10, 0],\n        scale: [1, 1.05, 1]\n      }} transition={{\n        duration: 3,\n        repeat: Infinity,\n        repeatType: \"loop\"\n      }}>\n          <Heart size={48} className={darkMode ? \"text-pink-400\" : \"text-pink-500\"} />\n        </motion.div>\n      </div>\n      <h3 className={`text-xl font-medium mb-2 lowercase ${darkMode ? 'text-white' : 'text-purple-900'}`}>{message}</h3>\n      <p className={`${darkMode ? 'text-white/80' : 'text-purple-900/80'} lowercase text-lg font-medium`}>\n        no shout-outs yet — be the first to drop some love 💜\n      </p>\n      <motion.div className=\"mt-6 mx-auto w-24 h-24 rounded-full bg-gradient-to-r from-[#f8c8dc] to-[#cad7ff] p-1\" animate={{\n      scale: [1, 1.05, 1],\n      boxShadow: [\"0 0 0px rgba(255,255,255,0.2)\", \"0 0 20px rgba(255,255,255,0.5)\", \"0 0 0px rgba(255,255,255,0.2)\"]\n    }} transition={{\n      duration: 3,\n      repeat: Infinity,\n      repeatType: \"loop\"\n    }}>\n        <div className=\"w-full h-full rounded-full bg-white/20 backdrop-blur-xl flex items-center justify-center\">\n          <Sparkles size={32} className=\"text-white\" />\n        </div>\n      </motion.div>\n    </div>;\n}\nfunction UserStatsCard({\n  userStats,\n  darkMode\n}) {\n  const [animated, setAnimated] = useState(false);\n  useEffect(() => {\n    const timer = setTimeout(() => setAnimated(true), 300);\n    return () => clearTimeout(timer);\n  }, []);\n  const AnimatedCounter = ({\n    value,\n    label,\n    icon,\n    bgColor\n  }) => {\n    const counterRef = useRef(null);\n    const Icon = icon;\n    useEffect(() => {\n      if (animated && counterRef.current) {\n        const counter = counterRef.current;\n        const target = value;\n        const duration = 1500;\n        const startTime = Date.now();\n        const startValue = 0;\n        const updateCounter = () => {\n          const now = Date.now();\n          const elapsed = now - startTime;\n          const progress = Math.min(elapsed / duration, 1);\n          const easeOut = 1 - Math.pow(1 - progress, 4);\n          const current = Math.floor(startValue + (target - startValue) * easeOut);\n          counter.textContent = current;\n          if (progress < 1) {\n            requestAnimationFrame(updateCounter);\n          }\n        };\n        requestAnimationFrame(updateCounter);\n      }\n    }, [animated, value]);\n    return <motion.div initial={{\n      y: 20,\n      opacity: 0\n    }} animate={{\n      y: 0,\n      opacity: 1\n    }} transition={{\n      duration: 0.5\n    }} className={`p-4 rounded-xl ${darkMode ? 'bg-white/10' : 'bg-white/40'} backdrop-blur-md border border-white/20 flex items-start`}>\n        <div className={`w-12 h-12 rounded-full ${bgColor} flex items-center justify-center shadow-lg mr-3`}>\n          <Icon size={24} className=\"text-white\" />\n        </div>\n        <div>\n          <div className=\"flex items-baseline\">\n            <span ref={counterRef} className={`text-2xl font-bold ${darkMode ? 'text-white' : 'text-purple-900'}`}>\n              0\n            </span>\n            {label.includes('%') && <span className={`text-lg font-bold ${darkMode ? 'text-white' : 'text-purple-900'}`}>%</span>}\n          </div>\n          <p className={`text-sm ${darkMode ? 'text-white/70' : 'text-purple-900/70'}`}>{label}</p>\n        </div>\n      </motion.div>;\n  };\n  return <div className=\"space-y-4\">\n      <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n        <AnimatedCounter value={userStats.totalShoutoutsReceived} label=\"shout-outs received\" icon={Heart} bgColor=\"bg-gradient-to-r from-[#f8c8dc] to-[#cad7ff]\" />\n        <AnimatedCounter value={userStats.totalPoints} label=\"total points earned\" icon={Trophy} bgColor=\"bg-gradient-to-r from-[#fff4aa] to-[#f8c8dc]\" />\n      </div>\n      \n      <motion.div initial={{\n      y: 20,\n      opacity: 0\n    }} animate={{\n      y: 0,\n      opacity: 1\n    }} transition={{\n      duration: 0.5,\n      delay: 0.2\n    }} className={`p-4 rounded-xl ${darkMode ? 'bg-white/10' : 'bg-white/40'} backdrop-blur-md border border-white/20`}>\n        <h4 className={`font-bold text-sm mb-2 ${darkMode ? 'text-white' : 'text-purple-900'}`}>\n          top performing shout-out\n        </h4>\n        {userStats.topShoutout ? <div className=\"flex items-center\">\n            <div className=\"w-10 h-10 rounded-full bg-gradient-to-r from-[#d8f9d0] to-[#cad7ff] flex items-center justify-center mr-3\">\n              <ThumbsUp size={20} className=\"text-white\" />\n            </div>\n            <div>\n              <p className={`text-sm ${darkMode ? 'text-white/80' : 'text-purple-900/80'} line-clamp-1`}>\n                \"{userStats.topShoutout.message}\"\n              </p>\n              <div className=\"flex items-center mt-1 text-xs space-x-2\">\n                <span className=\"flex items-center\">\n                  <Heart size={10} className=\"mr-1 text-pink-400\" />\n                  {userStats.topShoutout.engagement} pts\n                </span>\n                <span className={`${darkMode ? 'text-white/50' : 'text-purple-900/50'}`}>\n                  to @{userStats.topShoutout.recipientHandle}\n                </span>\n              </div>\n            </div>\n          </div> : <p className={`text-sm ${darkMode ? 'text-white/50' : 'text-purple-900/50'}`}>\n            no shout-outs sent yet\n          </p>}\n      </motion.div>\n      \n      <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n        <AnimatedCounter value={userStats.engagementRate} label=\"engagement rate %\" icon={Sparkles} bgColor=\"bg-gradient-to-r from-[#cad7ff] to-[#d1e0ff]\" />\n        <AnimatedCounter value={userStats.weeklyAverage} label=\"avg. shout-outs/week\" icon={Award} bgColor=\"bg-gradient-to-r from-[#d8f9d0] to-[#cad7ff]\" />\n      </div>\n    </div>;\n}\nfunction ShoutoutCard({\n  shoutout,\n  users,\n  darkMode,\n  openUserProfile\n}) {\n  const sender = users.find(u => u.userId === shoutout.senderId) || {\n    username: 'unknown user'\n  };\n  const recipientHandle = shoutout.recipientHandle || '';\n  const recipient = shoutout.recipientId ? users.find(u => u.userId === shoutout.recipientId) || {\n    username: recipientHandle || 'unknown user'\n  } : {\n    username: recipientHandle || 'unknown user'\n  };\n  const colorIdSubstring = shoutout.id && shoutout.id.length >= 6 ? shoutout.id.substring(0, 6) : '0';\n  const parsedColorIndex = parseInt(colorIdSubstring, 16);\n  const colorIndex = !isNaN(parsedColorIndex) ? parsedColorIndex % 5 : 0;\n  const lightGradients = ['from-[#f8c8dc]/80 to-[#cad7ff]/80', 'from-[#d8f9d0]/80 to-[#d1e0ff]/80', 'from-[#fff4aa]/80 to-[#f8c8dc]/80', 'from-[#cad7ff]/80 to-[#d1e0ff]/80', 'from-[#f8c8dc]/80 to-[#d8f9d0]/80'];\n  const darkGradients = ['from-[#f8c8dc]/60 to-[#cad7ff]/60', 'from-[#d8f9d0]/60 to-[#d1e0ff]/60', 'from-[#fff4aa]/60 to-[#f8c8dc]/60', 'from-[#cad7ff]/60 to-[#d1e0ff]/60', 'from-[#f8c8dc]/60 to-[#d8f9d0]/60'];\n  const gradient = darkMode ? darkGradients[colorIndex] : lightGradients[colorIndex];\n  const powerUpGradients = {\n    fire: darkMode ? 'from-orange-500/70 to-red-500/70' : 'from-orange-400/80 to-red-400/80',\n    cosmic: darkMode ? 'from-blue-500/70 to-purple-500/70' : 'from-blue-400/80 to-purple-400/80'\n  };\n  const finalGradient = shoutout.powerUp && powerUpGradients[shoutout.powerUp] ? powerUpGradients[shoutout.powerUp] : gradient;\n  const idSubstring = shoutout.id && shoutout.id.length >= 12 ? shoutout.id.substring(6, 12) : '0';\n  const parsedIndex = parseInt(idSubstring, 16);\n  const iconIndex = !isNaN(parsedIndex) ? parsedIndex % 5 : 0;\n  const icons = [Heart, Trophy, Award, Star, ThumbsUp];\n  const Icon = shoutout.powerUp === 'fire' ? Flame : shoutout.powerUp === 'cosmic' ? Pin : icons[iconIndex];\n  const date = new Date(shoutout.createdAt);\n  const timeAgo = getTimeAgo(date);\n  const isPinned = shoutout.powerUp === 'cosmic' && shoutout.pinned;\n  const now = new Date();\n  const pinExpires = shoutout.pinExpiresAt ? new Date(shoutout.pinExpiresAt) : null;\n  const isStillPinned = isPinned && pinExpires && now < pinExpires;\n  const handleTweetClick = () => {\n    if (shoutout.tweetIntentUrl) {\n      window.open(shoutout.tweetIntentUrl, '_blank');\n    }\n  };\n  const pulseAnimation = useAnimation();\n  useEffect(() => {\n    if (isStillPinned) {\n      pulseAnimation.start({\n        boxShadow: [\"0 0 0 rgba(168, 85, 247, 0.4)\", \"0 0 20px rgba(168, 85, 247, 0.6)\", \"0 0 0 rgba(168, 85, 247, 0.4)\"],\n        transition: {\n          duration: 2,\n          repeat: Infinity\n        }\n      });\n    }\n  }, [isStillPinned, pulseAnimation]);\n  return <motion.div initial={{\n    opacity: 0,\n    y: 30\n  }} animate={{\n    opacity: 1,\n    y: 0\n  }} transition={{\n    duration: 0.5,\n    ease: \"easeOut\"\n  }} className={`bg-gradient-to-r ${finalGradient} rounded-3xl p-6 shadow-xl overflow-hidden relative backdrop-blur-md border ${isStillPinned ? 'border-purple-400' : 'border-white/40'} mb-5 bg-white/20 shoutout-card`} style={{\n    transform: isStillPinned ? 'scale(1.02)' : 'scale(1)'\n  }} animate={isStillPinned ? pulseAnimation : {}}>\n      {}\n      <div className=\"absolute bottom-0 left-0 right-0 h-1.5 bg-gradient-to-r from-[#cad7ff] via-[#d8f9d0] via-[#fff4aa] via-[#f8c8dc] to-[#cad7ff] opacity-70\"></div>\n      \n      <div className=\"absolute inset-0 bg-white/30 backdrop-filter backdrop-blur-md -z-10\"></div>\n      \n      {}\n      <div className=\"absolute top-0 right-0 w-24 h-24 rounded-full bg-white opacity-10 -translate-y-1/2 translate-x-1/2 backdrop-blur-sm\"></div>\n      \n      {}\n      {isStillPinned && <div className=\"absolute top-2 right-2\">\n          <motion.div className=\"bg-purple-500 text-white text-xs px-2 py-1 rounded-full flex items-center\" animate={{\n        scale: [1, 1.1, 1]\n      }} transition={{\n        duration: 2,\n        repeat: Infinity\n      }}>\n            <Pin size={10} className=\"mr-1\" />\n            pinned\n          </motion.div>\n        </div>}\n      \n      <div className=\"flex items-start gap-4 relative z-10\">\n        <div className=\"flex-shrink-0\">\n          {shoutout.tweetIntentUrl ? <div className=\"w-14 h-14 rounded-full overflow-hidden bg-white/80 border-2 border-white/40 shadow-lg transform hover:scale-105 transition-transform flex items-center justify-center cursor-pointer\" onClick={handleTweetClick}>\n              <Twitter size={24} className=\"text-[#1DA1F2]\" />\n            </div> : <div className=\"w-14 h-14 rounded-full overflow-hidden bg-white/50 border-2 border-white/40 shadow-lg flex items-center justify-center\">\n              <Icon size={24} className=\"text-gray-700\" />\n            </div>}\n        </div>\n        \n        <div className=\"flex-1 min-w-0 shoutout-text\">\n          <div className=\"flex items-center flex-wrap gap-2 mb-1\">\n            <span className=\"font-bold lowercase hover:underline text-[#1a1a1a]\">\n              to: @{recipientHandle || recipient.username}\n            </span>\n            <Icon size={16} className={`${shoutout.powerUp === 'fire' ? 'text-orange-600' : shoutout.powerUp === 'cosmic' ? 'text-purple-600' : 'text-gray-700'}`} />\n            \n            {}\n            {shoutout.powerUp === 'fire' && <span className=\"bg-orange-400/30 text-orange-700 text-xs px-2 py-0.5 rounded-full flex items-center\">\n                <Flame size={10} className=\"mr-0.5\" />\n                fire drop\n              </span>}\n            \n            {shoutout.powerUp === 'cosmic' && <span className=\"bg-purple-400/30 text-purple-700 text-xs px-2 py-0.5 rounded-full flex items-center\">\n                <Pin size={10} className=\"mr-0.5\" />\n                cosmic\n              </span>}\n            \n            {shoutout.boosted && !shoutout.powerUp && <span className=\"bg-[#fff4aa]/30 text-gray-800 text-xs px-2 py-0.5 rounded-full flex items-center\">\n                <Star size={10} className=\"mr-0.5\" />\n                boosted\n              </span>}\n          </div>\n          \n          <p className=\"mb-3 text-[#1a1a1a] font-medium lowercase\">{shoutout.message}</p>\n          \n          <div className=\"flex justify-between items-center text-sm text-[#333] flex-wrap\">\n            <div className=\"flex items-center gap-2\">\n              <span className=\"lowercase hover:underline cursor-pointer text-[#1a1a1a]\" onClick={() => openUserProfile(sender)}>\n                from: {sender.username}\n              </span>\n            </div>\n            <div className=\"flex items-center flex-wrap mt-1 sm:mt-0\">\n              {shoutout.tweetIntentUrl && <button onClick={handleTweetClick} className=\"mr-2 text-xs px-2 py-0.5 rounded-full bg-[#1DA1F2]/20 text-[#1DA1F2] flex items-center\">\n                  <Twitter size={10} className=\"mr-1\" />\n                  view tweet\n                </button>}\n              <span className=\"lowercase text-[#333]\">{timeAgo}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </motion.div>;\n}\nfunction ConfettiExplosion({\n  animation,\n  setAnimation\n}) {\n  const colors = ['#FF5733', '#33FF57', '#3357FF', '#F3FF33', '#FF33F3', '#FFFFFF'];\n  if (!animation) return null;\n  setTimeout(() => setAnimation(false), 2000);\n  return <div className=\"fixed inset-0 pointer-events-none z-50\">\n      {Array.from({\n      length: 120\n    }).map((_, i) => {\n      const size = Math.random() * 18 + 5;\n      const color = colors[Math.floor(Math.random() * colors.length)];\n      const isGlass = Math.random() > 0.4;\n      const shape = Math.random() > 0.7 ? Math.random() > 0.5 ? 'star' : 'diamond' : Math.random() > 0.5 ? 'circle' : 'square';\n      let borderRadius = '50%';\n      if (shape === 'square') borderRadius = '10%';\n      if (shape === 'diamond') borderRadius = '0%';\n      return <motion.div key={i} initial={{\n        x: window.innerWidth / 2,\n        y: window.innerHeight / 2,\n        opacity: 1,\n        scale: 0\n      }} animate={{\n        x: Math.random() * window.innerWidth,\n        y: Math.random() * window.innerHeight,\n        opacity: 0,\n        scale: 1,\n        rotate: Math.random() * 360\n      }} transition={{\n        duration: 2,\n        ease: [0.23, 1, 0.32, 1]\n      }} style={{\n        position: 'absolute',\n        width: size,\n        height: size,\n        borderRadius: borderRadius,\n        backgroundColor: color,\n        boxShadow: isGlass ? `0 0 15px ${color}60, inset 0 0 8px ${color}90` : 'none',\n        background: isGlass ? `linear-gradient(145deg, ${color}90, ${color})` : color,\n        backdropFilter: isGlass ? 'blur(4px)' : 'none',\n        transform: shape === 'diamond' ? 'rotate(45deg)' : 'none',\n        border: isGlass ? `1px solid ${color}80` : 'none'\n      }} />;\n    })}\n    </div>;\n}\nfunction GlassRippleEffect({\n  x,\n  y\n}) {\n  return <div className=\"absolute inset-0 overflow-hidden\">\n      {Array.from({\n      length: 5\n    }).map((_, i) => {\n      const size = (i + 1) * 180;\n      return <motion.div key={i} className=\"absolute rounded-full\" style={{\n        left: x - size / 2,\n        top: y - size / 2,\n        width: size,\n        height: size,\n        border: '2px solid rgba(255, 255, 255, 0.4)',\n        boxShadow: 'inset 0 0 30px rgba(255, 255, 255, 0.3), 0 0 30px rgba(255, 255, 255, 0.3)',\n        backdropFilter: 'blur(8px)',\n        background: 'radial-gradient(circle, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 70%)'\n      }} initial={{\n        opacity: 0,\n        scale: 0\n      }} animate={{\n        opacity: [0, 0.9, 0],\n        scale: 1\n      }} transition={{\n        duration: 1.8,\n        delay: i * 0.15,\n        ease: \"easeOut\"\n      }} />;\n    })}\n      \n      {}\n      <motion.div className=\"absolute rounded-full overflow-hidden\" style={{\n      left: x - 100,\n      top: y - 100,\n      width: 200,\n      height: 200,\n      opacity: 0.6,\n      background: 'conic-gradient(from 0deg, violet, indigo, blue, green, yellow, orange, red, violet)',\n      mixBlendMode: 'overlay'\n    }} initial={{\n      opacity: 0,\n      scale: 0\n    }} animate={{\n      opacity: [0, 0.6, 0],\n      scale: [0, 0.7, 0]\n    }} transition={{\n      duration: 1.2,\n      ease: \"easeOut\"\n    }} />\n    </div>;\n}\nfunction BackgroundRipple({\n  darkMode\n}) {\n  const rippleRef = useRef(null);\n  const mouseX = useMotionValue(0);\n  const mouseY = useMotionValue(0);\n  useEffect(() => {\n    const handleMouseMove = e => {\n      if (Math.random() > 0.95) {\n        mouseX.set(e.clientX);\n        mouseY.set(e.clientY);\n      }\n    };\n    window.addEventListener('mousemove', handleMouseMove);\n    return () => window.removeEventListener('mousemove', handleMouseMove);\n  }, [mouseX, mouseY]);\n  return <div className=\"absolute inset-0 overflow-hidden pointer-events-none\">\n      <motion.div ref={rippleRef} className=\"absolute w-[200vw] h-[200vh] left-[-50vw] top-[-50vh]\" style={{\n      background: darkMode ? 'radial-gradient(circle, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 50%)' : 'radial-gradient(circle, rgba(200,200,250,0.03) 0%, rgba(200,200,250,0) 50%)',\n      x: useTransform(mouseX, value => value * -0.05),\n      y: useTransform(mouseY, value => value * -0.05)\n    }} />\n      \n      {}\n      {Array.from({\n      length: 12\n    }).map((_, i) => {\n      const size = Math.random() * 400 + 150;\n      const posX = Math.random() * window.innerWidth;\n      const posY = Math.random() * window.innerHeight;\n      const duration = Math.random() * 25 + 25;\n      return <motion.div key={i} className={`absolute rounded-full ${darkMode ? 'opacity-[0.03]' : 'opacity-[0.04]'} mix-blend-overlay`} style={{\n        width: size,\n        height: size,\n        x: posX,\n        y: posY,\n        background: darkMode ? 'radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%)' : 'radial-gradient(circle, rgba(200,200,250,0.15) 0%, rgba(200,200,250,0) 70%)',\n        backdropFilter: 'blur(2px)'\n      }} animate={{\n        y: [posY, posY - 30, posY]\n      }} transition={{\n        duration,\n        repeat: Infinity,\n        repeatType: \"reverse\",\n        ease: \"easeInOut\"\n      }} />;\n    })}\n      \n      {}\n      {Array.from({\n      length: 8\n    }).map((_, i) => {\n      const size = Math.random() * 30 + 15;\n      const posX = Math.random() * window.innerWidth;\n      const posY = Math.random() * window.innerHeight;\n      const duration = Math.random() * 20 + 20;\n      const opacity = Math.random() * 0.07 + 0.03;\n      return <motion.div key={`floating-h-${i}`} className=\"absolute font-bold\" style={{\n        width: size,\n        height: size,\n        x: posX,\n        y: posY,\n        opacity: opacity,\n        color: darkMode ? '#ffffff' : '#222222',\n        fontSize: size\n      }} animate={{\n        y: [posY, posY - 40, posY],\n        rotate: [0, 10, 0, -10, 0]\n      }} transition={{\n        y: {\n          duration,\n          repeat: Infinity,\n          repeatType: \"reverse\",\n          ease: \"easeInOut\"\n        },\n        rotate: {\n          duration: duration / 2,\n          repeat: Infinity,\n          ease: \"easeInOut\"\n        }\n      }}>\n            h\n          </motion.div>;\n    })}\n      \n      {}\n      {Array.from({\n      length: 5\n    }).map((_, i) => {\n      const size = Math.random() * 200 + 100;\n      const posX = Math.random() * window.innerWidth;\n      const posY = Math.random() * window.innerHeight;\n      const duration = Math.random() * 30 + 30;\n      return <motion.div key={`iridescent-${i}`} className=\"absolute rounded-full opacity-[0.02] overflow-hidden\" style={{\n        width: size,\n        height: size,\n        x: posX,\n        y: posY,\n        mixBlendMode: 'overlay'\n      }} animate={{\n        y: [posY, posY - 20, posY],\n        rotate: [0, 180, 360]\n      }} transition={{\n        y: {\n          duration,\n          repeat: Infinity,\n          repeatType: \"reverse\",\n          ease: \"easeInOut\"\n        },\n        rotate: {\n          duration: duration * 2,\n          repeat: Infinity,\n          ease: \"linear\"\n        }\n      }}>\n            <div className=\"absolute inset-0\" style={{\n          background: 'conic-gradient(from 0deg, rgba(248,200,220,0.2), rgba(255,244,170,0.2), rgba(216,249,208,0.2), rgba(202,215,255,0.2), rgba(209,224,255,0.2), rgba(248,200,220,0.2))'\n        }} />\n          </motion.div>;\n    })}\n    </div>;\n}\nfunction FaqItem({\n  question,\n  answer,\n  darkMode\n}) {\n  const [isOpen, setIsOpen] = useState(false);\n  return <div className={`${darkMode ? 'bg-white/10' : 'bg-white/30'} backdrop-blur-md rounded-xl overflow-hidden border border-white/20`}>\n      <button onClick={() => setIsOpen(!isOpen)} className=\"w-full text-left py-4 px-5 flex justify-between items-center\">\n        <h4 className={`font-bold ${darkMode ? 'text-white' : 'text-purple-900'} lowercase`}>{question}</h4>\n        {isOpen ? <ChevronUp size={18} className={darkMode ? 'text-white/70' : 'text-purple-900/70'} /> : <ChevronDown size={18} className={darkMode ? 'text-white/70' : 'text-purple-900/70'} />}\n      </button>\n      \n      <AnimatePresence>\n        {isOpen && <motion.div initial={{\n        height: 0,\n        opacity: 0\n      }} animate={{\n        height: 'auto',\n        opacity: 1\n      }} exit={{\n        height: 0,\n        opacity: 0\n      }} transition={{\n        duration: 0.2\n      }} className=\"overflow-hidden\">\n            <div className={`px-5 pb-4 ${darkMode ? 'text-white/80' : 'text-purple-900/80'}`}>\n              {answer}\n            </div>\n          </motion.div>}\n      </AnimatePresence>\n    </div>;\n}\nfunction getTimeAgo(date) {\n  const seconds = Math.floor((new Date() - date) / 1000);\n  let interval = seconds / 31536000;\n  if (interval > 1) return Math.floor(interval) + \" years ago\";\n  interval = seconds / 2592000;\n  if (interval > 1) return Math.floor(interval) + \" months ago\";\n  interval = seconds / 86400;\n  if (interval > 1) return Math.floor(interval) + \" days ago\";\n  interval = seconds / 3600;\n  if (interval > 1) return Math.floor(interval) + \" hours ago\";\n  interval = seconds / 60;\n  if (interval > 1) return Math.floor(interval) + \" minutes ago\";\n  return \"just now\";\n}","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"framer-motion\":\"10.16.4\",\"lucide-react\":\"0.441.0\",\"@devfunlabs/web-sdk\":\"0.5.5\",\"react-router-dom\":\"6.18.0\",\"recharts\":\"2.8.0\",\"react-dom\":\"18.2.0\"}}","appFunctions",[],"token",{"_20":83,"_84":85,"_86":87,"_88":-5,"_89":-5,"_90":91,"_92":59,"_93":94,"_95":59,"_96":42,"_97":42,"_62":63,"_74":19},"HypeHouse","symbol","HYH","image","https://pump.mypinata.cloud/ipfs/bafybeihpfmdm3lhmjof7gs42axl34h4hcmrqufs7j5oijfpp2wdrlcaocq?img-width=256&img-dpr=2","website","twitter","marketcap",6234.77106026,"volumeIn24h","price",0.00000416,"priceChangeIn24h","devCount","appCount","upstreamApp","isLordOfDev","analytics",[102,106,108,110,112,114,116,118,120,122,124,126,128,130,132],{"_103":104,"_105":59},"day","2025-09-24","runCount",{"_103":107,"_105":59},"2025-09-25",{"_103":109,"_105":59},"2025-09-26",{"_103":111,"_105":59},"2025-09-27",{"_103":113,"_105":59},"2025-09-28",{"_103":115,"_105":59},"2025-09-29",{"_103":117,"_105":59},"2025-09-30",{"_103":119,"_105":59},"2025-10-01",{"_103":121,"_105":59},"2025-10-02",{"_103":123,"_105":59},"2025-10-03",{"_103":125,"_105":59},"2025-10-04",{"_103":127,"_105":59},"2025-10-05",{"_103":129,"_105":59},"2025-10-06",{"_103":131,"_105":59},"2025-10-07",{"_103":123,"_105":42},"snapshot","ogImage","https://cdn.dev.fun/og/image/a25f823660c6042027ab/079478c7.webp","isDevbase","project",{"_14":19,"_86":87,"_20":83,"_139":140,"_22":141},"oneliner","Hype, earn, rank up","a liquid-glass shout-out app where community love becomes a leaderboard. give praise, earn points, rise in ranks. the more you hype, the more you win. ","commitDetail","livestream","actionData","errors"]
</article></body></html>

\n give props to someone you love\n

\n they earn points & climb the leaderboard\n

\n leaderboard\n

\n top 3 win $HYH every week\n

how hypehouse works

connect your wallet to join hypehouse!

\n connect your twitter account\n

latest community shoutouts

weekly rewards pool

current leaders this week

give someone props!