Map submission (#119)

* Add CallForMaps page - proposition * CallForMaps - some corrections * Call for maps: corrections from Marjan * Call for maps: corrections in html structure and typing * Call for maps: add mobile support * Call for maps -prettier * Apply Prettier fixes * Update deadline in call for maps See #119 (comment) --------- Co-authored-by: Jonathan Beliën <[email protected]>
osmbe · Sep 26, 2023 · f57c236 · f57c236
1 parent 6e5af0e
commit f57c236
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 2 deletions.
diff --git a/src/components/Accommodations.jsx b/src/components/Accommodations.jsx
@@ -83,7 +83,9 @@ export function Accommodations({ id }) {
                   <div>
                     <p className="leading-6">Discount:</p>
                     <p className="mt-1 whitespace-pre-line leading-5">
-                      <ReactMarkdown linkTarget="_blank">{accommodation.discount}</ReactMarkdown>
+                      <ReactMarkdown linkTarget="_blank">
+                        {accommodation.discount}
+                      </ReactMarkdown>
                     </p>
                   </div>
                 </div>

diff --git a/src/components/CallForMaps.jsx b/src/components/CallForMaps.jsx
@@ -0,0 +1,76 @@
+import Link from 'next/link'
+import { Container } from '@/components/Container'
+
+export function CallForMaps({ id }) {
+  return (
+    <section id={id} aria-label="CallForMaps" className="py-20 sm:py-32">
+      <Container>
+        <h1 className="mx-auto mb-6 max-w-2xl text-center font-dunbar text-5xl font-medium tracking-tighter text-sotm-blue sm:text-5xl">
+          Call for Maps
+        </h1>
+
+        <div className="mx-auto mt-6 space-y-6 font-poppins text-2xl tracking-tight text-sotm-blue">
+          <h3 className="mx-auto mt-6 max-w-2xl text-center font-dunbar text-2xl font-medium tracking-tighter text-sotm-blue sm:text-3xl">
+            Submit your map
+          </h3>
+          <p>
+            A State of the Map conference would not be complete without maps!
+            That is why you are invited to showcase your maps at State of the
+            Map Europe. We welcome you to submit beautiful maps made of OSM
+            data. You could demonstrate to the community how well your area is
+            mapped, show a new map style... Everything is possible in our map
+            exhibition. The only condition is that your map is mainly based on
+            OSM data.
+          </p>
+          <h3 className="mx-auto mt-6 max-w-2xl text-center font-dunbar text-2xl font-medium tracking-tighter text-sotm-blue sm:text-3xl">
+            Map Requirements
+          </h3>
+          <p>
+            Please submit an A1-sized PDF map in high resolution. We will print
+            and display it in the conference venue. If you already have a
+            printed copy of your submitted map, you may take it with you to the
+            conference, but make sure it does not exceed A1 size. If you want to
+            showcase a digital map style, we cannot provide a screen, but please
+            consider submitting screenshots and a short explanation of the
+            style. Note that if the number of maps we receive is larger than the
+            space available, we will make a selection.
+          </p>
+          <h3 className="mx-auto mt-6 max-w-2xl text-center font-dunbar text-2xl font-medium tracking-tighter text-sotm-blue sm:text-3xl">
+            Submission Guidelines
+          </h3>
+          <p>
+            Simply write a email to{' '}
+            <Link className="font-bold" href="mailto:[email protected]">
+              [email protected]
+            </Link>{' '}
+            with &quot;Map Submission&quot; as the subject, containing the
+            following information:
+          </p>
+          <ul className="list-inside list-disc">
+            <li>The map or a link to download it</li>
+            <li>A title for your map</li>
+            <li>The name(s) of author(s)</li>
+            <li>A short description (max. 250 words)</li>
+            <li>Whether you will bring the map or want us to print it</li>
+          </ul>
+
+          <h3 className="mx-auto mt-6 max-w-2xl text-center font-dunbar text-2xl font-medium tracking-tighter text-sotm-blue sm:text-3xl">
+            Deadline
+          </h3>
+          <div>
+            <ul className="list-inside list-disc">
+              <li>September 26: Call for maps open</li>
+              <li>October 18 at 12:00 GMT: Deadline for map submission</li>
+              <li>November 10-12: State of the Map Europe 2023</li>
+            </ul>
+          </div>
+          {/* <div className="text-center">
+            <Button className="font-bold" target="_blank" href={url}>
+              Submit your presentation
+            </Button>
+          </div> */}
+        </div>
+      </Container>
+    </section>
+  )
+}
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
@@ -1,5 +1,5 @@
 import Image from 'next/image'
-
+import { Button } from '@/components/Button'
 import { Container } from '@/components/Container'
 import Logo from '@/images/logos/SOTM_Blue_full_logo_black.png'
 
@@ -43,6 +43,9 @@ export function Hero({ id }) {
               </div>
             ))}
           </dl>
+          <div className="mt-20 text-center lg:hidden">
+            <Button href="/call-for-maps">Submit your maps</Button>
+          </div>
         </div>
       </Container>
     </div>

diff --git a/src/components/Menu.jsx b/src/components/Menu.jsx
@@ -49,6 +49,9 @@ export function Menu() {
           <Button href={ticketURL} target="_blank">
             Get your tickets
           </Button>
+          <Button className="hidden lg:block" href="/call-for-maps">
+            Submit your maps
+          </Button>
         </div>
         <div className="flex lg:hidden">
           <button
@@ -109,6 +112,12 @@ export function Menu() {
                 >
                   Get your tickets
                 </Link>
+                <Link
+                  href="/call-for-maps"
+                  className="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                >
+                  Submit your maps
+                </Link>
               </div>
             </div>
           </div>

diff --git a/src/pages/call-for-maps.jsx b/src/pages/call-for-maps.jsx
@@ -0,0 +1,24 @@
+import Head from 'next/head'
+
+import { Footer } from '@/components/Footer'
+import { Header } from '@/components/Header'
+import { CallForMaps } from '@/components/CallForMaps'
+
+export default function Page() {
+  return (
+    <>
+      <Head>
+        <title>State of the Map EU 2023 - Call for maps</title>
+        <meta
+          name="description"
+          content="State of the Map EU 2023 is the European conference of OpenStreetMap, organised this year by the OpenStreetMap Belgium community."
+        />
+      </Head>
+      <Header />
+      <main>
+        <CallForMaps id="call-for-maps" />
+      </main>
+      <Footer />
+    </>
+  )
+}