Add FAQs to the frontend roadmap

src/components/FAQs/Answer.astro

@@ -0,0 +1,3 @@
+<div class='leading-relaxed text-left p-4 text-md text-gray-800 border-t border-t-gray-300 bg-gray-100 rounded-bl-md rounded-br-md'>
+  <slot />
+</div>

src/components/FAQs/FAQs.astro

@@ -0,0 +1,13 @@
+<div class='border-t bg-gray-100'>
+  <div class='container'>
+    <div class='flex justify-between relative -top-5'>
+      <h1 class='text-md font-medium py-1 px-3 border bg-white rounded-md'>
+        Frequently Asked Questions
+      </h1>
+    </div>
+
+    <div class='flex flex-col gap-1 pb-8'>
+      <slot />
+    </div>
+  </div>
+</div>

src/components/FAQs/Question.astro

@@ -0,0 +1,42 @@
+---
+import Icon from '../Icon.astro';
+
+export interface Props {
+  question: string;
+  isActive?: boolean;
+}
+
+const { question, isActive = false } = Astro.props;
+---
+
+<div
+  class='faq-item bg-white border rounded-md hover:bg-gray-50 border-gray-300'
+>
+  <button
+    faq-question
+    class='flex flex-row justify-between items-center p-3 w-full'
+  >
+    <span class='text-md text-left font-medium'>{question}</span>
+    <Icon icon='down' class='h-6 hidden sm:block text-gray-400' />
+  </button>
+  <div class:list={['answer', { hidden: !isActive }]} faq-answer>
+    <slot />
+  </div>
+</div>
+
+<script>
+  document.querySelectorAll('[faq-question]').forEach((el) => {
+    el.addEventListener('click', () => {
+      // Hide any other visible answers
+      document.querySelectorAll('[faq-answer]').forEach((element) => {
+        element.classList.add('hidden');
+      });
+
+      // Show the current answer
+      const answer = el.nextElementSibling;
+      if (answer) {
+        answer.classList.remove('hidden');
+      }
+    });
+  });
+</script>

src/icons/down.svg

@@ -0,0 +1,4 @@
+<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="m16.843 10.211c.108-.141.157-.3.157-.456 0-.389-.306-.755-.749-.755h-8.501c-.445 0-.75.367-.75.755 0 .157.05.316.159.457 1.203 1.554 3.252 4.199 4.258 5.498.142.184.36.29.592.29.23 0 .449-.107.591-.291 1.002-1.299 3.044-3.945 4.243-5.498z" fill="currentColor" />
+</svg>

src/pages/[roadmapId]/index.astro

@@ -1,5 +1,6 @@
 ---
 import CaptchaScripts from '../../components/Captcha/CaptchaScripts.astro';
+import FAQs from '../../components/FAQs.astro';
 import InteractiveRoadmap from '../../components/InteractiveRoadmap/InteractiveRoadmap.astro';
 import MarkdownRoadmap from '../../components/MarkdownRoadmap.astro';
 import RoadmapHeader from '../../components/RoadmapHeader.astro';
@@ -21,6 +22,7 @@ interface Params extends Record<string, string | undefined> {
 
 const { roadmapId } = Astro.params as Params;
 const roadmapFile = await import(`../../roadmaps/${roadmapId}/${roadmapId}.md`);
+const questions = await import (`../../roadmaps/${roadmapId}/faqs.astro`);
 const roadmapData = roadmapFile.frontmatter as RoadmapFrontmatter;
 ---
 
@@ -64,5 +66,6 @@ const roadmapData = roadmapFile.frontmatter as RoadmapFrontmatter;
 
   {roadmapData.isUpcoming && <UpcomingRoadmap />}
 
+  <questions.default />
   <CaptchaScripts slot='after-footer' />
 </BaseLayout>

src/roadmaps/frontend/faqs.astro

@@ -0,0 +1,105 @@
+---
+import Answer from '../../components/FAQs/Answer.astro';
+import FAQs from '../../components/FAQs/FAQs.astro';
+import Question from '../../components/FAQs/Question.astro';
+
+const salaryLink =
+  'https://www.glassdoor.com/Salaries/front-end-developer-salary-SRCH_KO0,19.htm';
+---
+
+<FAQs>
+  <Question isActive question='What is Frontend Development?'>
+    <Answer>
+      <p class='mb-3'>
+        Front-end development is the process of building the visual and
+        interactive elements of a website that users interact with directly.
+        It's a combination of HTML, CSS and JavaScript, where HTML provides the
+        structure, CSS the styling and layout, and JavaScript the dynamic
+        behaviour and interactivity.
+      </p>
+      <p>
+        As a front-end developer, you'll be responsible for creating the user
+        interface of a website, to ensure it looks good and is easy to use, with
+        great focus on design principles and user experience. You'll be working
+        closely with designers, back-end developers, and project managers to
+        make sure the final product meets the client's needs and provides the
+        best possible experience for the end-users.
+      </p>
+    </Answer>
+  </Question>
+  <Question question='What are the job titles of a Frontend Developer?'>
+    <Answer>
+      <p class='mb-3'>
+        Front-end developers are also known as front-end engineers, front-end
+        web developers, JavaScript Developers, HTML/CSS Developer, front-end web
+        designers, and front-end web architects.
+      </p>
+      <p>
+        Each of these roles mostly encompass the same front-end development
+        skills but require different levels of expertise in different front-end
+        development skills. It's better to look at the job description to get an
+        idea about the job requirements.
+      </p>
+    </Answer>
+  </Question>
+  <Question question='How to become a Frontend Developer?'>
+    <Answer>
+      <p>
+        Start with learning HTML and CSS; don't wait to fully master these and
+        start building simple projects as soon as possible. You could try
+        rebuilding the frontend of your favorite websites using HTML and CSS to
+        start with. Do as many of these projects as possible as you keep
+        learning. Once you are somewhat comfortable with HTML and CSS, start
+        learning some basic JavaScript (DOM manipulation, making AJAX calls etc)
+        and learn how to add interactivity to your websites. While you are at it
+        learn some basics of Git and GitHub. At this point you should be able to
+        get an entry level frontend development job. Keep revisiting this
+        roadmap and try to fill the gaps in your knowledge.
+      </p>
+    </Answer>
+  </Question>
+  <Question question='How long does it take to become a Frontend Developer?'>
+    <Answer>
+      <p class='mb-3'>
+        The amount of time it takes to become a frontend developer can vary
+        depending on several factors, such as your learning pace, previous
+        experience and the amount of time you are able to dedicate to learning.
+      </p>
+      <p class='mb-3'>
+        However, to give you a rough idea, if you are a complete beginner, it
+        could take you anywhere from 3 to 6 months to get a job as an entry
+        level frontend developer. If you are already familiar with some of the
+        frontend technologies, it could take you anywhere from 1 to 3 months.
+        What's important is to practice as much you can while you are learning
+        i.e. by building as many projects as you can. You should also
+        participate in online communities and ask for feedback from more
+        experienced developers to accelerate your learning process.
+      </p>
+    </Answer>
+  </Question>
+  <Question question='What are the Frontend Developer Salaries?'>
+    <Answer>
+      <p class='mb-3'>
+        Frontend developer salaries can vary depending on factors such as
+        location, experience, and company size. According to data from the
+        website
+        <a
+          class='underline text-blue-700'
+          rel='nofollow'
+          target='_blank'
+          href={salaryLink}>Glassdoor</a
+        >, the average base salary for a frontend developer in the United States
+        is around $84,454 per year, although this can range from around $55,000
+        to $131,000 or more depending on the individual factors mentioned above.
+      </p>
+
+      <p>
+        It is worth looking at a range of resources, including salary surveys,
+        and job boards to get a general understanding of the current market in
+        your location and experience level. Also try reaching out to other
+        professionals in the field and getting an understanding of their own
+        experience and salary ranges.
+      </p>
+    </Answer>
+  </Question>
+</FAQs>