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

Added TOS + Privacy

Browse Source
This commit is contained in:
Fernando Videira
2024-06-19 19:59:42 +01:00
parent a21cca3df9
commit 0cd2bf4c38
12 changed files with 337 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+4
View File
@@ -1,11 +1,15 @@
import { Route, Routes } from "react-router-dom";
import Home from "./routes/Home";
import TOS from "./routes/TOS";
import PP from "./routes/PP";
export default function App() {
return (
<div className="font-baijam min-h-screen text-white">
<Routes>
<Route path="*" element={<Home />} />
<Route path="tos" element={<TOS />} />
<Route path="privacy" element={<PP />} />
</Routes>
</div>
);
src/Components/Footer/Footer.tsx
+18
View File
@@ -21,6 +21,7 @@ const Footer = () => {
>
<FaLinkedin className="text-gold-light" size={30} />
</a>
{/* Uncomment these lines if you want to include Instagram and Twitter icons */}
{/* <a
href="https://instagram.com"
target="_blank"
@@ -32,6 +33,22 @@ const Footer = () => {
<FaXTwitter className="text-gold-light" size={30} />
</a> */}
</div>
<div className="flex justify-center space-x-5">
<a
href="/tos"
className="text-gray-400 hover:text-gold-light font-medium"
>
{t("footer.tos")}
</a>
<a
href="/privacy"
className="text-gray-400 hover:text-gold-light font-medium"
>
{t("footer.privacy")}
</a>
</div>
<p className="text-center text-gray-400 font-medium">
{t("footer.rights")}
</p>
@@ -40,3 +57,4 @@ const Footer = () => {
};
export default Footer;
src/Components/Navbar/Navbar.tsx
+36 -11
View File
@@ -1,4 +1,4 @@
import { useState } from "react";
import { useState, useEffect } from "react";
import { FaTimes, FaBars } from "react-icons/fa";
import Logo from "../../assets/logo.svg";
@@ -9,15 +9,27 @@ export default () => {
const { t, i18n } = useTranslation();
const [colorChange, setColorChange] = useState(false);
const changeColor = () => {
if (window.scrollY >= 100) {
setColorChange(true);
} else {
setColorChange(false);
}
};
useEffect(() => {
const changeColor = () => {
if (window.scrollY >= 100) {
setColorChange(true);
} else {
setColorChange(false);
}
};
window.addEventListener("scroll", changeColor);
window.addEventListener("scroll", changeColor);
const scrollPath = sessionStorage.getItem("scrollPath");
if (scrollPath) {
smoothScroll(scrollPath);
sessionStorage.removeItem("scrollPath");
}
return () => {
window.removeEventListener("scroll", changeColor);
};
}, []);
const navigation = [
{ title: t("navbar.services"), path: "Services" },
@@ -27,6 +39,15 @@ export default () => {
];
const handleNavigation = (path: string) => {
if ((window.location.pathname === "/tos" || window.location.pathname === "/privacy") && navigation.some(navItem => navItem.path === path)) {
sessionStorage.setItem("scrollPath", path);
window.location.href = "/";
}else{
smoothScroll(path)
}
};
const smoothScroll = (path :string) => {
const element = document.getElementById(path);
const navbarHeight = 110; // Replace with your navbar's height
if (element) {
@@ -34,7 +55,7 @@ export default () => {
element.getBoundingClientRect().top + window.scrollY - navbarHeight;
window.scrollTo({ top: top, behavior: "smooth" });
}
};
}
const changeLanguage = (lng: string) => {
i18n.changeLanguage(lng);
@@ -54,7 +75,11 @@ export default () => {
href="Top"
onClick={(e) => {
e.preventDefault(); // Prevent the default anchor tag behavior
window.scrollTo({ top: 0, behavior: "smooth" }); // Scroll to the top of the page
if (window.location.pathname === "/") {
window.scrollTo({ top: 0, behavior: "smooth" });
} else {
window.location.href = "/";
}
}}
>
<img src={Logo} width={60} height={60} alt="logo" />
src/i18n.ts
+3 -1
View File
@@ -13,9 +13,11 @@ i18n
// init i18next
// for all options read: https://www.i18next.com/overview/configuration-options
.init({
ns: ['common', 'TOS'],
defaultNS: 'common',
backend: {
// translation file path
loadPath: "/locales/{{lng}}.json",
loadPath: (lng : string, ns : string) => `/locales/${ns}/${lng}.json`,
},
debug: true,
fallbackLng: "en",
src/routes/PP.tsx
+71
View File
@@ -0,0 +1,71 @@
import { useTranslation } from "react-i18next";
import Navbar from "../Components/Navbar/Navbar";
import Footer from "../Components/Footer/Footer";
const PP = () => {
const { t } = useTranslation("PP")
return (
<div className="min-h-screen">
<Navbar />
<div className="container mx-auto px-4 py-12">
<h1 className="text-3xl font-bold text-center mb-6">{t("pp.pageTitle")}</h1>
<div className="shadow-md rounded-lg p-8">
<p className="mb-4">{t("pp.lastUpdated")}</p>
<p className="mb-4">{t("pp.introText")}</p>
<h2 className="text-2xl font-semibold mb-4">{t("pp.pp1.title")}</h2>
{t("pp.pp1.desc").split("\n\n").map((paragraph, index) => (
<p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
<span key={index}>{line}<br/></span>
))}</p>
))}
<h2 className="text-2xl font-semibold mb-4">{t("pp.pp2.title")}</h2>
{t("pp.pp2.desc").split("\n\n").map((paragraph, index) => (
<p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
<span key={index}>{line}<br/></span>
))}</p>
))}
<h2 className="text-2xl font-semibold mb-4">{t("pp.pp3.title")}</h2>
{t("pp.pp3.desc").split("\n\n").map((paragraph, index) => (
<p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
<span key={index}>{line}<br/></span>
))}</p>
))}
<h2 className="text-2xl font-semibold mb-4">{t("pp.pp4.title")}</h2>
{t("pp.pp4.desc").split("\n\n").map((paragraph, index) => (
<p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
<span key={index}>{line}<br/></span>
))}</p>
))}
<h2 className="text-2xl font-semibold mb-4">{t("pp.pp5.title")}</h2>
{t("pp.pp5.desc").split("\n\n").map((paragraph, index) => (
<p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
<span key={index}>{line}<br/></span>
))}</p>
))}
<h2 className="text-2xl font-semibold mb-4">{t("pp.pp6.title")}</h2>
{t("pp.pp6.desc").split("\n\n").map((paragraph, index) => (
<p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
<span key={index}>{line}<br/></span>
))}</p>
))}
<h2 className="text-2xl font-semibold mb-4">{t("pp.pp7.title")}</h2>
{t("pp.pp7.desc").split("\n\n").map((paragraph, index) => (
<p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
<span key={index}>{line}<br/></span>
))}</p>
))}
<h2 className="text-2xl font-semibold mb-4">{t("pp.pp8.title")}</h2>
{t("pp.pp8.desc").split("\n\n").map((paragraph, index) => (
<p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
<span key={index}>{line}<br/></span>
))}</p>
))}
</div>
</div>
<Footer/>
</div>
);
};
export default PP;
src/routes/TOS.tsx
+59
View File
@@ -0,0 +1,59 @@
import { useTranslation } from "react-i18next";
import Navbar from "../Components/Navbar/Navbar";
import Footer from "../Components/Footer/Footer";
const TOS = () => {
const { t } = useTranslation("TOS")
return (
<div className="min-h-screen">
<Navbar />
<div className="container mx-auto px-4 py-12">
<h1 className="text-3xl font-bold text-center mb-6">{t("tos.pageTitle")}</h1>
<div className="shadow-md rounded-lg p-8">
<p className="mb-4">{t("tos.lastUpdated")}</p>
<p className="mb-4">{t("tos.introText")}</p>
<h2 className="text-2xl font-semibold mb-4">{t("tos.tos1.title")}</h2>
{t("tos.tos1.desc").split("\n\n").map((paragraph, index) => (
<p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
<span key={index}>{line}<br/></span>
))}</p>
))}
<h2 className="text-2xl font-semibold mb-4">{t("tos.tos2.title")}</h2>
{t("tos.tos2.desc").split("\n\n").map((paragraph, index) => (
<p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
<span key={index}>{line}<br/></span>
))}</p>
))}
<h2 className="text-2xl font-semibold mb-4">{t("tos.tos3.title")}</h2>
{t("tos.tos3.desc").split("\n\n").map((paragraph, index) => (
<p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
<span key={index}>{line}<br/></span>
))}</p>
))}
<h2 className="text-2xl font-semibold mb-4">{t("tos.tos4.title")}</h2>
{t("tos.tos4.desc").split("\n\n").map((paragraph, index) => (
<p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
<span key={index}>{line}<br/></span>
))}</p>
))}
<h2 className="text-2xl font-semibold mb-4">{t("tos.tos5.title")}</h2>
{t("tos.tos5.desc").split("\n\n").map((paragraph, index) => (
<p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
<span key={index}>{line}<br/></span>
))}</p>
))}
<h2 className="text-2xl font-semibold mb-4">{t("tos.tos6.title")}</h2>
{t("tos.tos6.desc").split("\n\n").map((paragraph, index) => (
<p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
<span key={index}>{line}<br/></span>
))}</p>
))}
</div>
</div>
<Footer/>
</div>
);
};
export default TOS;