{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/vkq6atbCbPF5h1fnP6CR/U52oYjaKs5oP86wvpMmc/Contact_Form_1.js", "ssg:https://framerusercontent.com/modules/gSYeGFKehh4NkPJluMWO/G6RCR1d7EpDJycNG590O/sEZ5hCNBF.js"],
  "sourcesContent": ["// Welcome to Code in Framer\n// Get Started: https://www.framer.com/developers/\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useState,useEffect}from\"react\";/**\n * These annotations control how your component sizes\n * Learn more: https://www.framer.com/developers/#code-components-auto-sizing\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */addPropertyControls(Contact_Form,{gradientStop1:{type:ControlType.Color},gradientStop2:{type:ControlType.Color},gradientStop3:{type:ControlType.Color},TextColor:{type:ControlType.Color}});Contact_Form.defaultProps={gradientStop1:\"#0CFFD2\",gradientStop2:\"#17FAFF\",gradientStop3:\"#00BFFF\",TextColor:\"#051118\"};export default function Contact_Form({gradientStop1,gradientStop2,gradientStop3,TextColor}){// This is a React component containing an Example component\n// - Replace <Example /> with your own code\n// - Find inspiration: https://www.framer.com/developers/\nconst googleFontLink=`<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100;200;300;400;500;600;700&display=swap\" rel=\"stylesheet\">`;const[formData,setFormData]=useState({name:\"\",email:\"\",phone:\"\",message:\"\"});const[toastMessage,setToastMessage]=useState(\"\");const[loading,setLoading]=useState(false);const formUrl=\"https://script.google.com/macros/s/AKfycbyVlECrV20gZ3h9xReGUPLq3i9YXbK8SimIi6OtQTMIRRlVfOmkR-NCFIyB0zSvcZA8Iw/exec\";const containerStyle={height:\"fit\",display:\"flex\",flexDirection:\"column\",overflow:\"hidden\",gap:\"16px\"};const inputStyle={padding:\"12px 16px\",borderRadius:\"4px\",resize:\"None\",backgroundColor:\"rgba(0,0,0,0.5)\",borderWidth:\"1px\",borderColor:\"#FFFFFF\",color:\"#FFFFFF\",FontFamily:\"IBM Plex Sans\",fontWeight:\"100\",fontSize:\"14px\"};const buttonStyle={fontFamily:\"IBM Plex Sans\",padding:\"12px 16px\",// background: \"linear-gradient(to left, #0CFFD2, #17FAFF, #00BFFF)\",\nbackground:`linear-gradient(to right, ${gradientStop1}, ${gradientStop2}, ${gradientStop3})`,// background: ButtonGradColor,\nborderRadius:\"4px\",border:\"None\",color:TextColor,fontWeight:\"700\",fontSize:\"14px\",transition:\"backgroundColor 0.8s ease-in-out, color 0.8s ease-in-out\",cursor:\"pointer\"};const toastStyle={position:\"absolute\",top:0,left:0,right:0,bottom:0,backgroundColor:\"#0C2A0D\",color:\"#fff\",padding:\"32px 16px\",textAlign:\"center\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",height:\"100%\",fontSize:\"20px\",lineHeight:1.8,opacity:toastMessage?1:0,transition:\"opacity 0.8s ease-in-out\"};// Function to handle form submission\nconst handleSubmit=async e=>{e.preventDefault();setLoading(true);// Send data to Google Sheets\nconst response=await fetch(formUrl,{method:\"POST\",body:new URLSearchParams(formData)});if(response.ok){setToastMessage(\"Thanks for your enquiry! We will get back to you soon\");setFormData({name:\"\",email:\"\",phone:\"\",message:\"\"});// Automatically hide the toast message after 15 seconds\nsetTimeout(()=>{setToastMessage(\"\");setLoading(false);},5e3);}};// Function to handle form input changes\nconst handleInputChange=e=>{const{name,value}=e.target;setFormData({...formData,[name]:value});};useEffect(()=>{// Automatically hide the toast message after 15 seconds\nif(toastMessage){const hideTimer=setTimeout(()=>{setToastMessage(\"\");},5e3);return()=>clearTimeout(hideTimer);}},[toastMessage]);return /*#__PURE__*/_jsxs(\"div\",{children:[toastMessage&&/*#__PURE__*/_jsx(\"div\",{className:\"toast\",style:toastStyle,children:toastMessage}),/*#__PURE__*/_jsxs(\"form\",{action:formUrl,method:\"post\",style:containerStyle,onSubmit:handleSubmit,children:[/*#__PURE__*/_jsx(\"input\",{type:\"text\",required:true,name:\"name\",style:inputStyle,placeholder:\"Full name\",value:formData.name,onChange:handleInputChange}),/*#__PURE__*/_jsx(\"input\",{type:\"email\",required:true,name:\"email\",style:inputStyle,placeholder:\"Email ID\",value:formData.email,onChange:handleInputChange}),/*#__PURE__*/_jsx(\"input\",{type:\"tel\",name:\"phone\",style:inputStyle,placeholder:\"Contact number (Optional)\",value:formData.phone,onChange:handleInputChange}),/*#__PURE__*/_jsx(\"textarea\",{required:true,name:\"message\",style:inputStyle,placeholder:\"What do you like to know about the product?\",rows:5,value:formData.message,onChange:handleInputChange}),/*#__PURE__*/_jsx(\"input\",{type:\"submit\",value:loading?\"Please wait...\":\"Submit\",style:buttonStyle,disabled:loading})]})]});}// Styles are written in object syntax\n// Learn more: https://reactjs.org/docs/dom-elements.html#style\n\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"Contact_Form\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Contact_Form_1.map", "import{fontStore}from\"framer\";fontStore.loadFonts([]);export const fonts=[{explicitInter:true,fonts:[]}];export const css=[\".framer-hR68E .framer-styles-preset-1f4hwf8:not(.rich-text-wrapper), .framer-hR68E .framer-styles-preset-1f4hwf8.rich-text-wrapper a { --framer-link-current-text-color: #ffffff; --framer-link-current-text-decoration: underline; --framer-link-hover-text-color: #ffffff; --framer-link-hover-text-decoration: none; --framer-link-text-color: rgba(255, 255, 255, 0.5); --framer-link-text-decoration: none; }\"];export const className=\"framer-hR68E\";\nexport const __FramerMetadata__ = {\"exports\":{\"fonts\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"css\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"className\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}"],
  "mappings": "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",
  "names": ["addPropertyControls", "Contact_Form", "ControlType", "gradientStop1", "gradientStop2", "gradientStop3", "TextColor", "googleFontLink", "formData", "setFormData", "ye", "toastMessage", "setToastMessage", "loading", "setLoading", "formUrl", "containerStyle", "inputStyle", "buttonStyle", "toastStyle", "handleSubmit", "e", "handleInputChange", "name", "value", "ue", "hideTimer", "u", "p", "fontStore", "fonts", "css", "className"]
}