Modify code

TrustlessComputer · Jan 4, 2024 · edb16a9 · edb16a9
1 parent 69a256e
commit edb16a9
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 17 deletions.
diff --git a/src/layouts/Header/components/DesktopNav.tsx b/src/layouts/Header/components/DesktopNav.tsx
@@ -16,6 +16,7 @@ export const DesktopNav = (props: Props) => {
         <Link
           key={navItem.label}
           href={navItem.href ?? '#'}
+          target={navItem.isNewWindow ? '_blank' : '_self'}
           color={props?.primaryColor || 'white'}
         >
           <Text

diff --git a/src/layouts/Header/components/MobileNav.tsx b/src/layouts/Header/components/MobileNav.tsx
@@ -19,6 +19,7 @@ export const MobileNav = () => {
           fontSize={['16px', '16px']}
           fontWeight={500}
           color={'#000'}
+          target={item.isNewWindow ? '_blank' : '_self'}
           _hover={{}}
         >
           {item.label}

diff --git a/src/layouts/Header/menuConfig.ts b/src/layouts/Header/menuConfig.ts
@@ -22,14 +22,14 @@ export const NAV_ITEMS: Array<NavItem> = [
   },
   {
     label: 'Developers',
-    href: '/developers',
-    isNewWindow: false,
+    href: 'https://docs.trustless.computer',
+    isNewWindow: true,
     isHide: false,
   },
   {
     label: 'Whitepapers',
-    href: '/whitepapers',
-    isNewWindow: false,
+    href: 'https://_blank',
+    isNewWindow: true,
     isHide: false,
   },
 ].filter((item) => !item.isHide);
diff --git a/src/modules/building-blocks/Section_2_vs2/config.tsx b/src/modules/building-blocks/Section_2_vs2/config.tsx
@@ -4,6 +4,7 @@ export type BlockItemType = {
   networkList?: {
     logoUrl: string;
     name: string;
+    isComingSoon?: boolean;
   }[];
   bgColor?: string;
   bgCircle?: string;
@@ -36,10 +37,12 @@ export const BlockDataList: BlockItemType[] = [
       {
         logoUrl: '/icons/avail_logo.svg',
         name: 'Avail',
+        isComingSoon: true,
       },
       {
         logoUrl: '/icons/near_logo.svg',
         name: 'NearDA',
+        isComingSoon: true,
       },
     ],
     bgColor: '#7069DC',
@@ -74,18 +77,22 @@ export const BlockDataList: BlockItemType[] = [
       {
         logoUrl: '/icons/polygon_logo.svg',
         name: 'Polygon ZKEVM',
+        isComingSoon: true,
       },
       {
         logoUrl: '/icons/zksync_logo.svg',
         name: 'ZKSync ZKVM',
+        isComingSoon: true,
       },
       {
         logoUrl: '/icons/arbitrum_logo.svg',
         name: 'Arbitrum',
+        isComingSoon: true,
       },
       {
         logoUrl: '/icons/starknet_logo.svg',
         name: 'Starknet',
+        isComingSoon: true,
       },
     ],
     bgColor: '#F7931A',
@@ -105,6 +112,7 @@ export const BlockDataList: BlockItemType[] = [
       {
         logoUrl: '/icons/rollkit_logo.svg',
         name: 'Rollkit',
+        isComingSoon: true,
       },
     ],
     bgColor: '#25C0EF',

diff --git a/src/modules/building-blocks/Section_2_vs2/index.tsx b/src/modules/building-blocks/Section_2_vs2/index.tsx
@@ -79,6 +79,7 @@ const Section2 = () => {
     item?: {
       logoUrl: string;
       name: string;
+      isComingSoon?: boolean;
     }[],
   ) => {
     return (
@@ -103,7 +104,12 @@ const Section2 = () => {
                 boxSize={['32px', '48px']}
               />
               <Box height={'4px'}></Box>
-              <Text fontSize={['12px']} fontWeight={400} color={'#000'}>
+              <Text
+                fontSize={['12px']}
+                fontWeight={400}
+                opacity={obj.isComingSoon ? 0.4 : 1}
+                color={`#000`}
+              >
                 {obj.name || ''}
               </Text>
             </Flex>

diff --git a/src/modules/home/Section_1/index.tsx b/src/modules/home/Section_1/index.tsx
@@ -12,8 +12,10 @@ import {
   Text,
   VStack,
 } from '@chakra-ui/react';
+import { useRouter } from 'next/navigation';
 
 const Section_1 = () => {
+  const router = useRouter();
   return (
     <Box
       bgPosition="center"
@@ -25,10 +27,13 @@ const Section_1 = () => {
       justifyContent={'center'}
       alignContent={'center'}
     >
-      <Box w={['450px', '1000px']} my={['135px', '193px']} className="maxWidth">
+      <Box
+        p={['20px', '120px', '180px', '240px', '320px']}
+        className="maxWidth"
+      >
         <Text
           textAlign={'center'}
-          fontSize={['36px', '100px']}
+          fontSize={[26, 32, 48, 72, 100]}
           lineHeight={'110%'}
           wordBreak={'break-word'}
           whiteSpace="pre-line"
@@ -38,8 +43,8 @@ const Section_1 = () => {
 
         <Text
           textAlign={'center'}
-          fontSize={['16px', '22px']}
-          lineHeight={'140%'}
+          fontSize={[12, 15, 18, 22, 26]}
+          lineHeight={'120%'}
           fontWeight={400}
           wordBreak={'break-word'}
           whiteSpace="pre-line"
@@ -62,30 +67,38 @@ const Section_1 = () => {
             alignItems={'center'}
             px={'24px'}
             py={'10px'}
+            minW={['180px']}
             fontWeight={400}
             fontSize={'16px'}
+            onClick={() => {
+              router.push('/blockchains/computers');
+            }}
           >
-            {`Join the Allowlist`}
+            {`Start Building`}
           </Button>
           <Button
             bgColor={'#fff'}
             color={'#000'}
             borderRadius={100}
             px={'24px'}
             py={'10px'}
+            minW={['180px']}
             display={'flex'}
             justifyContent={'center'}
             alignItems={'center'}
             fontWeight={400}
             fontSize={'16px'}
+            onClick={() =>
+              window.open('https://docs.trustless.computer/', '_blank')
+            }
           >
-            {`Get started for free`}
+            {`Read Docs`}
           </Button>
         </HStack>
 
         <Box height={'32px'} />
 
-        <Flex display={'flex'} align="center" justify="center">
+        {/* <Flex display={'flex'} align="center" justify="center">
           <HStack
             padding={'6px'}
             spacing={'0px'}
@@ -110,10 +123,8 @@ const Section_1 = () => {
             />
             <Image src="/images/user_4.png" boxSize={'48px'} />
           </HStack>
-        </Flex>
-
-        <Box height={'12px'} />
-
+        </Flex> */}
+        {/* 
         <Flex display={'flex'} align="center" justify="center">
           <HStack display={'flex'} align="center">
             <Text color={'#fff'} fontSize={['20px']} fontWeight={700}>
@@ -130,7 +141,7 @@ const Section_1 = () => {
               {`14h : 30m : 59s`}
             </Text>
           </HStack>
-        </Flex>
+        </Flex> */}
       </Box>
     </Box>
   );