From 33fb8157cf07e36b38fa4a67f9bcd50aeee86b68 Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Fri, 22 Mar 2024 03:11:20 +0900
Subject: [PATCH] feat: upgrade preset version

---
 package.json        |   2 +-
 src/css/custom.scss |  13 ++-
 src/pages/index.mdx | 248 ++++++++++++++++++++++++++------------------
 yarn.lock           |  32 +++---
 4 files changed, 175 insertions(+), 120 deletions(-)

diff --git a/package.json b/package.json
index 4dc1e488..9bd6d2b5 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@acid-info/docusaurus-fathom": "^1.0.0-alpha.111",
-    "@acid-info/logos-docusaurus-preset": "^1.0.0-alpha.142",
+    "@acid-info/logos-docusaurus-preset": "^1.0.0-topic-new-layout.23",
     "@docusaurus/theme-mermaid": "^2.4.1",
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
diff --git a/src/css/custom.scss b/src/css/custom.scss
index c86f83c8..b9bfeecb 100644
--- a/src/css/custom.scss
+++ b/src/css/custom.scss
@@ -54,4 +54,15 @@ div:has(.community-container) > .container {
   .lsd-typography--body2 {
     margin-left: 16px;
   }
-}
\ No newline at end of file
+}
+
+.mdx-section-header__extra {
+  display: flex;
+  align-items: center;
+}
+
+.build-on-waku-button {
+  display: flex;
+  align-items: center;
+  text-decoration: none !important;
+}
diff --git a/src/pages/index.mdx b/src/pages/index.mdx
index 3c579409..75218c02 100644
--- a/src/pages/index.mdx
+++ b/src/pages/index.mdx
@@ -7,76 +7,93 @@ import {
   Hero,
   HeroTitle,
   HeroDescription,
-  HeroVideo,
   HeroActions,
   HeroAction,
   CallToActionSection,
   CallToActionButton,
   FeatureList,
   HeroInfo,
+  HeroImage,
   Box,
   Grid,
   Roadmap,
   ShowcaseCard,
   SectionHeader,
-  NewsletterSubscription,
+  InputCTASection,
 } from '../components/mdx'
 
-<Hero size="large">
-  <HeroInfo>
-    <HeroTitle>
-      {`Waku is Uncompromising Web3 Communication at Scale`}
+import { Button } from '@acid-info/lsd-react'
+import Link from '@docusaurus/Link'
+
+<Hero size="large" verticalAlign="center">
+  <HeroInfo hideScrollToBottom>
+    <HeroTitle uppercase={false}>
+      Waku is Uncompromising Web3 Communication at Scale
     </HeroTitle>
     <HeroDescription>
-      {`A family of robust, censorship-resistant communication protocols designed to enable privacy-focused messaging for web3 apps.`} 
+      A family of robust, censorship-resistant communication protocols designed to enable privacy-focused messaging for web3 apps. 
     </HeroDescription>
     <HeroActions>
       <HeroAction href="https://docs.waku.org/" target="_blank">
-        {`Learn more`} 
+        Learn more
       </HeroAction>
     </HeroActions>
   </HeroInfo>
-  <HeroVideo
-    placeholderSrc="/hero/prome01-1080x1080-placeholder.png"
-    desktop={{ scale: '1.43', height: '160%', offsetY: "-220px"  }}
-    mobile={{ scale: '1.43', offsetY: "-70px", height: '200%' }}
-  >
-    <source src="/hero/prome01-2048x2048-24fps-1M.mov" type='video/mp4; codecs="hvc1"' />
-    <source src="/hero/prome01-2048x2048-24fps-1M.webm" type="video/webm" />  
-  </HeroVideo>
+  <HeroImage>
+  </HeroImage>
 </Hero>
 
-<FeatureList
-  id="Waku attributes"
-  alignment="top"
-  features={[
-    {
-      title: 'Private',
-      description:
-        'Waku uses cutting-edge zero-knowledge technology to protect applications from Denial of Service attacks. Tailor your application\'s privacy settings to suit your needs.',
-    },
-    {
-      title: 'Censorship resistant',
-      description:
-        "Decentralised human-to-human, machine-to-human, and machine-to-machine communication, with no single point of failure. Waku\'s native incentivization mechanism stimulates an expanding node distribution, promoting an increasingly secure network.",
-    },
-    {
-      title: 'Modular',
-      description:
-        'Waku protocols are adaptive and platform agnostic, and can be customised based on an application\'s unique demands. Waku is built to flourish even in resource-restricted environments like browsers and mobile devices.',
-    },
-    {
-      title: 'Scalable',
-      description:
-        "Waku employs message sharding for efficient throughput, while its discovery protocol ensures a user connects to nodes serving messages they are interested in.",
-    },
-  ]}
-/>
+<Box>
+  <SectionHeader noBorder title="Features">
+  </SectionHeader>
+  <Box top={{ xs: 64 }}>
+    <Grid
+      xs={{ cols: 2, wrap: true, gap: '1.5rem 1em' }}
+      lg={{ cols: 4, gap: '1rem' }}
+    >
+      <Grid.Item>
+        <ShowcaseCard
+          index={1}
+          name="Private"
+          description="Waku uses cutting-edge zero-knowledge technology to protect applications from Denial of Service attacks. Tailor your application's privacy settings to suit your needs."
+          borderStyle="none"
+        />
+      </Grid.Item>
+      <Grid.Item>
+        <ShowcaseCard
+          index={2}
+          name="Censorship resistant"
+          description="Decentralised human-to-human, machine-to-human, and machine-to-machine communication, with no single point of failure. Waku's native incentivization mechanism stimulates an expanding node distribution, promoting an increasingly secure network."
+          borderStyle="none"
+        />
+      </Grid.Item>
+      <Grid.Item>
+        <ShowcaseCard
+          index={3}
+          name="Modular"
+          description="Waku protocols are adaptive and platform agnostic, and can be customised based on an application's unique demands. Waku is built to flourish even in resource-restricted environments like browsers and mobile devices."
+          borderStyle="none"
+        />
+      </Grid.Item>
+      <Grid.Item>
+        <ShowcaseCard
+          index={4}
+          name="Scalable"
+          description='Waku employs message sharding for efficient throughput, while its discovery protocol ensures a user connects to nodes serving messages they are interested in.'
+          borderStyle="none"
+        />
+      </Grid.Item>
+    </Grid>
+  </Box>
+</Box>
 
-<Box top={{ xs: 144, lg: 216 }}>
+
+<Box top={{ xs: 144, lg: 190 }}>
   <CallToActionSection
     title="Logos Collective"
     columns={1}
+    border={false}
+    align="center"
     description={<>
         Waku is powering the communication layer of the Logos technology stack. Logos is a grassroots movement, building the infrastructure for trust-minimised, corruption-resistant governing services and social institutions for peaceful people worldwide.<br/><br/> 
         Learn more about our ambitious vision.
@@ -87,55 +104,62 @@ import {
   />
 </Box>
 
-<Box top={{ xs: 144, lg: 216 }}>
-  <CallToActionSection
-    title="User Endorsements"
-  />
-</Box>
-
-<Box top={{ xs: 64, lg: 100 }}>
- <Grid
-    id="showcase"
-    xs={{ cols: 2, wrap: true, gap: '1.5rem 1em' }}
-    lg={{ cols: 3, gap: '1rem' }}
+<Box top={{ xs: 144, lg: 190 }}>
+    <SectionHeader noBorder title="User Endorsements">
+    <Link className="build-on-waku-button" href="/about">
+      <Button size="small">Build on Waku</Button>
+    </Link>
+  </SectionHeader>
+  <Box
+    top={{ xs: 64 }}
+    bottom={{ xs: 64 }}
   >
-    <Grid.Item xs={1}> 
-      <ShowcaseCard
-        name='Status'
-        logoSrc='/showcase/status-mark-black.svg'
-        logoSrcDark='/showcase/status-mark-white.svg'
-        description={`"Waku v2 has been instrumental in helping us scale the Status application securely while maintaining the decentralised nature of our network. The Waku team has been invaluable in providing practical solutions during the development of the Waku v2 protocol, enabling us to deliver essential Status Communities features.”`}
-      />
-    </Grid.Item> 
-    <Grid.Item xs={1}> 
-      <ShowcaseCard
-        name='Railgun'
-        logoSrc='/showcase/railgun-mark-black.svg'
-        logoSrcDark='/showcase/railgun-mark-white.svg'
-        description={<>"RAILGUN contributors selected Waku to run its relayer network as an early-stage but promising product of the privacy-centric <a href="https://status.im" target="_blank">status.im</a> ecosystem. We have not been disappointed. The developers are extremely professional and responsive, and continue to strive to understand and meet our needs as a communication layer for relaying private transactions."</>}
-      />
-    </Grid.Item> 
-    <Grid.Item xs={1}> 
-      <ShowcaseCard
-        name='The Graph'
-        logoSrc='/showcase/the-graph-mark-black.svg'
-        logoSrcDark='/showcase/the-graph-mark-white.svg'
-        description={`"Our experience with Waku has been transformative, proving to be a valuable tool that reveals the potential of peer-to-peer communication technologies. We are excited to continue using Waku's advanced features and contribute to the growth of Graphcast and the broader Graph ecosystem."`}
-      /><>
-        Want to learn more about Waku? <br/> 
-        Join the Discord community.
-      </>
-    </Grid.Item> 
-  </Grid>
+    <Grid
+      id="showcase"
+      xs={{ cols: 2, wrap: true, gap: '1.5rem 1em' }}
+      lg={{ cols: 3, gap: '1rem' }}
+    >
+      <Grid.Item xs={1}> 
+        <ShowcaseCard
+          name='Status'
+          logoSrc='/showcase/status-mark-black.svg'
+          logoSrcDark='/showcase/status-mark-white.svg'
+          description={`"Waku v2 has been instrumental in helping us scale the Status application securely while maintaining the decentralised nature of our network. The Waku team has been invaluable in providing practical solutions during the development of the Waku v2 protocol, enabling us to deliver essential Status Communities features.”`}
+        />
+      </Grid.Item> 
+      <Grid.Item xs={1}> 
+        <ShowcaseCard
+          name='Railgun'
+          logoSrc='/showcase/railgun-mark-black.svg'
+          logoSrcDark='/showcase/railgun-mark-white.svg'
+          description={<>"RAILGUN contributors selected Waku to run its relayer network as an early-stage but promising product of the privacy-centric <a href="https://status.im" target="_blank">status.im</a> ecosystem. We have not been disappointed. The developers are extremely professional and responsive, and continue to strive to understand and meet our needs as a communication layer for relaying private transactions."</>}
+        />
+      </Grid.Item> 
+      <Grid.Item xs={1}> 
+        <ShowcaseCard
+          name='The Graph'
+          logoSrc='/showcase/the-graph-mark-black.svg'
+          logoSrcDark='/showcase/the-graph-mark-white.svg'
+          description={`"Our experience with Waku has been transformative, proving to be a valuable tool that reveals the potential of peer-to-peer communication technologies. We are excited to continue using Waku's advanced features and contribute to the growth of Graphcast and the broader Graph ecosystem."`}
+        /><>
+          Want to learn more about Waku? <br/> 
+          Join the Discord community.
+        </>
+      </Grid.Item> 
+    </Grid>
+  </Box>
   <Box top={32}>
     <CallToActionButton href="https://docs.waku.org/" variant="outlined">Build on Waku</CallToActionButton>
   </Box>
 </Box>
 
-<Box top={{ xs: 144, lg: 216 }}>
+<Box top={{ xs: 144, lg: 190 }}>
   <Roadmap 
+    noBorder
     title="Roadmap"
-    description="Waku aims to support tens of millions of simultaneous users, truly serving as the communications standard across web3" 
+    description="Waku aims to support tens of millions of simultaneous users, truly serving as the communications standard across web3"
+    href="/about/roadmap"
+    linkLabel="Learn more"
     timeline={[
       {
         period: [2013],
@@ -179,26 +203,46 @@ import {
       }
     ]}
   >
-    <CallToActionButton style={{ marginTop: 0 }} size="large" variant="outlined" href="/about">
-        Read more
-    </CallToActionButton>
   </Roadmap>
 </Box>
 
-<Box top={{ xs: 144, lg: 336 }}>
-  <NewsletterSubscription />
+<Box top={{ xs: 152, lg: 300 }}>
+  <Grid
+    xs={{ cols: 1, gap: '1rem' }}
+    md={{ cols: 2 }}
+  >
+    <Grid.Item xs={1}>
+      <InputCTASection
+        description={
+          'Want to get involved with Waku?\nJoin the Discord community.'
+        }
+        link="https://discord.waku.org/"
+        label="Get Involved"
+      />
+    </Grid.Item>
+    <Grid.Item xs={1}>
+      <InputCTASection
+        description={'Subscribe\nto our newsletter'}
+        label="Subscribe"
+        formInput={[
+          {
+            label: 'Name',
+            placeholder: 'Name',
+            type: 'text',
+            name: 'name',
+            required: true,
+          },
+          {
+            label: 'Email',
+            placeholder: 'Enter your email',
+            type: 'email',
+            name: 'email',
+            required: true,
+          },
+        ]}
+        formListId={5}
+      />
+    </Grid.Item>
+  </Grid>
 </Box>
 
-<Box top={{ xs: 144, lg: 96 }}>
-  <CallToActionSection
-    title={
-      <>
-        Want to learn more about Waku? <br/> 
-        Join the Discord community.
-      </>
-    }
-    label="Join us on Discord"
-    target="_blank"
-    href="https://discord.waku.org/"
-  />
-</Box>
diff --git a/yarn.lock b/yarn.lock
index 778a7829..63b82403 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -19,7 +19,7 @@
     satori "^0.10.1"
     sharp "^0.32.1"
 
-"@acid-info/docusaurus-og@^1.0.0-alpha.131":
+"@acid-info/docusaurus-og@1.0.0-alpha.131":
   version "1.0.0-alpha.131"
   resolved "https://registry.yarnpkg.com/@acid-info/docusaurus-og/-/docusaurus-og-1.0.0-alpha.131.tgz#316a736455c3c0e542b32ad63f1b34714588b67b"
   integrity sha512-a0EbvwffHdShC8+bDzLA3VqPW71n2NPy01t0c2Tm8lMu1Xo/JOUEAr23qcuRETfOPbiHWY2DJC/3AGWOffc59g==
@@ -36,14 +36,14 @@
     satori "^0.10.1"
     sharp "^0.32.1"
 
-"@acid-info/logos-docusaurus-preset@^1.0.0-alpha.142":
-  version "1.0.0-alpha.142"
-  resolved "https://registry.yarnpkg.com/@acid-info/logos-docusaurus-preset/-/logos-docusaurus-preset-1.0.0-alpha.142.tgz#a2558021531be6db58188e39a0ff0008844d3d38"
-  integrity sha512-9fTYZCaYNSU9gLdG+h2fgfGYS+mRgTWJDa+cc8/YVa8yJ+lQCzHM4VgQknoGPQ+7m01uWgdKNQ3CI0A6/cSNvQ==
+"@acid-info/logos-docusaurus-preset@^1.0.0-topic-new-layout.23":
+  version "1.0.0-topic-new-layout.23"
+  resolved "https://registry.yarnpkg.com/@acid-info/logos-docusaurus-preset/-/logos-docusaurus-preset-1.0.0-topic-new-layout.23.tgz#a49863535dd7aa6999774fdf532935d8f51086ac"
+  integrity sha512-WyE/Jw76XwQNtQP8hnB4pAkoL5yh7yGtAIUE2IBc8K3+qIODPWrHIGTlwZAa1FB3vckOGRuDPifh6ZH6sDt5iA==
   dependencies:
-    "@acid-info/docusaurus-og" "^1.0.0-alpha.131"
-    "@acid-info/logos-docusaurus-search-local" "^1.0.0-alpha.111"
-    "@acid-info/logos-docusaurus-theme" "^1.0.0-alpha.142"
+    "@acid-info/docusaurus-og" "1.0.0-alpha.131"
+    "@acid-info/logos-docusaurus-search-local" "1.0.0-alpha.111"
+    "@acid-info/logos-docusaurus-theme" "1.0.0-topic-new-layout.23+0fa1e48"
     "@docusaurus/core" "^2.4.1"
     "@docusaurus/module-type-aliases" "^2.4.1"
     "@docusaurus/preset-classic" "^2.4.1"
@@ -57,7 +57,7 @@
     lodash "^4.17.21"
     node-fetch "2"
 
-"@acid-info/logos-docusaurus-search-local@^1.0.0-alpha.111":
+"@acid-info/logos-docusaurus-search-local@1.0.0-alpha.111":
   version "1.0.0-alpha.111"
   resolved "https://registry.yarnpkg.com/@acid-info/logos-docusaurus-search-local/-/logos-docusaurus-search-local-1.0.0-alpha.111.tgz#f4a19ad1fdee4da58b7793dde5294304475cff70"
   integrity sha512-W8ILeA095JgaBcze/zsh7GX5yH+oee7QG7kFqfiO7F5apai/0tGfLm1tq7oiJT+jR7guW1jxwuACIFxP7Jm8pw==
@@ -71,13 +71,13 @@
     "@easyops-cn/docusaurus-search-local" "^0.33.6"
     lodash "^4.17.21"
 
-"@acid-info/logos-docusaurus-theme@^1.0.0-alpha.142":
-  version "1.0.0-alpha.142"
-  resolved "https://registry.yarnpkg.com/@acid-info/logos-docusaurus-theme/-/logos-docusaurus-theme-1.0.0-alpha.142.tgz#a667e647b08cbb33b2d06fa5f03d69defb10fa20"
-  integrity sha512-t/xTSzQDWRnaaaUNoOp63MgLX7voHmwR1CgvXScMUgtqDYux6coHQ6zkaoMfUG7f3Usk3cEys3MqVdC3ODuiRg==
+"@acid-info/logos-docusaurus-theme@1.0.0-topic-new-layout.23+0fa1e48":
+  version "1.0.0-topic-new-layout.23"
+  resolved "https://registry.yarnpkg.com/@acid-info/logos-docusaurus-theme/-/logos-docusaurus-theme-1.0.0-topic-new-layout.23.tgz#42352546f2ebda6b1264360f66f491b54e165a36"
+  integrity sha512-lJ4AJs6L202yyzqfUISok0YronpMSkoGf1C6IaLuEivmdzrzBddIDvIz3pQLYEQNQUum5tNJc7jfMI5lIa+byA==
   dependencies:
-    "@acid-info/docusaurus-og" "^1.0.0-alpha.131"
-    "@acid-info/lsd-react" "^0.1.0-beta.1"
+    "@acid-info/docusaurus-og" "1.0.0-alpha.131"
+    "@acid-info/lsd-react" "^0.1.0-beta.3"
     "@docusaurus/core" "^2.4.1"
     "@docusaurus/mdx-loader" "^2.4.1"
     "@docusaurus/module-type-aliases" "^2.4.1"
@@ -118,7 +118,7 @@
     three-stdlib "^2.23.4"
     utility-types "^3.10.0"
 
-"@acid-info/lsd-react@^0.1.0-beta.1":
+"@acid-info/lsd-react@^0.1.0-beta.3":
   version "0.1.0-beta.3"
   resolved "https://registry.yarnpkg.com/@acid-info/lsd-react/-/lsd-react-0.1.0-beta.3.tgz#2f211b647d68d6fce163afb60989494f555354be"
   integrity sha512-lD/x1BZyYdQCUmtMH3YpKSInEO73wRFRxUM6lzbz5UDDUnPfDpj/g4mQrXKL1keV3ujGJbMLaCC36cZT8VgNNw==