✨Feat: Add banner component

package.json

@@ -14,6 +14,7 @@
     "@tanstack/react-query": "^5.90.12",
     "@tanstack/react-query-devtools": "^5.91.1",
     "axios": "^1.13.2",
+    "framer-motion": "^12.23.26",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-router-dom": "^7.11.0",

src/pages/home/Home.tsx

@@ -1,10 +1,12 @@
 import Navbar from '../../components/Navbar/Navbar';
 import Alert from './components/Alert/Alert';
+import Banner from './components/Banner/Banner';
 import Chart from './components/Chart/Chart';
 
 const Home = () => {
   return (
     <>
+      <Banner />
       <Navbar />
       <Chart />
       <Alert />

src/pages/home/components/Banner/Banner.tsx

@@ -0,0 +1,54 @@
+import bannerLogo from '../../../../assets/banner/banner.png';
+import up from '../../../../assets/banner/up.png';
+import down from '../../../../assets/banner/down.png';
+import { motion } from 'framer-motion';
+
+const stocks = [
+  { value: 'Bitcoin', status: 'up' },
+  { value: 'Ethereum', status: 'down' },
+  { value: 'Solana', status: 'up' },
+];
+
+function Banner() {
+  return (
+    <div className="flex justify-center items-center gap-[5.7rem] w-full min-h-[11.8rem] border border-main rounded-4xl bg-white">
+      <div className="flex flex-col">
+        <p className="text-[2.6rem] font-bold text-main">Emotional index</p>
+        <div className="flex flex-row gap-[0.8rem]">
+          {stocks.map((stock, index) => (
+            <motion.div
+              key={`${stock.value}-${stock.status}`}
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{
+                duration: 0.5,
+                delay: index * 0.2,
+                repeat: Infinity,
+                repeatDelay: 3,
+              }}
+              className="flex items-center gap-[0.4rem]"
+            >
+              <span
+                className={`text-[1.2rem] sm:text-[1.4rem] font-semibold ${stock.status === 'up' ? 'text-green' : 'text-red'}`}
+              >
+                {stock.value}
+              </span>
+              <img
+                src={stock.status === 'up' ? up : down}
+                alt={stock.status}
+                className="w-4 h-4 object-contain"
+              />
+            </motion.div>
+          ))}
+        </div>
+      </div>
+      <img
+        src={bannerLogo}
+        alt="banner-logo"
+        className="w-[8.4rem] h-[8.4rem]"
+      />
+    </div>
+  );
+}
+
+export default Banner;

src/styles/theme.css

@@ -9,6 +9,9 @@
   /* main color */
   --color-main: #176ef7;
 
+  /* green color */
+  --color-green: #0bbc9d;
+
   /* red color */
   --color-red: #f84545;
   --color-red-light: #fff5f5;