Merge pull request #117 from UoaWDCC/094_make-website-dynamic

094 make website dynamic

next/app/about/page.tsx

@@ -21,15 +21,15 @@ export default async function AboutPage() {
     <>
       <Image src={flair} alt="" className="absolute -z-10 top-[70%]" />
       <section className="max-w-4xl mx-auto mt-header pt-24 flex flex-col items-center text-center">
-        <h1 className="text-8xl font-bold leading-[0.95] uppercase mb-6">
+        <h1 className="md:text-8xl sm:text-7xl text-5xl font-bold leading-[0.95] uppercase mb-6">
           Our Values
         </h1>
         <p className="mb-2 mx-6">{data.Subtitle}</p>
         <p className="mb-16 mx-6">Click Below!</p>
-        <div className="grid grid-cols-3 grid-rows-2 text-black text-left mx-6">
+        <div className="sm:grid sm:grid-cols-3 sm:grid-rows-2 text-black text-left mx-6">
           {data.Values.map((value, i) => (
             <div key={value.Name} className={styles.valueCard}>
-              <h2 className="mb-1 text-2xl font-black uppercase">
+              <h2 className="mb-1 text-sm text-center md:text-left sm:text-lg md:text-2xl font-black uppercase">
                 {value.Name}
               </h2>
               <p>{value.ValueDescription}</p>
@@ -45,7 +45,7 @@ export default async function AboutPage() {
         </div>
       </section>
       <section className="py-40 text-center px-4">
-        <h2 className="text-8xl font-bold leading-[0.95] uppercase mb-12">
+        <h2 className="md:text-8xl sm:text-7xl text-6xl font-bold leading-[0.95] uppercase mb-12">
           Our History
         </h2>
         <div className="text-left max-w-xl mx-auto">

next/app/about/styles.module.css

@@ -1,3 +1,43 @@
+@media (width >= 500px) {
+  .valueCard {
+    position: relative;
+    border-radius: 0.8125rem;
+    border: 2px solid #000;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    padding: 2rem;
+    aspect-ratio: 1;
+  }
+
+  .valueCard:nth-of-type(1) {
+    background: linear-gradient(180deg, #faab36 45.83%, #ffc9c9 100%);
+    transform: rotate(-3.259deg);
+    z-index: 2;
+  }
+
+  .valueCard:nth-of-type(2) {
+    background: linear-gradient(
+      180deg,
+      #6cc3e5 0%,
+      #75c5e2 59.9%,
+      #ffdead 100%
+    );
+    transform: rotate(3.414deg) translateY(1.5rem);
+    z-index: 1;
+  }
+
+  .valueCard:nth-of-type(3) {
+    background: linear-gradient(180deg, #c8f2ff 0%, #ffc062 68.75%);
+    transform: rotate(-1.517deg) translateY(6rem) translateX(-1.5rem);
+  }
+
+  .valueCard:nth-of-type(4) {
+    background: linear-gradient(0deg, #ace8ff 0%, #ace8ff 100%);
+    transform: rotate(-9.745deg) translateY(-1rem) translateX(-2rem);
+    grid-column-start: 2;
+    z-index: 2;
+  }
+}
+
 .valueCard {
   position: relative;
   border-radius: 0.8125rem;
@@ -15,18 +55,18 @@
 
 .valueCard:nth-of-type(2) {
   background: linear-gradient(180deg, #6cc3e5 0%, #75c5e2 59.9%, #ffdead 100%);
-  transform: rotate(3.414deg) translateY(1.5rem);
+  transform: rotate(3.414deg);
   z-index: 1;
 }
 
 .valueCard:nth-of-type(3) {
   background: linear-gradient(180deg, #c8f2ff 0%, #ffc062 68.75%);
-  transform: rotate(-1.517deg) translateY(6rem) translateX(-1.5rem);
+  transform: rotate(-1.517deg);
 }
 
 .valueCard:nth-of-type(4) {
   background: linear-gradient(0deg, #ace8ff 0%, #ace8ff 100%);
-  transform: rotate(-9.745deg) translateY(-2rem) translateX(-2rem);
+  transform: rotate(-6deg);
   grid-column-start: 2;
   z-index: 2;
 }

next/app/members/[year]/page.tsx

@@ -25,8 +25,8 @@ export default async function MemberPage({
     <>
       <div className="flex flex-col items-center justify-center gap-6 mt-header pt-24">
         <h1 className="uppercase flex flex-col items-center mx-auto mb-24">
-          <span className="text-6xl leading-[0.95]">Meet the</span>
-          <span className="text-8xl font-bold leading-[0.95]">
+          <span className="md:text-6xl text-5xl leading-[0.95]">Meet the</span>
+          <span className="md:text-8xl text-6xl text-center font-bold leading-[0.95]">
             {team.CommitteeYear} Team
           </span>
         </h1>
@@ -36,7 +36,7 @@ export default async function MemberPage({
             src={getLargestImageUrl(team.teamPhoto)}
             alt=""
           />
-          <div className="absolute bottom-8 right-12 p-8 pr-16 max-w-lg bg-white shadow-lg rounded-3xl text-b-dark-blue __markdown">
+          <div className="md:absolute md:bottom-8 md:right-12 m-3 p-8 pr-16 max-w-lg bg-white shadow-lg rounded-3xl text-b-dark-blue __markdown">
             <RichText
               props={{
                 text: team.description,
@@ -50,12 +50,12 @@ export default async function MemberPage({
             </a>
           </div>
           <Image
-            className="absolute bottom-0 left-0"
+            className="absolute bottom-0 left-0 hidden md:visible"
             src={ScribbleLeft}
             alt=""
           />
           <Image
-            className="absolute top-0 right-0 -translate-y-12 -z-10"
+            className="absolute top-0 right-0 -translate-y-12 -z-10 hidden md:visible"
             src={ScribbleRight}
             alt=""
           />

next/app/page.module.css

@@ -1,7 +1,7 @@
 .description {
-  display: inherit;
-  justify-content: inherit;
-  align-items: inherit;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   font-size: 0.85rem;
   max-width: var(--max-width);
   width: 100%;

next/app/page.tsx

@@ -16,20 +16,22 @@ export default async function Home() {
   return (
     <>
       <BGWaves className="w-full absolute -z-50 top-[85vh]" />
+      {/* @ts-ignore */}
+      <Header />
       <div className="min-h-[55vh] flex flex-col items-center gap-6 mt-header pt-24">
-        <h1 className="uppercase flex flex-col items-center">
-          <span className="text-6xl leading-[0.95]">A Youth Board</span>
-          <span className="text-8xl font-bold leading-[0.95]">
+        <h1 className="uppercase flex flex-col items-center mx-auto justify-center">
+          <span className="text-2xl xs:text-3xl sm:text-4xl lg:text-6xl xl:text-8xl leading-[0.95] text-center">A Youth Board</span>
+          <span className="text-3xl xs:text-4xl sm:text-5xl lg:text-7xl xl:text-9xl font-bold leading-[0.95] text-center">
             For The Future
           </span>
         </h1>
-        <p className="text-lg max-w-[50ch] text-center mb-16 leading-relaxed">
+        <p className="text-sm xs:text-md sm:text-lg md:text-xl lg:text-2xl xl:text-3xl max-w-[50ch] text-center mb-16 leading-relaxed">
           {data.heroParagraph}
         </p>
       </div>
       <HomePageBlobs blob1={data.blob1} blob2={data.blob2} blob3={data.blob3} />
 
-      <ImageWithText props={data.textWithImage} />
+      <ImageWithText props={data.textWithImage}/>
       <div>
         <div className="bg-white bg-opacity-50">
           <div className="overflow-hidden ml-20 mr-20 ">

next/components/blocks/ImageWithText.module.css

@@ -16,6 +16,7 @@
   background-color: #fab34a;
   background-image: linear-gradient(to bottom, #ffc062f5, #ffc062f5),
     url(../../assets/home/Background_Dots.png);
+  width: 100%;
 }
 
 .backgroundCol {

next/components/blocks/ImageWithText.tsx

@@ -15,16 +15,18 @@ export default function ImageWithText({ props }: ImageWithTextProps) {
   const imageUrl = getLargestImageUrl(props.image);
 
   return (
-    <div className="grid grid-cols-2 max-h-[80vh]">
-      <div className="flex">
+    //
+    // grid grid-cols-2 max-h-[80vh]
+    <div className="flex outline flex-col md:flex-row md:items-stretch">
+      {/* <div className="flex"> */}
         <Image
           className={styles.backgroundImg}
           src={imageUrl}
           alt={props.Heading}
           width={500}
           height={500}
         />
-      </div>
+      {/* </div> */}
       <div className={styles.backgroundDots}>
         <div className={styles.backgroundCol}>
           <div className={styles.heading}>{props.Heading}</div>

next/components/feedback/ActiveSection.tsx

@@ -34,17 +34,17 @@ export default function ActiveSection({
 
   return (
     <div
-      className={`flex w-full max-w-5xl mb-24 mx-auto gap-12 ${styleClick ? "animate-[fadeOut_0.3s_ease-in_forwards]" : "animate-[fadeIn_0.3s_ease-in_forwards]"}`}
+      className={`flex flex-col md:flex-row w-full max-w-5xl mb-24 mx-auto gap-12 ${styleClick ? "animate-[fadeOut_0.3s_ease-in_forwards]" : "animate-[fadeIn_0.3s_ease-in_forwards]"}`}
     >
-      <div className="flex flex-col">
-        <div className="flex flex-col items-end w-80 ml-5">
+      <div className="flex flex-col items-center md:items-left">
+        <div className="flex flex-col md:items-end w-80 ml-5">
           <button
             className={`text-wrap uppercase font-bold text-7xl mb-2`}
             disabled={true}
           >
             {activeSection == "FAQ" ? "FAQ" : "Contact"}
           </button>
-          <div className="flex items-center">
+          <div className="flex items-center justify-center">
             <Image
               src={selectionArrow}
               alt="Selection arrow"
@@ -59,7 +59,7 @@ export default function ActiveSection({
           </div>
         </div>
       </div>
-      <div className="flex-1 mr-5">
+      <div className="flex-1 mr-5 ml-5">
         {activeSection == "FAQ" ? <FAQ QAs={QAs} /> : <FeedbackForm />}
       </div>
     </div>

next/components/feedback/FAQ.tsx

@@ -7,7 +7,9 @@ export default function FAQ({
 }) {
   return (
     <div className="w-full">
-      <h1 className="text-3xl font-bold mb-10">Frequently Asked Questions</h1>
+      <h1 className="text-2xl xs:text-3xl md:text-left text-center font-bold mb-10">
+        Frequently Asked Questions
+      </h1>
       <div className="flex flex-col gap-6">
         {QAs.map((QA) => {
           return (
@@ -26,5 +28,4 @@ export default function FAQ({
       </div>
     </div>
   );
-
 }

next/components/home/CarouselBase.tsx

@@ -22,9 +22,9 @@ export default function CarouselBase({
 
   return (
     <div>
-      <div className="text-blue-800 font-semibold text-4xl pr-6 pt-28 flex flex-row justify-between">
-        <p>Upcoming Events</p>
-        <div>
+      <div className="text-blue-800 font-semibold text-4xl pr-6 pt-28 flex flex-col sm:flex-row justify-between">
+        <p className="text-center sm:text-left sm:mb-0 mb-5">Upcoming Events</p>
+        <div className="flex justify-center -mb-10 sm:-mb-5 md:-mb-0">
           <button className="-mr-0.5" onClick={scrollPrev}>
             <svg
               width="77"

next/components/members/Chairman.tsx

@@ -29,9 +29,9 @@ const Chairman = ({ chairs }: { chairs: Member[] }) => {
       </p>
 
       <div className="grid grid-cols-[repeat(13,minmax(0,1fr))] grid-rows-2 max-w-6xl isolate mx-auto">
-        <div className="relative col-span-12 md:col-span-7 drop-shadow-xl">
+        <div className="relative col-span-12 ml-5 md:col-span-7 drop-shadow-xl">
           <Image
-            className="w-full absolute top-0 -right-full h-72 object-contain"
+            className="w-full max-md:hidden outline md:visible absolute top-0 -right-full h-72 object-contain"
             src={Flair2}
             alt=""
           />
@@ -46,9 +46,9 @@ const Chairman = ({ chairs }: { chairs: Member[] }) => {
             <p>{chair1.About}</p>
           </div>
         </div>
-        <div className="relative row-start-2 col-span-12 md:col-span-7 md:col-start-7 drop-shadow-xl -translate-y-[30%] -z-10">
+        <div className="md:relative ml-5 row-start-2 col-span-12 md:col-span-7 md:col-start-7 drop-shadow-xl md:-translate-y-[30%] -z-10">
           <Image
-            className="w-full absolute bottom-0 -left-full h-80 object-contain"
+            className="w-full max-md:hidden absolute bottom-0 -left-full h-80 object-contain"
             src={Flair1}
             alt=""
           />

next/components/members/Teams.tsx

@@ -73,19 +73,22 @@ function MemberModal({
   activeMember?: Member;
   callback: () => void;
 }) {
+
+  console.log("active", activeMember?.Photo) //--> Activemember is undefined when not selecting modal. Delete this later, this is for debugging
+
   if (!activeMember) return null;
 
   return (
     <div className="fixed inset-0 grid place-items-center isolate">
       <motion.div
-        className="absolute -z-10 w-full h-full bg-black backdrop-blur-md bg-opacity-40"
+        className="absolute -z-10 w-lvh h-lvh md:w-full md:h-full bg-black backdrop-blur-md bg-opacity-40"
         onClick={callback}
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         transition={{ type: "spring", bounce: 0, duration: 0.3 }}
       ></motion.div>
       <motion.div
-        className="h-fit w-full max-w-6xl grid grid-cols-[2fr_3fr] text-b-dark-blue"
+        className="md:h-fit md:w-full h-lvh w-lvh md:max-w-6xl grid grid-cols-[2fr_3fr] text-b-dark-blue"
         style={{
           background:
             "radial-gradient(47.21% 33.08% at 23.96% 39.49%, rgba(253, 141, 93, 0.20) 0%, rgba(255, 255, 255, 0.00) 100%), radial-gradient(66.83% 44.73% at 78.61% 81.23%, rgba(250, 171, 54, 0.20) 0%, rgba(255, 255, 255, 0.00) 97.76%), linear-gradient(180deg, #FFF 0%, #F6D09E 100%)",
@@ -96,7 +99,7 @@ function MemberModal({
       >
         <img
           className="max-h-[80vh] w-full object-cover"
-          src={getLargestImageUrl(activeMember.Photo)}
+          src={"http://127.0.0.1:1337/uploads/poor_cat_0da116ce22.jpg"}
           alt=""
         />
         <div className="px-8 py-12 w-[65%]">
@@ -105,7 +108,7 @@ function MemberModal({
             {activeMember.Role}
           </h3>
           <p className="mb-12 max-w-[75ch]">{activeMember.About}</p>
-          <p className="max-w-[75ch]">{activeMember.funFact}</p>
+          <p className="max-w-[75ch] italic text-[14px]">{activeMember.funFact}</p>
         </div>
       </motion.div>
       <button onClick={callback} className="absolute top-4 right-4">

next/tailwind.config.js

@@ -36,6 +36,14 @@ module.exports = {
         },
       },
     },
+    screens: {
+      "xs": "500px",
+      "sm":"640px",
+      "md":"768px",
+      "lg":"1024px",
+      "xl":"1280px",
+      "2xl":'1536px'
+    },
   },
   plugins: [],
 };

next/util/image.ts

@@ -3,5 +3,6 @@ import { ImageType } from "@/schemas/Image";
 export const getLargestImageUrl = (img: ImageType) => {
   const { large, medium, small, thumbnail } = img.data.attributes.formats;
   const largestFormat = large ?? medium ?? small ?? thumbnail ?? { url: "" };
+  console.log("myurl", `${process.env.STRAPI_URL}${largestFormat.url}`); // Delete this late, this is for debugging
   return `${process.env.STRAPI_URL}${largestFormat.url}`;
 };