All Prompts
All Prompts
Advisor Features
Advisor Features: набор компонентов UI для отображения информации и функций советника. Улучшает взаимодействие пользователя с системой.
Prompt
<section class="min-h-[100svh] grid place-items-center px-4">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 max-w-6xl mx-auto w-full" data-animate-children="true">
<!-- ========== Large Card: Component Generator ========== -->
<div
class="lg:col-span-2 overflow-hidden transition-all duration-300 hover:-translate-y-1.5 animate-fadeSlideIn bg-neutral-900/60 ring-white/10 ring-1 rounded-2xl relative backdrop-blur [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll"
style="">
<div class="pointer-events-none absolute inset-0 rounded-2xl shimmer"
style="box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 40px 120px rgba(37,99,235,0.18);"></div>
<div class="sm:p-6 pt-5 pr-5 pb-5 pl-5">
<div class="flex items-center gap-2">
<h3 class="sm:text-2xl text-xl font-semibold text-white tracking-tight">
Component Generator
</h3>
</div>
<p class="text-sm text-neutral-400 mt-1">
Create production-ready UI components from prompts or designs.
</p>
<!-- Chat field (compact) -->
<div class="mt-4 relative overflow-hidden rounded-2xl ring-1 ring-white/10 bg-zinc-950/80 animate-fadeSlideIn"
style="animation-delay:.08s">
<!-- header -->
<div class="flex items-center justify-between px-4 py-2.5 border-b border-white/5">
<span class="inline-flex items-center gap-2 text-[11px] text-blue-200 bg-blue-900/30 rounded-full px-3 py-0.5 ring-1 ring-blue-700">
<span class="w-1.5 h-1.5 rounded-full bg-blue-400 animate-breathe"></span>
Active
<span class="typing-dots">
<i></i>
<i></i>
<i></i>
</span>
</span>
<span class="text-[11px] text-neutral-400">DF-Gen v3</span>
</div>
<!-- messages -->
<div class="px-4 py-3 space-y-2 max-h-48 overflow-auto">
<!-- assistant -->
<div class="flex items-start gap-2">
<div
class="w-6 h-6 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/fc36a88f-5106-416e-82ac-ea0cd24cf358_320w.webp)] bg-cover ring-white/10 ring-1 rounded-full animate-floatSlow"
style="animation-duration:7s"></div>
<div
class="max-w-[80%] rounded-xl bg-neutral-900 ring-1 ring-white/10 px-3 py-1.5 text-xs text-neutral-200 animate-fadeSlideIn"
style="animation-delay:.12s">
Describe a component + props. I’ll return typed code.
</div>
</div>
<!-- user -->
<div class="flex justify-end">
<div
class="max-w-[80%] rounded-xl px-3 py-1.5 text-xs text-white ring-1 ring-blue-400 shadow-[0_6px_18px_rgba(59,130,246,0.35)] animate-glowPulse"
style="background:linear-gradient(45deg,#06b6d4,#3b82f6,#2563eb);">
PricingCard with title, price, features[], CTA
</div>
</div>
<!-- preview -->
<div class="flex items-start gap-2">
<div
class="w-6 h-6 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/fc36a88f-5106-416e-82ac-ea0cd24cf358_320w.webp)] bg-cover ring-white/10 ring-1 rounded-full animate-floatSlow"
style="animation-duration:7s; animation-delay:.1s"></div>
<div class="max-w-[80%] rounded-xl bg-neutral-900 ring-1 ring-white/10 overflow-hidden animate-fadeSlideIn"
style="animation-delay:.16s">
<div class="px-3 py-1.5 border-b border-white/5 text-[11px] text-neutral-400 caret">
Preview • PricingCard.tsx
</div>
<pre
class="px-3 py-2 font-mono text-[11px] leading-5 text-neutral-300 whitespace-pre-wrap"><PricingCard title="Pro" price="$29/mo" features={[...]} /></pre>
</div>
</div>
</div>
<!-- input -->
<div class="px-4 py-2.5 border-t border-white/5 flex items-center gap-2">
<div
class="flex-1 flex items-center gap-2 bg-neutral-900 rounded-full ring-1 ring-white/10 px-3 py-1.5 text-xs text-neutral-400">
<svg class="w-3.5 h-3.5 animate-tilt" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="1.5">
<path d="M12 5v14M5 12h14" class=""></path>
</svg>
<input class="bg-transparent outline-none flex-1 placeholder-neutral-500 text-neutral-300" placeholder="Type your prompt…">
</div>
<button class="px-3 py-1.5 text-xs rounded-full text-white ring-1 ring-blue-400 shadow-[0_6px_18px_rgba(59,130,246,0.35)] animate-glowPulse" style="background:linear-gradient(45deg,#06b6d4,#3b82f6,#2563eb);">
Generate
</button>
</div>
</div>
</div>
</div>
<!-- ========== Card 1: Code Optimizer ========== -->
<div
class="relative overflow-hidden rounded-2xl ring-1 ring-white/10 bg-neutral-900/60 backdrop-blur transition-all duration-300 hover:-translate-y-1.5 animate-fadeSlideIn [animation:fadeSlideIn_0.8s_ease-out_0.2s_both] animate-on-scroll"
style="animation-delay:.05s">
<div class="pointer-events-none absolute inset-0 rounded-2xl shimmer"
style="box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 24px 70px rgba(37,99,235,0.12);"></div>
<div class="p-4 sm:p-5">
<div class="flex items-center justify-between">
<h3 class="sm:text-2xl text-xl font-semibold text-white tracking-tight">
Code Optimizer
</h3>
<span class="inline-flex items-center gap-1 text-[11px] px-2 py-0.5 rounded-full ring-1 ring-blue-500/40 bg-blue-500/10 text-blue-200 animate-breathe">
⚡ +32%
</span>
</div>
<p class="text-sm text-neutral-400 mt-1">
Refactor to cleaner, faster code.
</p>
<div class="mt-4 rounded-xl overflow-hidden ring-1 ring-white/10 bg-zinc-950/80">
<div class="flex items-center gap-1.5 px-3 py-2 bg-neutral-900/70">
<span class="w-2 h-2 rounded-full bg-rose-500/80 animate-breathe"></span>
<span class="w-2 h-2 rounded-full bg-amber-400/80 animate-breathe" style="animation-delay:.1s"></span>
<span class="w-2 h-2 rounded-full bg-emerald-500/80 animate-breathe" style="animation-delay:.2s"></span>
<span class="ml-3 text-[11px] text-neutral-400 caret">
optimize.ts
</span>
</div>
<div class="p-3 font-mono text-[11px] leading-5">
<pre
class="whitespace-pre-wrap"><span class="text-neutral-500">04</span> <span class="text-neutral-400">// Before</span>
<span class="text-neutral-500">05</span> <span class="px-1 rounded bg-rose-500/10 text-rose-300">- useEffect(() => fetchData(), [])</span>
<span class="text-neutral-500">06</span> <span class="text-neutral-400">// After</span>
<span class="text-neutral-500">07</span> <span class="px-1 rounded bg-emerald-500/10 text-emerald-300">+ const data = await api.get('/data')</span>
<span class="text-neutral-500">08</span> <span class="px-1 rounded bg-emerald-500/10 text-emerald-300">+ useMemo(() => renderList(data), [data])</span></pre>
</div>
<div class="px-3 py-2 border-t border-white/5 flex items-center justify-between text-[11px]">
<div class="flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-blue-400 animate-pulse"></span>
<span class="text-neutral-400">Analyzed</span>
</div>
<div class="flex items-center gap-2">
<span class="text-emerald-300">-190ms</span>
<div class="h-1 w-14 bg-white/10 rounded-full overflow-hidden">
<div class="h-full w-2/3 bg-gradient-to-r from-cyan-400 to-blue-500 animate-fadeSlideIn"
style="animation-duration:1.2s"></div>
</div>
</div>
</div>
</div>
<div class="mt-3 flex items-center gap-2">
<button class="flex-1 rounded-full px-3 py-1.5 text-xs text-white ring-1 ring-blue-400 shadow-[0_6px_16px_rgba(59,130,246,0.35)] animate-glowPulse" style="background:linear-gradient(45deg,#06b6d4,#3b82f6,#2563eb);">
Apply fix
</button>
<button class="flex-1 rounded-full px-3 py-1.5 text-xs text-neutral-200 ring-1 ring-white/10 bg-white/5">
Copy patch
</button>
</div>
</div>
</div>
<!-- ========== Card 2: Theme Control ========== -->
<div
class="relative overflow-hidden rounded-2xl ring-1 ring-white/10 bg-neutral-900/60 backdrop-blur transition-all duration-300 hover:-translate-y-1.5 animate-fadeSlideIn [animation:fadeSlideIn_0.8s_ease-out_0.3s_both] animate-on-scroll"
style="animation-delay:.1s">
<div class="pointer-events-none absolute inset-0 rounded-2xl shimmer"
style="box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 30px 80px rgba(37,99,235,0.10);"></div>
<div class="p-4 sm:p-5">
<h3 class="sm:text-2xl text-xl font-semibold text-white tracking-tight">
Theme Control
</h3>
<p class="text-sm text-neutral-400 mt-1">
Adjust styles with one click.
</p>
<div class="mt-4 rounded-xl bg-zinc-950/80 ring-1 ring-white/10 p-3">
<p class="text-[11px] uppercase tracking-wide text-blue-200 mb-2">
Select Theme
</p>
<div class="grid grid-cols-[1fr_auto] gap-3 items-center">
<div class="space-y-2">
<div class="flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-blue-400 animate-breathe"></span>
<span class="text-sm text-white">Dark</span>
</div>
<div class="flex items-center gap-2 opacity-70">
<span class="w-2 h-2 rounded-full bg-white/20"></span>
<span class="text-sm text-neutral-300">Light</span>
</div>
<div class="flex items-center gap-2 opacity-70">
<span class="w-2 h-2 rounded-full bg-white/20"></span>
<span class="text-sm text-neutral-300">System</span>
</div>
</div>
<div class="h-20 w-8 rounded-lg bg-white/5 ring-1 ring-white/10 relative overflow-hidden">
<div class="absolute left-1/2 -translate-x-1/2 top-1.5 w-1 h-[90%] bg-white/10 rounded-full"></div>
<div
class="absolute left-1/2 -translate-x-1/2 bottom-3 w-4 h-4 rounded-full bg-blue-400 ring-1 ring-blue-300 animate-floatSlow">
</div>
</div>
</div>
<div class="mt-3 flex flex-wrap items-center gap-2">
<span class="text-[11px] px-2 py-1 rounded-full ring-1 ring-white/10 bg-white/5 text-neutral-300">
Rounded
</span>
<span class="text-[11px] px-2 py-1 rounded-full ring-1 ring-white/10 bg-white/5 text-neutral-300">
Glass
</span>
<span class="text-[11px] px-2 py-1 rounded-full ring-1 ring-blue-400/50 bg-blue-500/10 text-blue-200 animate-breathe">
Accent: Blue
</span>
</div>
</div>
</div>
</div>
<!-- ========== Card 3: Team Collaboration ========== -->
<div
class="relative overflow-hidden rounded-2xl ring-1 ring-white/10 bg-neutral-900/60 backdrop-blur transition-all duration-300 hover:-translate-y-1.5 animate-fadeSlideIn [animation:fadeSlideIn_0.8s_ease-out_0.4s_both] animate-on-scroll"
style="animation-delay:.15s">
<div class="pointer-events-none absolute inset-0 rounded-2xl shimmer"
style="box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 30px 80px rgba(37,99,235,0.10);"></div>
<div class="p-4 sm:p-5">
<h3 class="sm:text-2xl text-xl font-semibold text-white tracking-tight">
Team Collaboration
</h3>
<p class="text-sm text-neutral-400 mt-1">
Review and approve changes faster.
</p>
<div class="mt-4 rounded-xl bg-zinc-950/80 ring-1 ring-white/10 p-3">
<div class="flex items-center gap-2">
<img class="w-6 h-6 rounded-full ring-1 ring-white/10 object-cover animate-floatSlow" src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=120&auto=format&fit=crop" alt="">
<img class="w-6 h-6 rounded-full ring-1 ring-white/10 object-cover -ml-2 animate-floatSlow" style="animation-delay:.1s" src="https://images.unsplash.com/photo-1547425260-76bcadfb4f2c?q=80&w=120&auto=format&fit=crop" alt="">
<span class="ml-1 text-xs text-neutral-400">
Alex • Dana
</span>
<span class="ml-auto inline-flex items-center gap-1 text-[11px] px-2 py-0.5 rounded-full ring-1 ring-emerald-500/40 bg-emerald-500/10 text-emerald-300 animate-breathe">
2 new
</span>
</div>
<div
class="mt-3 rounded-lg bg-neutral-900 ring-1 ring-white/10 p-3 text-sm text-neutral-200 animate-fadeSlideIn"
style="animation-delay:.1s">
Can we refactor this grid to a reusable
<span class="text-blue-300">Card</span>
component?
</div>
<div class="mt-3 flex items-center gap-2">
<button class="flex-1 rounded-full px-3 py-1.5 text-xs text-neutral-200 ring-1 ring-white/10 bg-white/5">
Reply
</button>
<button class="flex-1 rounded-full px-3 py-1.5 text-xs text-white ring-1 ring-blue-400 shadow-[0_10px_24px_rgba(59,130,246,0.35)] transition hover:-translate-y-0.5 animate-glowPulse" style="background:linear-gradient(45deg,#06b6d4,#3b82f6,#2563eb);">
Approve
</button>
</div>
</div>
</div>
</div>
<!-- ========== Card 4: Template Library ========== -->
<div
class="relative overflow-hidden rounded-2xl ring-1 ring-white/10 bg-neutral-900/60 backdrop-blur transition-all duration-300 hover:-translate-y-1.5 animate-fadeSlideIn [animation:fadeSlideIn_0.8s_ease-out_0.5s_both] animate-on-scroll"
style="animation-delay:.2s">
<div class="pointer-events-none absolute inset-0 rounded-2xl shimmer"
style="box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 30px 80px rgba(37,99,235,0.10);"></div>
<div class="p-4 sm:p-5">
<h3 class="sm:text-2xl text-xl font-semibold text-white tracking-tight">
Template Library
</h3>
<p class="text-sm text-neutral-400 mt-1">
Start with curated, reusable patterns.
</p>
<div class="mt-4 space-y-2">
<div class="rounded-xl bg-zinc-950/80 ring-1 ring-white/10 p-3 flex items-center gap-3">
<div class="flex-1">
<p class="text-sm text-neutral-200">Pricing Section</p>
<p class="text-[11px] text-neutral-500">
2 columns • CTA
</p>
</div>
<button class="inline-flex items-center gap-1 text-[11px] text-blue-200 bg-blue-900/30 rounded-full px-2 py-0.5 ring-1 ring-blue-700 animate-breathe">
<svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M12 5v14M5 12h14" class=""></path>
</svg>
Add
</button>
</div>
<div class="rounded-xl bg-zinc-950/80 ring-1 ring-white/10 p-3 flex items-center gap-3">
<div
class="w-10 h-10 rounded-lg ring-1 ring-white/10 bg-gradient-to-br from-blue-500/20 to-cyan-400/10 animate-floatSlow"
style="animation-delay:.08s"></div>
<div class="flex-1">
<p class="text-sm text-neutral-200">Feature Grid</p>
<p class="text-[11px] text-neutral-500">3x3 cards</p>
</div>
<button class="inline-flex items-center gap-1 text-[11px] text-blue-200 bg-blue-900/30 rounded-full px-2 py-0.5 ring-1 ring-blue-700">
Use
</button>
</div>
</div>
</div>
</div>
</div>