feat: added a call for paper section for Bangalore venue (#200)

* added cfp form for bangalore

* made cfp available to Bangalore

* added cfp page for bangalore

* removed london ticket button

* added some subtle information

* added subtle deadline date

components/Buttons/button.js

@@ -1,8 +1,10 @@
 import React from 'react'
 
-function Button({className, children, overlay, onClick}) {
+function Button({className, children, overlay, onClick, type, disabled}) {
   return (
 	  <button
+		  disabled={disabled}
+		  type={type}
 		  onClick={onClick}
 			className={`${overlay ? '' : 'gradient-bg'} text-white h-[54px] rounded-md p-[8px] ${className}`}
       >{children}</button>

components/Form/Cfp/stepFour.js

@@ -0,0 +1,75 @@
+/* eslint-disable react/no-unescaped-entities */
+import React, {useState} from "react";
+import { toast } from "react-hot-toast";
+import axios from "axios";
+import ActivityLoader from "../../illustration/activityLoader";
+import Button from "../../Buttons/button";
+
+function StepFour({ setStep, setForm, data }) {
+  const [submitting, setSubmitting] = useState(false);
+  const [disabled, setDisabled] = useState(false);
+  const onSubmit = (e) => {
+    e.preventDefault();
+    setSubmitting(true);
+    axios
+      .post(
+        "https://sheet.best/api/sheets/91aebdc6-66cb-46c2-9c7b-4cdfc7541b56",
+        data
+      )
+      .then((res) => {
+        setSubmitting(false);
+        if (res.status === 200) {
+          setDisabled(true);
+          setStep(e, 'successful')
+        }
+      })
+      .catch((err) => {
+        setSubmitting(false);
+        toast.error("Failed to submit feedback. Try again", {
+            duration: '6000'
+          });
+      });
+  };
+  return (
+    <form className="mt-3 w-[30rem] lg:w-[auto]" onSubmit={(e) => onSubmit(e)}>
+      <h1 className="text-white font-bold text-4xl lg:text-3xl">
+        Additional Information
+      </h1>
+      <p className="mt-3 text-dark-600">
+        Notes will only be seen by reviewers during the CFP process. Therefore, it is important to use this space to explain any technical requirements or why you are best suited to speak on the subject, etc...  
+      </p>
+      <div className="mt-3 border w-full border-solid border-y-dark-600 divide-y" />
+      <div className="mt-10">
+        <div className="text-dark-600 text-lg">Additional Information</div>
+        <textarea
+          className="mt-3 w-full p-4 rounded-md focus:outline-none"
+          style={{
+            border: "1px solid #E50E99",
+          }}
+          onChange={(e) => setForm({ ...data, AdditionalInfo: e.target.value })}
+        />
+
+        <div className="mt-6 text-dark-600 text-md">
+          By clicking submit, this means you agree to follow the <a className="underline" href="https://github.com/asyncapi/spec/blob/master/CODE_OF_CONDUCT.md" target="_blank" rel="noreferrer">AsyncAPI Initiative Code of Conduct</a>
+        </div>
+        <div className="float-right">
+          <a
+            className="mr-10 text-dark-600 cursor-pointer"
+            onClick={() => !disabled && setStep(null, 3)}
+          >
+            Back
+          </a>
+          <Button
+            type="submit"
+            className="p-3 rounded-md mt-3 w-36"
+            disabled={submitting || disabled}
+          >
+            {submitting ? <ActivityLoader /> : "Submit"}
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+}
+
+export default StepFour;

components/Form/Cfp/stepOne.js

@@ -0,0 +1,63 @@
+/* eslint-disable react/no-unescaped-entities */
+import React from "react";
+import Button from "../../Buttons/button";
+
+function StepOne({ setStep, setForm, data }) {
+  return (
+    <form className="mt-3 w-[30rem] lg:w-[auto]" onSubmit={(e) => setStep(e, 2)}>
+      <h1 className="text-white font-bold text-4xl lg:text-3xl">
+        Let's start with your name
+      </h1>
+      <p className="mt-3 text-dark-600">
+        Please fill the details below with your full name
+      </p>
+      <div className="mt-3 border w-full border-solid border-dark-400 divide-y" />
+      <div className="mt-10">
+        <div className="text-dark-600 text-lg">Full name</div>
+        <input
+          required
+          className="mt-3 w-full p-4 rounded-md focus:outline-none"
+          style={{
+            border: "1px solid #E50E99",
+          }}
+          onChange={(e) => setForm({ ...data, Fullname: e.target.value })}
+        />
+        <div className="text-dark-600 text-lg mt-5">Email address</div>
+        <input
+          required
+          type="email"
+          className="mt-3 w-full p-4 rounded-md focus:outline-none"
+          style={{
+            border: "1px solid #E50E99",
+          }}
+          onChange={(e) => setForm({ ...data, Email: e.target.value })}
+        />
+         <div className="text-dark-600 text-lg mt-5">Bio</div>
+        <textarea
+          required
+          type="text"
+          className="mt-3 w-full p-4 rounded-md focus:outline-none"
+          style={{
+            border: "1px solid #E50E99",
+          }}
+          onChange={(e) => setForm({ ...data, Bio: e.target.value })}
+        />
+        <div className="text-dark-600 text-lg mt-5">Github/LinkedIn/Twitter</div>
+        <input
+          required
+          type="url"
+          className="mt-3 w-full p-4 rounded-md focus:outline-none"
+          style={{
+            border: "1px solid #E50E99",
+          }}
+                  onChange={(e) => setForm({ ...data, Social: e.target.value })}
+        />
+        <Button type="submit"
+          className="bg-tetiary-pink p-3 rounded-md text-white mt-3 float-right w-36"
+          disabled={!data.Fullname && true}>Next</Button>
+      </div>
+    </form>
+  );
+}
+
+export default StepOne;

components/Form/Cfp/stepThree.js

@@ -0,0 +1,85 @@
+/* eslint-disable react/no-unescaped-entities */
+import React, { useState, useEffect } from "react";
+import Select from "../select";
+import Button from "../../Buttons/button";
+
+const options1 = [
+  {
+    value: "Lightning talk",
+    label: "Lightning talk(5mins)",
+  },
+  {
+    value: "Session",
+    label: "Session(20 - 25mins)",
+  }
+];
+
+const options2= [
+  {
+    value: "Introductory and overview",
+    label: "Introductory and overview",
+  },
+  {
+    value: "Intermediate",
+    label: "Intermediate",
+  },
+    {
+    value: "Advance",
+    label: "Advance",
+  },
+  {
+    value: "Expert",
+    label: "Expert",
+  },
+];
+
+function StepThree({ setStep, setForm, data }) {
+  const [value, setValue] = useState({});
+  useEffect(() => {
+    setForm({ ...data, ...value});
+  }, [value]); 
+  return (
+    <form className="mt-3 w-[30rem] lg:w-[auto]" onSubmit={(e) => setStep(e, 4)}>
+      <h1 className="text-white font-bold text-4xl lg:text-3xl">
+        Session Info
+      </h1>
+      <p className="mt-3 text-dark-600">
+              Please provide your session title and description.
+          </p>
+          <p className="mt-4 text-sm text-dark-600">The sessions are expected to feature in-person presentations.</p>
+      <div className="mt-3 border w-full border-solid border-y-dark-600 divide-y" />
+          <div className="mt-10">
+        <div className="text-dark-600 text-lg mb-4">Session Format</div>
+        <Select
+          options={options1}
+          title="Select session format"
+          setValue={(val) => setValue({...value, Format: val})}
+          multi={false}
+        />
+        <div className="text-dark-600 text-lg mt-4 mb-4">Session Level</div>
+        <Select
+          options={options2}
+          title="Select session level"
+          setValue={(val) => setValue({...value, Level: val})}
+          multi={false}
+        />
+        <div className="float-right">
+        <a
+            className="mr-10 text-dark-600 cursor-pointer"
+            onClick={() => setStep(null, 1)}
+          >
+            Back
+                  </a>
+                  <Button
+                    type="submit"
+                    disabled={!data.Format || !data.Level && true}
+                    className="p-3 rounded-md mt-3 w-36">
+                      Next
+                  </Button>
+        </div>
+      </div>
+    </form>
+  );
+}
+
+export default StepThree;

components/Form/Cfp/stepTwo.js

@@ -0,0 +1,52 @@
+/* eslint-disable react/no-unescaped-entities */
+import React, { useState, useEffect } from "react";
+import Button from "../../Buttons/button";
+
+
+function StepTwo({ setStep, setForm, data }) {
+  return (
+    <form className="mt-3 w-[30rem] lg:w-[auto]" onSubmit={(e) => setStep(e, 3)}>
+      <h1 className="text-white font-bold text-4xl lg:text-3xl">
+        Session Info
+      </h1>
+      <p className="mt-3 text-dark-600">
+       Please provide your session title and description
+      </p>
+      <div className="mt-3 border w-full border-solid border-dark-400 divide-y" />
+      <div className="mt-10">
+        <div className="text-dark-600 text-lg">Session Title</div>
+        <input
+          required
+          className="mt-3 w-full p-4 rounded-md focus:outline-none"
+          style={{
+            border: "1px solid #E50E99",
+          }}
+          onChange={(e) => setForm({ ...data, Title: e.target.value })} />
+        <div className="text-dark-600 text-lg mt-4">Session Description</div>
+        <textarea
+          required
+          className="mt-3 w-full p-4 rounded-md focus:outline-none"
+          style={{
+            border: "1px solid #E50E99",
+          }}
+          onChange={(e) => setForm({ ...data, Description: e.target.value })} />
+        <div className="float-right">
+          <a
+            className="mr-10 text-dark-600 cursor-pointer"
+            onClick={() => setStep(null, 1)}
+          >
+            Back
+          </a>
+          <Button
+            type="submit"
+            disabled={!data.Description || !data.Title && true}
+            className="bg-tetiary-pink p-3 rounded-md text-white mt-3 w-36">
+            Next
+            </Button>
+        </div>
+      </div>
+    </form>
+  );
+}
+
+export default StepTwo;