updating the About

frontend/src/About/AboutComponent.js

@@ -1,9 +1,60 @@
-import React from "react";
+import React, {useState} from "react";
 import { Link } from 'react-router-dom'
-import { Container, Header, Divider, Icon, Menu, Button } from "semantic-ui-react";
+import { Container, Header, Divider, Icon, Menu, Button,  Accordion, } from "semantic-ui-react";
 
 
 const AboutComponent = () => {
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const handleClick = (e, titleProps) => {
+    const { index } = titleProps
+    const newIndex = activeIndex === index ? -1 : index
+    setActiveIndex(newIndex);
+  }
+
+  const panels = [
+    {
+      key: 'what-is-dog',
+      title: 'What is a dog?',
+      content: [
+        'A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome',
+        'guest in many households across the world.',
+      ].join(' '),
+    },
+    {
+      key: 'kinds-of-dogs',
+      title: 'What kinds of dogs are there?',
+      content: [
+        'There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog',
+        'that they find to be compatible with their own lifestyle and desires from a companion.',
+      ].join(' '),
+    },
+    {
+      key: 'acquire-dog',
+      title: 'How do you acquire a dog?',
+      content: {
+        content: (
+          <div>
+            <p>
+              Three common ways for a prospective owner to acquire a dog is from
+              pet shops, private owners, or shelters.
+            </p>
+            <p>
+              A pet shop may be the most convenient way to buy a dog. Buying a dog
+              from a private owner allows you to assess the pedigree and
+              upbringing of your dog before choosing to take it home. Lastly,
+              finding your dog from a shelter, helps give a good home to a dog who
+              may not find one so readily.
+            </p>
+          </div>
+        ),
+      },
+    },
+  ]
+  
+  const AccordionExampleStandardShorthand = () => (
+    <Accordion defaultActiveIndex={0} panels={panels} />
+  )
+
   return (
     <div>
       <Menu fixed="top">
@@ -11,30 +62,90 @@ const AboutComponent = () => {
         <Link to="/systems"><Menu.Item link>Listen</Menu.Item></Link>
       </Menu>
       <Container text>
-        <Divider horizontal style={{ paddingTop: "4em", paddingBottom: "2em" }}><Header as="h1">About<Icon name='compass' /></Header></Divider>
+        <Divider horizontal style={{ paddingTop: "4em", paddingBottom: "2em" }}><Header as="h1">About</Header></Divider>
 
         <p>I wrote <a href="https://github.com/robotastic/trunk-recorder">Trunk Recorder</a> because I was curious
           about what my local fire station was up to and I put together the original version of OpenMHz because I
           figured other people might want to listen to the recordings too.</p>
-        <p>The latest version of this site makes it easy for other people running Trunk Recorder to share their recrodings.
+        <p>The latest version of this site makes it easy for other people running Trunk Recorder to share their recordings.
           I am hoping that making it easier to listen to what our local fire, police and EMS have to go through everyday will
-          lead to greater appreciation for all the work they do that goes largely unseen. I am personally amazed by the number
-          of medical runs the DC's Fire and EMS department has to cover every day, and the shocking number of them that are ODs.</p>
+          lead to a greater appreciation for all the work they do, which goes largely unseen.</p>
 
-        <p>Each system should have a 30 day archive. This is to help make sure things don't get overloaded and make sure I don't get a crazy bill
-          at the end of the month.</p>
+        <p>The audio from each system is archived for 30 days, so you can go back and listen to events you may have missed.</p>
         <p> - Luke  <a href="mailto:luke@robotastic.com?Subject=OpenMHz" target="_top">luke@robotastic.com</a>  </p>
 
-        <Divider horizontal style={{ paddingTop: "4em", paddingBottom: "2em" }}><Header as="h2">Open Source</Header></Divider>
-        <p>Have changes you would like to suggest? Want to run your own server for your community? The source code for OpenMHz has been released:</p>
+        <Divider horizontal style={{ paddingTop: "4em", paddingBottom: "2em" }}><Header as="h2">100% Open Source</Header></Divider>
+        <p>Have changes you would like to suggest? Want to run your own server for your community? All of the code for OpenMHz is available as open source:</p>
         <p><a href="https://github.com/openmhz/trunk-server"><Icon name='github' />Trunk Server</a></p>
         <Divider horizontal style={{ paddingTop: "4em", paddingBottom: "2em" }}><Header as="h2">Support</Header></Divider>
         <p>If OpenMHz brings you joy, think about becoming a supporter! It will cover hosting costs and help keep me focused on development.</p>
 
-        <p><a href="https://github.com/sponsors/robotastic"><Button>
+        <p><a href="https://github.com/sponsors/robotastic"><Button color='green'>
+        <Icon name='heart' /> 
           Support
         </Button></a></p>
 
+        <Divider horizontal style={{ paddingTop: "4em", paddingBottom: "2em" }}><Header as="h2">FAQ</Header></Divider>
+      <Accordion fluid >
+        <Accordion.Title
+          active={activeIndex === 0}
+          index={0}
+          onClick={handleClick}
+        >
+          <Icon name='dropdown' />
+          How do I create an Event?
+        </Accordion.Title>
+        <Accordion.Content active={activeIndex === 0}>
+          <p>
+            A dog is a type of domesticated animal. Known for its loyalty and
+            faithfulness, it can be found as a welcome guest in many households
+            across the world.
+          </p>
+        </Accordion.Content>
+        <Accordion.Title
+          active={activeIndex === 1}
+          index={1}
+          onClick={handleClick}
+        >
+          <Icon name='dropdown' />
+          <span style={{fontWeight: "bold"}}>How can I add a radio system?</span>
+        </Accordion.Title>
+        <Accordion.Content active={activeIndex === 1}>
+          <p>
+            A dog is a type of domesticated animal. Known for its loyalty and
+            faithfulness, it can be found as a welcome guest in many households
+            across the world.
+          </p>
+        </Accordion.Content>
+        <Accordion.Title
+          active={activeIndex === 2}
+          index={2}
+          onClick={handleClick}
+        >
+          <Icon name='dropdown' />
+          <span style={{fontWeight: "bold"}}>Where do the different feeds come from?</span>
+        </Accordion.Title>
+        <Accordion.Content active={activeIndex === 2}>
+          <p>
+            It is a team effort! There are contributers from around country and even internationally, that are running Trunk Recorder to capture 
+            local radio systems and sending the transmissions to OpenMHz.
+          </p>
+        </Accordion.Content>
+        <Accordion.Title
+          active={activeIndex === 3}
+          index={3}
+          onClick={handleClick}
+        >
+          <Icon name='dropdown' />
+          <span style={{fontWeight: "bold"}}>Where do the different feeds come from?</span>
+        </Accordion.Title>
+        <Accordion.Content active={activeIndex === 3}>
+          <p>
+            It is a team effort! There are contributers from around country and even internationally, that are running Trunk Recorder to capture 
+            local radio systems and sending the transmissions to OpenMHz.
+          </p>
+        </Accordion.Content>
+      </Accordion>
       </Container>
     </div>
   );