Merge pull request #80 from kalwalt/feature-orizontal-menu

Feature orizontal menu

package.json

@@ -49,13 +49,14 @@
     "node-sass": "^4.11.0",
     "path": "^0.12.7",
     "react": "^16.3.1",
-    "react-dom": "^16.3.1",
+    "@hot-loader/react-dom": "^16.3.1",
     "react-helmet": "^5.2.0",
     "react-icon-base": "^2.1.2",
     "react-icons": "^3.5.0",
     "react-image-gallery": "^0.8.14",
     "react-intl": "^2.7.2",
     "react-typography": "^0.16.3",
+    "react-wow": "^1.0.0",
     "slash": "^2.0.0",
     "slug": "^1.0.0",
     "style-loader": "^0.23.1",

src/components/Banner.js

@@ -0,0 +1,46 @@
+import React from "react"
+import ReactWOW from 'react-wow'
+import * as PropTypes from "prop-types"
+import { FaAward } from 'react-icons/fa'
+import PreviewImage from '../components/PreviewCompatibleImage'
+
+const Banner = ({main, mainpitch}) =>(
+
+  <section className="section banner">
+  <ReactWOW animation='bounceInUp'>
+    <div className="container">
+       <div className="columns is-size-5-mobile is-size-5-tablet is-size-4-widescreen">
+           <div className="column is-three-fifths is-offset-one-fifth"
+                style={{
+                  backgroundImage: 'linear-gradient(rgb(255, 68, 0), yellow)',
+                  borderRadius: '4px',
+                }}>
+               <PreviewImage imageInfo={main}/>
+             <div className="section">
+             <div className="tile is-parent">
+               <div className="tile is-child notification is-success">
+                 <div className="content">
+                  <FaAward color="magenta" className="icon is-large"/>
+                     <h3 className="title is-2">
+                       {mainpitch.title}
+                     </h3>
+                     <p className="subtitle is-4">
+                       {mainpitch.description}
+                     </p>
+                   </div>
+                 </div>
+               </div>
+             </div>
+           </div>
+         </div>
+       </div>
+     </ReactWOW>
+   </section>
+)
+
+Banner.propTypes = {
+ main: PropTypes.object,
+ mainpitch: PropTypes.object,
+}
+
+export default Banner

src/components/CardSlide.js

@@ -0,0 +1,71 @@
+import React from 'react'
+import ReactWOW from 'react-wow'
+import Img from 'gatsby-image'
+import * as PropTypes from "prop-types"
+
+const CardImageSlide = ({ imageInfo }) => {
+  const { alt = '', childImageSharp, image } = imageInfo
+  const imageStyle = { borderRadius: '50%' }
+
+  if (!!image && !!image.childImageSharp) {
+    return (
+        <Img style={imageStyle} fluid={image.childImageSharp.fluid} alt={alt} />
+    )
+  }
+
+  if (!!childImageSharp) {
+    return (
+        <Img style={imageStyle} fluid={childImageSharp.fluid} alt={alt} />
+    )
+  }
+
+  if (!!image && typeof image === 'string')
+    return <img style={imageStyle} src={image} alt={alt} />
+  return null
+}
+
+CardImageSlide.propTypes = {
+  imageInfo: PropTypes.shape({
+    alt: PropTypes.string,
+    childImageSharp: PropTypes.object,
+    image: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired,
+  }).isRequired,
+}
+
+class CardSlide extends React.Component {
+
+  render(){
+    const props = this.props;
+    const imageInfo = props.imageInfo;
+    const name = props.imageInfo.name;
+    const description = props.imageInfo.description;
+    const website = props.imageInfo.website;
+
+    return (
+    <div className="section card-slide">
+      <div className="card">
+        <div className="card-content">
+          <div className="media">
+            <div className="media-left">
+              <figure className="image is-128x128">
+                <CardImageSlide imageInfo={imageInfo}/>
+              </figure>
+            </div>
+              <div className="media-content">
+                <ReactWOW animation='pulse'>
+                  <p className="title is-4">{name}</p>
+                </ReactWOW>
+                <ReactWOW delay='1s' animation='shake'>
+                  <p className="title is-6">{description}</p>
+                </ReactWOW>
+                <br/>
+                <a href={"https://" + website}><i className="is-family-code">{website}</i></a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+  )}
+}
+
+export default CardSlide

src/components/IconMenu.js

@@ -0,0 +1,100 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FaCircle, FaPaintBrush, FaGavel, FaBolt, FaHandPointer } from 'react-icons/fa';
+import { FormattedMessage } from 'react-intl';
+
+const IconMenu = class extends React.Component {
+
+  componentDidMount() {
+    // Get all "icon" elements
+   const sectionMenu = Array.prototype.slice.call(document.querySelectorAll('.icon'), 0);
+    // Check if there are any icon links
+   if (sectionMenu.length > 0) {
+
+     // Add a mouseenter event on each of them
+     sectionMenu.forEach( el => {
+       el.addEventListener('mouseenter', () => {
+         el.classList.toggle('shake');
+       }, true);
+     });
+   }
+
+  }
+  render() {
+    const firstLink = this.props.firstLink;
+    const secondLink = this.props.secondLink;
+    const thirdLink = this.props.thirdLink;
+    const fourthLink = this.props.fourthLink;
+  return(
+    <div className="section box">
+      <div className="section">
+        <h3 className="title has-text-centered">
+          <FormattedMessage id="menu-icon-message"/>
+        </h3>
+      </div>
+      <div className="box">
+      <div className="content">
+        <h4 className="subtitle has-text-centered">
+          <FormattedMessage id="menu-icon-subtitle"/>
+        </h4>
+      </div>
+    <div className="columns is-4 is-mobile is-multiline is-centered">
+      <a className="column is-narrow has-text-centered" href={firstLink}>
+        <span className="fa icon is-large fa-2x fa-stack animated">
+          <FaCircle className="fa fa-stack-2x"/>
+          <FaPaintBrush className="fa fa-stack-1x fa-inverse"/>
+        </span>
+      <div className="section">
+        <h4 className="title has-text-centered">
+          <FormattedMessage id="menu-icon-painting"/>
+        </h4>
+      </div>
+      </a>
+      <a className="column is-narrow has-text-centered" href={secondLink}>
+      <span className="fa icon is-large fa-2x fa-stack animated">
+        <FaCircle className="fa fa-stack-2x"/>
+        <FaGavel className="fa fa-stack-1x fa-inverse"/>
+      </span>
+        <div className="section">
+          <h4 className="title has-text-centered">
+            <FormattedMessage id="menu-icon-sculpture"/>
+          </h4>
+        </div>
+      </a>
+      <a className="column is-narrow has-text-centered" href={thirdLink}>
+      <span className="fa icon is-large fa-2x fa-stack animated">
+        <FaCircle className="fa fa-stack-2x"/>
+        <FaBolt className="fa fa-stack-1x fa-inverse"/>
+      </span>
+        <div className="section">
+          <h4 className="title has-text-centered">
+            <FormattedMessage id="menu-icon-performance"/>
+          </h4>
+        </div>
+      </a>
+      <a className="column is-narrow has-text-centered" href={fourthLink}>
+      <span className="fa icon is-large fa-2x fa-stack animated">
+        <FaCircle className="fa fa-stack-2x"/>
+        <FaHandPointer className="fa fa-stack-1x fa-inverse"/>
+      </span>
+        <div className="section">
+          <h4 className="title has-text-centered">
+            <FormattedMessage id="menu-icon-interactivity"/>
+          </h4>
+        </div>
+      </a>
+      </div>
+     </div>
+     </div>
+  )
+  }
+};
+
+IconMenu.propTypes = {
+  firstLink: PropTypes.string,
+  secondLink: PropTypes.string,
+  thirdLink: PropTypes.string,
+  fourthLink: PropTypes.string,
+}
+
+export default IconMenu;

src/components/Testimonials.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { v4 } from 'uuid'
+
+const Testimonials = ({ testimonials }) => (
+  <div className="content">
+    {testimonials.map(testimonial => (
+      <article key={v4()} className="message is-medium">
+        <div style={{ paddingTop: "10%", paddingBottom: "10%"}} className="message-body testimonials">
+          {testimonial.quote}
+          <br />
+          <cite> – {testimonial.author}</cite>
+        </div>
+      </article>
+    ))}
+  </div>
+)
+
+Testimonials.propTypes = {
+  testimonials: PropTypes.arrayOf(
+    PropTypes.shape({
+      quote: PropTypes.string,
+      author: PropTypes.string,
+    })
+  ),
+}
+
+export default Testimonials

src/components/all.sass

@@ -1,5 +1,6 @@
 @import "~bulma/sass/utilities/initial-variables"
 @import "~animate.css/animate.css"
+@import "~font-awesome/css/font-awesome.css"
 
 // Config vars
 // Kalidi logo brand color: #FD461E
@@ -113,4 +114,31 @@ footer.footer
   margin-left: .5em
   margin-right: .5em
 
+.menu-icon
+  padding: 2em
+.menu-icon ul li a
+  padding: .5em .5em .5em .5em
+  margin: .5em
+  //width: 1em
+  //height: 1em
+  vertical-align: middle
+  display: inline
+  background-color: red
+  border-radius: 5px
+  position: relative
+
+.banner
+  margin-top: 10%
+  margin-bottom: 10%
+
+.testimonials
+  margin-top: 10%
+  margin-bottom: 10%
+
+.card-slide
+  margin-top: 10%
+  margin-bottom: 10%
+  .card-content
+    padding: 5%
+
 @import "~bulma"

src/data/messages/en.js

@@ -15,4 +15,10 @@ module.exports = {
   'not_found': "404 - Page Not Found",
   '404': "You are arrived to an unvailable page or you have missed the path...",
   'copyright': "2019, KAKI - All rights reserved.",
+  'menu-icon-message': "Choose a section",
+  'menu-icon-subtitle': "Artworks sections",
+  'menu-icon-painting': "Painting",
+  'menu-icon-sculpture': "Sculpture",
+  'menu-icon-performance': "Performance",
+  'menu-icon-interactivity': "Interactivity",
 };

src/data/messages/it.js

@@ -15,4 +15,10 @@ module.exports = {
   'not_found': "404 - Pagina Non Trovata",
   '404': "Sei giunto ad una pagina che non esiste più o hai sbagliato il percorso...",
   'copyright': "2019, KAKI - Tutti i diritti riservati.",
+  'menu-icon-message': "Scegli una sezione",
+  'menu-icon-subtitle': "Sezione opere d'arte",
+  'menu-icon-painting': "Pittura",
+  'menu-icon-sculpture': "Scultura",
+  'menu-icon-performance': "Performance",
+  'menu-icon-interactivity': "Interattività",
 };