From cba0f769bd7267fc10c26e3000b127a96acfcc8c Mon Sep 17 00:00:00 2001
From: Jason Ray <jasonraymoniaga@gmail.com>
Date: Sun, 30 Jun 2024 18:26:19 +0700
Subject: [PATCH 1/4] Finish extracting info for services/publictymanagement
 page

---
 .../Service/PublicityManagement/helper.jsx    | 102 +++++++++++
 .../Service/PublicityManagement/index.jsx     | 163 ++++++++++++++++++
 .../publicitymanagement.module.css            |  49 ++++++
 src/pages/index.jsx                           |   2 +
 4 files changed, 316 insertions(+)
 create mode 100644 src/pages/Service/PublicityManagement/helper.jsx
 create mode 100644 src/pages/Service/PublicityManagement/index.jsx
 create mode 100644 src/pages/Service/PublicityManagement/publicitymanagement.module.css

diff --git a/src/pages/Service/PublicityManagement/helper.jsx b/src/pages/Service/PublicityManagement/helper.jsx
new file mode 100644
index 0000000..8d9608c
--- /dev/null
+++ b/src/pages/Service/PublicityManagement/helper.jsx
@@ -0,0 +1,102 @@
+const extractData = (data, match, isNotDupe = true) => {
+  let extracted = [];
+  let isMatch = false;
+  let isFairUse = false;
+  for (const item of data) {
+    if (isMatch && (isNotDupe || isFairUse) && item.type === "paragraph") {
+      let currParagraph = {
+        type: "paragraph",
+        content: ""
+      }
+      let currSentence = "";
+      for (const subitem of item.content) {
+        currSentence += subitem.content;
+      }
+      currParagraph.content = currSentence;
+      extracted.push(currParagraph);
+    } else if (isMatch && (isNotDupe || isFairUse) && item.type === "image") {
+      let currImage = {
+        type: "image",
+        content: item.content
+      }
+      extracted.push(currImage);
+    } else if (isMatch && (isNotDupe || isFairUse) && item.type === "bulleted_list_item") {
+      let currBullet = {
+        type: "bullet",
+        content: ""
+      }
+      let currSentence = ""
+      for (const subitem of item.content) {
+        currSentence += subitem.content;
+      }
+      currBullet.content = currSentence
+      extracted.push(currBullet);
+    } else if (isMatch && (isNotDupe || isFairUse) && item.type === "numbered_list_item") {
+      let currNumber = {
+        type: "number",
+        content: ""
+      }
+      let currSentence = ""
+      for (const subitem of item.content) {
+        currSentence += subitem.content;
+      }
+      currNumber.content = currSentence
+      extracted.push(currNumber);
+    } else if (item.type === "heading" && (isNotDupe || isFairUse) && item.content === match) {
+      isMatch = true;
+    } else if (item.type === "heading" && item.content === "Fair Use") {
+      isFairUse = true;
+    } else if (isMatch === true) {
+      break;
+    }
+  }
+  return extracted;
+}
+
+export const extractAnnouncements = (data) => {
+  return extractData(data, "Announcements");
+}
+
+export const extractProcess = (data) => {
+  return extractData(data, "Process for Publicity Requests");
+}
+
+export const extractNotes = (data) => {
+  return extractData(data, "Notes")
+}
+
+export const extractElligibility = (data) => {
+  return extractData(data, "Eligibility to use Publicity Platforms")
+}
+
+export const extractGeneral = (data) => {
+  return extractData(data, "General Guidelines on Publicity Materials")
+}
+
+export const extractPublicityMaterials = (data) => {
+  return extractData(data, "Publicity Materials Required")
+}
+
+export const extractMaterialsEDM = (data) => {
+  return extractData(data, "Electronic Digital Mailer (EDM)")
+}
+
+export const extractMaterialsInstagram = (data) => {
+  return extractData(data, "Instagram")
+}
+
+export const extractMaterialsTelegram = (data) => {
+  return extractData(data, "Telegram Channel")
+}
+
+export const extractMaterialsNoticeboards = (data) => {
+  return extractData(data, "Noticeboards")
+}
+
+export const extractFairUse = (data) => {
+  return extractData(data, "Fair Use")
+}
+
+export const extractFairUseEDM = (data) => {
+  return extractData(data, "Electronic Digital Mailer (EDM)", false)
+}
\ No newline at end of file
diff --git a/src/pages/Service/PublicityManagement/index.jsx b/src/pages/Service/PublicityManagement/index.jsx
new file mode 100644
index 0000000..3219837
--- /dev/null
+++ b/src/pages/Service/PublicityManagement/index.jsx
@@ -0,0 +1,163 @@
+import styles from './publicitymanagement.module.css'
+import React from "react";
+import Navbar from "../../Navbar";
+import Footer from "../../Footer";
+import { useFetchData } from "../../../common/useFetchData";
+import { Routes } from "../../../constants/routes";
+import {
+  extractAnnouncements,
+  extractElligibility,
+  extractFairUse,
+  extractFairUseEDM,
+  extractGeneral,
+  extractMaterialsEDM,
+  extractMaterialsInstagram,
+  extractMaterialsNoticeboards,
+  extractMaterialsTelegram,
+  extractNotes,
+  extractProcess,
+  extractPublicityMaterials,
+} from './helper';
+import CIcon from '@coreui/icons-react';
+import { freeSet } from '@coreui/icons';
+
+const PublicityManagement = () => {
+  const url = Routes.backendRoot + Routes.publicitymanagement;
+  const [isLoading, content] = useFetchData(url);
+  const announcements = extractAnnouncements(content);
+  const process = extractProcess(content);
+  const notes = extractNotes(content);
+  const eligibility = extractElligibility(content);
+  const general = extractGeneral(content);
+  const publicityMaterials = extractPublicityMaterials(content);
+  const materialEDM = extractMaterialsEDM(content);
+  const materialInstagram = extractMaterialsInstagram(content);
+  const materialTelegram = extractMaterialsTelegram(content);
+  const materialNoticeboard = extractMaterialsNoticeboards(content);
+  const fairUse = extractFairUse(content);
+  const fairUseEDM = extractFairUseEDM(content);
+  const documents = [
+
+  ];
+
+  const convert = (data) => {
+    return data.map((item) => {
+      if (item.type === 'paragraph') {
+        return (
+          <p className={styles.text}>{item.content}</p>
+        )
+      } else if (item.type === 'image') {
+        return (
+          <img src={item.content} className={styles.image} />
+        )
+      } else if (item.type === 'bullet' || item.type === 'number') {
+        return (
+          <li className={styles.bullet}>{item.content}</li>
+        )
+      }
+    })
+  }
+
+  return (
+    <div>
+      <Navbar />
+      <div className={styles.content}>
+        <h1 className={styles.header}>Union Publicity Management</h1>
+
+        <div className={styles.announcements}>
+          <h2 className={styles.subheader}>Announcements</h2>
+          <hr className={styles.horizontalLine} />
+          {
+            convert(announcements)
+          }
+        </div>
+
+        <div className={styles.process}>
+          <h2 className={styles.subheader}>Process for Publicity Requests</h2>
+          <hr className={styles.horizontalLine} />
+          {
+            convert(process)
+          }
+        </div>
+
+        <div className={styles.notes}>
+          <h2 className={styles.subheader}>Notes</h2>
+          <ul>
+            {
+              convert(notes)
+            }
+          </ul>
+        </div>
+
+        <div className={styles.eligibility}>
+          <h2 className={styles.subheader}>Eligibility</h2>
+          {
+            convert(eligibility)
+          }
+        </div>
+
+        <div className={styles.general}>
+          <h2 className={styles.subheader}>General Guidelines on Publicity Materials</h2>
+          <ol>
+            {
+              convert(general)
+            }
+          </ol>
+        </div>
+
+        <div className={styles.general}>
+          <h2 className={styles.subheader}>Publicity Materials Required</h2>
+          {
+            convert(publicityMaterials)
+          }
+        </div>
+
+        <div className={styles.general}>
+          <h2 className={styles.subheader}>{'Electronic Digital Mailer (EDM)'}</h2>
+          {
+            convert(materialEDM)
+          }
+        </div>
+
+        <div className={styles.general}>
+          <h2 className={styles.subheader}>{'Instagram'}</h2>
+          {
+            convert(materialInstagram)
+          }
+        </div>
+
+        <div className={styles.general}>
+          <h2 className={styles.subheader}>{'Telegram Channel'}</h2>
+          {
+            convert(materialTelegram)
+          }
+        </div>
+
+        <div className={styles.general}>
+          <h2 className={styles.subheader}>{'Noticeboards'}</h2>
+          {
+            convert(materialNoticeboard)
+          }
+        </div>
+
+        <div className={styles.general}>
+          <h2 className={styles.subheader}>{'Fair Use'}</h2>
+          {
+            convert(fairUse)
+          }
+        </div>
+
+        <div className={styles.general}>
+          <h2 className={styles.subheader}>{'Electronic Digital Mailer (EDM)'}</h2>
+          {
+            convert(fairUseEDM)
+          }
+        </div>
+
+      </div>
+      <Footer />
+    </div>
+  )
+}
+
+export default PublicityManagement
\ No newline at end of file
diff --git a/src/pages/Service/PublicityManagement/publicitymanagement.module.css b/src/pages/Service/PublicityManagement/publicitymanagement.module.css
new file mode 100644
index 0000000..e250922
--- /dev/null
+++ b/src/pages/Service/PublicityManagement/publicitymanagement.module.css
@@ -0,0 +1,49 @@
+.header {
+  font-size: 5vw;
+  font-family: 'Lora', serif;
+  margin-top: 6vh; 
+  margin-left: 4vw; 
+  position: relative;
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 1); 
+  color: #3E3E3E;
+}
+
+.subheader {
+  font-size: 2.7vw; 
+  font-family: 'Lora', serif;
+  font-weight: 700;
+  color: #D9A129; 
+}
+
+.content {
+  margin: 0vh 5vw;
+}
+
+.text {
+  font-size: 1.4vw; 
+  font-family: 'Lora', serif;
+  text-align: justify;
+  line-height: 1.5;
+  margin-bottom: 1.5vh;
+}
+
+.bullet {
+  font-size: 1.4vw; 
+  font-family: 'Lora', serif;
+  text-align: justify;
+  line-height: 1.5;
+  margin-bottom: 1.5vh;
+}
+
+.horizontalLine {
+  max-width: 50vw;
+  height: 0.2vh;
+  background-color: #000;
+  margin-top: 1vw; 
+  margin-bottom: 1.5vh; 
+  margin-left: 0vw;
+}
+
+.image {
+  object-fit: contain;
+}
\ No newline at end of file
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 0dfa889..6e19eb9 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -18,6 +18,7 @@ import CouncilFunding from "./Service/CouncilFunding";
 import JoinUs from "./JoinUs/index.jsx";
 import ResilienceFund from "./Service/ResilienceFund/index.jsx";
 import ZoomLicense from "./Service/ZoomLicense/index.jsx";
+import PublicityManagement from "./Service/PublicityManagement/index.jsx";
 
 const Pages = () => {
   return (
@@ -39,6 +40,7 @@ const Pages = () => {
         <Route path={ROUTES.councilfunding} element= {<CouncilFunding />} />
         <Route path={ROUTES.resiliencefund} element= {<ResilienceFund />} />
         <Route path={ROUTES.zoomlicense} element= {<ZoomLicense />} />
+        <Route path={ROUTES.publicitymanagement} element= {<PublicityManagement />} />
         <Route path={ROUTES.joinus} element={<JoinUs />} />
       </Routes>
     </BrowserRouter>

From a80872f60b1a73248f90fb925e2709d514db7481 Mon Sep 17 00:00:00 2001
From: JasonRay168 <e0985893@u.nus.edu>
Date: Wed, 31 Jul 2024 13:40:14 +0800
Subject: [PATCH 2/4] Add a maximum to width and font size

---
 src/pages/Footer/footer.module.css            |  1 +
 .../Service/PublicityManagement/index.jsx     | 24 +++++-----
 .../publicitymanagement.module.css            | 45 ++++++++++++-------
 3 files changed, 43 insertions(+), 27 deletions(-)

diff --git a/src/pages/Footer/footer.module.css b/src/pages/Footer/footer.module.css
index e38e6a2..2f272de 100644
--- a/src/pages/Footer/footer.module.css
+++ b/src/pages/Footer/footer.module.css
@@ -6,6 +6,7 @@
   padding-left: 2.5vw;
   padding-right: 2.5vw;
   font-family: "Lora", serif;
+  margin-top: 30px;
 }
 
 .header {
diff --git a/src/pages/Service/PublicityManagement/index.jsx b/src/pages/Service/PublicityManagement/index.jsx
index 3219837..b57a546 100644
--- a/src/pages/Service/PublicityManagement/index.jsx
+++ b/src/pages/Service/PublicityManagement/index.jsx
@@ -64,7 +64,7 @@ const PublicityManagement = () => {
       <div className={styles.content}>
         <h1 className={styles.header}>Union Publicity Management</h1>
 
-        <div className={styles.announcements}>
+        <div className={styles.subcontent}>
           <h2 className={styles.subheader}>Announcements</h2>
           <hr className={styles.horizontalLine} />
           {
@@ -72,7 +72,7 @@ const PublicityManagement = () => {
           }
         </div>
 
-        <div className={styles.process}>
+        <div className={styles.subcontent}>
           <h2 className={styles.subheader}>Process for Publicity Requests</h2>
           <hr className={styles.horizontalLine} />
           {
@@ -80,7 +80,7 @@ const PublicityManagement = () => {
           }
         </div>
 
-        <div className={styles.notes}>
+        <div className={styles.subcontent}>
           <h2 className={styles.subheader}>Notes</h2>
           <ul>
             {
@@ -89,14 +89,14 @@ const PublicityManagement = () => {
           </ul>
         </div>
 
-        <div className={styles.eligibility}>
+        <div className={styles.subcontent}>
           <h2 className={styles.subheader}>Eligibility</h2>
           {
             convert(eligibility)
           }
         </div>
 
-        <div className={styles.general}>
+        <div className={styles.subcontent}>
           <h2 className={styles.subheader}>General Guidelines on Publicity Materials</h2>
           <ol>
             {
@@ -105,49 +105,49 @@ const PublicityManagement = () => {
           </ol>
         </div>
 
-        <div className={styles.general}>
+        <div className={styles.subcontent}>
           <h2 className={styles.subheader}>Publicity Materials Required</h2>
           {
             convert(publicityMaterials)
           }
         </div>
 
-        <div className={styles.general}>
+        <div className={styles.subcontent}>
           <h2 className={styles.subheader}>{'Electronic Digital Mailer (EDM)'}</h2>
           {
             convert(materialEDM)
           }
         </div>
 
-        <div className={styles.general}>
+        <div className={styles.subcontent}>
           <h2 className={styles.subheader}>{'Instagram'}</h2>
           {
             convert(materialInstagram)
           }
         </div>
 
-        <div className={styles.general}>
+        <div className={styles.subcontent}>
           <h2 className={styles.subheader}>{'Telegram Channel'}</h2>
           {
             convert(materialTelegram)
           }
         </div>
 
-        <div className={styles.general}>
+        <div className={styles.subcontent}>
           <h2 className={styles.subheader}>{'Noticeboards'}</h2>
           {
             convert(materialNoticeboard)
           }
         </div>
 
-        <div className={styles.general}>
+        <div className={styles.subcontent}>
           <h2 className={styles.subheader}>{'Fair Use'}</h2>
           {
             convert(fairUse)
           }
         </div>
 
-        <div className={styles.general}>
+        <div className={styles.subcontent}>
           <h2 className={styles.subheader}>{'Electronic Digital Mailer (EDM)'}</h2>
           {
             convert(fairUseEDM)
diff --git a/src/pages/Service/PublicityManagement/publicitymanagement.module.css b/src/pages/Service/PublicityManagement/publicitymanagement.module.css
index e250922..69f1a58 100644
--- a/src/pages/Service/PublicityManagement/publicitymanagement.module.css
+++ b/src/pages/Service/PublicityManagement/publicitymanagement.module.css
@@ -1,34 +1,34 @@
 .header {
-  font-size: 5vw;
+  font-size: 32px;
   font-family: 'Lora', serif;
-  margin-top: 6vh; 
-  margin-left: 4vw; 
+  margin-top: 6vh;
   position: relative;
+  width: 600px;
+  text-align: left;
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 1); 
   color: #3E3E3E;
 }
 
 .subheader {
-  font-size: 2.7vw; 
+  font-size: 24px; 
   font-family: 'Lora', serif;
   font-weight: 700;
   color: #D9A129; 
 }
 
 .content {
-  margin: 0vh 5vw;
+  margin: 0vh 50px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
-.text {
-  font-size: 1.4vw; 
-  font-family: 'Lora', serif;
-  text-align: justify;
-  line-height: 1.5;
-  margin-bottom: 1.5vh;
+.subcontent {
+  max-width: 600px;
 }
 
-.bullet {
-  font-size: 1.4vw; 
+.text, .bullet {
+  font-size: 16px; 
   font-family: 'Lora', serif;
   text-align: justify;
   line-height: 1.5;
@@ -36,7 +36,7 @@
 }
 
 .horizontalLine {
-  max-width: 50vw;
+  max-width: 600px;
   height: 0.2vh;
   background-color: #000;
   margin-top: 1vw; 
@@ -46,4 +46,19 @@
 
 .image {
   object-fit: contain;
-}
\ No newline at end of file
+}
+
+/* @media screen and (max-width: 1000px) {
+
+  .container {
+    flex-direction: column;
+  }
+
+  .eventsheader {
+    font-size: 40px;
+  }
+  .socialheader {
+    font-size: 35px;
+    padding-bottom: 0;
+  }
+} */
\ No newline at end of file

From c5597f27acad915592f9c2f60a28c1f60c1bbda4 Mon Sep 17 00:00:00 2001
From: Jason Ray <jasonraymoniaga@gmail.com>
Date: Sun, 25 Aug 2024 23:19:51 +0800
Subject: [PATCH 3/4] Refactor frontend to follow the new two-page structure

---
 src/constants/routes.js                       |   2 +
 .../Service/PublicityManagement/helper.jsx    |  62 ++++++-
 .../Service/PublicityManagement/index.jsx     | 155 +++++++++++++++---
 .../publicitymanagement.module.css            |  11 +-
 4 files changed, 202 insertions(+), 28 deletions(-)

diff --git a/src/constants/routes.js b/src/constants/routes.js
index b2a8fd8..2efa00d 100644
--- a/src/constants/routes.js
+++ b/src/constants/routes.js
@@ -18,5 +18,7 @@ export const Routes = {
   logisticrental: "/services/logisticrental",
   zoomlicense: "/services/zoomLicense",
   publicitymanagement: "/services/publicitymanagement",
+  publicitymanagementone: "/services/publicitymanagement/page-1",
+  publicitymanagementtwo: "/services/publicitymanagement/page-2",
   joinus: "/joinus",
 };
diff --git a/src/pages/Service/PublicityManagement/helper.jsx b/src/pages/Service/PublicityManagement/helper.jsx
index 8d9608c..ee3b4b9 100644
--- a/src/pages/Service/PublicityManagement/helper.jsx
+++ b/src/pages/Service/PublicityManagement/helper.jsx
@@ -14,6 +14,17 @@ const extractData = (data, match, isNotDupe = true) => {
       }
       currParagraph.content = currSentence;
       extracted.push(currParagraph);
+    } else if (isMatch && (isNotDupe || isFairUse) && item.type === "quote") {
+      let currParagraph = {
+        type: "quote",
+        content: ""
+      }
+      let currSentence = "";
+      for (const subitem of item.content) {
+        currSentence += subitem.content;
+      }
+      currParagraph.content = currSentence;
+      extracted.push(currParagraph);
     } else if (isMatch && (isNotDupe || isFairUse) && item.type === "image") {
       let currImage = {
         type: "image",
@@ -99,4 +110,53 @@ export const extractFairUse = (data) => {
 
 export const extractFairUseEDM = (data) => {
   return extractData(data, "Electronic Digital Mailer (EDM)", false)
-}
\ No newline at end of file
+}
+
+export const extractFairUseTelegram = (data) => {
+  return extractData(data, "Telegram Channel", false)
+}
+
+export const extractFairUseInstagram = (data) => {
+  return extractData(data, "Instagram Story or Post Sharing")
+}
+
+export const extractPDP = (data) => {
+  return extractData(data, "Personal Data Protection")
+}
+
+export const extractApproval = (data) => {
+  return extractData(data, "Approval of Publicity Materials")
+}
+
+export const extractNUSSUOrganisations = (data) => {
+  return extractData(data, "NUSSU Constituent Clubs, Associate Bodies and other NUS-registered Organisations")
+}
+
+export const extractCouncilProjects = (data) => {
+  return extractData(data, "Council, EXCO, Committees or Projects")
+}
+
+export const extractDesignConsiderations = (data) => {
+  return extractData(data, "Design Considerations")
+}
+
+export const extractUnionBrandingRequirements = (data) => {
+  return extractData(data, "Union branding requirements")
+}
+
+export const extractDesign= (data) => {
+  return extractData(data, "Design")
+}
+
+export const extractContent = (data) => {
+  return extractData(data, "Content")
+}
+
+export const extractLinks= (data) => {
+  return extractData(data, "Links")
+}
+
+export const extractDirectives = (data) => {
+  return extractData(data, "Directives")
+}
+
diff --git a/src/pages/Service/PublicityManagement/index.jsx b/src/pages/Service/PublicityManagement/index.jsx
index b57a546..8be4d3d 100644
--- a/src/pages/Service/PublicityManagement/index.jsx
+++ b/src/pages/Service/PublicityManagement/index.jsx
@@ -6,39 +6,65 @@ import { useFetchData } from "../../../common/useFetchData";
 import { Routes } from "../../../constants/routes";
 import {
   extractAnnouncements,
+  extractApproval,
+  extractContent,
+  extractCouncilProjects,
+  extractDesign,
+  extractDesignConsiderations,
   extractElligibility,
   extractFairUse,
   extractFairUseEDM,
+  extractFairUseInstagram,
+  extractFairUseTelegram,
   extractGeneral,
+  extractLinks,
   extractMaterialsEDM,
   extractMaterialsInstagram,
   extractMaterialsNoticeboards,
   extractMaterialsTelegram,
   extractNotes,
+  extractNUSSUOrganisations,
+  extractPDP,
   extractProcess,
   extractPublicityMaterials,
+  extractUnionBrandingRequirements,
 } from './helper';
 import CIcon from '@coreui/icons-react';
 import { freeSet } from '@coreui/icons';
 
 const PublicityManagement = () => {
-  const url = Routes.backendRoot + Routes.publicitymanagement;
-  const [isLoading, content] = useFetchData(url);
-  const announcements = extractAnnouncements(content);
-  const process = extractProcess(content);
-  const notes = extractNotes(content);
-  const eligibility = extractElligibility(content);
-  const general = extractGeneral(content);
-  const publicityMaterials = extractPublicityMaterials(content);
-  const materialEDM = extractMaterialsEDM(content);
-  const materialInstagram = extractMaterialsInstagram(content);
-  const materialTelegram = extractMaterialsTelegram(content);
-  const materialNoticeboard = extractMaterialsNoticeboards(content);
-  const fairUse = extractFairUse(content);
-  const fairUseEDM = extractFairUseEDM(content);
-  const documents = [
-
-  ];
+  const pageOne = Routes.backendRoot + Routes.publicitymanagementone;
+  const pageTwo = Routes.backendRoot + Routes.publicitymanagementtwo;
+  const [isLoadingOne, contentOne] = useFetchData(pageOne);
+  const [isLoadingTwo, contentTwo] = useFetchData(pageTwo);
+
+  // Page One content
+  const announcements = extractAnnouncements(contentOne);
+  const process = extractProcess(contentOne);
+  const notes = extractNotes(contentOne);
+  const eligibility = extractElligibility(contentOne);
+  const general = extractGeneral(contentOne);
+  const publicityMaterials = extractPublicityMaterials(contentOne);
+  const materialEDM = extractMaterialsEDM(contentOne);
+  const materialInstagram = extractMaterialsInstagram(contentOne);
+  const materialTelegram = extractMaterialsTelegram(contentOne);
+  const materialNoticeboard = extractMaterialsNoticeboards(contentOne);
+
+  // Page Two content
+  const fairUse = extractFairUse(contentTwo);
+  const fairUseEDM = extractFairUseEDM(contentTwo);
+  const fairUseTelegram = extractFairUseTelegram(contentTwo);
+  const fairUseInstagram = extractFairUseInstagram(contentTwo);
+  const PDP = extractPDP(contentTwo);
+  console.log(PDP)
+  const approval = extractApproval(contentTwo);
+  const NUSSUOrganisations = extractNUSSUOrganisations(contentTwo);
+  const councilProjects = extractCouncilProjects(contentTwo);
+  const designConsiderations = extractDesignConsiderations(contentTwo);
+  const unionBrandingRequirements = extractUnionBrandingRequirements(contentTwo);
+  const design = extractDesign(contentTwo);
+  const content = extractContent(contentTwo);
+  const links = extractLinks(contentTwo);
 
   const convert = (data) => {
     return data.map((item) => {
@@ -46,7 +72,11 @@ const PublicityManagement = () => {
         return (
           <p className={styles.text}>{item.content}</p>
         )
-      } else if (item.type === 'image') {
+      } else if (item.type === 'quote') {
+        return (
+          <p className={styles.quote}>{item.content}</p>
+        )
+      }else if (item.type === 'image') {
         return (
           <img src={item.content} className={styles.image} />
         )
@@ -81,7 +111,7 @@ const PublicityManagement = () => {
         </div>
 
         <div className={styles.subcontent}>
-          <h2 className={styles.subheader}>Notes</h2>
+          <h3 className={styles.subheader}>Notes</h3>
           <ul>
             {
               convert(notes)
@@ -113,28 +143,28 @@ const PublicityManagement = () => {
         </div>
 
         <div className={styles.subcontent}>
-          <h2 className={styles.subheader}>{'Electronic Digital Mailer (EDM)'}</h2>
+          <h3 className={styles.subheader}>{'Electronic Digital Mailer (EDM)'}</h3>
           {
             convert(materialEDM)
           }
         </div>
 
         <div className={styles.subcontent}>
-          <h2 className={styles.subheader}>{'Instagram'}</h2>
+          <h3 className={styles.subheader}>{'Instagram'}</h3>
           {
             convert(materialInstagram)
           }
         </div>
 
         <div className={styles.subcontent}>
-          <h2 className={styles.subheader}>{'Telegram Channel'}</h2>
+          <h3 className={styles.subheader}>{'Telegram Channel'}</h3>
           {
             convert(materialTelegram)
           }
         </div>
 
         <div className={styles.subcontent}>
-          <h2 className={styles.subheader}>{'Noticeboards'}</h2>
+          <h3 className={styles.subheader}>{'Noticeboards'}</h3>
           {
             convert(materialNoticeboard)
           }
@@ -148,12 +178,89 @@ const PublicityManagement = () => {
         </div>
 
         <div className={styles.subcontent}>
-          <h2 className={styles.subheader}>{'Electronic Digital Mailer (EDM)'}</h2>
+          <h3 className={styles.subheader}>{'Electronic Digital Mailer (EDM)'}</h3>
           {
             convert(fairUseEDM)
           }
         </div>
 
+        <div className={styles.subcontent}>
+          <h3 className={styles.subheader}>{'Telegram Channel'}</h3>
+          {
+            convert(fairUseTelegram)
+          }
+        </div>
+
+        <div className={styles.subcontent}>
+          <h3 className={styles.subheader}>{'Instagram Story or Post Sharing'}</h3>
+          {
+            convert(fairUseInstagram)
+          }
+        </div>
+
+        <div className={styles.subcontent}>
+          <h2 className={styles.subheader}>{'Personal Data Protection'}</h2>
+          {
+            convert(PDP)
+          }
+        </div>
+
+        <div className={styles.subcontent}>
+          <h2 className={styles.subheader}>{'Approval of Publicity Materials'}</h2>
+          {
+            convert(approval)
+          }
+        </div>
+
+        <div className={styles.subcontent}>
+          <h3 className={styles.subheader}>{'NUSSU Constituent Clubs, Associate Bodies and other NUS-registered Organisations'}</h3>
+          {
+            convert(NUSSUOrganisations)
+          }
+        </div>
+
+        <div className={styles.subcontent}>
+          <h3 className={styles.subheader}>{'Council, EXCO, Committees or Projects'}</h3>
+          {
+            convert(councilProjects)
+          }
+        </div>
+
+        <div className={styles.subcontent}>
+          <h2 className={styles.subheader}>{'Design Considerations'}</h2>
+          {
+            convert(designConsiderations)
+          }
+        </div>
+
+        <div className={styles.subcontent}>
+          <h3 className={styles.subheader}>{'Union branding requirements'}</h3>
+          {
+            convert(unionBrandingRequirements)
+          }
+        </div>
+
+        <div className={styles.subcontent}>
+          <h3 className={styles.subheader}>{'Design'}</h3>
+          {
+            convert(design)
+          }
+        </div>
+
+        <div className={styles.subcontent}>
+          <h3 className={styles.subheader}>{'Content'}</h3>
+          {
+            convert(content)
+          }
+        </div>
+
+        <div className={styles.subcontent}>
+          <h3 className={styles.subheader}>{'Links'}</h3>
+          {
+            convert(links)
+          }
+        </div>
+
       </div>
       <Footer />
     </div>
diff --git a/src/pages/Service/PublicityManagement/publicitymanagement.module.css b/src/pages/Service/PublicityManagement/publicitymanagement.module.css
index 69f1a58..cd75abd 100644
--- a/src/pages/Service/PublicityManagement/publicitymanagement.module.css
+++ b/src/pages/Service/PublicityManagement/publicitymanagement.module.css
@@ -10,10 +10,10 @@
 }
 
 .subheader {
-  font-size: 24px; 
   font-family: 'Lora', serif;
   font-weight: 700;
   color: #D9A129; 
+  text-align: left;
 }
 
 .content {
@@ -24,10 +24,10 @@
 }
 
 .subcontent {
-  max-width: 600px;
+  width: 600px;
 }
 
-.text, .bullet {
+.text, .bullet, .quote {
   font-size: 16px; 
   font-family: 'Lora', serif;
   text-align: justify;
@@ -35,6 +35,11 @@
   margin-bottom: 1.5vh;
 }
 
+.quote {
+  padding-left: 10px;
+  border-left: 2px solid #444444;
+}
+
 .horizontalLine {
   max-width: 600px;
   height: 0.2vh;

From 1250324b795aba4078035d31b4a7110231188998 Mon Sep 17 00:00:00 2001
From: Jason Ray <jasonraymoniaga@gmail.com>
Date: Tue, 27 Aug 2024 18:56:19 +0800
Subject: [PATCH 4/4] Add file to page

---
 .../Service/PublicityManagement/helper.jsx    |  6 +++++
 .../Service/PublicityManagement/index.jsx     | 24 ++++++++++++++++++-
 .../publicitymanagement.module.css            |  4 ++++
 3 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/pages/Service/PublicityManagement/helper.jsx b/src/pages/Service/PublicityManagement/helper.jsx
index ee3b4b9..4b21b57 100644
--- a/src/pages/Service/PublicityManagement/helper.jsx
+++ b/src/pages/Service/PublicityManagement/helper.jsx
@@ -31,6 +31,12 @@ const extractData = (data, match, isNotDupe = true) => {
         content: item.content
       }
       extracted.push(currImage);
+    } else if (isMatch && (isNotDupe || isFairUse) && item.type === "file") {
+      let currFile = {
+        type: "file",
+        content: item.url
+      }
+      extracted.push(currFile);
     } else if (isMatch && (isNotDupe || isFairUse) && item.type === "bulleted_list_item") {
       let currBullet = {
         type: "bullet",
diff --git a/src/pages/Service/PublicityManagement/index.jsx b/src/pages/Service/PublicityManagement/index.jsx
index 8be4d3d..bf1ad0f 100644
--- a/src/pages/Service/PublicityManagement/index.jsx
+++ b/src/pages/Service/PublicityManagement/index.jsx
@@ -11,6 +11,7 @@ import {
   extractCouncilProjects,
   extractDesign,
   extractDesignConsiderations,
+  extractDirectives,
   extractElligibility,
   extractFairUse,
   extractFairUseEDM,
@@ -65,6 +66,7 @@ const PublicityManagement = () => {
   const design = extractDesign(contentTwo);
   const content = extractContent(contentTwo);
   const links = extractLinks(contentTwo);
+  const directives = extractDirectives(contentTwo);
 
   const convert = (data) => {
     return data.map((item) => {
@@ -76,10 +78,23 @@ const PublicityManagement = () => {
         return (
           <p className={styles.quote}>{item.content}</p>
         )
-      }else if (item.type === 'image') {
+      } else if (item.type === 'image') {
         return (
           <img src={item.content} className={styles.image} />
         )
+      } else if (item.type === 'file') {
+        return (
+          <div className={styles.icon}>
+            <a
+              href={item.content}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <CIcon icon={freeSet.cilFile} height="10vh" width="7.5vw" />
+            </a>
+            <div className={styles.text}>{`Directives`}</div>
+          </div>
+        )
       } else if (item.type === 'bullet' || item.type === 'number') {
         return (
           <li className={styles.bullet}>{item.content}</li>
@@ -261,6 +276,13 @@ const PublicityManagement = () => {
           }
         </div>
 
+        <div className={styles.subcontent}>
+          <h3 className={styles.subheader}>{'Directives'}</h3>
+          {
+            convert(directives)
+          }
+        </div>
+
       </div>
       <Footer />
     </div>
diff --git a/src/pages/Service/PublicityManagement/publicitymanagement.module.css b/src/pages/Service/PublicityManagement/publicitymanagement.module.css
index cd75abd..57fdede 100644
--- a/src/pages/Service/PublicityManagement/publicitymanagement.module.css
+++ b/src/pages/Service/PublicityManagement/publicitymanagement.module.css
@@ -53,6 +53,10 @@
   object-fit: contain;
 }
 
+.icon {
+  margin: 0 20px;
+}
+
 /* @media screen and (max-width: 1000px) {
 
   .container {