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

Merge branch 'dev' of http://git.wdipl.com/Siddhesh.More/tanami

Browse Source
This commit is contained in:
Siddhesh More
2024-06-21 14:00:24 +05:30
parent 0be93316d9 fffd373534
commit 7591ec3276
25 changed files with 6682 additions and 713 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
index.html
View File

@@ -5,9 +5,28 @@
<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,ar,mr,hi'`,
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>

5631
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

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

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

@@ -0,0 +1,162 @@
import { AddIcon, ArrowForwardIcon, MinusIcon } from "@chakra-ui/icons";
import {
Accordion,
AccordionButton,
AccordionIcon,
AccordionItem,
AccordionPanel,
Box,
Container,
Text,
Button
} from "@chakra-ui/react";
import { Link } from "react-router-dom";
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 much money do I need to start investing through your app?",
answer:
"The minimum investment amount varies depending on the specific investment opportunity. You will find the minimum investment amount within the page of each investment opportunity.",
},
{
question: "How long does it take to open an account and start investing?",
answer:
"The account opening process can typically be completed online within a few minutes. Once your account is approved, you can start exploring and investing in alternative assets through our app. However, please note that additional verification requirements or account funding may be necessary, which may affect the timeline.",
},
{
question: "What types of investment opportunities are available through your app?",
answer:
"Our app offers a range of alternative investment options, including private equity funds, venture capital funds, real estate investment funds, infrastructure funds, private debt funds, and more. You can choose investments based on your risk tolerance and investment goals.",
},
];
const Faq = () => {
return (
<Box
id="faq"
position={"relative"}
backgroundColor={"#ffffff"}
h={"auto"}
mt={28}
pb={26}
>
<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 key={index}>
{({ isExpanded }) => (
<Box as="span" >
<AccordionButton
_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>
</Box>
)}
</AccordionItem>
))}
</Accordion>
<Box as="div" mt={6} display={'flex'} justifyContent={'center'}>
<Link to={"/faq"} >
<Button
backgroundColor={"#002F0F"}
color={"#fff"}
ps={8}
pe={8}
pb={1}
mt={6}
rounded={"xl"}
size={"lg"}
fontSize={"md"}
_hover={{
backgroundColor: "#002F0F",
transform: "translateY(-6px)",
}} // Ensuring hover background color remains the same
transition={"0.5s all"}
>
View all <ArrowForwardIcon ms={2} />
</Button></Link>
</Box>
</Box>
</Container>
</Box>
);
};
export default Faq;

11
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"
@@ -87,17 +88,17 @@ const Footer = () => {
</Link>
<Link to={"/contact-us"}>
<Text fontSize={"sm"} as={"span"}>
Investment
Contact us
</Text>
</Link>
<Link to={"/privacy-policy"}>
<Link to={"/privacy"}>
<Text fontSize={"sm"} as={"span"}>
How it works
Privacy policy
</Text>
</Link>
<Link to={"/teams-of-service"}>
<Link to={"/terms"}>
<Text fontSize={"sm"} as={"span"}>
FAQ's
Terms of service
</Text>
</Link>
</Box>

126
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, animateScroll as scroll } 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,45 +47,105 @@ 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"}>
<Box
zIndex={100}
top={showHeader ? 0 : "-80px"}
transition="top 0.3s"
position={"sticky"}
backgroundColor={"#002F0F"}
>
<Container
p={4}
display={"flex"}
justifyContent={"space-between"}
maxW="container.xl"
>
<Link to={"/"}>
<Image src={logo} h={8} /></Link>
<Link to={"/"} onClick={() => scroll.scrollToTop()}>
<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 className="rounded-0 text-dark" value="en">
En
</option>
<option value="ur text-dark">Ur</option>
</Box>
</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"

5
src/Components/HeroHeader.jsx
View File

@@ -1,5 +1,6 @@
import { Box, Button, Grid, Heading, Stack, Text } from '@chakra-ui/react'
import React from 'react'
import { OPACITY_ON_LOAD } from '../Layout/animations'
@@ -7,8 +8,8 @@ const HeroHeader = ({title,content,showButtons}) => {
return (
<>
<Box backgroundColor={'#0041180D'} h={'360px'} display={'flex'} justifyContent={'center'} alignContent={'center'} flexDirection={'column'} textAlign={'center'}>
<Heading as='h2' mb={'14px'} fontSize={'52px'} color={'#000'} width={'40%'} m={'auto'}>{title}</Heading>
<Box {...OPACITY_ON_LOAD} backgroundColor={'#0041180D'} h={'360px'} display={'flex'} justifyContent={'center'} alignContent={'center'} flexDirection={'column'} textAlign={'center'}>
<Heading as='h2' mb={'14px'} fontSize={'52px'} color={'#000'} width={'40%'} m={'0px auto'}>{title}</Heading>
<Text fontFamily={'DM sans'} fontSize={'20px'} mb={'0'} fontWeight={'500'}>{content}</Text>
{showButtons && (
// <Box width={'100%'} >

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

5
src/Components/PrivacyPolicy.jsx
View File

@@ -1,4 +1,4 @@
import React from 'react'
import React, { useEffect } from 'react'
import HeroHeader from './HeroHeader'
import { Box, Container, Heading, Text } from '@chakra-ui/react'
@@ -28,6 +28,9 @@ const AboutCont = [
]
const PrivacyPolicy = () => {
useEffect(() => {
window.scrollTo(0, 0);
}, []);
return (
<>
<HeroHeader

5
src/Components/TermsService.jsx
View File

@@ -1,4 +1,4 @@
import React from 'react'
import React, { useEffect } from 'react'
import HeroHeader from './HeroHeader'
import { Box, Container, Heading, Text } from '@chakra-ui/react'
@@ -28,6 +28,9 @@ const AboutCont = [
]
const TermsService = () => {
useEffect(() => {
window.scrollTo(0, 0);
}, []);
return (
<>
<HeroHeader

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

5
src/Pages/AboutUs.jsx
View File

@@ -1,4 +1,4 @@
import React from "react";
import React, { useEffect } from "react";
import HeroHeader from "../Components/HeroHeader";
import {
Box,
@@ -34,6 +34,9 @@ const boxesData = [
];
const AboutUs = () => {
useEffect(() => {
window.scrollTo(0, 0);
}, []);
return (
<>
<HeroHeader

9
src/Pages/ContactUs.jsx Normal file
View File

@@ -0,0 +1,9 @@
import React from 'react'
const ContactUs = () => {
return (
<div>ContactUs</div>
)
}
export default ContactUs

5
src/Pages/Faq.jsx
View File

@@ -1,8 +1,11 @@
import React from 'react'
import React, { useEffect } from 'react'
import HeroHeader from '../Components/HeroHeader'
import { Box } from '@chakra-ui/react'
const Faq = () => {
useEffect(() => {
window.scrollTo(0, 0);
}, []);
return (
<>
<HeroHeader

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 />
</>
)

2
src/Routes/RoutLink.jsx
View File

@@ -1,6 +1,7 @@
import PrivacyPolicy from "../Components/PrivacyPolicy";
import TermsService from "../Components/TermsService";
import AboutUs from "../Pages/AboutUs";
import ContactUs from "../Pages/ContactUs";
import Faq from "../Pages/Faq";
import Home from "../Pages/Home";
@@ -10,4 +11,5 @@ export const RouteLink = [
{ path: "/terms", Component: TermsService },
{ path: "/privacy", Component: PrivacyPolicy },
{ path: "/faq", Component: Faq },
{ path: "/contact-us", Component: ContactUs },
]

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

21
src/index.css
View File

@@ -7,6 +7,27 @@
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 {
display: none;
}
.goog-te-banner-frame.skiptranslate {
display: none !important;
}
.goog-logo-link {
display: none !important;
}
.goog-te-gadget {
color: transparent !important;
}
h2{
font-family: Roca Two !important;

1108
yarn.lock
View File

File diff suppressed because it is too large Load Diff