diff --git a/index.html b/index.html index 2e5e3ac..5ab35c7 100644 --- a/index.html +++ b/index.html @@ -5,9 +5,26 @@ Tanami + +
+ + + diff --git a/package.json b/package.json index 07f41c7..727c7dd 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,8 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-icons": "^5.2.1", - "react-router-dom": "^6.23.1" + "react-router-dom": "^6.23.1", + "react-scroll": "^1.9.0" }, "devDependencies": { "@types/react": "^18.2.66", diff --git a/src/Components/Faq.jsx b/src/Components/Faq.jsx new file mode 100644 index 0000000..97e8b05 --- /dev/null +++ b/src/Components/Faq.jsx @@ -0,0 +1,149 @@ +import { AddIcon, MinusIcon } from "@chakra-ui/icons"; +import { + Accordion, + AccordionButton, + AccordionIcon, + AccordionItem, + AccordionPanel, + Box, + Container, + Text, +} from "@chakra-ui/react"; + +export const faq = [ + { + question: "How do I get started with your app?", + answer: + "To get started, simply download the Tanami app from the App Store or Google Play Store. Follow the on-screen instructions to create an account and complete the registration process. Once your account is set up, you can explore our investment options.", + }, + { + question: "How do I get started with your app?", + answer: + "To get started, simply download the Tanami app from the App Store or Google Play Store. Follow the on-screen instructions to create an account and complete the registration process. Once your account is set up, you can explore our investment options.", + }, + { + question: "How do I get started with your app?", + answer: + "To get started, simply download the Tanami app from the App Store or Google Play Store. Follow the on-screen instructions to create an account and complete the registration process. Once your account is set up, you can explore our investment options.", + }, + { + question: "How do I get started with your app?", + answer: + "To get started, simply download the Tanami app from the App Store or Google Play Store. Follow the on-screen instructions to create an account and complete the registration process. Once your account is set up, you can explore our investment options.", + }, + { + question: "How do I get started with your app?", + answer: + "To get started, simply download the Tanami app from the App Store or Google Play Store. Follow the on-screen instructions to create an account and complete the registration process. Once your account is set up, you can explore our investment options.", + }, + { + question: "How do I get started with your app?", + answer: + "To get started, simply download the Tanami app from the App Store or Google Play Store. Follow the on-screen instructions to create an account and complete the registration process. Once your account is set up, you can explore our investment options.", + }, +]; + +const Faq = () => { + return ( + + + + Frequently asked questions + + + Everything you need to know about the property investment. + + + + + + {faq.map(({ question, answer }, index) => ( + + {({ isExpanded }) => ( + <> + + + {question} + + {isExpanded ? ( + + ) : ( + + )} + + + {answer} + + + )} + + + ))} + + + + + ); +}; + +export default Faq; diff --git a/src/Components/Footer.jsx b/src/Components/Footer.jsx index d40822a..8313ecc 100644 --- a/src/Components/Footer.jsx +++ b/src/Components/Footer.jsx @@ -11,6 +11,7 @@ const Footer = () => { { const [showHeader, setShowHeader] = useState(true); const [lastScrollY, setLastScrollY] = useState(0); - const threshold = 50; // Adjust this value to change sensitivity + const navigate = useNavigate(); + const threshold = 0; + const controlHeader = () => { if (window.scrollY > lastScrollY + threshold) { setShowHeader(false); @@ -45,11 +47,31 @@ const Header = () => { }; }, [lastScrollY]); + const handleNavClick = (path) => { + if (path === "aboutus") { + navigate(`/${path}`); + } else { + navigate("/"); + } + }; + + const handleLanguageChange = (e) => { + const language = e.target.value; + const googleTranslateElement = document.querySelector("#google_translate_element select"); + if (googleTranslateElement) { + googleTranslateElement.value = language; + googleTranslateElement.dispatchEvent(new Event("change")); + } + }; + return ( - + { maxW="container.xl" > - + + - {nav.map(({ title, path }, index) => ( - - {title} - - ))} + {nav.map(({ title, path }, index) => + path === "aboutus" ? ( + handleNavClick(path)} + > + {title} + + ) : ( + handleNavClick(path)} + > + {title} + + ) + )} - - - En - + + + + + + + + + ); }; diff --git a/src/Components/Hero.jsx b/src/Components/Hero.jsx index 5cfdda3..a406cab 100644 --- a/src/Components/Hero.jsx +++ b/src/Components/Hero.jsx @@ -6,10 +6,11 @@ import heroImage from "../assets/heroImage.png"; import apple from "../assets/apple.png"; import playstore from "../assets/playstore.png"; +import { OPACITY_ON_LOAD } from "../Layout/animations"; const Hero = () => { return ( - + { + const [spanHeight, setSpanHeight] = useState(25); + const intervalRef = useRef(null); // Use ref to store interval ID + + useEffect(() => { + intervalRef.current = setInterval(() => { + setSpanHeight((prevHeight) => (prevHeight >= 100 ? 25 : prevHeight + 25)); + }, 3000); + + return () => clearInterval(intervalRef.current); // Clean up the interval on component unmount + }, []); + + const handleBoxClick = (index) => { + const newHeight = (index + 1) * 25; + setSpanHeight(newHeight); + clearInterval(intervalRef.current); // Clear the interval when a box is clicked + }; + + + return ( + + + + + How does it work? + + + + + + + handleBoxClick(0)} p={12} pt={4} pb={2}> + + Sign-up + + + Create an account with Tanami and get approved in under 10 + minutes. + + + + handleBoxClick(1)} p={12} pt={4} pb={2}> + + Browse + + + Select from top-tier funds approved on the Tanami platform. + + + + handleBoxClick(2)} p={12} pt={4} pb={2}> + + Invest + + + Fund investments using a bank transfer, debit or credit card. + + + + handleBoxClick(3)} p={12} pt={4} pb={2}> + + Monitor + + + Stay up to date with the performance of your investment + portfolio, live on the app. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default HowItWorks; diff --git a/src/Components/InvestmentPlatform.jsx b/src/Components/InvestmentPlatform.jsx index 9efdd59..5a5ee4a 100644 --- a/src/Components/InvestmentPlatform.jsx +++ b/src/Components/InvestmentPlatform.jsx @@ -47,7 +47,7 @@ const InvestmentPlatform = () => { }, []); return ( - + { p={4} > { + const { pathname } = useLocation(); + + useEffect(() => { + window.scrollTo(0, 0); + }, [pathname]); +}; + +export default UseScrollToTop; \ No newline at end of file diff --git a/src/Layout/animations.jsx b/src/Layout/animations.jsx new file mode 100644 index 0000000..7ac044d --- /dev/null +++ b/src/Layout/animations.jsx @@ -0,0 +1,23 @@ +import { motion } from "framer-motion"; + +export const OPACITY_ON_LOAD = { + as: motion.div, + initial: { opacity: 0 }, + animate: { opacity: 1 } +} + +export const SLIDE_IN_BOTTOM = { + as: motion.div, + initial: { opacity: 0, y: 50 }, + animate: { opacity: 1, y: 0 }, + transition: { duration: 0.5, ease: "easeInOut" } + }; + + + export const FADE_IN_SCALE_UP = { + as: motion.div, + initial: { opacity: 0, scale: 0.9 }, + animate: { opacity: 1, scale: 1 }, + transition: { duration: 0.5, ease: "easeInOut" } + }; + \ No newline at end of file diff --git a/src/Pages/Home.jsx b/src/Pages/Home.jsx index a480f86..7fe43ab 100644 --- a/src/Pages/Home.jsx +++ b/src/Pages/Home.jsx @@ -1,13 +1,22 @@ -import React from 'react' +import React, { useEffect } from 'react' import Hero from '../Components/Hero' import InvestmentPlatform from '../Components/InvestmentPlatform' import Advertising from '../Components/Advertising' +import HowItWorks from '../Components/HowItWorks' +import Faq from '../Components/Faq' +import UseScrollToTop from '../Components/UseScrollToTop' const Home = () => { + // UseScrollToTop(); + useEffect(() => { + window.scrollTo(0, 0); + }, []); return ( <> + + ) diff --git a/src/assets/asset3.png b/src/assets/asset3.png new file mode 100644 index 0000000..13e5290 Binary files /dev/null and b/src/assets/asset3.png differ diff --git a/src/assets/cellFrame.png b/src/assets/cellFrame.png new file mode 100644 index 0000000..ea477cf Binary files /dev/null and b/src/assets/cellFrame.png differ diff --git a/src/assets/cellScreen1.png b/src/assets/cellScreen1.png new file mode 100644 index 0000000..7ed1979 Binary files /dev/null and b/src/assets/cellScreen1.png differ diff --git a/src/assets/cellScreen2.png b/src/assets/cellScreen2.png new file mode 100644 index 0000000..5d6a25e Binary files /dev/null and b/src/assets/cellScreen2.png differ diff --git a/src/index.css b/src/index.css index 5ccfd06..870d29f 100644 --- a/src/index.css +++ b/src/index.css @@ -7,6 +7,19 @@ box-sizing: border-box; } +#google_translate_element { + /* display: none; Hide the default Google Translate dropdown */ + + position: fixed; + bottom: 0; + right: 0; + opacity: 0.1; +} + +.goog-te-banner-frame.skiptranslate { + display: none !important; +} + h2{ font-family: Roca Two !important; diff --git a/yarn.lock b/yarn.lock index ba4b51e..6d4e965 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2719,6 +2719,11 @@ lodash.mergewith@4.6.2: resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz#617121f89ac55f59047c7aec1ccd6654c6590f55" integrity sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ== +lodash.throttle@^4.1.1: + version "4.1.1" + resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4" + integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ== + loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" @@ -2909,7 +2914,7 @@ prelude-ls@^1.2.1: resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g== -prop-types@^15.6.2, prop-types@^15.8.1: +prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -3004,6 +3009,14 @@ react-router@6.23.1: dependencies: "@remix-run/router" "1.16.1" +react-scroll@^1.9.0: + version "1.9.0" + resolved "https://registry.yarnpkg.com/react-scroll/-/react-scroll-1.9.0.tgz#2984006e184afd0e4018f837d127edf5fa8f152c" + integrity sha512-mamNcaX9Ng+JeSbBu97nWwRhYvL2oba+xR2GxvyXsbDeGP+gkYIKZ+aDMMj/n20TbV9SCWm/H7nyuNTSiXA6yA== + dependencies: + lodash.throttle "^4.1.1" + prop-types "^15.7.2" + react-style-singleton@^2.2.1: version "2.2.1" resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"