smaller text in menu

src/components/centertext.js → src/components/CenterText.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Button } from "./button";
+import { Button } from "./Button";
 import PropTypes from "prop-types";
 
 export const CenterText = (props) => {

src/components/header.js → src/components/Header.js

@@ -1,7 +1,7 @@
 import { Link } from "gatsby";
 import React from "react";
 import PropTypes from "prop-types";
-import { Nav } from "./nav";
+import { Nav } from "./Nav";
 import Logo from "../img/LogoWhite.svg";
 
 export class Header extends React.Component {
@@ -33,7 +33,7 @@ export class Header extends React.Component {
           transparent ? `` : `bg-green-400`
         } z-40 uppercase fixed w-full ease-out duration-300 transition-all`}
       >
-        <div className="flex items-center justify-between max-w-4xl mx-auto p-4 md:p-8">
+        <div className="flex justify-start mx-auto p-4 md:p-8 ">
           <Nav />
           <Link
             className={`${

src/components/layout.js → src/components/Layout.js

@@ -1,7 +1,7 @@
 import PropTypes from "prop-types";
 import React from "react";
 
-import { Header } from "./header";
+import { Header } from "./Header";
 
 class Layout extends React.Component {
   render() {

src/components/nav.js → src/components/Nav.js

@@ -1,7 +1,7 @@
 import { Link } from "gatsby";
 import React from "react";
-import { Sidebar } from "./sidebar";
-import { SocialMedia } from "./socialmedia";
+import { Sidebar } from "./Sidebar";
+import { SocialMedia } from "./SocialMedia";
 
 export class Nav extends React.Component {
   constructor(props) {
@@ -58,7 +58,7 @@ export class Nav extends React.Component {
     ];
 
     return (
-      <div>
+      <div className="">
         <Sidebar
           isExpanded={this.state.isExpanded}
           toggleExpansion={this.toggleExpansion}
@@ -78,11 +78,11 @@ export class Nav extends React.Component {
           </svg>
         </button>
         <div className="hidden md:block">
-          <div className="lg:-ml-32 flex font-bold text-xl md:text-2xl">
+          <div className="flex font-bold text-l">
             {navData.map(link => (
               <Link
                 className={
-                  "md:inline-block md:ml-6 lg:ml-12 no-underline text-white hover:text-green-100 active:text-green-600"
+                  "md:inline-block md:ml-6 lg:ml-12 mt-1 no-underline text-white hover:text-green-100 active:text-green-600"
                 }
                 key={link.title}
                 to={link.route}

src/components/PageContainer.js

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import Layout from "./layout";
+import Layout from "./Layout";
 
 class PageContainer extends React.Component {
   render() {

src/components/QuoteBlock.js

@@ -0,0 +1,30 @@
+import React from "react";
+import PropTypes from "prop-types";
+import greenB from "../img/GreenPattern.png";
+
+export const QuoteBlock = (props) => {
+  return (
+    <div>
+    <div
+          className="bg-contain w-full "
+          style={{
+            backgroundImage: "url(" + greenB + ")",
+            minHeight: 100 + "%",
+          }}
+        >
+      <div className="flex justify-around bg-green-layover-85">
+
+        <div className="text-center font-serif text-2xl text-white italic px-10 py-20">
+          &quot;{props.quote}&quot; <p className="text-lg"> - {props.author}</p>
+        </div>
+      </div>
+      </div>
+
+    </div>
+  );
+};
+
+QuoteBlock.propTypes = {
+  quote: PropTypes.string,
+  author: PropTypes.string,
+};

src/components/sidebar.js → src/components/Sidebar.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Link } from "gatsby";
 import PropTypes from "prop-types";
-import { SocialMedia } from "./socialmedia";
+import { SocialMedia } from "./SocialMedia";
 
 export const Sidebar = props => {
   return (
@@ -22,7 +22,7 @@ export const Sidebar = props => {
         <div className="relative flex flex-col h-full w-full font-bold overflow-scroll">
           {props.navData.map(link => (
             <Link
-              className="text-white text-lg p-4 hover:bg-green-300"
+              className="text-white text-l p-4 hover:bg-green-300"
               key={link.title}
               to={link.route}
             >

src/components/textboxrow.js → src/components/TextboxRow.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Textbox } from "./textbox";
+import { Textbox } from "./Textbox";
 import PropTypes from "prop-types";
 
 

src/pages/404.js

@@ -1,7 +1,7 @@
 import React from "react";
 
-import Layout from "../components/layout";
-import SEO from "../components/seo";
+import Layout from "../components/Layout";
+import SEO from "../components/SEO";
 import spiralingStairs from "../img/SpiralingStairs.jpg";
 
 function NotFoundPage() {

src/pages/lasmer.js

@@ -1,9 +1,9 @@
 import React from "react";
 
 import PageContainer from "../components/PageContainer";
-import SEO from "../components/seo";
-import { Card } from "../components/card";
-import { GreenButton } from "../components/greenbutton";
+import SEO from "../components/SEO";
+import { Card } from "../components/Card";
+import { GreenButton } from "../components/GreenButton";
 import { graphql, StaticQuery } from "gatsby";
 
 class LasMer extends React.Component {

src/pages/tjanster.js

@@ -1,8 +1,8 @@
 import React from "react";
 
 import PageContainer from "../components/PageContainer";
-import SEO from "../components/seo";
-import { Card } from "../components/card";
+import SEO from "../components/SEO";
+import { Card } from "../components/Card";
 import { graphql, StaticQuery } from "gatsby";
 
 class Tjanster extends React.Component {

src/templates/index.js

@@ -1,13 +1,13 @@
 import React from "react";
 import { graphql, StaticQuery } from "gatsby";
 
-import Layout from "../components/layout";
-import SEO from "../components/seo";
+import Layout from "../components/Layout";
+import SEO from "../components/SEO";
 //import Poppy from "../img/poppy.jpg";
 import greenB from "../img/GreenPattern.png";
-import { BackgroundImg } from "../components/backgroundimg";
-import { TextboxRow } from "../components/textboxrow";
-import { CenterText } from "../components/centertext";
+import { BackgroundImg } from "../components/BackgroundImg";
+import { TextboxRow } from "../components/TextboxRow";
+import { CenterText } from "../components/CenterText";
 
 class IndexPage extends React.Component {
   render() {
@@ -53,7 +53,7 @@ class IndexPage extends React.Component {
             <Layout isIndex={true}>
               <SEO
                 keywords={[`Fertilitet`, `Din rytm`, `yoga`, `mediyoga`]}
-                title="Home"
+                title="Din rytm"
               />
               <CenterText text={data.markdownRemark.frontmatter.slogan} />
               <section className="block z-30 pb-20 bg-white">

src/templates/kontakt.js

@@ -3,8 +3,8 @@ import { graphql } from "gatsby";
 import PropTypes from "prop-types";
 
 import PageContainer from "../components/PageContainer";
-import SEO from "../components/seo";
-import Form from "../components/form";
+import SEO from "../components/SEO";
+import Form from "../components/Form";
 
 export default function Kontakt({ data }) {
   const info = data.markdownRemark.frontmatter;
@@ -16,7 +16,7 @@ export default function Kontakt({ data }) {
       />
       <PageContainer>
         <div></div>
-        <div className="font-bold text-3xl py-4">Kontakt:</div>
+        <div className="font-bold text-3xl py-4 px-8">Kontakt:</div>
         <p className="pb-8 px-8">
           <b>Malin Söderberg</b>
           <br></br>

src/templates/om.js

@@ -3,7 +3,7 @@ import { graphql } from "gatsby";
 import PropTypes from "prop-types";
 
 import PageContainer from "../components/PageContainer";
-import SEO from "../components/seo";
+import SEO from "../components/SEO";
 import CompatibleImage from "../components/CompatibleImage";
 
 export default function Om({ data }) {

src/templates/tjanst.js

@@ -2,6 +2,7 @@ import React from "react";
 import { graphql } from "gatsby";
 import PageContainer from "../components/PageContainer";
 import PropTypes from "prop-types";
+import { QuoteBlock } from "../components/QuoteBlock";
 
 export default function Tjanst({ data }) {
   const post = data.markdownRemark;
@@ -37,6 +38,7 @@ export default function Tjanst({ data }) {
         className="p-8 break-words text-sm"
         dangerouslySetInnerHTML={{ __html: post.html }}
       />
+      <QuoteBlock quote={"Det var ett värdefullt möte och jag känner mig peppad och glad."} author={"Ulrika, 34 år"}/>
     </PageContainer>
   );
 }

tailwind.config.js

@@ -4,6 +4,8 @@ module.exports = {
   theme: {
     colors: {
       green: {
+        'layover-85': tinycolor('#4A5950').setAlpha(0.85).toRgbString(),
+        'layover-75': tinycolor('#4A5950').setAlpha(0.75).toRgbString(),
         'layover-50': tinycolor('#4A5950').setAlpha(0.5).toRgbString(),
         'layover-25': tinycolor('#4A5950').setAlpha(0.25).toRgbString(),
         '600': '#4A5950',