flex-wrap

<FaGithub className="inline-block mr-4" />
          Popular Repositories on GitHub
        </motion.h2>

        <motion.div 
          className="flex justify-center mb-8 space-x-2 md:space-x-4 flex-wrap"
          initial={{ y: 50, opacity: 0 }}
          animate={{ y: 0, opacity: 1 }}
          transition={{ duration: 0.5, delay: 0.2 }}
        >
          {['all', ...languages].map(lang => (
            <motion.button
              key={lang}
              className={`px-3 py-1 md:px-4 md:py-2 rounded-full text-xs md:text-sm font-medium ${selectedLanguage ==...
              onClick={() => setSelectedLanguage(lang)}
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
            >
              <FaCode className="inline-block mr-1 md:mr-2" />
              {lang.charAt(0).toUpperCase() + lang.slice(1)}
            </motion.button>
          ))}
        </motion.div>

        <motion.div

⭐ Bookmarks
        </button>
      </div>

      {/* Filters */}
      <div className="flex flex-wrap gap-4 mb-6">
        <input
          type="text"
          placeholder="Search repositories..."
          value={q}
          onChange={(e) => setQ(e.target.value)}
          className="border rounded px-3 py-2 flex-1"
        />
        <select value={language} onChange={(e) => setLanguage(e.target.value)} className="border rounded px-3 py-2">
          <option value="">All Languages</option>
          <option value="JavaScript">JavaScript</option>
          <option value="TypeScript">TypeScript</option>
          <option value="Python">Python</option>
          <option value="Java">Java</option>
          <option value="Go">Go</option>
        </select>
        <select value={sort} onChange={(e) => setSort(e.target.value)} className="border rounded px-3 py-2">
          <option value="stars">Sort: Stars</option>
          <option value="updated">Sort: Updated</option>
        </select>