Contact Page

Description

The Contacts page provides ways to contact the organization. This includes a Google Map of the organization's headquarters, email (with form), and social media links.

  • Source: src\pages\contact.js

Dependencies

React from "react"

Common

  • Header from "../components/header.js"
    • Reusable component for providing links to the other major pages of the site
  • SiteMeta from "../components/site-meta.js"
    • Reusable component for providing meta data on the corresponding component.
  • Opening from "../components/opening.js"
    • Reusable component for displaying a header and header message/text and also acts as a wrapper

Local

  • CommData from "../data/contact.json"
    • JSON file that holds all the assets of the page
  • ContactSocial from "../components/contact/contact-social.js"
    • Displays a set of buttons with icons that represent the social media utilized by the organization. Each button redirects to the organization's page/space for that platform.
  • ContactFooter from "../components/contact/contact-footer.js"
    • A copy of the footer that doesn't have the contact links and references (since this page is solely for that already).
  • ContactMap from "../components/contact/contact-map.js"
    • A wrapped component for displaying a Google Map of the organization's headqaurters.
  • ContactForm from "../components/contact/contact-form.js"
    • A component that displays the contact email of the site and a functional form for accepting emails within the page.

Composition

Site Metadata

Provides metadata about the page, informing that it is the Contact page. Property isIndex is false since index has a different behavior for SiteMeta.

<SiteMeta pageName="Contact us" sitePage="/contact/" isIndex={false} />
    ...

Set to notify the header that the Contact Page is currently being displayed. Property isIndex is false so the header stays in a "scrolled" state (header color visible).

    ...
    <Header isIndex={false} active="Contact" />
    ...

Contact Opening Message

Displays a welcoming message for the Contact page. Header (title) and opening message loaded from ContactData.opening.

    <Opening
        header={ContactData.opening.header}
        headerInfo={ContactData.opening.headerInfo}
    />

Contact Google Maps

Displays a google map embed of the organization's headquarters. Header (title) and opening message loaded from ContactData.header.

    <Opening
        header={ContactData.map.header}
        headerInfo={ContactData.map.headerInfo}
    >
        <ContactMap />
      </Opening>

Contact Email and Form

Displays the email for contacting the organization and a form where users can send their emails within the site. Header (title) and opening message loaded from ContactData.email.

    ...
    <Opening
        header={ContactData.email.header}
        headerInfo={ContactData.email.headerInfo}
      >
        <ContactForm />
    </Opening>
    ...

Displays the social media links/redirects of the organization through circular buttons with icons. Each icon corresponds to the logo of the respective social media platform. Also has a transitory opening, loaded from ContactData.social.

    ...
    <Opening
        header={ContactData.social.header}
        headerInfo={ContactData.social.headerInfo}
    >
        <ContactSocial />
    </Opening>
    ...

A copy of the default footer but without the extra references. Is basically just the copyright notice.

    ...
    <ContactFooter />
...

Notes

The layout simply follows from the other pages of the site but it's very much open for change. This page is supposed to be just for that: layout. The styling and processes of each section should be defined in them.