{"version":3,"file":"component---src-pages-who-are-we-js-41558038c1f35bfc1634.js","mappings":"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","sources":["webpack://tn-home-improvements/./src/components/ButtonWhite.js","webpack://tn-home-improvements/./src/components/popup.js","webpack://tn-home-improvements/./src/pages/who-are-we.js"],"sourcesContent":["import * as React from \"react\"\n\n\n\nconst ButtonWhite = ({isSmall, isWhite, isPopUpEnabled, setIsPopupVisible, label, isLink, link}) =>{\n\n  const Button = () =>(\n    <button  onClick={() => isPopUpEnabled && setIsPopupVisible(true)} className={`${isWhite ? 'text-white' : 'text-gold-100'} ${isSmall ? 'px-4 py-2' : 'px-8 py-4'} block text-lg font-semibold border border-solid border-darkNavy text--uppercase rounded-4xl button-yellow button-white bg-navy border-1 font-body hover:bg-slate-600/50`} >{ label }</button>\n  )\n\n  const Link = () =>(\n    <a href={link} className={`${isWhite ? 'text-white' : 'text-gold-100'} ${isSmall ? 'px-8 py-2' : 'px-8 py-4'} block text-lg font-semibold border border-solid border-darkNavy text--uppercase rounded-4xl button-yellow button-white bg-navy border-1 font-body hover:bg-slate-600/50`} >{ label }</a>\n  )\n\n  return isLink ?(\n    <Link />\n  ) : (\n    <Button />\n  )\n}\n\nexport default ButtonWhite\n","import React, { useState, useEffect } from 'react';\n\nfunction PopupForm({ isPopupVisible, setIsPopupVisible }) {\n\n\n  // const [isPopupVisible, setIsPopupVisible] = useState(false);\n  const [isLoading, setIsLoading] = useState(false);\n  const [submissionMessage, setSubmissionMessage] = useState('');\n\n\n  useEffect(() => {\n    if (isPopupVisible) {\n      document.body.style.overflow = 'hidden'; // Disable scrolling\n    } else {\n      document.body.style.overflow = 'unset'; // Enable scrolling\n    }\n  }, [isPopupVisible]); // This effect depends on `isPopupVisible`\n\n\n  // Function to close the popup\n  const handleClose = () => {\n    setIsPopupVisible(false);\n  };\n\n  const handleSubmit = async (e) => {\n    e.preventDefault();\n    setIsLoading(true); // Start loading\n\n    console.log('handleSubmit');\n\n    // Simulate an API call\n    try {\n      // Here you would replace this setTimeout with your actual API call\n      await new Promise((resolve) => setTimeout(resolve, 2000)); // Simulate API call delay\n\n      // If successful\n      setIsLoading(false);\n      setSubmissionMessage('Thank you for your message!');\n      // setIsPopupVisible(false); // Optionally close the popup on form submission success\n    } catch (error) {\n      // If there's an error\n      console.log('error');\n      setIsLoading(false);\n      setSubmissionMessage('An error occurred. Please try again.');\n    }\n  };\n\n  return (\n    <>\n      {/* <button\n        className=\"px-4 py-2 text-white transition duration-300 bg-blue-500 rounded hover:bg-blue-700\"\n        onClick={() => setIsPopupVisible(true)}\n      >\n        Open Form\n      </button> */}\n\n      {isPopupVisible && (\n        <div\n        className=\"fixed inset-0 z-50 flex items-center justify-center transition-opacity duration-300 ease-out bg-gray-600 bg-opacity-50\"\n        style={{ animation: 'fadeIn 0.5s' }}\n\n        >\n          <div className=\"relative w-full max-w-lg p-5 px-12 transition-all duration-300 transform bg-white rounded-lg\" style={{ animation: 'dropIn 0.5s' }}>\n\n            <button\n              onClick={handleClose}\n              className=\"absolute text-gray-400 top-2 right-2 hover:text-gray-600\"\n            >\n              <span className=\"text-4xl\">&times;</span> {/* Close button */}\n            </button>\n\n\n\n            {isLoading ? (\n              <div className=\"flex items-center justify-center\">\n                <div className=\"loader\">LOADER</div> {/* Add your spinner here */}\n              </div>\n            ) : (\n              <form onSubmit={handleSubmit}>\n                <h2 className=\"mb-8 text-2xl\">Get Your Free Estimate</h2>\n                <p className=\"mb-8\">Looking for a home upgrade? Fill out the form below to get a free estimate. We'll provide personalized solutions for your project and help turn your vision into reality.</p>\n\n                <input type=\"hidden\" name=\"form-name\" value=\"contact\" />\n                <div className=\"flex flex-col md:flex-row gap-x-8 gap-y-4\">\n                  <div className=\"flex flex-row flex-1 w-full gap-x-8\">\n                    <div className=\"flex flex-col items-start flex-1\">\n                      <label className=\"text-lg\" for=\"name\">Name\n                      <input className=\"w-full border-2\" type=\"text\" name=\"firstName\" required />\n                      </label>\n                    </div>\n                  </div>\n                  <div className=\"flex flex-col items-start flex-1\">\n                    <label className=\"text-lg\" for=\"phone\">Phone Number\n                    <input className=\"w-full border-2\" type=\"tel\" name=\"phone\" required/>\n                    </label>\n                  </div>\n                </div>\n                <div className=\"flex flex-col items-start mt-7\">\n                  <label className=\"text-lg\" for=\"message\">Tell Us About Your Project\n                  <textarea className=\"w-full border-2\" type=\"textarea\" name=\"message\" required />\n                  </label>\n                </div>\n\n                <button type=\"submit\" className=\"block px-6 py-2 m-auto text-lg font-semibold mt-7 min-w-44 w-fit bg-gold-100 text-darkNavy rounded-4xl font-body\">Submit</button>\n\n\n              </form>\n            )}\n\n          </div>\n        </div>\n      )}\n    </>\n  );\n}\n\nexport default PopupForm;\n","import React, { useState, useEffect } from 'react';\nimport Layout from './layout'\nimport ButtonWhite from \"../components/ButtonWhite\";\nimport PopupForm from '../components/popup';\n\n\nimport { StaticImage } from \"gatsby-plugin-image\"\nimport { FaFacebook, FaInstagram } from 'react-icons/fa';\n\n\nimport 'react-responsive-carousel/lib/styles/carousel.min.css';\n\n\nconst WhoAreWe = () => {\n\n\n  const [formData, setFormData] = useState({\n    name: '',\n    email: '',\n    message: '',\n  });\n\n  const [isPopupVisible, setIsPopupVisible] = useState(false);\n  const [isLoading, setIsLoading] = useState(false);\n  const [submissionMessage, setSubmissionMessage] = useState('');\n\n\n  useEffect(() => {\n    if (isPopupVisible) {\n      document.body.style.overflow = 'hidden'; // Disable scrolling\n    } else {\n      document.body.style.overflow = 'unset'; // Enable scrolling\n    }\n  }, [isPopupVisible]); // This effect depends on `isPopupVisible`\n\n\n\n  return (\n    <div className=\"bg-white\">\n      <PopupForm isPopupVisible={isPopupVisible} setIsPopupVisible={setIsPopupVisible} />\n    <Layout marginTop={true} hideFinance={true}>\n      <div className=\"flex flex-col px-12 pt-10 md:flex-row gap-x-6\">\n        <div className=\"flex-1\">\n\n                <div className=\"flex flex-col items-center justify-center py-16 odd:float-left even:float-right\">\n                    <StaticImage\n                        loading=\"eager\"\n                        src={\"../images/about-us.jpeg\"}\n                        alt=\"TN Home Improvements Banner Image\"\n                        placeholder=\"blurred\"\n                        className=\"\"\n                        imgClassName=\"object-top\"\n                        width={2400}\n                        height={1200}\n                      />\n                  </div>\n\n        </div>\n        <div className=\"flex-1 py-10\">\n          <div className=\"px-8 py-16 text-navy\">\n            <h1 className=\"pb-2 m-auto text-4xl text-center border-b-2 text-navy border-gold-100 w-fit font-display\">Who Are We</h1>\n            <div className=\"text-2xl flex flex-row gap-x-6 items-center justify-center mt-2\">\n              <a href=\"https://www.facebook.com/profile.php?id=100077605338760\" aria-label=\"go to facebook page\"><FaFacebook color=\"#1e283b\" size=\"25\" /></a>\n              <a href=\"https://www.instagram.com/tn_homeimprovements/\" aria-label=\"go to instagram page\"><FaInstagram color=\"#1e283b\" size=\"25\" /></a>\n            </div>\n            <p className=\"pt-6\">\n            We are a team of three local professionals, combining over 20 years of experience in the construction industry. Our mission is to help you transform your home into a space that perfectly aligns with your vision and needs. Whether it’s a minor update or a comprehensive overhaul, our expertise ensures that every project is handled with meticulous care and precision. We pride ourselves on our collaborative approach, working closely with you to bring your dream home to life. Trust in T&N Home Improvements for a seamless, high-quality renovation experience.\n            </p>\n          </div>\n        </div>\n      </div>\n    </Layout>\n    </div>\n  );\n};\n\nexport default WhoAreWe;\n"],"names":["isSmall","isWhite","isPopUpEnabled","setIsPopupVisible","label","isLink","link","Button","onClick","className","Link","href","isPopupVisible","useState","isLoading","setIsLoading","setSubmissionMessage","useEffect","document","body","style","overflow","handleSubmit","e","preventDefault","console","log","Promise","resolve","setTimeout","animation","onSubmit","type","name","value","for","required","email","message","marginTop","hideFinance","S","loading","src","alt","placeholder","imgClassName","width","height","color","size"],"sourceRoot":""}