Merge pull request vechain#4 from zayLatt25/home

Home page

apps/frontend/src/App.tsx

@@ -1,22 +1,17 @@
 import { DAppKitProvider } from "@vechain/dapp-kit-react";
-import { ChakraProvider, Container, Flex } from "@chakra-ui/react";
-import {
-  Dropzone,
-  Footer,
-  InfoCard,
-  Instructions,
-  Navbar,
-  SubmissionModal,
-} from "./components";
+import { ChakraProvider } from "@chakra-ui/react";
+import { Footer, Navbar, SubmissionModal } from "./components";
 import { lightTheme } from "./theme";
-import { Routes, Route, BrowserRouter } from 'react-router-dom'
+import { Routes, Route, BrowserRouter } from "react-router-dom";
 
 import Home from "./routes/home";
-import Protected from './routes/protected'
-import Settings from './routes/settings'
-import Login from './routes/login'
+import Protected from "./routes/protected";
+import Settings from "./routes/settings";
+import Login from "./routes/login";
 
 function App() {
+  const path = location.pathname;
+
   return (
     <BrowserRouter>
       <ChakraProvider theme={lightTheme}>
@@ -27,8 +22,8 @@ function App() {
           nodeUrl="https://testnet.vechain.org/"
           logLevel={"DEBUG"}
         >
-          <div className="bg-emerald-700">
-            <Navbar />
+          <div className="">
+            {path != "/" ? <Navbar /> : <></>}
             <div className="min-h-[80vh] relative">
               <Routes>
                 <Route path="/" element={<Home />} />
@@ -37,7 +32,7 @@ function App() {
                 <Route path="/login" element={<Login />} />
               </Routes>
             </div>
-            <Footer />
+            {path != "/" ? <Footer /> : <></>}
           </div>
           {/* MODALS  */}
           <SubmissionModal />

apps/frontend/src/routes/home.css

@@ -0,0 +1,14 @@
+.parallax {
+  min-height: 70px;
+  background-attachment: fixed;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.scroll-container {
+  height: 870px;
+  background-color: #4e6b4c;
+  font-size: 36px;
+  padding: 40px;
+}

apps/frontend/src/routes/home.tsx

@@ -1,28 +1,102 @@
-import React from "react";
-import { Container, Flex } from "@chakra-ui/react";
-import {
-    Dropzone,
-    InfoCard,
-    Instructions,
-} from "../components";
+import { Card, CardBody, Flex, Button, Image, Text } from "@chakra-ui/react";
+import "./home.css";
 
 export default function Home() {
-    return (
-        <Flex flex={1}>
-            <Container
-                mt={{ base: 4, md: 10 }}
-                maxW={"container.xl"}
-                mb={{ base: 4, md: 10 }}
-                display={"flex"}
-                flex={1}
-                alignItems={"center"}
-                justifyContent={"flex-start"}
-                flexDirection={"column"}
+  return (
+    <div style={{ backgroundColor: "#c5dcc2" }}>
+      <div style={{ position: "absolute", top: "10px", right: "10px" }}>
+        <Button
+          bg="#2a3d29"
+          color="#c5dcc2"
+          _hover={{ bg: "#c5dcc2", color: "#2a3d29" }}
+          width="100px"
+          margin="3"
+        >
+          Profile
+        </Button>
+      </div>
+      <div className="parallax"></div>
+      <Image src="/hill.png" />
+
+      <div className="scroll-container">
+        <Flex justifyContent="center" alignItems="center" height="100%" gap={8}>
+          <div>
+            <Text color="#efefef" fontSize="5xl">
+              REDUCE
+            </Text>
+            <Card
+              bg="#efefef"
+              minHeight="350"
+              paddingTop="200"
+              borderRadius="25"
             >
-                <InfoCard />
-                <Instructions />
-                <Dropzone />
-            </Container>
+              <Image
+                src="/reduce.png"
+                position="absolute"
+                top="-80px"
+                left="50%"
+                transform="translateX(-50%)"
+                width="300px"
+              />
+
+              <CardBody>
+                <Text fontSize="md">
+                  View a summary of all your customers over the last month.
+                </Text>
+
+                <Flex justify="center" mt="4">
+                  <Button
+                    bg="#2a3d29"
+                    color="#c5dcc2"
+                    _hover={{ bg: "#c5dcc2", color: "#2a3d29" }}
+                    width="200px"
+                  >
+                    Button
+                  </Button>
+                </Flex>
+              </CardBody>
+            </Card>
+          </div>
+
+          <div>
+            <Text color="#efefef" fontSize="5xl" textAlign="right">
+              OFFSET
+            </Text>
+            <Card
+              bg="#efefef"
+              minHeight="350"
+              paddingTop="200"
+              borderRadius="25"
+            >
+              <Image
+                src="/offset.png"
+                position="absolute"
+                top="-90px"
+                left="50%"
+                transform="translateX(-70%)"
+                width="300px"
+              />
+
+              <CardBody>
+                <Text fontSize="md">
+                  View a summary of all your customers over the last month.
+                </Text>
+
+                <Flex justify="center" mt="4">
+                  <Button
+                    bg="#2a3d29"
+                    color="#c5dcc2"
+                    _hover={{ bg: "#c5dcc2", color: "#2a3d29" }}
+                    width="200px"
+                  >
+                    Button
+                  </Button>
+                </Flex>
+              </CardBody>
+            </Card>
+          </div>
         </Flex>
-    );
-}
+      </div>
+    </div>
+  );
+}