diff --git a/src/app/page.tsx b/src/app/page.tsx index b5581a0c..a21df8c0 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -3,6 +3,7 @@ import { useEffect, useState } from "react"; import data from "../database/data.json"; import ProjectCard from "../components/shared/ProjectCard"; +import { FaqsComponent } from "../components/shared/FaqsComponent"; import { ProjectsData, Project } from "../types"; import Link from "next/link"; @@ -121,6 +122,8 @@ export default function Home() { + {/* Frequently Asked Questions */} + ); } diff --git a/src/components/shared/FaqsComponent.tsx b/src/components/shared/FaqsComponent.tsx new file mode 100644 index 00000000..bd969652 --- /dev/null +++ b/src/components/shared/FaqsComponent.tsx @@ -0,0 +1,66 @@ +import React, { useRef, useEffect, useState, MouseEventHandler } from 'react'; +import { FaCirclePlus } from "react-icons/fa6"; + +interface Faqs { + id: number; + question: string; + answer: string; +} + +const FaqsData: Faqs[] = [ + { + id: 1, + question: "What is Web Master Log?", + answer: "Web Master Log is a web development hub designed for developers, designers, and webmasters. It offers resources, tools, and tutorials to enhance web development skills." + }, + { + id: 2, + question: "What kind of Projects are on Web Master Log?", + answer: "The platform showcases a variety of real-world projects, ranging from beginner-friendly to advanced levels, built with technologies like Angular, Next.js, Node.js, React, Express.js, Redux, Vanilla JavaScript, and Vue.js." + }, + { + id: 3, + question: "How can I explore the projects on Web Master Log?", + answer: "You can browse all the projects by visiting the Explore Projects section on the website. This section provides access to a wide range of projects, each accompanied by documentation and guides to facilitate learning and collaboration." + }, + { + id: 4, + question: "Can I use the projects on Web Master Log for learning purposes?", + answer: "Yes! The platform encourages users to explore, learn, and even replicate the projects for educational purposes. Each project includes documentation to help you understand how it works." + }, + { + id: 5, + question: "Is Web Master Log free to use?", + answer: "Yes, Web Master Log is free to access. Users can explore projects, follow tutorials, and use the resources provided without any cost." + }, +] + +const FaqsComponent = () => { + + const [openedFaq, setOpenedFaq] = useState(0); + + return ( +
+

+ Frequently Asked Questions +

+
+ { + FaqsData.map((Faq: Faqs) => { + return ( +
{(openedFaq !== Faq.id) ? setOpenedFaq(Faq.id) : setOpenedFaq(0) }} className='p-4 pl-12 rounded-xl bg-gray-900 cursor-pointer flex flex-col text-lg relative'> + + {Faq.question} +
+
{Faq.answer}
+
+
+ ) + }) + } +
+
+ ) +} + +export { FaqsComponent } \ No newline at end of file