feat: integrate dynamic images on SEO pages

src/app/ui/bridge/BridgeExplanation.tsx

@@ -1,11 +1,11 @@
 'use client';
 import { BridgePageContainer } from '@/app/ui/bridge/BridgePage.style';
-import { Link as MuiLink, Typography } from '@mui/material';
+import { Typography } from '@mui/material';
 
 const BridgeExplanationSection = () => {
   return (
     <BridgePageContainer>
-      <Typography variant="h3" marginY={2} sx={{ fontSize: '32px!important' }}>
+      <Typography variant="h3" marginY={2} sx={{ fontSize: '32px' }}>
         What is a Blockchain / Crypto Bridge?
       </Typography>
       <Typography>
@@ -33,7 +33,7 @@ const BridgeExplanationSection = () => {
         variant="h4"
         marginY={2}
         sx={{
-          fontSize: '24px!important',
+          fontSize: '24px',
         }}
       >
         Here's why bridges are essential for enhancing blockchain
@@ -42,7 +42,7 @@ const BridgeExplanationSection = () => {
       <Typography
         variant="h4"
         sx={{
-          fontSize: '24px!important',
+          fontSize: '24px',
           marginTop: '4px',
           marginBottom: '2px',
         }}
@@ -61,7 +61,7 @@ const BridgeExplanationSection = () => {
       <Typography
         variant="h4"
         sx={{
-          fontSize: '24px!important',
+          fontSize: '24px',
           marginTop: '4px',
           marginBottom: '2px',
         }}
@@ -80,7 +80,7 @@ const BridgeExplanationSection = () => {
       <Typography
         variant="h4"
         sx={{
-          fontSize: '24px!important',
+          fontSize: '24px',
           marginTop: '4px',
           marginBottom: '2px',
         }}
@@ -99,7 +99,7 @@ const BridgeExplanationSection = () => {
       <Typography
         variant="h4"
         sx={{
-          fontSize: '24px!important',
+          fontSize: '24px',
           marginTop: '4px',
           marginBottom: '2px',
         }}
@@ -116,7 +116,7 @@ const BridgeExplanationSection = () => {
       <Typography
         variant="h4"
         sx={{
-          fontSize: '24px!important',
+          fontSize: '24px',
           marginTop: '4px',
           marginBottom: '2px',
         }}

src/app/ui/bridge/BridgePage.style.ts

@@ -2,12 +2,14 @@
 
 import type { BoxProps } from '@mui/system';
 import { Box, styled } from '@mui/system';
-import type { Breakpoint } from '@mui/material/styles';
 
 export const BridgePageContainer = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'active',
 })<BoxProps>(({ theme }) => ({
   color: theme.palette.text.primary,
+  maxWidth: '100%',
+  flexGrow: 1,
+  overflow: 'hidden',
   position: 'relative',
   borderRadius: 32,
   backgroundColor: theme.palette.bgSecondary.main,

src/app/ui/bridge/BridgePage.tsx

@@ -1,12 +1,12 @@
 'use client';
-import { Container, Stack, Typography } from '@mui/material';
+import { getChainInfoData, getTokenInfoData } from '@/app/ui/bridge/utils';
 import { Widget } from '@/components/Widgets/Widget';
 import type { ExtendedChain, Token, TokensResponse } from '@lifi/sdk';
-import HalfSizeBlock from '@/app/ui/bridge/HalfSizeBlock';
-import { getChainInfoData, getTokenInfoData } from '@/app/ui/bridge/utils';
-import StepsExplainerSection from './StepsExplainer';
+import { Container, Stack, Typography } from '@mui/material';
+import InformationCard from 'src/app/ui/bridge/InformationCard';
 import BridgeExplanationSection from './BridgeExplanation';
 import PopularBridgeSection from './PopularBridgeSection';
+import StepsExplainerSection from './StepsExplainer';
 
 interface BridgePageProps {
   sourceChain: ExtendedChain;
@@ -33,7 +33,7 @@ const BridgePage = ({
           color="text.primary"
           marginY={2}
           textAlign="center"
-          sx={{ fontSize: '40px!important' }}
+          sx={{ fontSize: '40px' }}
         >
           How to bridge from {sourceToken.symbol} on {sourceChain.name} to{' '}
           {destinationToken.symbol} on {destinationChain.name}
@@ -61,7 +61,7 @@ const BridgePage = ({
           flexWrap="wrap"
         >
           {[sourceChain, destinationChain].map((chain, index) => (
-            <HalfSizeBlock
+            <InformationCard
               type="Blockchain"
               key={`${chain.id}-${index}`}
               info={{
@@ -72,7 +72,7 @@ const BridgePage = ({
             />
           ))}
           {[sourceToken, destinationToken].map((token, index) => (
-            <HalfSizeBlock
+            <InformationCard
               type="Token"
               key={`${token.address}-${index}`}
               info={{

src/app/ui/bridge/InformationCard.style.ts

@@ -0,0 +1,13 @@
+'use client';
+
+import type { BoxProps, Breakpoint } from '@mui/system';
+import { styled } from '@mui/system';
+import { BridgePageContainer } from './BridgePage.style';
+
+export const InformationCardContainer = styled(BridgePageContainer, {
+  shouldForwardProp: (prop) => prop !== 'active',
+})<BoxProps>(({ theme }) => ({
+  [theme.breakpoints.up('md' as Breakpoint)]: {
+    maxWidth: 'calc(50% - 16px)',
+  },
+}));

src/app/ui/bridge/HalfSizeBlock.tsx → src/app/ui/bridge/InformationCard.tsx

@@ -7,10 +7,9 @@ import {
   TableRow,
   Typography,
 } from '@mui/material';
-import Image from 'next/image';
-import Link from 'next/link';
-import { BridgePageContainer } from '@/app/ui/bridge/BridgePage.style';
 import { Box } from '@mui/system';
+import Link from 'next/link';
+import { InformationCardContainer } from './InformationCard.style';
 
 function buildExplorerLink(blockExplorerUrls: string[] = [], address: string) {
   if (blockExplorerUrls.length === 0) {
@@ -22,7 +21,7 @@ function buildExplorerLink(blockExplorerUrls: string[] = [], address: string) {
       color="text.primary"
       component={Link}
       target="_blank"
-      href={`${blockExplorerUrls[0]}/tokens/${address}`}
+      href={`${blockExplorerUrls[0]}tokens/${address}`}
     >
       {address}
     </MuiLink>
@@ -39,7 +38,7 @@ interface Data {
   value: string | number | JSX.Element | JSX.Element[];
 }
 
-function HalfSizeBlock({
+function InformationCard({
   info,
   data = [],
   type,
@@ -49,7 +48,7 @@ function HalfSizeBlock({
   type: 'Blockchain' | 'Token';
 }) {
   return (
-    <BridgePageContainer width={'48.5%'}>
+    <InformationCardContainer>
       <Typography variant="h3" display="flex" alignItems="center">
         {info.logoURI && (
           <Box display="flex" marginRight={2}>
@@ -63,18 +62,20 @@ function HalfSizeBlock({
         )}
         {info.name} - {type} Information
       </Typography>
-      <Table>
+      <Table
+        sx={(theme) => ({ tableLayout: 'fixed', marginTop: theme.spacing(1) })}
+      >
         <TableBody>
           {data.map(({ label, value }, index) => (
             <TableRow key={index}>
-              <TableCell>{label}</TableCell>
+              <TableCell style={{ width: '30%' }}>{label}</TableCell>
               <TableCell>{value}</TableCell>
             </TableRow>
           ))}
         </TableBody>
       </Table>
-    </BridgePageContainer>
+    </InformationCardContainer>
   );
 }
 
-export default HalfSizeBlock;
+export default InformationCard;

src/app/ui/bridge/StepDetail.style.ts

@@ -0,0 +1,25 @@
+'use client';
+
+import type { BoxProps, Breakpoint } from '@mui/system';
+import { Box, styled } from '@mui/system';
+
+interface StepDetailContainerProps {
+  imgWidth: number;
+}
+
+export const StepDetailContainer = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'imgWidth',
+})<StepDetailContainerProps>(({ theme, imgWidth }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: theme.spacing(3),
+
+  [theme.breakpoints.up('lg' as Breakpoint)]: {
+    gap: theme.spacing(6),
+  },
+}));
+
+export const StepDetailInfo = styled(Box)<BoxProps>(({ theme }) => ({
+  display: 'flex',
+  minWidth: '50%',
+}));

src/app/ui/bridge/StepDetail.tsx

@@ -0,0 +1,52 @@
+'use client';
+import { Box, Typography } from '@mui/material';
+import Image from 'next/image';
+import type { ReactElement } from 'react';
+import { StepDetailContainer } from './StepDetail.style';
+
+const WIDGET_AMOUNT = 3;
+
+interface StepDetailImageProps {
+  imgUrl: string;
+  width: number;
+  height: number;
+  alt: string;
+}
+
+interface StepDetailProps {
+  title: string;
+  description: string;
+  img: StepDetailImageProps;
+  content?: ReactElement;
+}
+
+const StepDetail = ({ title, description, img, content }: StepDetailProps) => {
+  return (
+    <StepDetailContainer
+      sx={(theme) => ({ marginTop: theme.spacing(4) })}
+      imgWidth={img.width}
+    >
+      <Box>
+        <Typography variant="h4" marginY={2} sx={{ fontSize: '24p' }}>
+          {title}
+        </Typography>
+        <Typography>{description}</Typography>
+        {content}
+      </Box>
+      <Image
+        src={img.imgUrl}
+        alt={img.alt}
+        width={img.width}
+        height={img.height}
+        style={{
+          margin: 'auto',
+          maxWidth: '100%',
+          height: 'auto',
+          borderRadius: '12px',
+        }}
+      />
+    </StepDetailContainer>
+  );
+};
+
+export default StepDetail;