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>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="./logo.ico" />
<title>LK Solutions</title>
<title>LK Results</title>
</head>
<body>
<div id="root"></div>
package-lock.json
Generated
-11
View File
@@ -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",
package.json
-1
View File
@@ -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",
src/App.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ export default function App() {
return (
<div className="font-baijam min-h-screen text-white">
<Routes>
<Route path="/" element={<Home />} />
<Route path="*" element={<Home />} />
</Routes>
</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 () => {
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 () => {
}`}
>
<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">
{isNavbarCollapsed ? (
<div className="flex items-center justify-between py-3 md:py-5 md:block">
<a href="/">
<img src={Logo} width={60} height={60} alt="logo" />
</a>
<div className="md:hidden">
<button
className="outline-none p-2 rounded-md focus:border-gray-400 focus:border"
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>
) : (
<a href="/">
<img src={Logo} width={60} height={60} alt="logo" />
</a>
)}
</div>
</div>
<div
className={`flex-1 justify-self-center pb-3 mt-8 md:block md:pb-0 md:mt-0 ${
state ? "block" : "hidden"
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
? 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) => {
return (
<li key={idx} className="hover:text-white">
<a
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}
</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 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 (
<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">
<input
className="form-input"
type="text"
id="name"
name="user_name"
placeholder="Name"
/>
<input
className="form-input"
type="email"
id="email"
name="user_email"
placeholder="Email"
/>
</div>
@@ -20,13 +69,13 @@ const ContactForm = () => {
<input
className="form-input"
type="text"
id="company"
name="user_company"
placeholder="Company"
/>
<input
className="form-input"
type="number"
id="phone"
name="user_phone"
placeholder="Phone"
/>
</div>
@@ -34,26 +83,39 @@ const ContactForm = () => {
<input
className="form-input"
type="text"
id="question"
name="user_question"
placeholder="What is your most important question?"
></input>
<textarea
className="form-input"
name="message"
id="message"
placeholder="Message"
rows={6}
></textarea>
</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">
<a className="flex w-full" href="#Contact">
<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">
Send!
</button>
</a>
<button
type="submit"
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"
>
Send
</button>
</div>
<ToastContainer
position="top-center"
autoClose={5000}
hideProgressBar
newestOnTop={false}
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover
theme="dark"
/>
</form>
</div>
);
src/index.css
+2
View File
@@ -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;
}
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 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 = () => {
<div id="Contact">
<ContactPage />
</div>
<Footer />
</div>
);
};