feat: add last year event photo showcase (#19)

* feat: add last year event photo showcase

* fix: faqs to uppercase

* fix: change name to gallery

CONTRIBUTING.md

@@ -13,16 +13,16 @@ cd ares
 ```
 
 Then all the commands you'll need to start developing are here:
-| Command                | Action                                            |
+| Command | Action |
 | :--------------------- | :------------------------------------------------ |
-| `npm install`          | Install dependencies                              |
-| `npm run dev`          | Start local dev server at `localhost:4321`        |
-| `npm run build`        | Build your production site to `./dist/`           |
-| `npm run preview`      | Preview your build locally, before deploying      |
-| `npm run astro ...`    | Run CLI commands like `astro add`, `astro check`  |
-| `npm run astro --help` | Get help using the Astro CLI                      |
-| `npm run format`       | Format code with [Prettier](https://prettier.io/) |
-| `npm run clean`        | Remove `node_modules` and build output            |
+| `npm install` | Install dependencies |
+| `npm run dev` | Start local dev server at `localhost:4321` |
+| `npm run build` | Build your production site to `./dist/` |
+| `npm run preview` | Preview your build locally, before deploying |
+| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro --help` | Get help using the Astro CLI |
+| `npm run format` | Format code with [Prettier](https://prettier.io/) |
+| `npm run clean` | Remove `node_modules` and build output |
 
 ## 🔼 Opening a PR
 
@@ -38,10 +38,9 @@ git commit -m "Your commit message"
 git push
 ```
 
-Now all that is left to do is opening a Pull Request so your contribution can be published into production. If you don't know how to open a Pull Request, please refer to [this guide](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request). **_Don't forget to select the reviewers_**. 
+Now all that is left to do is opening a Pull Request so your contribution can be published into production. If you don't know how to open a Pull Request, please refer to [this guide](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request). **_Don't forget to select the reviewers_**.
 Once your PR is approved, your commit will be pushed to main and to production. Congratulations, you just contributed to the Ares repository.
 
 ### Note for those not a part of the CeSIUM team
 
 If you are not a member of our team on Github, then instead of creating a branch you need to fork this project. If you don't know how to do that, please [refer to this guide](https://docs.github.com/en/get-started/quickstart/fork-a-repo).
-

src/components/contentSection.astro

@@ -11,15 +11,15 @@ const { title, id } = Astro.props;
   id={id}
   class="flex scroll-mt-24 flex-col items-center gap-4 space-y-8"
 >
-  <div class="flex flex-col items-start gap-4">
+  <div class="w-full max-w-xl lg:max-w-6xl flex flex-col items-start gap-4">
     <slot name="eyebrow" />
     <h2
       class="text-primary text-left text-white font-extrabold text-6xl tracking-wide"
     >
       {title}
     </h2>
   </div>
-  <p class="max-w-xl lg:max-w-6xl text-justify text-2xl uppercase">
+  <p class="w-full max-w-xl lg:max-w-6xl text-justify text-2xl uppercase">
     <slot name="lead" />
   </p>
   <slot />

src/components/faqs.jsx

@@ -1,21 +1,25 @@
-import { Disclosure } from '@headlessui/react'
-import { PlayIcon } from '@heroicons/react/24/solid'
-// import { getEntry } from 'astro:content';
-import faqs from "~/data/faqs.json"
+import { Disclosure } from "@headlessui/react";
+import { PlayIcon } from "@heroicons/react/24/solid";
+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
+          <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 uppercase">
+            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.
+            >
+              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">
@@ -28,18 +32,27 @@ export default function Faqs() {
                       <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 rotate-90"
+                            />
                           ) : (
-                            <PlayIcon fill="#66B22E" className="mt-2 mr-3 w-4 h-4" />
+                            <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 className="text-xl text-white font-semibold leading-7 uppercase">
+                          {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>
+                      <p className="font-sans text-base leading-7 text-white ml-7">
+                        {faq.answer}
+                      </p>
                     </Disclosure.Panel>
                   </>
                 )}
@@ -49,5 +62,5 @@ export default function Faqs() {
         </div>
       </div>
     </div>
-  )
+  );
 }

src/components/gallery.astro

@@ -0,0 +1,16 @@
+---
+import ContentSection from "~/components/contentSection.astro";
+import ShowcaseCard from "~/components/galleryCard.astro";
+import gallery from "~/data/gallery.json";
+---
+
+<ContentSection title="Gallery" id="showcase">
+  <Fragment slot="lead">
+    Checkout some of the best moments from last year's event:
+  </Fragment>
+  <div class="max-w-6xl space-y-2">
+    <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+      {gallery.map((img) => <ShowcaseCard source={img} />)}
+    </div>
+  </div>
+</ContentSection>

src/components/galleryCard.astro

@@ -0,0 +1,13 @@
+---
+const { source } = Astro.props;
+---
+
+<div class="group aspect-video hover:!text-default">
+  <figure class="relative h-full w-full overflow-hidden">
+    <img
+      class="h-full w-full bg-cover object-cover transition-all duration-300 group-hover:scale-110 group-focus:scale-110 group-focus:opacity-20"
+      src={source}
+      alt=""
+    />
+  </figure>
+</div>

src/components/intro.astro

@@ -38,7 +38,7 @@ import ContentSection from "~/components/contentSection.astro";
   >
     <p>The second edition will be happening from</p>
     <p class="text-4xl text-primary uppercase">
-      5<span class="text-2xl">th</span> to 7<span class="text-2xl">th</span> april 
+      5<span class="text-2xl">th</span> to 7<span class="text-2xl">th</span> april
       2024
     </p>
 

src/data/gallery.json

@@ -0,0 +1,8 @@
+[
+  "/gallery/1.png",
+  "/gallery/2.png",
+  "/gallery/3.png",
+  "/gallery/4.png",
+  "/gallery/5.png",
+  "/gallery/6.png"
+]

src/pages/index.astro

@@ -1,8 +1,10 @@
 ---
 import Intro from "~/components/intro.astro";
+import Gallery from "~/components/gallery.astro";
 import IndexLayout from "~/layouts/indexLayout.astro";
 ---
 
 <IndexLayout>
   <Intro />
+  <Gallery />
 </IndexLayout>