import aboutSvg from '@/app/about/about.svg';
import Image from 'next/image';

export default function Page() {
  return (
    <section className="text-gray-600 body-font">
      <div className="container px-5 py-24 mx-auto flex flex-col">
        <div className="lg:w-4/6 mx-auto">
          <div className="rounded-lg h-64 overflow-hidden">
            <Image
              alt="content"
              width={1200}
              height={500}
              className="object-cover object-center h-full w-full"
              src={aboutSvg}
            />
          </div>
          <div className="flex flex-col sm:flex-row mt-10">
            <div className="sm:w-1/3 text-center sm:pr-8 sm:py-8">
              <div className="w-20 h-20 rounded-full inline-flex items-center justify-center bg-gray-200 text-gray-400">
                <img
                  alt="custom"
                  src="https://secure.gravatar.com/avatar/a3def24f9e6b3df5e7d7008107ddf3a0?d=identicon&s=512"
                />
              </div>
              <div className="flex flex-col items-center text-center justify-center">
                <h2 className="font-medium title-font mt-4 text-gray-900 text-lg">
                  个人信息
                </h2>
                <div className="w-12 h-1 bg-indigo-500 rounded mt-2 mb-4"></div>
                <p className="text-base">在 daoyoucloud.com 你可以联系到我</p>
              </div>
            </div>
            <div className="sm:w-2/3 sm:pl-8 sm:py-8 sm:border-l border-gray-200 sm:border-t-0 border-t mt-4 pt-4 sm:mt-0 text-center sm:text-left">
              <p className="leading-relaxed text-lg mb-4">
                只需在搜索框中输入你感兴趣的歌曲名称或歌手，即可找到相关的歌词。然后，选择你喜欢的歌词段落，将其发送为弹幕，即可在视频播放时实现动态同步。这种互动方式不仅有助于分享感受，还能让观众更深入地了解你所喜爱的音乐。
              </p>
              <p className="leading-relaxed text-lg mb-4">
                只需在搜索框中输入你感兴趣的歌曲名称或歌手，即可找到相关的歌词。然后，选择你喜欢的歌词段落，将其发送为弹幕，即可在视频播放时实现动态同步。这种互动方式不仅有助于分享感受，还能让观众更深入地了解你所喜爱的音乐。
              </p>
              <a href="#" className="text-indigo-500 inline-flex items-center">
                联系我
                <svg
                  fill="none"
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  className="w-4 h-4 ml-2"
                  viewBox="0 0 24 24"
                >
                  <path d="M5 12h14M12 5l7 7-7 7"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
