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

package.json

@@ -18,6 +18,7 @@
     "framer-motion": "^11.2.11",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.2.1",
     "react-router-dom": "^6.23.1"
   },
   "devDependencies": {

src/Components/Advertising.jsx

@@ -0,0 +1,59 @@
+import { Box, Container, Image, Text } from "@chakra-ui/react";
+import React from "react";
+import pattern from "../assets/pattern.png";
+import adImage from "../assets/adImage.png";
+import appButton from "../assets/AppStore.png";
+import playButton from "../assets/PlayBtn.png";
+
+
+const Advertising = () => {
+  return (
+    <Box position={"relative"} h={"90vh"}>
+      <Container
+        display={"flex"}
+        flexDirection={"column"}
+        maxW="container.xl"
+        h={"100%"}
+        p={12}
+      >
+        <Box
+          position={"relative"}
+          backgroundImage="linear-gradient(to bottom, #FFFFFF, #C9D9CB)" // Gradient from black to white
+          backgroundColor={"#000"}
+          height={"100%"}
+          rounded={"md"}
+          w={"100%"}
+          display={"flex"}
+        >
+          <Box w={"50%"} display={'flex'} alignItems={'start'} flexDirection={'column'} justifyContent={'center'} p={16} zIndex={1}>
+            <Text
+              as={"h1"}
+              fontWeight={"bold"}
+              fontFamily={"Roca Two"}
+              fontSize={50}
+              color="#004118"
+            >
+              Ready to get started?
+            </Text>
+            <Text as={"h6"} fontWeight={"500"} fontSize={"xl"} color="#004118">
+              Risus habitant leo egestas mauris diam eget morbi tempus
+              vulputate.
+            </Text>
+            <Box display={'flex'} gap={3}>
+                <Image src={appButton} h={"48px"} />
+                <Image src={playButton} h={"48px"}  />
+
+            </Box>
+          </Box>
+          <Box w={"50%"} display={"flex"} justifyContent={"center"}>
+            <Image src={adImage} w={"90%"} h={"100%"} />
+          </Box>
+
+          <Image position={"absolute"} bottom={0} left={0} src={pattern} />
+        </Box>
+      </Container>
+    </Box>
+  );
+};
+
+export default Advertising;

src/Components/Footer.jsx

@@ -1,34 +1,55 @@
 import { Box, Container, Text } from "@chakra-ui/react";
 import React from "react";
 import { Link } from "react-router-dom";
+import { IoLogoTwitter } from "react-icons/io5";
+import { FaFacebookF } from "react-icons/fa6";
+import { FaInstagram } from "react-icons/fa";
+import { IoLogoGithub } from "react-icons/io";
 
 const Footer = () => {
   return (
     <Box backgroundColor={"#0041180D"}>
       <Container
-        p={4}
+        p={10}
         display={"flex"}
         flexDirection={"column"}
         maxW="container.xl"
       >
         <Box pb={4} pt={4} className=" w-100 border-bottom">
           <Box as="span">
-            <Text as={"h2"}>Yes, it’s that simple.</Text>
-            <Text w={350} as={"p"}>
-              Download the Tanami app today and start growing your wealth
+            <Text as={"h4"} fontFamily={"Roca Two"} fontWeight={"bold"}>
+              Yes, it’s that simple.
+            </Text>
+            <Text w={350} as={"h5"} fontFamily={"Roca Two"} fontWeight={"100"}>
+              Download the Tanami app today and start growing your wealth.
             </Text>
           </Box>
         </Box>
 
-        <Box pb={4} pt={8} className=" w-100">
+        <Box pb={4} pt={8} className=" w-100 border-bottom">
           <Box display={"flex"}>
-            <Box w={"50%"}>
+            <Box w={"50%"} display={"flex"} flexDirection={"column"} gap={3}>
               <Text as={"h6"}>About Tanami</Text>
-              <Text w={"60%"} mt={6} as={"p"} fontSize={"sm"}>
+              <Text
+                w={"60%"}
+                mt={2}
+                as={"p"}
+                fontSize={"sm"}
+                color={"gray.600"}
+              >
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
                 dictum aliquet accumsan porta lectus ridiculus in mattis. Netus
                 sodales in volutpat ullamcorper amet adipiscing fermentum.
               </Text>
+              <Box display={"flex"} gap={8}>
+                <IoLogoTwitter />
+                <FaFacebookF />
+                <FaInstagram />
+                <IoLogoGithub />
+              </Box>
+              <Text as={"span"} fontSize={"sm"}>
+                info@tanamicapital.com
+              </Text>
             </Box>
             <Box w={"15%"}>
               <Text as={"h6"}>Company</Text>
@@ -55,26 +76,26 @@ const Footer = () => {
                 </Link>
               </Box>
             </Box>
-            
+
             <Box w={"10%"}>
-              <Text as={"h6"}>Company</Text>
+              <Text as={"h6"}>Help</Text>
               <Box display={"flex"} flexDirection={"column"} gap={1} mt={6}>
-                <Link to={"/"}>
+                <Link to={"/aboutus"}>
                   <Text fontSize={"sm"} as={"span"}>
-                    Home
+                    About Us
                   </Text>{" "}
                 </Link>
-                <Link to={"investment"}>
+                <Link to={"/contact-us"}>
                   <Text fontSize={"sm"} as={"span"}>
                     Investment
                   </Text>
                 </Link>
-                <Link to={"investment"}>
+                <Link to={"/privacy-policy"}>
                   <Text fontSize={"sm"} as={"span"}>
                     How it works
                   </Text>
                 </Link>
-                <Link to={"investment"}>
+                <Link to={"/teams-of-service"}>
                   <Text fontSize={"sm"} as={"span"}>
                     FAQ's
                   </Text>
@@ -83,6 +104,16 @@ const Footer = () => {
             </Box>
           </Box>
         </Box>
+
+        <Box display={"flex"} justifyContent={"space-between"} mt={3}>
+          <Text as={"span"} fontSize={"sm"} fontWeight={500}>
+            Copyright © 2024 Tanami Capital
+          </Text>
+          <Text as={"span"} fontSize={"sm"} fontWeight={500}>
+            Tanami Capital is authorized to participate in the Central Bank of
+            Bahrain’s Fintench Regualatory Sandbox
+          </Text>
+        </Box>
       </Container>
     </Box>
   );

src/Components/Header.jsx

@@ -1,10 +1,11 @@
 import { Box, Button, Container, Image } from "@chakra-ui/react";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import logo from "../assets/logo.png";
 import earth from "../assets/earth.png";
-import { NavLink } from "react-router-dom";
+import { Link, NavLink } from "react-router-dom";
 import { ChevronDownIcon } from "@chakra-ui/icons";
 
+
 export const nav = [
   {
     title: "Investment",
@@ -12,31 +13,55 @@ export const nav = [
   },
   {
     title: "How it works",
-    path: "/investment",
+    path: "/how-it-works",
   },
   {
     title: "FAQ",
-    path: "/investment",
+    path: "/faq",
   },
   {
     title: "About Us",
-    path: "/investment",
+    path: "/aboutus",
   },
 ];
 
 const Header = () => {
+  const [showHeader, setShowHeader] = useState(true);
+  const [lastScrollY, setLastScrollY] = useState(0);
+  const threshold = 50; // Adjust this value to change sensitivity
+  const controlHeader = () => {
+    if (window.scrollY > lastScrollY + threshold) {
+      setShowHeader(false);
+    } else if (window.scrollY < lastScrollY - threshold) {
+      setShowHeader(true);
+    }
+    setLastScrollY(window.scrollY);
+  };
+
+  useEffect(() => {
+    window.addEventListener("scroll", controlHeader);
+    return () => {
+      window.removeEventListener("scroll", controlHeader);
+    };
+  }, [lastScrollY]);
+
   return (
-    <Box position={"fix"} top={0} backgroundColor={"#002F0F"}>
+    <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"}>
       <Container
         p={4}
         display={"flex"}
         justifyContent={"space-between"}
         maxW="container.xl"
       >
-        <Image src={logo} h={8} />
+        <Link to={"/"}>
+        <Image src={logo} h={8} /></Link>
         <Box display={"flex"} gap={6}>
           {nav.map(({ title, path }, index) => (
             <NavLink
+            key={index}
               style={{
                 textDecoration: "none",
                 color: "white",

src/Components/Hero.jsx

@@ -0,0 +1,101 @@
+import { Box, Button, Container, Image, Text } from "@chakra-ui/react";
+import React from "react";
+import underline from "../assets/underline.png";
+import heroImage from "../assets/heroImage.png";
+
+
+import apple from "../assets/apple.png";
+import playstore from "../assets/playstore.png";
+
+const Hero = () => {
+  return (
+    <Box h={"100vh"}>
+      <Container
+        display={"flex"}
+        maxW="container.xl"
+        h={"100%"}
+        
+      >
+        <Box w={"50%"} display={'flex'} flexDirection={'column'} gap={6} justifyContent={'center'} p={10} h={"100%"}>
+          <Text
+            as={"h1"}
+            color={"#000"}
+            fontSize={54}
+            fontWeight={"bold"}
+            fontFamily={"Roca Two"}
+            position={"relative"}
+          >
+            Access{" "}
+            <Text  as={"span"} color="#004118">
+              private markets{" "}
+            </Text>
+            today{" "}
+            <Image src={underline} position={'absolute'} width={'300px'} right={20} bottom={10} />
+          </Text>
+
+          <Text as={"span"} fontSize={"1.1rem"} fontWeight={500}>
+            Tanami provides Shariah-compliant global private investments
+            alongside world class managers, simplified through an app.
+          </Text>
+
+          <Box display={'flex'} gap={4}>
+            <Button
+              display={"flex"}
+              alignItems={"center"}
+              gap={3}
+              rounded={"full"}
+              backgroundColor={"#002F0F"}
+              color={"#fff"}
+              ps={8}
+              pe={8}
+              pb={1}
+              fontSize={"md"}
+              size={'lg'}
+
+              transition={"0.5s all"}
+
+              _hover={{ backgroundColor: "#002F0F", transform:"translateY(-8px)" }} // Ensuring hover background color remains the same
+
+              
+            >
+              {" "}
+              <Image src={apple} w={5} /> Apps Store
+            </Button>
+
+            
+            <Button
+              display={"flex"}
+              alignItems={"center"}
+              gap={3}
+              rounded={"full"}
+              backgroundColor={"#002F0F"}
+              color={"#fff"}
+              ps={8}
+              pe={8}
+              pb={1}
+              fontSize={"md"}
+              size={'lg'}
+              transition={"0.5s all"}
+
+              _hover={{ backgroundColor: "#002F0F", transform:"translateY(-8px)" }} // Ensuring hover background color remains the same
+
+            >
+              {" "}
+              <Image src={playstore} w={5} /> Play Store
+            </Button>
+          </Box>
+
+          <Text as={"span"} fontSize={"1rem"} color={'gray.500'} >
+          Download the app & grow your wealth with Tanami today.
+          </Text>
+        </Box>
+
+        <Box display={'flex'} justifyContent={'center'} alignItems={'center'} w={"50%"}>
+          <Image w={"70%"} src={heroImage}/>
+        </Box>
+      </Container>
+    </Box>
+  );
+};
+
+export default Hero;

src/Components/InvestmentPlatform.jsx

@@ -0,0 +1,272 @@
+import {
+  Box,
+  Button,
+  Container,
+  Image,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+  Text,
+} from "@chakra-ui/react";
+import React, { useState, useEffect } from "react";
+import asset2 from "../assets/asset2.png";
+import slider1 from "../assets/slider1.png";
+import slider2 from "../assets/slider2.png";
+import slider3 from "../assets/slider3.png";
+import { ArrowForwardIcon } from "@chakra-ui/icons";
+
+const content = [
+  {
+    title: "Higher returns",
+    description:
+      "We invest smart. From real estate to private equity, Tanami invests alongside global managers with a proven track record of consistent outperformance.",
+  },
+  {
+    title: "Expert Diligence",
+    description:
+      "We understand investments. From real estate to private equity, Tanami invests alongside global managers with a proven track record of consistent outperformance.",
+  },
+  {
+    title: "Low Minimums",
+    description:
+      "We make it easy. From real estate to private equity, Tanami invests alongside global managers with a proven track record of consistent outperformance.",
+  },
+];
+
+const InvestmentPlatform = () => {
+  const [tabIndex, setTabIndex] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTabIndex((prevIndex) => (prevIndex + 1) % 3);
+    }, 3000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <Box position={"relative"} backgroundColor={"#f5f8f6"} h={"100vh"}>
+      <Container
+        display={"flex"}
+        flexDirection={"column"}
+        maxW="container.xl"
+        h={"100%"}
+        p={4}
+      >
+        <Text
+          mt={12}
+          fontSize={34}
+          fontWeight={"normal"}
+          fontFamily={"Roca Two"}
+          as={"h3"}
+          textAlign={"center"}
+          w={"100%"}
+        >
+          Why Choose Our Investment Platform
+        </Text>
+
+        <Box w={"100%"} h={"100%"} display={"flex"}>
+          <Box
+            w={"50%"}
+            h={"100%"}
+            display={"flex"}
+            justifyContent={"center"}
+            alignItems={"center"}
+            position={"relative"}
+          >
+            <Box
+              position={"absolute"}
+              display={"flex"}
+              flexDirection={"column"}
+              gap={5}
+            >
+              <Image
+                top={0}
+                src={slider1}
+                w={360.5}
+                transition="opacity 0.5s ease-in-out"
+                opacity={tabIndex === 0 ? 1 : 0}
+              />
+              <Image
+                position={"absolute"}
+                top={0}
+                src={slider2}
+                w={360}
+                transition="opacity 0.5s ease-in-out"
+                opacity={tabIndex === 1 ? 1 : 0}
+              />
+              <Image
+                position={"absolute"}
+                top={0}
+                src={slider3}
+                w={360}
+                transition="opacity 0.5s ease-in-out"
+                opacity={tabIndex === 2 ? 1 : 0}
+              />
+              <Tabs index={tabIndex} onChange={setTabIndex}>
+                <TabList
+                  w={"100%"}
+                  display={"flex"}
+                  mt={4}
+                  justifyContent={"center"}
+                  borderBottom={"none"} // Remove bottom border
+                  // borderTop={"1px solid #CBCBCB"}
+                >
+                  <Tab
+                    _selected={{
+                      color: "#004118",
+                      borderColor: "#004118",
+                    }}
+                    borderTop={"2px solid #CBCBCB"}
+                    fontSize={"sm"}
+                    width={"33.33%"}
+                    color={"gray.500"}
+                    fontWeight={"500"}
+                    transition={"0.4s all"}
+                    borderBottom={"none"} // Remove bottom border
+                  >
+                    Select
+                  </Tab>
+                  <Tab
+                    _selected={{
+                      color: "#004118",
+                      borderColor: "#004118",
+                    }}
+                    borderTop={"2px solid #CBCBCB"}
+                    width={"33.33%"}
+                    fontSize={"sm"}
+                    color={"gray.500"}
+                    fontWeight={"500"}
+                    transition={"0.4s all"}
+                    borderBottom={"none"} // Remove bottom border
+                  >
+                    Onboard
+                  </Tab>
+                  <Tab
+                    _selected={{
+                      color: "#004118",
+                      borderColor: "#004118",
+                    }}
+                    borderTop={"2px solid #CBCBCB"}
+                    width={"33.33%"}
+                    fontSize={"sm"}
+                    color={"gray.500"}
+                    fontWeight={"500"}
+                    transition={"0.4s all"}
+                    borderBottom={"none"} // Remove bottom border
+                  >
+                    Invest
+                  </Tab>
+                </TabList>
+              </Tabs>
+            </Box>
+          </Box>
+
+          <Box
+            w={"50%"}
+            h={"100%"}
+            display={"flex"}
+            justifyContent={"flex-start"}
+            alignItems={"center"}
+            transition="opacity 0.5s ease-in-out"
+            opacity={1}
+            // key={tabIndex} // Adding key to trigger re-render for transition
+          >
+            <Box position={"relative"}>
+              <Box w={480}>
+                <Box
+                  position={"absolute"}
+                  top={0}
+                  transition={"0.5s all"}
+                  as="span"
+                  opacity={tabIndex === 0 ? 1 : 0}
+                >
+                  <Text
+                    fontFamily={"Roca Two"}
+                    as={"h1"}
+                    fontSize={42}
+                    fontWeight={"bold"}
+                  >
+                    Higher returns
+                  </Text>
+                  <Text as={"p"} fontSize={"lg"} fontWeight={"500"}>
+                    We invest smart. From real estate to private equity, Tanami
+                    invests alongside global managers with a proven track record
+                    of consistent outperformance.
+                  </Text>
+                </Box>
+                <Box
+                  position={"absolute"}
+                  top={0}
+                  transition={"0.5s all"}
+                  as="span"
+                  opacity={tabIndex === 1 ? 1 : 0}
+                >
+                  <Text
+                    fontFamily={"Roca Two"}
+                    as={"h1"}
+                    fontSize={42}
+                    fontWeight={"bold"}
+                  >
+                    Expert Diligence
+                  </Text>
+                  <Text as={"p"} fontSize={"lg"} fontWeight={"500"}>
+                    We understand investments. From real estate to private
+                    equity, Tanami invests alongside global managers with a
+                    proven track record of consistent outperformance.
+                  </Text>
+                </Box>
+                <Box
+                  position={"absolute"}
+                  top={0}
+                  transition={"0.5s all"}
+                  as="span"
+                  opacity={tabIndex === 2 ? 1 : 0}
+                >
+                  <Text
+                    fontFamily={"Roca Two"}
+                    as={"h1"}
+                    fontSize={42}
+                    fontWeight={"bold"}
+                  >
+                    Low Minimums
+                  </Text>
+                  <Text as={"p"} fontSize={"lg"} fontWeight={"500"}>
+                    We make it easy. From real estate to private equity, Tanami
+                    invests alongside global managers with a proven track record
+                    of consistent outperformance.
+                  </Text>
+                </Box>
+
+                <Button
+                  backgroundColor={"#002F0F"}
+                  color={"#fff"}
+                  ps={8}
+                  pe={8}
+                  pb={1}
+                  rounded={"xl"}
+                  mt={"180px"}
+                  size={"lg"}
+                  fontSize={"md"}
+                  _hover={{
+                    backgroundColor: "#002F0F",
+                    transform: "translateY(-6px)",
+                  }} // Ensuring hover background color remains the same
+                  transition={"0.5s all"}
+                >
+                  Get Started <ArrowForwardIcon ms={2} />
+                </Button>
+              </Box>
+            </Box>
+          </Box>
+        </Box>
+      </Container>
+
+      <Image position={"absolute"} top={20} w={200} src={asset2} />
+    </Box>
+  );
+};
+
+export default InvestmentPlatform;

src/Pages/Home.jsx

@@ -1,8 +1,15 @@
 import React from 'react'
+import Hero from '../Components/Hero'
+import InvestmentPlatform from '../Components/InvestmentPlatform'
+import Advertising from '../Components/Advertising'
 
 const Home = () => {
   return (
-    <div>Home</div>
+    <>
+    <Hero/>
+    <InvestmentPlatform />
+    <Advertising />
+    </>
   )
 }
 

src/index.css

@@ -22,4 +22,5 @@ h2{
 .who-content::-webkit-scrollbar {
   width: 5px;
   height: 50px;
+  color: #0041181f;
 }

yarn.lock

@@ -2960,6 +2960,11 @@ react-focus-lock@^2.9.4:
     use-callback-ref "^1.3.2"
     use-sidecar "^1.1.2"
 
+react-icons@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.2.1.tgz#28c2040917b2a2eda639b0f797bff1888e018e4a"
+  integrity sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"