一张线上落地页的截图
做对了什么
- 导航栏，包括下拉箭头、深色模式按钮、语言选择器和“Try for free”按钮。
- 双色标题、绿色计数徽标、带小图标的功能列表，以及“Create your free account”按钮。
- 终端窗口里 curl 命令的全部八行，都是可以编辑的真实文字，而不是图片。
- 来自 Font Awesome、一眼能认出的品牌图标：TikTok、Instagram、LinkedIn、YouTube、Facebook、Pinterest、Reddit、Discord、Telegram、Slack、Mastodon、WordPress、DEV 和 Google。
需要手动修改的地方
- Font Awesome 5 里没有的品牌用了近似图标：X 显示的是旧的 Twitter 小鸟，Threads 是一个 @ 符号，Bluesky 是一朵云。换成官方 SVG 即可。
- 用户头像和国旗变成了 placehold.co 占位图（U1、U2、U3）。
- 图标排成了三行而不是两行，首屏也比原图略低一些，间距需要再调一遍。
upload-post-screenshot.html（body 的开头几行）
<body class="text-slate-900">
<!-- Navigation -->
<nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="bg-indigo-600 p-1.5 rounded-lg">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
</path>
</svg>
</div>
<span class="text-xl font-extrabold tracking-tight">
Upload-Post
</span>
</div>
<div class="hidden md:flex items-center space-x-8 text-sm font-medium text-slate-600">
<a class="hover:text-indigo-600" href="#">
Add to your SaaS
</a>
<div class="flex items-center gap-1 cursor-pointer hover:text-indigo-600">
Platforms
<i class="fas fa-chevron-down text-[10px]">
</i>
</div>
<div class="flex items-center gap-1 cursor-pointer hover:text-indigo-600">
Integrations
<i class="fas fa-chevron-down text-[10px]">