React组件布局调整指南
2025/05/27·StepFun can make mistakes, check important info.
这是我的原始代码，请将我红框部分移动到上面，和图片区域更换位置
---
import { Button } from "@/components/ui/button"
import { GitFork, X, ImageIcon } from "lucide-react"
export default function Component() {
return (
<div className="min-h-screen bg-[#f8f6f2]">
{/* Header */}
<header className="flex items-center justify-between px-6 py-4">
<div className="text-[#222222] font-medium text-lg">阶跃AI</div>
<div className="text-[#222222] text-sm">博客系统 by @lvliang</div>
<div className="flex items-center gap-2">
<Button
variant="outline"
size="sm"
className="bg-[#222222] text-[#ffffff] border-[#222222] hover:bg-[#000000] flex items-center gap-1"
>
<GitFork className="w-3 h-3" />
Fork
</Button>
<Button variant="ghost" size="sm" className="text-[#222222] hover:bg-[#ebebeb]">
<X className="w-4 h-4" />
</Button>
</div>
</header>
{/* Main Content */}
<main className="px-6 py-8">
{/* Hero Image Placeholder */}
<div className="max-w-4xl mx-auto mb-16">
<div className="bg-[#d9d9d9] border-2 border-[#3986c5] rounded-lg aspect-video flex items-center justify-center">
<div className="bg-[#ebebeb] rounded-lg p-4">
<ImageIcon className="w-8 h-8 text-[#ffffff]" />
</div>
</div>
</div>
{/* Content Section */}
<div className="max-w-4xl mx-auto grid md:grid-cols-2 gap-12 items-start">
{/* Left Column - Heading */}
<div>
<h1 className="text-[#000000] text-4xl md:text-5xl font-bold leading-tight">
Medium length hero heading goes here
</h1>
</div>
{/* Right Column - Description and Buttons */}
<div className="space-y-6">
<p className="text-[#222222] text-base leading-relaxed">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum
tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae
erat.
</p>
<div className="flex gap-3">
<Button className="bg-[#000000] text-[#ffffff] hover:bg-[#222222] px-6">Button</Button>
<Button
variant="outline"
className="border-[#000000] text-[#000000] bg-[#ffffff] hover:bg-[#fcfcf9] px-6"
>
Button
</Button>
</div>
</div>
</div>
</main>
</div>
)
}