added faqs and background image

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "pwa-chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

site/package.json

@@ -16,11 +16,13 @@
   },
   "dependencies": {
     "gatsby": "^5.10.0",
+    "gatsby-background-image": "^1.6.0",
     "gatsby-omni-font-loader": "^2.0.2",
     "gatsby-plugin-image": "^3.10.0",
     "gatsby-plugin-react-svg": "^3.3.0",
     "gatsby-plugin-sharp": "^5.10.0",
     "gatsby-source-filesystem": "^5.10.0",
+    "gatsby-transformer-sharp": "^5.10.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }

site/src/components/accordion.js

@@ -0,0 +1,14 @@
+var acc = document.getElementsByClassName("accordion");
+var i;
+
+for (i = 0; i < acc.length; i++) {
+  acc[i].addEventListener("click", function() {
+    this.classList.toggle("active");
+    var panel = this.nextElementSibling;
+    if (panel.style.display === "block") {
+      panel.style.display = "none";
+    } else {
+      panel.style.display = "block";
+    }
+  });
+}

site/src/components/main.module.css

@@ -51,4 +51,41 @@ h1 {
     justify-content: center;
     text-align: center;
     flex-direction: column;
-}
+}
+
+.accordion button {
+    background-color: #2d6a4f;
+    color: #b7e4c7;
+    border: 2px solid black;
+    border-color:black;
+    cursor: pointer;
+    padding: 10px;
+    width: 100%;
+    text-align: center;
+    border: none;
+    outline: none;
+    transition: 0.4s;
+}
+
+.active, .accordion button:hover {
+    background-color: #51a37e;
+}
+
+.panel {
+    padding: 0 18px;
+    background-color: #2d6a4f;
+    display: none;
+    overflow: hidden;
+}
+
+.accordion button:after {
+    content: '\02795'; /* Unicode character for "plus" sign (+) */
+    font-size: 13px;
+    color: #777;
+    float: right;
+    margin-left: 5px;
+  }
+
+  .active:after {
+    content: "\2796"; /* Unicode character for "minus" sign (-) */
+  }

site/src/pages/index.js

@@ -1,11 +1,29 @@
 import * as React from "react"
-import { container, header, info, svg1, hero, spacer50 } from '../components/main.module.css'
+import { container, header, info, svg1, hero, spacer50, accordion, panel } from '../components/main.module.css'
 import Icon from "../assets/mountainsblue.svg"
+import Layout from "../src/styles/parallax.css"
+import Background from "gatsby-background-image"
+import { graphql } from "gatsby"
+import BackgroundImage from "gatsby-background-image"
 
 const IndexPage = () => {
   return (
+
     <div className={container}>
       <div className={header}>
+      <Layout>
+      <div>
+        <div className="parallax">
+          <img src="https://uc838fc6f972232301d09a8b1999.previews.dropboxusercontent.com/p/thumb/AB6KsvhEwQDlLJclrHjjDl-rCqkz1pDi9bwATSHL7n2Ad_fOBOccNdGRskkuRV2Gq_hsJuMgIesrRcl5It-RH4FMZp2qYIPza65xX0j15bG8eWfrwC9I1mKxSpF7GcwLPx6I3YD99-dSokWeTdWUtxGOET_vc85uvOtdRazHWHQ3jgqw0ySLj0g30aSKhi2FWLMNmkcEE7-tyHP5KXYbCToANTAWrG1u-r1DH_QHQ3cGyokJDuxRbHIWkXlbt10uhRPURQJ7dW7yV3wOqW-JrDBuh4FdcILnRKVqoDLqo1LiAa1JH7E9lA1yT20ZnoFI-Bv6-9tcaEnU9qjKjcL6N82DuMAYdUWL5Lswpb6mGURdjV1CjVVOp3LOuiYbBJr07wLgroybb416C2eyPbdnWALrhoavTyify7ocRKsmhKh71ZmU7p8dm7NZQG-GxLMhqQpXxZjANXUYHkCsUjLqlZXfOXtr9KW-iA9j40DBRQw3hIM3WJki7Dk6-dzI_jd4QsOhXEOsiALJiS_sqKRFrE9XYuD675Jco01JIVLeFQqlSaFJVr00bXUUcoUPWNHN9ma8gkrbm3fE49KL51tcRz5KUAf6A1fNQUjxNQI1gXYGVZffBAt9AmWtZbYhEnMIASo/p.jpeg" alt="Your image" />
+        </div>
+      </div>
+      <BackgroundImage
+
+      >
+
+      </BackgroundImage>
+    </Layout>
+
         <h3 style={{fontSize: '1.75rem', margin:'0'}}>Hack Club and Girl Scouts of Utah present</h3>
         <h1 style={{fontSize: '14rem', margin:'0'}}>Alpine</h1>
 
@@ -25,11 +43,76 @@ const IndexPage = () => {
         <p>We're providing all meals, some cool swag, and prizes!
         </p>
       </div>
+
+      <div className={info}>
+        <h2 style={{fontSize: '3rem', marginTop: '100px'}}>FAQs</h2>
+      </div>
+
+      <div className={accordion}>
+      <button style={{fontSize: '1.25rem'}}>Am I eligible to participate in Alpine?</button>
+        <div className={panel}>
+          <p>This event is open to Cadettes, Seniors, and Ambassadors. Girl Scouts can sign up on the GSGNY registration page.</p>
+        </div>
+
+
+        <button style={{fontSize: '1.25rem'}}>Do I need prior coding experience to participate?</button>
+        <div className={panel}>
+        <p>Hackers of all skill levels, including beginners, are welcome to join! We will be hosting programming workshops and other introductory events to help you get started, examples of which you can check out here!</p>
+        </div>
+
+        <button style={{fontSize: '1.25rem'}}>What can I make at Alpine?</button>
+        <div className={panel}>
+        <p>Girl Scouts can create projects for their Highest Awards! You
+                  can create a website, an app, or anything else that will help
+                  you take action in your community-whether that's promoting a
+                  cause, educating about an issue, or solving a problem. As a
+                  bonus, everyone will take home a special patch from this day!</p>
+        </div>
+
+        <button style={{fontSize: '1.25rem'}}>How much does it cost to attend?</button>
+        <div className={panel}>
+        <p>This event is free to Hack Clubbers. Girl Scouts should reach
+                  out to{' '}
+                  <a
+                    href="mailto:email@email.org"
+                    target="_blank"
+                    rel="noreferrer">
+                    email@email.org
+                  </a>{' '}
+                  to learn more.</p>
+        </div>
+
+        <button style={{fontSize: '1.25rem'}}>What do I need to bring to Alpine?</button>
+        <div className={panel}>
+        <p>Bring a laptop if you have one, and also bring a water bottle!
+                  Lunch and snacks will be provided by Girl Scouts.</p>
+        </div>
+
+        <button style={{fontSize: '1.25rem'}}>How secure is this event?</button>
+        <div className={panel}>
+        <p>Alpine will be supervised by background-checked staff and overseen by
+            security staff 24/7.</p>
+        </div>
+
+        <button style={{fontSize: '1.25rem'}}>Who can my parents/guardians reach out to with their concerns?</button>
+        <div className={panel}>
+        <p>They can reach out to us at{' '}
+            <a href="mailto:horizon@hackclub.com">horizon@hackclub.com</a>{' '}
+            and we'll make sure to answer all their questions.</p>
+        </div>
+      </div>
+
     </div>
 
   )
 }
 
 export default IndexPage
 
+export const pageQuery = graphql`
+  query {
+    indexImage: file(relativePath: { eq: "hackathon.jpg" })
+  }
+`;
+
 export const Head = () => <title>Home Page</title>