Blog list page

src/App.jsx

@@ -12,6 +12,8 @@ import Donners from "./pages/donners/Donners";
 import Home from "./pages/home/Home";
 import Leadership from "./pages/leadership/Leadership";
 import Faqs from "./pages/faqs/Faqs";
+import Blog from "./pages/Blog/Blog";
+import BlogDetails from "./pages/Blog/BlogDetails";
 
 function App() {
   return (
@@ -27,6 +29,8 @@ function App() {
         <Route path="/donners" element={<Donners />} />
         <Route path="/causes/:id" element={<CauseDetails />} />
         <Route path="/donate" element={<DonatePage />} />
+        <Route path="/blog" element={<Blog/>}/>
+        <Route path="/blog/:id" element={<BlogDetails/>}/>
       </Routes>
     </BrowserRouter>
   );

src/pages/Blog/Blog.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import Header from "../../components/layout/Header";
+import GeneralHero from "../../components/layout/GeneralHero";
+import image1 from "../../assets/images/Rectangle 2.png";
+
+
+import StatisticsSection from '../../components/layout/StatisticsSection';
+import Footer from '../../components/layout/Footer';
+import BlogList from './components /BlogList';
+
+function Blog() {
+
+
+  return (
+    <>
+    <Header outerCircle=""></Header>
+      <GeneralHero title="Blog " subTitle="Blog List" image={image1}></GeneralHero>
+
+     <BlogList></BlogList> 
+
+    <StatisticsSection>
+
+    </StatisticsSection>
+    <Footer></Footer>
+    </>
+  )
+}
+
+export default Blog

src/pages/Blog/components /BlogList.jsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import BlogCard from '../../home/components/BlogCard';
+import image14 from "../../../assets/images/Rectangle 14.png";
+import Pagination from '../../../components/Pagination';
+function BlogList() {
+const blogId=1
+    const     day="25"
+    const     month="Febuary"
+    const       category="Education"
+    const       title="Children Education Needs For Well The World."
+    const      description="Children Education Needs For Well The World."
+    const      author="Adam"
+  return (
+    <>
+    <section className="mx-6 md:mx-32 flex flex-col items-center my-20 gap-10">
+
+     <div className="flex flex-col lg:grid lg:grid-cols-3 gap-6">
+     {Array.from({ length: 12 }).map((_, index) => (
+
+       <BlogCard key={index} 
+
+       id={blogId}
+       image={image14}
+       day="25"
+       month="Febuary"
+       category="Education"
+       title="Children Education Needs For Well The World."
+       description="Children Education Needs For Well The World."
+       author="Adam"
+       />
+     ))}
+
+</div>
+
+    <Pagination/>
+   </section>
+    </>
+  )
+}
+
+export default BlogList

src/pages/causes/CauseDetails.jsx

@@ -86,23 +86,23 @@ function CauseDetails() {
 
               <div className="flex flex-col items-center gap-6 w-full">
                 <div className="flex flex-row justify-between ">
-                  <div className="border border-primary-color py-2 px-8 h-fit">
+                  <div className="border border-primary-color py-2 px-6 h-fit">
                     {" "}
                     $20
                   </div>
-                  <div className="border border-primary-color py-2 px-8 h-fit">
+                  <div className="border border-primary-color py-2 px-6 h-fit">
                     {" "}
                     $50
                   </div>
-                  <div className="border border-primary-color py-2 px-8 h-fit">
+                  <div className="border border-primary-color py-2 px-6 h-fit">
                     {" "}
                     $200
                   </div>
-                  <div className="border border-primary-color py-2 px-8 h-fit">
+                  <div className="border border-primary-color py-2 px-6 h-fit">
                     {" "}
                     $200
                   </div>
-                  <div className="border border-primary-color  py-2 px-8 h-fit">
+                  <div className="border border-primary-color  py-2 px-6 h-fit">
                     {" "}
                     Custom
                   </div>

src/pages/faqs/Faqs.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import Header from '../../components/layout/Header'
 import Hero1 from '../../components/layout/Hero1'
 import Footer from '../../components/layout/Footer'
-import FaqsSection from './components/FaqsSection'
+// import FaqsSection from './components/FaqsSection'
 
 
 const Faqs = () => {
@@ -18,7 +18,7 @@ span = "FAQ'S"
 
 />
 
-<FaqsSection/>
+{/* <FaqsSection/> */}
 
 <Footer/>
 

src/pages/home/components/BlogCard.jsx

@@ -2,9 +2,11 @@ import React from "react";
 import Button from "../../../components/Button";
 
 function BlogCard(props) {
-  const { image, day, month, category, title, description, author } = props;
+
+  const { id,image, day, month, category, title, description, author } = props;
   const maxDescriptionLength = 60; // max letters
-  const truncatedDescription =
+  console.log(id);
+    const truncatedDescription =
     description.length > maxDescriptionLength
       ? `${description.substring(0, maxDescriptionLength)}...`
       : description;
@@ -41,10 +43,11 @@ function BlogCard(props) {
           <p>{author}</p>
         </div>
         <Button
-          text="View Details"
-          type="secondary-button"
-          icon={<i className="fa fa-angle-right"></i>}
-        ></Button>
+            type="secondary-link"
+            text="Readmore"
+            icon={<i className="fa fa-angle-right"></i>}
+            href={`/blog/${id}`}
+          ></Button>
       </div>
     </section>
   );

src/pages/home/components/EventCard.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import image10 from "../../../assets/images/image1.png";
+import image10 from "../../../assets/images/Image1.png";
 
 
 function EventCard(props) {

src/pages/home/components/HelpSection.jsx

@@ -1,7 +1,7 @@
 import React from "react";
-import icon from "../../../assets/images/icon.png";
-import icon2 from "../../../assets/images/icon2.png";
-import icon3 from "../../../assets/images/icon3.png";
+import icon from "../../../assets/images/Icon.png";
+import icon2 from "../../../assets/images/Icon2.png";
+import icon3 from "../../../assets/images/Icon3.png";
 import HelpCard from "./HelpCard";
 
 function HelpSection() {