converting contact to sign-up

.gitignore

@@ -1,7 +1,7 @@
 /node_modules
 *.log
 .DS_Store
-.env
+.env.local
 .env.*
 /.cache
 /public/build

app/(website)/contact/contact.js

@@ -5,9 +5,9 @@ import { useState } from "react";
 import { useForm } from "react-hook-form";
 import useWeb3Forms from "@web3forms/react";
 import {
-  MapPinIcon,
   EnvelopeIcon,
-  PhoneIcon
+  PhoneIcon,
+  ChatBubbleLeftRightIcon
 } from "@heroicons/react/24/outline";
 export default function Contact({ settings }) {
   const {
@@ -29,8 +29,8 @@ export default function Contact({ settings }) {
   const { submit: onSubmit } = useWeb3Forms({
     access_key: apiKey,
     settings: {
-      from_name: "React Denver",
-      subject: "New Contact Message from React Denver Website"
+      from_name: "ReactDenver_web3Forms",
+      subject: "New Speaker Sign-up from React Denver Website"
     },
     onSuccess: (msg, data) => {
       setIsSuccess(true);
@@ -46,10 +46,10 @@ export default function Contact({ settings }) {
   return (
     <Container>
       <h1 className="mt-2 mb-3 text-3xl font-semibold tracking-tight text-center lg:leading-snug text-brand-primary lg:text-4xl dark:text-white">
-        Contact
+        Speaker Sign-Up
       </h1>
       <div className="text-center">
-        <p className="text-lg">We are a here to help.</p>
+        <p className="text-lg">Sign-up here to become a speaker.</p>
       </div>
 
       <div className="grid my-10 md:grid-cols-2">
@@ -70,6 +70,10 @@ export default function Contact({ settings }) {
                 </a>
               </div>
             )}
+            <div className="flex items-center mt-2 space-x-2 text-dark-600 dark:text-gray-400">
+              <ChatBubbleLeftRightIcon className="w-4 h-4" />
+              <a className="no-underline hover:underline" href="https://discord.gg/33wkVQFV49">Click to join us on Discord</a>
+            </div>
           </div>
         </div>
         <div>
@@ -132,18 +136,41 @@ export default function Contact({ settings }) {
                 </div>
               )}
             </div>
+            <div className="mb-5">
+              <input
+                id="talk_title"
+                type="text"
+                placeholder="Talk Title"
+                name="talk_title"
+                autoComplete="false"
+                className={`w-full px-4 py-3 border-2 placeholder:text-gray-800 dark:text-white rounded-md outline-none dark:placeholder:text-gray-200 dark:bg-gray-900   focus:ring-4  ${
+                  errors.talk_title
+                    ? "border-red-600 focus:border-red-600 ring-red-100 dark:ring-0"
+                    : "border-gray-300 focus:border-gray-600 ring-gray-100 dark:border-gray-600 dark:focus:border-white dark:ring-0"
+                }`}
+                {...register("talk_title", {
+                  required: "Enter talk title",
+                  maxLength: 120
+                })}
+              />
+              {errors.talk_title && (
+                <div className="mt-1 text-red-600">
+                  <small>{errors.talk_title.message}</small>
+                </div>
+              )}
+            </div>
 
             <div className="mb-3">
               <textarea
                 name="message"
-                placeholder="Your Message"
+                placeholder="Your Talk Description"
                 className={`w-full px-4 py-3 border-2 placeholder:text-gray-800 dark:text-white dark:placeholder:text-gray-200 dark:bg-gray-900   rounded-md outline-none  h-36 focus:ring-4  ${
                   errors.message
                     ? "border-red-600 focus:border-red-600 ring-red-100 dark:ring-0"
                     : "border-gray-300 focus:border-gray-600 ring-gray-100 dark:border-gray-600 dark:focus:border-white dark:ring-0"
                 }`}
                 {...register("message", {
-                  required: "Enter your Message"
+                  required: "Enter your talk description"
                 })}
               />
               {errors.message && (
@@ -154,9 +181,67 @@ export default function Contact({ settings }) {
               )}
             </div>
 
+            <div>
+              <label className="mb-5 dark:text-white">Talk Duration</label>
+              <div
+                  className={`mb-5 ${
+                  errors.duration
+                    ? "border-red-600 focus:border-red-600 ring-red-100 dark:ring-0"
+                    : "border-gray-300 focus:border-gray-600 ring-gray-100 dark:border-gray-600 dark:focus:border-white dark:ring-0"
+              }`}>
+                <input
+                  id="15min"
+                  type="radio"
+                  name="duration"
+                  value="15_minutes"
+                  className="mt-3"
+                  {...register("duration", {
+                    required: "Select your talk duration"
+                  })}
+                />
+                <label className="ml-1 mr-3 dark:text-white">15 Min</label>
+                <input
+                  id="30min"
+                  type="radio"
+                  name="duration"
+                  value="30_minutes"
+                  {...register("duration", {
+                    required: "Select your talk duration"
+                  })}
+                />
+                <label className="ml-1 mr-3 dark:text-white ">30 Min</label>
+                <input
+                  id="1hr"
+                  type="radio"
+                  name="duration"
+                  value="1_hour"
+                  {...register("duration", {
+                    required: "Select your talk duration"
+                  })}
+                />
+                <label className="ml-1 mr-3 dark:text-white">1 Hour</label>
+                {errors.duration && (
+                    <div className="mt-1 text-red-600">
+                      {" "}
+                      <small>{errors.duration.message}</small>
+                    </div>
+                )}
+              </div>
+            </div>
+            <div className="mb-3">
+              <input
+                  name="discord"
+                  type="text"
+                  placeholder="Your Discord Username (optional)"
+                  className={`w-full px-4 py-3 border-2 placeholder:text-gray-800 dark:text-white rounded-md outline-none dark:placeholder:text-gray-200 dark:bg-gray-900   
+                  focus:ring-4 border-gray-300 focus:border-gray-600 ring-gray-100 dark:border-gray-600 dark:focus:border-white dark:ring-0`}
+                  {...register("discord")}
+              />
+            </div>
+
             <button
               type="submit"
-              className="w-full py-4 font-semibold text-white transition-colors bg-gray-900 rounded-md hover:bg-gray-800 focus:outline-none focus:ring-offset-2 focus:ring focus:ring-gray-200 px-7 dark:bg-white dark:text-black ">
+              className="w-full py-4 my-5 font-semibold text-white transition-colors bg-gray-900 rounded-md hover:bg-gray-800 focus:outline-none focus:ring-offset-2 focus:ring focus:ring-gray-200 px-7 dark:bg-white dark:text-black ">
               {isSubmitting ? (
                 <svg
                   className="w-5 h-5 mx-auto text-white dark:text-black animate-spin"
@@ -176,7 +261,7 @@ export default function Contact({ settings }) {
                     d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                 </svg>
               ) : (
-                "Send Message"
+                "Sign-Up"
               )}
             </button>
           </form>

components/navbar.js

@@ -27,7 +27,7 @@ export default function Navbar(props) {
       href: '/organizers'
     },
     {
-      label: "Contact",
+      label: "Speaker Sign-Up",
       href: "/contact",
     },
   ];

components/navbaralt.js

@@ -25,8 +25,8 @@ export default function NavbarAlt(props) {
       href: "/organizers",
     },
     {
-      label: "Contact",
-      href: "/contact",
+      label: "Speaker Sign-up",
+      href: "/contact"
     },
   ];
 

components/themeSwitch.js

@@ -1,13 +1,17 @@
 "use client";
 
 import { useTheme } from "next-themes";
-import { SunIcon } from "@heroicons/react/24/outline";
+import { SunIcon, MoonIcon, ComputerDesktopIcon } from "@heroicons/react/24/outline";
+import { useState,useEffect } from "react";
 
 const ThemeSwitch = () => {
   const { theme, setTheme } = useTheme();
   return (
     <div className="inline-flex items-center">
-      <SunIcon className="w-4 h-4 mr-2" />
+        {theme === "system" && <ComputerDesktopIcon className="w-4 h-4 mr-2" />}
+        {theme === "dark" && <MoonIcon className="w-4 h-4 mr-2" />}
+        {theme === "light" && <SunIcon className="w-4 h-4 mr-2" />}
+
       <select
         name="themeSwitch"
         value={theme}