feat : add package flag-icon

package-lock.json

@@ -11,6 +11,7 @@
         "@tsparticles/engine": "^3.4.0",
         "@tsparticles/react": "^3.0.0",
         "@tsparticles/slim": "^3.4.0",
+        "country-flag-icons": "^1.5.11",
         "nprogress": "^0.2.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -2250,6 +2251,11 @@
       "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
       "dev": true
     },
+    "node_modules/country-flag-icons": {
+      "version": "1.5.11",
+      "resolved": "https://registry.npmjs.org/country-flag-icons/-/country-flag-icons-1.5.11.tgz",
+      "integrity": "sha512-B+mvFywunkRJs270k7kCBjhogvIA0uNn6GAXv6m2cPn3rrwqZzZVr2gBWcz+Cz7OGVWlcbERlYRIX0S6OGr8Bw=="
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",

package.json

@@ -13,6 +13,7 @@
     "@tsparticles/engine": "^3.4.0",
     "@tsparticles/react": "^3.0.0",
     "@tsparticles/slim": "^3.4.0",
+    "country-flag-icons": "^1.5.11",
     "nprogress": "^0.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/main.tsx

@@ -1,10 +1,10 @@
-import React from 'react'
+import React from "react";
-import ReactDOM from 'react-dom/client'
+import ReactDOM from "react-dom/client";
-import App from './App.tsx'
+import App from "./App.tsx";
-import './index.css'
+import "./index.css";
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
+ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
+  </React.StrictMode>
-)
+);

tailwind.config.js

@@ -9,12 +9,21 @@ export default {
       },
       animation: {
         pulse: "pulse 1.5s ease-in-out infinite",
+        bounce: "bounce 3s infinite",
       },
       keyframes: {
         pulse: {
           "0%": { transform: "scale(1)", opacity: "1" },
           "100%": { transform: "scale(1.5)", opacity: "0" },
         },
+        bounce: {
+          "0%, 100%": {
+            transform: "translateY(-10%)",
+          },
+          "50%": {
+            transform: "none",
+          },
+        },
       },
     },
   },