All Prompts
All Prompts
pricingsectionresponsiveinteractivetoggletailwindlanding
Aura Creative Pricing Section with Toggle
Секция цен Aura: элегантный дизайн для креатив студии с переключением мес/год, 3 тарифами, выделенной картой и футером. Адаптивный UI.
Prompt
<div class="museum-frame"
style="--bg-cream: #FAF8F3; --ink-black: #1A1818; --accent-gold: #C5A059; --font-display: 'Bodoni Moda', serif; --font-sans: 'Inter', sans-serif; background-color: var(--bg-cream); color: var(--ink-black); font-family: var(--font-sans); width: 100%; max-width: 1280px; min-height: 960px; border: 3px solid var(--ink-black); position: relative; display: flex; flex-direction: column; overflow-y: auto; border-radius: 20px; margin: 0 auto;">
<script src="https://cdn.tailwindcss.com"></script>
<link
href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,700;1,6..96,400&family=Inter:wght@300;400;500;600;700&display=swap"
rel="stylesheet">
<div class="content-padding" style="padding: 4rem 5rem;">
<header class="flex justify-between items-start mb-8">
<div style="text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.85rem; line-height: 1.4;">
Paris, FR<br>
ESTABLISHED 2025
</div>
<nav class="flex gap-8">
<a href="#"
style="text-decoration: none; color: var(--ink-black); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500;">Archive</a>
<a href="#"
style="text-decoration: none; color: var(--ink-black); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500;">Studio</a>
<a href="#"
style="text-decoration: none; color: var(--ink-black); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500;">Connect</a>
</nav>
</header>
<main>
<section class="text-center mb-16">
<h1
style="font-family: var(--font-display); font-size: clamp(4rem, 15vw, 8rem); font-weight: 700; line-height: 0.8; text-transform: uppercase; background-image: url('https://images.unsplash.com/photo-1550684848-fac1c5b4e853?auto=format&fit=crop&w=1600&q=80'); background-size: cover; -webkit-background-clip: text; background-clip: text; color: transparent;">
AURA</h1>
</section>
<div id="pricing-module" class="text-center mb-12">
<h2 style="font-family: var(--font-display); font-size: 2.5rem; font-weight: 400;">Creative Partnership</h2>
<div
style="display: inline-flex; align-items: center; gap: 1rem; background: #f0ede6; padding: 6px; border-radius: 100px; margin-top: 2rem;">
<button class="toggle-btn active" onclick="togglePricing('monthly')" style="padding: 10px 24px; border-radius: 100px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: 0.3s; border: none; background: var(--ink-black); color: white;">Monthly</button>
<button class="toggle-btn" onclick="togglePricing('annual')" style="padding: 10px 24px; border-radius: 100px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: 0.3s; border: none; background: transparent; color: #666;">Yearly — 15% Savings</button>
</div>
<script>
function togglePricing(type) {
const btns = document.querySelectorAll('.toggle-btn');
btns.forEach(btn => {
btn.style.background = 'transparent';
btn.style.color = '#666';
});
event.target.style.background = '#1A1818';
event.target.style.color = 'white';
const prices = {
monthly: ['€55', '€145', '€390'],
annual: ['€45', '€120', '€330']
};
document.querySelectorAll('.price-value').forEach((el, i) => {
el.innerText = prices[type][i];
});
}
</script>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-24">
<div
style="border: 1px solid rgba(26,24,24,0.1); padding: 3rem 2rem; border-radius: 16px; display: flex; flex-direction: column; transition: 0.3s;"
onmouseover="this.style.borderColor='var(--ink-black)'"
onmouseout="this.style.borderColor='rgba(26,24,24,0.1)'">
<h3 style="font-family: var(--font-display); font-size: 1.5rem; font-style: italic; margin-bottom: 1rem;">Base
</h3>
<div style="font-size: 3rem; font-weight: 700; margin-bottom: 1.5rem;">
<span class="price-value">€55</span><span style="font-size: 1rem; font-weight: 400; opacity: 0.6;">/mo</span>
</div>
<ul style="list-style: none; margin-bottom: 2.5rem; flex-grow: 1;">
<li
style="padding: 0.75rem 0; border-bottom: 1px solid rgba(26,24,24,0.05); font-size: 0.9rem; display: flex; align-items: center;">
<span style="color: var(--accent-gold); margin-right: 10px;">—</span>Curated Asset Library</li>
<li
style="padding: 0.75rem 0; border-bottom: 1px solid rgba(26,24,24,0.05); font-size: 0.9rem; display: flex; align-items: center;">
<span style="color: var(--accent-gold); margin-right: 10px;">—</span>Weekly Design Briefs</li>
<li
style="padding: 0.75rem 0; border-bottom: 1px solid rgba(26,24,24,0.05); font-size: 0.9rem; display: flex; align-items: center;">
<span style="color: var(--accent-gold); margin-right: 10px;">—</span>Community Access</li>
</ul>
<a href="#"
style="background: var(--ink-black); color: white; padding: 1rem; text-align: center; text-decoration: none; border-radius: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem;">Initialize</a>
</div>
<div
style="border: 2px solid var(--ink-black); background: white; padding: 3rem 2rem; border-radius: 16px; display: flex; flex-direction: column; transform: translateY(-10px);">
<h3 style="font-family: var(--font-display); font-size: 1.5rem; font-style: italic; margin-bottom: 1rem;">Pro
</h3>
<div style="font-size: 3rem; font-weight: 700; margin-bottom: 1.5rem;">
<span class="price-value">€145</span><span style="font-size: 1rem; font-weight: 400; opacity: 0.6;">/mo</span>
</div>
<ul style="list-style: none; margin-bottom: 2.5rem; flex-grow: 1;">
<li
style="padding: 0.75rem 0; border-bottom: 1px solid rgba(26,24,24,0.05); font-size: 0.9rem; display: flex; align-items: center;">
<span style="color: var(--accent-gold); margin-right: 10px;">—</span>All Base Features</li>
<li
style="padding: 0.75rem 0; border-bottom: 1px solid rgba(26,24,24,0.05); font-size: 0.9rem; display: flex; align-items: center;">
<span style="color: var(--accent-gold); margin-right: 10px;">—</span>Bi-weekly Portfolio Review</li>
<li
style="padding: 0.75rem 0; border-bottom: 1px solid rgba(26,24,24,0.05); font-size: 0.9rem; display: flex; align-items: center;">
<span style="color: var(--accent-gold); margin-right: 10px;">—</span>Commercial Licensing</li>
<li
style="padding: 0.75rem 0; border-bottom: 1px solid rgba(26,24,24,0.05); font-size: 0.9rem; display: flex; align-items: center;">
<span style="color: var(--accent-gold); margin-right: 10px;">—</span>Priority Beta Access</li>
</ul>
<a href="#"
style="background: var(--ink-black); color: white; padding: 1rem; text-align: center; text-decoration: none; border-radius: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem;">Select
Professional</a>
</div>
<div
style="border: 1px solid rgba(26,24,24,0.1); padding: 3rem 2rem; border-radius: 16px; display: flex; flex-direction: column; transition: 0.3s;"
onmouseover="this.style.borderColor='var(--ink-black)'"
onmouseout="this.style.borderColor='rgba(26,24,24,0.1)'">
<h3 style="font-family: var(--font-display); font-size: 1.5rem; font-style: italic; margin-bottom: 1rem;">
Elite</h3>
<div style="font-size: 3rem; font-weight: 700; margin-bottom: 1.5rem;">
<span class="price-value">€390</span><span style="font-size: 1rem; font-weight: 400; opacity: 0.6;">/mo</span>
</div>
<ul style="list-style: none; margin-bottom: 2.5rem; flex-grow: 1;">
<li
style="padding: 0.75rem 0; border-bottom: 1px solid rgba(26,24,24,0.05); font-size: 0.9rem; display: flex; align-items: center;">
<span style="color: var(--accent-gold); margin-right: 10px;">—</span>All Pro Features</li>
<li
style="padding: 0.75rem 0; border-bottom: 1px solid rgba(26,24,24,0.05); font-size: 0.9rem; display: flex; align-items: center;">
<span style="color: var(--accent-gold); margin-right: 10px;">—</span>1-on-1 Monthly Mentorship</li>
<li
style="padding: 0.75rem 0; border-bottom: 1px solid rgba(26,24,24,0.05); font-size: 0.9rem; display: flex; align-items: center;">
<span style="color: var(--accent-gold); margin-right: 10px;">—</span>Quarterly Print Box</li>
</ul>
<a href="#"
style="background: var(--ink-black); color: white; padding: 1rem; text-align: center; text-decoration: none; border-radius: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem;">Select
Elite</a>
</div>
</div>
</main>
</div>
<footer
style="background: var(--ink-black); color: var(--bg-cream); padding: 5rem; text-align: center; margin-top: auto;">
<div style="font-family: var(--font-display); font-size: 2.5rem; margin-bottom: 2rem; letter-spacing: 0.1em;">AURA
CREATIVE</div>
<div class="flex flex-wrap justify-center gap-12 mb-12">
<a href="#"
style="color: var(--bg-cream); text-decoration: none; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7;">Method</a>
<a href="#"
style="color: var(--bg-cream); text-decoration: none; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7;">Artists</a>
<a href="#"
style="color: var(--bg-cream); text-decoration: none; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7;">Logistics</a>
<a href="#"
style="color: var(--bg-cream); text-decoration: none; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7;">Essays</a>
</div>
<div class="flex justify-center gap-8 mb-12">
<a href="#"
style="color: var(--bg-cream); text-decoration: none; font-size: 0.9rem; border: 1px solid rgba(250, 248, 243, 0.2); padding: 10px 24px; border-radius: 100px;">Instagram</a>
<a href="#"
style="color: var(--bg-cream); text-decoration: none; font-size: 0.9rem; border: 1px solid rgba(250, 248, 243, 0.2); padding: 10px 24px; border-radius: 100px;">Behance</a>
</div>
<div
style="font-size: 0.75rem; opacity: 0.4; letter-spacing: 0.05em; border-top: 1px solid rgba(250, 248, 243, 0.1); padding-top: 2rem;">
© 2025 AURA CREATIVE & DESIGN LAB. ALL RIGHTS RESERVED. <br>
PRIVACY | TERMS | COMPLIANCE
</div>
</footer>
</div>