From 018676221c2c61892772346bb1cc63079840f205 Mon Sep 17 00:00:00 2001
From: bayeka binet <minetbayeka@gmail.com>
Date: Tue, 20 Aug 2024 04:55:44 -0700
Subject: [PATCH] new branch for the faq's too

---
 src/pages/Blog/Blog.jsx                   |   2 +-
 src/pages/Blog/BlogDetails.jsx            |   6 +-
 src/pages/Blog/components/BlogList.jsx    |   2 +-
 src/pages/faqs/Faqs.jsx                   |   4 +-
 src/pages/faqs/components/FaqsSection.jsx | 303 ++++++++++++++++++++++
 5 files changed, 310 insertions(+), 7 deletions(-)
 create mode 100644 src/pages/faqs/components/FaqsSection.jsx

diff --git a/src/pages/Blog/Blog.jsx b/src/pages/Blog/Blog.jsx
index 241b8fd..b05ab3f 100644
--- a/src/pages/Blog/Blog.jsx
+++ b/src/pages/Blog/Blog.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import image1 from "../../assets/images/Rectangle 2.png";
+import image1 from "/assets/images/Rectangle 2.png";
 import GeneralHero from "../../components/layout/GeneralHero";
 import Header from "../../components/layout/Header";
 
diff --git a/src/pages/Blog/BlogDetails.jsx b/src/pages/Blog/BlogDetails.jsx
index 88a8611..3cf86f2 100644
--- a/src/pages/Blog/BlogDetails.jsx
+++ b/src/pages/Blog/BlogDetails.jsx
@@ -1,9 +1,9 @@
 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 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";
diff --git a/src/pages/Blog/components/BlogList.jsx b/src/pages/Blog/components/BlogList.jsx
index a08c3e6..bd8524b 100644
--- a/src/pages/Blog/components/BlogList.jsx
+++ b/src/pages/Blog/components/BlogList.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import BlogCard from '../../home/components/BlogCard';
-import image14 from "../../../assets/images/Rectangle 14.png";
+import image14 from "/assets/images/Rectangle 14.png";
 import Pagination from '../../../components/Pagination';
 function BlogList() {
 const blogId=1
diff --git a/src/pages/faqs/Faqs.jsx b/src/pages/faqs/Faqs.jsx
index c600d83..509f1c9 100644
--- a/src/pages/faqs/Faqs.jsx
+++ b/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'
 
 
 
@@ -16,7 +16,7 @@ text = "Home"
 span = "FAQ'S"
 />
 
-{/* <FaqsSection/> */}
+ <FaqsSection/> 
 
 <Footer/>
 
diff --git a/src/pages/faqs/components/FaqsSection.jsx b/src/pages/faqs/components/FaqsSection.jsx
new file mode 100644
index 0000000..44d0711
--- /dev/null
+++ b/src/pages/faqs/components/FaqsSection.jsx
@@ -0,0 +1,303 @@
+import React from "react";
+
+const FaqsSection = () => {
+  return (
+    <div className="mt-10 text-center">
+      <h1 className="text-4xl font-semibold">Frequently Asked Questions</h1>
+      <p className="text-xl">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis,
+        adipisci. Perspiciatis explicabo modi exercitationem, nulla praesentium
+        pariatur ipsam suscipit magni?
+      </p>
+
+      <div className="flex justify-evenly pt-10">
+        <button className="bg-primary-color text-white p-5 rounded-md"> General FAQ'S</button>
+        <p>DONATIONS FAQ'S</p>
+        <p>CHARITY FAQ'S</p>
+      </div>
+
+      <div className="p-10 bg-white text-gray-700">
+        <div className="relative w-[1400px] overflow-hidden mx-28">
+          <input
+            type="checkbox"
+            className="peer absolute top-0
+             inset-x-0 w-full h-12
+             opacity-0 z-10 cursor-pointer"
+          />
+
+          <div
+            className="
+           bg-primary-color h-16 w-full flex items-center pl-5 "
+          >
+            <h1 className="text-lg font font-semibold text-white">
+              
+              How do i apply to get a charity bib?
+            </h1>
+          </div>
+
+          <div
+            className="absolute top-3 right-3 text-white transition-transform duration-500
+           rotate-0   peer-checked:rotate-180"
+          >
+            {/**arrow */}
+            <i className="fa fa-angle-down pr-2 px-2"></i>
+          </div>
+
+          <div
+            className="
+    bg-white overflow-hidden transition-all duration-500 max-h-0 peer-checked:max-h-40">
+            {/**content */}
+            <div className="p-4">
+              <p className="text-center  text-2xl">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                Obcaecati quo numquam molestias sunt quas, fugit quod
+                perspiciatis iste itaque ut!
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                Obcaecati quo numquam molestias sunt quas, fugit quod
+                perspiciatis iste itaque ut!
+              </p>
+            </div>
+          </div>
+        </div>
+          
+      </div>
+
+        
+      
+
+         {/*second collapse*/}
+      <div className="p-10 bg-white text-gray-700">
+
+<div className="relative w-[1400px] overflow-hidden mx-28">
+  <input
+    type="checkbox"
+    className="peer absolute top-0
+     inset-x-0 w-full h-12
+     opacity-0 z-10 cursor-pointer"
+  />
+  <div
+    className="
+   bg-primary-color h-16 w-full flex items-center pl-5 "
+  >
+    <h1 className="text-lg font font-semibold text-white">
+      
+      How much money do i have to raise and who pay my entry fee?
+    </h1>
+  </div>
+
+  <div
+    className="absolute top-3 right-3 text-white transition-transform duration-500
+   rotate-0   peer-checked:rotate-180"
+  >
+    {/**arrow */}
+    <i className="fa fa-angle-down pr-2 px-2"></i>
+  </div>
+
+  <div
+    className="
+bg-white overflow-hidden transition-all duration-500 max-h-0 peer-checked:max-h-40">
+    {/**content */}
+    <div className="p-4">
+      <p className="text-center text-2xl">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+        Obcaecati quo numquam molestias sunt quas, fugit quod
+        perspiciatis iste itaque ut!
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+        Obcaecati quo numquam molestias sunt quas, fugit quod
+        perspiciatis iste itaque ut!
+      </p>
+    </div>
+  </div>
+</div>
+</div>
+
+
+ {/*third collapse*/}
+ <div className="p-10 bg-white text-gray-700">
+
+<div className="relative w-[1400px] overflow-hidden mx-28">
+  <input
+    type="checkbox"
+    className="peer absolute top-0
+     inset-x-0 w-full h-12
+     opacity-0 z-10 cursor-pointer"
+  />
+  <div
+    className="
+   bg-primary-color h-16 w-full flex items-center pl-5 "
+  >
+    <h1 className="text-lg font font-semibold text-white">
+      Is there a training program and group runs?
+    </h1>
+  </div>
+
+  <div
+    className="absolute top-3 right-3 text-white transition-transform duration-500
+   rotate-0   peer-checked:rotate-180"
+  >
+    {/**arrow */}
+    <i className="fa fa-angle-down pr-2 px-2"></i>
+  </div>
+
+  <div
+    className="
+bg-white overflow-hidden transition-all duration-500 max-h-0 peer-checked:max-h-40">
+    {/**content */}
+    <div className="p-4">
+      <p className="text-center text-2xl">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+        Obcaecati quo numquam molestias sunt quas, fugit quod
+        perspiciatis iste itaque ut!
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+        Obcaecati quo numquam molestias sunt quas, fugit quod
+        perspiciatis iste itaque ut!
+      </p>
+    </div>
+  </div>
+</div>
+</div>
+
+
+ {/*fourth collapse*/}
+ <div className="p-10 bg-white text-gray-700">
+
+<div className="relative w-[1400px] overflow-hidden mx-28">
+  <input
+    type="checkbox"
+    className="peer absolute top-0
+     inset-x-0 w-full h-12
+     opacity-0 z-10 cursor-pointer"
+  />
+  <div
+    className="
+   bg-primary-color h-16 w-full flex items-center pl-5 "
+  >
+    <h1 className="text-lg font font-semibold text-white">
+      
+      Will there be fundraising support?
+    </h1>
+  </div>
+
+  <div
+    className="absolute top-3 right-3 text-white transition-transform duration-500
+   rotate-0   peer-checked:rotate-180"
+  >
+    {/**arrow */}
+    <i className="fa fa-angle-down pr-2 px-2"></i>
+  </div>
+
+  <div
+    className="
+bg-white overflow-hidden transition-all duration-500 max-h-0 peer-checked:max-h-40">
+    {/**content */}
+    <div className="p-4">
+      <p className="text-center text-2xl">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+        Obcaecati quo numquam molestias sunt quas, fugit quod
+        perspiciatis iste itaque ut!
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+        Obcaecati quo numquam molestias sunt quas, fugit quod
+        perspiciatis iste itaque ut!
+      </p>
+    </div>
+  </div>
+</div>
+</div>
+ {/*firth collapse*/}
+ <div className="p-10 bg-white text-gray-700">
+
+<div className="relative w-[1400px] overflow-hidden mx-28">
+  <input
+    type="checkbox"
+    className="peer absolute top-0
+     inset-x-0 w-full h-12
+     opacity-0 z-10 cursor-pointer"
+  />
+  <div
+    className="
+   bg-primary-color h-16 w-full flex items-center pl-5 "
+  >
+    <h1 className="text-lg font font-semibold text-white">
+      
+      What if i don't meet my fundraising obligation?
+    </h1>
+  </div>
+
+  <div
+    className="absolute top-3 right-3 text-white transition-transform duration-500
+   rotate-0   peer-checked:rotate-180"
+  >
+    {/**arrow */}
+    <i className="fa fa-angle-down pr-2 px-2"></i>
+  </div>
+
+  <div
+    className="
+bg-white overflow-hidden transition-all duration-500 max-h-0 peer-checked:max-h-40">
+    {/**content */}
+    <div className="p-4">
+      <p className="text-center text-2xl">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+        Obcaecati quo numquam molestias sunt quas, fugit quod
+        perspiciatis iste itaque ut!
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+        Obcaecati quo numquam molestias sunt quas, fugit quod
+        perspiciatis iste itaque ut!
+      </p>
+    </div>
+  </div>
+</div>
+</div>
+ {/*six collapse*/}
+ <div className="p-10 bg-white text-gray-700">
+
+<div className="relative w-[1400px] overflow-hidden mx-28">
+  <input
+    type="checkbox"
+    className="peer absolute top-0
+     inset-x-0 w-full h-12
+     opacity-0 z-10 cursor-pointer"
+  />
+  <div
+    className="
+   bg-primary-color h-16 w-full flex items-center pl-5 "
+  >
+    <h1 className="text-lg font font-semibold text-white">
+      
+      When should i book my travel and what dates should i plan for?
+    </h1>
+  </div>
+
+  <div
+    className="absolute top-3 right-3 text-white transition-transform duration-500
+   rotate-0   peer-checked:rotate-180"
+  >
+    {/**arrow */}
+    <i className="fa fa-angle-down pr-2 px-2"></i>
+  </div>
+
+  <div
+    className="
+bg-white overflow-hidden transition-all duration-500 max-h-0 peer-checked:max-h-40">
+    {/**content */}
+    <div className="p-4">
+      <p className="text-center text-2xl">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+        Obcaecati quo numquam molestias sunt quas, fugit quod
+        perspiciatis iste itaque ut!
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+        Obcaecati quo numquam molestias sunt quas, fugit quod
+        perspiciatis iste itaque ut!
+      </p>
+    </div>
+  </div>
+</div>
+</div>
+
+
+      
+    </div>
+  );
+};
+
+export default FaqsSection;