update contact, temp turn of a stars in question

src/App.jsx

@@ -19,11 +19,7 @@ const App = () => {
         <Route path="/faq" element={<Faq />} />
       </Routes>
         </div>
-        <StarsCanvas />
-        <div className='relative z-0'>
-          {/* <Contact /> */}
-          {/* <StarsCanvas /> */}
-        </div>
+        {/*<StarsCanvas />*/}
       </div>
     </BrowserRouter>
   );

src/components/Contacter.jsx

@@ -1,53 +1,135 @@
-import React, { useRef } from 'react';
-import emailjs from '@emailjs/browser';
+import React, { useRef, useState } from "react";
+import { motion } from "framer-motion";
+import emailjs from "@emailjs/browser";
+import { styles } from "../styles";
+import { SectionWrapper } from "../hoc";
+import { slideIn } from "../utils/motion";
+import EarthCanvas from "./canvas/Earth.jsx";
 
+const Contact = () => {
+  const formRef = useRef();
+  const [form, setForm] = useState({
+    name: "",
+    email: "",
+    message: "",
+  });
 
-function Contact(){
-    const form = useRef();
-    const serviceKey = import.meta.env.SERVICE_KEY;
-    const template = import.meta.env.TEMPLATE;
-    const token = import.meta.env.TOKEN;
+  const [loading, setLoading] = useState(false);
 
-    function sendEmail(e) {
-        e.preventDefault();
+  const handleChange = (e) => {
+    const { target } = e;
+    const { name, value } = target;
 
-    emailjs.sendForm(serviceKey, template, form.current, token)
-      .then((result) => {
-          console.log(result.text);
-      }, (error) => {
-          console.log(error.text);
-      });
-    e.target.reset();
+    setForm({
+      ...form,
+      [name]: value,
+    });
+  };
 
-    }
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    setLoading(true);
 
-    return <section id="contact">
-        {/*<h2 className="contact">Contact</h2>*/}
-        <div className="contactContainer">
-            <div className="col-lg-6">
-                <div className="contact-wrap">
-                    <div id="form-message-warning" className="mb-4 w-100 text-center"></div>
-                    <form method="POST" id="contactForm" name="contactForm" className="contactForm"
-                          noValidate="novalidate" ref={form} onSubmit={sendEmail}>
-                            <div className="col-md-12">
-                                <div className="form-group">
-                                    <h4 className="mail">Send PP any message</h4>
-                                    <textarea name="message" className="form-control" id="message" cols="30" rows="8"
-                                              placeholder=""></textarea>
-                                </div>
-                            </div>
-                            <div className="col-md-12">
-                                <div className="form-group">
-                                    <button type="submit" className="btn">Send Message</button>
-                                        <div className="submitting"></div>
-                                </div>
-                            </div>
-                    </form>
-                </div>
-            </div>
+    emailjs
+      .send(
+        import.meta.env.VITE_APP_EMAILJS_SERVICE_ID,
+        import.meta.env.VITE_APP_EMAILJS_TEMPLATE_ID,
+        {
+          from_name: form.name,
+          to_name: "JavaScript Mastery",
+          from_email: form.email,
+          to_email: "sujata@jsmastery.pro",
+          message: form.message,
+        },
+        import.meta.env.VITE_APP_EMAILJS_PUBLIC_KEY
+      )
+      .then(
+        () => {
+          setLoading(false);
+          alert("Thank you. I will get back to you as soon as possible.");
 
-        </div>
-    </section>
-}
+          setForm({
+            name: "",
+            email: "",
+            message: "",
+          });
+        },
+        (error) => {
+          setLoading(false);
+          console.error(error);
 
-export default Contact;
+          alert("Ahh, something went wrong. Please try again.");
+        }
+      );
+  };
+
+  return (
+    <div
+      className={`xl:mt-12 flex xl:flex-row flex-col-reverse gap-10 overflow-hidden`}
+    >
+      <motion.div
+        variants={slideIn("left", "tween", 0.2, 1)}
+        className='flex-[0.75] bg-black-100 p-8 rounded-2xl'
+      >
+        <p className={styles.sectionSubText}>Get in touch</p>
+        <h3 className={styles.sectionHeadText}>Contact.</h3>
+
+        <form
+          ref={formRef}
+          onSubmit={handleSubmit}
+          className='mt-12 flex flex-col gap-8'
+        >
+          <label className='flex flex-col'>
+            <span className='text-white font-medium mb-4'>Your Name</span>
+            <input
+              type='text'
+              name='name'
+              value={form.name}
+              onChange={handleChange}
+              placeholder="What's your good name?"
+              className='bg-tertiary py-4 px-6 placeholder:text-secondary text-white rounded-lg outline-none border-none font-medium'
+            />
+          </label>
+          <label className='flex flex-col'>
+            <span className='text-white font-medium mb-4'>Your email</span>
+            <input
+              type='email'
+              name='email'
+              value={form.email}
+              onChange={handleChange}
+              placeholder="What's your web address?"
+              className='bg-tertiary py-4 px-6 placeholder:text-secondary text-white rounded-lg outline-none border-none font-medium'
+            />
+          </label>
+          <label className='flex flex-col'>
+            <span className='text-white font-medium mb-4'>Your Message</span>
+            <textarea
+              rows={7}
+              name='message'
+              value={form.message}
+              onChange={handleChange}
+              placeholder='What you want to say?'
+              className='bg-tertiary py-4 px-6 placeholder:text-secondary text-white rounded-lg outline-none border-none font-medium'
+            />
+          </label>
+
+          <button
+            type='submit'
+            className='bg-tertiary py-3 px-8 rounded-xl outline-none w-fit text-white font-bold shadow-md shadow-primary'
+          >
+            {loading ? "Sending..." : "Send"}
+          </button>
+        </form>
+      </motion.div>
+
+      <motion.div
+        variants={slideIn("right", "tween", 0.2, 1)}
+        className='xl:flex-1 xl:h-auto md:h-[550px] h-[350px]'
+      >
+        <EarthCanvas />
+      </motion.div>
+    </div>
+  );
+};
+
+export default SectionWrapper(Contact, "contact");

src/components/Contacts.jsx

@@ -1,10 +1,25 @@
 import React from "react";
-import { SectionWrapper } from "../hoc";
+import {SectionWrapper} from "../hoc";
+import Contact from "./Contacter.jsx"
+import SocialMedia from "./SocialMedia.jsx";
+import {styles} from "../styles.js";
+import { StarsCanvas } from "./canvas";
+
 
 const Contacts = () => {
-  return (
-    <div></div>
-  );
+    return (
+        <div>
+            <Contact/>
+            <StarsCanvas />
+
+            <div className="mt-8">
+                <h2 className={`${styles.sectionSubTextCenter}`}>SOS12 Social Media</h2>
+                <SocialMedia/>
+
+            </div>
+
+        </div>
+    );
 };
 
 export default SectionWrapper(Contacts, "");

src/components/Faq.jsx

@@ -4,7 +4,6 @@ import { motion } from "framer-motion";
 import { textVariant } from "../utils/motion";
 import { SectionWrapper } from "../hoc";
 import { faqs } from '../constants';
-import SocialMedia from './Socialmedia';
 
 const Faq = () => {
   const [activeIndex, setActiveIndex] = useState(null);
@@ -165,10 +164,6 @@ const Faq = () => {
         ))}
       </div>
       <hr className="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700"></hr>
-      <div className="mt-8">
-      <h2 className={`${styles.sectionSubTextCenter}`}>SOS12 Social Media</h2>
-        <SocialMedia />
-      </div>
 </div>
   );
 };

src/components/Problems.jsx

@@ -101,7 +101,7 @@ const Problems = () => {
 
     return (
         <div className="Problems">
-        {/* <Preproblems />     */}
+         <Preproblems />
         <ThemeContext.Provider value={{theme, toggleTheme}}>
 
                 <ThemeProvider theme={defaultTheme}>
@@ -155,21 +155,9 @@ const Problems = () => {
 
                             </Grid>
                             </div>
-                            <StarsCanvas />
-                            {/* <Contact /> */}
+                            {/*<StarsCanvas />*/}
                         </Container>
                     </main>
-                    {/* Footer */}
-                    {/* <Box sx={{p: 6}} component="footer">
-                        <Typography variant="h6" align="center" gutterBottom>
-                            Footer
-                        </Typography>
-                        <Typography variant="subtitle1" align="center" component="p">
-                            Something here to give the footer a purpose!
-                        </Typography>
-                        <Copyright/>
-                    </Box> */}
-                    {/* End footer */}
                 </ThemeProvider> */
 
          </ThemeContext.Provider>

src/components/canvas/Earth.jsx

@@ -34,7 +34,6 @@ const EarthCanvas = () => {
           minPolarAngle={Math.PI / 2}
         />
         <Earth />
-
         <Preload all />
       </Suspense>
     </Canvas>