如何用Next.js、Tailwind CSS和Framer Motion实现带文字切换与背景图变化的旋转立方体Hero区块？

我最近正在学习Next.js、Tailwind CSS和Framer Motion，想复刻一个网站的Hero区块效果。这个区块的核心是一个带头部文字的旋转立方体——立方体旋转时，上面的文字会同步切换，同时Hero区域的背景图也会跟着变化。

我刚接触这些技术栈，打算先把这个Hero区块做出来，已经尝试写了一些代码基础，但还需要进一步的实现指导。

效果示例 #

备注：内容来源于stack exchange，提问作者Sidath