feat: Roadmap section

src/components/Safenet/Roadmap/index.tsx

@@ -0,0 +1,74 @@
+import { Button, Container, Grid, IconButton, Typography } from '@mui/material'
+import GradientChip from '@/components/Safenet/GradientChip'
+import TelegramGradient from '@/public/images/Safenet/telegram-gradient.svg'
+import css from './styles.module.css'
+import { ALPHA_TELEGRAM_LINK } from '@/config/constants'
+
+const items: Array<{ title: string; features: Array<string> }> = [
+  {
+    title: 'Alpha',
+    features: ['Cross-chain Accounts', 'Execution guarantees', 'Validity proofs'],
+  },
+  {
+    title: 'Beta',
+    features: ['Safe Apps Support', 'SAFE Validator network'],
+  },
+  {
+    title: 'Version 1',
+    features: ['Third-party Processors', 'Liquidity Network', 'ERC-7579 Support'],
+  },
+]
+
+const Roadmap = () => {
+  return (
+    <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 is coming <span className={css.titleGradient}>2025</span>
+        </Typography>
+
+        <Typography className={css.text}>Builder mode on.</Typography>
+      </div>
+
+      <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 md={3} className={css.blockItem} key={index}>
+            <Typography className={css.blockTitle}>{title}</Typography>
+
+            <div className={css.blockText}>
+              {features.map((item) => (
+                <Typography key={item}>{item}</Typography>
+              ))}
+            </div>
+          </Grid>
+        ))}
+      </Grid>
+
+      <div className={css.buttonWrapper}>
+        <IconButton href={ALPHA_TELEGRAM_LINK} target="_blank" rel="noreferrer">
+          <TelegramGradient />
+        </IconButton>
+
+        <Typography>Stay in the loop for all the latest insights!</Typography>
+
+        <Button
+          variant="contained"
+          size="large"
+          href={ALPHA_TELEGRAM_LINK}
+          target="_blank"
+          rel="noreferrer"
+          className={css.gradientButton}
+        >
+          Join Telegram group
+        </Button>
+      </div>
+    </Container>
+  )
+}
+
+export default Roadmap

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

@@ -0,0 +1,125 @@
+.container {
+  margin-top: 300px;
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.contentWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+}
+
+.title {
+  max-width: 1042px;
+  text-transform: uppercase;
+  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%);
+}
+
+.gridContainer {
+  margin-top: 80px;
+  justify-content: center;
+  gap: 80px;
+}
+
+.blockItem {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+}
+
+.blockTitle {
+  font-size: 32px;
+  line-height: 36px;
+  text-transform: uppercase;
+
+  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;
+}
+
+.blockText {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  align-items: center;
+  text-align: center;
+}
+
+.buttonWrapper {
+  margin-top: 70px;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  align-items: center;
+  gap: 24px;
+  width: 214px;
+}
+
+.hook,
+.timelineImage {
+  display: none;
+}
+
+@media (min-width: 900px) {
+  .hook {
+    display: block;
+    position: absolute;
+    left: -260px;
+    top: 6px;
+  }
+
+  .title {
+    font-size: 56px;
+    line-height: 60px;
+  }
+
+  .timelineImage {
+    width: 100%;
+    margin-top: 108px;
+  }
+
+  .gridContainer {
+    margin-top: 40px;
+    justify-content: space-around;
+  }
+
+  .buttonWrapper {
+    width: 100%;
+  }
+}
+
+@media (min-width: 1200px) {
+  .hook {
+    left: -112px;
+  }
+}
+
+@media (min-width: 1630px) {
+  .hook {
+    left: 104px;
+  }
+}

src/components/Safenet/index.tsx

@@ -1,13 +1,15 @@
 import ChainAbstraction from '@/components/Safenet/ChainAbstraction'
 import Hero from '@/components/Safenet/Hero'
 import Metadata from '@/components/Safenet/Metatags'
+import Roadmap from '@/components/Safenet/Roadmap'
 
 const Safenet = () => {
   return (
     <div>
       <Metadata />
       <Hero />
       <ChainAbstraction />
+      <Roadmap />
     </div>
   )
 }