feat: add faqs page

astro.config.mjs

@@ -2,8 +2,10 @@ import tailwind from "@astrojs/tailwind";
 import icon from "astro-icon";
 import { defineConfig } from "astro/config";
 
+import react from "@astrojs/react";
+
 // https://astro.build/config
 export default defineConfig({
   site: "https://astro-moon-landing.netlify.app/",
-  integrations: [tailwind(), icon()],
-});
+  integrations: [tailwind(), icon(), react()]
+});

package.json

@@ -31,8 +31,16 @@
     "tailwindcss-fluid-type": "^2.0.3"
   },
   "dependencies": {
+    "@astrojs/react": "^3.0.10",
     "@fontsource-variable/inter": "^5.0.16",
+    "@headlessui/react": "^1.7.18",
+    "@heroicons/react": "^2.1.1",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
+    "heroicons": "^2.1.1",
     "micromodal": "^0.4.10",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "sharp": "^0.33.1",
     "tailwindcss": "^3.4.1",
     "tiny-invariant": "^1.3.1"

src/components/compatibility.astro

@@ -1,6 +1,6 @@
 ---
-import CompatibilityList from "~/components/compatibility-list.astro";
-import ContentSection from "~/components/content-section.astro";
+import CompatibilityList from "~/components/compatibilityList.astro";
+import ContentSection from "~/components/contentSection.astro";
 import type { CompatibilityItem } from "~/types";
 
 const frameworks: Array<CompatibilityItem> = [

src/components/faqs.jsx

@@ -0,0 +1,53 @@
+import { Disclosure } from '@headlessui/react'
+import { PlayIcon } from '@heroicons/react/24/solid'
+// import { getEntry } from 'astro:content';
+import faqs from "~/data/faqs.json"
+
+export default function Faqs() {
+  return (
+    <div>
+      <div className="mx-auto max-w-7xl px-6 pb-24 sm:pb-32 lg:px-8 lg:pb-40">
+        <div className="mx-auto max-w-4xl">
+          <h2 className="text-2xl font-bold leading-10 tracking-wide text-white">Frequently asked questions</h2>
+          <p className="mt-6 text-justify text-xl leading-7">
+            Have a different question and can’t find the answer you’re looking for?
+            Reach out to our support team by <a
+              href="mailto:[email protected]"
+              className="font-semibold text-indigo-400 hover:text-indigo-300"
+              >sending us an email </a
+            >and we’ll get back to you as soon as we can.
+          </p>
+        </div>
+        <div className="mx-auto max-w-4xl divide-y">
+          <dl className="mt-10 space-y-6 divide-y divide-white">
+            {faqs.map((faq) => (
+              <Disclosure as="div" key={faq.question} className="pt-6">
+                {({ open }) => (
+                  <>
+                    <dt>
+                      <Disclosure.Button className="flex w-full items-start justify-start text-left text-white">
+                        <div>
+                          {open ? (
+                            <PlayIcon fill="#66B22E" className="mt-2 mr-3 w-4 h-4 rotate-90" />
+                          ) : (
+                            <PlayIcon fill="#66B22E" className="mt-2 mr-3 w-4 h-4" />
+                          )}
+                        </div>
+                        <span className="text-xl text-white font-semibold leading-7">{faq.question}</span>
+                        <span className="ml-6 flex h-7 items-center">
+                        </span>
+                      </Disclosure.Button>
+                    </dt>
+                    <Disclosure.Panel as="dd" className="mt-2 pr-12">
+                      <p className="font-sans text-base leading-7 text-white ml-7">{faq.answer}</p>
+                    </Disclosure.Panel>
+                  </>
+                )}
+              </Disclosure>
+            ))}
+          </dl>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/features.astro

@@ -1,6 +1,6 @@
 ---
 import { Icon } from "astro-icon/components";
-import ContentSection from "~/components/content-section.astro";
+import ContentSection from "~/components/contentSection.astro";
 import type { FeatureItem } from "~/types";
 
 const features: Array<FeatureItem> = [

src/components/header.astro

@@ -2,19 +2,23 @@
 import { Icon } from "astro-icon/components";
 import type { NavItem } from "~/types";
 
+const { sticky } = Astro.props;
+
 const navItems: Array<NavItem> = [
   { title: "Previous edition", url: "https://2023.bugsbyte.org/" },
+  { title: "FAQs", url: "/faqs" },
 ];
+
+const headerClass = sticky
+  ? "z-20 flex w-full items-center justify-between border-b border-default px-8 py-4 text-white"
+  : "absolute bottom-0 z-20 flex w-full items-center justify-between border-b border-transparent px-8 py-4 text-white";
 ---
 
-<header
-  id="page-header"
-  class="absolute bottom-0 z-20 flex w-full items-center justify-between border-b border-transparent px-8 py-4 text-white"
->
-  <div class="flex items-center gap-3 hover:!text-default">
+<header id="page-header" class={headerClass}>
+  <a class="flex items-center gap-3 hover:!text-default" href="/">
     <h1 class="sr-only">CeSIUM</h1>
     <Icon name="logo-cesium" class="hidden sm:block object-fill w-36 h-16" />
-  </div>
+  </a>
   <div>
     <div class="flex items-center gap-6">
       <nav class="hidden sm:block">

src/components/intro.astro

@@ -1,5 +1,5 @@
 ---
-import ContentSection from "~/components/content-section.astro";
+import ContentSection from "~/components/contentSection.astro";
 ---
 
 <ContentSection title="What is it?" id="intro">
@@ -33,11 +33,17 @@ import ContentSection from "~/components/content-section.astro";
     </div>
   </div>
 
-  <div class="w-full max-w-xl lg:max-w-6xl text-left text-xl tracking-wide uppercase">
+  <div
+    class="w-full max-w-xl lg:max-w-6xl text-left text-xl tracking-wide uppercase"
+  >
     <p>The second edition will be happening from</p>
-    <p class="text-4xl text-primary">5<span class="text-2xl">TH</span> TO 7<span class="text-2xl">TH</span> APRIL 2024</p>
+    <p class="text-4xl text-primary uppercase">
+      5<span class="text-2xl">th</span> to 7<span class="text-2xl">th</span> april 
+      2024
+    </p>
 
     <p class="mt-10">Where is happening</p>
     <p class="text-4xl text-primary">Altice Forum Braga</p>
-  <div>
+    <div></div>
+  </div>
 </ContentSection>

src/components/showcase.astro

@@ -1,7 +1,7 @@
 ---
 import { getCollection } from "astro:content";
-import ContentSection from "~/components/content-section.astro";
-import ShowcaseCard from "~/components/showcase-card.astro";
+import ContentSection from "~/components/contentSection.astro";
+import ShowcaseCard from "~/components/showcaseCard.astro";
 
 const featuredSites = await getCollection(
   "showcase",

src/data/faqs.json

@@ -0,0 +1,45 @@
+[
+  {
+    "question":
+      "I'm not a student from Universidade do Minho, can I still participate in the event?",
+    "answer":
+      "Yes, all higher education students over 18 can participate in the event."
+  },
+  {
+    "question": "Is it free to participate in the BugsByte Hackathon?",
+    "answer": "Yes, the event is completely free."
+  },
+  {
+    "question": "Do I need to register to be able to participate in the event?",
+    "answer":
+      "Yes, it is necessary to register to be able to participate in the event. Very soon we'll make a link available on our website to do so."
+  },
+  {
+    "question": "Do I need to register as a team?",
+    "answer":
+      "No, only individual registration is required. Once registered, you can form a team with other participants at your convenience."
+  },
+  {
+    "question": "How many people can a team contain?",
+    "answer": "The sizes of the teams may vary between 2 to 5 elements."
+  },
+  {
+    "question": "Can I leave the space of the event during the weekend?",
+    "answer":
+      "Yes, you're completely free to enter and exit the premisses of the event during the weekend."
+  },
+  {
+    "question": "Which technology/tools are we gonna work with?",
+    "answer":
+      "You're going to be totally free to choose the stack you'll work on."
+  },
+  {
+    "question": "Where am I going to sleep?",
+    "answer":
+      "If you intend to sleep during the event, we will have a dedicated place for you to rest. Only bring what you find essential such as pillows, sleeping bags, blankets, etc."
+  },
+  {
+    "question": "What am I going to eat during the event?",
+    "answer": "All food is provided by the BugsByte organization."
+  }
+]

src/layouts/baseLayout.astro

@@ -0,0 +1,30 @@
+---
+import "@fontsource-variable/inter";
+import "~/styles/index.css";
+
+const { generator, site } = Astro;
+const description = "The best place to grow ideas from the ground";
+---
+
+<!doctype html>
+<html lang="en" class="h-full motion-safe:scroll-smooth" data-theme="dark">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="icon" href="/favicon.png" type="image/svg+xml" />
+    <meta name="generator" content={generator} />
+
+    <title>Hackathon BugsByte</title>
+    <meta name="description" content={description} />
+
+    <!-- social media -->
+    <meta property="og:title" content="Hackathon BugsByte" />
+    <meta property="og:type" content="website" />
+    <meta property="og:description" content={description} />
+  </head>
+  <body
+    class="h-screen overflow-x-hidden bg-black text-default text-base selection:bg-secondary selection:text-white"
+  >
+    <slot />
+  </body>
+</html>

src/layouts/genericLayout.astro

@@ -0,0 +1,14 @@
+---
+import BaseLayout from "~/layouts/baseLayout.astro";
+
+import Footer from "~/components/footer.astro";
+import Header from "~/components/header.astro";
+---
+
+<BaseLayout>
+  <Header sticky={true} />
+  <div class="space-y-24 px-8 py-10">
+    <slot />
+  </div>
+  <Footer />
+</BaseLayout>

src/layouts/indexLayout.astro

@@ -0,0 +1,16 @@
+---
+import BaseLayout from "~/layouts/baseLayout.astro";
+
+import Splash from "~/components/splash.astro";
+import Footer from "~/components/footer.astro";
+import Header from "~/components/header.astro";
+---
+
+<BaseLayout>
+  <Header sticky={false} />
+  <Splash />
+  <div class="space-y-24 px-8 py-32">
+    <slot />
+  </div>
+  <Footer />
+</BaseLayout>

src/pages/faqs.astro

@@ -0,0 +1,8 @@
+---
+import GenericLayout from "~/layouts/genericLayout.astro";
+import Faqs from "~/components/faqs.jsx";
+---
+
+<GenericLayout>
+  <Faqs client:load />
+</GenericLayout>

src/pages/index.astro

@@ -1,39 +1,8 @@
 ---
-import "@fontsource-variable/inter";
-import Footer from "~/components/footer.astro";
-import Header from "~/components/header.astro";
 import Intro from "~/components/intro.astro";
-import Splash from "~/components/splash.astro";
-import "~/styles/index.css";
-
-const { generator, site } = Astro;
-const description = "The best place to grow ideas from the ground";
+import IndexLayout from "~/layouts/indexLayout.astro";
 ---
 
-<!doctype html>
-<html lang="en" class="h-full motion-safe:scroll-smooth" data-theme="dark">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width" />
-    <link rel="icon" href="/favicon.png" type="image/svg+xml" />
-    <meta name="generator" content={generator} />
-
-    <title>Hackathon BugsByte</title>
-    <meta name="description" content={description} />
-
-    <!-- social media -->
-    <meta property="og:title" content="Hackathon BugsByte" />
-    <meta property="og:type" content="website" />
-    <meta property="og:description" content={description} />
-  </head>
-  <body
-    class="h-screen overflow-x-hidden bg-black text-default text-base selection:bg-secondary selection:text-white"
-  >
-    <Header />
-    <Splash />
-    <div class="space-y-24 px-8 py-32">
-      <Intro />
-    </div>
-    <Footer />
-  </body>
-</html>
+<IndexLayout>
+  <Intro />
+</IndexLayout>

src/styles/global.css

@@ -29,6 +29,7 @@ h1 {
 h2 {
   font-family: "Resegrg", serif;
 }
+dt,
 p {
   font-family: "VT323", monospace;
 }