62 lines
2.9 KiB
TypeScript
62 lines
2.9 KiB
TypeScript
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>
|
||
);
|
||
}
|