DAY28-React NFT网站成果展示

前言：

到了倒数第三天了，一开始目标要完成的NFT网站开发也到一个段落啦～今天阿森要来展示一下综合前几天的内容（还有我自己的一点改良），最後的成果会是如何！

如果大家对某些页面特别有兴趣也可以回到前面几天参考看看！

HeroSection：

作为最开始，要营造良好第一印象的页面，HeroSection阿森和夥伴们也是下足了苦心，除了有开场的动画外，我做了scroll lock的动作，让这个影片在播放的时候浏览者没办法移动页面，这也是为了让影片结尾和我们的背景gif做一个更好的重叠。

另外如果浏览者想跳过这个影片，也可以点击右下角的skip，就可以直接浏览页面了，整体效果我认为还不错！

NavBar：

导览的部分其实就跟前面的差不多，只是我在最重要的mint这个按钮上加了一点特效，让大家可以更好注意到，说不定可以在浅意识里增加一点购买的意愿（？

Comic页面：

Comic页面阿森做了一个可以翻页的Gallery来播放我们的主题漫画，我们的夥伴真的很厉害呢！

Intro页面：

Intro的部分我们分为两页，第一页用来介绍我们的背景设定，第二页则是说明一些作为我们NFT持有者所能拥有的好处。

这里比较困难的地方还是在於如果做成RWD，也就是响应式网站，大家有兴趣的话也可以看之前的

DAY23-一般页面设计

Roadmap：

Roadmap页面的设计作法跟DAY25-问答页面设计其实大同小异，主要都是利用aos来制造滚动的效果，我认为这样也比较有进程的感觉。

MINT页面：

这里介绍一下Mint就是铸造的意思，也就是购买NFT的地方。

这个页面主要有几个要求，第一个是显示Coming Soon，代表还没有要开始Mint。

再来是到一定的进程时，要能可以倒数。

最後是和matamask做连接，让想买的人可以直接Mint，这部分的话可以参考我们团队另外一位成员的文章：

ALu-NFT 网站与 MetaMask 连动的 Owners 登入系统

那这里是Coming Soon的样子：

开始倒数计时：

开放Mint：

可以透过按钮调整数量，或是直接输入也可以。

问答页面：

这部分可以看前面的DAY25-问答页面设计。

Team：

这部分阿森主要是照DAY24-资讯卡页面设计去完成的，最後加了一点特效做装饰，成果是这样：

Community：

这部分主要是跟我们的後端连结有关，会和Mongodb atlas做连结，有兴趣的话可以看这篇：

DAY18-Mongodb atlas realm

小结：

到今天为止我们的整个计画也算是到一个段落了，虽然没有做出超美超多特效的网站，但阿森觉得这样也不错了！简单明了，让大家专注在我们的故事主题上。

有兴趣的人可以直接造访：

https://thedinomension.com

相信实际造访的体验会更好的，那今天就先这样，我们明天见！