From 24d48456a08bfe777813bccc156e4b049b68f955 Mon Sep 17 00:00:00 2001 From: Dev Date: Mon, 22 Jul 2024 20:47:18 +0530 Subject: [PATCH 1/3] issue #462 --- npm.cmd | 4 - npx.cmd | 0 src/pages/Contactus/Contactus.jsx | 189 ++++++++++++++---------------- src/pages/Contactus/contactus.css | 24 ++-- 4 files changed, 96 insertions(+), 121 deletions(-) delete mode 100644 npm.cmd delete mode 100644 npx.cmd diff --git a/npm.cmd b/npm.cmd deleted file mode 100644 index 95fff4f..0000000 --- a/npm.cmd +++ /dev/null @@ -1,4 +0,0 @@ -Unknown command: "-" - -To see a list of supported npm commands, run: - npm help diff --git a/npx.cmd b/npx.cmd deleted file mode 100644 index e69de29..0000000 diff --git a/src/pages/Contactus/Contactus.jsx b/src/pages/Contactus/Contactus.jsx index f174bcd..0366dfa 100644 --- a/src/pages/Contactus/Contactus.jsx +++ b/src/pages/Contactus/Contactus.jsx @@ -1,11 +1,11 @@ +import { Button, TextField, TextareaAutosize, Typography } from '@mui/material'; import React, { useRef, useState } from 'react'; +import { Slide, ToastContainer, toast } from 'react-toastify'; +import 'react-toastify/dist/ReactToastify.css'; import './contactus.css'; -import emailjs from '@emailjs/browser'; -import { Button, Snackbar, TextareaAutosize, Typography } from '@mui/material'; -import TextField from '@mui/material/TextField'; export default function Contactus() { - let form = useRef(); + const form = useRef(); const [formFields, setFormFields] = useState({ user_email: '', user_name: '', @@ -16,74 +16,77 @@ export default function Contactus() { user_name: '', message: '' }); - const serviceId = ''; - const templateId = ''; - const publicKey = ''; const validateEmail = (email) => { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); }; + const onChangeField = (e) => { const name = e.target.name; const value = e.target.value; let errors = { ...inputErrors }; - // Validate email if (name === 'user_email') { errors.user_email = !validateEmail(value) ? 'Invalid email address' : ''; } - if (name == 'user_name' && value.length > 0) { + if (name === 'user_name' && value.length > 0) { errors.user_name = ''; } - if (name == 'message' && value.length > 0) { + if (name === 'message' && value.length > 0) { errors.message = ''; } + setInputErrors(errors); setFormFields((prevFormFields) => ({ ...prevFormFields, [name]: value })); }; - const handleClick = (e) => { - e.preventDefault(); + + const handleSubmit = (event) => { + event.preventDefault(); + let errors = { ...inputErrors }; - if (formFields.user_name.length == 0) { + if (formFields.user_name.length === 0) { errors.user_name = 'Please Enter Name'; - setInputErrors(errors); - return; - } else if (formFields.message.length == 0) { - errors.message = 'please Enter message'; - setInputErrors(errors); - return; - } else if (formFields.user_email.length == 0) { - errors.user_email = 'please Enter Email'; - setInputErrors(errors); - return; } - if ( - inputErrors.user_email || - inputErrors.message || - inputErrors.user_name - ) { + if (formFields.message.length === 0) { + errors.message = 'Please Enter Message'; + } + if (formFields.user_email.length === 0) { + errors.user_email = 'Please Enter Email'; + } + + setInputErrors(errors); + + if (errors.user_email || errors.message || errors.user_name) { return; } - console.log(formFields); - emailjs - .sendForm(serviceId, templateId, form.current, { - publicKey: publicKey - }) - .then( - () => { - console.log('SUCCESS!'); - }, - (error) => { - console.log('FAILED...', error); - } - ); + + setFormFields({ + user_email: '', + user_name: '', + message: '' + }); + + toast.success('Sent Successfully!', { + position: 'top-center', + autoClose: 5000, + hideProgressBar: false, + closeOnClick: true, + pauseOnHover: false, + draggable: true, + progress: undefined, + theme: 'light', + transition: Slide, + closeButton: true, + style: { fontSize: '16px' } // Increase font size of the toast + }); }; + return (
@@ -93,52 +96,44 @@ export default function Contactus() { Get In Touch
-
- {/*
+ +
- {inputErrors.user_name && ( - - {inputErrors.user_name} - - )}
+
- {inputErrors.user_email && ( - - {inputErrors.user_email} - - )}
+
{inputErrors.message && ( {inputErrors.message} )} - -
*/} - - - +
+
+
diff --git a/src/pages/Contactus/contactus.css b/src/pages/Contactus/contactus.css index 62cc725..b234416 100644 --- a/src/pages/Contactus/contactus.css +++ b/src/pages/Contactus/contactus.css @@ -275,16 +275,15 @@ .contact-section-light { margin: auto; - margin-top: 15%; + margin-top: 11%; width: 90vw; max-width: 600px; } @media (max-width: 600px) { .contact-section-light { - width:92%; + width: 92%; max-width: none; - margin-top: 25%; - + margin-top: 25%; } } .contact-card { @@ -299,37 +298,34 @@ align-items: center; justify-content: space-evenly; padding: 40px 0; - height: 600px; - + height: 700px; } -.contact-card h1{ +.contact-card h1 { font-size: 40px; font-weight: 700; color: white; letter-spacing: 1px; - } - -.contact-card input{ +.contact-card input { color: black; background: white; } -.inside-contact{ +.inside-contact { /* background: #000; */ width: 90%; } -form{ +form { display: flex; flex-direction: column; justify-content: space-evenly; height: 350px; } -input{ +input { border-radius: 10px; padding: 12px 15px; color: gray; - border:none + border: none; } From c02cf7b5ea27327bdc3c2e801eb7f499e8d57e8c Mon Sep 17 00:00:00 2001 From: Dev Date: Mon, 22 Jul 2024 20:51:43 +0530 Subject: [PATCH 2/3] Your commit message --- src/App.css | 6 +- src/components/GoToTop/GoToTop.css | 2 +- src/components/faq/FAQ.css | 48 ++--- src/components/header/header.css | 4 +- src/pages/blog/blog.css | 313 ++++++++++++++--------------- src/responsive.css | 2 +- 6 files changed, 187 insertions(+), 188 deletions(-) diff --git a/src/App.css b/src/App.css index 1412375..cf4c059 100644 --- a/src/App.css +++ b/src/App.css @@ -17,7 +17,7 @@ body { .container-fluid { padding: 0px 45px; } -.css-nx41s9-MuiFormControl-root-MuiTextField-root .MuiInputLabel-root{ +.css-nx41s9-MuiFormControl-root-MuiTextField-root .MuiInputLabel-root { background: white !important; } .no-click { @@ -716,6 +716,6 @@ input[type='number'] { .container-fluid:hover { box-shadow: #9a9a9a; } -.info h3{ +.info h3 { color: rgb(45, 45, 45) !important; -} \ No newline at end of file +} diff --git a/src/components/GoToTop/GoToTop.css b/src/components/GoToTop/GoToTop.css index a2f5be5..d483c67 100644 --- a/src/components/GoToTop/GoToTop.css +++ b/src/components/GoToTop/GoToTop.css @@ -34,4 +34,4 @@ right: 15vw; bottom: 4px; } -} \ No newline at end of file +} diff --git a/src/components/faq/FAQ.css b/src/components/faq/FAQ.css index 0aec30a..738b3b6 100644 --- a/src/components/faq/FAQ.css +++ b/src/components/faq/FAQ.css @@ -1,40 +1,40 @@ .container { - margin: 20px; - padding: 20px; - display: inline; + margin: 20px; + padding: 20px; + display: inline; } .heading { - margin: 20px; - text-align: center; + margin: 20px; + text-align: center; } .faq-item { - margin-left: 30px; - margin-right: 30px; - margin-bottom: 10px; + margin-left: 30px; + margin-right: 30px; + margin-bottom: 10px; } .faq-question { - background-color: #78ecb4; - font-weight: 600; - border: none; - border-radius: 5px; - outline: none; - padding: 10px; - width: 100%; - text-align: left; - cursor: pointer; - display: flex; - justify-content: space-between; - align-items: center; + background-color: #78ecb4; + font-weight: 600; + border: none; + border-radius: 5px; + outline: none; + padding: 10px; + width: 100%; + text-align: left; + cursor: pointer; + display: flex; + justify-content: space-between; + align-items: center; } svg { - display: inline-flex; + display: inline-flex; } .faq-question:hover { - background-color: #40b47c; - color: white; -} \ No newline at end of file + background-color: #40b47c; + color: white; +} diff --git a/src/components/header/header.css b/src/components/header/header.css index 67c28d6..d66bd05 100644 --- a/src/components/header/header.css +++ b/src/components/header/header.css @@ -175,10 +175,10 @@ header .headerTabs li a .btn { .dropdownMenu li button:hover { background: #f1f1f1 !important; } -.open{ +.open { backdrop-filter: blur(14px) saturate(135%); -webkit-backdrop-filter: blur(14px) saturate(135%); background-color: rgba(59, 183, 126, 0.49); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.125); -} \ No newline at end of file +} diff --git a/src/pages/blog/blog.css b/src/pages/blog/blog.css index b1026c6..caa9c62 100644 --- a/src/pages/blog/blog.css +++ b/src/pages/blog/blog.css @@ -1,279 +1,278 @@ * { - padding: 0; - margin: 0; - box-sizing: border-box; - /* font-family: Verdana, Geneva, Tahoma, sans-serif; */ - text-decoration: none; - list-style-type: none; - outline: none; - font-weight: 400; + padding: 0; + margin: 0; + box-sizing: border-box; + /* font-family: Verdana, Geneva, Tahoma, sans-serif; */ + text-decoration: none; + list-style-type: none; + outline: none; + font-weight: 400; } html { - scroll-behavior: smooth; - scroll-padding-top: 15vh; + scroll-behavior: smooth; + scroll-padding-top: 15vh; } .top { - display: flex; - flex-wrap: wrap; - height: 85dvh; - margin: 2% 5%; - gap: 10px; - padding-top: 25px; + display: flex; + flex-wrap: wrap; + height: 85dvh; + margin: 2% 5%; + gap: 10px; + padding-top: 25px; } -.main, .item { - flex: 1 1 1000px; - height: 85dvh; - position: relative; - overflow: hidden; - cursor: pointer; +.main, +.item { + flex: 1 1 1000px; + height: 85dvh; + position: relative; + overflow: hidden; + cursor: pointer; } .item .content { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.5); - color: white; - display: flex; - flex-direction: column; - justify-content: flex-end; - padding: 10px; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + color: white; + display: flex; + flex-direction: column; + justify-content: flex-end; + padding: 10px; } .item .content p { - margin-top: 15px; - display: flex; - gap: 30px; - color:white; + margin-top: 15px; + display: flex; + gap: 30px; + color: white; } .top .topics { - flex: 1 1 300px; - display: flex; - flex-direction: column; - background-color: #f4f6fa; - justify-content: center; - gap: 0; + flex: 1 1 300px; + display: flex; + flex-direction: column; + background-color: #f4f6fa; + justify-content: center; + gap: 0; } .top .topics h3 { - padding: 10px; - padding-bottom: 20px; - font-size: 35px; + padding: 10px; + padding-bottom: 20px; + font-size: 35px; } .top .topics li { - width: 100%; - display: flex; - align-items: center; - justify-content: left; - gap: 20px; - padding: 10px; - border-bottom: 1px solid rgb(205, 205, 205); - cursor: pointer; - color: grey; + width: 100%; + display: flex; + align-items: center; + justify-content: left; + gap: 20px; + padding: 10px; + border-bottom: 1px solid rgb(205, 205, 205); + cursor: pointer; + color: grey; } .top .topics li img { - height: 45px; - width: 45px; - border-radius: 50%; + height: 45px; + width: 45px; + border-radius: 50%; } -.top .topics>a { - color: grey; - padding: 0 10px; +.top .topics > a { + color: grey; + padding: 0 10px; } -.top .topics>a:hover { - color: black; - text-decoration: underline; +.top .topics > a:hover { + color: black; + text-decoration: underline; } .top .topics li:hover { - background-color: rgb(229, 229, 229); + background-color: rgb(229, 229, 229); } @media all and (max-width: 1000px) { - .top { - height: fit-content; - } + .top { + height: fit-content; + } } .cards { - padding: 2% 5%; - width: 100%; - + padding: 2% 5%; + width: 100%; } .cards h1 { - padding: 15px 0; - border-bottom: 1px solid rgb(205, 205, 205); - margin-bottom: 20px; - display: flex; - justify-content: space-between; - align-items: center; + padding: 15px 0; + border-bottom: 1px solid rgb(205, 205, 205); + margin-bottom: 20px; + display: flex; + justify-content: space-between; + align-items: center; } .cards-wrapper { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); - gap: 18px; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 18px; } .card { - background-color: #f4f6fa; - display: flex; - gap: 15px; - flex-direction: column; - cursor: pointer; - overflow: hidden; + background-color: #f4f6fa; + display: flex; + gap: 15px; + flex-direction: column; + cursor: pointer; + overflow: hidden; } .card .image { - width: 100%; - height: 400px; - overflow: hidden; + width: 100%; + height: 400px; + overflow: hidden; } .card img, .main img { - width: 100%; - height: 100%; - transition: 0.3s; + width: 100%; + height: 100%; + transition: 0.3s; } .title { - font-size: 25px; - padding: 0 10px; - flex: 1; + font-size: 25px; + padding: 0 10px; + flex: 1; } .card p { - display: flex; - justify-content: space-between; - padding: 0 10px; - padding-bottom: 15px; - color: grey; - font-size: 18px; + display: flex; + justify-content: space-between; + padding: 0 10px; + padding-bottom: 15px; + color: grey; + font-size: 18px; } .card:hover img, .main:hover img { - transform: scale(1.1); + transform: scale(1.1); } .card:hover .title, .main:hover h2 { - text-decoration: underline; + text-decoration: underline; } button { - padding: 10px 15px; - border-radius: 25px; - display: flex; - align-items: center; - text-align: center; - border: 1px solid #3bb77e; - color: #008849; - cursor: pointer; - transition: 0.3s; - font-size: 20px; + padding: 10px 15px; + border-radius: 25px; + display: flex; + align-items: center; + text-align: center; + border: 1px solid #3bb77e; + color: #008849; + cursor: pointer; + transition: 0.3s; + font-size: 20px; } /* slider styles */ .homeSlider { - width: 100%; - height: 100%; - padding: 0; + width: 100%; + height: 100%; + padding: 0; } .homeSlider-inner { - height: 100%; + height: 100%; } .home_slider_Main { - overflow: hidden; - position: relative; - height: 100%; - border-radius: 0; - + overflow: hidden; + position: relative; + height: 100%; + border-radius: 0; } .slick-arrow { - position: absolute; - top: 47%; - width: 60px !important; - height: 60px !important; - border-radius: 50% !important; - background: #f2f3f4 !important; - z-index: 10 !important; - transition: all 0.2s ease-in-out; - box-shadow: - 0 3px 6px rgba(0, 0, 0, 0.16), - 0 3px 6px rgba(0, 0, 0, 0.23); + position: absolute; + top: 47%; + width: 60px !important; + height: 60px !important; + border-radius: 50% !important; + background: #f2f3f4 !important; + z-index: 10 !important; + transition: all 0.2s ease-in-out; + box-shadow: + 0 3px 6px rgba(0, 0, 0, 0.16), + 0 3px 6px rgba(0, 0, 0, 0.23); } .slick-arrow.slick-next { - right: 1.5% !important; + right: 1.5% !important; } .slick-arrow.slick-prev { - left: 1.5% !important; + left: 1.5% !important; } .slick-prev:before { - content: '\f104' !important; - font-family: FontAwesome !important; - font-size: 30px !important; - color: #000 !important; + content: '\f104' !important; + font-family: FontAwesome !important; + font-size: 30px !important; + color: #000 !important; } .slick-next:before { - content: '\f105' !important; - font-family: FontAwesome !important; - font-size: 30px !important; - color: #000 !important; + content: '\f105' !important; + font-family: FontAwesome !important; + font-size: 30px !important; + color: #000 !important; } .slick-arrow:hover { - background: #3bb77e !important; + background: #3bb77e !important; } .slick-arrow:hover::before { - color: #fff !important; + color: #fff !important; } .home_slider_Main .slick-dots { - position: absolute; - bottom: 30px !important; + position: absolute; + bottom: 30px !important; } .home_slider_Main .slick-dots button::before { - width: 10px !important; - height: 10px !important; - font-size: 18px !important; + width: 10px !important; + height: 10px !important; + font-size: 18px !important; } .slick-active button::before { - color: #3bb77e !important; + color: #3bb77e !important; } .item { - background-color: aliceblue; + background-color: aliceblue; } .w-100 { - width: 100%; + width: 100%; } .w-n { - width: 2376px; - object-fit: cover; - height: 807px; -} \ No newline at end of file + width: 2376px; + object-fit: cover; + height: 807px; +} diff --git a/src/responsive.css b/src/responsive.css index 8618fd1..7dc71ce 100644 --- a/src/responsive.css +++ b/src/responsive.css @@ -339,7 +339,7 @@ justify-content: space-between; width: 100%; font-size: 24px !important; - color: white ; + color: white; font-weight: 900; padding: 7px 25px; } From e63ee868051f556bfa1e5cd92d08ce08bb69de21 Mon Sep 17 00:00:00 2001 From: Dev Date: Tue, 23 Jul 2024 10:34:41 +0530 Subject: [PATCH 3/3] contact page --- src/pages/Contactus/Contactus.jsx | 36 ++++++++--------------------- src/pages/Contactus/contactus.css | 38 +++++++++++++------------------ 2 files changed, 26 insertions(+), 48 deletions(-) diff --git a/src/pages/Contactus/Contactus.jsx b/src/pages/Contactus/Contactus.jsx index ac35504..0da8dc5 100644 --- a/src/pages/Contactus/Contactus.jsx +++ b/src/pages/Contactus/Contactus.jsx @@ -1,6 +1,6 @@ -import { Button, TextField, TextareaAutosize, Typography } from '@mui/material'; +import { Button, TextareaAutosize, TextField, Typography } from '@mui/material'; import React, { useRef, useState } from 'react'; -import { Slide, ToastContainer, toast } from 'react-toastify'; +import { Slide, toast, ToastContainer } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; import './contactus.css'; @@ -83,7 +83,7 @@ export default function Contactus() { theme: 'light', transition: Slide, closeButton: true, - style: { fontSize: '16px' } // Increase font size of the toast + style: { fontSize: '16px' } }); }; @@ -96,8 +96,8 @@ export default function Contactus() { Get In Touch
-
- {/*
+ +

@@ -129,12 +126,11 @@ export default function Contactus() { error={!!inputErrors.user_email} helperText={inputErrors.user_email} InputProps={{ - style: { fontSize: '1.2rem', padding: '10px' } // Increase input text size + style: { fontSize: '1.2rem', padding: '10px' } }} />

-
{inputErrors.message && ( @@ -167,25 +163,13 @@ export default function Contactus() {
- +
diff --git a/src/pages/Contactus/contactus.css b/src/pages/Contactus/contactus.css index 25d2365..a5bc8d8 100644 --- a/src/pages/Contactus/contactus.css +++ b/src/pages/Contactus/contactus.css @@ -276,7 +276,7 @@ .contact-section-light { margin: auto; margin-top: 11%; - width: 90vw; + width: 60vw; /* max-width: 600px; */ } @media (max-width: 600px) { @@ -298,7 +298,7 @@ align-items: center; justify-content: space-evenly; padding: 40px 0; -<<<<<<< HEAD + height: 700px; } @@ -306,53 +306,47 @@ font-size: 40px; font-weight: 700; color: white; -======= - } .contact-card h1 { font-size: 72px; font-weight: 800; color: rgb(8, 90, 31); ->>>>>>> af8dd9d11e4d459ff9d66de24f659e31373f46c3 letter-spacing: 1px; } .contact-card input { -<<<<<<< HEAD color: black; background: white; } -======= +/* color: rgb(1, 80, 0); background-color: rgba(192, 255, 204, 0.199); border: 1px solid darkgreen; -} -.contact-card input::placeholder{ +} */ +.contact-card input::placeholder { color: darkgreen; } -.contact-card input:focus{ +.contact-card input:focus { background-color: rgba(58, 137, 58, 0.208); } ->>>>>>> af8dd9d11e4d459ff9d66de24f659e31373f46c3 + .inside-contact { /* background: #000; */ width: 90%; } -<<<<<<< HEAD -======= -.contact-form{ +.contact-form { display: flex; - flex-direction: column; - justify-content: space-evenly; - width: 70%; - height: 430px; - /* padding: 50px; */ - margin: auto; -} ->>>>>>> af8dd9d11e4d459ff9d66de24f659e31373f46c3 + flex-direction: column; + justify-content: space-evenly; + width: 70%; + height: 430px; + /* padding: 50px; */ + margin: auto; +} + form { display: flex; flex-direction: column;