diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 9f5f2048..ba353f02 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -194,7 +194,8 @@ const config: Config = { { to: "/showcase", label: "Showcase" }, { to: "/blog", label: "Blog" }, { to: "/newsletter", label: "Newsletter" }, - { to: "/sponsorship", label: "Sponsorship" } + { to: "/sponsorship", label: "Sponsorship" }, + { to: "/contact", label: "Contact" } ] }, { @@ -329,6 +330,10 @@ const config: Config = { { label: "Brand & Press", href: "https://github.com/junobuild/brand" + }, + { + label: "Contact", + to: "/contact" } ] } diff --git a/src/components/Contact/index.tsx b/src/components/Contact/index.tsx new file mode 100644 index 00000000..7f9b312d --- /dev/null +++ b/src/components/Contact/index.tsx @@ -0,0 +1,35 @@ +import { useEffect, useState } from "react"; +import styles from "./styles.module.scss"; + +export default function Contact(): JSX.Element { + // Do not prerender to prevent spam + // See 2.6 - https://spencermortensen.com/articles/email-obfuscation/ + let [loaded, setLoaded] = useState(false); + + useEffect(() => { + setLoaded(true); + }, []); + + return ( + <> +

Contact

+ +

+ Have a question or want to get in touch? Send an email to{" "} + {loaded && hi@juno.build} +

+ +

+ For technical questions, bug reports, or implementation help, the  + + Discord + {" "} + community is the best place to get quick answers from other developers. +

+ + ); +} diff --git a/src/components/Contact/styles.module.scss b/src/components/Contact/styles.module.scss new file mode 100644 index 00000000..d74fde35 --- /dev/null +++ b/src/components/Contact/styles.module.scss @@ -0,0 +1,10 @@ +@use "../../mixins/fonts"; + +.sub { + margin: 1rem 0 0.75rem; + @include fonts.h2; +} + +.action { + margin: 0 0 8rem; +} diff --git a/src/pages/contact/index.module.scss b/src/pages/contact/index.module.scss new file mode 100644 index 00000000..9a646109 --- /dev/null +++ b/src/pages/contact/index.module.scss @@ -0,0 +1,6 @@ +.container { + margin: 3rem auto 12rem; + max-width: var(--ifm-container-width); + padding: 0 var(--ifm-spacing-horizontal); + width: 100%; +} diff --git a/src/pages/contact/index.tsx b/src/pages/contact/index.tsx new file mode 100644 index 00000000..f79ef32d --- /dev/null +++ b/src/pages/contact/index.tsx @@ -0,0 +1,18 @@ +import Contact from "@site/src/components/Contact"; +import Head from "@site/src/components/Head"; +import Layout from "@theme/Layout"; +import styles from "./index.module.scss"; + +export default function ContactPage(): JSX.Element { + return ( + + + + + +
+ +
+ + ); +}