Siddhesh.More/tanami
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

landing page updated

Browse Source
This commit is contained in:
Siddhesh More
2024-06-21 12:37:32 +05:30
parent 107f176bbe
commit bce7fa205f
17 changed files with 560 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
index.html
View File

@@ -5,9 +5,26 @@
<link rel="icon" type="image/svg+xml" href="/src/assets/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tanami</title>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
includedLanguages: 'en,ur',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</body>
</html>

3
package.json
View File

@@ -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",

149
src/Components/Faq.jsx Normal file
View File

@@ -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 (
<Box
id="faq"
position={"relative"}
backgroundColor={"#ffffff"}
h={"120vh"}
mt={28}
mb={10}
>
<Container
display={"flex"}
flexDirection={"column"}
maxW="container.xl"
h={"100%"}
p={4}
>
<Text
mt={10}
fontSize={34}
fontWeight={"bold"}
fontFamily={"Roca Two"}
as={"h3"}
textAlign={"center"}
w={"100%"}
>
Frequently asked questions
</Text>
<Text
mt={2}
fontSize={"lg"}
fontWeight={"400"}
color={"gray.500"}
as={"h3"}
textAlign={"center"}
w={"100%"}
>
Everything you need to know about the property investment.
</Text>
<Box w={"100%"} h={"100%"} p={44} pt={16} pb={0}>
<Accordion allowToggle>
{faq.map(({ question, answer }, index) => (
<AccordionItem>
{({ isExpanded }) => (
<>
<AccordionButton
key={index}
_expanded={{ bg: "", color: "" }}
ps={0}
pt={6}
pb={6}
>
<Box
as="span"
flex="1"
textAlign="left"
fontSize={21}
fontWeight={"bold"}
fontFamily={"Roca Two"}
>
{question}
</Box>
{isExpanded ? (
<MinusIcon
fontSize="24px"
border={"2px solid #004118"}
color={"#004118"}
rounded={"full"}
p={1}
/>
) : (
<AddIcon
fontSize="24px"
border={"2px solid #004118"}
color={"#004118"}
rounded={"full"}
p={1}
/>
)}
</AccordionButton>
<AccordionPanel
fontSize={"md"}
fontWeight={400}
color={"gray.500"}
ps={0}
pe={20}
>
{answer}
</AccordionPanel>
</>
)}
</AccordionItem>
))}
</Accordion>
</Box>
</Container>
</Box>
);
};
export default Faq;

1
src/Components/Footer.jsx
View File

@@ -11,6 +11,7 @@ const Footer = () => {
<Box backgroundColor={"#0041180D"}>
<Container
p={10}
pb={4}
display={"flex"}
flexDirection={"column"}
maxW="container.xl"

119
src/Components/Header.jsx
View File

@@ -1,34 +1,36 @@
import { Box, Button, Container, Image } from "@chakra-ui/react";
import React, { useEffect, useState } from "react";
import { Link, NavLink, useNavigate } from "react-router-dom";
import { ChevronDownIcon } from "@chakra-ui/icons";
import { Link as ScrollLink } from "react-scroll";
import logo from "../assets/logo.png";
import earth from "../assets/earth.png";
import { Link, NavLink } from "react-router-dom";
import { ChevronDownIcon } from "@chakra-ui/icons";
export const nav = [
{
title: "Investment",
path: "/investment",
path: "investment",
},
{
title: "How it works",
path: "/how-it-works",
path: "how-it-works",
},
{
title: "FAQ",
path: "/faq",
path: "faq",
},
{
title: "About Us",
path: "/aboutus",
path: "aboutus",
},
];
const Header = () => {
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 (
<Box
zIndex={100}
top={showHeader ? 0 : "-80px"} // Adjust the -80px to match the height of your header
transition="top 0.3s" position={"sticky"} backgroundColor={"#002F0F"}>
zIndex={100}
top={showHeader ? 0 : "-80px"}
transition="top 0.3s"
position={"sticky"}
backgroundColor={"#002F0F"}
>
<Container
p={4}
display={"flex"}
@@ -57,33 +79,70 @@ const Header = () => {
maxW="container.xl"
>
<Link to={"/"}>
<Image src={logo} h={8} /></Link>
<Image src={logo} h={8} />
</Link>
<Box display={"flex"} gap={6}>
{nav.map(({ title, path }, index) => (
<NavLink
key={index}
style={{
textDecoration: "none",
color: "white",
display: "flex",
alignItems: "center",
}}
to={path}
>
{title}
</NavLink>
))}
{nav.map(({ title, path }, index) =>
path === "aboutus" ? (
<NavLink
key={index}
style={{
textDecoration: "none",
color: "white",
display: "flex",
alignItems: "center",
}}
to={`/${path}`}
onClick={() => handleNavClick(path)}
>
{title}
</NavLink>
) : (
<ScrollLink
key={index}
activeClass="active"
style={{
textDecoration: "none",
color: "white",
display: "flex",
alignItems: "center",
cursor: "pointer",
}}
to={path}
spy={true}
smooth={true}
offset={0}
duration={300}
onClick={() => handleNavClick(path)}
>
{title}
</ScrollLink>
)
)}
</Box>
<Box display={"flex"} alignItems={"center"} gap={4}>
<span className="d-flex align-items-center gap-1 text-white">
<Image src={earth} h={4} me={1} /> En <ChevronDownIcon />
</span>
<Box display={"flex"} alignItems={"center"} gap={1} color="white">
<Image src={earth} h={4} me={1} />
<Box
as="select"
onChange={handleLanguageChange}
bg="transparent"
color="white"
border="none"
cursor="pointer"
appearance="none"
>
<option value="en">En</option>
<option value="ur">Ur</option>
</Box>
<ChevronDownIcon />
</Box>
<Button color={"#002F0F"} ps={6} pe={6} size={"sm"} rounded={"xl"}>
Contact Us
</Button>
</Box>
</Container>
<Box id="google_translate_element" display="block" />
</Box>
);
};

3
src/Components/Hero.jsx
View File

@@ -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 (
<Box h={"100vh"}>
<Box {...OPACITY_ON_LOAD} h={"100vh"}>
<Container
display={"flex"}
maxW="container.xl"

225
src/Components/HowItWorks.jsx Normal file
View File

@@ -0,0 +1,225 @@
import { Box, Container, Image, Text } from "@chakra-ui/react";
import React, { useEffect, useRef, useState } from "react";
import patter1 from "../assets/asset3.png";
import patter2 from "../assets/asset1.png";
import cellFrame from "../assets/cellFrame.png";
import cellScreen1 from "../assets/cellScreen1.png";
import cellScreen2 from "../assets/cellScreen2.png";
// import cellScreen3 from "../assets/cellScreen3.png";
const HowItWorks = () => {
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 (
<Box id="how-it-works" position={"relative"} backgroundColor={"#ffffff"} h={"120vh"} mt={28} mb={10}>
<Image src={patter1} position={"absolute"} top={0} left={0} w={100} />
<Container
display={"flex"}
flexDirection={"column"}
maxW="container.xl"
h={"100%"}
p={4}
>
<Text
mt={4}
fontSize={34}
fontWeight={"normal"}
fontFamily={"Roca Two"}
as={"h3"}
textAlign={"center"}
w={"100%"}
>
How does it work?
</Text>
<Box w={"100%"} display={"flex"} h={"100%"} p={32} pt={24} pb={0}>
<Box
w={"50%"}
display={"flex"}
justifyContent={"flex-start"}
alignItems={"center"}
>
<Box position={"relative"}>
<Box
as="span"
w={2}
height={`${spanHeight}%`}
position={"absolute"}
transition={"height 0.5s ease-in-out"}
backgroundColor={"#004118"}
/>
<Box cursor={'pointer'} onClick={() => handleBoxClick(0)} p={12} pt={4} pb={2}>
<Text as={"h4"} fontWeight={"500"} color={"#004118"}>
Sign-up
</Text>
<Text
as={"p"}
fontSize={"md"}
fontWeight={400}
color={"gray.500"}
>
Create an account with Tanami and get approved in under 10
minutes.
</Text>
</Box>
<Box cursor={'pointer'}
onClick={() => handleBoxClick(1)} p={12} pt={4} pb={2}>
<Text as={"h4"} fontWeight={"500"} color={"#004118"}>
Browse
</Text>
<Text
as={"p"}
fontSize={"md"}
fontWeight={400}
color={"gray.500"}
>
Select from top-tier funds approved on the Tanami platform.
</Text>
</Box>
<Box cursor={'pointer'}
onClick={() => handleBoxClick(2)} p={12} pt={4} pb={2}>
<Text as={"h4"} fontWeight={"500"} color={"#004118"}>
Invest
</Text>
<Text
as={"p"}
fontSize={"md"}
fontWeight={400}
color={"gray.500"}
>
Fund investments using a bank transfer, debit or credit card.
</Text>
</Box>
<Box cursor={'pointer'}
onClick={() => handleBoxClick(3)} p={12} pt={4} pb={2}>
<Text as={"h4"} fontWeight={"500"}>
Monitor
</Text>
<Text
as={"p"}
fontSize={"md"}
fontWeight={400}
color={"gray.500"}
>
Stay up to date with the performance of your investment
portfolio, live on the app.
</Text>
</Box>
</Box>
</Box>
<Box
w={"50%"}
display={"flex"}
justifyContent={"flex-end"}
pe={10}
position={"relative"}
>
<Image
src={patter2}
position={"absolute"}
top={-84}
right={-4}
width={220}
/>
<Box
position={"relative"}
height={"100%"}
backgroundColor={"green.50"}
w={300}
rounded={56}
overflow={"hidden"}
zIndex={1}
>
<Image src={cellFrame} w={"100%"} />
<Image
position={"absolute"}
top={0}
left={1}
src={cellScreen1}
w={"99%"}
h={"100%"}
zIndex={-1}
// transform={spanHeight === 25 ? "translateX(-0px)": "translateY(-100%)"}
opacity={spanHeight === 25 ? 1: 0}
transition={"0.5s all"}
/>
<Image
position={"absolute"}
top={0}
left={1}
src={cellScreen2}
w={"99%"}
h={"100%"}
zIndex={-1}
// transform={spanHeight === 50 ? "translateX(0px)": "translateY(-100%)"}
opacity={spanHeight === 50 ? 1: 0}
transition={"0.5s all"}
/>
<Image
position={"absolute"}
top={0}
left={1}
src={cellScreen1}
w={"99%"}
h={"100%"}
zIndex={-1}
// transform={spanHeight === 75 ? "translateX(0px)": "translateY(-100%)"}
opacity={spanHeight === 75 ? 1: 0}
transition={"0.5s all"}
/>
<Image
position={"absolute"}
top={0}
left={1}
src={cellScreen2}
w={"99%"}
h={"100%"}
zIndex={-1}
// transform={spanHeight === 100 ? "translateX(0px)": "translateY(-100%)"}
opacity={spanHeight === 100 ? 1: 0}
transition={"0.5s all"}
/>
</Box>
</Box>
</Box>
</Container>
</Box>
);
};
export default HowItWorks;

4
src/Components/InvestmentPlatform.jsx
View File

@@ -47,7 +47,7 @@ const InvestmentPlatform = () => {
}, []);
return (
<Box position={"relative"} backgroundColor={"#f5f8f6"} h={"100vh"}>
<Box id="investment" position={"relative"} backgroundColor={"#f5f8f6"} h={"100vh"}>
<Container
display={"flex"}
flexDirection={"column"}
@@ -56,7 +56,7 @@ const InvestmentPlatform = () => {
p={4}
>
<Text
mt={12}
mt={10}
fontSize={34}
fontWeight={"normal"}
fontFamily={"Roca Two"}

12
src/Components/UseScrollToTop.jsx Normal file
View File

@@ -0,0 +1,12 @@
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
const UseScrollToTop = () => {
const { pathname } = useLocation();
useEffect(() => {
window.scrollTo(0, 0);
}, [pathname]);
};
export default UseScrollToTop;

23
src/Layout/animations.jsx Normal file
View File

@@ -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" }
};

11
src/Pages/Home.jsx
View File

@@ -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 (
<>
<Hero/>
<InvestmentPlatform />
<HowItWorks />
<Faq />
<Advertising />
</>
)

BIN
src/assets/asset3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
src/assets/cellFrame.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
src/assets/cellScreen1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
src/assets/cellScreen2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 940 KiB

13
src/index.css
View File

@@ -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;

15
yarn.lock
View File

@@ -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"