added streak display component acc to figma

nepalingo-web/src/components/DictionarySearchBar.tsx

@@ -1,10 +1,10 @@
 import React, { useState } from "react";
 import useDictionary, { DictionaryProps } from "../hooks/useDictionary";
 import InputText from "../components/InputText";
-import Button from "../components/Button"; // Assuming you have a Button component
+import Button from "../components/Button";
 
 interface DictionarySearchBarProps {
-  language: DictionaryProps["language"]; // Define language as a prop
+  language: DictionaryProps["language"];
 }
 
 const DictionarySearchBar: React.FC<DictionarySearchBarProps> = ({

nepalingo-web/src/components/GreetingCard.tsx

@@ -5,21 +5,6 @@ interface GreetingCardProps {
   name: string;
 }
 
-const cardStyle: React.CSSProperties = {
-  border: "2px solid #000",
-  borderRadius: "15px",
-  padding: "20px",
-  margin: "10px",
-  textAlign: "center",
-  backgroundColor: "#f0f0f0",
-  fontFamily: "Arial, sans-serif",
-};
-
-const headingStyle: React.CSSProperties = {
-  fontSize: "2em",
-  color: "#333",
-};
-
 const GreetingCard: React.FC<GreetingCardProps> = ({ name }) => {
   ReactGA.send({
     hitType: "pageview",
@@ -37,9 +22,15 @@ const GreetingCard: React.FC<GreetingCardProps> = ({ name }) => {
       return "Good Evening";
     }
   };
+
   return (
-    <div style={cardStyle}>
-      <h1 style={headingStyle}>{`${getCurrentGreeting()}, ${name}`} </h1>
+    <div className="m-2 text-center bg-black font-secondary">
+      <h1 className="text-3xl font-bold leading-7 text-white">
+        {`${getCurrentGreeting()} ${name},`}
+      </h1>
+      <p className="px-1 text-sm font-light leading-6 text- mt-2 text-white text-left">
+        Lets learn some new words today!
+      </p>
     </div>
   );
 };

nepalingo-web/src/components/header/Header.tsx

@@ -5,7 +5,7 @@ import ChangeLanguage from "@/components/header/ChangeLanguage";
 
 const Header: React.FC = () => {
   return (
-    <nav className=" border-gray-200 px-4 lg:px-6 py-1 bg-black text-white flex justify-between items-center w-full h-16">
+    <nav className=" border-gray-200 px-6 py-4 lg:px-6 py-1 bg-black text-white flex justify-between items-center w-full h-16">
       <div className="flex-1">
         <a href="https://nepalingo.com">
           <img src={logo} alt="Nepalingo Logo" className="h-12" />

nepalingo-web/src/components/header/StreakDisplay.tsx

@@ -0,0 +1,30 @@
+import React, { useContext } from "react";
+import { StreakContext } from "@/hooks/StreakContext";
+import { getPhrase } from "@/components/header/StreakPhrase";
+import fire from "../../assets/fire.svg";
+
+const StreakDisplay: React.FC = () => {
+  const { currentStreak } = useContext(StreakContext);
+  const phrase = getPhrase(currentStreak);
+
+  return (
+    <div className="bg-[#D03641] min-w-[210px] max-w-max h-[55px] rounded-md px-3 pt-0 inline-flex items-center justify-between text-white">
+      <div className="text-left flex-1">
+        <p className="text-sm font-bold leading-tight uppercase">
+          {phrase.split("!")[0]}!
+        </p>
+        <p className="text-sm font-bold leading-tight uppercase">
+          {phrase.split("!")[1]}!
+        </p>
+      </div>
+      <div className="relative flex-shrink-0">
+        <img src={fire} alt="Fire" className="w-10 h-10" />
+        <span className="absolute font-black font-primary text-1xl text-white bottom-0 left-1/2 transform -translate-x-1/2">
+          {currentStreak}
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default StreakDisplay;

nepalingo-web/src/components/header/StreakPhrase.tsx

@@ -1,4 +1,3 @@
-// streakPhrases.ts
 export interface StreakPhrase {
   min: number;
   max: number;

nepalingo-web/src/pages/Home.tsx

@@ -6,6 +6,7 @@ import Header from "@/components/header/Header";
 import GreetingCard from "@/components/GreetingCard";
 import DailyQuiz from "@/components/DailyQuiz";
 import ViewDictionary from "@/components/ViewDictionary";
+import StreakDisplay from "@/components/header/StreakDisplay";
 
 const Home: React.FC = () => {
   ReactGA.send({
@@ -16,16 +17,15 @@ const Home: React.FC = () => {
   const { user } = useAuth();
 
   return (
-    <div className="flex flex-col w-full justify-between h-screen bg-gradient-to-r from-black via-gray-800 to-black text-white">
+    <div className="flex flex-col w-full justify-between h-screen bg-black text-white font-primary">
       <Header />
-      <div className="flex flex-col items-center justify-center flex-grow">
-        <div className="mt-10">
-          <div className="text-xl font-bold text-centre">
-            <GreetingCard name={user?.user_metadata?.username} />
-          </div>
+      <div className="flex flex-col px-6 items-center justify-center flex-grow">
+        <div className="flex items-center justify-between w-full mt-5 text-xl font-primary font-bold">
+          <GreetingCard name={user?.user_metadata?.username} />
+          <StreakDisplay />
         </div>
 
-        <div className="flex flex-col items-center mt-10">
+        <div className="flex flex-col items-center mt-5">
           <div className="w-40 h-40 border-2 border-white rounded-full flex items-center justify-center">
             <img
               src={logo}