banner css style added

src/App.css

@@ -32,7 +32,6 @@ body {
   font-weight: 400;
   overflow: hidden;
   position: relative;
-  background-color: #61dafb !important;
   color: #685454 !important;
   font-family: 'Centra', sans-serif !important;
 } 
@@ -230,24 +229,80 @@ nav.navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {
 nav.navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
 	border-color: transparent;
 }
-/* banner configuration */
+/* banner  */
 .banner {
-  padding-top: 100px; /* Adjust the value as needed */
-  padding-bottom: 50px; /* Optional: Add some padding to the bottom for spacing */
-  position: relative; /* Ensure the content is positioned correctly */
-  z-index: 1; /* Ensure the banner content is above the background */
+  margin-top: 0;
+  margin-bottom: 0;
+  padding: 150px 0 100px 0;
+  position: relative;
+  background-image: url('./assets/img/01.jpg');
+  background-position: top center;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+.banner .tagline {
+  font-weight: 600;
+  letter-spacing: 0.8px;
+  padding: 8px 10px;
+  background: linear-gradient(90.21deg, rgba(170, 54, 124, 0.5) -5.91%, rgba(74, 47, 189, 0.5) 111.58%);
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  font-size: 20px;
+  margin-bottom: 16px;
+  display: inline-block;
+}
+.banner h1 {
+  font-size: 50px;
+  color: #fff;
+  font-weight: 700;
+  letter-spacing: 0.8px;
+  line-height: 1;
+  margin-bottom: 20px;
+  display: block;
+}
+.banner p {
+  color: #fff;
+  font-size: 18px;
+  letter-spacing: 0.8px;
+  line-height: 1.5em;
+  width: 96%;
+}
+.banner button {
+  color: #fff;
+  font-weight: 700;
+  font-size: 20px;
+  margin-top: 60px;
+  letter-spacing: 0.8px;
+  display: flex;
+  align-items: center;
+}
+.banner button svg {
+  font-size: 25px;
+  margin-left: 10px;
+  transition: 0.3s ease-in-out;
+  line-height: 1;
+}
+.banner button:hover svg {
+  margin-left: 25px;
 }
-
 .banner img {
-  max-width: 100%; /* Ensure the image scales properly */
-  height: auto; /* Maintain aspect ratio */
-  display: block; /* Remove any inline-block spacing */
-  margin: 0 auto; /* Center the image horizontally */
-  background-color: transparent; /* Ensure the image background is transparent */
+  animation: updown 3s linear infinite;
+}
+@keyframes updown {
+    0% {
+        transform: translateY(-20px);
+    }
+    50% {
+        transform: translateY(20px);
+    }
+    100% {
+        transform: translateY(-20px);
+    }
+}
+.txt-rotate > .wrap {
+  border-right: 0.08em solid #666;
 }
 
 
-
 .App {
   text-align: center;
 }

src/components/banner.js

@@ -1,33 +1,42 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback} from 'react';
 import { Col, Container, Row } from 'react-bootstrap';
 import { ArrowRightCircle } from 'react-bootstrap-icons';
 import HeadImg from '../assets/img/header-img.svg';
 
 const Banner = () => {
-    const job = "Web Developer";
-    const [text, setText] = useState('');
-    const [delta, setDelta] = useState(300); // Set an initial value
-    const period = 2000;
-
-    useEffect(() => {
-        let ticker = setInterval(() => {
-            tick();
-        }, delta);
-        return () => { clearInterval(ticker); };
-    }, [text]);
-
-    const tick = () => {
-      const fullText = job;
-      const updatedText = fullText.substring(0, text.length +1);
-      setText(updatedText);
-
-      if(updatedText === fullText) {
-        setTimeout(() => {
-          setText('');
-          setDelta(300);
-        }, period)
-      }
-    };
+  const job = "Web Developer";
+  const [text, setText] = useState('');
+  const [isDeleting, setIsDeleting] = useState(false); // Track whether we are deleting
+  const [delta, setDelta] = useState(300); // Set an initial value
+  const period = 2000;
+
+  const tick = useCallback(() => {
+    const fullText = job;
+    let updatedText = '';
+
+    if (isDeleting) {
+        updatedText = fullText.substring(0, text.length - 1);
+    } else {
+        updatedText = fullText.substring(0, text.length + 1);
+    }
+
+    setText(updatedText);
+
+    if (!isDeleting && updatedText === fullText) {
+        setTimeout(() => setIsDeleting(true), period);
+    } else if (isDeleting && updatedText === '') {
+        setIsDeleting(false);
+    }
+
+    setDelta(isDeleting ? 150 : 300); // Adjust speed for deleting and typing
+}, [isDeleting, text, job, period]);
+
+useEffect(() => {
+    let ticker = setInterval(() => {
+        tick();
+    }, delta);
+    return () => { clearInterval(ticker); };
+}, [tick, delta]); // Include tick and delta in the dependency array
 
     return (
         <section className='banner' id="home">