Error fix

package.json

@@ -20,6 +20,7 @@
     "react-photo-album": "^2.4.0",
     "react-responsive-carousel": "^3.2.23",
     "react-scripts": "5.0.1",
+    "react-use": "^17.5.0",
     "styled-components": "^6.1.11",
     "swiper": "^11.1.4",
     "tailwind-merge": "^2.3.0",

src/App.js

@@ -12,10 +12,9 @@ import Blogs from "./pages/blogs";
 
 function App() {
   return (
-
   <BrowserRouter>
       <SplashScreen/>
-      <Header type={1} />
+      <Header />
       <Routes>
           <Route path="/" element={<Homepage />}/>
           <Route path="/team" element={<Team />}/>

src/components/Accordian/hAccord.jsx

@@ -0,0 +1,62 @@
+import React,{useState} from 'react'
+import "./style_h.css"
+const items = [
+    {
+        header: "ABOUT US",
+        header2: "ABOUT US",
+        content: "this is about us.",
+    },
+
+    {
+        header: "OUR VISION",
+        header2: "OUR VISION",
+        content: "this is our vision.",
+    },
+
+    {
+        header: "NEWSLETTER",
+        header2: "NEWSLETTER",
+        content: "this is Newsssss.",
+    },
+    {
+        header: "CONTACT",
+        header2: "CONTACT",
+        content: "contact details in the footer.",
+    },
+];
+
+function HAccord() {
+    const [accord,setActiveAccord]=useState(-1);
+
+    const toggleAccordion=(index) =>{
+        setActiveAccord(index);
+    }
+    return (
+        <>
+        <div className='text-white h_accord_main flex flex-col items-center'>
+            {items.map((item,index) => {
+                return (
+                    <div key={index} onClick={()=> toggleAccordion(index)} >
+                        <div className='flex justify-between p-6'>
+                        <div className="h_accord_heading">
+                            <h3 className={accord === index ? "active":""}>{item.header2}</h3>
+                        </div>
+                        <div>
+                            { accord === index ? (<><span className='verticle'>-</span></>) : (<><span className='verticle'>+</span></>)}
+
+                        </div>
+                        </div>
+                        <div>
+                            <p className={accord === index ? 'active' : "inactive"}>{item.content}</p>
+                        </div>
+                    </div>
+                );
+            })
+
+            }
+        </div>
+        </>
+    )
+
+}
+export default HAccord

src/components/Accordian/imageAccordian.jsx

@@ -19,8 +19,8 @@ const ImageAccordian = ({ itemms, setActiveItem }) => {
                 className={`image-accordion-item  ${isActive}`}
                 onClick={() => handleToggle(index)}
                 >
-                <h2 className='out_content -rotate-90 flex'>{item.header}</h2>
-                <div className="content text-center">
+                <h2 className='out_content -rotate-90'>{item.header}</h2>
+                <div className="content -rotate-90 xl:rotate-0">
 
                     <h2>{item.header}</h2>
                 </div>

src/components/Accordian/style_h.css

@@ -0,0 +1,34 @@
+.h_accord_main .inactive {
+    display:none;
+}
+
+.h_accord_main >div {
+    background-image: linear-gradient(to bottom, #061b24 2%, #072031, #000b11 91%);
+    border: 2px solid #319795;
+    margin-bottom:20px;
+    padding:0px 40px;
+    border-radius:15px;
+    cursor:pointer;
+    width:80%;
+
+}
+.h_accord_heading {
+    display:flex;
+    justify-content:space-between;
+    align-items:center;
+}
+.h_accord_heading .active {
+    color:#319795;
+}
+.h_accord_heading h3 {
+    color:rgb(20 184 166 / var(--tw-border-opacity));
+    font-weight:600;
+    font-size:larger;
+}
+.h_accord_main p {
+    margin:2px;
+    padding-bottom: 30px;
+    color:#319795;
+    line-height:1.4;
+
+}

src/components/BlogCard.jsx

@@ -1,18 +1,6 @@
-// const BlogCard = ({ title, date, imageUrl }) => {
-//   return (
-//     <div className="blog-card cursor-pointer">
-//       <h2 className="blog-title">{title}</h2>
-//       <p className="blog-date">{date}</p>
-//       <img className="w-full  blog-image" src={imageUrl} alt={title} />
-//     </div>
-//   );
-// };
-
-// export default BlogCard;
-
 const BlogCard = ({ title, date, readTime, imageUrl }) => {
   return (
-    <div className="rounded-lg overflow-hidden p-4 border m-4 border-gray-200 blog-card cursor-pointer bg-slate-900">
+    <div className="rounded-lg overflow-hidden p-4 border m-4 border-gray-200 blog-card cursor-pointer bg-gradient-to-t from-[#040414] to-[#0E1C31]">
       <h2 className="blog-title">{title}</h2>
       <p className="blog-date">{date}  • {readTime}</p>
       <img className="blog-image" src={imageUrl} alt={title} />