I am trying to get a neater version of something like this[![What I want to get](https://i.stack.imgur.com/Q9QAZ.png)](https://i.stack.imgur.com/Q9QAZ.png)

Following is what I have done to get this

```
\begin{equation*}
 \begin{aligned}
     \overbrace{\fbox{r}\fbox{r+1}\dots\fbox{2r-1}}_{Block-2}\ \ \ \ &\underbrace{\fbox{2r}\dots\fbox{r+k-1}\fbox{0}\dots\fbox{r-1}}_{Block-3}\ \ \ \ \overbrace{\fbox{r+k}\dots\fbox{k+2r-1}}_{Block-4}\\
       & \hspace{1ex}\Big\downarrow\\
    \underbrace{\fbox{2r}\dots\fbox{r+k-1}\fbox{0}\dots\fbox{r-1}}_{Block-3}\ \ \ \ 
       & \overbrace{\fbox{r+k}\dots\fbox{k+2r-1}}_{Block-4} \ \ \ \ 
    \overbrace{\fbox{r}\dots\fbox{k+r-1}}_{Block-2}
 \end{aligned}
 \end{equation*}

```

Some boxes are of different sizes. I want the arrow to be in the middle, and also the lower part under the arrow to be aligned with upper part.

I am also trying to get the following, but couldn't figure out how to start doing it

[![No clue](https://i.stack.imgur.com/dMAzE.png)](https://i.stack.imgur.com/dMAzE.png)

The text can be in black. I just drew the picture to show what I want to get.

Any help is appreciated.