chore: adjust page

This commit is contained in:
Oleg Proskurin 2026-01-06 00:49:39 +07:00
parent 9eb63bea22
commit 0dc15d8694
1 changed files with 34 additions and 25 deletions

View File

@ -481,10 +481,10 @@ export default function PlaceholderImagesGuidePage() {
<div className="bg-white rounded-lg p-3">
<img
src="https://cdn.banatie.app/sys/demo/live/products?prompt=wireless+earbuds+case+product+photo&aspectRatio=1:1"
alt="AirPods Pro"
alt="Wireless Earbuds"
className="w-full aspect-square object-cover rounded-md mb-2"
/>
<p className="text-gray-900 font-medium text-sm">AirPods Pro</p>
<p className="text-gray-900 font-medium text-sm">Wireless Earbuds</p>
<p className="text-gray-600 font-bold">$249</p>
</div>
<div className="bg-white rounded-lg p-3">
@ -565,7 +565,7 @@ export default function PlaceholderImagesGuidePage() {
</div>
<div className="p-4">
<img
src="https://cdn.banatie.app/sys/demo/live/og?prompt=abstract+gradient+purple+blue+tech+background&aspectRatio=1200:630"
src="https://cdn.banatie.app/sys/demo/live/og?prompt=modern+tech+abstract+waves+purple+blue&aspectRatio=16:9"
alt="OG Image Preview"
className="w-full rounded-lg"
/>
@ -603,48 +603,57 @@ export default function PlaceholderImagesGuidePage() {
<LivePreview>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="bg-slate-800/60 border border-slate-700/50 rounded-xl p-6 text-center">
<div className="group bg-slate-800/40 border border-slate-700/30 rounded-2xl overflow-hidden text-center transition-all duration-300 hover:border-slate-600/50 hover:shadow-lg hover:shadow-purple-500/10 hover:-translate-y-1">
<img
src="https://cdn.banatie.app/sys/demo/live/features?prompt=minimal+icon+lightning+bolt+blue+glow+dark+slate+background&aspectRatio=1:1"
src="https://cdn.banatie.app/sys/demo/live/features?prompt=lightning+bolt+icon+single+line+art+illustration+minimal+background+hex+1e293b&aspectRatio=1:1"
alt="Lightning Fast"
className="w-20 h-20 mx-auto rounded-xl border border-slate-600/50"
className="w-full aspect-square object-cover"
/>
<p className="mt-4 font-semibold text-white">Lightning Fast</p>
<p className="mt-2 text-sm text-gray-400">
Deploy in seconds with our global CDN
</p>
<div className="p-4">
<p className="font-semibold text-white">Lightning Fast</p>
<p className="mt-1 text-sm text-gray-400">
Deploy in seconds with our global CDN
</p>
</div>
</div>
<div className="bg-slate-800/60 border border-slate-700/50 rounded-xl p-6 text-center">
<div className="group bg-slate-800/40 border border-slate-700/30 rounded-2xl overflow-hidden text-center transition-all duration-300 hover:border-slate-600/50 hover:shadow-lg hover:shadow-emerald-500/10 hover:-translate-y-1">
<img
src="https://cdn.banatie.app/sys/demo/live/features?prompt=minimal+icon+shield+green+glow+dark+slate+background&aspectRatio=1:1"
src="https://cdn.banatie.app/sys/demo/live/features?prompt=shield+icon+single+line+art+illustration+minimal+background+hex+1e293b&aspectRatio=1:1"
alt="Secure by Default"
className="w-20 h-20 mx-auto rounded-xl border border-slate-600/50"
className="w-full aspect-square object-cover"
/>
<p className="mt-4 font-semibold text-white">Secure by Default</p>
<p className="mt-2 text-sm text-gray-400">Enterprise-grade security built in</p>
<div className="p-4">
<p className="font-semibold text-white">Secure by Default</p>
<p className="mt-1 text-sm text-gray-400">Enterprise-grade security built in</p>
</div>
</div>
<div className="bg-slate-800/60 border border-slate-700/50 rounded-xl p-6 text-center">
<div className="group bg-slate-800/40 border border-slate-700/30 rounded-2xl overflow-hidden text-center transition-all duration-300 hover:border-slate-600/50 hover:shadow-lg hover:shadow-violet-500/10 hover:-translate-y-1">
<img
src="https://cdn.banatie.app/sys/demo/live/features?prompt=minimal+icon+puzzle+piece+purple+glow+dark+slate+background&aspectRatio=1:1"
src="https://cdn.banatie.app/sys/demo/live/features?prompt=puzzle+piece+icon+single+line+art+illustration+minimal+background+hex+1e293b&aspectRatio=1:1"
alt="Easy Integration"
className="w-20 h-20 mx-auto rounded-xl border border-slate-600/50"
className="w-full aspect-square object-cover"
/>
<p className="mt-4 font-semibold text-white">Easy Integration</p>
<p className="mt-2 text-sm text-gray-400">Works with your existing stack</p>
<div className="p-4">
<p className="font-semibold text-white">Easy Integration</p>
<p className="mt-1 text-sm text-gray-400">Works with your existing stack</p>
</div>
</div>
</div>
</LivePreview>
<CodeBlock
code={`<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-slate-800/60 border border-slate-700/50 rounded-xl p-6 text-center">
<div class="bg-slate-800/40 border border-slate-700/30 rounded-2xl overflow-hidden text-center
transition-all duration-300 hover:border-slate-600/50 hover:shadow-lg hover:-translate-y-1">
<img
src="https://cdn.banatie.app/{org}/{project}/live/features?prompt=minimal+icon+lightning+bolt+blue+glow+dark+slate+background&aspectRatio=1:1"
src="https://cdn.banatie.app/{org}/{project}/live/features?prompt=lightning+bolt+icon+single+line+art+illustration+minimal+background+hex+1e293b&aspectRatio=1:1"
alt="Lightning Fast"
class="w-20 h-20 mx-auto rounded-xl border border-slate-600/50"
class="w-full aspect-square object-cover"
/>
<p class="mt-4 font-semibold text-white">Lightning Fast</p>
<p class="mt-2 text-sm text-gray-400">Deploy in seconds with our global CDN</p>
<div class="p-4">
<p class="font-semibold text-white">Lightning Fast</p>
<p class="mt-1 text-sm text-gray-400">Deploy in seconds with our global CDN</p>
</div>
</div>
<!-- Repeat for other features -->
</div>`}