{"version":3,"sources":["webpack:///./src/pages/contact.js"],"names":["data","useStaticQuery","console","log","name","content","className","Tag","fluid","graphCmsAsset","localFile","childImageSharp","backgroundColor","style","maxWidth","width","height","classNames","icon","faPhoneAlt","href","faEnvelope","margin","method","data-netlify","data-netlify-honeypot","action","type","value","htmlFor","id","placeholder","pattern","title","required","allGraphCmsProduct","nodes","map","node","productTitle","rows"],"mappings":"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","file":"component---src-pages-contact-js-26a6ad70d8ec17261096.js","sourcesContent":["import React from 'react';\nimport { useStaticQuery, graphql } from \"gatsby\"\nimport BackgroundImage from 'gatsby-background-image-es5';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faPhoneAlt,faEnvelope, } from '@fortawesome/free-solid-svg-icons'\nimport MapsEmbed from '../components/MapsEmbed';\nimport {Helmet} from 'react-helmet'\n\nexport default () => {\n  const data = useStaticQuery(graphql`\n    query ContactQuery {\n      graphCmsAsset(fileName: {eq: \"contactBG.jpg\"}) {\n        id\n        localFile{\n          childImageSharp {\n            fluid(maxWidth:1920,quality:90) {\n              ...GatsbyImageSharpFluid\n            }\n          }\n        }\n      }\n      allGraphCmsProduct{\n        nodes {\n          productTitle\n        }\n      }\n    }\n  `) \n\n\n\n  console.log(data)\n  return (\n    <>\n    <Helmet>\n      <title>Contact Us | Great Pine Resources</title>\n      <meta name=\"description\" content=\"Call us at (+60)3 6242 8264 or e-mail us at wecare@greatpineresources.com.my\" />\n    </Helmet>\n    <BackgroundImage\n      className=''\n      Tag=\"section\"\n      fluid={data.graphCmsAsset.localFile.childImageSharp.fluid}\n      backgroundColor={`#fff`}>\n    <div className='p-5 lg:p-20 flex justify-center w-screen'>\n      <div  className=' bg-yellow-base rounded-xl p-2 lg:p-10' style={{maxWidth:'1500px'}}>\n\n        <div className='w-full flex flex-row flex-wrap'>\n          <div className='flex flex-col lg:w-1/2 p-3'>\n            <p className='font-bold font-mont text-2xl m-1'>Locate Us</p>\n            <MapsEmbed width=\"600\" height=\"300\" classNames=\"rounded-t-lg\"/>\n            <p className='bg-white p-3 pt-5 rounded-b-lg '>\n            No. 9-1, Pusat Niaga Metro Prima,\n            Jalan Prima 9, Metro Prima,\n            Kepong, 52100, Kuala Lumpur     \n            </p>\n          </div>\n\n          <div className='flex flex-col lg:w-1/2 p-3'>\n            <div>\n              <p className='text-2xl font-bold font-mont'>Contact Us</p>\n              <span className='text-lg font-bold font-mont'>\n                <div className='flex flex-row flex-nowrap items-center my-2'>\n                  <FontAwesomeIcon icon={faPhoneAlt} className='mx-4 text-xl'/>\n                  <a href='tel:+60362428264' className='text-2xl lg:text-4xl whitespace-nowrap'>(+60) 3 6242 8264 </a>\n                </div>\n                <div className='flex flex-row flex-nowrap items-center my-2'>\n                  <FontAwesomeIcon icon={faEnvelope} className='mx-4 text-xl'/>\n                  <a href='mailto:wecare@greatpineresources.com.my'>wecare@greatpineresources.com.my</a>\n                </div>\n              </span>\n            </div>\n\n            <div className='mt-6'>\n              <p className='text-2xl font-bold font-mont'>Our Office Hours</p>\n              <div className='text-lg mx-4'>\n                <p>Mon-Fri:  9:00AM - 6:00PM</p>\n                <p>Sat-Sun & Public Holidays: Off</p>\n              </div>\n            </div>\n          </div>\n        </div>\n\n<hr style={{'border':'1px solid black', margin:'1.3rem'}}/>\n<div className='text-center pb-5'>\n  <span className=' text-xl lg:text-2xl font-bold font-mont'>Have an inquiry?</span>\n</div>\n\n<form name=\"contact\" method=\"post\" data-netlify=\"true\" data-netlify-honeypot=\"bot-field\" action='/inquirySubmitted'>   \n  <input type=\"hidden\" name=\"bot-field\" />  \n  <input type=\"hidden\" name=\"form-name\" value=\"contact\" />  \n  \n  <div className=\"flex flex-wrap -mx-1 overflow-hidden sm:-mx-1 md:-mx-2 lg:-mx-3 xl:-mx-3\">\n\n    <div className=\"my-1 px-1 w-full overflow-hidden sm:my-1 sm:px-1 sm:w-1/2 md:my-2 md:px-2 md:w-1/2 lg:my-3 lg:px-3 lg:w-1/2 xl:my-3 xl:px-3 xl:w-1/2\">\n      <label htmlFor=\"name\" >Name</label>\n      <input type=\"text\" name=\"name\" id=\"name\" placeholder='Name' className='form-input' pattern={`^[A-Za-z\\s \\@\\&\\'\\(\\)\\/\\,\\.\\:]+$`} title={`A-Z, @ & ( ) ' / , . : only`} required/>\n    </div>\n\n    <div className=\"my-1 px-1 w-full overflow-hidden sm:my-1 sm:px-1 sm:w-1/2 md:my-2 md:px-2 md:w-1/2 lg:my-3 lg:px-3 lg:w-1/2 xl:my-3 xl:px-3 xl:w-1/2\">\n      <label htmlFor=\"email\" >E-mail</label>\n      <input type=\"email\" name=\"email\" id=\"email\" placeholder='E-mail' className='form-input' title='Please enter a valid email' required/>\n    </div>\n\n    <div className=\"my-1 px-1 w-full overflow-hidden sm:my-1 sm:px-1 sm:w-1/2 md:my-2 md:px-2 md:w-1/2 lg:my-3 lg:px-3 lg:w-1/2 xl:my-3 xl:px-3 xl:w-1/2\">\n      <label htmlFor=\"phone\" >Phone Number</label>\n      <input type=\"text\" name=\"phone\" id=\"phone\" placeholder='Phone number' className='form-input' pattern={`^[0-9]*$`} title='Invalid contact number. Digits only.'required/>\n    </div>\n\n    <div className=\"my-1 px-1 w-full overflow-hidden sm:my-1 sm:px-1 sm:w-1/2 md:my-2 md:px-2 md:w-1/2 lg:my-3 lg:px-3 lg:w-1/2 xl:my-3 xl:px-3 xl:w-1/2\">\n      <label htmlFor=\"company\" >Company Name</label>\n      <input type=\"text\" name=\"company\" id=\"company\" placeholder='Company Name' className='form-input' pattern={`^[A-Za-z\\s \\@\\&\\'\\(\\)\\/\\,\\.\\:]+$`} title={`A-Z, @ & ( ) ' / , . : only`}/>\n    </div>\n  </div>\n\n  <div className=\"my-3\">\n    <label htmlFor=\"inquiryType\" >Inquiry Type</label>\n    <select name=\"inquiryType\" id=\"inquiryType\" className='form-input mt-2' required>\n          {\n            data.allGraphCmsProduct.nodes.map(\n              node => <option value={node.productTitle}>{node.productTitle}</option>\n              )\n          }\n    </select>\n  </div>\n  <div  className=\"my-3\">\n    <label htmlFor=\"subject\" >Subject</label>\n    <input type=\"text\" name=\"subject\" id=\"subject\" placeholder='Subject...' className='form-input mt-2'required/>\n  </div>\n  <div  className=\"my-3\">\n    <label htmlFor=\"content\">Your Inquiry</label>\n    <textarea name=\"content\" id=\"content\" placeholder='Your inquiry here...'className='form-input mt-2' rows=\"8\"required/>\n  </div>\n\n  <div className='w-full flex flex-row justify-center'>\n  <input type=\"submit\" value=\"Send Message\" className=\"rounded-lg p-5 m-2 bg-white text-black\" />\n  <input type=\"reset\" value=\"Clear\" className=\"rounded-lg p-5 m-2 bg-red-500 text-white\"/>\n  </div>\n</form>\n</div>\n</div>\n    </BackgroundImage>\n    \n\n\n\n    </>\n  )\n}"],"sourceRoot":""}