{"version":3,"sources":["components/header/Title.js","components/header/Nav.js","components/header/Arrow.js","components/header/BackgroundImage.js","components/header/Header.js","components/main/About.js","data/clients.js","components/main/WorkCard.js","components/main/Work.js","components/main/BackToTop.js","components/main/Main.js","components/footer/Contact.js","components/footer/Footer.js","App.js","index.js"],"names":["Title","className","Nav","to","spy","smooth","offset","duration","Arrow","size","color","BackgroundImage","mobileMode","Header","id","About","href","target","rel","clients","img","heading","text","url","WorkCard","clientObject","src","alt","Work","map","client","BackToTop","Main","useState","upArrow","setUpArrow","showArrow","scrollHeight","window","pageYOffset","useEffect","addEventListener","removeEventListener","Contact","Footer","App","setMobileMode","showNav","innerWidth","ReactDOM","render","document","getElementById"],"mappings":"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","file":"static/js/main.3b83a1cc.chunk.js","sourcesContent":["import React from 'react';\nimport './Title.css';\n\nfunction Title() {\n  return (\n    <div className=\"title-cont\">\n      <h1>Genial</h1>\n      <h2>Website Developers</h2>\n    </div>\n  );\n}\n\nexport default Title;\n","import React from 'react';\nimport './Nav.css';\nimport { Link } from 'react-scroll';\n\nfunction Nav() {\n  return (\n    <nav>\n      <ul>\n        <li>\n          <Link\n            to=\"about\"\n            spy={true}\n            smooth={true}\n            offset={0}\n            duration={500}\n          >\n            About\n          </Link>\n        </li>\n        <li>\n          <Link\n            to=\"work\"\n            spy={true}\n            smooth={true}\n            offset={-10}\n            duration={500}\n          >\n            Work\n          </Link>\n        </li>\n        <li>\n          <Link\n            to=\"contact\"\n            spy={true}\n            smooth={true}\n            offset={0}\n            duration={500}\n          >\n            Contact\n          </Link>\n        </li>\n      </ul>\n    </nav>\n  );\n}\n\nexport default Nav;\n","import React from 'react';\nimport { BsChevronDown } from 'react-icons/bs';\nimport { Link } from 'react-scroll';\nimport './Arrow.css';\n\nfunction Arrow() {\n  return (\n    <Link\n      to=\"main\"\n      spy={true}\n      smooth={true}\n      offset={0}\n      duration={500}\n    >\n      <BsChevronDown size={80} color=\"white\" className=\"arrow\" />\n    </Link >\n  );\n}\n\nexport default Arrow;\n","import './BackgroundImage.css'\nimport Title from './Title';\nimport Nav from './Nav';\nimport Arrow from './Arrow';\n\nfunction BackgroundImage({ mobileMode }) {\n  return (\n    <div className=\"bg-image\">\n      <div className=\"empty-div\"></div>\n      <div className=\"app-cont\">\n        <Title />\n        {mobileMode ? <Nav /> : null}\n        <Arrow />\n      </div>\n    </div>\n  );\n}\n\nexport default BackgroundImage;\n","import React from 'react';\nimport BackgroundImage from './BackgroundImage';\n\nfunction Header({ mobileMode }) {\n  return (\n    <header id=\"top\">\n      <BackgroundImage mobileMode={mobileMode} />\n    </header>\n  );\n}\n\nexport default Header;\n","import React from 'react';\nimport './About.css';\n\nfunction About() {\n  return (\n    <div className=\"about-cont\" id=\"about\">\n      <h3>About</h3>\n      <p>Genial have been developing websites for local businesses and non-profit organisations since 1998.</p>\n      <br />\n      <p>In more recent years we have moved our main focus to running an online store in partnership with\n      one of our clients while still updating a small number of websites for some of our long established\ncustomers.</p>\n      <br />\n      <p>Over the years our emphasis has been on developing websites with high quality images which are procured through our own photography work and digital editing. As a result, we are now in the process of diversifying into photography. Please visit <a href=\"https://www.genialphotography.co.uk\" target='_blank' rel=\"noreferrer\">www.genialphotography.co.uk</a> for more information.</p>\n      <br />\n    </div>\n  );\n}\n\nexport default About;\n","const clients = [\n  {\n    id: 1,\n    img: '/images/clients-gallery/genial-photography.jpg',\n    heading: \"Genial Photography\",\n    text: \"Our standalone website showcasing some of our photography work\",\n    url: \"https://www.genialphotography.co.uk/\"\n  },\n  {\n    id: 2,\n    img: '/images/clients-gallery/motorcycle-planet.jpg',\n    heading: \"Motorcycle Planet\",\n    text: \"An online store we maintain, update and run in partnership with a client\",\n    url: \"https://www.motorcycleplanet.co.uk/\"\n  },\n  {\n    id: 3,\n    img: '/images/clients-gallery/marylebone-cars.jpg',\n    heading: \"Marylebone Cars\",\n    text: \"Used car dealership based in central London specialising in quality low mileage vehicles\",\n    url: \"https://www.marylebonecarcentre.co.uk/\"\n  },\n  {\n    id: 4,\n    img: '/images/clients-gallery/hamilton-cars.jpg',\n    heading: \"Hamilton Cars\",\n    text: \"Exporters of quality used cars based in Potters Bar – again a longstanding client of Genial\",\n    url: \"https://www.hamiltoncars.co.uk/\"\n  },\n  {\n    id: 5,\n    img: '/images/clients-gallery/john-warren-cars.jpg',\n    heading: \"John Warren Cars\",\n    text: \"A BMW Specialist based in Stevenage and Aylesbury – clients of Genial since 1998\",\n    url: \"https://www.independentbmw.co.uk/\"\n  },\n  {\n    id: 6,\n    img: '/images/clients-gallery/1st-line-motorcycles.jpg',\n    heading: \"1st Line Motorcycles\",\n    text: \"A Honda main dealer - we have been looking after their web presence since 1998\",\n    url: \"https://www.1stlinemotorcycles.co.uk/\"\n  }\n];\n\nexport default clients;","import React from 'react';\nimport './WorkCard.css';\n\nfunction WorkCard({ clientObject }) {\n  const { img, heading, text, url } = clientObject;\n  return (\n\n    <div className=\"grid\">\n      <figure className=\"effect\">\n        <img src={img} alt={heading}></img>\n        <a href={url} target='_blank' rel=\"noreferrer\"><div className=\"overlay\"></div></a>\n        <figcaption>\n          <h5>{heading}</h5>\n          <p>{text}</p>\n          <a href={url} target='_blank' rel=\"noreferrer\">View more</a>\n        </figcaption>\n      </figure>\n    </div>\n\n  );\n}\n\nexport default WorkCard;\n","import React from 'react';\nimport './Work.css';\nimport clients from '../../data/clients';\nimport WorkCard from './WorkCard.js';\n\nfunction Work() {\n  return (\n    <div className=\"work-cont\" id=\"work\">\n      <h3>Work</h3>\n      <p>At present we are not taking on any new clients.\nNonetheless, below is a selection of websites Genial are still updating and/or maintaining:</p>\n      <div className=\"work-gallery-cont\">\n        {clients.map((client) => {\n          return <WorkCard key={client.id} clientObject={client} />\n        })}\n      </div>\n    </div>\n  );\n}\n\nexport default Work;\n","import React from 'react';\nimport './BackToTop.css';\nimport { IoIosArrowDropupCircle } from 'react-icons/io';\nimport { Link } from 'react-scroll';\n\nfunction BackToTop() {\n  return (\n    <Link\n      to=\"top\"\n      spy={true}\n      smooth={true}\n      offset={0}\n      duration={500}\n    >\n      <IoIosArrowDropupCircle className=\"top\" size={52} color=\"#C74B02\" />\n    </Link>\n  );\n}\n\nexport default BackToTop;\n","import React, { useState, useEffect } from 'react';\nimport About from './About';\nimport Work from './Work';\nimport './Main.css';\nimport BackToTop from './BackToTop';\n\nfunction Main() {\n\n  const [upArrow, setUpArrow] = useState(false);\n\n  const showArrow = () => {\n    const scrollHeight = window.pageYOffset;\n    if (scrollHeight > 400) {\n      setUpArrow(true)\n    } else {\n      setUpArrow(false)\n    }\n  };\n\n  useEffect(() => {\n    showArrow();\n    window.addEventListener('scroll', showArrow)\n\n    return () => {\n      window.removeEventListener('scroll', showArrow)\n    }\n  }, [])\n\n  return (\n    <main id=\"main\">\n      <div className=\"app-cont\">\n        <About />\n        <Work />\n        {upArrow ? <BackToTop /> : null}\n      </div>\n    </main>\n  )\n}\n\nexport default Main;\n","import React from 'react';\nimport './Contact.css';\nimport { FaPhoneAlt, FaRegEnvelope } from 'react-icons/fa';\n\nfunction Contact() {\n  return (\n    <div className=\"app-cont\">\n      <div className=\"contact-cont\" id=\"contact\">\n        <h3>Contact</h3>\n        <div className=\"contact-details-cont\">\n          <div className=\"address-cont\">\n            <p>Genial</p>\n            <p>2 Rosslyn Avenue</p>\n            <p>East Barnet, Herts</p>\n            <p>EN4 8DH</p>\n          </div>\n          <div className=\"enquiry-cont\">\n            <p>For initial enquiries ask for Jonathan Mears</p>\n            <div className=\"phone-cont\">\n              <a href=\"tel:02083617400\"><FaPhoneAlt size={20} className=\"phone icon\" />020 8361 7400</a>\n            </div>\n            <div className=\"email-cont\">\n              <a href=\"mailto:info@genial.co.uk\"><FaRegEnvelope size={20} className=\"email icon\" />info@genial.co.uk</a>\n            </div>\n          </div>\n        </div>\n      </div>\n      <p className=\"credit\">Website developed by <a href=\"https://www.tom-mears.co.uk/\" target='_blank' rel=\"noreferrer\">Tom Mears</a><span> &copy;</span></p>\n    </div>\n  );\n}\n\nexport default Contact;\n","import React from 'react';\nimport './Footer.css';\nimport Contact from './Contact';\n\nfunction Footer() {\n  return (\n    <footer>\n      <Contact />\n    </footer>\n  );\n}\n\nexport default Footer;\n","import React, { useState, useEffect } from 'react';\nimport './App.css';\nimport Header from './components/header/Header';\nimport Main from './components/main/Main';\nimport Footer from './components/footer/Footer';\n\nfunction App() {\n\n  const [mobileMode, setMobileMode] = useState(true);\n\n  const showNav = () => {\n    if (window.innerWidth >= 731) {\n      setMobileMode(false)\n    } else {\n      setMobileMode(true)\n    }\n  };\n\n  useEffect(() => {\n    showNav();\n    window.addEventListener('resize', showNav)\n\n    return () => {\n      window.removeEventListener('resize', showNav)\n    }\n  }, [])\n\n  return (\n    <>\n      <Header mobileMode={mobileMode} />\n      <Main />\n      <Footer />\n    </>\n  );\n}\n\nexport default App;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\n\n\nReactDOM.render(\n  <App />,\n  document.getElementById('root')\n);\n\n\n"],"sourceRoot":""}