squid/blog
1
2
Fork 0
Code Issues 11 Pull Requests Actions Projects 1 Releases 2 Wiki Activity

BLOG-5 feat: home page fisrt view desktop layout

Browse Source
This commit is contained in:
SquidSpirit 2025-01-18 00:38:47 +08:00
parent d76f54b2b1
commit 90c8a2f627
1 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/app/page.tsx
View File

@ -1,15 +1,17 @@
export default function HomePage() { export default function HomePage() {
return ( return (
<div className="flex min-h-[--content-height] flex-col justify-center gap-y-2.5 px-4"> <div className="mx-auto flex min-h-[--content-height] max-w-screen-xl flex-col justify-center gap-y-2.5 px-4 md:gap-y-8 md:px-6">
<h2 className="text-3xl font-bold text-gray-800">Hello 大家好！</h2> <h2 className="text-3xl font-bold text-gray-800 md:text-6xl">
<h1 className="flex flex-row items-center gap-x-2 text-4xl font-bold text-gray-800"> Hello 大家好！
</h2>
<h1 className="flex flex-row items-center gap-x-2 text-4xl font-bold text-gray-800 md:text-7xl">
<span>我是</span> <span>我是</span>
<div className="rounded-lg bg-blue-600 px-1.5 py-1"> <div className="rounded-lg bg-blue-600 px-1.5 py-1">
<span className="text-white">Squid</span> <span className="text-white">Squid</span>
</div> </div>
<span>魷魚</span> <span>魷魚</span>
</h1> </h1>
<div className="relative"> <div className="relative w-full max-w-screen-md">
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-transparent via-60% to-white" /> <div className="absolute inset-0 bg-gradient-to-r from-transparent via-transparent via-60% to-white" />
<div className="flex flex-row items-center gap-x-2 overflow-hidden"> <div className="flex flex-row items-center gap-x-2 overflow-hidden">
<Hashtag tag="React" /> <Hashtag tag="React" />