Text (#18)

* Updated marketing

* Fixed app links

* Tiny space fix

src/components/BrandLayout.js

@@ -6,6 +6,8 @@ import {
   Button,
   makeStyles,
   IconButton,
+  Typography,
+  Link,
 } from "@material-ui/core"
 import BrandFooter from "./BrandFooter"
 
@@ -55,14 +57,16 @@ const Nav = ({ items = [], ...props }) => (
   </nav>
 )
 
-const BrandLayout = ({ homeItem, navItems, footer, children }) => {
+const BrandLayout = ({ navItems, footer, children }) => {
   const classes = useStyles()
 
   return (
     <div className={classes.root}>
       <AppBar elevation={0} color="inherit" position="sticky">
         <Toolbar>
-          {homeItem}
+          <Typography>
+            This app in in open <Link href="/#beta">beta</Link>.
+          </Typography>
           <Nav items={navItems} className={classes.nav}></Nav>
         </Toolbar>
       </AppBar>

src/components/Mdx.js

@@ -12,7 +12,12 @@ const Link = ({ children, ...props }) => {
   }
 
   return (
-    <MaterialLink component={internal ? GatsbyLink : null} {...props}>
+    <MaterialLink
+      target="_blank"
+      rel="noopener"
+      component={internal ? GatsbyLink : "a"}
+      {...props}
+    >
       {children}
     </MaterialLink>
   )

src/components/MenstruationNote.js

@@ -11,6 +11,10 @@ const useStyles = makeStyles((theme) => ({
   root: {
     padding: theme.spacing(3),
     paddingBottom: theme.spacing(2),
+
+    "& a": {
+      marginTop: theme.spacing(1),
+    },
   },
 }))
 
@@ -26,7 +30,6 @@ const NoMenstruationTagSetting = () => {
         color="secondary"
         to="/settings"
         size="small"
-        fullWidth
         component={Link}
       >
         Configure tag
@@ -38,7 +41,7 @@ const NoMenstruationTagSetting = () => {
 const NotEnoughData = () => {
   return (
     <>
-      <Typography gutterBottom>
+      <Typography>
         There is not enough data yet to give you personalized predictions. Keep
         on tracking.
       </Typography>

src/components/appNavFooterItems.js

@@ -2,21 +2,41 @@ import React from "react"
 
 import {
   OpenInNew as WebsiteIcon,
-  Ballot as ProductHuntIcon,
+  Email as SupportIcon,
+  Face as TwitteIcon,
 } from "@material-ui/icons"
 
 export default [
+  // {
+  //   label: "Support POW!",
+  //   text: "on Product Hunt",
+  //   icon: <ProductHuntIcon />,
+  //   component: "a",
+  //   target: "_blank",
+  //   rel: "noopener",
+  //   href: "https://www.producthunt.com/",
+  // },
   {
-    label: "Support POW!",
-    text: "on Product Hunt",
-    icon: <ProductHuntIcon />,
+    label: "Support",
+    text: "via email",
+    icon: <SupportIcon />,
     component: "a",
     target: "_blank",
     rel: "noopener",
-    href: "https://www.producthunt.com/",
+    href: "mailto:pow@raae.codes",
   },
   {
-    label: "Open Website",
+    label: "@raae",
+    text: "on Twitter",
+    icon: <TwitteIcon />,
+    component: "a",
+    target: "_blank",
+    rel: "noopener",
+    href: "https://twitter.com/raae",
+  },
+  {
+    label: "Back to",
+    text: "Website",
     icon: <WebsiteIcon />,
     component: "a",
     target: "_blank",

src/pages/index.mdx

@@ -38,15 +38,15 @@ how the different factors play out throughout your cycle.
 
 # Your personal data
 
-POW! is as a **privacy-first** app. You keep complete
-control of your data. It is never ever shared with any third
+POW! is a **privacy-first** app. You keep complete control
+of your data. It is never ever shared with any third
 parties.
 
 Under the hood POW! uses the [Blockstack](/#blockstack)
 platform.
 
 All data is encrypted before being stored locally and before
-sending it to your storage personal storage hub.
+sending it to your personal storage hub.
 
   </Grid>
   </Grid>
@@ -109,9 +109,11 @@ Blockstack empowers developers like me to create privacy
 first apps, like POW!, for you. Blockstack gives you
 complete control of your identity and your data.
 
-Check out [blockstack.org](https://#blockstack.org/) for
-more information. Heads up, its for the more technically
-inclined amongst you.
+Check out [blockstack.org](https://blockstack.org/) for more
+information. Heads up, its for the more technically inclined
+amongst you.
+
+<span id="beta" />
 
   </Grid>
 
@@ -125,19 +127,18 @@ inclined amongst you.
 
   <Grid item sm={12} md={8}>
 
-# Free for now
-
-Please show your support on
-[Product Hunt](https://www.producthunt.com/)!
+# Open beta
 
-To foster adaptation, Blockstack runs a program aptly named
-[App Mining](https://app.co/mining). Participating apps get
-paid from a monthly pool of money based on its rank. The
-rank is in part based on popularity and upvotes on
-[Product Hunt](https://www.producthunt.com/).
+POW! is being developed as we speak. This means everything
+is not up to the standard I would like yet, and some key
+features are still around the corner. You must also prepare
+yourself for sudden user interface changes.
 
-At a later point, there will be a subscription model of some
-sort.
+But if you, as I, believe in a menstrual cycle tracker that
+lets us be in charge of our cycles, please start using POW!
+and hit me up on [Twitter](https://twitter.com/raae) or
+[email](mailto:pow@raae.codes) with your feedback and
+suggestions.
 
   </Grid>
 </Grid>