update homepage

src/app/experience/page.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import MainLayout from '@/layouts/MainLayout';
+// import LandingV3 from '@/modules/landingV3';
+import LandingV5 from '@/modules/landingV5';
+
+export default function Home() {
+  return (
+    <MainLayout
+      headerProps={{
+        // color: 'white',
+        // colorLogo: 'white',
+        // bgColor: '#1C1C1C',
+        theme: 'white',
+      }}
+      hideFooter
+    >
+      {/* <LandingV3 /> */}
+      <LandingV5 />
+    </MainLayout>
+  );
+}

src/app/page.tsx

@@ -3,6 +3,7 @@
 import MainLayout from '@/layouts/MainLayout';
 // import LandingV3 from '@/modules/landingV3';
 import LandingV5 from '@/modules/landingV5';
+import Landing from '@/modules/landing';
 
 export default function Home() {
   return (
@@ -16,7 +17,8 @@ export default function Home() {
       hideFooter
     >
       {/* <LandingV3 /> */}
-      <LandingV5 />
+      {/* <LandingV5 /> */}
+      <Landing />
     </MainLayout>
   );
 }

src/constants/home-content.tsx

@@ -115,7 +115,7 @@ export const STEP_1_SECTION = {
     {
       title: 'Perceptrons',
       description: 'The first onchain neural networks.',
-      homeImage: '/landing-v7/home-perp-1.png',
+      homeImage: '/landing-v7/home-perp-2.png',
 
       // bgColor:
       //   'linear-gradient(227deg, #FF8D97 -7.83%, #FF6366 21.47%, #E40004 69.37%, #FFDEDE 118.41%)',
@@ -171,7 +171,7 @@ export const STEP_2_SECTION = {
     {
       title: 'Rune Dex',
       description: 'Buy & sell Bitcoin permisionlessly',
-      homeImage: '/explore/dapp-runedex2.png',
+      homeImage: '/landing-v7/home-rundex-1.png',
       link: {
         url: 'https://runechain.com/',
         target: '_blank',
@@ -180,7 +180,7 @@ export const STEP_2_SECTION = {
     {
       title: 'NAKA Dex',
       description: 'Trade Bitcoin futures permisionlessly.',
-      homeImage: '/landing-v7/home-naka-1.png',
+      homeImage: '/landing-v7/home-naka-2.png',
       link: {
         url: 'https://nakachain.xyz/perpetual',
         target: '_blank',
@@ -207,7 +207,7 @@ export const GAME_SECTION = {
       title: 'Bitcoin Wars',
       description:
         'The first fully onchain game built on a ZK Rollup on Bitcoin.',
-      homeImage: `/landing-v7/home-bitcoinwar-1.png`,
+      homeImage: `/landing-v7/home-bitcoinwar-5.png`,
       link: {
         url: '/bitcoin-wars',
         target: '_blank',
@@ -218,7 +218,7 @@ export const GAME_SECTION = {
     {
       title: 'Bitcoin ARCADE (Coming Soon)',
       description: 'Endless fun with onchain Bitcoin games.',
-      homeImage: `/landing-v7/home-arcade-1.png`,
+      homeImage: `/landing-v7/home-arcade-3.png`,
       link: {
         url: '',
         target: '_blank',
@@ -245,7 +245,7 @@ export const TOOLS_SECTION = {
     {
       title: 'BVM Studio',
       description: 'Customize your blockchain with drag-and-drop',
-      homeImage: `/landing-v7/home-studio-1.png`,
+      homeImage: `/landing-v7/home-studio-2.png`,
       link: {
         url: '/studio',
         target: '_blank',
@@ -256,7 +256,7 @@ export const TOOLS_SECTION = {
     {
       title: 'Heartbeats',
       description: 'Insights into Bitcoin chains',
-      homeImage: `/landing-v7/home-heartbeats-3.png`,
+      homeImage: `/landing-v7/home-heartbeats-4.png`,
       link: {
         url: '/heartbeats',
         target: '_blank',
@@ -283,7 +283,7 @@ export const ART_SECTION = {
     {
       title: 'Perceptrons',
       description: 'The first on-chain neural networks',
-      homeImage: `/landing-v7/home-perp-1.png`,
+      homeImage: `/landing-v7/home-perp-2.png`,
       link: {
         url: 'https://eternalai.org/perceptrons',
         target: '_blank',
@@ -294,7 +294,7 @@ export const ART_SECTION = {
     {
       title: 'Timechain',
       description: 'The first long-form gen art collection',
-      homeImage: `/landing-v7/home-timechain-2.png`,
+      homeImage: `/landing-v7/home-timechain-4.png`,
 
       link: {
         url: 'https://generative.xyz/generative/1000001',
@@ -321,7 +321,7 @@ export const SOCIALFI_SECTION = {
     {
       title: 'Alpha',
       description: 'The first social app on Bitcoin. ',
-      homeImage: `/landing-v7/home-alpha-1.png`,
+      homeImage: `/landing-v7/home-alpha-2.png`,
 
       link: {
         url: 'https://alpha.wtf/',

src/layouts/HeaderV4/menuConfig.ts

@@ -163,17 +163,18 @@ export const NAV_ITEMS_LEFT: Array<NavItem> = [
   //   isHide: false,
   // },
   {
-    label: 'Experience Bitcoin',
+    label: 'Build on Bitcoin',
     href: '/',
     isNewWindow: false,
     isHide: false,
   },
   {
-    label: 'Build on Bitcoin',
-    href: '/build-bitcoin',
+    label: 'Experience Bitcoin',
+    href: '/experience',
     isNewWindow: false,
     isHide: false,
   },
+
   // {
   //   label: '$BVM',
   //   href: '/bvm',

src/modules/landing/Componets/Hero/Content/index.tsx

@@ -38,16 +38,16 @@ export default function HeroContent() {
                 </button>
               </Fade>
             </li>
-            {/* <li>
+            <li>
               <Fade delayEnter={6.6}>
                 <button
-                  onClick={() => router.push('/')}
+                  onClick={() => router.push('/experience')}
                   className={`${s.btn} ${s.btn__red}`}
                 >
                   Experience Bitcoin
                 </button>
               </Fade>
-            </li> */}
+            </li>
           </ul>
           {/* <Fade delay={6.7}>
             <div className={s.contact}>

src/modules/landing/Componets/Hero/Content/styles.module.scss

@@ -3,7 +3,7 @@
   left: 50%;
   transform: translateX(-50%);
   z-index: 2;
-  max-width: 1200px;
+  max-width: 1000px;
   width: 100%;
   top: 180px;
   padding-left: 16px;
@@ -63,7 +63,7 @@
     justify-content: center;
     list-style: none !important;
     margin-top: rem(16px);
-    margin-bottom: 16px;
+    margin-bottom: 24px;
     position: relative;
     z-index: 2;
     flex-wrap: wrap;

src/modules/landing/Componets/PreLoader/index.tsx

@@ -11,5 +11,5 @@ export default function PreLoader() {
     }
   }, []);
 
-  return <>{true ? <Loader /> : <Intro />}</>;
+  return <>{isHadLoaded ? <Loader /> : <Intro />}</>;
 }

src/modules/landingV5/components/SectionBlock/Item/App/SectionItemApp.module.scss

@@ -17,6 +17,10 @@
 
     }
 
+    &.games {
+        width: 440px;
+    }
+
     &:not(.popular) {
         // margin-top: 40px;
         // margin-bottom: 18px;

src/modules/landingV5/components/SectionBlock/Item/App/index.tsx

@@ -67,6 +67,7 @@ const SectionItemApp = ({ item, sectionId, idx }: Props) => {
           ['pointer-none']: !item.link?.url,
         },
         { [s.eternal]: item.link?.url === ETERNAL_URL },
+        { [s.games]: sectionId === 'games' },
       )}
       href={item.link?.url}
       target="_blank"

src/modules/landingV5/components/SectionBlock/SectionBlock.module.scss

@@ -30,7 +30,7 @@ $text-max-width: 85ch;
 
         .title {
             color: rgba(255, 255, 255, 0.60);
-            font-family: "JetBrains Mono";
+            font-family: "SF Pro Display";
             font-size: 28px;
             font-style: normal;
             font-weight: 700;
@@ -39,7 +39,7 @@ $text-max-width: 85ch;
             p {
                 // max-width: 37ch;
                 color: #2E2E2E;
-                letter-spacing: -1.8px;
+                // letter-spacing: -1.8px;
             }
 
         }

src/modules/landingV5/styles.module.scss

@@ -15,13 +15,14 @@
 
         .introduction_title {
             color: #000;
-            font-family: "JetBrains Mono";
+            font-family: "SF Pro Display";
+
             font-size: 48px;
             font-style: normal;
             font-weight: 700;
             line-height: normal;
             letter-spacing: -1.8px;
-            max-width: 13ch;
+            max-width: 10ch;
         }
 
         .introduction_desc {