Merge pull request #46 from skye8-tech/BlogDetails

Blog details

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/components/layout/Header.jsx

@@ -60,10 +60,12 @@ function Header(props) {
             ))}
           </div>
           <Button
-            type="primary-button"
-            text="Donate Now"
-            icon={<i className="fa fa-angle-right"></i>}
-          ></Button>
+
+              type="primary-link"
+              text="Donate Now"
+              icon={<i className="fa fa-angle-right"></i>}
+              href={`/donate`}
+            ></Button>
         </nav>
         {children}
       </header>

src/pages/Blog/Blog.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+import image1 from "../../assets/images/Rectangle 2.png";
+import GeneralHero from "../../components/layout/GeneralHero";
+import Header from "../../components/layout/Header";
+
+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/BlogDetails.jsx

@@ -0,0 +1,174 @@
+import React from 'react'
+import { useParams } from "react-router-dom";
+import Button from "../../../src/components/Button";
+import image from "../../assets/images/Rectangle 2.png";
+import image2 from "../../assets/images/Image3.png";
+import image3 from "../../assets/images/Rectangle19.jpg";
+import Footer from "../../components/layout/Footer";
+import GeneralHero from "../../components/layout/GeneralHero";
+import Header from "../../components/layout/Header";
+import StatisticsSection from "../../components/layout/StatisticsSection";
+
+function BlogDetails() {
+    const id= useParams().id
+
+  return (
+    <>
+<Header outerCircle=""></Header>
+      <GeneralHero
+        title="Blog Details "
+        subTitle="Children Education Need fory the world "
+        image={image}
+      ></GeneralHero>
+
+<section>
+<div className="flex flex-col md:flex-row  mx-6 md:mx-32   my-20 gap-10">
+        <section className="flex flex-col w-full md:w-1/2 gap-5">
+          <div className=" flex flex-col gap-6">
+            <p className=" text-2xl md:text-3xl font-bold ">Causes Category</p>
+            <div className="flex flex-row justify-between">
+              <p>Water</p>
+              <p>(01)</p>
+            </div>
+            <div className="flex flex-row justify-between">
+              <p>Education </p>
+              <p>(05)</p>
+            </div>
+            <div className="flex flex-row justify-between">
+              <p>Water</p>
+              <p>(01)</p>
+            </div>
+            <div className="flex flex-row justify-between">
+              <p>Education </p>
+              <p>(05)</p>
+            </div>
+          </div>
+          <div className="flex flex-col gap-6">
+            <p className=" text-2xl mb-3 md:text-3xl font-bold ">
+              Urgent Causes
+            </p>
+            <div className="flex flex-col gap-4 w-full">
+              <img src={image}  />
+
+              <div className="p-4 flex flex-col gap-5">
+                <div className="flex flex-col">
+                  <p className="font-bold text-xl p-0 m-0">
+                    Children education need for the change the world{" "}
+                  </p>
+                  <p className="m-0">
+                    Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+                    Fugiat exercitationem quod incidunt placeat laborum.
+                    Repellendus, repudiandae error, quae nam esse possimus est
+                    illum, autem nisi voluptatum molestiae dolores doloremque
+                    inventore.
+                  </p>
+                </div>
+                <div className="flex flex-row justify-between">
+                  <div>
+                    <p className="font-medium">Goal</p>
+                    <p className="font-medium text-xl text-primary-color">
+                      $1000
+                    </p>
+                  </div>
+                  <div>
+                    <p className="font-medium">Goal</p>
+                    <p className="font-medium text-xl text-primary-color">
+                      $1000
+                    </p>
+                  </div>
+                  <div>
+                    <p className="font-medium">Goal</p>
+                    <p className="font-medium text-xl text-primary-color">
+                      $1000
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <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-6 h-fit">
+                    {" "}
+                    $20
+                  </div>
+                  <div className="border border-primary-color py-2 px-6 h-fit">
+                    {" "}
+                    $50
+                  </div>
+                  <div className="border border-primary-color py-2 px-6 h-fit">
+                    {" "}
+                    $200
+                  </div>
+                  <div className="border border-primary-color py-2 px-6 h-fit">
+                    {" "}
+                    $200
+                  </div>
+                  <div className="border border-primary-color  py-2 px-6 h-fit">
+                    {" "}
+                    Custom
+                  </div>
+                </div>
+                <Button
+                  className="flex justify-center items-center w-full"
+                  type="primary-link"
+                  text="Donate Now"
+                  icon={<i className="fa fa-angle-right"></i>}
+                  href={`/donate`}
+                  style={{ width: "100%" }}
+                ></Button>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* right section  */}
+        <section className="flex flex-col gap-6 w-full  md:w-1/2 ">
+          <img src={image2} alt='blogcover'className="w-full" />
+          <div>
+            <p className=" text-2xl md:text-3xl font-bold ">Children Education Needs for Well The World</p>
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. lorem
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. A eius,
+              obcaecati pariatur culpa sapiente aut ratione voluptates voluptas
+              officiis minima saepe dignissimos labore vel autem eveniet debitis
+              repudiandae delectus inventore. Culpa accusantium amet provident
+              hic quis voluptate, autem voluptatem magni quos eos quisquam omnis
+              quae rem, repellendus nihil sit saepe, impedit perspiciatis.
+            </p>
+          </div>
+          <div>
+            <p className=" text-2xl md:text-3xl font-bold ">Online education needs for the change The World</p>
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. lorem
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. A eius,
+              obcaecati pariatur culpa sapiente aut ratione voluptates voluptas
+              officiis minima saepe dignissimos labore vel autem eveniet debitis
+              repudiandae delectus inventore. Culpa accusantium amet provident
+              hic quis voluptate, autem voluptatem magni quos eos quisquam omnis
+              quae rem, repellendus nihil sit saepe, impedit perspiciatis.
+            </p>
+          </div>
+        <div className='flex flex-row gap-6 justify-between'>
+        <img src={image3} className="w-1/3"alt="" />
+        <img src={image3} className="w-1/3"alt="" />
+        <img src={image3} className="w-1/3"alt="" />
+        </div>
+        <div>
+          <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. lorem
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. A eius,
+              obcaecati pariatur culpa sapiente aut ratione voluptates voluptas
+              quae rem, repellendus nihil sit saepe, impedit perspiciatis.
+            </p>
+          </div>
+        </section>
+      </div>
+</section>
+
+<StatisticsSection></StatisticsSection>
+<Footer></Footer>
+    </>
+  )
+}
+
+export default BlogDetails

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,6 +2,8 @@ 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'
+
 
 
 const Faqs = () => {

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,10 +10,11 @@ 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} />
-              ))}
-      </div>
+
+      {donations.slice(0, 3).map((donation, index) => (
+  <DonationCard key={donation.id} {...donation} />
+))}
+</div>
       <div className="flex flex-row gap-1 ">
         <div className="w-4 h-4 rounded-lg bg-[#9483F1]"></div>
         <div className="w-16 h-4 rounded-lg bg-primary-color"></div>

src/pages/home/components/EventCard.jsx

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

src/pages/home/components/EventSection.jsx

@@ -13,10 +13,12 @@ function EventSection() {
           industry ore
         </p>
         <Button
-          type="primary-button"
-          text="Donate Now"
-          icon={<i className="fa fa-angle-right"></i>}
-        ></Button>
+
+              type="primary-link"
+              text="Donate Now"
+              icon={<i className="fa fa-angle-right"></i>}
+              href={`/donate`}
+            ></Button>
       </div>
       <div>
         <EventCard