style homepage

vechain · Jan 25, 2025 · 0b8fbe9 · 0b8fbe9
1 parent e9f3823
commit 0b8fbe9
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 32 deletions.
diff --git a/apps/frontend/src/App.tsx b/apps/frontend/src/App.tsx
@@ -1,23 +1,15 @@
-import { Box, Container, VStack } from "@chakra-ui/react";
+import { Container, VStack } from "@chakra-ui/react";
 import { Home } from "./pages/Home";
 import { Navbar } from "./components/Navbar";
-import { Footer } from "./components/Footer";
 
 function App() {
   return (
-    <Box h="full" bgColor="#f7f7f7">
-      <VStack h="100vh" align="stretch" gap="0">
+    <Container maxW="container.lg" h="full">
+      <VStack align="stretch" flex="1" overflowY={"auto"} py={4}>
         <Navbar />
-        <VStack align="stretch" flex="1" overflowY={"auto"} py={4}>
-          <Container maxW="container.lg" h="full">
-            <VStack align="stretch">
-              <Home />
-              <Footer />
-            </VStack>
-          </Container>
-        </VStack>
+        <Home />
       </VStack>
-    </Box>
+    </Container>
   );
 }
 

diff --git a/apps/frontend/src/components/SupportedProject.tsx b/apps/frontend/src/components/SupportedProject.tsx
@@ -37,7 +37,7 @@ export const SupportedProject = () => {
   ];
 
   return (
-    <Card justifyContent={"center"} alignItems={"center"}>
+    <Card justifyContent={"center"} alignItems={"center"} variant={"outline"}>
       <CardHeader>
         <Heading size={"md"}>Supported by</Heading>
       </CardHeader>

diff --git a/apps/frontend/src/pages/Home/Home.tsx b/apps/frontend/src/pages/Home/Home.tsx
@@ -17,7 +17,7 @@ export const Home = () => {
     <VStack align="stretch" gap={4}>
       <AbstractedAccounts />
 
-      <Card>
+      <Card variant={"outline"}>
         <CardHeader>
           <Heading size={"sm"}>Stats</Heading>
         </CardHeader>

diff --git a/apps/frontend/src/pages/Home/components/AbstractedAccounts/AbstractedAccounts.tsx b/apps/frontend/src/pages/Home/components/AbstractedAccounts/AbstractedAccounts.tsx
@@ -23,7 +23,7 @@ export const AbstractedAccounts = () => {
   );
 
   return (
-    <Card>
+    <Card variant={"outline"}>
       <CardHeader>
         <Heading size={"sm"}>Your smart accounts</Heading>
         <Text fontSize="sm" mt={2}>

diff --git a/apps/frontend/src/pages/Home/components/Readme/Readme.tsx b/apps/frontend/src/pages/Home/components/Readme/Readme.tsx
@@ -1,43 +1,32 @@
 import {
-  Image,
   Text,
   VStack,
   List,
   ListItem,
   Card,
   CardBody,
   Heading,
-  HStack,
   useMediaQuery,
   Link,
   Icon,
   Divider,
 } from "@chakra-ui/react";
-import logo from "../../../../assets/privy-aa-fee.png";
 import { FaExternalLinkAlt } from "react-icons/fa";
 
 export const Readme = () => {
   const [isDesktop] = useMediaQuery("(min-width: 800px)");
   return (
-    <Card w={"full"}>
+    <Card w={"full"} variant={"outline"}>
       <CardBody>
         <VStack align="stretch" gap={4} px={isDesktop ? 20 : 4} spacing={4}>
           <VStack align="center" spacing={4}>
             <Heading size={"lg"} mt={4}>
-              Readme
+              Tech
             </Heading>
-            <Image
-              mt={8}
-              src={logo}
-              alt="logo"
-              w={"full"}
-              // h="400px"
-              rounded="full"
-            />
             {/* <Text mt={4}>Account Abstraction for the vechain ecosystem.</Text> */}
           </VStack>
 
-          <HStack justify="space-between">
+          {/* <HStack justify="space-between">
             <div
               style={{
                 position: "relative",
@@ -63,9 +52,8 @@ export const Readme = () => {
                 }}
               ></iframe>
             </div>
-          </HStack>
+          </HStack> */}
 
-          <Heading size={"md"}>Tech</Heading>
           <Text>There are 2 contracts:</Text>
 
           <List spacing={3} styleType="disc">
@@ -116,6 +104,17 @@ export const Readme = () => {
             </Link>{" "}
             repository.
           </Text>
+          <Text>
+            Implement the Smart Account in your app with{" "}
+            <Link
+              fontWeight={"bold"}
+              isExternal
+              href="https://github.com/vechain/vechain-kit"
+            >
+              VeChain Kit
+              <Icon as={FaExternalLinkAlt} />
+            </Link>
+          </Text>
         </VStack>
       </CardBody>
     </Card>