From 0dc15d8694eb45f9880635269a7bc5c863f0c8ef Mon Sep 17 00:00:00 2001
From: Oleg Proskurin <regx@usul.su>
Date: Tue, 6 Jan 2026 00:49:39 +0700
Subject: [PATCH] chore: adjust page

---
 .../docs/guides/placeholder-images/page.tsx   | 59 +++++++++++--------
 1 file changed, 34 insertions(+), 25 deletions(-)

diff --git a/apps/landing/src/app/(apps)/docs/guides/placeholder-images/page.tsx b/apps/landing/src/app/(apps)/docs/guides/placeholder-images/page.tsx
index 2aa366a..b4b1961 100644
--- a/apps/landing/src/app/(apps)/docs/guides/placeholder-images/page.tsx
+++ b/apps/landing/src/app/(apps)/docs/guides/placeholder-images/page.tsx
@@ -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>`}