Merge pull request #8 from WarwickStudentArtsFestival/main

Production merge
WarwickStudentArtsFestival · Apr 4, 2024 · 481a940 · 481a940
2 parents ec0cd8f + 4c542b9
commit 481a940
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 51 deletions.
diff --git a/src/app/about.tsx b/src/app/about.tsx
@@ -2,7 +2,7 @@ import { FiExternalLink } from 'react-icons/fi';
 
 export default function About() {
   return (
-    <section className="-top-8 relative mb-4">
+    <section className="-top-8 relative mb-8">
       <h2>What is WSAF?</h2>
       <div className="px-8 text-lg max-w-5xl mx-auto">
         <p className="font-bold mb-2">

diff --git a/src/app/components/id-card.tsx b/src/app/components/id-card.tsx
@@ -13,40 +13,36 @@ export default function IdCard({
   description,
   role,
   image,
-  organisation,
 }: {
   name: string;
   description?: string;
   role?: string;
   image?: StaticImageData;
-  organisation?: boolean;
 }) {
   return (
-    <article
-      className={`rounded-xl m-2 overflow-hidden w-56 flex flex-col ${organisation ? 'bg-secondary' : 'bg-accent'}`}
-    >
-      <header className="bg-secondary h-10 flex justify-center items-center">
-        <div
-          className={`rounded-2xl w-12 h-3 mt-1 ${organisation ? 'bg-primary' : 'bg-accent'}`}
-        />
+    <article className="rounded-xl m-2 overflow-hidden w-40 sm:w-48 flex flex-col bg-accent">
+      <header className="bg-secondary h-6 sm:h-8 flex justify-center items-center">
+        <div className="rounded-2xl w-12 h-2 sm:h-3 mt-1 bg-accent" />
       </header>
-      <div
-        className={`flex-grow flex flex-col px-4 py-2 ${organisation ? 'mb-2' : 'text-black'}`}
-      >
+      <div className="flex-grow flex flex-col px-4 py-1 sm:py-2 text-black">
         {image && (
           <Image
             src={image}
             alt={`Image of ${name}`}
-            className={`mx-auto mb-2 ${organisation ? 'h-20 w-auto' : 'w-36 h-auto'}`}
+            className="mx-auto mb-2 w-24 sm:w-32 h-auto"
           />
         )}
-        <h3 className="mt-auto text-xl font-bold leading-tight">{name}</h3>
+        <h3 className="mt-auto text-lg sm:text-xl font-bold leading-tight">
+          {name}
+        </h3>
         {description && (
-          <span className="block text-sm leading-tight">{description}</span>
+          <span className="block text-xs sm:text-sm leading-tight">
+            {description}
+          </span>
         )}
       </div>
       {role && (
-        <footer className="bg-secondary text-xl uppercase font-bold pt-1 pb-2 px-2 mt-auto">
+        <footer className="bg-secondary text-sm sm:text-lg uppercase font-bold pt-1 pb-1 sm:pb-2 px-2 mt-auto">
           {role}
         </footer>
       )}

diff --git a/src/app/faq.tsx b/src/app/faq.tsx
@@ -1,7 +1,32 @@
 export default function Faq() {
   return (
-    <section className="mb-12">
+    <section className="mb-32">
       <h2>FAQ</h2>
+
+      <div className="mx-8 leading-tight">
+        <p className="mt-2 font-bold text-lg leading-tight mb-1">
+          Where can I find more information?
+        </p>
+        <p>
+          Please contact us by email at{' '}
+          <a
+            href="mailto:[email protected]"
+            target="_blank"
+            className="text-accent"
+          >
+            [email protected]
+          </a>{' '}
+          or on Instagram at{' '}
+          <a
+            href="https://www.instagram.com/wsaf24/"
+            target="_blank"
+            className="text-accent"
+          >
+            @wsaf24
+          </a>
+          .
+        </p>
+      </div>
     </section>
   );
 }
diff --git a/src/app/footer.tsx b/src/app/footer.tsx
@@ -1,3 +1,26 @@
+import Image from 'next/image';
+import warwickTechCrewLogo from '@/assets/organisations/warwick-tech-crew.png';
+
 export default function Footer() {
-  return <footer className="bg-secondary mt-auto">Footer</footer>;
+  return (
+    <footer className="bg-secondary mt-auto px-4 pt-6 pb-8 text-sm">
+      <div className="m-2">
+        <h3 className="font-bold">Delivery Partners</h3>
+        <p className="font-light">
+          WSAF would not be possible without the generous support of our
+          delivery partners:
+        </p>
+        <div className="flex justify-center gap-4 mt-1">
+          <Image
+            src={warwickTechCrewLogo}
+            alt="Warwick Tech Crew logo"
+            className="h-16 w-auto"
+          />
+        </div>
+      </div>
+      <p className="font-light mt-8">
+        Copyright © Warwick Student Arts Festival 2024
+      </p>
+    </footer>
+  );
 }
diff --git a/src/app/key-dates.tsx b/src/app/key-dates.tsx
@@ -40,7 +40,7 @@ const keyDates: KeyDateProps[] = [
 
 export default function KeyDates() {
   return (
-    <section className="mb-12">
+    <section className="mb-20">
       <h2 className="mb-4">Key Dates</h2>
 
       <div className="relative">

diff --git a/src/app/who-involved.tsx b/src/app/who-involved.tsx
@@ -1,26 +1,10 @@
 import IdCard, { IdCardProps } from '@/app/components/id-card';
-import WarwickTechCrewLogo from '@/assets/organisations/warwick-tech-crew.png';
-import WarwickSuLogo from '@/assets/organisations/warwick-su.png';
 import AdamPhoto from '@/assets/people/adam.jpg';
 import AlexPhoto from '@/assets/people/alex.jpg';
 import MaximusPhoto from '@/assets/people/maximus.jpg';
 import JoshPhoto from '@/assets/people/josh.jpg';
 import ElliePhoto from '@/assets/people/ellie.jpg';
 
-const organisations: IdCardProps[] = [
-  {
-    name: 'Warwick Tech Crew',
-    image: WarwickTechCrewLogo,
-  },
-  {
-    name: 'Warwick Presents',
-  },
-  {
-    name: 'Warwick SU',
-    image: WarwickSuLogo,
-  },
-];
-
 const people: IdCardProps[] = [
   {
     name: 'Adam',
@@ -31,7 +15,7 @@ const people: IdCardProps[] = [
   {
     name: 'Alexander',
     role: 'Coordinator',
-    description: '',
+    description: '2nd Year Chemistry (PhD)',
     image: AlexPhoto,
   },
   {
@@ -61,21 +45,20 @@ const people: IdCardProps[] = [
 
 export default function KeyDates() {
   return (
-    <section className="mb-12">
+    <section className="mb-20">
       <h2>Who&apos;s Involved?</h2>
-      <p>Some random text goes here</p>
-
-      <div className="flex justify-center flex-wrap mb-8">
-        {organisations.map((organisation) => (
-          <IdCard
-            key={organisation.name}
-            name={organisation.name}
-            description={organisation.description}
-            image={organisation.image}
-            organisation={true}
-          />
-        ))}
-      </div>
+      <p className="mt-2 mb-1 mx-4">
+        This year&apos;s WSAF is being organised by the following volunteers. If
+        you think you could add something to the team, contact us at{' '}
+        <a
+          href="mailto:[email protected]"
+          target="_blank"
+          className="text-accent"
+        >
+          [email protected]
+        </a>
+        .
+      </p>
 
       <div className="flex justify-center flex-wrap mb-8">
         {people.map((person) => (