Blog list

src/App.jsx

@@ -3,15 +3,16 @@
 
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import About from "./pages/about/About";
+import Blog from "./pages/Blog/Blog";
 import Career from "./pages/career/Career";
 import CauseDetails from "./pages/causes/CauseDetails";
 import Causes from "./pages/causes/Causes";
 import DonatePage from "./pages/causes/DonatePage";
 import Contact from "./pages/contact/Contact";
 import Donners from "./pages/donners/Donners";
+import Faqs from "./pages/faqs/Faqs";
 import Home from "./pages/home/Home";
 import Leadership from "./pages/leadership/Leadership";
-import Faqs from "./pages/faqs/Faqs";
 
 function App() {
   return (
@@ -27,6 +28,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,28 @@
+import React from "react";
+import GeneralHero from "../../components/layout/GeneralHero";
+import Header from "../../components/layout/Header";
+import image1 from "/assets/images/Rectangle 2.png";
+
+import Footer from "../../components/layout/Footer";
+import StatisticsSection from "../../components/layout/StatisticsSection";
+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,39 @@
+import React from "react";
+import Pagination from "../../../components/Pagination";
+import BlogCard from "../../home/components/BlogCard";
+import image14 from "/assets/images/Rectangle 14.png";
+
+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

@@ -1,23 +1,18 @@
-import React from 'react'
-import Header from '../../components/layout/Header'
-import Hero1 from '../../components/layout/Hero1'
-import Footer from '../../components/layout/Footer'
-
+import React from "react";
+import Footer from "../../components/layout/Footer";
+import Header from "../../components/layout/Header";
+import Hero1 from "../../components/layout/Hero1";
+// import FaqsSection from './components/FaqsSection'
 
 const Faqs = () => {
   return (
     <div>
-<Header/>
-<Hero1
-title = "FAQ'S"
-text = "Home"
-span = "FAQ'S"
-/>
-
-{/* <FaqsSection/> */}
+      <Header />
+      <Hero1 title="FAQ'S" text="Home" span="FAQ'S" />
 
-<Footer/>
+      {/* <FaqsSection/> */}
 
+      <Footer />
     </div>
   );
 };

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/DonationSection.jsx

@@ -10,6 +10,7 @@ function DonationSection() {
         Causes of Givest
       </p>
       <div className="flex flex-col gap-8 lg:flex-row">
+
             {donations.slice(0, 3).map((donation, index) => (
         <DonationCard key={donation.id} {...donation} />
               ))}

src/pages/home/components/EventCard.jsx

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

src/pages/home/components/HelpSection.jsx

@@ -1,4 +1,5 @@
 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";