FernandoJVideira/LK_Landing_Page
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Final touches

Browse Source
This commit is contained in:
Fernando Videira
2024-06-09 22:05:56 +01:00
parent 601d5ac89d
commit 3cbf508664
9 changed files with 146 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1 -1
View File
@@ -13,7 +13,7 @@
></script> ></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="./logo.ico" /> <link rel="icon" href="./logo.ico" />
<title>LK Solutions</title> <title>LK Results</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
package-lock.json
Generated
-11
View File
@@ -11,7 +11,6 @@
"@emailjs/browser": "^4.3.3", "@emailjs/browser": "^4.3.3",
"@headlessui/react": "^1.7.18", "@headlessui/react": "^1.7.18",
"@heroicons/react": "^2.1.3", "@heroicons/react": "^2.1.3",
"emailjs-com": "^3.2.0",
"localforage": "^1.10.0", "localforage": "^1.10.0",
"match-sorter": "^6.3.4", "match-sorter": "^6.3.4",
"react": "^18.2.0", "react": "^18.2.0",
@@ -2094,16 +2093,6 @@
"integrity": "sha512-zjqzx4N7xGdl5468G+vcgzDhaHkaYgVcf9MqgexcTqsl2UHSCmOj/Bi3HAprg4BZCpC7HyD8a6nZl6QAZf72gw==", "integrity": "sha512-zjqzx4N7xGdl5468G+vcgzDhaHkaYgVcf9MqgexcTqsl2UHSCmOj/Bi3HAprg4BZCpC7HyD8a6nZl6QAZf72gw==",
"dev": true "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": { "node_modules/emoji-regex": {
"version": "9.2.2", "version": "9.2.2",
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
package.json
-1
View File
@@ -13,7 +13,6 @@
"@emailjs/browser": "^4.3.3", "@emailjs/browser": "^4.3.3",
"@headlessui/react": "^1.7.18", "@headlessui/react": "^1.7.18",
"@heroicons/react": "^2.1.3", "@heroicons/react": "^2.1.3",
"emailjs-com": "^3.2.0",
"localforage": "^1.10.0", "localforage": "^1.10.0",
"match-sorter": "^6.3.4", "match-sorter": "^6.3.4",
"react": "^18.2.0", "react": "^18.2.0",
src/App.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ export default function App() {
return ( return (
<div className="font-baijam min-h-screen text-white"> <div className="font-baijam min-h-screen text-white">
<Routes> <Routes>
<Route path="/" element={<Home />} /> <Route path="*" element={<Home />} />
</Routes> </Routes>
</div> </div>
); );
src/Components/Footer/Footer.tsx
+40
View File
@@ -0,0 +1,40 @@
import { FaFacebook, FaLinkedin, FaInstagram } from "react-icons/fa";
import { FaXTwitter } from "react-icons/fa6";
const Footer = () => {
return (
<footer className="flex flex-col space-y-10 justify-center m-10">
<div className="flex justify-center space-x-5">
<a
href="https://www.facebook.com/people/LK-Marketing/61556714037746/"
target="_blank"
rel="noopener noreferrer"
>
<FaFacebook className="text-gold-light" size={30} />
</a>
<a
href="https://www.linkedin.com/company/lk-results"
target="_blank"
rel="noopener noreferrer"
>
<FaLinkedin className="text-gold-light" size={30} />
</a>
<a
href="https://instagram.com"
target="_blank"
rel="noopener noreferrer"
>
<FaInstagram className="text-gold-light" size={30} />
</a>
<a href="https://twitter.com" target="_blank" rel="noopener noreferrer">
<FaXTwitter className="text-gold-light" size={30} />
</a>
</div>
<p className="text-center text-gray-400 font-medium">
&copy; 2024 LK Results. All rights reservered.
</p>
</footer>
);
};
export default Footer;
src/Components/Pages/Navbar/Navbar.tsx → src/Components/Navbar/Navbar.tsx
+25 -34
View File
@@ -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 () => { export default () => {
const [state, setState] = useState(false); const [state, setState] = useState(false);
const [colorChange, setColorChange] = useState(false);
const [isNavbarCollapsed, setIsNavbarCollapsed] = useState(
window.innerWidth <= 768
);
const [colorChange, setColorChange] = useState(false);
const changeColor = () => { const changeColor = () => {
if (window.scrollY >= 100) { if (window.scrollY >= 100) {
setColorChange(true); setColorChange(true);
@@ -17,22 +15,7 @@ export default () => {
} }
}; };
const checkNavbarCollapse = () => { window.addEventListener("scroll", changeColor);
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);
};
}, []);
// Replace javascript:void(0) path with your path // Replace javascript:void(0) path with your path
const navigation = [ const navigation = [
@@ -50,32 +33,40 @@ export default () => {
}`} }`}
> >
<div className="items-center px-4 max-w-screen-xl mx-auto md:flex md:px-8"> <div className="items-center px-4 max-w-screen-xl mx-auto md:flex md:px-8">
<div className="flex items-center justify-center md:justify-between py-3 md:py-5 md:block"> <div className="flex items-center justify-between py-3 md:py-5 md:block">
{isNavbarCollapsed ? ( <a href="/">
<img src={Logo} width={60} height={60} alt="logo" />
</a>
<div className="md:hidden">
<button <button
className="outline-none p-2 rounded-md focus:border-gray-400 focus:border" className="outline-none p-2 rounded-md focus:border-gray-400 focus:border"
onClick={() => setState(!state)} onClick={() => setState(!state)}
> >
<img src={Logo} width={60} height={60} alt="logo" /> {state ? (
<FaTimes className="h-6 w-6" />
) : (
<FaBars className="h-6 w-6" />
)}
</button> </button>
) : ( </div>
<a href="/">
<img src={Logo} width={60} height={60} alt="logo" />
</a>
)}
</div> </div>
<div <div
className={`flex-1 justify-self-center pb-3 mt-8 md:block md:pb-0 md:mt-0 ${ className={`absolute top-[3.24rem] md:top-0 left-0 w-full z-50 flex flex-col items-center justify-center pb-3 mt-8 md:relative md:bg-transparent md:pb-0 md:mt-0 ${
state ? "block" : "hidden" state
? colorChange
? "block bg-black bg-opacity-80 transition duration-500"
: "block bg-gradient-to-br from-custom-bglight to-custom-bgdark"
: "hidden md:flex"
}`} }`}
> >
<ul className="text-text-gold justify-center items-center space-y-8 md:flex md:space-x-6 md:space-y-0"> <ul className="text-text-gold space-y-8 md:flex md:space-x-6 md:space-y-0">
{navigation.map((item, idx) => { {navigation.map((item, idx) => {
return ( return (
<li key={idx} className="hover:text-white"> <li key={idx} className="hover:text-white">
<a <a
href={item.path} href={item.path}
className="block py-2 md:py-0 md:px-4 text-xl font-medium$" className="block py-2 md:py-0 md:px-4 text-xl font-medium"
onClick={() => setState(false)}
> >
{item.title} {item.title}
</a> </a>
src/Components/Pages/Contact/ContactForm.tsx
+74 -12
View File
@@ -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 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<HTMLFormElement>) => {
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 ( return (
<div className="mt-10 mx-5 lg:mx-0 flex justify-center items-center"> <div className="mt-10 mx-5 lg:mx-0 flex justify-center items-center">
<form className="w-full md:w-auto"> <form onSubmit={sendEmail} className="w-full md:w-auto">
<div className="flex flex-col md:flex-row md:gap-3"> <div className="flex flex-col md:flex-row md:gap-3">
<input <input
className="form-input" className="form-input"
type="text" type="text"
id="name" name="user_name"
placeholder="Name" placeholder="Name"
/> />
<input <input
className="form-input" className="form-input"
type="email" type="email"
id="email" name="user_email"
placeholder="Email" placeholder="Email"
/> />
</div> </div>
@@ -20,13 +69,13 @@ const ContactForm = () => {
<input <input
className="form-input" className="form-input"
type="text" type="text"
id="company" name="user_company"
placeholder="Company" placeholder="Company"
/> />
<input <input
className="form-input" className="form-input"
type="number" type="number"
id="phone" name="user_phone"
placeholder="Phone" placeholder="Phone"
/> />
</div> </div>
@@ -34,26 +83,39 @@ const ContactForm = () => {
<input <input
className="form-input" className="form-input"
type="text" type="text"
id="question" name="user_question"
placeholder="What is your most important question?" placeholder="What is your most important question?"
></input> ></input>
<textarea <textarea
className="form-input" className="form-input"
name="message" name="message"
id="message"
placeholder="Message" placeholder="Message"
rows={6} rows={6}
></textarea> ></textarea>
</div> </div>
<div className="flex mt-5 mb-10 lg:mt-12 mx-10 lg:mx-20 rounded-xl bg-gradient-to-br from-gold-light to-gold-dark p-0.5 shadow-lg"> <div className="flex mt-5 mb-10 lg:mt-12 mx-10 lg:mx-20 rounded-xl bg-gradient-to-br from-gold-light to-gold-dark p-0.5 shadow-lg">
<a className="flex w-full" href="#Contact"> <button
<button className="flex-1 font-medium md:px-8 py-3 text-2xl md:text-3xl bg-gradient-to-br from-custom-bglight to-custom-bgdark rounded-xl hover:bg-transparent hover:from-transparent hover:to-transparent transition duration-500"> type="submit"
Send! className="flex-1 font-medium md:px-8 py-3 text-2xl md:text-3xl bg-gradient-to-br from-custom-bglight to-custom-bgdark rounded-xl hover:bg-transparent hover:from-transparent hover:to-transparent transition duration-500"
</button> >
</a> Send
</button>
</div> </div>
<ToastContainer
position="top-center"
autoClose={5000}
hideProgressBar
newestOnTop={false}
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover
theme="dark"
/>
</form> </form>
</div> </div>
); );
src/index.css
+2
View File
@@ -23,3 +23,5 @@ body {
.form-input { .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; @apply rounded-xl px-4 py-2 mt-2 bg-gray-bg border-solid border border-gray-300 text-sm md:text-lg;
} }
src/routes/Home.tsx
+3 -1
View File
@@ -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 Hero from "../Components/Pages/Hero/Hero";
import Services from "../Components/Pages/Services/Services"; import Services from "../Components/Pages/Services/Services";
import ResultsPage from "../Components/Pages/Results/ResultsPage"; import ResultsPage from "../Components/Pages/Results/ResultsPage";
import ContactPage from "../Components/Pages/Contact/ContactPage"; import ContactPage from "../Components/Pages/Contact/ContactPage";
import Footer from "../Components/Footer/Footer";
const Home = () => { const Home = () => {
return ( return (
@@ -18,6 +19,7 @@ const Home = () => {
<div id="Contact"> <div id="Contact">
<ContactPage /> <ContactPage />
</div> </div>
<Footer />
</div> </div>
); );
}; };