Improve banner animation

package.json

@@ -23,6 +23,7 @@
     "postcss": "^8.4.33",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-fast-marquee": "^1.6.4",
     "react-katex": "^3.0.1",
     "react-markdown": "^9.0.1",
     "react-scroll-percentage": "^4.3.2",

src/components/Theme.tsx

@@ -32,19 +32,19 @@ type Props = {
 };
 
 export const ThemeSwitcher = () => {
-    const {theme, toggleTheme} = useTheme();
+    const { theme, toggleTheme } = useTheme();
 
     return (
         <button
             type="button"
-            className="btn btn-secondary"
+            className="btn btn-secondary drop-shadow-md"
             onClick={toggleTheme}
             aria-label="テーマの切り替え"
-          >
+        >
             {theme === "light" ? (
-              <FontAwesomeIcon icon={faMoon} />
+                <FontAwesomeIcon icon={faMoon} />
             ) : (
-              <FontAwesomeIcon icon={faSun} />
+                <FontAwesomeIcon icon={faSun} />
             )}
         </button>
     )

tailwind.config.js

@@ -6,17 +6,7 @@ export default {
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {
+    extend: {},
-      animation: {
-        marquee: 'marquee 30s linear infinite'
-      },
-      keyframes: {
-        marquee: {
-          '0%': { transform: 'translateX(100%)' },
-          '100%': { transform: 'translateX(-160%)' }
-        }
-      }
-    },
   },
   plugins: [
     require('@tailwindcss/typography'),