feat: CrossChain section tags

src/components/Safenet/ChainAbstraction/index.tsx → src/components/Safenet/CrossChain/index.tsx

@@ -10,23 +10,36 @@ const text =
 const items: BaseBlock['items'] = [
   {
     image: {
-      src: '/images/Safenet/ChainAbstraction/arrows.png',
+      src: '/images/Safenet/CrossChain/arrows.png',
       alt: 'Forward arrows',
     },
-    title: 'Instant Transactions',
+    title: (
+      <>
+        Instant
+        <br />
+        Transactions
+      </>
+    ),
     text: 'Get your transactions executed within 500ms, without cross-chain latency',
+    caption: 'Speed',
   },
   {
     image: {
-      src: '/images/Safenet/ChainAbstraction/padlock.png',
+      src: '/images/Safenet/CrossChain/padlock.png',
       alt: 'Verifiyed padlock',
     },
-    title: 'Execution guarantees',
+    title: (
+      <>
+        Execution <br />
+        guarantees
+      </>
+    ),
     text: 'Set custom policies and security checks ',
+    caption: 'Security',
   },
   {
     image: {
-      src: '/images/Safenet/ChainAbstraction/blobs.png',
+      src: '/images/Safenet/CrossChain/blobs.png',
       alt: 'Unified blobs',
     },
     title: (
@@ -36,10 +49,11 @@ const items: BaseBlock['items'] = [
       </>
     ),
     text: 'Spend from a single balance across all chains and offchain',
+    caption: 'Scale',
   },
 ]
 
-const ChainAbstraction = () => (
+const CrossChain = () => (
   <div className={css.anchor}>
     <div className={css.upperArc} />
 
@@ -61,6 +75,7 @@ const ChainAbstraction = () => (
         {items.map((item, index) => (
           <div className={`${css[`block${index + 1}`]} ${css.blockItem}`} key={index}>
             {item.image ? <img src={item.image.src} alt={item.image.alt} className={css.blockImage} /> : null}
+            <Typography className={css.blockCaption}>{item.caption}</Typography>
             <Typography className={css.blockTitle}>{item.title}</Typography>
             <Typography className={css.blockText}>{item.text}</Typography>
           </div>
@@ -72,6 +87,7 @@ const ChainAbstraction = () => (
           {items.map((item, index) => (
             <Grid item md={4} className={css.blockItem} key={index}>
               {item.image ? <img src={item.image.src} alt={item.image.alt} className={css.blockImage} /> : null}
+              <Typography className={css.blockCaption}>{item.caption}</Typography>
               <Typography className={css.blockTitle}>{item.title}</Typography>
               <Typography className={css.blockText}>{item.text}</Typography>
             </Grid>
@@ -86,4 +102,4 @@ const ChainAbstraction = () => (
   </div>
 )
 
-export default ChainAbstraction
+export default CrossChain

src/components/Safenet/ChainAbstraction/styles.module.css → src/components/Safenet/CrossChain/styles.module.css

@@ -15,7 +15,7 @@
 }
 
 .upperArc {
-  background-image: url('/images/Safenet/ChainAbstraction/upper-arc.png');
+  background-image: url('/images/Safenet/CrossChain/upper-arc.png');
   background-position: center;
   background-repeat: no-repeat;
   overflow: auto;
@@ -100,6 +100,16 @@
   top: -106px;
 }
 
+.blockCaption {
+  border: 2px solid var(--mui-palette-text-dark);
+  border-radius: 20px;
+  text-transform: uppercase;
+  height: 32px;
+  padding: 4px 14px;
+  display: flex;
+  align-items: center;
+}
+
 .blockTitle {
   text-transform: uppercase;
   font-size: 32px;
@@ -135,31 +145,29 @@
   .blocksWrapper {
     display: block;
     margin-top: 180px;
-    background-image: url('/images/Safenet/ChainAbstraction/blocks.png');
+    background-image: url('/images/Safenet/CrossChain/blocks.png');
     background-repeat: no-repeat;
-    background-size: contain;
+    background-size: cover;
     width: 100%;
-    height: 334px;
+    height: 366px;
   }
 
   .blockItem {
-    height: 300px;
+    /* height: 300px; */
   }
 }
 
 @media (min-width: 1630px) {
   .blocksWrapper {
     background-size: cover;
-    height: 392px;
+    height: 494px;
   }
 
   .blockItem {
     --line-height: 28px;
-    height: 392px;
-  }
-
-  .blockTitle br {
-    display: none;
+    height: 494px;
+    justify-content: center;
+    gap: 32px;
   }
 
   .blockText {

src/components/Safenet/index.tsx

@@ -1,5 +1,5 @@
 import Architecture from '@/components/Safenet/Architecture'
-import ChainAbstraction from '@/components/Safenet/ChainAbstraction'
+import CrossChain from '@/components/Safenet/CrossChain'
 import Hero from '@/components/Safenet/Hero'
 import Metadata from '@/components/Safenet/Metatags'
 import Roadmap from '@/components/Safenet/Roadmap'
@@ -9,7 +9,7 @@ const Safenet = () => {
     <div>
       <Metadata />
       <Hero />
-      <ChainAbstraction />
+      <CrossChain />
       <Architecture />
       <Roadmap />
     </div>