mirror of
https://github.com/Sosokker/SOS12.git
synced 2025-12-19 04:34:06 +01:00
update contact, temp turn of a stars in question
This commit is contained in:
Krittin SETDHAVANICH
parent
6d416a301b
commit
48de244b01
@ -19,12 +19,8 @@ const App = () => {
|
||||
<Route path="/faq" element={<Faq />} />
|
||||
</Routes>
|
||||
</div>
|
||||
<StarsCanvas />
|
||||
<div className='relative z-0'>
|
||||
{/* <Contact /> */}
|
||||
{/*<StarsCanvas />*/}
|
||||
</div>
|
||||
</div>
|
||||
</BrowserRouter>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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";
|
||||
|
||||
|
||||
function Contact(){
|
||||
const form = useRef();
|
||||
const serviceKey = import.meta.env.SERVICE_KEY;
|
||||
const template = import.meta.env.TEMPLATE;
|
||||
const token = import.meta.env.TOKEN;
|
||||
|
||||
function sendEmail(e) {
|
||||
e.preventDefault();
|
||||
|
||||
emailjs.sendForm(serviceKey, template, form.current, token)
|
||||
.then((result) => {
|
||||
console.log(result.text);
|
||||
}, (error) => {
|
||||
console.log(error.text);
|
||||
const Contact = () => {
|
||||
const formRef = useRef();
|
||||
const [form, setForm] = useState({
|
||||
name: "",
|
||||
email: "",
|
||||
message: "",
|
||||
});
|
||||
e.target.reset();
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { target } = e;
|
||||
const { name, value } = target;
|
||||
|
||||
setForm({
|
||||
...form,
|
||||
[name]: value,
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
|
||||
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.");
|
||||
|
||||
setForm({
|
||||
name: "",
|
||||
email: "",
|
||||
message: "",
|
||||
});
|
||||
},
|
||||
(error) => {
|
||||
setLoading(false);
|
||||
console.error(error);
|
||||
|
||||
alert("Ahh, something went wrong. Please try again.");
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
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>
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</section>
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default Contact;
|
||||
export default SectionWrapper(Contact, "contact");
|
||||
@ -1,9 +1,24 @@
|
||||
import React from "react";
|
||||
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>
|
||||
<div>
|
||||
<Contact/>
|
||||
<StarsCanvas />
|
||||
|
||||
<div className="mt-8">
|
||||
<h2 className={`${styles.sectionSubTextCenter}`}>SOS12 Social Media</h2>
|
||||
<SocialMedia/>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -34,7 +34,6 @@ const EarthCanvas = () => {
|
||||
minPolarAngle={Math.PI / 2}
|
||||
/>
|
||||
<Earth />
|
||||
|
||||
<Preload all />
|
||||
</Suspense>
|
||||
</Canvas>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user