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

src/Components/AboutCard.jsx

@@ -0,0 +1,67 @@
+import { Box, Container, Image, SimpleGrid, Text } from "@chakra-ui/react";
+import React from "react";
+import global from "../assets/image/global.png";
+import Low from "../assets/image/low.png";
+import Experienced from "../assets/image/experienced.png";
+import Client from "../assets/image/Client.png";
+import Seamless from "../assets/image/Seamless.png";
+import Knowledge from "../assets/image/Knowledge.png";
+
+const data = [
+  {
+    imgSrc: global,
+    title: "Global Access with Premier Managers:",
+    description:
+      "Tanami Capital's platform provides investors with unparalleled access to a diverse range of alternative investments managed by best-in-class managers from around the world",
+  },
+  {
+    imgSrc: Low,
+    title: "Low Minimum Investment:",
+    description:
+      "Our platforms ensures that all investors have access to alternative investment opportunities through imposing minimal investment size limits",
+  },
+  {
+    imgSrc: Experienced,
+    title: "Experienced Investment Team:",
+    description:
+      "Our in-house team comprises seasoned professionals with vast experience and knowledge of alternative investments to select the best available opportunities",
+  },
+  {
+    imgSrc: Client,
+    title: "Client-Centric Fee Structure:",
+    description:
+      "We prioritize client interests by providing a transparent and competitive fee structure. We do not receive compensations from fund managers to avoid potential conflict of interest ",
+  },
+  {
+    imgSrc: Seamless,
+    title: "Seamless and Transparent Execution:",
+    description:
+      "Our advanced app allows investors to select and deploy capital seamlessly around the clock ",
+  },
+  {
+    imgSrc: Knowledge,
+    title: "The 'Knowledge Zone' Initiative: ",
+    description:
+      "Our dedicated knowledge platform, the 'Knowledge Zone,' equips clients with a toolkit to simplify and easily understand the complexities of alternative investments",
+  },
+];
+
+const AboutCard = () => {
+  return (
+    <>
+      <SimpleGrid columns={3} spacingX="40px" spacingY="30px">
+        {data.map((item, index) => (
+          <Box key={index}>
+            <Image src={item.imgSrc} width={"45px"} mb={"15px"} />
+            <Text fontSize={"20px"} fontWeight={"500"} mb={"10px"}>
+              {item.title}
+            </Text>
+            <Text color={'gray.500'}>{item.description}</Text>
+          </Box>
+        ))}
+      </SimpleGrid>
+    </>
+  );
+};
+
+export default AboutCard;

src/Components/HeroHeader.jsx

@@ -1,15 +1,39 @@
-import { Box, Heading, Stack, Text } from '@chakra-ui/react'
+import { Box, Button, Grid, Heading, Stack, Text } from '@chakra-ui/react'
 import React from 'react'
 
 
 
-const HeroHeader = ({title,content}) => {
+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'}>{title}</Heading>
+            <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%'} >
+                <Grid display={'block'}  gap={6} justifyContent={'center'} w={'50%'} m={'20px auto'}>
+                    <Button border={'1px solid '} borderRadius={'50px'} backgroundColor={'transparent'} m={'10PX'}>
+                        All
+                    </Button>
+                    <Button border={'1px solid '} borderRadius={'50px'} backgroundColor={'transparent'} m={'10PX'}>
+                        Getting Started
+                    </Button>
+                    <Button border={'1px solid '} borderRadius={'50px'} backgroundColor={'transparent'} m={'10PX'}>
+                        Investment
+                    </Button>
+                    <Button border={'1px solid '} borderRadius={'50px'} backgroundColor={'transparent'} m={'10PX'}>
+                        Knowledge & Education
+                    </Button>
+                    <Button size='md' border={'1px solid '} borderRadius={'50px'} backgroundColor={'transparent'} m={'10PX'}>
+                        Compliance, Security & Support
+                    </Button>
+                </Grid>
+                // </Box>
+             )}
         </Box>
+        
+    </>
   )
 }
 

src/Components/PrivacyPolicy.jsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import HeroHeader from './HeroHeader'
+import { Box, Container, Heading, Text } from '@chakra-ui/react'
+
+
+const AboutCont = [
+    {
+        id: 1,
+        title:'Privacy Policy for Tanami!',
+        content:[
+            {
+                text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus. Maecenas eget condimentum velit, sit amet feugiat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent auctor purus luctus enim egestas, ac scelerisque ante pulvinar. Donec ut rhoncus ex. Suspendisse ac rhoncus nisl, eu tempor urna. Curabitur vel bibendum lorem. Morbi convallis convallis diam sit amet lacinia. Aliquam in elementum tellus."
+            },
+            {
+                text: "Curabitur tempor quis eros tempus lacinia. Nam bibendum pellentesque quam a convallis. Sed ut vulputate nisi. Integer in felis sed leo vestibulum venenatis. Suspendisse quis arcu sem. Aenean feugiat ex eu vestibulum vestibulum. Morbi a eleifend magna. Nam metus lacus, porttitor eu mauris a, blandit ultrices nibh. Mauris sit amet magna non ligula vestibulum eleifend. Nulla varius volutpat turpis sed lacinia. Nam eget mi in purus lobortis eleifend. Sed nec ante dictum sem condimentum ullamcorper quis venenatis nisi. Proin vitae facilisis nisi, ac posuere leo."
+            },
+            {
+                text:"Nam pulvinar blandit velit, id condimentum diam faucibus at. Aliquam lacus nisi, sollicitudin at nisi nec, fermentum congue felis. Quisque mauris dolor, fringilla sed tincidunt ac, finibus non odio. Sed vitae mauris nec ante pretium finibus. Donec nisl neque, pharetra ac elit eu, faucibus aliquam ligula. Nullam dictum, tellus tincidunt tempor laoreet, nibh elit sollicitudin felis, eget feugiat sapien diam nec nisl. Aenean gravida turpis nisi, consequat dictum risus dapibus a. Duis felis ante, varius in neque eu, tempor suscipit sem. Maecenas ullamcorper gravida sem sit amet cursus. Etiam pulvinar purus vitae justo pharetra consequat. Mauris id mi ut arcu feugiat maximus. Mauris consequat tellus id tempus aliquet."
+            },
+            {
+                text:"Vestibulum dictum ultrices elit a luctus. Sed in ante ut leo congue posuere at sit amet ligula. Pellentesque eget augue nec nisl sodales blandit sed et sem. Aenean quis finibus arcu, in hendrerit purus. Praesent ac aliquet lorem. Morbi feugiat aliquam ligula, et vestibulum ligula hendrerit vitae. Sed ex lorem, pulvinar sed auctor sit amet, molestie a nibh. Ut euismod nisl arcu, sed placerat nulla volutpat aliquet. Ut id convallis nisl. Ut mauris leo, lacinia sed elit id, sagittis rhoncus odio. Pellentesque sapien libero, lobortis a placerat et, malesuada sit amet dui. Nam sem sapien, congue eu rutrum nec, pellentesque eget ligula."
+            },
+            {
+                text:"Nunc tempor interdum ex, sed cursus nunc egestas aliquet. Pellentesque interdum vulputate elementum. Donec erat diam, pharetra nec enim ut, bibendum pretium tellus. Vestibulum et turpis nibh. Cras vel ornare velit, ac pretium arcu. Cras justo augue, finibus id sollicitudin et, rutrum eget metus. Suspendisse ut mauris eu massa pulvinar sollicitudin vel sed enim. Pellentesque viverra arcu et dignissim vehicula."
+            },
+        ]
+    }
+]
+
+const PrivacyPolicy = () => {
+  return (
+    <>
+      <HeroHeader
+        title="Privacy Policy"
+        content="Lorem ipsum is simple dummy"
+      />
+      <Box mb={'4rem'} mt={'4rem'}>
+        {AboutCont.map((cont) =>(
+          <Container maxW="container.xl" mb={'2rem'}>
+            <Box key={cont.id}>
+                <Text fontSize={'xl'} mb={'20px'} fontWeight={'400'} color={'gray.600'}>{cont.title}</Text>
+                {cont.content.map((item, index) => (
+                    <Text key={index} color={'#00000096'} mb={'20px'}>{item.text}</Text>
+                ))}
+            </Box>
+          </Container>
+        ))}
+      </Box>
+    </>
+  )
+}
+
+export default PrivacyPolicy

src/Components/TermsService.jsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import HeroHeader from './HeroHeader'
+import { Box, Container, Heading, Text } from '@chakra-ui/react'
+
+
+const AboutCont = [
+    {
+        id: 1,
+        title:'Terms of Service for Tanami!',
+        content:[
+            {
+                text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus. Maecenas eget condimentum velit, sit amet feugiat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent auctor purus luctus enim egestas, ac scelerisque ante pulvinar. Donec ut rhoncus ex. Suspendisse ac rhoncus nisl, eu tempor urna. Curabitur vel bibendum lorem. Morbi convallis convallis diam sit amet lacinia. Aliquam in elementum tellus."
+            },
+            {
+                text: "Curabitur tempor quis eros tempus lacinia. Nam bibendum pellentesque quam a convallis. Sed ut vulputate nisi. Integer in felis sed leo vestibulum venenatis. Suspendisse quis arcu sem. Aenean feugiat ex eu vestibulum vestibulum. Morbi a eleifend magna. Nam metus lacus, porttitor eu mauris a, blandit ultrices nibh. Mauris sit amet magna non ligula vestibulum eleifend. Nulla varius volutpat turpis sed lacinia. Nam eget mi in purus lobortis eleifend. Sed nec ante dictum sem condimentum ullamcorper quis venenatis nisi. Proin vitae facilisis nisi, ac posuere leo."
+            },
+            {
+                text:"Nam pulvinar blandit velit, id condimentum diam faucibus at. Aliquam lacus nisi, sollicitudin at nisi nec, fermentum congue felis. Quisque mauris dolor, fringilla sed tincidunt ac, finibus non odio. Sed vitae mauris nec ante pretium finibus. Donec nisl neque, pharetra ac elit eu, faucibus aliquam ligula. Nullam dictum, tellus tincidunt tempor laoreet, nibh elit sollicitudin felis, eget feugiat sapien diam nec nisl. Aenean gravida turpis nisi, consequat dictum risus dapibus a. Duis felis ante, varius in neque eu, tempor suscipit sem. Maecenas ullamcorper gravida sem sit amet cursus. Etiam pulvinar purus vitae justo pharetra consequat. Mauris id mi ut arcu feugiat maximus. Mauris consequat tellus id tempus aliquet."
+            },
+            {
+                text:"Vestibulum dictum ultrices elit a luctus. Sed in ante ut leo congue posuere at sit amet ligula. Pellentesque eget augue nec nisl sodales blandit sed et sem. Aenean quis finibus arcu, in hendrerit purus. Praesent ac aliquet lorem. Morbi feugiat aliquam ligula, et vestibulum ligula hendrerit vitae. Sed ex lorem, pulvinar sed auctor sit amet, molestie a nibh. Ut euismod nisl arcu, sed placerat nulla volutpat aliquet. Ut id convallis nisl. Ut mauris leo, lacinia sed elit id, sagittis rhoncus odio. Pellentesque sapien libero, lobortis a placerat et, malesuada sit amet dui. Nam sem sapien, congue eu rutrum nec, pellentesque eget ligula."
+            },
+            {
+                text:"Nunc tempor interdum ex, sed cursus nunc egestas aliquet. Pellentesque interdum vulputate elementum. Donec erat diam, pharetra nec enim ut, bibendum pretium tellus. Vestibulum et turpis nibh. Cras vel ornare velit, ac pretium arcu. Cras justo augue, finibus id sollicitudin et, rutrum eget metus. Suspendisse ut mauris eu massa pulvinar sollicitudin vel sed enim. Pellentesque viverra arcu et dignissim vehicula."
+            },
+        ]
+    }
+]
+
+const TermsService = () => {
+  return (
+    <>
+      <HeroHeader
+        title="Terms of Service"
+        content="Lorem ipsum is simple dummy"
+      />
+      <Box mb={'4rem'} mt={'4rem'}>
+        {AboutCont.map((cont) =>(
+          <Container maxW="container.xl" mb={'2rem'}>
+            <Box key={cont.id}>
+                <Text fontSize={'xl'} mb={'20px'} fontWeight={'400'} color={'gray.600'}>{cont.title}</Text>
+                {cont.content.map((item, index) => (
+                    <Text key={index} color={'#00000096'} mb={'20px'}>{item.text}</Text>
+                ))}
+            </Box>
+          </Container>
+        ))}
+      </Box>
+    </>
+  )
+}
+
+export default TermsService

src/Pages/AboutUs.jsx

@@ -1,15 +1,123 @@
-import React from 'react'
+import React from "react";
-import HeroHeader from '../Components/HeroHeader'
+import HeroHeader from "../Components/HeroHeader";
+import {
+  Box,
+  Container,
+  Heading,
+  Image,
+  SimpleGrid,
+  Text,
+} from "@chakra-ui/react";
+import paltform from "../../src/assets/image/paltform-img.png";
+import AboutCard from "../Components/AboutCard";
+
+const boxesData = [
+  {
+    heading: "Innovative and forward-thinking",
+    text: "Tanami Capital is an innovative and forward-thinking, technology-driven, investment platform headquartered in Bahrain. We are authorized to participate in the Central Bank of Bahrain’s Fintech Regulatory Sandbox.",
+  },
+  {
+    heading: "High Quality",
+    text: "Our primary objective is to make high quality global alternative investments, such as real estate, private equity and infrastructure, accessible to all investors in the GCC. By democratizing alternative investment opportunities, we aim to level the playing field and provide equal access to all individuals, irrespective of their financial backgrounds.",
+  },
+  {
+    heading: "Cutting-edge Mobile Application",
+    text: "Through our cutting-edge mobile application, we are dedicated to providing investors with unprecedented access to global private market opportunities, managed by best-in-class managers, previously reserved for ultra-high-net-worth individuals and institutions.",
+  },
+  {
+    heading: "Professional & Experienced Team",
+    texts: [
+      "We have assembled a team of seasoned investment professionals who bring a wealth of expertise to the table. They possess a deep understanding of the private markets, a track record of success in the financial industry, and a wide network of relationships with best-in-class fund managers globally.",
+      "The capabilities and experience of the team are embedded in the company's operations, integrating a rigid and unbiased investment selection process, ensuring an alignment of interest between the clients and the company.",
+    ],
+  },
+];
 
 const AboutUs = () => {
   return (
     <>
       <HeroHeader
-          title='About Us'
+        title="About Us"
-          content='Our innovative investments drive growth and secure futures.'
+        content="Our innovative investments drive growth and secure futures."
       />
-    </>
+      <Box pt={"4rem"}>
-  )
+        <Container maxW="container.xl">
+          <Heading fontSize={"30px"} textAlign={"center"} mb={"3rem"}>
+            Who we are
+          </Heading>
+          <SimpleGrid columns={2} spacingX="40px" spacingY="20px">
+            <Box>
+              <Box position={"relative"}>
+                <Text
+                  color={"#004717"}
+                  fontSize={'lg'}
+                  fontWeight={'500'}
+                  fontFamily={"Warnock Pro"}
+                  boxShadow={
+                    "rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;"
                   }
+                  position={"absolute"}
+                  top={"162px"}
+                  left={"58px"}
+                  backgroundColor={"#fff"}
+                  p={"10px 23px"}
+                  textAlign={"center"}
+                  borderRadius={"7px"}
+                >
+                  Best platform to
+                  <br /> Invest $
+                </Text>
+                <Image src={paltform} />
+              </Box>
+            </Box>
+            <Box
+              className="who-content"
+              overflowY={"scroll"}
+              h={"495px"}
+              mt={"20px"}
+              pr={"20px"}
+            >
+              {boxesData.map((box, index) => (
+                <Box key={index} pt={"15px"}>
+                  <Heading
+                    fontSize={"22px"}
+                    position={"relative"}
+                    sx={{
+                      "&:after": {
+                        content: '""', // Corrected content property to be a valid empty string
+                        position: "absolute",
+                        width: "8px",
+                        height: "8px",
+                        backgroundColor: "#648774",
+                        top: "12px",
+                        left: "-18px",
+                        transform: "rotate(45deg)",
+                      },
+                    }}
+                  >
+                    {box.heading}
+                  </Heading>
+                  {box.text && <Text color={"gray.600"} fontSize={'md'} fontWeight={'500'}>{box.text}</Text>}
+                  {box.texts &&
+                    box.texts.map((text, idx) => (
+                      <Text key={idx} color={"gray.600"}  fontSize={'md'} fontWeight={'500'}>
+                        {text}
+                      </Text>
+                    ))}
+                </Box>
+              ))}
+            </Box>
+          </SimpleGrid>
+        </Container>
+      </Box>
+      <Box backgroundColor={'#BBC5BE21'} p={'4rem 0px'} mb={'3rem'}>
+        <Container maxW="container.xl">
+          <Heading fontSize={'30px'} mb={'4rem'} textAlign={'center'}>How we create value</Heading>
+          <AboutCard />
+        </Container>
+      </Box>
+    </>
+  );
+};
 
-export default AboutUs
+export default AboutUs;

src/Pages/Faq.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import HeroHeader from '../Components/HeroHeader'
+import { Box } from '@chakra-ui/react'
+
+const Faq = () => {
+  return (
+    <>
+      <HeroHeader
+        title="Frequently asked questions"
+        content="What do you need help with?"
+        showButtons={true}
+      />
+      <Box>
+        
+      </Box>
+    </>
+  )
+}
+
+export default Faq

src/Routes/RoutLink.jsx

@@ -1,7 +1,13 @@
+import PrivacyPolicy from "../Components/PrivacyPolicy";
+import TermsService from "../Components/TermsService";
 import AboutUs from "../Pages/AboutUs";
+import Faq from "../Pages/Faq";
 import Home from "../Pages/Home";
 
 export const RouteLink = [
     { path: "/", Component: Home },
     { path: "/aboutus", Component: AboutUs },
+    { path: "/terms", Component: TermsService },
+    { path: "/privacy", Component: PrivacyPolicy },
+    { path: "/faq", Component: Faq },
 ]  

src/index.css

@@ -23,5 +23,17 @@
 
 h2{
   font-family: Roca Two !important;
+}
+
+.who-content::-webkit-scrollbar-thumb {
+  background: #ccc;
+  border-radius: 5px;
+}
+.who-content::-webkit-scrollbar-track {
+  border-radius: 5px;
+}
+.who-content::-webkit-scrollbar {
+  width: 5px;
+  height: 50px;
   color: #0041181f;
 }