New style for magprog

src/components/magprog/capabilities/Capabilities.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import {Link} from 'gatsby';
+
+import CapabilityList from './CapabilityList';
+
+const Capabilities = () =>
+  <section id="two" className="wrapper style3 fade-up">
+    <div className="inner">
+      <h2>What we do</h2>
+      <p>
+        Phasellus convallis elit id ullamcorper pulvinar. Duis aliquam
+        turpis mauris, eu ultricies erat malesuada quis. Aliquam dapibus,
+        lacus eget hendrerit bibendum, urna est aliquam sem, sit amet
+        imperdiet est velit quis lorem.
+      </p>
+      <div className="features">
+        <CapabilityList />
+      </div>
+      <ul className="actions">
+        <li>
+          <Link className="button" to="/generic">
+            Learn more
+          </Link>
+        </li>
+      </ul>
+    </div>
+  </section>
+
+export default Capabilities;

src/components/magprog/capabilities/Capability.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+const Capability = ({ heading, description, iconClass }) =>
+  <section>
+    <span className={`icon major ${iconClass}`} />
+    <h3>{heading}</h3>
+    <p>{description}</p>
+  </section>
+
+export default Capability;

src/components/magprog/capabilities/CapabilityList.js

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import Capability from './Capability';
+
+const CapabilityList = () => {
+  const CAPABILITIES = [
+    {
+      heading: 'Lorem ipsum amet',
+      description: 'Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.',
+      iconClass: 'fa-code',
+    },
+    {
+      heading: 'Morem ipsum amet',
+      description: 'Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.',
+      iconClass: 'fa-lock',
+    },
+    {
+      heading: 'Dorem ipsum amet',
+      description: 'Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.',
+      iconClass: 'fa-cog',
+    },
+    {
+      heading: 'Forem ipsum amet',
+      description: 'Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.',
+      iconClass: 'fa-desktop',
+    },
+    {
+      heading: 'Corem ipsum amet',
+      description: 'Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.',
+      iconClass: 'fa-chain',
+    },
+    {
+      heading: 'Norem ipsum amet',
+      description: 'Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.',
+      iconClass: 'fa-diamond',
+    },
+  ]
+
+  const [capabilities] = React.useState(CAPABILITIES);
+
+  return (
+    <>
+      {capabilities.map((capability) => <Capability key={capability.heading} {...capability} />)}
+    </>
+  )
+}
+
+export default CapabilityList;

src/components/magprog/common/MagProgLayout.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Helmet from 'react-helmet';
+import {injectIntl, useIntl} from "react-intl";
+import SEO from "../../seo";
+import NpmNavbar from "../../navBar";
+import {withPrefix} from "gatsby";
+
+import "../../../styles/layout.css"
+import "../../../styles/main.css"
+import "katex/dist/katex.min.css"
+
+const MagProgLayout = ({children}) => {
+    const intl = useIntl();
+    const lang = intl.locale;
+    return (
+        <>
+            <SEO lang={lang} title={intl.formatMessage({id: "title"})}/>
+            <Helmet>
+                <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
+                <link rel="stylesheet" href={withPrefix("magprog/css/main.css")}/>
+                {/*<noscript>{*/}
+                {/*    <link rel="stylesheet" href={withPrefix("magprog/css/noscript.css")}/>*/}
+                {/*</noscript>*/}
+            </Helmet>
+            <NpmNavbar/>
+            <div className="container-fluid">
+                <main>{children}</main>
+            </div>
+            {/*<NpmFooter/>*/}
+        </>
+    )
+}
+
+MagProgLayout.propTypes = {
+    children: PropTypes.node.isRequired,
+}
+
+export default injectIntl(MagProgLayout)
+

src/components/magprog/common/Scroll.js

@@ -0,0 +1,71 @@
+import smoothscroll from 'smoothscroll-polyfill';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Element = props => {
+  return props.children;
+};
+
+class Scroll extends React.Component {
+  static propTypes = {
+    type: PropTypes.string,
+    element: PropTypes.string,
+    offset: PropTypes.number,
+    timeout: PropTypes.number,
+    children: PropTypes.node.isRequired,
+  };
+  constructor() {
+    super();
+    this.handleClick = this.handleClick.bind(this);
+  }
+  componentDidMount() {
+    smoothscroll.polyfill();
+  }
+  handleClick(e) {
+    e.preventDefault();
+    let elem = 0;
+    let scroll = true;
+    const { type, element, offset, timeout } = this.props;
+    if (type && element) {
+      switch (type) {
+        case 'class':
+          elem = document.getElementsByClassName(element)[0];
+          scroll = !!elem;
+          break;
+        case 'id':
+          elem = document.getElementById(element);
+          scroll = !!elem;
+          break;
+        default:
+      }
+    }
+    scroll
+      ? this.scrollTo(elem, offset, timeout)
+      : console.log(`Element not found: ${element}`); // eslint-disable-line
+  }
+  scrollTo(element, offSet = 0, timeout = null) {
+    const elemPos = element
+      ? element.getBoundingClientRect().top + window.pageYOffset
+      : 0;
+    if (timeout) {
+      setTimeout(() => {
+        window.scroll({ top: elemPos + offSet, left: 0, behavior: 'smooth' });
+      }, timeout);
+    } else {
+      window.scroll({ top: elemPos + offSet, left: 0, behavior: 'smooth' });
+    }
+  }
+  render() {
+    return (
+      <Element>
+        {typeof this.props.children === 'object' ? (
+          React.cloneElement(this.props.children, { onClick: this.handleClick })
+        ) : (
+          <span onClick={this.handleClick}>{this.props.children}</span>
+        )}
+      </Element>
+    );
+  }
+}
+
+export default Scroll;

src/components/magprog/features/Feature.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import {Link} from 'gatsby';
+
+const Feature = ({href, image, heading, description, to}) =>
+  <section>
+    <a href={href} className="image" alt="image">
+      <img src={image} alt="" data-position="center center" />
+    </a>
+    <div className="content">
+      <div className="inner">
+        <h2>{heading}</h2>
+        <p>{description}</p>
+        <ul className="actions">
+          <li>
+            <Link className="button" to={to.href}>
+              {to.label}
+            </Link>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </section>
+
+export default Feature;

src/components/magprog/features/Features.js

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import pic1 from '../../../../../../temp/gatsby-starter-hyperspace/src/images/pic01.jpg';
+import pic2 from '../../../../../../temp/gatsby-starter-hyperspace/src/images/pic02.jpg';
+import pic3 from '../../../../../../temp/gatsby-starter-hyperspace/src/images/pic03.jpg';
+
+import Feature from './Feature';
+
+const Features = () => {
+  const FEATURES = [
+    {
+      href: '/#',
+      image: pic1,
+      heading: 'Sed ipsum dolor',
+      description: 'Phasellus convallis elit id ullamcorper pulvinar. Duis aliquam turpis mauris, eu ultricies erat malesuada quis. Aliquam dapibus.',
+      to: {
+        href: '/generic',
+        label: 'Learn more',
+      },
+    },
+    {
+      href: '/#',
+      image: pic2,
+      heading: 'Feugiat consequat',
+      description: 'Phasellus convallis elit id ullamcorper pulvinar. Duis aliquam turpis mauris, eu ultricies erat malesuada quis. Aliquam dapibus.',
+      to: {
+        href: '/generic',
+        label: 'Learn more',
+      },
+    },
+    {
+      href: '/#',
+      image: pic3,
+      heading: 'Ultricies aliquam',
+      description: 'Phasellus convallis elit id ullamcorper pulvinar. Duis aliquam turpis mauris, eu ultricies erat malesuada quis. Aliquam dapibus.',
+      to: {
+        href: '/generic',
+        label: 'Learn more',
+      },
+    },
+  ];
+
+  const [features] = React.useState(FEATURES);
+
+  return (
+    <section id="one" className="wrapper style2 spotlights">
+       {features.map(feature => <Feature key={feature.heading} {...feature} />)}
+    </section>
+  );
+}
+
+export default Features;

src/pages/magprog/generic.js

@@ -1,39 +1,38 @@
 import React from 'react';
 
-import NpmLayout from "../../components/layout";
-
+import MagProgLayout from "../../components/magprog/common/MagProgLayout";
 
 const SecondPage = () => (
-  <NpmLayout>
-    <div id="wrapper">
-      <section id="main" className="wrapper">
-        <div className="inner">
-          <h1 className="major">A Generic Page</h1>
-          <span className="image fit">
-            <img src="images/pic04.jpg" alt="" />
+    <MagProgLayout>
+        <div id="wrapper">
+            <section id="main" className="wrapper">
+                <div className="inner">
+                    <h1 className="major">A Generic Page</h1>
+                    <span className="image fit">
+            <img src="images/pic04.jpg" alt=""/>
           </span>
-          <p>
-            Donec eget ex magna. Interdum et malesuada fames ac ante ipsum
-            primis in faucibus. Pellentesque venenatis dolor imperdiet dolor
-            mattis sagittis. Praesent rutrum sem diam, vitae egestas enim auctor
-            sit amet. Pellentesque leo mauris, consectetur id ipsum sit amet,
-            fergiat. Pellentesque in mi eu massa lacinia malesuada et a elit.
-            Donec urna ex, lacinia in purus ac, pretium pulvinar mauris.
-            Curabitur sapien risus, commodo eget turpis at, elementum convallis
-            elit. Pellentesque enim turpis, hendrerit tristique.
-          </p>
-          <p>
-            Interdum et malesuada fames ac ante ipsum primis in faucibus.
-            Pellentesque venenatis dolor imperdiet dolor mattis sagittis.
-            Praesent rutrum sem diam, vitae egestas enim auctor sit amet.
-            Pellentesque leo mauris, consectetur id ipsum sit amet, fersapien
-            risus, commodo eget turpis at, elementum convallis elit.
-            Pellentesque enim turpis, hendrerit tristique lorem ipsum dolor.
-          </p>
+                    <p>
+                        Donec eget ex magna. Interdum et malesuada fames ac ante ipsum
+                        primis in faucibus. Pellentesque venenatis dolor imperdiet dolor
+                        mattis sagittis. Praesent rutrum sem diam, vitae egestas enim auctor
+                        sit amet. Pellentesque leo mauris, consectetur id ipsum sit amet,
+                        fergiat. Pellentesque in mi eu massa lacinia malesuada et a elit.
+                        Donec urna ex, lacinia in purus ac, pretium pulvinar mauris.
+                        Curabitur sapien risus, commodo eget turpis at, elementum convallis
+                        elit. Pellentesque enim turpis, hendrerit tristique.
+                    </p>
+                    <p>
+                        Interdum et malesuada fames ac ante ipsum primis in faucibus.
+                        Pellentesque venenatis dolor imperdiet dolor mattis sagittis.
+                        Praesent rutrum sem diam, vitae egestas enim auctor sit amet.
+                        Pellentesque leo mauris, consectetur id ipsum sit amet, fersapien
+                        risus, commodo eget turpis at, elementum convallis elit.
+                        Pellentesque enim turpis, hendrerit tristique lorem ipsum dolor.
+                    </p>
+                </div>
+            </section>
         </div>
-      </section>
-    </div>
-  </NpmLayout>
+    </MagProgLayout>
 );
 
 export default SecondPage;

src/pages/magprog/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import {injectIntl} from "react-intl";
 import {graphql} from "gatsby";
 
-import MagProgLayout from '../../components/magprog/common/layout';
+import MagProgLayout from '../../components/magprog/common/MagProgLayout';
 import Parser from "html-react-parser";
 import Scrollspy from "react-scrollspy";
 import MagProgSection from "../../components/magprog/common/MagProgSection";

src/styles/footer.css

@@ -6,7 +6,7 @@ footer {
     padding: 2px;
     text-align: center;
     color: rgb(108, 117, 125);
-    font-family: Segoe UI;
+    font-family: Segoe UI, serif;
     font-size: 20px;
     text-decoration: none solid rgb(108, 117, 125);
 }

src/styles/main.css

@@ -87,11 +87,11 @@ h2 a:visited {
     font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
     padding: 60px 40px 10px 40px;
-    margin-bottom: 0px;
+    margin-bottom: 0;
     background-color: rgb(247, 247, 247);
     border: 1.5px solid rgb(219, 219, 219);
     border-bottom: 0;
-    border-radius: 5px 5px 0px 0px;
+    border-radius: 5px 5px 0 0;
 }
 
 .aboutButton {
@@ -152,13 +152,13 @@ h2.title {
 span#date {
     color: white;
     font-size: 20px;
-    opacity: 0, 7;
+    opacity: 0.7;
     background-color: rgb(209, 121, 121);
     padding: 5px;
     border: 1px solid #8f4f4f;
     position: absolute;
-    top: 0px;
-    right: 0px;
+    top: 0;
+    right: 0;
 }
 
 p {
@@ -195,7 +195,7 @@ ul {
 }
 
 p#button {
-    margin-bottom: 0px;
+    margin-bottom: 0;
 }
 
 p#lead {