help page

frontend/src/pages/HelpPage.module.css

@@ -0,0 +1,143 @@
+.helpContainer {
+  margin: 0 auto;
+  max-width: var(--go-ui-width-screen-lg);
+  padding: var(--go-ui-spacing-lg) var(--go-ui-spacing-md) var(--go-ui-spacing-2xl) var(--go-ui-spacing-md);
+}
+
+.helpSection {
+  background-color: var(--go-ui-color-white);
+  border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
+  border-radius: var(--go-ui-border-radius-xl);
+  padding: var(--go-ui-spacing-2xl);
+  margin-bottom: var(--go-ui-spacing-xl);
+  box-shadow: var(--go-ui-box-shadow-sm);
+  transition: all var(--go-ui-duration-transition-medium) ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.helpSection:hover {
+  box-shadow: var(--go-ui-box-shadow-md);
+  transform: translateY(-2px);
+  border-color: var(--go-ui-color-gray-30);
+}
+
+.sectionHeader {
+  display: flex;
+  align-items: center;
+  margin-bottom: var(--go-ui-spacing-lg);
+  padding-bottom: var(--go-ui-spacing-md);
+  border-bottom: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
+}
+
+.sectionIcon {
+  width: 2rem;
+  height: 2rem;
+  margin-right: var(--go-ui-spacing-md);
+  color: var(--go-ui-color-red-90);
+  background-color: var(--go-ui-color-red-5);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.sectionTitle {
+  color: var(--go-ui-color-black);
+  font-weight: var(--go-ui-font-weight-semibold);
+  font-size: var(--go-ui-font-size-xl);
+  margin: 0;
+}
+
+.sectionContent {
+  color: var(--go-ui-color-gray-700);
+  line-height: 1.7;
+  font-size: var(--go-ui-font-size-base);
+  margin-bottom: var(--go-ui-spacing-lg);
+}
+
+.guidelinesList {
+  list-style: none;
+  padding: 0;
+  margin: var(--go-ui-spacing-md) 0;
+}
+
+.guidelinesList li {
+  position: relative;
+  padding: var(--go-ui-spacing-sm) 0 var(--go-ui-spacing-sm) var(--go-ui-spacing-lg);
+  margin-bottom: var(--go-ui-spacing-sm);
+  color: var(--go-ui-color-gray-700);
+  line-height: 1.6;
+}
+
+.guidelinesList li::before {
+  content: '✓';
+  position: absolute;
+  left: 0;
+  top: var(--go-ui-spacing-sm);
+  color: var(--go-ui-color-green-70);
+  font-weight: var(--go-ui-font-weight-bold);
+  font-size: var(--go-ui-font-size-sm);
+  background-color: var(--go-ui-color-green-5);
+  border-radius: 50%;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.buttonContainer {
+  display: flex;
+  justify-content: center;
+  margin-top: var(--go-ui-spacing-xl);
+}
+
+.featureHighlight {
+  background: linear-gradient(135deg, var(--go-ui-color-blue-5), var(--go-ui-color-blue-10));
+  border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-blue-20);
+  border-radius: var(--go-ui-border-radius-lg);
+  padding: var(--go-ui-spacing-lg);
+  margin: var(--go-ui-spacing-lg) 0;
+  position: relative;
+}
+
+.featureHighlight::before {
+  content: '💡';
+  position: absolute;
+  top: var(--go-ui-spacing-md);
+  right: var(--go-ui-spacing-md);
+  font-size: 1.5rem;
+}
+
+.featureHighlightText {
+  color: var(--go-ui-color-blue-90);
+  font-weight: var(--go-ui-font-weight-medium);
+  margin: 0;
+  font-size: var(--go-ui-font-size-sm);
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .helpSection {
+    padding: var(--go-ui-spacing-lg);
+    margin-bottom: var(--go-ui-spacing-lg);
+  }
+  
+  .sectionHeader {
+    flex-direction: column;
+    text-align: center;
+    gap: var(--go-ui-spacing-sm);
+  }
+  
+  .sectionIcon {
+    margin-right: 0;
+    margin-bottom: var(--go-ui-spacing-sm);
+  }
+  
+  .actionButton {
+    padding: var(--go-ui-spacing-sm) var(--go-ui-spacing-lg);
+    font-size: var(--go-ui-font-size-sm);
+  }
+}

frontend/src/pages/HelpPage.tsx

@@ -1,6 +1,7 @@
 import { PageContainer, Heading, Container, Button } from '@ifrc-go/ui';
 import { useNavigate } from 'react-router-dom';
 import { useFilterContext } from '../contexts/FilterContext';
+import styles from './HelpPage.module.css';
 
 export default function HelpPage() {
   const navigate = useNavigate();
@@ -21,20 +22,18 @@ export default function HelpPage() {
 
   return (
     <PageContainer className="py-10">
-      <Container withInternalPadding className="max-w-4xl mx-auto">
-
-        
+      <div className={styles.helpContainer}>
         <div className="space-y-8">
-          <Container withInternalPadding className="p-8">
-            <Heading level={3} className="mb-4 text-ifrcRed font-semibold">Introduction</Heading>
-            <p className="text-gray-700 leading-relaxed text-base">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore 
-              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
-              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
-              cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
-              culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-            <div className="mt-6 flex justify-center">
+          <div className={styles.helpSection}>
+            <div className={styles.sectionHeader}>
+              <Heading level={3} className={styles.sectionTitle}>Introduction</Heading>
+            </div>
+            <div className={styles.sectionContent}>
+              In collaboration with the IFRC, PromptAid Vision is a tool that generates textual descriptions of crisis maps/crisis drone images utiliing Visual language models.
+              This prototype is for collecting data for the fine-tuning of our own models. We aim to utilize AI tools to support national societies with rapid decision making during 
+              emergencies. 
+            </div>
+            <div className={styles.buttonContainer}>
               <Button
                 name="upload-now"
                 variant="secondary"
@@ -43,17 +42,22 @@ export default function HelpPage() {
                 Upload now →
               </Button>
             </div>
-          </Container>
+          </div>
 
-          <Container withInternalPadding className="p-8">
-            <Heading level={3} className="mb-4 text-ifrcRed font-semibold">Guidelines</Heading>
-            <p className="text-gray-700 leading-relaxed text-base">
-              Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
-              totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae 
-              dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, 
-              sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
-            </p>
-            <div className="mt-6 flex justify-center">
+          <div className={styles.helpSection}>
+            <div className={styles.sectionHeader}>
+              <Heading level={3} className={styles.sectionTitle}>Guidelines</Heading>
+            </div>
+            <div className={styles.sectionContent}>
+              To make the process smoother, please follow the guidelines below:
+              <ul className={styles.guidelinesList}>
+                <li>Avoid uploading images that are not crisis maps/crisis drone images.</li>
+                <li>Confirm the image details prior to modifying the description.</li>
+                <li>Before the modification, please read the description generated and provide a rating via the rating sliders.</li>
+                <li>Click the "Submit" button to save the description.</li>
+              </ul>
+            </div>
+            <div className={styles.buttonContainer}>
               <Button
                 name="see-examples"
                 variant="secondary"
@@ -62,17 +66,17 @@ export default function HelpPage() {
                 See examples →
               </Button>
             </div>
-          </Container>
+          </div>
 
-          <Container withInternalPadding className="p-8">
-            <Heading level={3} className="mb-4 text-ifrcRed font-semibold">VLMs</Heading>
-            <p className="text-gray-700 leading-relaxed text-base">
-              At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum 
-              deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non 
-              provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum 
-              fuga. Et harum quidem rerum facilis est et expedita distinctio.
-            </p>
-            <div className="mt-6 flex justify-center">
+          <div className={styles.helpSection}>
+            <div className={styles.sectionHeader}>
+              <Heading level={3} className={styles.sectionTitle}>VLMs</Heading>
+            </div>
+            <div className={styles.sectionContent}>
+              PromptAid Vision uses a variety of Visual Language Models (VLMs). A random VLM is selected for each upload. Therefore feel free to delete
+              and reupload. You can view performance details here:
+            </div>
+            <div className={styles.buttonContainer}>
               <Button
                 name="view-vlm-details"
                 variant="secondary"
@@ -81,18 +85,16 @@ export default function HelpPage() {
                 View VLM details →
               </Button>
             </div>
-          </Container>
+          </div>
 
-          <Container withInternalPadding className="p-8">
-            <Heading level={3} className="mb-4 text-ifrcRed font-semibold">Dataset</Heading>
-            <p className="text-gray-700 leading-relaxed text-base">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore 
-              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
-              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
-              cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
-              culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-            <div className="mt-6 flex justify-center">
+          <div className={styles.helpSection}>
+            <div className={styles.sectionHeader}>
+              <Heading level={3} className={styles.sectionTitle}>Dataset</Heading>
+            </div>
+            <div className={styles.sectionContent}>
+              All users are able to export the dataset. You could apply filters when exporting, and it have the option to organize based on model fine-tuning formats.
+            </div>
+            <div className={styles.buttonContainer}>
               <Button
                 name="export-dataset"
                 variant="secondary"
@@ -110,9 +112,27 @@ export default function HelpPage() {
                 Export dataset →
               </Button>
             </div>
-          </Container>
+          </div>
+
+          <div className={styles.helpSection}>
+            <div className={styles.sectionHeader}>
+              <Heading level={3} className={styles.sectionTitle}>Contact us</Heading>
+            </div>
+            <div className={styles.sectionContent}>
+              Need help or have questions about PromptAid Vision? Our team is here to support you.
+            </div>
+            <div className={styles.buttonContainer}>
+              <Button
+                name="contact-support"
+                variant="secondary"
+                disabled={true}
+              >
+                Get in touch →
+              </Button>
+            </div>
+          </div>
         </div>
-      </Container>
+      </div>
     </PageContainer>
   );
 }

frontend/src/pages/UploadPage/UploadPage.tsx

@@ -898,9 +898,8 @@ export default function UploadPage() {
             <div className="space-y-6">
               <p className="text-gray-700 leading-relaxed max-w-2xl mx-auto">
                 This app evaluates how well multimodal AI models analyze and describe
-                crisis maps and drone imagery. Upload any file format (PDF, TIFF, HEIC, etc.) 
-                and we'll automatically convert it for you. Let the AI generate a description, 
-                then review and rate the result based on your expertise.
+                crisis maps and drone imagery. Upload an image and the AI will generate a description.
+                Then you can review and rate the result based on your expertise.
               </p>
               
               {/* "More »" link  */}