[Day 13]每天前进一点应该也是进步吧?(前端篇)

挑战目标: MockNative Camp

今天我们来整理昨天没有弄好的footer右边的部分，
这是我们的目标

昨天完成的

今天完成的

今天决定另辟蹊径到uxwing下载个社交平台icon然後在做调整，然後文字上改用text-xs，另外也有设定hover之後背景变灰色。
Footer.js

import Image from "next/image";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faTwitter, faFacebook, faYoutube, faInstagram } from "@fortawesome/free-brands-svg-icons"
function Footer() {
    return (
        <div className="bg-nativeCamp-nav-text h-96">
            {/* Left */}
            <div className="flex flex-col items-center justify-center space-y-4 p-32">
                <div className="h-[31px] w-[160px] relative flex ">
                    <Image
                        src="https://nativecamp.net/user/images/common/logo_s-zh-tw.png?v=2.1"
                        layout="fill"
                        objectFit="cover"
                    />
                </div>
                <div>
                    <ul className="flex flex-row space-x-4">
                        <li className="bg-white rounded-full h-8 w-8 justify-center flex items-center hover:bg-gray-300">
                            <Image
                                src="/icon/twitter-color.svg"
                                width={20}
                                height={20}
                            />
                        </li>
                        <li className="bg-white rounded-full h-8 w-8 justify-center flex items-center hover:bg-gray-300">
                            <Image
                                src="/icon/facebook-color.svg"
                                width={20}
                                height={20}
                            /></li>
                        <li className="bg-white rounded-full h-8 w-8 justify-center flex items-center hover:bg-gray-300">
                            <Image
                                src="/icon/youtube-color.svg"
                                width={20}
                                height={20}
                            /></li>
                        <li className="bg-white rounded-full h-8 w-8 justify-center flex items-center hover:bg-gray-300">
                            <Image
                                src="/icon/black-instagram.svg"
                                width={20}
                                height={20}
                            /></li>
                    </ul>
                </div>
                <div className="flex flex-col">
                    <span className="text-white text-xs">Copyright © 2021 线上英语会话</span>
                    <span className="text-white text-xs">NativeCamp. All Rights Reserved.</span>
                </div>
            </div>
            {/* Right */}
            <div> </div>
        </div>
    )
}

export default Footer

Footer右边部分，目前是将文字给储存於next.config.js中
next.config.js

module.exports = {
    images: {
        domains: ['nativecamp.net'],
        minimumCacheTTL: 60,
    },
    publicRuntimeConfig: {
        navTab: [
            { name: "首页", image: "https://nativecamp.net/user/images/gnavi/ic_home.svg", imageHov: "https://nativecamp.net/user/images/gnavi/ic_home-h.svg" },
            { name: "指南", image: "https://nativecamp.net/user/images/gnavi/ic_guide.svg", imageHov: "https://nativecamp.net/user/images/gnavi/ic_guide-h.svg" },
            { name: "学习", image: "https://nativecamp.net/user/images/gnavi/ic_study.svg", imageHov: "https://nativecamp.net/user/images/gnavi/ic_study-h.svg" },
            { name: "搜寻・预约讲师", image: "https://nativecamp.net/user/images/gnavi/ic_search.svg", imageHov: "https://nativecamp.net/user/images/gnavi/ic_search-h.svg" },
            { name: "其他", image: "https://nativecamp.net/user/images/gnavi/ic_etc.svg", imageHov: "https://nativecamp.net/user/images/gnavi/ic_etc-h.svg" },
        ],
        navDetails: {
            "首页": [],
            "指南": [
                {
                    "name": "使用方法",
                    "list": ["致初次使用者", "使用方法", "关於上课不限堂数"]
                },
                {
                    "name": "收费・套餐",
                    "list": ["关於费用"]
                },
                {
                    "name": "使用环境",
                    "list": ["支援的浏览器", "关於英语会话APP"]
                }
            ], "学习": [
                {
                    "name": "教材",
                    "list": ["浏览教材", "课程及教材诊断", "线上商店 (教材购买)"]
                },
                {
                    "name": "精选教材",
                    "list": ["Callan Method(凯伦学习法)", "TOEIC®L&R TEST对策"]
                },
                {
                    "name": "自学内容",
                    "list": ["口说测验", "口语训练"]
                }
            ], "搜寻・预约讲师": [{
                "name": "讲师介绍",
                "list": ["讲师一览", "排名", "评论"]
            },
            {
                "name": "关於讲师",
                "list": ["关於母语人士", "关於卡通人物讲师"]
            },
            ], "其他": [{
                "name": "推荐内容",
                "list": ["问卷结果 / 会员的心声"]
            },
            {
                "name": "其他",
                "list": ["上课环境测试", "FAQ (联络我们)", "网站导览"]
            },
            ]
        }
    },
    footer: [
        { name: "NativeCamp.", list: ["首页", "新用户注册", "登入", "重新加入", "FOR TUTORS"] },
        { name: "指南", list: ["致初次使用者", "使用方法", "关於上课不限堂数", "关於费用", "支援的浏览器", " 关於英语会话 App"] },
        { name: "学习", list: ["浏览教材", "课程及教材诊断", "线上商店 (教材购买)", "Callan Method(凯伦学习法)", "TOEIC®L&R TEST对策", "口说测验", "口语训练"] },
        { name: "搜寻讲师・预约", list: ["讲师一览", " 排名", "评论", "关於母语人士", "关於卡通人物讲师"] },
        { name: "其他", list: ["问卷结果 / 会员的心声", "上课环境测试", "FAQ (联络我们)", "网站导览"] },
        { name: "公司资讯", list: ["运营公司", "使用条款", "特别指定商业交易法", "关於个人资讯处理", "徵才讯息", "我们的展望"] },
    ]
}

明天再来继续的排版，如何随心所欲的排版真的是要多看多练，我学会使用Tailwind CSS後，觉得应该可以使用於大部分的设计中，但其实还是欠缺CSS的基本知识...还是需要找机会恶补一下