书接上回，上回我们已经实现了网站的导航栏，接下来我们要实现网页主体部分，用于介绍我们的网站业务情况。

首先创建/app/components/Main.tsx，这里作为主页的内容入口，然乎在根目录的/app/page.tsx 上面引入这个组件，这样就能在访问主页的时候访问访问到编辑的内容。

好，现在主页的框架完成了，现在主要要修改Main.tsx内容，页面分为几部分：

1. 主题展示
2. 查询可用子域名
3. 用户的DNS管理面板
4. 产品介绍模块
5. 客户介绍模块
6. 订阅模块

目前我们需要实现上诉需求，接下来把上述需求的框架做好，再往里面填写资源就OK

首先我们要改写 /app/components/Main.tsx , 创建一个弹性的容器，并且主轴方向为垂直方向，将子元素在交叉轴（这里是水平方向）上居中对齐，并且沾满父容器的宽度，这样做的目的是为了接下来的每一个子模块的是垂直排列，并且能够宽度一致，然后按照section进行分类，将不同的模块按照不同的section进行分开，实现之后的效果就算这样的。

<section className="w-full max-w-7xl mx-auto px-5 py-24 pt-32">主题展示</section> 最大宽度为 1280px，居中显示，提供较大的内边距。
<section className="w-full bg-gray-100">查询可用子域名</section> 背景色为浅灰色，宽度占满。

完成骨架之后，需要将内容添加进去，这里就不一样介绍如何布局了显得啰嗦，直接上代码：

<section className="w-full max-w-7xl mx-auto px-5 py-24 pt-32">
    <div className="flex flex-col md:flex-row items-center">
        <div className="md:w-1/2 md:pr-16 flex flex-col items-center md:items-start text-center md:text-left mb-16 md:mb-0">
            <h1 className="italic text-4xl mt-4 sm:text-5xl md:text-6xl font-bold text-gray-900 mb-4">
                100% Free Domain Name Provider
            </h1>
            <p className="mb-8 text-lg text-gray-600">
                Our mission is to empower individuals worldwide to grow their
                digital presence and contribute to the global digital economy. Our
                free domains function identically to any paid domain, allowing you
                to create websites, blogs, email accounts, and more. You have the
                flexibility to use these domains directly or with URL forwarding,
                giving you full control over your online identity – all at no
                cost.
            </p>
            <Link
                href="/login"
                className="inline-flex items-center px-6 py-3 text-white bg-blue-600 rounded-md hover:bg-blue-700 transition duration-300"
            >
                Try it now
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    className="h-5 w-5 ml-2"
                    viewBox="0 0 20 20"
                    fill="currentColor"
                >
                    <path
                        fillRule="evenodd"
                        d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
                        clipRule="evenodd"
                    />
                </svg>
            </Link>
        </div>
        <div className="md:w-1/2">
            <Image
                src="/what_is_a_dns_server_dns_lookup.png"
                alt="DNS Illustration"
                width={500}
                height={500}
                className="w-full max-w-lg mx-auto"
            />
        </div>
    </div>
</section>

这里需要用到两个组件，Link 和 Image 一个用户用户点击图标之后导航到主页，一个是用于显示图像，接下来让我们看看效果吧。

以上就算主要实现一个展示画面的教程，接下来将会将如何实现查询可用子域名，并且实现按钮的响应，学习如何使用事件处理器（Event Handlers）敬请期待。

如果喜欢我的文章请百度搜索：曲速引擎 warp drive csdn 在首页找到我的技术博客访问地址，所有内容都将在我的技术博客上展示，比起其他平台更容易搜索完整版本。

更详细内容查看

独立博客 https://www.dataeast.cn/
CSDN博客 https://blog.csdn.net/siberiaWarpDrive
B站视频空间 https://space.bilibili.com/25871614?spm_id_from=333.1007.0.0
关注 “曲速引擎 Warp Drive” 微信公众号