<!-- Banner minimalista -->
<div id="notification-banner" class="notification-banner" style="display: none;">
    <div class="banner-progress">
        <div class="progress-bar"></div>
    </div>
    
    <button class="close-btn" onclick="closeBanner()">
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
    </button>

    <div class="banner-content">
        <div class="status-indicator">
            <div class="pulse-dot"></div>
            <span class="status-text">LIVE</span>
        </div>
        
        <div class="main-content">
            <h3 class="banner-title">Visual Configurator</h3>
            <p class="banner-subtitle">Now active with 50+ animations</p>
        </div>
        
        <a href="https://bricksfusion.com/pricing#brxe-zvvpyf" class="cta-button" target="_blank">
            <span>Get Started</span>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <line x1="5" y1="12" x2="19" y2="12"></line>
                <polyline points="12 5 19 12 12 19"></polyline>
            </svg>
        </a>
    </div>
</div>

<!-- Badge de novedades -->
<div id="news-badge" class="news-badge" onclick="showBanner()">
    <div class="badge-glow"></div>
    <span class="badge-text">NEW</span>
</div>

<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

.notification-banner {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 320px;
    background: rgba(20, 20, 20, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 16px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    z-index: 1000;
    transform: translateX(100%) scale(0.8);
    opacity: 0;
    animation: slideIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    box-shadow: 
        0 16px 48px rgba(0, 0, 0, 0.4),
        0 6px 24px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    box-sizing: border-box;
}

.notification-banner *,
.notification-banner *::before,
.notification-banner *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

@keyframes slideIn {
    0% {
        transform: translateX(100%) scale(0.8);
        opacity: 0;
    }
    100% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

.banner-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 0px);
    height: 2px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 14px 14px 0 0;
    overflow: hidden;
    z-index: 1;
    margin: 0;
}

.progress-bar {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #007AFF, #5856D6);
    transform-origin: left;
    animation: progressShrink 8s linear forwards;
}

@keyframes progressShrink {
    from {
        transform: scaleX(1);
    }
    to {
        transform: scaleX(0);
    }
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 6px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(12px);
}

.close-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
    transform: scale(1.1);
}

.banner-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 6px;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background: #30D158;
    border-radius: 50%;
    animation: pulse 2s infinite;
    box-shadow: 0 0 0 0 rgba(48, 209, 88, 0.7);
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(48, 209, 88, 0.7);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(48, 209, 88, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(48, 209, 88, 0);
    }
}

.status-text {
    font-size: 11px;
    font-weight: 600;
    color: #30D158;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.main-content {
    flex: 1;
}

.banner-title {
    font-size: 16px;
    font-weight: 600;
    color: #FFFFFF;
    margin: 0;
    line-height: 1.3;
}

.banner-subtitle {
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    margin: 2px 0 0 0;
    line-height: 1.4;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ef6013;
    color: white;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    align-self: flex-start;
    box-shadow: 0 3px 12px rgba(239, 96, 19, 0.3);
}

.cta-button:hover {
    background: #d54f0a;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(239, 96, 19, 0.4);
}

.cta-button svg {
    transition: transform 0.2s ease;
}

.cta-button:hover svg {
    transform: translateX(2px);
}

/* Badge de novedades */
.news-badge {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    top: auto !important;
    left: auto !important;
    background: rgba(16, 50, 30, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 16px;
    padding: 4px 12px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    cursor: pointer;
    z-index: 999;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 4px 16px rgba(16, 50, 30, 0.3),
        inset 0 1px 0 rgba(34, 197, 94, 0.1);
    transform: scale(0);
    animation: badgePopIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
    animation-delay: 0.3s;
    overflow: hidden;
}

@keyframes badgePopIn {
    0% {
        transform: scale(0) rotate(-8deg);
        opacity: 0;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

.news-badge:hover {
    transform: scale(1.05) translateY(-1px);
    background: rgba(20, 60, 35, 0.95);
    border-color: rgba(34, 197, 94, 0.3);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.5),
        0 6px 20px rgba(16, 50, 30, 0.4),
        inset 0 1px 0 rgba(34, 197, 94, 0.15);
}

.badge-glow {
    position: absolute;
    inset: -1px;
    border-radius: 17px;
    background: linear-gradient(45deg, transparent, rgba(34, 197, 94, 0.4), transparent);
    opacity: 0.6;
    animation: badgeGlow 4s ease-in-out infinite;
    z-index: -1;
}

@keyframes badgeGlow {
    0%, 100% {
        opacity: 0.4;
        transform: rotate(0deg);
    }
    50% {
        opacity: 0.8;
        transform: rotate(180deg);
    }
}

.badge-text {
    font-size: 11px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
    line-height: 1;
}

/* Responsive */
@media (max-width: 768px) {
    .notification-banner {
        right: 14px;
        bottom: 14px;
        width: calc(100vw - 28px);
        max-width: 300px;
        padding: 14px;
        transform: translateY(100%) scale(0.9);
        animation: slideInMobile 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    
    @keyframes slideInMobile {
        0% {
            transform: translateY(100%) scale(0.9);
            opacity: 0;
        }
        100% {
            transform: translateY(0) scale(1);
            opacity: 1;
        }
    }
    
    .banner-closing {
        animation: slideOutMobile 0.4s cubic-bezier(0.4, 0, 1, 1) forwards;
    }
    
    @keyframes slideOutMobile {
        to {
            transform: translateY(100%) scale(0.9);
            opacity: 0;
        }
    }
    
    .news-badge {
        right: 14px;
        bottom: 14px;
        padding: 5px 12px;
    }
    
    .badge-text {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .notification-banner {
        width: calc(100vw - 20px);
        right: 10px;
        bottom: 10px;
        padding: 12px;
        border-radius: 12px;
    }
    
    .banner-title {
        font-size: 15px;
    }
    
    .banner-subtitle {
        font-size: 12px;
    }
    
    .cta-button {
        padding: 7px 14px;
        font-size: 12px;
    }
    
    .banner-content {
        gap: 10px;
    }
    
    .news-badge {
        right: 10px;
        bottom: 10px;
        padding: 4px 10px;
    }
    
    .badge-text {
        font-size: 10px;
    }
}

@keyframes slideOut {
    to {
        transform: translateX(100%) scale(0.9);
        opacity: 0;
    }
}

@media (min-width: 769px) {
    .banner-closing {
        animation: slideOut 0.4s cubic-bezier(0.4, 0, 1, 1) forwards;
    }
}
</style>

<script>
(function() {
    let autoCloseTimer;
    let isClosing = false;

    window.closeBanner = function() {
        if (isClosing) return;
        
        isClosing = true;
        const banner = document.getElementById('notification-banner');
        banner.classList.add('banner-closing');
        
        clearTimeout(autoCloseTimer);
        
        setTimeout(() => {
            if (banner) {
                banner.style.display = 'none';
                showNewsBadge();
            }
        }, 400);
    };

    window.showBanner = function() {
        const banner = document.getElementById('notification-banner');
        const newsBadge = document.getElementById('news-badge');
        
        if (newsBadge) {
            newsBadge.style.display = 'none';
        }
        
        if (banner) {
            banner.style.display = 'block';
            banner.classList.remove('banner-closing');
            isClosing = false;
            
            banner.style.animation = 'none';
            banner.offsetHeight;
            banner.style.animation = 'slideIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards';
            
            autoCloseTimer = setTimeout(() => {
                window.closeBanner();
            }, 8000);
            
            const progressBar = document.querySelector('.progress-bar');
            if (progressBar) {
                progressBar.style.animation = 'none';
                progressBar.offsetHeight;
                progressBar.style.animation = 'progressShrink 8s linear forwards';
            }
        }
    };

    function showNewsBadge() {
        const newsBadge = document.getElementById('news-badge');
        if (newsBadge) {
            newsBadge.style.display = 'block';
        }
    }

    const banner = document.getElementById('notification-banner');
    if (banner) {
        banner.addEventListener('mouseenter', () => {
            if (!isClosing) {
                const progressBar = document.querySelector('.progress-bar');
                if (progressBar) {
                    progressBar.style.animationPlayState = 'paused';
                }
                clearTimeout(autoCloseTimer);
            }
        });

        banner.addEventListener('mouseleave', () => {
            if (!isClosing) {
                const progressBar = document.querySelector('.progress-bar');
                if (progressBar) {
                    progressBar.style.animationPlayState = 'running';
                }
                
                autoCloseTimer = setTimeout(() => {
                    window.closeBanner();
                }, 8000);
            }
        });
    }
})();
</script>
Main categories

Hero

Cards

Pricing

Header

Features

Testimonial

CTA

Button

Soon

About

Contact

Megamenu

Roadmap

Ready to enhance your Bricks Builder experience?

Access our complete library of professional components.

Explore all categoriesQuick Started

Ready to enhance your Bricks Builder experience?

Add premium elements that enhance user experience.

Quick Started
SureCart components

Product pages

High quality product templates

SureSwitch

Dynamic price toggle with flexible payment options

SureProtect

Elegant content protection for premium membership areas

Ready to enhance your Bricks Builder experience?

Take advantage of these extraordinary features to enrich your customers' websites.

Explore all

Pricing

Simple, transparent pricing plans

Limited LTD

About me

Learn about Bricksfusion

ChangeLog

Latest updates and improvements

Roadmap

Find out what's coming to Bricksfusion

Contact

Get in touch with us

Community

Join our facebook community

Quick Started

Discover how easy Bricksfusion is

Download Core Framework Stylesheet

Makes templates look exactly as designed

Ready to enhance your Bricks Builder experience?

Unlock Bricksfusion. Make today your launch day.

Get Started

5 Ready Components

SureCart templates

Smart templates designed for your success

Get StartedHow it works

SureCart Templates

Build your SureCart website

Flexible designs that adapt to your brand.

One-click copy

6 components

Documentation ready

How it works

Your SureCart, now beautifully styled

Templates that make selling look easy

Clean design, clear results

Minimalist and modern. Every template is crafted with a clean, professional look that puts your products in the spotlight.

Features built to impress

Each template comes packed with thoughtful features tailored for SureCart, designed to make your store stand out and perform better.

Seamless on any device

From desktops to smartphones, our templates adapt effortlessly to every screen size, ensuring a flawless experience for your customers.

Truly remarkable templates

Not just designs, but tools to captivate your customers and elevate your store with components that feel fresh and purposeful.

Unlock instant access to Bricksfusion

Choose Your Plan

Subscription Pro Annual
€99/year
Unlimited websites
Features & Templates
Library Components
Animated Elements
Instant Motion

Soon

Transition Pages

New

Templates
SureCart Templates
Visual configurator

New

Integrations
Bricks Vanilla
ACSS Framework
Core Framework
Customer Care
Standard support (48h response)
Get Pro Annual
Best ValueLifetime
€199
Unlimited websites
Features & Templates
Library Components
Animated Elements
Instant Motion

Soon

Transition Pages

New

Templates
SureCart Templates
Visual configurator

New

Integrations
Bricks Vanilla
ACSS Framework
Core Framework
Customer Care
Premium support (24h response)
Get Lifetime Access

From Purchase to implementation — Fast & Easy

Stop building websites. Start building experiences.