Update Intro and ToA texts

src/App.css

@@ -74,6 +74,10 @@ form button {
   margin-bottom: 0!important;
 }
 
+#vom-intro p,
+#vom-terms p {
+  text-align: justify;
+}
 #vom-associations-list {
   display: flex; 
 }

src/App.tsx

@@ -12,9 +12,38 @@ const Introduction: React.FunctionComponent<SectionComponentProps> = ({ changePa
   <Fade tag="section" id="vom-intro">
     <h1 className="mb-4">Voices of Merseyside</h1>
     <div className="mb-4">
-      <p className="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit voluptatum corporis minima, eius officiis magnam quae vero praesentium odio facilis minus illo ut atque accusamus esse deserunt. Fuga, autem molestiae!</p>
-      <p className="lead">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos impedit natus dolorem ipsam rem cum mollitia, cumque sapiente omnis ea sed nobis ullam, asperiores dignissimos. Unde dolore iure quisquam aut.</p>
-      <p className="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat suscipit fugiat, iste, odio tempora dolor, voluptatum assumenda enim aspernatur rem ipsam animi corrupti sapiente labore repellat quam amet. Ipsa, aspernatur!</p>
+      <h4>About</h4>
+      <p className="">
+        This project seeks to explore the rich and diverse accents, dialects and identities of Merseyside.
+      </p>
+    </div>
+    <div className="mb-5">
+      <h4>Online Mapping</h4>
+      <p>
+        A speaker’s accent or dialect is closely tied to their sense of identity and community. Using a
+        purposefully designed online tool and Geofencing technology, we hope to gain valuable insights into
+        the linguistic landscape of Merseyside and contribute to the wider field of perceptual dialectology.
+        To gather data, residents of Merseyside are asked to draw a digital map of where they believe
+        different accents or dialects in Merseyside to be found. Then, residents will be asked to label the
+        accent, provide examples of words, grammar or sounds that they identify as being associated with
+        the identified area. Finally, to effectively explore language attitudes, the residents will be asked to
+        provide any associations they have with the identified accent or dialect area and rate the accent or
+        dialect in terms of correctness, pleasantness, trustworthiness, and friendliness. Monitoring language
+        attitudes allows linguists to delve further into the social meanings that are often attached to regional
+        accents or dialects, which provide a unique perspective from which to explore perceptions of
+        identity.
+      </p>
+      <p>
+        We wish to invite all Merseyside residents of varying ages, gender, class and ethnicity to partake in
+        our study and help us to draw a truly representative map of the linguistic landscape of Merseyside,
+        as experienced by you, the Voices of Merseyside.
+      </p>
+    </div>
+    <div className="mb-4">
+      <p className="text-muted font-italic">
+      Voices of Merseyside is an MA thesis project created by Tanya Parry. A former resident of Merseyside, who now resides in Amsterdam. If you wish to get in touch, please email:
+      <a className="text-decoration-none" href="mailto:tanya.parry@icloud.com">tanya.parry@icloud.com</a>
+      </p>
     </div>
     <Button type="button" outline onClick={() => changePage()} color="info">Let's start!</Button>
   </Fade>
@@ -25,16 +54,25 @@ const TermsAndConditions: React.FunctionComponent<SectionComponentProps> = ({ ch
   return (
     <Fade tag="section" id="vom-terms">
       <Form>
-        <h2 className="mb-4">Terms and Conditions</h2>
+        <h2 className="mb-4">Terms of agreement</h2>
         <div className="mb-4">
-          <p className="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati dolore magni aspernatur error totam exercitationem sequi illum. Ex voluptas in, eius provident laudantium quidem quod esse corrupti quas vitae aliquam!</p>
-          <p className="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem culpa soluta, voluptatibus quam magni sapiente corporis debitis ad illo voluptas odio! Adipisci facere ad molestiae ullam vero iure minus mollitia.</p>
-          <p className="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum commodi consectetur aperiam. Obcaecati quisquam possimus et facilis quas, doloremque minima rerum reprehenderit fugiat ipsam dolorum placeat velit! Exercitationem, eveniet obcaecati.</p>
-          <p className="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus quidem quisquam suscipit! Excepturi deserunt quaerat, odio recusandae molestiae assumenda voluptatem possimus id alias quas voluptatibus non quis vitae incidunt veritatis!</p>
+          <p className="">
+          I understand that the responses I give are anonymous (unless I have agreed to be contacted by the
+          researcher – an option given at the end of the survey). Therefore, it is not possible to retract my
+          participation once the map and accompanying responses have been submitted.
+          </p>
+          <p className="">
+          I am aware that this study is part of an MA thesis for the Universiteit van Amsterdam, currently
+          being undertaken by the researcher, Tanya Parry. I understand that my responses will be stored and
+          used by the researcher and her team. However, I allow for my responses (which are anonymous
+          unless I choose to be contacted by the researcher) to be shared with other academics, if the
+          researcher so chooses.
+          </p>
+          
         </div>
         <FormGroup className="mb-4" check>
           <Input type="checkbox" id="vom-terms-check" checked={agreement} onChange={ e => setAgreement(e.target.checked)}/>
-          <Label for="vom-terms-check" check>I agree</Label>
+          <Label for="vom-terms-check" check>I give my permission to participate in this research.</Label>
         </FormGroup>
         <Button type="button" disabled={!agreement} color={agreement ? 'info' : 'secondary'}  onClick={ () => changePage() }>Next</Button>
       </Form>