feat: Waitlist section

src/components/Safenet/Hero/index.tsx

@@ -7,40 +7,38 @@ const title = "Moving the World's GDP onchain"
 const text =
   'Powered by Safe, Processor and Liquidity Network enables DeFi users to transact anywhere, offering unprecedented speed, guaranteed execution and security.'
 
-const Hero = () => {
-  return (
-    <div className={css.anchor}>
-      <div className={`${css.backgroundArc} ${css.upperArc}`} />
-      <div className={`${css.backgroundArc} ${css.lowerArc}`} />
-
-      <Container className={css.container}>
-        <video autoPlay muted playsInline loop className={css.video}>
-          <source src="/videos/Safenet/Logo.webm" type="video/webm" />
-        </video>
-
-        <div className={css.contentWrapper}>
-          <div className={css.captionWrapper}>
-            Introducing
-            <SafenetLogo className={css.logo} />
-          </div>
-
-          <Typography variant="h2" className={css.title}>
-            <>{title}</>
-          </Typography>
-
-          <Typography className={css.text}>{text}</Typography>
+const Hero = () => (
+  <div className={css.anchor}>
+    <div className={`${css.backgroundArc} ${css.upperArc}`} />
+    <div className={`${css.backgroundArc} ${css.lowerArc}`} />
+
+    <Container className={css.container}>
+      <video autoPlay muted playsInline loop className={css.video}>
+        <source src="/videos/Safenet/Logo.webm" type="video/webm" />
+      </video>
+
+      <div className={css.contentWrapper}>
+        <div className={css.captionWrapper}>
+          Introducing
+          <SafenetLogo className={css.logo} />
         </div>
 
-        <div className={css.buttonsWrapper}>
-          <Button variant="contained" size="large" className={css.gradientButton}>
-            Join waitinglist
-          </Button>
+        <Typography variant="h2" className={css.title}>
+          <>{title}</>
+        </Typography>
 
-          <LinkButton>Our vision</LinkButton>
-        </div>
-      </Container>
-    </div>
-  )
-}
+        <Typography className={css.text}>{text}</Typography>
+      </div>
+
+      <div className={css.buttonsWrapper}>
+        <Button variant="contained" size="large" className={css.gradientButton}>
+          Join waitinglist
+        </Button>
+
+        <LinkButton>Our vision</LinkButton>
+      </div>
+    </Container>
+  </div>
+)
 
 export default Hero

src/components/Safenet/Roadmap/index.tsx

@@ -21,59 +21,57 @@ const items: Array<{ title: string; tag: string; features: Array<string> }> = [
   },
 ]
 
-const Roadmap = () => {
-  return (
-    <Container className={css.container}>
-      <div className={css.contentWrapper}>
-        <GradientChip caption="Roadmap" />
+const Roadmap = () => (
+  <Container className={css.container}>
+    <div className={css.contentWrapper}>
+      <GradientChip caption="Roadmap" />
 
-        <Typography className={css.title}>
-          <img src="/images/Safenet/roadmap-hook.png" alt="Addornment" className={css.hook} />
-          Safenet
-          <br /> is coming <span className={css.titleGradient}>2025</span>
-        </Typography>
+      <Typography className={css.title}>
+        <img src="/images/Safenet/roadmap-hook.png" alt="Adornment" className={css.hook} />
+        Safenet
+        <br /> is coming <span className={css.titleGradient}>2025</span>
+      </Typography>
 
-        <Typography className={css.text}>Builder mode on.</Typography>
-      </div>
+      <Typography>Builder mode on.</Typography>
+    </div>
 
-      <img src="/images/Safenet/timeline.png" alt="Safenet timeline" width="100%" className={css.timelineImage} />
+    <img src="/images/Safenet/timeline.png" alt="Safenet timeline" width="100%" className={css.timelineImage} />
 
-      <Grid container className={css.gridContainer}>
-        {items.map(({ title, features }, index) => (
-          <Grid item xs={6} md={3} className={css.blockItem} key={index}>
-            <div className={`${css.mobileTag} ${css[`mobileTag${index + 1}`]}`}>Q1 2025</div>
+    <Grid container className={css.gridContainer}>
+      {items.map(({ title, features }, index) => (
+        <Grid item xs={6} md={3} className={css.blockItem} key={index}>
+          <div className={`${css.mobileTag} ${css[`mobileTag${index + 1}`]}`}>Q1 2025</div>
 
-            <Typography className={css.blockTitle}>{title}</Typography>
+          <Typography className={css.blockTitle}>{title}</Typography>
 
-            <div className={css.blockText}>
-              {features.map((item) => (
-                <Typography key={item}>{item}</Typography>
-              ))}
-            </div>
-          </Grid>
-        ))}
-      </Grid>
+          <div className={css.blockText}>
+            {features.map((item) => (
+              <Typography key={item}>{item}</Typography>
+            ))}
+          </div>
+        </Grid>
+      ))}
+    </Grid>
 
-      <div className={css.buttonWrapper}>
-        <IconButton href="https://dub.sh/safealpha" target="_blank" rel="noreferrer">
-          <TelegramGradient />
-        </IconButton>
+    <div className={css.buttonWrapper}>
+      <IconButton href="https://dub.sh/safealpha" target="_blank" rel="noreferrer">
+        <TelegramGradient />
+      </IconButton>
 
-        <Typography>Stay in the loop for all the latest insights!</Typography>
+      <Typography>Stay in the loop for all the latest insights!</Typography>
 
-        <Button
-          variant="contained"
-          size="large"
-          href="https://dub.sh/safealpha"
-          target="_blank"
-          rel="noreferrer"
-          className={css.gradientButton}
-        >
-          Join Telegram group
-        </Button>
-      </div>
-    </Container>
-  )
-}
+      <Button
+        variant="contained"
+        size="large"
+        href="https://dub.sh/safealpha"
+        target="_blank"
+        rel="noreferrer"
+        className={css.gradientButton}
+      >
+        Join Telegram group
+      </Button>
+    </div>
+  </Container>
+)
 
 export default Roadmap

src/components/Safenet/Roadmap/styles.module.css

@@ -114,7 +114,7 @@
     display: block;
     position: absolute;
     left: -248px;
-    top: 6px;
+    top: 16px;
   }
 
   .title {

src/components/Safenet/Waitlist/index.tsx

@@ -0,0 +1,43 @@
+import { Button, Container, IconButton, Typography } from '@mui/material'
+import XGradient from '@/public/images/Safenet/x-gradient.svg'
+import TelegramGradient from '@/public/images/Safenet/telegram-gradient.svg'
+import css from './styles.module.css'
+
+const Waitlist = () => (
+  <div className={css.anchor}>
+    <img src="/images/Safenet/Waitlist/chain.png" alt="Chain" className={css.chainImage} />
+
+    <Container className={css.container}>
+      <Typography className={css.title}>
+        Be part of <br />
+        <span className={css.titleGradient}>
+          <img src="/images/Safenet/Waitlist/hook.png" alt="Adornment hook" className={css.hook} />
+          Safenet
+        </span>
+      </Typography>
+
+      <div className={css.buttonWrapper}>
+        <IconButton href="https://x.com/safe" target="_blank" rel="noreferrer">
+          <XGradient />
+        </IconButton>
+
+        <IconButton href="https://dub.sh/safealpha" target="_blank" rel="noreferrer">
+          <TelegramGradient />
+        </IconButton>
+
+        <Button
+          variant="contained"
+          size="large"
+          href="https://dub.sh/safealpha"
+          target="_blank"
+          rel="noreferrer"
+          className={css.gradientButton}
+        >
+          Join Telegram group
+        </Button>
+      </div>
+    </Container>
+  </div>
+)
+
+export default Waitlist

src/components/Safenet/Waitlist/styles.module.css

@@ -0,0 +1,100 @@
+.anchor {
+  position: relative;
+  overflow: hidden;
+}
+
+.container {
+  margin-top: 200px;
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  overflow: visible;
+}
+
+.title {
+  text-align: center;
+
+  font-size: 40px;
+  line-height: 44px;
+}
+
+.titleGradient {
+  background: radial-gradient(129.11% 259.78% at 103.1% -21.2%, #ff5f00 0%, #ffd200 50%, #12ff80 100%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-style: italic;
+}
+
+.gradientButton {
+  border-radius: 12px;
+  background: radial-gradient(129.11% 259.78% at 103.1% -21.2%, #ff5f00 0%, #ffd200 50%, #12ff80 100%);
+}
+
+.buttonWrapper {
+  margin-top: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  flex-direction: row;
+  text-align: center;
+  align-items: center;
+  gap: 24px;
+}
+
+.hook {
+  display: none;
+}
+
+.chainImage {
+  display: none;
+}
+
+@media (min-width: 900px) {
+  .title br {
+    display: none;
+  }
+
+  .hook {
+    display: block;
+    position: absolute;
+    right: -488px;
+    top: -40px;
+  }
+
+  .chainImage {
+    display: block;
+    position: absolute;
+    right: -56px;
+    bottom: 120px;
+    width: 380px;
+  }
+
+  .title {
+    text-transform: uppercase;
+    font-size: 80px;
+    line-height: 90px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .hook {
+    right: -344px;
+  }
+
+  .gridContainer {
+    padding-left: 30px;
+    padding-right: 30px;
+    justify-content: space-around;
+  }
+}
+
+@media (min-width: 1630px) {
+  .hook {
+    right: -130px;
+  }
+}

src/components/Safenet/index.tsx

@@ -4,18 +4,18 @@ import Hero from '@/components/Safenet/Hero'
 import Metadata from '@/components/Safenet/Metatags'
 import Roadmap from '@/components/Safenet/Roadmap'
 import Values from '@/components/Safenet/Values'
+import Waitlist from '@/components/Safenet/Waitlist'
 
-const Safenet = () => {
-  return (
-    <div>
-      <Metadata />
-      <Hero />
-      <CrossChain />
-      <Architecture />
-      <Roadmap />
-      <Values />
-    </div>
-  )
-}
+const Safenet = () => (
+  <div>
+    <Metadata />
+    <Hero />
+    <CrossChain />
+    <Architecture />
+    <Roadmap />
+    <Values />
+    <Waitlist />
+  </div>
+)
 
 export default Safenet