chore: adjust page
This commit is contained in:
parent
9eb63bea22
commit
0dc15d8694
|
|
@ -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">
|
||||
<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 className="bg-slate-800/60 border border-slate-700/50 rounded-xl p-6 text-center">
|
||||
<img
|
||||
src="https://cdn.banatie.app/sys/demo/live/features?prompt=minimal+icon+shield+green+glow+dark+slate+background&aspectRatio=1:1"
|
||||
alt="Secure by Default"
|
||||
className="w-20 h-20 mx-auto rounded-xl border border-slate-600/50"
|
||||
/>
|
||||
<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>
|
||||
<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+puzzle+piece+purple+glow+dark+slate+background&aspectRatio=1:1"
|
||||
alt="Easy Integration"
|
||||
className="w-20 h-20 mx-auto rounded-xl border border-slate-600/50"
|
||||
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-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">Secure by Default</p>
|
||||
<p className="mt-1 text-sm text-gray-400">Enterprise-grade security built in</p>
|
||||
</div>
|
||||
</div>
|
||||
<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=puzzle+piece+icon+single+line+art+illustration+minimal+background+hex+1e293b&aspectRatio=1:1"
|
||||
alt="Easy Integration"
|
||||
className="w-full aspect-square object-cover"
|
||||
/>
|
||||
<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>`}
|
||||
|
|
|
|||
Loading…
Reference in New Issue