diff --git a/index.html b/index.html index 6cfcdb0..37a4fd4 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,7 @@ > - LK Solutions + LK Results
diff --git a/package-lock.json b/package-lock.json index d706990..9e20599 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,6 @@ "@emailjs/browser": "^4.3.3", "@headlessui/react": "^1.7.18", "@heroicons/react": "^2.1.3", - "emailjs-com": "^3.2.0", "localforage": "^1.10.0", "match-sorter": "^6.3.4", "react": "^18.2.0", @@ -2094,16 +2093,6 @@ "integrity": "sha512-zjqzx4N7xGdl5468G+vcgzDhaHkaYgVcf9MqgexcTqsl2UHSCmOj/Bi3HAprg4BZCpC7HyD8a6nZl6QAZf72gw==", "dev": true }, - "node_modules/emailjs-com": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/emailjs-com/-/emailjs-com-3.2.0.tgz", - "integrity": "sha512-Prbz3E1usiAwGjMNYRv6EsJ5c373cX7/AGnZQwOfrpNJrygQJ15+E9OOq4pU8yC977Z5xMetRfc3WmDX6RcjAA==", - "deprecated": "The SDK name changed to @emailjs/browser", - "license": "MIT", - "engines": { - "node": ">=12.0.0" - } - }, "node_modules/emoji-regex": { "version": "9.2.2", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", diff --git a/package.json b/package.json index b4e82b5..ddcf0e7 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,6 @@ "@emailjs/browser": "^4.3.3", "@headlessui/react": "^1.7.18", "@heroicons/react": "^2.1.3", - "emailjs-com": "^3.2.0", "localforage": "^1.10.0", "match-sorter": "^6.3.4", "react": "^18.2.0", diff --git a/src/App.tsx b/src/App.tsx index 21b8ed9..4713f5b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,7 +5,7 @@ export default function App() { return (
- } /> + } />
); diff --git a/src/Components/Footer/Footer.tsx b/src/Components/Footer/Footer.tsx new file mode 100644 index 0000000..d7cc818 --- /dev/null +++ b/src/Components/Footer/Footer.tsx @@ -0,0 +1,40 @@ +import { FaFacebook, FaLinkedin, FaInstagram } from "react-icons/fa"; +import { FaXTwitter } from "react-icons/fa6"; + +const Footer = () => { + return ( + + ); +}; + +export default Footer; diff --git a/src/Components/Pages/Navbar/Navbar.tsx b/src/Components/Navbar/Navbar.tsx similarity index 53% rename from src/Components/Pages/Navbar/Navbar.tsx rename to src/Components/Navbar/Navbar.tsx index a664171..020b21b 100644 --- a/src/Components/Pages/Navbar/Navbar.tsx +++ b/src/Components/Navbar/Navbar.tsx @@ -1,14 +1,12 @@ -import { useEffect, useState } from "react"; +import { useState } from "react"; +import { FaTimes, FaBars } from "react-icons/fa"; -import Logo from "../../../assets/logo.svg"; +import Logo from "../../assets/logo.svg"; export default () => { const [state, setState] = useState(false); - const [colorChange, setColorChange] = useState(false); - const [isNavbarCollapsed, setIsNavbarCollapsed] = useState( - window.innerWidth <= 768 - ); + const [colorChange, setColorChange] = useState(false); const changeColor = () => { if (window.scrollY >= 100) { setColorChange(true); @@ -17,22 +15,7 @@ export default () => { } }; - const checkNavbarCollapse = () => { - if (window.innerWidth <= 768) { - setIsNavbarCollapsed(true); - } else { - setIsNavbarCollapsed(false); - } - }; - - useEffect(() => { - window.addEventListener("scroll", changeColor); - window.addEventListener("resize", checkNavbarCollapse); - return () => { - window.removeEventListener("scroll", changeColor); - window.removeEventListener("resize", checkNavbarCollapse); - }; - }, []); + window.addEventListener("scroll", changeColor); // Replace javascript:void(0) path with your path const navigation = [ @@ -50,32 +33,40 @@ export default () => { }`} >
-
- {isNavbarCollapsed ? ( +
+ + logo + +
- ) : ( - - logo - - )} +
-
    +
      {navigation.map((item, idx) => { return (
    • setState(false)} > {item.title} diff --git a/src/Components/Pages/Contact/ContactForm.tsx b/src/Components/Pages/Contact/ContactForm.tsx index 9d7ed25..c4007b3 100644 --- a/src/Components/Pages/Contact/ContactForm.tsx +++ b/src/Components/Pages/Contact/ContactForm.tsx @@ -1,18 +1,67 @@ +import React from "react"; +import emailjs from "@emailjs/browser"; +import { ToastContainer, toast } from "react-toastify"; +import "react-toastify/dist/ReactToastify.css"; + const ContactForm = () => { + const notify = () => { + toast.success("Message Sent Successfully!"); + }; + + const errorToast = () => { + toast.error("Error Sending Message!"); + }; + + const emptyForm = () => { + toast.warning("Please fill all the fields!"); + }; + + const sendEmail = (e: React.FormEvent) => { + e.preventDefault(); + + let isEmpty = Array.from(e.currentTarget.elements).some( + (input) => + (input as HTMLInputElement).type !== "submit" && + (input as HTMLInputElement).value.trim() === "" + ); + + if (isEmpty) { + emptyForm(); + return; + } + + emailjs + .sendForm("service_42i3ig6", "template_f30zlog", e.currentTarget, { + publicKey: "vcSOwPedqkRH3nmr9", + }) + .then( + (result) => { + console.log(result.text); + notify(); + }, + (error) => { + console.log(error.text); + errorToast(); + } + ); + + e.currentTarget.reset(); + }; + return (
      -
      +
      @@ -20,13 +69,13 @@ const ContactForm = () => {
      @@ -34,26 +83,39 @@ const ContactForm = () => {
- - - +
+ +
); diff --git a/src/index.css b/src/index.css index aa5c56a..86242b3 100644 --- a/src/index.css +++ b/src/index.css @@ -23,3 +23,5 @@ body { .form-input { @apply rounded-xl px-4 py-2 mt-2 bg-gray-bg border-solid border border-gray-300 text-sm md:text-lg; } + + diff --git a/src/routes/Home.tsx b/src/routes/Home.tsx index 8961d36..2ad367a 100644 --- a/src/routes/Home.tsx +++ b/src/routes/Home.tsx @@ -1,8 +1,9 @@ -import Navbar from "../Components/Pages/Navbar/Navbar"; +import Navbar from "../Components/Navbar/Navbar"; import Hero from "../Components/Pages/Hero/Hero"; import Services from "../Components/Pages/Services/Services"; import ResultsPage from "../Components/Pages/Results/ResultsPage"; import ContactPage from "../Components/Pages/Contact/ContactPage"; +import Footer from "../Components/Footer/Footer"; const Home = () => { return ( @@ -18,6 +19,7 @@ const Home = () => {
+
); };