Develop

.env

@@ -1,4 +1,4 @@
 NEXT_PUBLIC_APP_ENV=develop
-NEXT_PUBLIC_DOMAIN_URL="http://localhost:3000"
+NEXT_PUBLIC_DOMAIN_URL=https://dev.bvm.network
 NEXT_PUBLIC_CDN_URL=https://cdn.newbitcoincity.com
 NEXT_PUBLIC_API_URL=

envs/.env.develop

@@ -1,4 +1,4 @@
 NEXT_PUBLIC_APP_ENV=develop
-NEXT_PUBLIC_DOMAIN_URL="http://localhost:3000"
+NEXT_PUBLIC_DOMAIN_URL=https://dev.bvm.network
 NEXT_PUBLIC_CDN_URL=https://cdn.newbitcoincity.com
 NEXT_PUBLIC_API_URL=

envs/.env.production

@@ -1,4 +1,4 @@
 NEXT_PUBLIC_APP_ENV=production
-NEXT_PUBLIC_DOMAIN_URL="http://localhost:3000"
+NEXT_PUBLIC_DOMAIN_URL=https://bvm.network
 NEXT_PUBLIC_CDN_URL=https://cdn.newbitcoincity.com
 NEXT_PUBLIC_API_URL=

envs/.env.staging

@@ -1,4 +1,4 @@
 NEXT_PUBLIC_APP_ENV=staging
-NEXT_PUBLIC_DOMAIN_URL="http://localhost:3000"
+NEXT_PUBLIC_DOMAIN_URL=https://bvm.network
 NEXT_PUBLIC_CDN_URL=https://cdn.newbitcoincity.com
 NEXT_PUBLIC_API_URL=

next.config.js

@@ -40,6 +40,30 @@ const nextConfig = {
                   `,
   },
 
+  async redirects() {
+    return [
+      {
+        source: '/trustless-computers',
+        destination: '/blockchains',
+        permanent: false,
+      },
+      {
+        source: '/blockchains/dashboard',
+        destination: '/blockchains/computers',
+        permanent: false,
+      },
+    ];
+  },
+
+  async rewrites() {
+    return [
+      {
+        source: '/tc',
+        destination: '/blockchains',
+      },
+    ];
+  },
+
   webpack: (config, { isServer, dev }) => {
     // Note: we provide webpack above so you should not `require` it
     // Perform customizations to webpack config

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
+    "local": "cp ./envs/.env.local .env && next dev",
     "dev": "cp ./envs/.env.develop .env && next dev",
     "ld": "export PORT=3001 && cp ./envs/.env.develop .env  && rm -rf .next && next dev",
     "ls": "export PORT=3002 && cp ./envs/.env.staging .env  && rm -rf .next && next dev",

src/app/blockchains/page.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { isProduction } from '@/config';
+import MainLayout from '@/layouts/MainLayout';
+import IframeTC from '@/modules/iframe-tc';
+
+const pathUrl = '/trustless-computers-iframe/';
+// const IframeURLExtend = DOMAIN_URL + MAIN_PATH;
+const IframeURLExtend =
+  'https://dev.newbitcoincity.com/trustless-computers-iframe/';
+
+const iframeDomain = isProduction
+  ? 'https://newbitcoincity.com'
+  : 'https://dev.newbitcoincity.com';
+
+const TCPage = () => {
+  return (
+    <MainLayout
+      headerProps={{
+        color: 'black',
+        position: 'relative',
+        bgColor: 'white',
+      }}
+    >
+      {typeof document !== 'undefined' ? (
+        <IframeTC iframeURL={`${iframeDomain}${pathUrl}`} />
+      ) : null}
+    </MainLayout>
+  );
+};
+
+export default TCPage;

src/app/building-blocks/page.tsx

@@ -7,7 +7,7 @@ const BuildingBlocksPage = () => {
   return (
     <MainLayout
       headerProps={{
-        primaryColor: 'black',
+        color: 'black',
       }}
     >
       <BuildingBlockModule />

src/app/tc/page.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { isProduction } from '@/config';
+import MainLayout from '@/layouts/MainLayout';
+import IframeTC from '@/modules/iframe-tc';
+
+const pathUrl = '/trustless-computers-iframe/';
+// const IframeURLExtend = DOMAIN_URL + MAIN_PATH;
+const IframeURLExtend =
+  'https://dev.newbitcoincity.com/trustless-computers-iframe/';
+
+const iframeDomain = isProduction
+  ? 'https://newbitcoincity.com'
+  : 'https://dev.newbitcoincity.com';
+
+const TCPage = () => {
+  return (
+    <MainLayout
+      headerProps={{
+        color: 'black',
+        position: 'relative',
+        bgColor: 'white',
+      }}
+    >
+      {typeof document !== 'undefined' ? (
+        <IframeTC iframeURL={`${iframeDomain}${pathUrl}`} />
+      ) : null}
+    </MainLayout>
+  );
+};
+
+export default TCPage;

src/config/index.ts

@@ -6,6 +6,9 @@ export const API_UR: string = process.env.NEXT_PUBLIC_API_URL!;
 export const DOMAIN_URL: string = process.env.NEXT_PUBLIC_DOMAIN_URL!;
 export const CDN_URL: string = process.env.NEXT_PUBLIC_CDN_URL!;
 
+export const isProduction: boolean = APP_ENV === 'production';
+export const isDevelop: boolean = APP_ENV === 'develop';
+
 export const CDN_URL_ICONS: string = CDN_URL + '/nbc/icons';
 
 export { MetadataConfig, ViewportConfig };

src/constants/breakpoint.ts

@@ -0,0 +1,4 @@
+export const XS_MOBILE_SCREEN = 500;
+export const MOBILE_SCREEN = 768;
+export const TABLET_SCREEN = 1024;
+export const QHD_SCREEN = 2048;

src/hooks/useWindowSize.ts

@@ -0,0 +1,90 @@
+import {
+  MOBILE_SCREEN,
+  QHD_SCREEN,
+  TABLET_SCREEN,
+  XS_MOBILE_SCREEN,
+} from '@/constants/breakpoint';
+import { useEffect, useState } from 'react';
+
+interface Size {
+  sreenWidth: number;
+  heightWidth: number;
+}
+
+interface CheckMobile {
+  xSMobileScreen: boolean;
+  mobileScreen: boolean;
+  tabletScreen: boolean | undefined;
+  desktopScreen: boolean;
+  QHDScreen: boolean;
+}
+
+function useWindowSize(): Size & CheckMobile {
+  const [windowSize, setWindowSize] = useState<Size>({
+    sreenWidth: 0,
+    heightWidth: 0,
+  });
+  const [xSMobileScreen, setXSMobileScreen] = useState(true);
+  const [mobileScreen, setMobileScreen] = useState(true);
+  const [tabletScreen, setTabletScreen] = useState<boolean | undefined>(
+    undefined,
+  );
+  const [desktopScreen, setDesktopScreen] = useState(true);
+  const [QHDScreen, setQHDScreen] = useState(true);
+
+  useEffect(() => {
+    function handleResize() {
+      setWindowSize({
+        sreenWidth: window.innerWidth,
+        heightWidth: window.innerHeight,
+      });
+    }
+    window.addEventListener('resize', handleResize);
+    handleResize();
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  useEffect(() => {
+    if (windowSize?.sreenWidth && windowSize.sreenWidth <= XS_MOBILE_SCREEN) {
+      setXSMobileScreen(true);
+    } else {
+      setXSMobileScreen(false);
+    }
+
+    if (windowSize?.sreenWidth && windowSize.sreenWidth <= MOBILE_SCREEN) {
+      setMobileScreen(true);
+    } else {
+      setMobileScreen(false);
+    }
+
+    if (windowSize?.sreenWidth && windowSize.sreenWidth <= TABLET_SCREEN) {
+      setTabletScreen(true);
+    } else {
+      setTabletScreen(false);
+    }
+
+    if (windowSize?.sreenWidth && windowSize.sreenWidth >= QHD_SCREEN) {
+      setQHDScreen(true);
+    } else {
+      setQHDScreen(false);
+    }
+  }, [windowSize.sreenWidth]);
+
+  useEffect(() => {
+    setDesktopScreen(
+      !mobileScreen && !tabletScreen && !xSMobileScreen && !QHDScreen,
+    );
+  }, [tabletScreen, mobileScreen, xSMobileScreen, QHDScreen]);
+
+  return {
+    sreenWidth: windowSize.sreenWidth,
+    heightWidth: windowSize.heightWidth,
+    mobileScreen,
+    tabletScreen,
+    desktopScreen,
+    QHDScreen,
+    xSMobileScreen,
+  };
+}
+
+export default useWindowSize;

src/layouts/Footer/index.tsx

@@ -4,7 +4,7 @@ import { Box, Container, Stack, Text } from '@chakra-ui/react';
 
 const Footer = () => {
   return (
-    <Box bgColor={'black'}>
+    <Box bgColor={'black'} id="footer">
       <Container
         as={Stack}
         maxW={'2xl'}

src/layouts/Header/index.tsx

@@ -20,11 +20,16 @@ import { MobileNav } from './components/MobileNav';
 import Link from 'next/link';
 
 export type HeaderProps = {
-  primaryColor?: 'black' | 'white';
+  color?: 'black' | 'white';
+  position?: 'absolute' | 'relative';
+  bgColor?: string;
 };
 
 const Header = (props: HeaderProps) => {
-  const primaryColor = props.primaryColor || 'white';
+  const primaryColor = props.color || 'white';
+  const position = props.position || 'absolute';
+  const bgColor = props.bgColor || 'transparent';
+
   const { isOpen, onToggle } = useDisclosure();
   const isMobile = useBreakpointValue({ base: true, md: false }) as boolean;
 
@@ -48,7 +53,8 @@ const Header = (props: HeaderProps) => {
   return (
     <>
       <Box
-        position={'absolute'}
+        position={position === 'absolute' ? 'absolute' : 'relative'}
+        bgColor={bgColor}
         display={'flex'}
         justifyContent={'center'}
         alignItems={'center'}
@@ -59,13 +65,14 @@ const Header = (props: HeaderProps) => {
       >
         <Flex
           minH={'60px'}
-          maxWidth={'1600px'}
+          className="maxWidth"
           alignSelf={'center'}
           py={{ base: 2 }}
           px={[4, null]}
           display={'flex'}
           flex={1}
           align={'center'}
+          id="header"
         >
           {/* Left View */}
           <Flex
@@ -76,13 +83,23 @@ const Header = (props: HeaderProps) => {
             }}
           >
             <Link href="/">
-              <SvgInset
+              {/* <SvgInset
                 svgUrl={`${CDN_URL_ICONS}/logo_bvm.svg`}
                 size={200}
                 style={{
                   filter: primaryColor === 'white' ? 'invert(1)' : 'black',
                 }}
-              />
+              /> */}
+
+              {/* <SvgInset
+                svgUrl={`/bvm-logo-short-orange.svg`}
+                size={200}
+                style={{
+                  filter: primaryColor === 'white' ? 'invert(1)' : 'black',
+                }}
+              /> */}
+
+              <Image src={'/icons/bvm-logo-short-orange.svg'} />
             </Link>
           </Flex>
 

src/layouts/Header/menuConfig.ts

@@ -10,7 +10,7 @@ export interface NavItem {
 export const NAV_ITEMS: Array<NavItem> = [
   {
     label: 'Blockchains',
-    href: '/tc',
+    href: '/blockchains',
     isNewWindow: false,
     isHide: false,
   },

src/modules/building-blocks/Section_1/index.tsx

@@ -4,17 +4,18 @@ import { Flex, Box, Text } from '@chakra-ui/react';
 
 const Section1 = () => {
   return (
-    <Flex w={'100%'}>
+    <Flex w={'100%'} flexDir={['column', 'row']}>
       <Text
         flex={1}
         fontSize={['28px', '48px']}
         fontWeight={400}
         lineHeight={'110%'}
+        textAlign={['center', 'left']}
         color={'#000'}
       >
         Building Blocks
       </Text>
-      <Box w={['200px', null]} />
+      <Box boxSize={['20px', null]} />
       <Text
         maxW={'650px'}
         fontSize={['14px', '22px']}

src/modules/building-blocks/index.tsx

@@ -10,7 +10,7 @@ const BuildingBlockModule = () => {
   return (
     <Box className={s.container}>
       <Flex
-        maxW={'1600px'}
+        className="maxWidth"
         w={'100%'}
         h={'100%'}
         marginTop={'120px'}
@@ -22,7 +22,7 @@ const BuildingBlockModule = () => {
         alignSelf={'center'}
       >
         <Section1 />
-        <Box height={'80px'} />
+        <Box h={['30px', '80px']} />
         <Section2 />
       </Flex>
     </Box>

src/modules/home/Section_1/index.tsx

@@ -20,7 +20,7 @@ const Section_1 = () => {
       bgSize={'cover'}
       bgColor={'#006440'}
       bgImg={`${CDN_URL_ICONS}/lego_bg.svg`}
-      h={'100vh'}
+      h={'90vh'}
       display={'flex'}
     >
       <AbsoluteCenter>
@@ -31,8 +31,7 @@ const Section_1 = () => {
           wordBreak={'break-word'}
           whiteSpace="pre-line"
         >
-          {`Bitcoin 
-            Virtual Machine`}
+          {`Bitcoin Virtual Machine`}
         </Text>
 
         <Text