From 49d0d3b35a3a0935867cfc87cbaeea5e20f424c4 Mon Sep 17 00:00:00 2001
From: James Collins <james.collins@outlook.com.au>
Date: Mon, 17 Apr 2023 16:11:57 +1000
Subject: [PATCH] updated page

---
 resources/js/views/Contact.vue | 284 ++++++++++++---------------------
 1 file changed, 100 insertions(+), 184 deletions(-)

diff --git a/resources/js/views/Contact.vue b/resources/js/views/Contact.vue
index 9557e9c..50583b9 100644
--- a/resources/js/views/Contact.vue
+++ b/resources/js/views/Contact.vue
@@ -1,195 +1,111 @@
 <template>
-    <SMPage class="sm-page-contact">
-        <template #container>
-            <SMRow break-large>
-                <SMColumn>
-                    <h1 class="text-left">Contact Us</h1>
-                    <h2>Questions & Support</h2>
-                    <p>
-                        If you have a question or would like help with a
-                        project, you can send it our way using the form on this
-                        page or be emailing
-                        <a href="mailto:hello@stemmechanics.com.au"
-                            >hello@stemmechanics.com.au</a
-                        >.
-                    </p>
-                    <p>
-                        You can find us on various social media platforms, and
-                        if you join our
-                        <a href="https://discord.gg/yNzk4x7mpD">Discord</a>
-                        server, you'll have the opportunity to connect with our
-                        team, participants, and other individuals who share
-                        similar interests.
-                    </p>
-                    <ul class="sm-contact-socials">
-                        <li>
-                            <a href="https://facebook.com/stemmechanics"
-                                ><ion-icon name="logo-facebook"></ion-icon
-                            ></a>
-                        </li>
-                        <li>
-                            <a href="https://mastodon.au/@stemmechanics"
-                                ><ion-icon name="logo-mastodon"></ion-icon
-                            ></a>
-                        </li>
-                        <li>
-                            <a href="https://www.youtube.com/@stemmechanics"
-                                ><ion-icon name="logo-youtube"></ion-icon
-                            ></a>
-                        </li>
-                        <li>
-                            <a href="https://twitter.com/stemmechanics"
-                                ><ion-icon name="logo-twitter"></ion-icon
-                            ></a>
-                        </li>
-                        <li>
-                            <a href="https://github.com/stemmechanics"
-                                ><ion-icon name="logo-github"></ion-icon
-                            ></a>
-                        </li>
-                        <li>
-                            <a href="https://discord.gg/yNzk4x7mpD"
-                                ><ion-icon name="logo-discord"></ion-icon
-                            ></a>
-                        </li>
-                    </ul>
-                    <h2>Wanting a workshop?</h2>
-                    <p>
-                        We provide both public and private workshops as well as
-                        run events on behalf of your organisation. If you would
-                        like to discuss a potential opportunity, send us an
-                        email at
-                        <a href="mailto:hello@stemmechanics.com.au"
-                            >hello@stemmechanics.com.au</a
-                        >.
-                    </p>
-                    <h2>Address</h2>
-                    <p>
-                        We do not have a physical address as our workshops are
-                        delivered across Queensland. Visit the
-                        <router-link :to="{ name: 'event-list' }"
-                            >workshops</router-link
-                        >
-                        page for each specific location.
-                    </p>
-                    <p>Official mail can be sent to the following address:</p>
-                    <div class="text-center">
-                        <p class="font-size-90">
-                            STEMMechanics<br />PO Box 36<br />Edmonton, QLD,
-                            4869<br />Australia
-                        </p>
-                        <p class="font-size-90">
-                            <strong>ABN: </strong>15 772 281 735
-                        </p>
-                    </div>
-                </SMColumn>
-                <SMColumn>
-                    <div>
-                        <SMFormCard narrow>
-                            <template v-if="!formSubmitted">
-                                <SMForm v-model="form" @submit="handleSubmit">
-                                    <SMInput control="name" />
-                                    <SMInput control="email" type="email" />
-                                    <SMInput
-                                        control="content"
-                                        label="Message"
-                                        type="textarea" />
-                                    <SMButton
-                                        type="submit"
-                                        block
-                                        label="Send Message" />
-                                </SMForm>
-                            </template>
-                            <template v-else>
-                                <h1>Message Sent!</h1>
-                                <p class="text-center">
-                                    Your message as been sent.<br />We will
-                                    respond as soon as we can.
-                                </p>
-                                <SMButton
-                                    block
-                                    :to="{ name: 'home' }"
-                                    label="Home" />
-                            </template>
-                        </SMFormCard>
-                    </div>
-                </SMColumn>
-            </SMRow>
-        </template>
-    </SMPage>
+    <SMMastHead title="Contact us" />
+    <SMContainer>
+        <div class="container-text">
+            <h3>Questions & Support</h3>
+            <p>
+                If you have a question or would like help with a project, you
+                can send it our way using the form on this page or be emailing
+                <a href="mailto:hello@stemmechanics.com.au"
+                    >hello@stemmechanics.com.au</a
+                >.
+            </p>
+            <p>
+                You can find us on various social media platforms, and if you
+                join our
+                <a href="https://discord.gg/yNzk4x7mpD">Discord</a>
+                server, you'll have the opportunity to connect with our team,
+                participants, and other individuals who share similar interests.
+            </p>
+            <ul class="sm-contact-socials">
+                <li>
+                    <a href="https://facebook.com/stemmechanics"
+                        ><ion-icon name="logo-facebook"></ion-icon
+                    ></a>
+                </li>
+                <li>
+                    <a href="https://mastodon.au/@stemmechanics"
+                        ><ion-icon name="logo-mastodon"></ion-icon
+                    ></a>
+                </li>
+                <li>
+                    <a href="https://www.youtube.com/@stemmechanics"
+                        ><ion-icon name="logo-youtube"></ion-icon
+                    ></a>
+                </li>
+                <li>
+                    <a href="https://twitter.com/stemmechanics"
+                        ><ion-icon name="logo-twitter"></ion-icon
+                    ></a>
+                </li>
+                <li>
+                    <a href="https://github.com/stemmechanics"
+                        ><ion-icon name="logo-github"></ion-icon
+                    ></a>
+                </li>
+                <li>
+                    <a href="https://discord.gg/yNzk4x7mpD"
+                        ><ion-icon name="logo-discord"></ion-icon
+                    ></a>
+                </li>
+            </ul>
+            <h3>Wanting a workshop?</h3>
+            <p>
+                We provide both public and private workshops as well as run
+                events on behalf of your organisation. If you would like to
+                discuss a potential opportunity, send us an email at
+                <a href="mailto:hello@stemmechanics.com.au"
+                    >hello@stemmechanics.com.au</a
+                >.
+            </p>
+            <h3>Address</h3>
+            <p>
+                We do not have a physical address as our workshops are delivered
+                across Queensland. Visit the
+                <router-link :to="{ name: 'event-list' }"
+                    >workshops</router-link
+                >
+                page for each specific location.
+            </p>
+            <p>Official mail can be sent to the following postal address:</p>
+            <div class="address text-center">
+                <p class="font-size-90">
+                    STEMMechanics<br />PO Box 36<br />Edmonton, QLD, 4869<br />Australia
+                </p>
+                <p class="font-size-90"><strong>ABN: </strong>15 772 281 735</p>
+            </div>
+        </div>
+    </SMContainer>
 </template>
 
 <script setup lang="ts">
-import { reactive, ref } from "vue";
-import { useReCaptcha } from "vue-recaptcha-v3";
-import SMButton from "../components/SMButton.vue";
-import SMFormCard from "../components/SMFormCard.vue";
-import SMForm from "../components/SMForm.vue";
-import SMInput from "../depreciated/SMInput-old.vue";
-import { api } from "../helpers/api";
-import { Form, FormControl } from "../helpers/form";
-import { And, Email, Min, Required } from "../helpers/validate";
-
-const { executeRecaptcha, recaptchaLoaded } = useReCaptcha();
-let form = reactive(
-    Form({
-        name: FormControl("", And([Required()])),
-        email: FormControl("", And([Required(), Email()])),
-        content: FormControl("", And([Required(), Min(8)])),
-    })
-);
-const formSubmitted = ref(false);
-
-const handleSubmit = async () => {
-    form.loading(true);
-
-    try {
-        await recaptchaLoaded();
-        const captcha = await executeRecaptcha("submit");
-
-        await api.post({
-            url: "/contact",
-            body: {
-                name: form.controls.name.value,
-                email: form.controls.email.value,
-                captcha_token: captcha,
-                content: form.controls.content.value,
-            },
-        });
-
-        formSubmitted.value = true;
-    } catch (error) {
-        form.error("A captcha error occurred. Try reloading the page.");
-    } finally {
-        form.loading(false);
-    }
-};
+import SMMastHead from "../components/SMMastHead.vue";
 </script>
 
 <style lang="scss">
-.sm-page-contact {
-    background-color: #f8f8f8;
+.container-text {
+    max-width: 800px;
+    margin: 0 auto;
+    line-height: 1.4em;
 
-    .sm-contact-socials {
-        list-style-type: none;
-        padding: 0;
-        display: flex;
-        font-size: 150%;
-        justify-content: center;
-
-        li {
-            margin: 0 map-get($spacer, 2);
-
-            a,
-            a:visited {
-                color: $font-color;
-                transition: color 0.1s ease-in-out;
-
-                &:hover {
-                    color: $primary-color;
-                }
-            }
-        }
+    h3:not(:first-of-type) {
+        margin-top: 60px;
     }
 }
+
+.sm-contact-socials {
+    list-style-type: none;
+    padding: 0;
+    display: flex;
+    font-size: 200%;
+    justify-content: center;
+
+    li {
+        margin: 0 16px;
+    }
+}
+
+.address {
+    margin-top: 60px;
+}
 </style>