Documentacao tecnica dos 21 modelos de template disponiveis
institutionalLayout classico com menu fixo no topo e footer completo com 4 colunas. Ideal para sites corporativos.
Header SEO-friendly com estrutura semântica. O header utiliza a classe site-header como elemento raiz. O conteudo do header esta dentro de um .container do Bootstrap, limitando a largura maxima. O conteudo das paginas e inserido dentro de <main> com classe site-content. O placeholder [[CONTENT]] e substituido pelo conteudo renderizado de cada pagina. Rodape: Footer SEO-friendly com Schema.org LocalBusiness. Possui markers para insercao automatica de componentes: NAV_ITEMS, HEADER_UTILITY, FOOTER_ITEMS. Esses markers permitem que o sistema insira menus de modulos, utilitarios e itens do rodape automaticamente. Utiliza os componentes Blade: x-front.search-box, x-front.newsletter-form. Comportamentos JavaScript incluidos: efeito de scroll no header, botao voltar ao topo, animacoes de entrada (fade-in), scroll suave, menu mobile, link ativo no menu. Recomendado para: Empresas, Servicos, Consultorias.
<header>
site-header
<main>
site-content
<footer>
site-footer
{{-- Header SEO-friendly com estrutura semântica --}}
<header class="site-header" role="banner">
<nav class="navbar navbar-expand-lg" aria-label="Navegação principal">
<div class="container">
{{-- Logo com SEO --}}
<a class="navbar-brand d-flex align-items-center" href="/" aria-label="Página inicial - {{ $siteName }}">
@if($siteLogo)
<img src="{{ $siteLogo }}" alt="{{ $siteName }}" height="45" class="logo-img">
@else
<span class="logo-text">{{ $siteName }}</span>
@endif
</a>
{{-- Botão mobile --}}
<button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar"
aria-controls="mainNavbar" aria-expanded="false" aria-label="Abrir menu de navegação">
<span class="navbar-toggler-icon"></span>
</button>
{{-- Menu de navegação --}}
<div class="collapse navbar-collapse" id="mainNavbar">
{{-- Menu principal - substituir pelo componente real ou menu manual --}}
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="/">Início</a>
</li>
{{-- [COMPONENT:NAV_ITEMS] --}}
</ul>
{{-- Busca --}}
<div class="navbar-search ms-lg-3">
<x-front.search-box />
</div>
{{-- [COMPONENT:HEADER_UTILITY] --}}
{{-- CTA Button --}}
<div class="navbar-cta ms-lg-3">
<a href="/contato" class="btn btn-primary btn-sm">
Orçamento
</a>
</div>
</div>
</div>
</nav>
</header>
{{-- Footer SEO-friendly com Schema.org LocalBusiness --}}
<footer class="site-footer" role="contentinfo" itemscope itemtype="https://schema.org/Organization">
<div class="container">
{{-- Grid principal --}}
<div class="row gy-4 gy-lg-0">
{{-- Coluna 1: Sobre --}}
<div class="col-lg-4 col-md-6">
<div class="footer-brand mb-3">
@if($siteLogoFooter ?? $siteLogo)
<img src="{{ $siteLogoFooter ?? $siteLogo }}" alt="{{ $siteName }}" height="40" class="footer-logo" itemprop="logo">
@else
<h5 class="footer-title" itemprop="name">{{ $siteName }}</h5>
@endif
</div>
<p class="footer-about" itemprop="description">{{ $footerAbout }}</p>
{{-- Redes Sociais --}}
@if($footerShowSocial)
<div class="footer-social mt-4">
@if($siteFacebook)
<a href="{{ $siteFacebook }}" target="_blank" rel="noopener noreferrer" class="social-link" aria-label="Facebook" itemprop="sameAs">
<i class="fab fa-facebook-f"></i>
</a>
@endif
@if($siteInstagram)
<a href="{{ $siteInstagram }}" target="_blank" rel="noopener noreferrer" class="social-link" aria-label="Instagram" itemprop="sameAs">
<i class="fab fa-instagram"></i>
</a>
@endif
@if($siteLinkedin)
<a href="{{ $siteLinkedin }}" target="_blank" rel="noopener noreferrer" class="social-link" aria-label="LinkedIn" itemprop="sameAs">
<i class="fab fa-linkedin-in"></i>
</a>
@endif
@if($siteYoutube)
<a href="{{ $siteYoutube }}" target="_blank" rel="noopener noreferrer" class="social-link" aria-label="YouTube" itemprop="sameAs">
<i class="fab fa-youtube"></i>
</a>
@endif
@if($siteTwitter)
<a href="{{ $siteTwitter }}" target="_blank" rel="noopener noreferrer" class="social-link" aria-label="Twitter" itemprop="sameAs">
<i class="fab fa-x-twitter"></i>
</a>
@endif
</div>
@endif
</div>
{{-- Coluna 2: Links Rápidos --}}
<div class="col-lg-2 col-md-6">
<h6 class="footer-heading">Links</h6>
<nav aria-label="Links do rodapé">
<ul class="footer-links">
<li><a href="/">Início</a></li>
<li><a href="/sobre">Sobre Nós</a></li>
<li><a href="/contato">Contato</a></li>
</ul>
</nav>
</div>
{{-- Coluna 3: Contato --}}
@if($footerShowContact)
<div class="col-lg-3 col-md-6" itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
<h6 class="footer-heading">Contato</h6>
<ul class="footer-contact">
@if($sitePhone)
<li>
<i class="fas fa-phone-alt"></i>
<a href="tel:{{ preg_replace('/[^0-9+]/', '', $sitePhone) }}" itemprop="telephone">{{ $sitePhone }}</a>
</li>
@endif
@if($siteWhatsapp)
<li>
<i class="fab fa-whatsapp"></i>
<a href="{{ $siteWhatsappLink }}" target="_blank" rel="noopener">WhatsApp</a>
</li>
@endif
@if($siteEmail)
<li>
<i class="fas fa-envelope"></i>
<a href="mailto:{{ $siteEmail }}" itemprop="email">{{ $siteEmail }}</a>
</li>
@endif
@if($siteCity && $siteState)
<li>
<i class="fas fa-map-marker-alt"></i>
<span>
<span itemprop="addressLocality">{{ $siteCity }}</span> -
<span itemprop="addressRegion">{{ $siteState }}</span>
</span>
</li>
@endif
</ul>
</div>
@endif
{{-- Coluna 4: Horário / Newsletter --}}
<div class="col-lg-3 col-md-6">
@if($siteBusinessHours)
<h6 class="footer-heading">Horário</h6>
<p class="footer-hours">
<i class="far fa-clock me-2"></i>{{ $siteBusinessHours }}
</p>
@endif
<h6 class="footer-heading mt-4">Newsletter</h6>
<p class="small" style="opacity: 0.8;">Receba novidades no seu e-mail.</p>
<x-front.newsletter-form layout="inline" />
</div>
</div>
{{-- [COMPONENT:FOOTER_ITEMS] --}}
{{-- Linha inferior --}}
<div class="footer-bottom">
<div class="row align-items-center">
<div class="col-md-6 text-center text-md-start">
<p class="footer-copyright mb-0">
{!! $footerCopyright !!}
</p>
</div>
<div class="col-md-6 text-center text-md-end">
<nav class="footer-legal" aria-label="Links legais">
@if($privacyPolicyUrl)
<a href="{{ $privacyPolicyUrl }}">Privacidade</a>
@endif
@if($termsUrl)
<a href="{{ $termsUrl }}">Termos de Uso</a>
@endif
</nav>
</div>
</div>
</div>
</div>
</footer>
/**
* CSS do Template
*
* IMPORTANTE: Este CSS complementa o layout base (app.blade.php).
* O layout base já define:
* - Variáveis CSS (--site-primary, --site-secondary, etc.)
* - Estilos de .site-header, .site-footer, .navbar
* - Botões, cards, formulários, tipografia
*
* Aqui adicione apenas estilos ESPECÍFICOS deste template
* que não existem no layout base.
*/
/* ========================================
HEADER - Estilos específicos do template
======================================== */
.site-header.scrolled {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.site-header .logo-img {
max-height: 45px;
width: auto;
}
.site-header .nav-link {
position: relative;
padding: 0.5rem 1rem !important;
}
.site-header .nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background-color: var(--site-header-accent);
transition: width 0.3s ease, left 0.3s ease;
}
.site-header .nav-link:hover::after,
.site-header .nav-link.active::after {
width: 100%;
left: 0;
}
.site-header .navbar-cta .btn {
font-weight: 600;
padding: 0.5rem 1.25rem;
}
/* Mobile menu */
@media (max-width: 991.98px) {
.site-header .navbar-collapse {
padding: 1rem 0;
}
.site-header .navbar-nav {
border-top: 1px solid var(--site-border, #dee2e6);
padding-top: 1rem;
margin-top: 0.5rem;
}
.site-header .nav-link::after {
display: none;
}
.site-header .navbar-cta {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--site-border, #dee2e6);
}
.site-header .navbar-cta .btn {
width: 100%;
justify-content: center;
}
}
/* ========================================
FOOTER - Estilos específicos do template
======================================== */
.site-footer .footer-title {
font-weight: 700;
font-size: 1.5rem;
margin-bottom: 0;
}
.site-footer .footer-about {
color: var(--site-footer-text, rgba(255, 255, 255, 0.7));
font-size: 0.95rem;
line-height: 1.7;
}
.site-footer .footer-heading {
font-weight: 600;
font-size: 1rem;
margin-bottom: 1.25rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.site-footer .footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.site-footer .footer-links li {
margin-bottom: 0.75rem;
}
.site-footer .footer-links a {
transition: color 0.2s ease, padding-left 0.2s ease;
}
.site-footer .footer-links a:hover {
padding-left: 5px;
}
.site-footer .footer-contact {
list-style: none;
padding: 0;
margin: 0;
}
.site-footer .footer-contact li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 0.875rem;
color: var(--site-footer-text, rgba(255, 255, 255, 0.7));
}
.site-footer .footer-contact li i {
color: var(--site-footer-accent);
width: 16px;
margin-top: 4px;
}
.site-footer .footer-hours {
color: var(--site-footer-text, rgba(255, 255, 255, 0.7));
font-size: 0.95rem;
}
/* Social Links */
.site-footer .footer-social {
display: flex;
gap: 0.75rem;
}
.site-footer .social-link {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 50%;
color: #fff;
font-size: 1rem;
text-decoration: none;
transition: background-color 0.3s ease, transform 0.3s ease;
}
.site-footer .social-link:hover {
background-color: var(--site-footer-accent);
color: #fff;
transform: translateY(-3px);
}
/* Footer Bottom */
.site-footer .footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 1.5rem 0;
margin-top: 3rem;
}
.site-footer .footer-copyright {
color: rgba(255, 255, 255, 0.5);
font-size: 0.875rem;
}
.site-footer .footer-legal {
display: flex;
gap: 1.5rem;
justify-content: flex-end;
}
.site-footer .footer-legal a {
color: rgba(255, 255, 255, 0.5);
font-size: 0.875rem;
}
.site-footer .footer-legal a:hover {
color: #fff;
}
@media (max-width: 767.98px) {
.site-footer .footer-legal {
justify-content: center;
margin-top: 1rem;
}
}
/* ========================================
ANIMACOES E EFEITOS
======================================== */
/* Fade-in para elementos */
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* Botao voltar ao topo */
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
width: 45px;
height: 45px;
background-color: var(--site-primary);
color: #fff;
border: none;
border-radius: 50%;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
transform: translateY(-3px);
}
landing-pageHeader transparente sobre hero, footer simples com CTA. Perfeito para campanhas e produtos.
Header Transparente para Landing Page. O header utiliza a classe site-header header-transparent como elemento raiz. O conteudo do header esta dentro de um .container do Bootstrap, limitando a largura maxima. O conteudo das paginas e inserido dentro de <main> com classe site-content. O placeholder [[CONTENT]] e substituido pelo conteudo renderizado de cada pagina. Rodape: Newsletter. Possui markers para insercao automatica de componentes: NAV_ITEMS, HEADER_UTILITY, FOOTER_ITEMS. Esses markers permitem que o sistema insira menus de modulos, utilitarios e itens do rodape automaticamente. Utiliza os componentes Blade: x-front.search-box, x-front.newsletter-form. Comportamentos JavaScript incluidos: efeito de scroll no header, botao voltar ao topo, animacoes de entrada (fade-in), scroll suave, menu mobile. Recomendado para: Campanhas, Produtos, Lancamentos.
<header>
site-header header-transparent
<main>
site-content
<div>
container text-center
{{-- Header Transparente para Landing Page --}}
<header class="site-header header-transparent" role="banner">
<nav class="navbar navbar-expand-lg navbar-dark" aria-label="Navegacao principal">
<div class="container">
{{-- Logo --}}
<a class="navbar-brand" href="/" aria-label="Pagina inicial - {{ $siteName }}">
@if($siteLogo)
<img src="{{ $siteLogo }}" alt="{{ $siteName }}" height="40" class="logo-img">
@else
<span class="logo-text">{{ $siteName }}</span>
@endif
</a>
{{-- Botao mobile --}}
<button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar"
aria-controls="mainNavbar" aria-expanded="false" aria-label="Abrir menu">
<span class="navbar-toggler-icon"></span>
</button>
{{-- Menu --}}
<div class="collapse navbar-collapse" id="mainNavbar">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="/">Início</a>
</li>
{{-- [COMPONENT:NAV_ITEMS] --}}
</ul>
{{-- Busca --}}
<div class="navbar-search ms-lg-3">
<x-front.search-box />
</div>
{{-- [COMPONENT:HEADER_UTILITY] --}}
{{-- CTA --}}
<div class="navbar-cta ms-lg-3">
<a href="#contato" class="btn btn-light btn-sm">
Começar Agora
</a>
</div>
</div>
</div>
</nav>
</header>
{{-- Newsletter --}}
<section style="background: var(--site-background-alt); padding: 3rem 0;">
<div class="container text-center">
<h3 style="margin-bottom: 0.5rem;">Fique por dentro</h3>
<p class="text-muted mb-3">Receba novidades e conteudos exclusivos no seu e-mail.</p>
<div style="max-width: 500px; margin: 0 auto;">
<x-front.newsletter-form layout="inline" />
</div>
</div>
</section>
{{-- Footer compacto para Landing Page com CTA --}}
<section class="footer-cta bg-primary text-white py-5">
<div class="container text-center">
<h2 class="h3 mb-3">Pronto para comecar?</h2>
<p class="lead mb-4 opacity-75">Entre em contato e descubra como podemos ajudar.</p>
<div class="d-flex flex-wrap justify-content-center gap-3">
@if($siteWhatsappLink)
<a href="{{ $siteWhatsappLink }}" class="btn btn-light btn-lg" target="_blank" rel="noopener">
<i class="fab fa-whatsapp me-2"></i> WhatsApp
</a>
@endif
<a href="/contato" class="btn btn-outline-light btn-lg">
<i class="fas fa-envelope me-2"></i> Enviar Mensagem
</a>
</div>
</div>
</section>
<footer class="site-footer py-4" role="contentinfo" itemscope itemtype="https://schema.org/Organization">
<div class="container">
<div class="row align-items-center">
<div class="col-md-4 text-center text-md-start mb-3 mb-md-0">
@if($siteLogoFooter ?? $siteLogo)
<img src="{{ $siteLogoFooter ?? $siteLogo }}" alt="{{ $siteName }}" height="30" class="footer-logo" itemprop="logo">
@else
<span class="footer-brand" itemprop="name">{{ $siteName }}</span>
@endif
</div>
<div class="col-md-4 text-center mb-3 mb-md-0">
{{-- Redes Sociais --}}
<div class="footer-social d-flex justify-content-center gap-3">
@if($siteFacebook)
<a href="{{ $siteFacebook }}" target="_blank" rel="noopener" aria-label="Facebook" itemprop="sameAs">
<i class="fab fa-facebook-f"></i>
</a>
@endif
@if($siteInstagram)
<a href="{{ $siteInstagram }}" target="_blank" rel="noopener" aria-label="Instagram" itemprop="sameAs">
<i class="fab fa-instagram"></i>
</a>
@endif
@if($siteLinkedin)
<a href="{{ $siteLinkedin }}" target="_blank" rel="noopener" aria-label="LinkedIn" itemprop="sameAs">
<i class="fab fa-linkedin-in"></i>
</a>
@endif
</div>
</div>
<div class="col-md-4 text-center text-md-end">
<p class="footer-copyright mb-0 small">
{!! $footerCopyright !!}
</p>
</div>
</div>
{{-- [COMPONENT:FOOTER_ITEMS] --}}
{{-- Links legais --}}
@if($privacyPolicyUrl || $termsUrl)
<div class="text-center mt-3 pt-3 border-top border-secondary border-opacity-25">
<nav class="footer-legal d-flex justify-content-center gap-3" aria-label="Links legais">
@if($privacyPolicyUrl)
<a href="{{ $privacyPolicyUrl }}" class="small">Privacidade</a>
@endif
@if($termsUrl)
<a href="{{ $termsUrl }}" class="small">Termos</a>
@endif
</nav>
</div>
@endif
</div>
</footer>
/**
* CSS - Landing Page
* Header transparente que fica solido ao rolar
*/
/* ========================================
HEADER TRANSPARENTE
======================================== */
.site-header.header-transparent {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1030;
background-color: transparent;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.site-header.header-transparent.scrolled {
background-color: var(--site-header-accent);
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
}
.site-header.header-transparent .navbar {
background-color: transparent !important;
}
.site-header.header-transparent .logo-text {
color: var(--site-header-text, #fff);
font-weight: 700;
font-size: 1.5rem;
}
.site-header.header-transparent .nav-link {
color: var(--site-header-text, rgba(255, 255, 255, 0.9));
font-weight: 500;
padding: 0.5rem 1rem !important;
transition: color 0.2s ease;
}
.site-header.header-transparent .nav-link:hover,
.site-header.header-transparent .nav-link.active {
color: var(--site-header-text-hover, #fff);
}
/* Padding no body para compensar header fixo */
body {
padding-top: 0;
}
.site-content {
margin-top: -76px;
}
.site-content > section:first-child,
.site-content > .hero:first-child,
.site-content > [class*="hero"]:first-child {
padding-top: 120px;
}
/* ========================================
FOOTER CTA
======================================== */
.footer-cta {
background: linear-gradient(135deg, var(--site-primary) 0%, color-mix(in srgb, var(--site-primary) 80%, black) 100%);
}
.footer-cta h2 {
color: #fff;
}
/* ========================================
FOOTER COMPACTO
======================================== */
.site-footer {
background-color: var(--site-footer-bg);
}
.site-footer .footer-brand {
color: var(--site-footer-heading, #fff);
font-weight: 700;
font-size: 1.25rem;
}
.site-footer .footer-social a {
color: rgba(255, 255, 255, 0.6);
font-size: 1.1rem;
transition: color 0.2s ease;
}
.site-footer .footer-social a:hover {
color: #fff;
}
.site-footer .footer-copyright {
color: rgba(255, 255, 255, 0.5);
}
.site-footer .footer-legal a {
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
}
.site-footer .footer-legal a:hover {
color: #fff;
}
/* ========================================
ANIMACOES
======================================== */
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* Botao voltar ao topo */
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
width: 45px;
height: 45px;
background-color: var(--site-primary);
color: #fff;
border: none;
border-radius: 50%;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
transform: translateY(-3px);
}
ecommerceHeader com area para busca e carrinho, footer completo com informacoes de pagamento e seguranca.
Header E-commerce com busca e carrinho. O header utiliza a classe site-header como elemento raiz. O conteudo do header esta dentro de um .container do Bootstrap, limitando a largura maxima. O conteudo das paginas e inserido dentro de <main> com classe site-content. O placeholder [[CONTENT]] e substituido pelo conteudo renderizado de cada pagina. Rodape: Newsletter. Possui markers para insercao automatica de componentes: NAV_ITEMS, HEADER_UTILITY, FOOTER_ITEMS. Esses markers permitem que o sistema insira menus de modulos, utilitarios e itens do rodape automaticamente. Utiliza os componentes Blade: x-front.search-box, x-front.mini-cart, x-front.newsletter-form. Comportamentos JavaScript incluidos: efeito de scroll no header, botao voltar ao topo, animacoes de entrada (fade-in), scroll suave. Recomendado para: Lojas, Catalogo de produtos.
<header>
site-header
<main>
site-content
<div>
container
{{-- Header E-commerce com busca e carrinho --}}
<header class="site-header" role="banner">
{{-- Topbar com contato --}}
<div class="header-topbar d-none d-lg-block">
<div class="container">
<div class="row align-items-center py-2">
<div class="col-auto">
@if($sitePhone)
<a href="tel:{{ preg_replace('/[^0-9+]/', '', $sitePhone) }}" class="topbar-link">
<i class="fas fa-phone-alt me-1"></i> {{ $sitePhone }}
</a>
@endif
@if($siteEmail)
<a href="mailto:{{ $siteEmail }}" class="topbar-link ms-3">
<i class="fas fa-envelope me-1"></i> {{ $siteEmail }}
</a>
@endif
</div>
<div class="col text-end">
@if($siteFacebook)
<a href="{{ $siteFacebook }}" target="_blank" rel="noopener" class="topbar-social" aria-label="Facebook">
<i class="fab fa-facebook-f"></i>
</a>
@endif
@if($siteInstagram)
<a href="{{ $siteInstagram }}" target="_blank" rel="noopener" class="topbar-social" aria-label="Instagram">
<i class="fab fa-instagram"></i>
</a>
@endif
</div>
</div>
</div>
</div>
{{-- Header principal --}}
<nav class="navbar navbar-expand-lg" aria-label="Navegacao principal">
<div class="container">
{{-- Logo --}}
<a class="navbar-brand" href="/" aria-label="Pagina inicial - {{ $siteName }}">
@if($siteLogo)
<img src="{{ $siteLogo }}" alt="{{ $siteName }}" height="45" class="logo-img">
@else
<span class="logo-text">{{ $siteName }}</span>
@endif
</a>
{{-- Busca (componente dinamico com live search) --}}
<div class="header-search d-none d-lg-flex flex-grow-1 mx-4">
<x-front.search-box />
</div>
{{-- [COMPONENT:HEADER_UTILITY] --}}
{{-- Acoes (carrinho, whatsapp) --}}
<div class="header-actions d-flex align-items-center gap-2">
@if($siteWhatsappLink)
<a href="{{ $siteWhatsappLink }}" class="btn btn-success btn-sm d-none d-md-inline-flex align-items-center" target="_blank" rel="noopener">
<i class="fab fa-whatsapp me-1"></i> <span class="d-none d-xl-inline">WhatsApp</span>
</a>
@endif
{{-- Mini Cart --}}
<x-front.mini-cart />
{{-- Botao mobile --}}
<button class="navbar-toggler border-0 ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar"
aria-controls="mainNavbar" aria-expanded="false" aria-label="Abrir menu">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</nav>
{{-- Menu de categorias --}}
<div class="header-menu border-top">
<div class="container">
<div class="collapse navbar-collapse" id="mainNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/">Início</a>
</li>
{{-- [COMPONENT:NAV_ITEMS] --}}
</ul>
</div>
</div>
</div>
</header>
{{-- Newsletter --}}
<section style="background: var(--site-primary); padding: 3rem 0; color: #fff;">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 mb-3 mb-lg-0">
<h3 style="color: #fff; margin-bottom: 0.25rem;">Ofertas e Novidades</h3>
<p style="opacity: 0.9; margin: 0;">Cadastre-se e receba promocoes exclusivas.</p>
</div>
<div class="col-lg-6">
<x-front.newsletter-form layout="inline" theme="dark" />
</div>
</div>
</div>
</section>
{{-- Footer E-commerce completo --}}
<footer class="site-footer" role="contentinfo" itemscope itemtype="https://schema.org/Organization">
<div class="container">
{{-- Grid principal --}}
<div class="row gy-4">
{{-- Coluna 1: Sobre --}}
<div class="col-lg-3 col-md-6">
<div class="footer-brand mb-3">
@if($siteLogoFooter ?? $siteLogo)
<img src="{{ $siteLogoFooter ?? $siteLogo }}" alt="{{ $siteName }}" height="40" class="footer-logo" itemprop="logo">
@else
<h5 class="footer-title" itemprop="name">{{ $siteName }}</h5>
@endif
</div>
<p class="footer-about" itemprop="description">{{ $footerAbout }}</p>
{{-- Redes Sociais --}}
@if($footerShowSocial)
<div class="footer-social mt-3">
@if($siteFacebook)
<a href="{{ $siteFacebook }}" target="_blank" rel="noopener" class="social-link" aria-label="Facebook" itemprop="sameAs">
<i class="fab fa-facebook-f"></i>
</a>
@endif
@if($siteInstagram)
<a href="{{ $siteInstagram }}" target="_blank" rel="noopener" class="social-link" aria-label="Instagram" itemprop="sameAs">
<i class="fab fa-instagram"></i>
</a>
@endif
@if($siteYoutube)
<a href="{{ $siteYoutube }}" target="_blank" rel="noopener" class="social-link" aria-label="YouTube" itemprop="sameAs">
<i class="fab fa-youtube"></i>
</a>
@endif
</div>
@endif
</div>
{{-- Coluna 2: Links --}}
<div class="col-lg-2 col-md-6">
<h6 class="footer-heading">Links</h6>
<ul class="footer-links">
<li><a href="/">Inicio</a></li>
<li><a href="/sobre">Sobre Nos</a></li>
<li><a href="/contato">Contato</a></li>
@if($siteWhatsappLink)
<li><a href="{{ $siteWhatsappLink }}" target="_blank" rel="noopener">WhatsApp</a></li>
@endif
</ul>
</div>
{{-- Coluna 3: Contato --}}
@if($footerShowContact)
<div class="col-lg-3 col-md-6" itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
<h6 class="footer-heading">Contato</h6>
<ul class="footer-contact">
@if($sitePhone)
<li>
<i class="fas fa-phone-alt"></i>
<a href="tel:{{ preg_replace('/[^0-9+]/', '', $sitePhone) }}" itemprop="telephone">{{ $sitePhone }}</a>
</li>
@endif
@if($siteEmail)
<li>
<i class="fas fa-envelope"></i>
<a href="mailto:{{ $siteEmail }}" itemprop="email">{{ $siteEmail }}</a>
</li>
@endif
@if($siteBusinessHours)
<li>
<i class="far fa-clock"></i>
<span>{{ $siteBusinessHours }}</span>
</li>
@endif
@if($siteCity && $siteState)
<li>
<i class="fas fa-map-marker-alt"></i>
<span>
<span itemprop="addressLocality">{{ $siteCity }}</span> -
<span itemprop="addressRegion">{{ $siteState }}</span>
</span>
</li>
@endif
</ul>
</div>
@endif
</div>
{{-- Selos e pagamento --}}
<div class="footer-trust mt-4 pt-4 border-top border-secondary border-opacity-25">
<div class="row align-items-center">
<div class="col-md-6 mb-3 mb-md-0">
<span class="text-white-50 small">Formas de Pagamento:</span>
<div class="payment-icons mt-2">
<i class="fab fa-cc-visa fa-2x me-2 text-white-50"></i>
<i class="fab fa-cc-mastercard fa-2x me-2 text-white-50"></i>
<i class="fab fa-pix fa-2x me-2 text-white-50"></i>
<i class="fas fa-barcode fa-2x text-white-50"></i>
</div>
</div>
<div class="col-md-6 text-md-end">
<span class="text-white-50 small">Site Seguro:</span>
<div class="security-icons mt-2">
<i class="fas fa-lock fa-2x me-2 text-white-50"></i>
<i class="fas fa-shield-alt fa-2x text-white-50"></i>
</div>
</div>
</div>
</div>
{{-- [COMPONENT:FOOTER_ITEMS] --}}
{{-- Linha inferior --}}
<div class="footer-bottom pt-4 mt-4 border-top border-secondary border-opacity-25">
<div class="row align-items-center">
<div class="col-md-6 text-center text-md-start">
<p class="footer-copyright mb-0">
{!! $footerCopyright !!}
</p>
</div>
<div class="col-md-6 text-center text-md-end">
<nav class="footer-legal" aria-label="Links legais">
@if($privacyPolicyUrl)
<a href="{{ $privacyPolicyUrl }}">Privacidade</a>
@endif
@if($termsUrl)
<a href="{{ $termsUrl }}">Termos de Uso</a>
@endif
</nav>
</div>
</div>
</div>
</div>
</footer>
/**
* CSS - E-commerce
* Header com topbar, busca e carrinho
*/
/* ========================================
TOPBAR
======================================== */
.header-topbar {
background-color: var(--site-footer-bg);
font-size: 0.85rem;
}
.header-topbar .topbar-link {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transition: color 0.2s ease;
}
.header-topbar .topbar-link:hover {
color: #fff;
}
.header-topbar .topbar-social {
color: rgba(255, 255, 255, 0.6);
margin-left: 0.75rem;
transition: color 0.2s ease;
}
.header-topbar .topbar-social:hover {
color: #fff;
}
/* ========================================
HEADER PRINCIPAL
======================================== */
.site-header {
position: sticky;
top: 0;
z-index: 1030;
background-color: var(--site-header-bg);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.site-header .navbar {
padding: 0.75rem 0;
}
.site-header .logo-img {
max-height: 45px;
width: auto;
}
.site-header .logo-text {
color: var(--site-header-text, var(--site-header-accent));
font-weight: 700;
font-size: 1.5rem;
}
/* Busca */
.header-search .form-control {
border-radius: var(--site-btn-border-radius) 0 0 var(--site-btn-border-radius);
border-right: none;
}
.header-search .form-control:focus {
box-shadow: none;
border-color: var(--site-header-accent);
}
.header-search .btn {
border-radius: 0 var(--site-btn-border-radius) var(--site-btn-border-radius) 0;
}
/* ========================================
MENU DE CATEGORIAS
======================================== */
.header-menu {
background-color: var(--site-header-accent);
}
.header-menu .navbar-nav {
flex-direction: row;
flex-wrap: wrap;
}
.header-menu .nav-link {
color: var(--site-header-text, rgba(255, 255, 255, 0.9)) !important;
font-weight: 500;
padding: 0.75rem 1rem !important;
transition: background-color 0.2s ease;
}
.header-menu .nav-link:hover,
.header-menu .nav-link.active {
background-color: rgba(0, 0, 0, 0.1);
color: var(--site-header-text-hover, #fff) !important;
}
@media (max-width: 991.98px) {
.header-menu {
padding: 0.5rem 0;
}
.header-menu .navbar-nav {
flex-direction: column;
}
.header-menu .nav-link {
padding: 0.5rem 0 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
}
/* ========================================
FOOTER
======================================== */
.site-footer {
background-color: var(--site-footer-bg);
color: rgba(255, 255, 255, 0.85);
padding: 3rem 0 0;
}
.site-footer .footer-title {
color: var(--site-footer-heading, #fff);
font-weight: 700;
}
.site-footer .footer-about {
color: var(--site-footer-text, rgba(255, 255, 255, 0.7));
font-size: 0.9rem;
}
.site-footer .footer-heading {
color: var(--site-footer-heading, #fff);
font-weight: 600;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 1rem;
}
.site-footer .footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.site-footer .footer-links li {
margin-bottom: 0.5rem;
}
.site-footer .footer-links a {
color: var(--site-footer-text, rgba(255, 255, 255, 0.7));
text-decoration: none;
font-size: 0.9rem;
transition: color 0.2s ease;
}
.site-footer .footer-links a:hover {
color: #fff;
}
.site-footer .footer-contact {
list-style: none;
padding: 0;
margin: 0;
}
.site-footer .footer-contact li {
display: flex;
align-items: flex-start;
gap: 0.5rem;
margin-bottom: 0.5rem;
color: var(--site-footer-text, rgba(255, 255, 255, 0.7));
font-size: 0.9rem;
}
.site-footer .footer-contact li i {
color: var(--site-footer-accent);
width: 16px;
margin-top: 3px;
}
.site-footer .footer-contact a {
color: var(--site-footer-text, rgba(255, 255, 255, 0.7));
text-decoration: none;
}
.site-footer .footer-contact a:hover {
color: #fff;
}
/* Social */
.site-footer .footer-social {
display: flex;
gap: 0.5rem;
}
.site-footer .social-link {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 50%;
color: #fff;
transition: background-color 0.2s ease;
}
.site-footer .social-link:hover {
background-color: var(--site-footer-accent);
color: #fff;
}
/* Bottom */
.site-footer .footer-copyright {
color: rgba(255, 255, 255, 0.5);
font-size: 0.85rem;
}
.site-footer .footer-legal {
display: flex;
gap: 1rem;
}
.site-footer .footer-legal a {
color: rgba(255, 255, 255, 0.5);
font-size: 0.85rem;
text-decoration: none;
}
.site-footer .footer-legal a:hover {
color: #fff;
}
/* ========================================
ANIMACOES
======================================== */
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
width: 45px;
height: 45px;
background-color: var(--site-primary);
color: #fff;
border: none;
border-radius: 50%;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
}
minimalistDesign limpo com logo centralizado, menu discreto e footer simples. Para quem valoriza espacos em branco.
Header Minimalista com logo centralizado. O header utiliza a classe site-header header-minimal como elemento raiz. O conteudo do header esta dentro de um .container do Bootstrap, limitando a largura maxima. O conteudo das paginas e inserido dentro de <main> com classe site-content. O placeholder [[CONTENT]] e substituido pelo conteudo renderizado de cada pagina. Rodape: Newsletter. Possui markers para insercao automatica de componentes: NAV_ITEMS, HEADER_UTILITY, FOOTER_ITEMS. Esses markers permitem que o sistema insira menus de modulos, utilitarios e itens do rodape automaticamente. Utiliza os componentes Blade: x-front.search-box, x-front.newsletter-form. Comportamentos JavaScript incluidos: efeito de scroll no header, animacoes de entrada (fade-in), scroll suave, menu mobile. Recomendado para: Portfolios, Criativos, Artistas.
<header>
site-header header-minimal
<main>
site-content
<div>
container text-center
{{-- Header Minimalista com logo centralizado --}}
<header class="site-header header-minimal" role="banner">
<nav class="navbar" aria-label="Navegacao principal">
<div class="container">
<div class="row w-100 align-items-center">
{{-- Menu esquerdo (desktop) --}}
<div class="col-lg-4 d-none d-lg-block">
<ul class="navbar-nav flex-row">
<li class="nav-item">
<a class="nav-link" href="/">Início</a>
</li>
</ul>
</div>
{{-- Logo centralizado --}}
<div class="col-6 col-lg-4 text-center">
<a class="navbar-brand mx-auto" href="/" aria-label="Pagina inicial - {{ $siteName }}">
@if($siteLogo)
<img src="{{ $siteLogo }}" alt="{{ $siteName }}" height="50" class="logo-img">
@else
<span class="logo-text">{{ $siteName }}</span>
@endif
</a>
</div>
{{-- Menu direito (desktop) --}}
<div class="col-lg-4 d-none d-lg-block text-end">
<div class="d-flex align-items-center justify-content-end gap-3">
<ul class="navbar-nav flex-row">
{{-- [COMPONENT:NAV_ITEMS] --}}
</ul>
{{-- Busca --}}
<x-front.search-box />
{{-- [COMPONENT:HEADER_UTILITY] --}}
</div>
</div>
{{-- Botao hamburger (mobile) --}}
<div class="col-6 d-lg-none text-end">
<button class="navbar-toggler border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#mobileMenu"
aria-controls="mobileMenu" aria-label="Abrir menu">
<i class="fas fa-bars fa-lg"></i>
</button>
</div>
</div>
</div>
</nav>
</header>
{{-- Menu mobile offcanvas --}}
<div class="offcanvas offcanvas-end" tabindex="-1" id="mobileMenu" aria-labelledby="mobileMenuLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="mobileMenuLabel">Menu</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Fechar"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/">Início</a>
</li>
{{-- [COMPONENT:NAV_ITEMS] --}}
</ul>
{{-- Redes sociais --}}
<div class="mt-4 pt-4 border-top">
<div class="d-flex gap-3">
@if($siteInstagram)
<a href="{{ $siteInstagram }}" target="_blank" rel="noopener" class="text-dark">
<i class="fab fa-instagram fa-lg"></i>
</a>
@endif
@if($siteLinkedin)
<a href="{{ $siteLinkedin }}" target="_blank" rel="noopener" class="text-dark">
<i class="fab fa-linkedin-in fa-lg"></i>
</a>
@endif
@if($siteFacebook)
<a href="{{ $siteFacebook }}" target="_blank" rel="noopener" class="text-dark">
<i class="fab fa-facebook-f fa-lg"></i>
</a>
@endif
</div>
</div>
</div>
</div>
{{-- Newsletter --}}
<section style="background: var(--site-background-alt); padding: 2.5rem 0;">
<div class="container text-center">
<p class="mb-3" style="font-size: 1.1rem;">Receba novidades no seu e-mail</p>
<div style="max-width: 450px; margin: 0 auto;">
<x-front.newsletter-form layout="inline" />
</div>
</div>
</section>
{{-- Footer Minimalista --}}
<footer class="site-footer footer-minimal" role="contentinfo" itemscope itemtype="https://schema.org/Organization">
<div class="container">
{{-- [COMPONENT:FOOTER_ITEMS] --}}
<div class="row align-items-center py-4">
{{-- Logo ou nome --}}
<div class="col-md-4 text-center text-md-start mb-3 mb-md-0">
@if($siteLogoFooter ?? $siteLogo)
<img src="{{ $siteLogoFooter ?? $siteLogo }}" alt="{{ $siteName }}" height="30" itemprop="logo">
@else
<span class="footer-brand" itemprop="name">{{ $siteName }}</span>
@endif
</div>
{{-- Redes sociais --}}
<div class="col-md-4 text-center mb-3 mb-md-0">
<div class="footer-social">
@if($siteInstagram)
<a href="{{ $siteInstagram }}" target="_blank" rel="noopener" aria-label="Instagram" itemprop="sameAs">
<i class="fab fa-instagram"></i>
</a>
@endif
@if($siteLinkedin)
<a href="{{ $siteLinkedin }}" target="_blank" rel="noopener" aria-label="LinkedIn" itemprop="sameAs">
<i class="fab fa-linkedin-in"></i>
</a>
@endif
@if($siteFacebook)
<a href="{{ $siteFacebook }}" target="_blank" rel="noopener" aria-label="Facebook" itemprop="sameAs">
<i class="fab fa-facebook-f"></i>
</a>
@endif
@if($siteTwitter)
<a href="{{ $siteTwitter }}" target="_blank" rel="noopener" aria-label="Twitter" itemprop="sameAs">
<i class="fab fa-x-twitter"></i>
</a>
@endif
</div>
</div>
{{-- Copyright --}}
<div class="col-md-4 text-center text-md-end">
<p class="footer-copyright mb-0">
{!! $footerCopyright !!}
</p>
</div>
</div>
</div>
</footer>
/**
* CSS - Minimalista
* Design limpo com muito espaco em branco
*/
/* ========================================
HEADER MINIMALISTA
======================================== */
.site-header.header-minimal {
background-color: var(--site-header-bg);
border-bottom: 1px solid var(--site-border, #eee);
padding: 1.5rem 0;
}
.site-header.header-minimal .navbar {
padding: 0;
}
.site-header.header-minimal .logo-text {
font-size: 1.75rem;
font-weight: 300;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--site-header-text, var(--site-heading-color));
}
.site-header.header-minimal .logo-img {
max-height: 50px;
}
.site-header.header-minimal .nav-link {
color: var(--site-header-text, var(--site-text));
font-size: 0.85rem;
font-weight: 400;
letter-spacing: 1px;
text-transform: uppercase;
padding: 0.5rem 1.25rem !important;
transition: color 0.2s ease;
}
.site-header.header-minimal .nav-link:hover,
.site-header.header-minimal .nav-link.active {
color: var(--site-header-text-hover, var(--site-header-accent));
}
.site-header.header-minimal .navbar-toggler {
color: var(--site-heading-color);
}
/* ========================================
OFFCANVAS MENU (MOBILE)
======================================== */
#mobileMenu .nav-link {
font-size: 1.1rem;
padding: 0.75rem 0;
border-bottom: 1px solid var(--site-border, #eee);
color: var(--site-header-text, var(--site-text));
}
#mobileMenu .nav-link:hover {
color: var(--site-header-text-hover, var(--site-header-accent));
}
/* ========================================
FOOTER MINIMALISTA
======================================== */
.site-footer.footer-minimal {
background-color: var(--site-background);
border-top: 1px solid var(--site-border, #eee);
padding: 0;
}
.site-footer.footer-minimal .footer-brand {
font-size: 1.25rem;
font-weight: 300;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--site-footer-heading, var(--site-heading-color));
}
.site-footer.footer-minimal .footer-social {
display: flex;
justify-content: center;
gap: 1.5rem;
}
.site-footer.footer-minimal .footer-social a {
color: var(--site-text);
font-size: 1.1rem;
transition: color 0.2s ease;
}
.site-footer.footer-minimal .footer-social a:hover {
color: var(--site-footer-accent);
}
.site-footer.footer-minimal .footer-copyright {
color: var(--site-secondary);
font-size: 0.8rem;
}
/* ========================================
CONTEUDO - MAIS ESPACO
======================================== */
.site-content {
padding: 4rem 0;
}
.site-content .section {
padding: 5rem 0;
}
/* ========================================
ANIMACOES SUAVES
======================================== */
.fade-in {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* Sem botao back-to-top no minimalista */
.back-to-top {
display: none;
}
topbarBarra superior com contato e redes sociais, menu abaixo. Estilo profissional e informativo.
Header com Topbar - Contato e redes sociais em cima. O header utiliza a classe site-header header-topbar-style como elemento raiz. O conteudo do header esta dentro de um .container do Bootstrap, limitando a largura maxima. O conteudo das paginas e inserido dentro de <main> com classe site-content. O placeholder [[CONTENT]] e substituido pelo conteudo renderizado de cada pagina. Rodape: Newsletter. Possui markers para insercao automatica de componentes: NAV_ITEMS, HEADER_UTILITY, FOOTER_ITEMS. Esses markers permitem que o sistema insira menus de modulos, utilitarios e itens do rodape automaticamente. Utiliza os componentes Blade: x-front.search-box, x-front.newsletter-form. Comportamentos JavaScript incluidos: efeito de scroll no header, botao voltar ao topo, animacoes de entrada (fade-in), scroll suave, link ativo no menu. Recomendado para: Imobiliarias, Clinicas, Escritorios.
<header>
site-header header-topbar-style
<main>
site-content
<div>
container
{{-- Header com Topbar - Contato e redes sociais em cima --}}
<header class="site-header header-topbar-style" role="banner">
{{-- Topbar --}}
<div class="header-topbar">
<div class="container">
<div class="row align-items-center py-2">
{{-- Contato --}}
<div class="col-lg-8">
<div class="topbar-contact d-flex flex-wrap gap-3">
@if($sitePhone)
<a href="tel:{{ preg_replace('/[^0-9+]/', '', $sitePhone) }}" class="topbar-item">
<i class="fas fa-phone-alt me-1"></i>
<span class="d-none d-md-inline">{{ $sitePhone }}</span>
</a>
@endif
@if($siteWhatsapp)
<a href="{{ $siteWhatsappLink }}" target="_blank" rel="noopener" class="topbar-item topbar-whatsapp">
<i class="fab fa-whatsapp me-1"></i>
<span class="d-none d-md-inline">WhatsApp</span>
</a>
@endif
@if($siteEmail)
<a href="mailto:{{ $siteEmail }}" class="topbar-item d-none d-lg-inline-flex">
<i class="fas fa-envelope me-1"></i>
<span>{{ $siteEmail }}</span>
</a>
@endif
@if($siteBusinessHours)
<span class="topbar-item d-none d-xl-inline-flex">
<i class="far fa-clock me-1"></i>
<span>{{ $siteBusinessHours }}</span>
</span>
@endif
</div>
</div>
{{-- Redes sociais --}}
<div class="col-lg-4 text-end">
<div class="topbar-social">
@if($siteFacebook)
<a href="{{ $siteFacebook }}" target="_blank" rel="noopener" aria-label="Facebook">
<i class="fab fa-facebook-f"></i>
</a>
@endif
@if($siteInstagram)
<a href="{{ $siteInstagram }}" target="_blank" rel="noopener" aria-label="Instagram">
<i class="fab fa-instagram"></i>
</a>
@endif
@if($siteLinkedin)
<a href="{{ $siteLinkedin }}" target="_blank" rel="noopener" aria-label="LinkedIn">
<i class="fab fa-linkedin-in"></i>
</a>
@endif
@if($siteYoutube)
<a href="{{ $siteYoutube }}" target="_blank" rel="noopener" aria-label="YouTube">
<i class="fab fa-youtube"></i>
</a>
@endif
</div>
</div>
</div>
</div>
</div>
{{-- Navbar principal --}}
<nav class="navbar navbar-expand-lg" aria-label="Navegacao principal">
<div class="container">
{{-- Logo --}}
<a class="navbar-brand" href="/" aria-label="Pagina inicial - {{ $siteName }}">
@if($siteLogo)
<img src="{{ $siteLogo }}" alt="{{ $siteName }}" height="50" class="logo-img">
@else
<span class="logo-text">{{ $siteName }}</span>
@endif
</a>
{{-- Botao mobile --}}
<button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar"
aria-controls="mainNavbar" aria-expanded="false" aria-label="Abrir menu">
<span class="navbar-toggler-icon"></span>
</button>
{{-- Menu --}}
<div class="collapse navbar-collapse" id="mainNavbar">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="/">Início</a>
</li>
{{-- [COMPONENT:NAV_ITEMS] --}}
</ul>
{{-- Busca --}}
<div class="navbar-search ms-lg-3">
<x-front.search-box />
</div>
{{-- [COMPONENT:HEADER_UTILITY] --}}
{{-- CTA --}}
<div class="navbar-cta ms-lg-3">
<a href="/contato" class="btn btn-primary btn-sm">
<i class="fas fa-envelope me-1"></i> Fale Conosco
</a>
</div>
</div>
</div>
</nav>
</header>
{{-- Newsletter --}}
<section style="background: var(--site-background-alt); padding: 3rem 0;">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 mb-3 mb-lg-0">
<h3 style="margin-bottom: 0.25rem;">Newsletter</h3>
<p class="text-muted mb-0">Assine e receba nossas novidades em primeira mao.</p>
</div>
<div class="col-lg-6">
<x-front.newsletter-form layout="inline" />
</div>
</div>
</div>
</section>
{{-- Footer completo para template com Topbar --}}
<footer class="site-footer" role="contentinfo" itemscope itemtype="https://schema.org/Organization">
<div class="container">
{{-- Grid principal --}}
<div class="row gy-4 gy-lg-0">
{{-- Coluna 1: Sobre --}}
<div class="col-lg-4 col-md-6">
<div class="footer-brand mb-3">
@if($siteLogoFooter ?? $siteLogo)
<img src="{{ $siteLogoFooter ?? $siteLogo }}" alt="{{ $siteName }}" height="40" class="footer-logo" itemprop="logo">
@else
<h5 class="footer-title" itemprop="name">{{ $siteName }}</h5>
@endif
</div>
<p class="footer-about" itemprop="description">{{ $footerAbout }}</p>
{{-- Redes Sociais --}}
@if($footerShowSocial)
<div class="footer-social mt-4">
@if($siteFacebook)
<a href="{{ $siteFacebook }}" target="_blank" rel="noopener" class="social-link" aria-label="Facebook" itemprop="sameAs">
<i class="fab fa-facebook-f"></i>
</a>
@endif
@if($siteInstagram)
<a href="{{ $siteInstagram }}" target="_blank" rel="noopener" class="social-link" aria-label="Instagram" itemprop="sameAs">
<i class="fab fa-instagram"></i>
</a>
@endif
@if($siteLinkedin)
<a href="{{ $siteLinkedin }}" target="_blank" rel="noopener" class="social-link" aria-label="LinkedIn" itemprop="sameAs">
<i class="fab fa-linkedin-in"></i>
</a>
@endif
@if($siteYoutube)
<a href="{{ $siteYoutube }}" target="_blank" rel="noopener" class="social-link" aria-label="YouTube" itemprop="sameAs">
<i class="fab fa-youtube"></i>
</a>
@endif
</div>
@endif
</div>
{{-- Coluna 2: Links Rapidos --}}
<div class="col-lg-2 col-md-6">
<h6 class="footer-heading">Links</h6>
<nav aria-label="Links do rodape">
<ul class="footer-links">
<li><a href="/">Inicio</a></li>
<li><a href="/sobre">Sobre Nos</a></li>
<li><a href="/contato">Contato</a></li>
</ul>
</nav>
</div>
{{-- Coluna 3: Contato --}}
@if($footerShowContact)
<div class="col-lg-3 col-md-6" itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
<h6 class="footer-heading">Contato</h6>
<ul class="footer-contact">
@if($sitePhone)
<li>
<i class="fas fa-phone-alt"></i>
<a href="tel:{{ preg_replace('/[^0-9+]/', '', $sitePhone) }}" itemprop="telephone">{{ $sitePhone }}</a>
</li>
@endif
@if($siteWhatsapp)
<li>
<i class="fab fa-whatsapp"></i>
<a href="{{ $siteWhatsappLink }}" target="_blank" rel="noopener">WhatsApp</a>
</li>
@endif
@if($siteEmail)
<li>
<i class="fas fa-envelope"></i>
<a href="mailto:{{ $siteEmail }}" itemprop="email">{{ $siteEmail }}</a>
</li>
@endif
@if($siteCity && $siteState)
<li>
<i class="fas fa-map-marker-alt"></i>
<span>
<span itemprop="addressLocality">{{ $siteCity }}</span> -
<span itemprop="addressRegion">{{ $siteState }}</span>
</span>
</li>
@endif
</ul>
</div>
@endif
{{-- Coluna 4: Horario --}}
<div class="col-lg-3 col-md-6">
@if($siteBusinessHours)
<h6 class="footer-heading">Horario</h6>
<p class="footer-hours">
<i class="far fa-clock me-2"></i>{{ $siteBusinessHours }}
</p>
@endif
{{-- CTA --}}
@if($siteWhatsappLink)
<div class="footer-cta mt-4">
<a href="{{ $siteWhatsappLink }}" class="btn btn-success btn-sm w-100" target="_blank" rel="noopener">
<i class="fab fa-whatsapp me-1"></i> Falar pelo WhatsApp
</a>
</div>
@endif
</div>
</div>
{{-- [COMPONENT:FOOTER_ITEMS] --}}
{{-- Linha inferior --}}
<div class="footer-bottom">
<div class="row align-items-center">
<div class="col-md-6 text-center text-md-start">
<p class="footer-copyright mb-0">
{!! $footerCopyright !!}
</p>
</div>
<div class="col-md-6 text-center text-md-end">
<nav class="footer-legal" aria-label="Links legais">
@if($privacyPolicyUrl)
<a href="{{ $privacyPolicyUrl }}">Privacidade</a>
@endif
@if($termsUrl)
<a href="{{ $termsUrl }}">Termos de Uso</a>
@endif
</nav>
</div>
</div>
</div>
</div>
</footer>
/**
* CSS - Com Topbar
* Barra superior com contato e redes sociais
*/
/* ========================================
TOPBAR
======================================== */
.header-topbar {
background-color: var(--site-header-accent);
font-size: 0.85rem;
}
.header-topbar .topbar-item {
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
display: inline-flex;
align-items: center;
transition: color 0.2s ease;
}
.header-topbar .topbar-item:hover {
color: #fff;
}
.header-topbar .topbar-whatsapp {
color: #25d366;
}
.header-topbar .topbar-whatsapp:hover {
color: #128c7e;
}
.header-topbar .topbar-social {
display: flex;
gap: 1rem;
justify-content: flex-end;
}
.header-topbar .topbar-social a {
color: rgba(255, 255, 255, 0.7);
transition: color 0.2s ease;
}
.header-topbar .topbar-social a:hover {
color: #fff;
}
/* ========================================
NAVBAR PRINCIPAL
======================================== */
.site-header.header-topbar-style {
position: sticky;
top: 0;
z-index: 1030;
background-color: var(--site-header-bg);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.site-header .header-topbar {
transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
max-height: 60px;
overflow: hidden;
}
.site-header .navbar {
padding: 0.75rem 0;
transition: padding 0.3s ease;
}
.site-header .logo-img {
max-height: 50px;
width: auto;
transition: max-height 0.3s ease;
}
/* --- Scrolled: header compacto --- */
.site-header.scrolled .header-topbar {
max-height: 0;
padding-top: 0;
padding-bottom: 0;
opacity: 0;
}
.site-header.scrolled .navbar {
padding: 0.25rem 0;
}
.site-header.scrolled .logo-img {
max-height: 36px;
}
.site-header .logo-text {
color: var(--site-header-text, var(--site-header-accent));
font-weight: 700;
font-size: 1.5rem;
}
.site-header .nav-link {
color: var(--site-header-text, var(--site-text));
font-weight: 500;
padding: 0.5rem 1rem !important;
position: relative;
transition: color 0.2s ease;
}
.site-header .nav-link:hover,
.site-header .nav-link.active {
color: var(--site-header-text-hover, var(--site-header-accent));
}
.site-header .nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background-color: var(--site-header-accent);
transition: width 0.3s ease, left 0.3s ease;
}
.site-header .nav-link:hover::after,
.site-header .nav-link.active::after {
width: 100%;
left: 0;
}
.site-header .navbar-cta .btn {
font-weight: 600;
}
/* Mobile */
@media (max-width: 991.98px) {
.site-header .navbar-collapse {
padding: 1rem 0;
}
.site-header .navbar-nav {
border-top: 1px solid var(--site-border, #dee2e6);
padding-top: 1rem;
margin-top: 0.5rem;
}
.site-header .nav-link::after {
display: none;
}
.site-header .navbar-cta {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--site-border, #dee2e6);
}
.site-header .navbar-cta .btn {
width: 100%;
}
}
/* ========================================
FOOTER
======================================== */
.site-footer {
background-color: var(--site-footer-bg);
color: rgba(255, 255, 255, 0.85);
padding: 4rem 0 0;
margin-top: auto;
}
.site-footer .footer-title {
color: var(--site-footer-heading, #fff);
font-weight: 700;
font-size: 1.5rem;
}
.site-footer .footer-about {
color: var(--site-footer-text, rgba(255, 255, 255, 0.7));
font-size: 0.95rem;
line-height: 1.7;
}
.site-footer .footer-heading {
color: var(--site-footer-heading, #fff);
font-weight: 600;
font-size: 1rem;
margin-bottom: 1.25rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.site-footer .footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.site-footer .footer-links li {
margin-bottom: 0.75rem;
}
.site-footer .footer-links a {
color: var(--site-footer-text, rgba(255, 255, 255, 0.7));
text-decoration: none;
transition: color 0.2s ease, padding-left 0.2s ease;
}
.site-footer .footer-links a:hover {
color: #fff;
padding-left: 5px;
}
.site-footer .footer-contact {
list-style: none;
padding: 0;
margin: 0;
}
.site-footer .footer-contact li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 0.875rem;
color: var(--site-footer-text, rgba(255, 255, 255, 0.7));
}
.site-footer .footer-contact li i {
color: var(--site-footer-accent);
width: 16px;
margin-top: 4px;
}
.site-footer .footer-contact a {
color: var(--site-footer-text, rgba(255, 255, 255, 0.7));
text-decoration: none;
}
.site-footer .footer-contact a:hover {
color: #fff;
}
.site-footer .footer-hours {
color: var(--site-footer-text, rgba(255, 255, 255, 0.7));
font-size: 0.95rem;
}
/* Social Links */
.site-footer .footer-social {
display: flex;
gap: 0.75rem;
}
.site-footer .social-link {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 50%;
color: #fff;
transition: background-color 0.3s ease, transform 0.3s ease;
}
.site-footer .social-link:hover {
background-color: var(--site-footer-accent);
color: #fff;
transform: translateY(-3px);
}
/* Footer Bottom */
.site-footer .footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 1.5rem 0;
margin-top: 3rem;
}
.site-footer .footer-copyright {
color: rgba(255, 255, 255, 0.5);
font-size: 0.875rem;
}
.site-footer .footer-legal {
display: flex;
gap: 1.5rem;
justify-content: flex-end;
}
.site-footer .footer-legal a {
color: rgba(255, 255, 255, 0.5);
font-size: 0.875rem;
text-decoration: none;
}
.site-footer .footer-legal a:hover {
color: #fff;
}
/* ========================================
ANIMACOES
======================================== */
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
width: 45px;
height: 45px;
background-color: var(--site-primary);
color: #fff;
border: none;
border-radius: 50%;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
transform: translateY(-3px);
}
dark-elegantTema escuro sofisticado com detalhes dourados. Header com efeito blur e footer premium.
Header Dark Elegante com efeito blur. O header utiliza a classe site-header header-dark como elemento raiz. O conteudo do header esta dentro de um .container do Bootstrap, limitando a largura maxima. O conteudo das paginas e inserido dentro de <main> com classe site-content dark-theme. O placeholder [[CONTENT]] e substituido pelo conteudo renderizado de cada pagina. Rodape: Newsletter. Possui markers para insercao automatica de componentes: NAV_ITEMS, HEADER_UTILITY, FOOTER_ITEMS. Esses markers permitem que o sistema insira menus de modulos, utilitarios e itens do rodape automaticamente. Utiliza os componentes Blade: x-front.search-box, x-front.newsletter-form. Comportamentos JavaScript incluidos: efeito de scroll no header, botao voltar ao topo, animacoes de entrada (fade-in), scroll suave. Recomendado para: Restaurantes, Bares, Luxo, Eventos.
<header>
site-header header-dark
<main>
site-content dark-theme
<div>
container text-center
{{-- Header Dark Elegante com efeito blur --}}
<header class="site-header header-dark" role="banner">
<nav class="navbar navbar-expand-lg navbar-dark" aria-label="Navegacao principal">
<div class="container">
{{-- Logo --}}
<a class="navbar-brand" href="/" aria-label="Pagina inicial - {{ $siteName }}">
@if($siteLogo)
<img src="{{ $siteLogo }}" alt="{{ $siteName }}" height="45" class="logo-img">
@else
<span class="logo-text">{{ $siteName }}</span>
@endif
</a>
{{-- Botao mobile --}}
<button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar"
aria-controls="mainNavbar" aria-expanded="false" aria-label="Abrir menu">
<span class="navbar-toggler-icon"></span>
</button>
{{-- Menu --}}
<div class="collapse navbar-collapse" id="mainNavbar">
<ul class="navbar-nav mx-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="/">Início</a>
</li>
{{-- [COMPONENT:NAV_ITEMS] --}}
</ul>
{{-- Busca --}}
<div class="navbar-search ms-lg-3">
<x-front.search-box />
</div>
{{-- [COMPONENT:HEADER_UTILITY] --}}
{{-- CTA com estilo gold --}}
<div class="navbar-cta ms-lg-3">
<a href="/contato" class="btn btn-gold btn-sm">
Reservar Mesa
</a>
</div>
</div>
</div>
</nav>
</header>
{{-- Newsletter --}}
<section style="background: var(--site-primary); padding: 3rem 0; color: #fff;">
<div class="container text-center">
<h3 style="color: #fff; margin-bottom: 0.5rem;">Exclusividades para Voce</h3>
<p style="opacity: 0.85; margin-bottom: 1.5rem;">Cadastre-se e receba novidades em primeira mao.</p>
<div style="max-width: 500px; margin: 0 auto;">
<x-front.newsletter-form layout="inline" theme="dark" />
</div>
</div>
</section>
{{-- Footer Dark Elegante --}}
<footer class="site-footer footer-dark" role="contentinfo" itemscope itemtype="https://schema.org/Organization">
<div class="container">
{{-- Separador decorativo --}}
<div class="footer-divider">
<span class="divider-icon"><i class="fas fa-star"></i></span>
</div>
{{-- Grid principal --}}
<div class="row gy-4 text-center text-lg-start">
{{-- Coluna 1: Logo e sobre --}}
<div class="col-lg-4">
<div class="footer-brand mb-3">
@if($siteLogoFooter ?? $siteLogo)
<img src="{{ $siteLogoFooter ?? $siteLogo }}" alt="{{ $siteName }}" height="50" class="footer-logo" itemprop="logo">
@else
<h4 class="footer-title gold-text" itemprop="name">{{ $siteName }}</h4>
@endif
</div>
<p class="footer-about" itemprop="description">{{ $footerAbout }}</p>
</div>
{{-- Coluna 2: Horarios --}}
<div class="col-lg-4">
<h5 class="footer-heading gold-text">Horario de Funcionamento</h5>
@if($siteBusinessHours)
<p class="footer-hours">{{ $siteBusinessHours }}</p>
@else
<ul class="footer-schedule">
<li>Segunda a Quinta: 18h - 00h</li>
<li>Sexta e Sabado: 18h - 02h</li>
<li>Domingo: 12h - 22h</li>
</ul>
@endif
</div>
{{-- Coluna 3: Contato --}}
<div class="col-lg-4" itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
<h5 class="footer-heading gold-text">Contato</h5>
<ul class="footer-contact">
@if($sitePhone)
<li>
<i class="fas fa-phone-alt gold-text"></i>
<a href="tel:{{ preg_replace('/[^0-9+]/', '', $sitePhone) }}" itemprop="telephone">{{ $sitePhone }}</a>
</li>
@endif
@if($siteWhatsapp)
<li>
<i class="fab fa-whatsapp gold-text"></i>
<a href="{{ $siteWhatsappLink }}" target="_blank" rel="noopener">WhatsApp</a>
</li>
@endif
@if($siteFullAddress)
<li>
<i class="fas fa-map-marker-alt gold-text"></i>
<span>{{ $siteFullAddress }}</span>
</li>
@endif
</ul>
{{-- Redes Sociais --}}
@if($footerShowSocial)
<div class="footer-social mt-4">
@if($siteInstagram)
<a href="{{ $siteInstagram }}" target="_blank" rel="noopener" class="social-link" aria-label="Instagram" itemprop="sameAs">
<i class="fab fa-instagram"></i>
</a>
@endif
@if($siteFacebook)
<a href="{{ $siteFacebook }}" target="_blank" rel="noopener" class="social-link" aria-label="Facebook" itemprop="sameAs">
<i class="fab fa-facebook-f"></i>
</a>
@endif
@if($siteYoutube)
<a href="{{ $siteYoutube }}" target="_blank" rel="noopener" class="social-link" aria-label="YouTube" itemprop="sameAs">
<i class="fab fa-youtube"></i>
</a>
@endif
</div>
@endif
</div>
</div>
{{-- [COMPONENT:FOOTER_ITEMS] --}}
{{-- Copyright --}}
<div class="footer-bottom">
<p class="footer-copyright mb-0">
{!! $footerCopyright !!}
</p>
@if($privacyPolicyUrl || $termsUrl)
<nav class="footer-legal">
@if($privacyPolicyUrl)
<a href="{{ $privacyPolicyUrl }}">Privacidade</a>
@endif
@if($termsUrl)
<a href="{{ $termsUrl }}">Termos</a>
@endif
</nav>
@endif
</div>
</div>
</footer>
/**
* CSS - Dark Elegante
* Tema escuro sofisticado com detalhes dourados
*/
:root {
--dark-bg: #0d0d0d;
--dark-surface: #1a1a1a;
--dark-surface-hover: #252525;
--gold: var(--site-primary, #d4af37);
--gold-light: color-mix(in srgb, var(--site-primary, #d4af37) 70%, white);
--gold-dark: color-mix(in srgb, var(--site-primary, #d4af37) 70%, black);
--text-light: rgba(255, 255, 255, 0.9);
--text-muted: rgba(255, 255, 255, 0.6);
}
/* ========================================
TEMA ESCURO - OVERRIDE GLOBAL
======================================== */
body {
background-color: var(--dark-bg) !important;
color: var(--text-light) !important;
}
.dark-theme {
background-color: var(--dark-bg);
min-height: 50vh;
}
.gold-text {
color: var(--gold) !important;
}
/* ========================================
BOTAO GOLD
======================================== */
.btn-gold {
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
border: none;
color: #000 !important;
font-weight: 600;
padding: 0.6rem 1.5rem;
transition: all 0.3s ease;
}
.btn-gold:hover {
background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(212, 175, 55, 0.3);
color: #000 !important;
}
/* ========================================
HEADER DARK
======================================== */
.site-header.header-dark {
background-color: rgba(13, 13, 13, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(212, 175, 55, 0.2);
position: sticky;
top: 0;
z-index: 1030;
}
.site-header.header-dark .logo-text {
color: var(--site-header-text, var(--site-header-accent, #d4af37));
font-size: 1.75rem;
font-weight: 300;
letter-spacing: 3px;
text-transform: uppercase;
}
.site-header.header-dark .nav-link {
color: var(--site-header-text, var(--text-light)) !important;
font-weight: 400;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 0.85rem;
padding: 0.75rem 1rem !important;
position: relative;
transition: color 0.3s ease;
}
.site-header.header-dark .nav-link::before {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 1px;
background: var(--site-header-accent, #d4af37);
transition: all 0.3s ease;
}
.site-header.header-dark .nav-link:hover,
.site-header.header-dark .nav-link.active {
color: var(--site-header-text-hover, var(--site-header-accent, #d4af37)) !important;
}
.site-header.header-dark .nav-link:hover::before,
.site-header.header-dark .nav-link.active::before {
width: 100%;
left: 0;
}
/* ========================================
FOOTER DARK
======================================== */
.site-footer.footer-dark {
background-color: var(--dark-surface);
color: var(--text-light);
padding: 4rem 0 0;
border-top: 1px solid rgba(212, 175, 55, 0.2);
}
.footer-divider {
text-align: center;
margin-bottom: 3rem;
}
.footer-divider .divider-icon {
display: inline-block;
padding: 0 2rem;
position: relative;
color: var(--site-footer-accent, #d4af37);
}
.footer-divider .divider-icon::before,
.footer-divider .divider-icon::after {
content: '';
position: absolute;
top: 50%;
width: 100px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--site-footer-accent, #d4af37));
}
.footer-divider .divider-icon::before {
right: 100%;
background: linear-gradient(90deg, transparent, var(--site-footer-accent, #d4af37));
}
.footer-divider .divider-icon::after {
left: 100%;
background: linear-gradient(90deg, var(--site-footer-accent, #d4af37), transparent);
}
.site-footer.footer-dark .footer-title {
font-weight: 300;
letter-spacing: 2px;
text-transform: uppercase;
}
.site-footer.footer-dark .footer-heading {
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 0.9rem;
margin-bottom: 1.5rem;
}
.site-footer.footer-dark .footer-about,
.site-footer.footer-dark .footer-hours {
color: var(--site-footer-text, var(--text-muted));
line-height: 1.8;
}
.site-footer.footer-dark .footer-schedule {
list-style: none;
padding: 0;
color: var(--site-footer-text, var(--text-muted));
}
.site-footer.footer-dark .footer-schedule li {
margin-bottom: 0.5rem;
}
.site-footer.footer-dark .footer-contact {
list-style: none;
padding: 0;
}
.site-footer.footer-dark .footer-contact li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 1rem;
color: var(--site-footer-text, var(--text-muted));
}
.site-footer.footer-dark .footer-contact a {
color: var(--site-footer-text, var(--text-muted));
text-decoration: none;
transition: color 0.3s ease;
}
.site-footer.footer-dark .footer-contact a:hover {
color: var(--site-footer-accent, #d4af37);
}
/* Social Links */
.site-footer.footer-dark .footer-social {
display: flex;
justify-content: center;
gap: 1rem;
}
@media (min-width: 992px) {
.site-footer.footer-dark .footer-social {
justify-content: flex-start;
}
}
.site-footer.footer-dark .social-link {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
border: 1px solid var(--site-footer-accent, #d4af37);
border-radius: 50%;
color: var(--site-footer-accent, #d4af37);
transition: all 0.3s ease;
}
.site-footer.footer-dark .social-link:hover {
background-color: var(--site-footer-accent, #d4af37);
color: #000;
transform: translateY(-3px);
}
/* Footer Bottom */
.site-footer.footer-dark .footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 1.5rem 0;
margin-top: 3rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.site-footer.footer-dark .footer-copyright {
color: var(--text-muted);
font-size: 0.85rem;
}
.site-footer.footer-dark .footer-legal {
display: flex;
gap: 1.5rem;
}
.site-footer.footer-dark .footer-legal a {
color: var(--text-muted);
font-size: 0.85rem;
text-decoration: none;
transition: color 0.3s ease;
}
.site-footer.footer-dark .footer-legal a:hover {
color: var(--site-footer-accent, #d4af37);
}
/* ========================================
ANIMACOES
======================================== */
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* Back to top com estilo gold */
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
color: #000;
border: none;
border-radius: 50%;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(212, 175, 55, 0.4);
}
glassmorphismDesign moderno com efeito de vidro fosco. Cards translucidos e visual futurista.
Header Glassmorphism com efeito vidro. O header utiliza a classe site-header header-glass como elemento raiz. O conteudo do header esta dentro de um .container do Bootstrap, limitando a largura maxima. O conteudo das paginas e inserido dentro de <main> com classe site-content glass-content. O placeholder [[CONTENT]] e substituido pelo conteudo renderizado de cada pagina. Rodape: Newsletter. Possui markers para insercao automatica de componentes: NAV_ITEMS, HEADER_UTILITY, FOOTER_ITEMS. Esses markers permitem que o sistema insira menus de modulos, utilitarios e itens do rodape automaticamente. Utiliza os componentes Blade: x-front.search-box, x-front.newsletter-form. Comportamentos JavaScript incluidos: efeito de scroll no header, botao voltar ao topo, animacoes de entrada (fade-in), scroll suave. Recomendado para: Tech, Startups, Apps, Inovacao.
<header>
site-header header-glass
<main>
site-content glass-content
<div>
container text-center
{{-- Header Glassmorphism com efeito vidro --}}
<header class="site-header header-glass" role="banner">
<nav class="navbar navbar-expand-lg" aria-label="Navegacao principal">
<div class="container">
{{-- Logo --}}
<a class="navbar-brand" href="/" aria-label="Pagina inicial - {{ $siteName }}">
@if($siteLogo)
<img src="{{ $siteLogo }}" alt="{{ $siteName }}" height="40" class="logo-img">
@else
<span class="logo-text">{{ $siteName }}</span>
@endif
</a>
{{-- Botao mobile --}}
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar"
aria-controls="mainNavbar" aria-expanded="false" aria-label="Abrir menu">
<i class="fas fa-bars"></i>
</button>
{{-- Menu --}}
<div class="collapse navbar-collapse" id="mainNavbar">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="/">Início</a>
</li>
{{-- [COMPONENT:NAV_ITEMS] --}}
</ul>
{{-- Busca --}}
<div class="navbar-search ms-lg-3">
<x-front.search-box />
</div>
{{-- [COMPONENT:HEADER_UTILITY] --}}
{{-- CTA --}}
<div class="navbar-cta ms-lg-3">
<a href="/contato" class="btn btn-glass-primary btn-sm">
Comecar Agora <i class="fas fa-arrow-right ms-1"></i>
</a>
</div>
</div>
</div>
</nav>
</header>
{{-- Background com gradiente --}}
<div class="glass-background"></div>
{{-- Newsletter --}}
<section style="background: var(--site-background-alt); padding: 3rem 0;">
<div class="container text-center">
<h3 style="margin-bottom: 0.5rem;">Fique Atualizado</h3>
<p class="text-muted mb-3">Receba novidades e atualizacoes no seu e-mail.</p>
<div style="max-width: 500px; margin: 0 auto;">
<x-front.newsletter-form layout="inline" />
</div>
</div>
</section>
{{-- Footer Glassmorphism --}}
<footer class="site-footer footer-glass" role="contentinfo" itemscope itemtype="https://schema.org/Organization">
<div class="container">
<div class="footer-glass-card">
<div class="row gy-4">
{{-- Coluna 1: Logo e sobre --}}
<div class="col-lg-4 col-md-6">
<div class="footer-brand mb-3">
@if($siteLogoFooter ?? $siteLogo)
<img src="{{ $siteLogoFooter ?? $siteLogo }}" alt="{{ $siteName }}" height="40" class="footer-logo" itemprop="logo">
@else
<h5 class="footer-title" itemprop="name">{{ $siteName }}</h5>
@endif
</div>
<p class="footer-about" itemprop="description">{{ $footerAbout }}</p>
{{-- Redes Sociais --}}
@if($footerShowSocial)
<div class="footer-social mt-4">
@if($siteTwitter)
<a href="{{ $siteTwitter }}" target="_blank" rel="noopener" class="social-link" aria-label="Twitter" itemprop="sameAs">
<i class="fab fa-x-twitter"></i>
</a>
@endif
@if($siteLinkedin)
<a href="{{ $siteLinkedin }}" target="_blank" rel="noopener" class="social-link" aria-label="LinkedIn" itemprop="sameAs">
<i class="fab fa-linkedin-in"></i>
</a>
@endif
@if($siteInstagram)
<a href="{{ $siteInstagram }}" target="_blank" rel="noopener" class="social-link" aria-label="Instagram" itemprop="sameAs">
<i class="fab fa-instagram"></i>
</a>
@endif
@if($siteFacebook)
<a href="{{ $siteFacebook }}" target="_blank" rel="noopener" class="social-link" aria-label="Facebook" itemprop="sameAs">
<i class="fab fa-facebook-f"></i>
</a>
@endif
</div>
@endif
</div>
{{-- Coluna 2: Links --}}
<div class="col-lg-2 col-md-6">
<h6 class="footer-heading">Links</h6>
<ul class="footer-links">
<li><a href="/">Inicio</a></li>
<li><a href="/sobre">Sobre nos</a></li>
<li><a href="/contato">Contato</a></li>
</ul>
</div>
{{-- Coluna 3: Contato --}}
@if($footerShowContact)
<div class="col-lg-2 col-md-6">
<h6 class="footer-heading">Contato</h6>
<ul class="footer-contact">
@if($siteEmail)
<li>
<a href="mailto:{{ $siteEmail }}" itemprop="email">{{ $siteEmail }}</a>
</li>
@endif
@if($sitePhone)
<li>
<a href="tel:{{ preg_replace('/[^0-9+]/', '', $sitePhone) }}" itemprop="telephone">{{ $sitePhone }}</a>
</li>
@endif
</ul>
</div>
@endif
</div>
{{-- [COMPONENT:FOOTER_ITEMS] --}}
{{-- Copyright --}}
<div class="footer-bottom">
<div class="row align-items-center">
<div class="col-md-6 text-center text-md-start">
<p class="footer-copyright mb-0">
{!! $footerCopyright !!}
</p>
</div>
<div class="col-md-6 text-center text-md-end">
<nav class="footer-legal">
@if($privacyPolicyUrl)
<a href="{{ $privacyPolicyUrl }}">Privacidade</a>
@endif
@if($termsUrl)
<a href="{{ $termsUrl }}">Termos</a>
@endif
</nav>
</div>
</div>
</div>
</div>
</div>
</footer>
/**
* CSS - Glassmorphism
* Efeito de vidro fosco moderno
*/
:root {
--glass-bg: rgba(255, 255, 255, 0.1);
--glass-border: rgba(255, 255, 255, 0.2);
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
--gradient-start: var(--site-primary, #667eea);
--gradient-end: color-mix(in srgb, var(--site-primary, #667eea) 50%, #764ba2);
}
/* ========================================
BACKGROUND GRADIENTE ANIMADO
======================================== */
.glass-background {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 50%, color-mix(in srgb, var(--site-primary, #667eea) 30%, #f093fb) 100%);
background-size: 400% 400%;
animation: gradientShift 15s ease infinite;
z-index: -1;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Orbs decorativos */
.glass-background::before,
.glass-background::after {
content: '';
position: absolute;
border-radius: 50%;
filter: blur(80px);
}
.glass-background::before {
width: 500px;
height: 500px;
background: rgba(255, 255, 255, 0.3);
top: -100px;
right: -100px;
}
.glass-background::after {
width: 400px;
height: 400px;
background: rgba(118, 75, 162, 0.4);
bottom: -100px;
left: -100px;
}
/* ========================================
EFEITO GLASS
======================================== */
.glass-card {
background: var(--glass-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
border-radius: 16px;
box-shadow: var(--glass-shadow);
}
/* ========================================
BOTAO GLASS
======================================== */
.btn-glass-primary {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
color: #fff !important;
font-weight: 600;
padding: 0.6rem 1.5rem;
border-radius: 50px;
transition: all 0.3s ease;
}
.btn-glass-primary:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
color: #fff !important;
}
/* ========================================
HEADER GLASS
======================================== */
.site-header.header-glass {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1030;
background: var(--glass-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--glass-border);
}
.site-header.header-glass .navbar {
padding: 1rem 0;
}
.site-header.header-glass .logo-text {
color: var(--site-header-text, #fff);
font-weight: 700;
font-size: 1.5rem;
}
.site-header.header-glass .navbar-toggler {
border: 1px solid var(--glass-border);
color: #fff;
padding: 0.5rem 0.75rem;
}
.site-header.header-glass .nav-link {
color: var(--site-header-text, rgba(255, 255, 255, 0.9)) !important;
font-weight: 500;
padding: 0.5rem 1rem !important;
transition: all 0.3s ease;
border-radius: 8px;
}
.site-header.header-glass .nav-link:hover,
.site-header.header-glass .nav-link.active {
color: var(--site-header-text-hover, #fff) !important;
background: rgba(255, 255, 255, 0.15);
}
/* Padding para compensar header fixo */
.glass-content {
padding-top: 100px;
min-height: 60vh;
position: relative;
z-index: 1;
}
/* ========================================
FOOTER GLASS
======================================== */
.site-footer.footer-glass {
background: transparent;
padding: 4rem 0 2rem;
position: relative;
z-index: 1;
}
.footer-glass-card {
background: var(--glass-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
border-radius: 24px;
padding: 3rem;
box-shadow: var(--glass-shadow);
}
.site-footer.footer-glass .footer-title {
color: var(--site-footer-heading, #fff);
font-weight: 700;
}
.site-footer.footer-glass .footer-about {
color: var(--site-footer-text, rgba(255, 255, 255, 0.7));
line-height: 1.8;
}
.site-footer.footer-glass .footer-heading {
color: var(--site-footer-heading, #fff);
font-weight: 600;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 1.25rem;
}
.site-footer.footer-glass .footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.site-footer.footer-glass .footer-links li {
margin-bottom: 0.75rem;
}
.site-footer.footer-glass .footer-links a,
.site-footer.footer-glass .footer-contact a {
color: var(--site-footer-text, rgba(255, 255, 255, 0.7));
text-decoration: none;
transition: all 0.3s ease;
}
.site-footer.footer-glass .footer-links a:hover,
.site-footer.footer-glass .footer-contact a:hover {
color: #fff;
padding-left: 5px;
}
.site-footer.footer-glass .footer-contact {
list-style: none;
padding: 0;
}
.site-footer.footer-glass .footer-contact li {
margin-bottom: 0.5rem;
}
/* Social Links */
.site-footer.footer-glass .footer-social {
display: flex;
gap: 0.75rem;
}
.site-footer.footer-glass .social-link {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
color: #fff;
transition: all 0.3s ease;
}
.site-footer.footer-glass .social-link:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-3px);
color: #fff;
}
/* Footer Bottom */
.site-footer.footer-glass .footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 1.5rem;
margin-top: 2rem;
}
.site-footer.footer-glass .footer-copyright {
color: rgba(255, 255, 255, 0.5);
font-size: 0.85rem;
}
.site-footer.footer-glass .footer-legal {
display: flex;
gap: 1.5rem;
}
.site-footer.footer-glass .footer-legal a {
color: rgba(255, 255, 255, 0.5);
font-size: 0.85rem;
text-decoration: none;
}
.site-footer.footer-glass .footer-legal a:hover {
color: #fff;
}
/* ========================================
ANIMACOES
======================================== */
.fade-in {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* Back to top glass */
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
background: var(--glass-bg);
backdrop-filter: blur(10px);
border: 1px solid var(--glass-border);
color: #fff;
border-radius: 50%;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-5px);
}
magazineLayout estilo revista com mega menu de categorias. Ideal para blogs e portais de conteudo.
Header Magazine com mega menu. O header utiliza a classe site-header header-magazine como elemento raiz. O conteudo do header esta dentro de um .container do Bootstrap, limitando a largura maxima. O conteudo das paginas e inserido dentro de <main> com classe site-content magazine-content. O placeholder [[CONTENT]] e substituido pelo conteudo renderizado de cada pagina. Rodape: Footer Magazine. Possui markers para insercao automatica de componentes: NAV_ITEMS, HEADER_UTILITY, FOOTER_ITEMS. Esses markers permitem que o sistema insira menus de modulos, utilitarios e itens do rodape automaticamente. Utiliza os componentes Blade: x-front.search-box, x-front.newsletter-form. Comportamentos JavaScript incluidos: efeito de scroll no header, botao voltar ao topo, animacoes de entrada (fade-in), scroll suave. Recomendado para: Blogs, Noticias, Revistas, Portais.
<header>
site-header header-magazine
<main>
site-content magazine-content
<footer>
site-footer footer-magazine
{{-- Header Magazine com mega menu --}}
<header class="site-header header-magazine" role="banner">
{{-- Topbar com data e redes --}}
<div class="header-topbar-magazine">
<div class="container">
<div class="row align-items-center py-2">
<div class="col-auto">
<span class="topbar-date">
<i class="far fa-calendar-alt me-1"></i>
{{ date('d') }} de {{ ['Janeiro','Fevereiro','Marco','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'][date('n')-1] }}, {{ date('Y') }}
</span>
</div>
<div class="col text-end">
<div class="topbar-social">
@if($siteFacebook)
<a href="{{ $siteFacebook }}" target="_blank" rel="noopener" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
@endif
@if($siteTwitter)
<a href="{{ $siteTwitter }}" target="_blank" rel="noopener" aria-label="Twitter"><i class="fab fa-x-twitter"></i></a>
@endif
@if($siteInstagram)
<a href="{{ $siteInstagram }}" target="_blank" rel="noopener" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
@endif
@if($siteYoutube)
<a href="{{ $siteYoutube }}" target="_blank" rel="noopener" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
@endif
</div>
</div>
</div>
</div>
</div>
{{-- Logo area --}}
<div class="header-brand-area">
<div class="container text-center py-4">
<a href="/" aria-label="Pagina inicial - {{ $siteName }}">
@if($siteLogo)
<img src="{{ $siteLogo }}" alt="{{ $siteName }}" height="60" class="logo-img">
@else
<h1 class="logo-text mb-0">{{ $siteName }}</h1>
@endif
</a>
@if($siteTagline)
<p class="site-tagline mb-0">{{ $siteTagline }}</p>
@endif
</div>
</div>
{{-- Navbar com categorias --}}
<nav class="navbar navbar-expand-lg navbar-magazine" aria-label="Navegacao principal">
<div class="container">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar"
aria-controls="mainNavbar" aria-expanded="false" aria-label="Abrir menu">
<i class="fas fa-bars me-1"></i> Menu
</button>
<div class="collapse navbar-collapse" id="mainNavbar">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="/"><i class="fas fa-home me-1"></i> Início</a>
</li>
{{-- [COMPONENT:NAV_ITEMS] --}}
</ul>
{{-- Busca com live search --}}
<div class="header-search">
<x-front.search-box />
</div>
{{-- [COMPONENT:HEADER_UTILITY] --}}
</div>
</div>
</nav>
</header>
{{-- Footer Magazine --}}
<footer class="site-footer footer-magazine" role="contentinfo" itemscope itemtype="https://schema.org/Organization">
<div class="container">
<div class="row gy-4">
{{-- Coluna 1: Sobre --}}
<div class="col-lg-4 col-md-6">
<div class="footer-brand mb-3">
@if($siteLogoFooter ?? $siteLogo)
<img src="{{ $siteLogoFooter ?? $siteLogo }}" alt="{{ $siteName }}" height="40" class="footer-logo" itemprop="logo">
@else
<h5 class="footer-title" itemprop="name">{{ $siteName }}</h5>
@endif
</div>
<p class="footer-about" itemprop="description">{{ $footerAbout }}</p>
@if($footerShowSocial)
<div class="footer-social mt-3">
@if($siteFacebook)
<a href="{{ $siteFacebook }}" target="_blank" rel="noopener" class="social-link" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
@endif
@if($siteTwitter)
<a href="{{ $siteTwitter }}" target="_blank" rel="noopener" class="social-link" aria-label="Twitter"><i class="fab fa-x-twitter"></i></a>
@endif
@if($siteInstagram)
<a href="{{ $siteInstagram }}" target="_blank" rel="noopener" class="social-link" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
@endif
@if($siteYoutube)
<a href="{{ $siteYoutube }}" target="_blank" rel="noopener" class="social-link" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
@endif
</div>
@endif
</div>
{{-- Coluna 2: Links --}}
<div class="col-lg-2 col-md-6">
<h6 class="footer-heading">Links</h6>
<ul class="footer-links">
<li><a href="/">Inicio</a></li>
<li><a href="/sobre">Quem Somos</a></li>
<li><a href="/contato">Fale Conosco</a></li>
</ul>
</div>
{{-- Coluna 3: Newsletter --}}
<div class="col-lg-4 col-md-6">
<h6 class="footer-heading">Newsletter</h6>
<p class="footer-newsletter-text">Receba as principais noticias no seu e-mail.</p>
<x-front.newsletter-form layout="inline" />
</div>
</div>
{{-- [COMPONENT:FOOTER_ITEMS] --}}
{{-- Copyright --}}
<div class="footer-bottom">
<div class="row align-items-center">
<div class="col-md-6 text-center text-md-start">
<p class="footer-copyright mb-0">{!! $footerCopyright !!}</p>
</div>
<div class="col-md-6 text-center text-md-end">
<nav class="footer-legal">
@if($privacyPolicyUrl)
<a href="{{ $privacyPolicyUrl }}">Privacidade</a>
@endif
@if($termsUrl)
<a href="{{ $termsUrl }}">Termos</a>
@endif
</nav>
</div>
</div>
</div>
</div>
</footer>
/**
* CSS - Magazine
* Layout estilo revista/portal de noticias
*/
:root {
--magazine-red: var(--site-primary, #dc2626);
--magazine-dark: var(--site-footer-bg, #1f2937);
}
/* ========================================
TOPBAR
======================================== */
.header-topbar-magazine {
background-color: var(--magazine-dark);
font-size: 0.8rem;
}
.header-topbar-magazine .topbar-date {
color: rgba(255, 255, 255, 0.8);
}
.header-topbar-magazine .topbar-social {
display: flex;
gap: 1rem;
}
.header-topbar-magazine .topbar-social a {
color: rgba(255, 255, 255, 0.6);
transition: color 0.2s ease;
}
.header-topbar-magazine .topbar-social a:hover {
color: #fff;
}
/* ========================================
BRAND AREA
======================================== */
.header-brand-area {
background-color: #fff;
border-bottom: 1px solid var(--site-border, #e5e7eb);
}
.header-brand-area .logo-text {
font-size: 3rem;
font-weight: 900;
color: var(--site-heading-color, #1f2937);
letter-spacing: -2px;
font-family: Georgia, serif;
}
.header-brand-area .site-tagline {
color: var(--site-secondary, #6b7280);
font-size: 0.9rem;
font-style: italic;
}
/* ========================================
NAVBAR MAGAZINE
======================================== */
.navbar-magazine {
background-color: var(--site-header-accent, #dc2626) !important;
padding: 0 !important;
}
.navbar-magazine .navbar-toggler {
color: #fff;
border: none;
padding: 0.75rem 1rem;
}
.navbar-magazine .nav-link {
color: var(--site-header-text, rgba(255, 255, 255, 0.9)) !important;
font-weight: 600;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 1rem 1.25rem !important;
transition: all 0.2s ease;
}
.navbar-magazine .nav-link:hover,
.navbar-magazine .nav-link.active {
color: var(--site-header-text-hover, #fff) !important;
background-color: rgba(0, 0, 0, 0.2);
}
.navbar-magazine .header-search .form-control {
border-radius: 4px 0 0 4px;
border: none;
}
.navbar-magazine .header-search .btn {
background-color: var(--magazine-dark);
border: none;
color: #fff;
border-radius: 0 4px 4px 0;
}
/* ========================================
SITE HEADER STICKY
======================================== */
.site-header.header-magazine {
background: #fff;
}
/* Apenas a barra de navegacao fica sticky ao rolar */
.site-header.header-magazine .navbar-magazine {
position: sticky;
top: 0;
z-index: 1030;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* ========================================
CONTENT
======================================== */
.magazine-content {
background-color: var(--site-background-alt, #f9fafb);
min-height: 60vh;
}
/* ========================================
FOOTER MAGAZINE
======================================== */
.site-footer.footer-magazine {
background-color: var(--magazine-dark);
color: rgba(255, 255, 255, 0.85);
padding: 3rem 0 0;
}
.site-footer.footer-magazine .footer-title {
color: var(--site-footer-heading, #fff);
font-weight: 700;
}
.site-footer.footer-magazine .footer-about {
color: var(--site-footer-text, rgba(255, 255, 255, 0.6));
font-size: 0.9rem;
}
.site-footer.footer-magazine .footer-heading {
color: var(--site-footer-heading, var(--site-footer-accent, #dc2626));
font-weight: 700;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 1rem;
}
.site-footer.footer-magazine .footer-links {
list-style: none;
padding: 0;
}
.site-footer.footer-magazine .footer-links li {
margin-bottom: 0.5rem;
}
.site-footer.footer-magazine .footer-links a {
color: var(--site-footer-text, rgba(255, 255, 255, 0.7));
text-decoration: none;
font-size: 0.9rem;
transition: color 0.2s ease;
}
.site-footer.footer-magazine .footer-links a:hover {
color: #fff;
}
.site-footer.footer-magazine .footer-newsletter-text {
color: rgba(255, 255, 255, 0.6);
font-size: 0.9rem;
margin-bottom: 1rem;
}
.site-footer.footer-magazine .footer-newsletter .form-control {
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #fff;
}
.site-footer.footer-magazine .footer-newsletter .form-control::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.site-footer.footer-magazine .footer-newsletter .btn {
background-color: var(--site-footer-accent, #dc2626);
border-color: var(--site-footer-accent, #dc2626);
}
.site-footer.footer-magazine .footer-social {
display: flex;
gap: 0.5rem;
}
.site-footer.footer-magazine .social-link {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 4px;
color: #fff;
transition: background-color 0.2s ease;
}
.site-footer.footer-magazine .social-link:hover {
background-color: var(--site-footer-accent, #dc2626);
color: #fff;
}
.site-footer.footer-magazine .footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 1.25rem 0;
margin-top: 2rem;
}
.site-footer.footer-magazine .footer-copyright {
color: rgba(255, 255, 255, 0.5);
font-size: 0.8rem;
}
.site-footer.footer-magazine .footer-legal {
display: flex;
gap: 1rem;
}
.site-footer.footer-magazine .footer-legal a {
color: rgba(255, 255, 255, 0.5);
font-size: 0.8rem;
text-decoration: none;
}
.site-footer.footer-magazine .footer-legal a:hover {
color: #fff;
}
/* ========================================
ANIMACOES
======================================== */
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
width: 45px;
height: 45px;
background-color: var(--magazine-red);
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
background-color: var(--magazine-dark);
}
sidebar-fixedMenu lateral fixo sempre visivel em desktop. Navegacao vertical elegante e moderna.
Header Sidebar Fixed - Mini header para mobile. O header utiliza a classe site-header header-sidebar-fixed d-lg-none como elemento raiz. O conteudo das paginas e inserido dentro de <div> com classe sidebar-layout-wrapper. O placeholder [[CONTENT]] e substituido pelo conteudo renderizado de cada pagina. Rodape: Newsletter. Possui markers para insercao automatica de componentes: NAV_ITEMS, HEADER_UTILITY, FOOTER_ITEMS. Esses markers permitem que o sistema insira menus de modulos, utilitarios e itens do rodape automaticamente. Utiliza os componentes Blade: x-front.search-box, x-front.newsletter-form. Comportamentos JavaScript incluidos: menu mobile, link ativo no menu. Recomendado para: Dashboards, Portfolios, Documentacao.
<header>
site-header header-sidebar-fixed d-lg-none
<div>
sidebar-layout-wrapper
<div>
container text-center
{{-- Header Sidebar Fixed - Mini header para mobile --}}
<header class="site-header header-sidebar-fixed d-lg-none" role="banner">
<div class="container-fluid">
<div class="d-flex align-items-center justify-content-between py-3">
<a href="/" class="header-logo" aria-label="Pagina inicial - {{ $siteName }}">
@if($siteLogo)
<img src="{{ $siteLogo }}" alt="{{ $siteName }}" height="40">
@else
<span class="logo-text">{{ $siteName }}</span>
@endif
</a>
<button class="sidebar-toggle" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarNav" aria-label="Abrir menu">
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</header>
{{-- Sidebar fixa em desktop, offcanvas em mobile --}}
<aside class="site-sidebar" id="sidebarNav" tabindex="-1">
<div class="sidebar-inner">
{{-- Logo --}}
<div class="sidebar-brand">
<a href="/" aria-label="Pagina inicial - {{ $siteName }}">
@if($siteLogo)
<img src="{{ $siteLogo }}" alt="{{ $siteName }}" class="sidebar-logo">
@else
<span class="sidebar-logo-text">{{ $siteName }}</span>
@endif
</a>
@if($siteTagline)
<p class="sidebar-tagline">{{ $siteTagline }}</p>
@endif
</div>
{{-- Busca --}}
<div class="sidebar-search mb-3">
<x-front.search-box />
</div>
{{-- [COMPONENT:HEADER_UTILITY] --}}
{{-- Navegacao --}}
<nav class="sidebar-nav" aria-label="Menu principal">
<ul class="sidebar-menu">
<li class="sidebar-item">
<a href="/" class="sidebar-link active">
<i class="fas fa-home"></i>
<span>Início</span>
</a>
</li>
<li class="sidebar-item">
<a href="/sobre" class="sidebar-link">
<i class="fas fa-info-circle"></i>
<span>Sobre</span>
</a>
</li>
<li class="sidebar-item">
<a href="/servicos" class="sidebar-link">
<i class="fas fa-concierge-bell"></i>
<span>Serviços</span>
</a>
</li>
<li class="sidebar-item">
<a href="/blog" class="sidebar-link">
<i class="fas fa-newspaper"></i>
<span>Blog</span>
</a>
</li>
<li class="sidebar-item">
<a href="/contato" class="sidebar-link">
<i class="fas fa-envelope"></i>
<span>Contato</span>
</a>
</li>
{{-- [COMPONENT:NAV_ITEMS] --}}
</ul>
</nav>
{{-- Redes sociais no rodape da sidebar --}}
<div class="sidebar-footer">
<div class="sidebar-social">
@if($siteFacebook)
<a href="{{ $siteFacebook }}" target="_blank" rel="noopener" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
@endif
@if($siteInstagram)
<a href="{{ $siteInstagram }}" target="_blank" rel="noopener" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
@endif
@if($siteLinkedin)
<a href="{{ $siteLinkedin }}" target="_blank" rel="noopener" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
@endif
</div>
<p class="sidebar-copyright">© {{ date('Y') }} {{ $siteName }}</p>
</div>
</div>
</aside>
{{-- Newsletter --}}
<section style="background: var(--site-background-alt); padding: 2.5rem 0;">
<div class="container text-center">
<p class="mb-3" style="font-size: 1.1rem;">Receba novidades no seu e-mail</p>
<div style="max-width: 450px; margin: 0 auto;">
<x-front.newsletter-form layout="inline" />
</div>
</div>
</section>
{{-- Footer Sidebar Fixed - Minimalista pois sidebar ja tem info --}}
<footer class="site-footer footer-sidebar-fixed" role="contentinfo">
<div class="container-fluid">
{{-- [COMPONENT:FOOTER_ITEMS] --}}
<div class="row align-items-center py-4">
<div class="col-md-6 text-center text-md-start">
<p class="footer-copyright mb-0">{!! $footerCopyright !!}</p>
</div>
<div class="col-md-6 text-center text-md-end">
<nav class="footer-links">
@if($privacyPolicyUrl)
<a href="{{ $privacyPolicyUrl }}">Privacidade</a>
@endif
@if($termsUrl)
<a href="{{ $termsUrl }}">Termos</a>
@endif
<a href="/contato">Contato</a>
</nav>
</div>
</div>
</div>
</footer>
/**
* CSS - Sidebar Fixed
* Layout com sidebar fixa na esquerda
*/
:root {
--sidebar-width: 280px;
--sidebar-bg: var(--site-footer-bg, #1e293b);
--sidebar-text: rgba(255, 255, 255, 0.85);
--sidebar-accent: var(--site-header-accent);
}
/* ========================================
MOBILE HEADER
======================================== */
.header-sidebar-fixed {
background-color: var(--sidebar-bg);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1030;
}
.header-sidebar-fixed .logo-text {
color: #fff;
font-weight: 700;
font-size: 1.25rem;
}
.header-sidebar-fixed .sidebar-toggle {
background: transparent;
border: none;
color: #fff;
font-size: 1.5rem;
padding: 0.5rem;
cursor: pointer;
}
/* ========================================
SIDEBAR
======================================== */
.site-sidebar {
position: fixed;
top: 0;
left: 0;
width: var(--sidebar-width);
height: 100vh;
background-color: var(--sidebar-bg);
z-index: 1040;
overflow-y: auto;
transform: translateX(-100%);
transition: transform 0.3s ease;
}
.site-sidebar.show {
transform: translateX(0);
}
@media (min-width: 992px) {
.site-sidebar {
transform: translateX(0);
}
}
.site-sidebar .sidebar-inner {
display: flex;
flex-direction: column;
min-height: 100%;
padding: 2rem 1.5rem;
background: transparent;
position: static;
border-radius: 0;
}
/* ========================================
SIDEBAR BRAND
======================================== */
.sidebar-brand {
text-align: center;
padding-bottom: 2rem;
margin-bottom: 2rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.sidebar-brand a {
text-decoration: none;
}
.sidebar-logo {
max-width: 160px;
height: auto;
}
.sidebar-logo-text {
color: #fff;
font-size: 1.75rem;
font-weight: 800;
letter-spacing: -1px;
}
.sidebar-tagline {
color: rgba(255, 255, 255, 0.5);
font-size: 0.8rem;
margin-top: 0.5rem;
margin-bottom: 0;
}
/* ========================================
SIDEBAR NAV
======================================== */
.sidebar-nav {
flex: 1;
}
.sidebar-menu {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar-item {
margin-bottom: 0.25rem;
}
.sidebar-link {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.875rem 1rem;
color: var(--sidebar-text);
text-decoration: none;
border-radius: 8px;
transition: all 0.2s ease;
font-weight: 500;
}
.sidebar-link i {
width: 20px;
text-align: center;
font-size: 1rem;
opacity: 0.85;
transition: opacity 0.2s ease;
}
.sidebar-link:hover,
.sidebar-link.active {
background-color: rgba(255, 255, 255, 0.1);
color: #fff;
}
.sidebar-link:hover i,
.sidebar-link.active i {
opacity: 1;
color: var(--sidebar-accent);
}
.sidebar-link.active {
background-color: var(--sidebar-accent);
}
.sidebar-link.active i {
color: #fff;
}
/* ========================================
SIDEBAR FOOTER
======================================== */
.sidebar-footer {
padding-top: 2rem;
margin-top: auto;
border-top: 1px solid rgba(255, 255, 255, 0.1);
text-align: center;
}
.sidebar-social {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
.sidebar-social a {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background-color: rgba(255, 255, 255, 0.15);
color: #fff;
border-radius: 50%;
transition: all 0.2s ease;
}
.sidebar-social a:hover {
background-color: var(--sidebar-accent);
color: #fff;
}
.sidebar-copyright {
color: rgba(255, 255, 255, 0.5);
font-size: 0.75rem;
margin: 0;
}
/* ========================================
MAIN CONTENT AREA
======================================== */
.sidebar-layout-wrapper {
min-height: 100vh;
}
.sidebar-content {
padding-top: 70px; /* Mobile header height */
min-height: 100vh;
background-color: var(--site-background-alt, #f8fafc);
}
@media (min-width: 992px) {
.sidebar-content {
margin-left: var(--sidebar-width);
padding-top: 0;
}
}
/* ========================================
FOOTER SIDEBAR FIXED
======================================== */
.footer-sidebar-fixed {
background-color: #fff;
border-top: 1px solid var(--site-border, #e2e8f0);
}
@media (min-width: 992px) {
.footer-sidebar-fixed {
margin-left: var(--sidebar-width);
}
}
.footer-sidebar-fixed .footer-copyright {
color: var(--site-secondary, #64748b);
font-size: 0.875rem;
}
.footer-sidebar-fixed .footer-links {
display: flex;
justify-content: center;
gap: 1.5rem;
}
@media (min-width: 768px) {
.footer-sidebar-fixed .footer-links {
justify-content: flex-end;
}
}
.footer-sidebar-fixed .footer-links a {
color: var(--site-secondary, #64748b);
text-decoration: none;
font-size: 0.875rem;
transition: color 0.2s ease;
}
.footer-sidebar-fixed .footer-links a:hover {
color: var(--site-footer-accent);
}
/* ========================================
SCROLLBAR CUSTOMIZADA
======================================== */
.site-sidebar::-webkit-scrollbar {
width: 6px;
}
.site-sidebar::-webkit-scrollbar-track {
background: transparent;
}
.site-sidebar::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.2);
border-radius: 3px;
}
.site-sidebar::-webkit-scrollbar-thumb:hover {
background-color: rgba(255, 255, 255, 0.3);
}
gradient-heroHeader com gradiente vibrante que muda de cor. Visual impactante e memoravel.
Header Gradient Hero - Transparente sobre hero. O header utiliza a classe site-header header-gradient-hero como elemento raiz. O conteudo do header esta dentro de um .container do Bootstrap, limitando a largura maxima. O conteudo das paginas e inserido dentro de <main> com classe site-content gradient-hero-content {{ $isHome ? '' : 'inner-page' }}. O placeholder [[CONTENT]] e substituido pelo conteudo renderizado de cada pagina. Rodape: Newsletter. Possui markers para insercao automatica de componentes: NAV_ITEMS, HEADER_UTILITY, FOOTER_ITEMS. Esses markers permitem que o sistema insira menus de modulos, utilitarios e itens do rodape automaticamente. Utiliza os componentes Blade: x-front.search-box, x-front.newsletter-form. Comportamentos JavaScript incluidos: efeito de scroll no header, scroll suave. Recomendado para: Agencias, Design, Marketing, Eventos.
<header>
site-header header-gradient-hero
<main>
site-content gradient-hero-content {{ $isHome ? '' : 'inner-page' }}
<div>
container
{{-- Header Gradient Hero - Transparente sobre hero --}}
<header class="site-header header-gradient-hero" role="banner">
<nav class="navbar navbar-expand-lg navbar-hero {{ $isHome ? '' : 'navbar-inner' }}" aria-label="Menu principal">
<div class="container">
{{-- Logo --}}
<a class="navbar-brand" href="/" aria-label="Pagina inicial - {{ $siteName }}">
@if($siteLogo)
<img src="{{ $siteLogo }}" alt="{{ $siteName }}" height="45" class="logo-img">
@else
<span class="logo-text">{{ $siteName }}</span>
@endif
</a>
{{-- Mobile toggle --}}
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#heroNavbar"
aria-controls="heroNavbar" aria-expanded="false" aria-label="Abrir menu">
<span class="navbar-toggler-icon"></span>
</button>
{{-- Menu --}}
<div class="collapse navbar-collapse" id="heroNavbar">
<ul class="navbar-nav ms-auto align-items-lg-center">
<li class="nav-item">
<a class="nav-link" href="/">Início</a>
</li>
{{-- [COMPONENT:NAV_ITEMS] --}}
{{-- Busca --}}
<li class="nav-item nav-search ms-lg-2">
<x-front.search-box />
</li>
<li class="nav-item nav-cta">
<a class="btn btn-cta" href="/contato">Fale Conosco</a>
</li>
</ul>
</div>
{{-- [COMPONENT:HEADER_UTILITY] --}}
</div>
</nav>
@if($isHome)
{{-- Hero Section — apenas na home --}}
<div class="hero-gradient">
<div class="hero-shapes">
<div class="shape shape-1"></div>
<div class="shape shape-2"></div>
<div class="shape shape-3"></div>
</div>
<div class="container">
<div class="row align-items-center min-vh-75">
<div class="col-lg-7">
<div class="hero-content">
<span class="hero-badge">{{ $siteTagline ?? 'Bem-vindo' }}</span>
<h1 class="hero-title">{{ $siteName }}</h1>
<p class="hero-subtitle">Transformamos ideias em experiencias digitais memoraveis. Solucoes criativas para sua marca crescer.</p>
<div class="hero-actions">
<a href="/contato" class="btn btn-hero-primary">
Comecar Agora
<i class="fas fa-arrow-right ms-2"></i>
</a>
<a href="/sobre" class="btn btn-hero-secondary">
Saiba Mais
</a>
</div>
</div>
</div>
<div class="col-lg-5 d-none d-lg-block">
<div class="hero-visual">
<div class="hero-card hero-card-1">
<i class="fas fa-rocket"></i>
<span>Performance</span>
</div>
<div class="hero-card hero-card-2">
<i class="fas fa-palette"></i>
<span>Design</span>
</div>
<div class="hero-card hero-card-3">
<i class="fas fa-code"></i>
<span>Tecnologia</span>
</div>
</div>
</div>
</div>
</div>
<div class="hero-wave">
<svg viewBox="0 0 1440 120" preserveAspectRatio="none">
<path d="M0,60 C360,120 720,0 1080,60 C1260,90 1380,90 1440,60 L1440,120 L0,120 Z" fill="currentColor"/>
</svg>
</div>
</div>
@endif
</header>
{{-- Newsletter --}}
<section style="background: var(--site-background-alt); padding: 3rem 0;">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 mb-3 mb-lg-0">
<h3 style="margin-bottom: 0.25rem;">Newsletter</h3>
<p class="text-muted mb-0">Receba conteudos exclusivos e novidades do mercado.</p>
</div>
<div class="col-lg-6">
<x-front.newsletter-form layout="inline" />
</div>
</div>
</div>
</section>
{{-- Footer Gradient Hero --}}
<footer class="site-footer footer-gradient-hero" role="contentinfo" itemscope itemtype="https://schema.org/Organization">
{{-- CTA Section --}}
<div class="footer-cta">
<div class="container">
<div class="cta-card">
<div class="row align-items-center">
<div class="col-lg-8">
<h3 class="cta-title">Pronto para comecar seu projeto?</h3>
<p class="cta-text">Entre em contato e descubra como podemos ajudar sua empresa a crescer.</p>
</div>
<div class="col-lg-4 text-lg-end">
<a href="/contato" class="btn btn-cta-footer">
Fale Conosco
<i class="fas fa-arrow-right ms-2"></i>
</a>
</div>
</div>
</div>
</div>
</div>
{{-- Main Footer --}}
<div class="footer-main">
<div class="container">
<div class="row gy-4">
{{-- Brand --}}
<div class="col-lg-4">
<div class="footer-brand">
@if($siteLogoFooter ?? $siteLogo)
<img src="{{ $siteLogoFooter ?? $siteLogo }}" alt="{{ $siteName }}" height="45" class="footer-logo" itemprop="logo">
@else
<h5 class="footer-title" itemprop="name">{{ $siteName }}</h5>
@endif
</div>
<p class="footer-about" itemprop="description">{{ $footerAbout }}</p>
@if($footerShowSocial)
<div class="footer-social">
@if($siteFacebook)
<a href="{{ $siteFacebook }}" target="_blank" rel="noopener" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
@endif
@if($siteInstagram)
<a href="{{ $siteInstagram }}" target="_blank" rel="noopener" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
@endif
@if($siteLinkedin)
<a href="{{ $siteLinkedin }}" target="_blank" rel="noopener" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
@endif
@if($siteYoutube)
<a href="{{ $siteYoutube }}" target="_blank" rel="noopener" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
@endif
</div>
@endif
</div>
{{-- Links --}}
<div class="col-lg-2 col-md-4">
<h6 class="footer-heading">Links</h6>
<ul class="footer-links">
<li><a href="/">Inicio</a></li>
<li><a href="/sobre">Sobre</a></li>
<li><a href="/contato">Contato</a></li>
</ul>
</div>
{{-- Contato --}}
<div class="col-lg-4 col-md-4">
<h6 class="footer-heading">Contato</h6>
<ul class="footer-contact">
@if($siteEmail)
<li>
<i class="fas fa-envelope"></i>
<a href="mailto:{{ $siteEmail }}">{{ $siteEmail }}</a>
</li>
@endif
@if($sitePhone)
<li>
<i class="fas fa-phone"></i>
<a href="tel:{{ preg_replace('/[^0-9+]/', '', $sitePhone) }}">{{ $sitePhone }}</a>
</li>
@endif
@if($siteWhatsapp)
<li>
<i class="fab fa-whatsapp"></i>
<a href="{{ $siteWhatsappLink }}" target="_blank" rel="noopener">WhatsApp</a>
</li>
@endif
</ul>
</div>
</div>
</div>
</div>
{{-- [COMPONENT:FOOTER_ITEMS] --}}
{{-- Copyright --}}
<div class="footer-bottom">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6 text-center text-md-start">
<p class="footer-copyright mb-0">{!! $footerCopyright !!}</p>
</div>
<div class="col-md-6 text-center text-md-end">
<nav class="footer-legal">
@if($privacyPolicyUrl)
<a href="{{ $privacyPolicyUrl }}">Privacidade</a>
@endif
@if($termsUrl)
<a href="{{ $termsUrl }}">Termos</a>
@endif
</nav>
</div>
</div>
</div>
</div>
</footer>
/**
* CSS - Gradient Hero
* Layout com hero section em gradiente vibrante
*/
:root {
--gradient-start: var(--site-primary, #3d3d3d);
--gradient-mid: color-mix(in srgb, var(--site-primary, #3d3d3d) 60%, #a855f7);
--gradient-end: color-mix(in srgb, var(--site-primary, #3d3d3d) 30%, #a855f7);
--hero-gradient: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-mid) 50%, var(--gradient-end) 100%);
}
/* ========================================
NAVBAR HERO
======================================== */
.header-gradient-hero {
position: relative;
}
.navbar-hero {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1030;
padding: 1.25rem 0;
transition: all 0.3s ease;
}
.navbar-hero.scrolled {
position: fixed;
background-color: rgba(255, 255, 255, 0.98);
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
padding: 0.75rem 0;
}
.navbar-hero .logo-text {
color: var(--site-header-text, #fff);
font-size: 1.75rem;
font-weight: 800;
}
.navbar-hero.scrolled .logo-text {
color: var(--site-header-accent, #3d3d3d);
}
.navbar-hero .navbar-toggler {
border: none;
color: #fff;
font-size: 1.5rem;
}
.navbar-hero.scrolled .navbar-toggler {
color: var(--site-text);
}
.navbar-hero .nav-link {
color: var(--site-header-text, rgba(255, 255, 255, 0.9));
font-weight: 500;
padding: 0.5rem 1rem;
transition: color 0.2s ease;
}
.navbar-hero .nav-link:hover {
color: var(--site-header-text-hover, #fff);
}
.navbar-hero.scrolled .nav-link {
color: var(--site-text);
}
.navbar-hero.scrolled .nav-link:hover {
color: var(--site-header-accent, #3d3d3d);
}
.navbar-hero .btn-cta {
background-color: rgba(255, 255, 255, 0.2);
color: #fff;
border: 2px solid rgba(255, 255, 255, 0.5);
padding: 0.5rem 1.5rem;
border-radius: 50px;
font-weight: 600;
transition: all 0.3s ease;
}
.navbar-hero .btn-cta:hover {
background-color: #fff;
color: var(--gradient-start);
border-color: #fff;
}
.navbar-hero.scrolled .btn-cta {
background: var(--hero-gradient);
color: #fff;
border-color: transparent;
}
/* ========================================
NAVBAR — PÁGINAS INTERNAS (sem hero)
======================================== */
.navbar-hero.navbar-inner {
position: fixed;
background: var(--hero-gradient);
padding: 0.75rem 0;
}
.navbar-hero.navbar-inner.scrolled {
background: var(--hero-gradient);
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
}
.navbar-hero.navbar-inner.scrolled .nav-link {
color: rgba(255, 255, 255, 0.9);
}
.navbar-hero.navbar-inner.scrolled .nav-link:hover {
color: #fff;
}
.navbar-hero.navbar-inner.scrolled .logo-text {
color: #fff;
}
.navbar-hero.navbar-inner.scrolled .btn-cta {
background-color: rgba(255, 255, 255, 0.2);
color: #fff;
border-color: rgba(255, 255, 255, 0.5);
}
.navbar-hero.navbar-inner .btn-cta:hover,
.navbar-hero.navbar-inner.scrolled .btn-cta:hover {
background-color: rgba(255, 255, 255, 0.35);
color: #fff;
border-color: #fff;
}
/* Compensar navbar fixed nas internas */
.gradient-hero-content.inner-page {
padding-top: 80px;
}
/* ========================================
HERO SECTION
======================================== */
.hero-gradient {
background: var(--hero-gradient);
position: relative;
overflow: hidden;
padding-top: 80px;
}
.hero-shapes {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.shape {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
}
.shape-1 {
width: 400px;
height: 400px;
top: -100px;
right: -100px;
}
.shape-2 {
width: 200px;
height: 200px;
bottom: 20%;
left: 5%;
}
.shape-3 {
width: 150px;
height: 150px;
top: 40%;
right: 20%;
}
.min-vh-75 {
min-height: 75vh;
}
.hero-content {
padding: 4rem 0;
position: relative;
z-index: 2;
}
.hero-badge {
display: inline-block;
background: rgba(255, 255, 255, 0.2);
color: #fff;
padding: 0.5rem 1.25rem;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 1.5rem;
backdrop-filter: blur(10px);
}
.hero-title {
color: #fff;
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: 800;
line-height: 1.1;
margin-bottom: 1.5rem;
letter-spacing: -2px;
}
.hero-subtitle {
color: rgba(255, 255, 255, 0.9);
font-size: 1.25rem;
line-height: 1.7;
max-width: 540px;
margin-bottom: 2rem;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.btn-hero-primary {
background-color: #fff;
color: var(--gradient-start);
padding: 1rem 2rem;
border-radius: 50px;
font-weight: 700;
font-size: 1rem;
transition: all 0.3s ease;
border: none;
text-decoration: none;
}
.btn-hero-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
color: var(--gradient-mid);
}
.btn-hero-secondary {
background-color: transparent;
color: #fff;
padding: 1rem 2rem;
border-radius: 50px;
font-weight: 600;
border: 2px solid rgba(255, 255, 255, 0.5);
text-decoration: none;
transition: all 0.3s ease;
}
.btn-hero-secondary:hover {
background-color: rgba(255, 255, 255, 0.1);
border-color: #fff;
color: #fff;
}
/* ========================================
HERO VISUAL
======================================== */
.hero-visual {
position: relative;
height: 400px;
}
.hero-card {
position: absolute;
background: rgba(255, 255, 255, 0.95);
padding: 1.5rem 2rem;
border-radius: 16px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
display: flex;
align-items: center;
gap: 1rem;
animation: float 3s ease-in-out infinite;
}
.hero-card i {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background: var(--hero-gradient);
color: #fff;
border-radius: 12px;
font-size: 1.25rem;
}
.hero-card span {
font-weight: 700;
color: var(--site-text);
}
.hero-card-1 {
top: 10%;
left: 10%;
animation-delay: 0s;
}
.hero-card-2 {
top: 40%;
right: 5%;
animation-delay: 0.5s;
}
.hero-card-3 {
bottom: 15%;
left: 20%;
animation-delay: 1s;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
/* ========================================
HERO WAVE
======================================== */
.hero-wave {
position: absolute;
bottom: 0;
left: 0;
right: 0;
color: var(--site-background-alt, #f8fafc);
line-height: 0;
}
.hero-wave svg {
width: 100%;
height: 80px;
}
/* ========================================
CONTENT AREA
======================================== */
.gradient-hero-content {
background-color: var(--site-background-alt, #f8fafc);
min-height: 60vh;
}
/* ========================================
FOOTER CTA
======================================== */
.footer-cta {
background-color: var(--site-background-alt, #f8fafc);
padding: 3rem 0 4rem;
}
.cta-card {
background: var(--hero-gradient);
padding: 3rem;
border-radius: 24px;
box-shadow: 0 20px 60px rgba(99, 102, 241, 0.3);
}
.cta-title {
color: #fff;
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.cta-text {
color: rgba(255, 255, 255, 0.9);
margin-bottom: 0;
}
.btn-cta-footer {
background-color: #fff;
color: var(--gradient-start);
padding: 1rem 2rem;
border-radius: 50px;
font-weight: 700;
text-decoration: none;
display: inline-flex;
align-items: center;
transition: all 0.3s ease;
margin-top: 1rem;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}
@media (min-width: 992px) {
.btn-cta-footer {
margin-top: 0;
}
}
.btn-cta-footer:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
color: var(--gradient-start) !important;
background-color: #fff !important;
}
/* ========================================
FOOTER MAIN
======================================== */
.footer-main {
background-color: var(--site-footer-bg, #1e293b);
padding: 4rem 0;
}
.footer-gradient-hero .footer-title {
color: var(--site-footer-heading, #fff);
font-size: 1.5rem;
font-weight: 700;
}
.footer-gradient-hero .footer-about {
color: var(--site-footer-text, rgba(255, 255, 255, 0.6));
font-size: 0.9rem;
margin-top: 1rem;
}
.footer-gradient-hero .footer-social {
display: flex;
gap: 0.75rem;
margin-top: 1.5rem;
}
.footer-gradient-hero .footer-social a {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.1);
color: #fff;
border-radius: 50%;
transition: all 0.3s ease;
}
.footer-gradient-hero .footer-social a:hover {
background: var(--hero-gradient);
transform: translateY(-3px);
}
.footer-gradient-hero .footer-heading {
color: var(--site-footer-heading, #fff);
font-weight: 700;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 1.25rem;
}
.footer-gradient-hero .footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-gradient-hero .footer-links li {
margin-bottom: 0.75rem;
}
.footer-gradient-hero .footer-links a {
color: var(--site-footer-text, rgba(255, 255, 255, 0.6));
text-decoration: none;
transition: color 0.2s ease;
}
.footer-gradient-hero .footer-links a:hover {
color: #fff;
}
.footer-gradient-hero .footer-contact {
list-style: none;
padding: 0;
margin: 0;
}
.footer-gradient-hero .footer-contact li {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
color: var(--site-footer-text, rgba(255, 255, 255, 0.6));
}
.footer-gradient-hero .footer-contact i {
width: 20px;
text-align: center;
color: rgba(255, 255, 255, 0.7);
}
.footer-gradient-hero .footer-contact a {
color: var(--site-footer-text, rgba(255, 255, 255, 0.6));
text-decoration: none;
transition: color 0.2s ease;
}
.footer-gradient-hero .footer-contact a:hover {
color: #fff;
}
/* ========================================
FOOTER BOTTOM
======================================== */
.footer-gradient-hero .footer-bottom {
background-color: color-mix(in srgb, var(--site-footer-bg, #1e293b) 80%, black);
padding: 1.25rem 0;
}
.footer-gradient-hero .footer-copyright {
color: rgba(255, 255, 255, 0.5);
font-size: 0.85rem;
}
.footer-gradient-hero .footer-legal {
display: flex;
justify-content: center;
gap: 1.5rem;
}
@media (min-width: 768px) {
.footer-gradient-hero .footer-legal {
justify-content: flex-end;
}
}
.footer-gradient-hero .footer-legal a {
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
font-size: 0.85rem;
transition: color 0.2s ease;
}
.footer-gradient-hero .footer-legal a:hover {
color: #fff;
}
split-screenHero assimetrico com divisao diagonal. Lado esquerdo com conteudo, direito com padrao geometrico decorativo.
Header Split Screen - Hero assimetrico com divisao diagonal. O header utiliza a classe site-header header-split como elemento raiz. O conteudo do header esta dentro de um .container do Bootstrap, limitando a largura maxima. O conteudo das paginas e inserido dentro de <main> com classe site-content split-screen-content. O placeholder [[CONTENT]] e substituido pelo conteudo renderizado de cada pagina. Rodape: Newsletter. Possui markers para insercao automatica de componentes: NAV_ITEMS, HEADER_UTILITY, FOOTER_ITEMS. Esses markers permitem que o sistema insira menus de modulos, utilitarios e itens do rodape automaticamente. Utiliza os componentes Blade: x-front.search-box, x-front.newsletter-form. Comportamentos JavaScript incluidos: efeito de scroll no header, animacoes de entrada (fade-in), scroll suave. Recomendado para: Agencias Digitais, Startups, Consultorias Tech.
<header>
site-header header-split
<main>
site-content split-screen-content
<section>
split-newsletter
{{-- Header Split Screen - Hero assimetrico com divisao diagonal --}}
<header class="site-header header-split" role="banner">
<nav class="navbar navbar-expand-lg navbar-split" aria-label="Menu principal">
<div class="container">
{{-- Logo --}}
<a class="navbar-brand" href="/" aria-label="Pagina inicial - {{ $siteName }}">
@if($siteLogo)
<img src="{{ $siteLogo }}" alt="{{ $siteName }}" height="45" class="logo-img">
@else
<span class="logo-text">{{ $siteName }}</span>
@endif
</a>
{{-- Mobile toggle --}}
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#splitNavbar"
aria-controls="splitNavbar" aria-expanded="false" aria-label="Abrir menu">
<span class="navbar-toggler-icon"></span>
</button>
{{-- Menu --}}
<div class="collapse navbar-collapse" id="splitNavbar">
<ul class="navbar-nav ms-auto align-items-lg-center">
<li class="nav-item">
<a class="nav-link" href="/">Início</a>
</li>
{{-- [COMPONENT:NAV_ITEMS] --}}
<li class="nav-item nav-search ms-lg-2">
<x-front.search-box />
</li>
<li class="nav-item nav-cta ms-lg-2">
<a class="btn btn-split-cta" href="/contato">Fale Conosco</a>
</li>
</ul>
</div>
{{-- [COMPONENT:HEADER_UTILITY] --}}
</div>
</nav>
{{-- Hero Split --}}
<div class="hero-split">
<div class="hero-split-left">
<div class="hero-split-content">
<span class="hero-split-badge">{{ $siteTagline ?? 'Inovacao e Design' }}</span>
<h1 class="hero-split-title">{{ $siteName }}</h1>
<p class="hero-split-text">Criamos solucoes digitais que transformam negocios. Design estrategico e tecnologia de ponta para sua marca.</p>
<div class="hero-split-actions">
<a href="/contato" class="btn btn-split-primary">
Iniciar Projeto <i class="fas fa-arrow-right ms-2"></i>
</a>
<a href="/sobre" class="btn btn-split-outline">Conheca-nos</a>
</div>
</div>
</div>
<div class="hero-split-right">
<div class="hero-split-pattern">
<div class="pattern-dot"></div>
<div class="pattern-dot"></div>
<div class="pattern-dot"></div>
<div class="pattern-dot"></div>
<div class="pattern-line"></div>
<div class="pattern-circle"></div>
<div class="pattern-square"></div>
</div>
</div>
<div class="hero-split-diagonal"></div>
</div>
</header>
{{-- Newsletter --}}
<section class="split-newsletter" style="background: var(--site-background-alt, #f8fafc); padding: 3rem 0;">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-5 mb-3 mb-lg-0">
<h3 style="margin-bottom: 0.25rem;">Newsletter</h3>
<p class="text-muted mb-0">Fique por dentro das novidades e tendencias.</p>
</div>
<div class="col-lg-7">
<x-front.newsletter-form layout="inline" />
</div>
</div>
</div>
</section>
{{-- Footer Split Screen --}}
<footer class="site-footer footer-split" role="contentinfo" itemscope itemtype="https://schema.org/Organization">
<div class="footer-split-main">
<div class="container">
<div class="row gy-4">
{{-- Brand --}}
<div class="col-lg-4">
@if($siteLogoFooter ?? $siteLogo)
<img src="{{ $siteLogoFooter ?? $siteLogo }}" alt="{{ $siteName }}" height="40" class="footer-logo mb-3" itemprop="logo">
@else
<h5 class="footer-brand-text" itemprop="name">{{ $siteName }}</h5>
@endif
<p class="footer-about" itemprop="description">{{ $footerAbout }}</p>
@if($footerShowSocial)
<div class="footer-social">
@if($siteFacebook)<a href="{{ $siteFacebook }}" target="_blank" rel="noopener" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>@endif
@if($siteInstagram)<a href="{{ $siteInstagram }}" target="_blank" rel="noopener" aria-label="Instagram"><i class="fab fa-instagram"></i></a>@endif
@if($siteLinkedin)<a href="{{ $siteLinkedin }}" target="_blank" rel="noopener" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>@endif
@if($siteYoutube)<a href="{{ $siteYoutube }}" target="_blank" rel="noopener" aria-label="YouTube"><i class="fab fa-youtube"></i></a>@endif
</div>
@endif
</div>
{{-- Links --}}
<div class="col-lg-2 col-md-4">
<h6 class="footer-heading">Links</h6>
<ul class="footer-links">
<li><a href="/">Inicio</a></li>
<li><a href="/sobre">Sobre</a></li>
<li><a href="/contato">Contato</a></li>
</ul>
</div>
{{-- Contato --}}
@if($footerShowContact)
<div class="col-lg-3 col-md-4">
<h6 class="footer-heading">Contato</h6>
<ul class="footer-contact" itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
@if($siteEmail)
<li><i class="fas fa-envelope"></i> <a href="mailto:{{ $siteEmail }}" itemprop="email">{{ $siteEmail }}</a></li>
@endif
@if($sitePhone)
<li><i class="fas fa-phone"></i> <a href="tel:{{ preg_replace('/[^0-9+]/', '', $sitePhone) }}" itemprop="telephone">{{ $sitePhone }}</a></li>
@endif
@if($siteWhatsapp)
<li><i class="fab fa-whatsapp"></i> <a href="{{ $siteWhatsappLink }}" target="_blank" rel="noopener">WhatsApp</a></li>
@endif
</ul>
</div>
@endif
{{-- Horario --}}
<div class="col-lg-3 col-md-4">
@if($siteBusinessHours)
<h6 class="footer-heading">Horario</h6>
<p class="footer-hours">{!! nl2br(e($siteBusinessHours)) !!}</p>
@endif
</div>
</div>
</div>
</div>
{{-- [COMPONENT:FOOTER_ITEMS] --}}
{{-- Bottom bar com accent --}}
<div class="footer-split-bottom">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6 text-center text-md-start">
<p class="mb-0">{!! $footerCopyright !!}</p>
</div>
<div class="col-md-6 text-center text-md-end">
<nav class="footer-legal">
@if($privacyPolicyUrl)<a href="{{ $privacyPolicyUrl }}">Privacidade</a>@endif
@if($termsUrl)<a href="{{ $termsUrl }}">Termos</a>@endif
</nav>
</div>
</div>
</div>
<div class="footer-accent-bar"></div>
</div>
</footer>
/**
* CSS - Split Screen
* Hero assimetrico com divisao diagonal
*/
/* ========================================
NAVBAR
======================================== */
.header-split {
position: relative;
}
.navbar-split {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1030;
padding: 1rem 0;
transition: all 0.3s ease;
}
/* Dark scrim at the top of the hero so white nav text is visible on the light right panel */
.hero-split::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 120px;
background: linear-gradient(to bottom, rgba(0,0,0,0.4), transparent);
z-index: 4;
pointer-events: none;
}
.navbar-split.scrolled {
position: fixed;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(10px);
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
padding: 0.75rem 0;
}
.navbar-split .logo-text {
color: var(--site-header-text, #fff);
font-size: 1.5rem;
font-weight: 800;
letter-spacing: -0.5px;
}
.navbar-split.scrolled .logo-text {
color: var(--site-heading-color, #1a1a2e);
}
.navbar-split .navbar-toggler {
border: none;
color: #fff;
font-size: 1.4rem;
}
.navbar-split.scrolled .navbar-toggler {
color: var(--site-text, #333);
}
.navbar-split .nav-link {
color: var(--site-header-text, rgba(255, 255, 255, 0.9));
font-weight: 500;
padding: 0.5rem 1rem;
transition: color 0.2s;
}
.navbar-split .nav-link:hover {
color: var(--site-header-text-hover, #fff);
}
.navbar-split.scrolled .nav-link {
color: var(--site-text, #555);
}
.navbar-split.scrolled .nav-link:hover {
color: var(--site-header-accent, #7c3aed);
}
.btn-split-cta {
background: rgba(255, 255, 255, 0.15);
color: #fff;
border: 2px solid rgba(255, 255, 255, 0.4);
padding: 0.45rem 1.5rem;
border-radius: var(--site-btn-border-radius, 6px);
font-weight: 600;
transition: all 0.3s;
}
.btn-split-cta:hover {
background: #fff;
color: var(--site-header-accent, #7c3aed);
border-color: #fff;
}
.navbar-split.scrolled .btn-split-cta {
background: var(--site-header-accent, #7c3aed);
color: #fff;
border-color: var(--site-header-accent, #7c3aed);
}
/* ========================================
HERO SPLIT
======================================== */
.hero-split {
display: flex;
min-height: 85vh;
position: relative;
overflow: hidden;
}
.hero-split-left {
flex: 0 0 55%;
background: linear-gradient(135deg, var(--site-primary, #7c3aed) 0%, color-mix(in srgb, var(--site-primary, #7c3aed) 70%, #1a1a2e) 100%);
display: flex;
align-items: center;
padding: 6rem 0 4rem;
position: relative;
z-index: 2;
}
.hero-split-content {
max-width: 540px;
margin-left: auto;
padding: 0 3rem 0 1rem;
}
.hero-split-badge {
display: inline-block;
background: rgba(255, 255, 255, 0.15);
color: #fff;
padding: 0.4rem 1rem;
border-radius: 50px;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 1.5rem;
backdrop-filter: blur(8px);
}
.hero-split-title {
color: #fff;
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 800;
line-height: 1.1;
margin-bottom: 1.25rem;
letter-spacing: -1.5px;
}
.hero-split-text {
color: rgba(255, 255, 255, 0.85);
font-size: 1.1rem;
line-height: 1.7;
margin-bottom: 2rem;
}
.hero-split-actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.btn-split-primary {
background: #fff;
color: var(--site-primary, #7c3aed);
padding: 0.85rem 2rem;
border-radius: var(--site-btn-border-radius, 6px);
font-weight: 700;
border: none;
text-decoration: none;
transition: all 0.3s;
}
.btn-split-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
color: var(--site-primary, #7c3aed);
}
.btn-split-outline {
background: transparent;
color: #fff;
padding: 0.85rem 2rem;
border-radius: var(--site-btn-border-radius, 6px);
font-weight: 600;
border: 2px solid rgba(255, 255, 255, 0.4);
text-decoration: none;
transition: all 0.3s;
}
.btn-split-outline:hover {
background: rgba(255, 255, 255, 0.1);
border-color: #fff;
color: #fff;
}
/* ========================================
HERO RIGHT - PATTERN
======================================== */
.hero-split-right {
flex: 0 0 45%;
background: color-mix(in srgb, var(--site-primary, #7c3aed) 8%, var(--site-background-alt, #f1f5f9));
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
}
.hero-split-pattern {
position: relative;
width: 300px;
height: 300px;
}
.pattern-dot {
position: absolute;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--site-primary, #7c3aed);
opacity: 0.2;
}
.pattern-dot:nth-child(1) { top: 10%; left: 20%; }
.pattern-dot:nth-child(2) { top: 30%; right: 15%; opacity: 0.35; }
.pattern-dot:nth-child(3) { bottom: 25%; left: 40%; opacity: 0.15; }
.pattern-dot:nth-child(4) { bottom: 10%; right: 30%; opacity: 0.25; }
.pattern-line {
position: absolute;
top: 50%;
left: 10%;
width: 80%;
height: 2px;
background: linear-gradient(90deg, transparent, var(--site-primary, #7c3aed), transparent);
opacity: 0.15;
}
.pattern-circle {
position: absolute;
top: 15%;
right: 10%;
width: 120px;
height: 120px;
border: 3px solid var(--site-primary, #7c3aed);
border-radius: 50%;
opacity: 0.12;
}
.pattern-square {
position: absolute;
bottom: 15%;
left: 15%;
width: 80px;
height: 80px;
border: 3px solid var(--site-primary, #7c3aed);
opacity: 0.12;
transform: rotate(15deg);
}
/* Diagonal divider */
.hero-split-diagonal {
position: absolute;
top: 0;
bottom: 0;
left: 53%;
width: 8%;
background: linear-gradient(135deg, var(--site-primary, #7c3aed) 0%, color-mix(in srgb, var(--site-primary, #7c3aed) 70%, #1a1a2e) 100%);
clip-path: polygon(0 0, 100% 0, 30% 100%, 0 100%);
z-index: 3;
}
/* ========================================
CONTENT
======================================== */
.split-screen-content {
min-height: 60vh;
position: relative;
z-index: 1;
}
/* ========================================
FOOTER
======================================== */
.footer-split-main {
background: var(--site-footer-bg, #1e293b);
padding: 4rem 0;
}
.footer-split .footer-brand-text {
color: var(--site-footer-heading, #fff);
font-size: 1.4rem;
font-weight: 800;
margin-bottom: 1rem;
letter-spacing: -0.5px;
}
.footer-split .footer-about {
color: var(--site-footer-text, rgba(255, 255, 255, 0.6));
font-size: 0.9rem;
line-height: 1.6;
margin-top: 0.75rem;
}
.footer-split .footer-social {
display: flex;
gap: 0.6rem;
margin-top: 1.25rem;
}
.footer-split .footer-social a {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.7);
border-radius: var(--site-btn-border-radius, 6px);
transition: all 0.3s;
}
.footer-split .footer-social a:hover {
background: var(--site-footer-accent, #7c3aed);
color: #fff;
transform: translateY(-2px);
}
.footer-split .footer-heading {
color: var(--site-footer-heading, #fff);
font-weight: 700;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 1.25rem;
}
.footer-split .footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-split .footer-links li { margin-bottom: 0.6rem; }
.footer-split .footer-links a {
color: var(--site-footer-text, rgba(255, 255, 255, 0.6));
text-decoration: none;
transition: color 0.2s;
}
.footer-split .footer-links a:hover { color: #fff; }
.footer-split .footer-contact {
list-style: none;
padding: 0;
margin: 0;
}
.footer-split .footer-contact li {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
color: var(--site-footer-text, rgba(255, 255, 255, 0.6));
font-size: 0.9rem;
}
.footer-split .footer-contact i {
color: var(--site-footer-accent, #7c3aed);
width: 18px;
text-align: center;
}
.footer-split .footer-contact a {
color: var(--site-footer-text, rgba(255, 255, 255, 0.6));
text-decoration: none;
transition: color 0.2s;
}
.footer-split .footer-contact a:hover { color: #fff; }
.footer-split .footer-hours {
color: var(--site-footer-text, rgba(255, 255, 255, 0.6));
font-size: 0.9rem;
line-height: 1.7;
}
/* Bottom bar */
.footer-split-bottom {
background: color-mix(in srgb, var(--site-footer-bg, #1e293b) 80%, black);
padding: 1.25rem 0 0;
position: relative;
}
.footer-split-bottom p,
.footer-split-bottom a {
color: rgba(255, 255, 255, 0.5);
font-size: 0.85rem;
}
.footer-split-bottom a:hover { color: #fff; }
.footer-split .footer-legal {
display: flex;
justify-content: center;
gap: 1.5rem;
}
@media (min-width: 768px) {
.footer-split .footer-legal { justify-content: flex-end; }
}
.footer-accent-bar {
height: 4px;
background: linear-gradient(90deg, var(--site-primary, #7c3aed), color-mix(in srgb, var(--site-primary, #7c3aed) 50%, #ec4899));
margin-top: 1.25rem;
}
/* ========================================
RESPONSIVE
======================================== */
@media (max-width: 991.98px) {
.hero-split {
flex-direction: column;
min-height: auto;
}
.hero-split-left {
flex: none;
padding: 7rem 1.5rem 3rem;
}
.hero-split-content {
max-width: 100%;
margin: 0;
padding: 0;
}
.hero-split-right {
flex: none;
padding: 3rem 1.5rem;
min-height: 200px;
}
.hero-split-diagonal {
display: none;
}
.navbar-split .navbar-collapse {
background: rgba(0, 0, 0, 0.95);
margin: 0.5rem -0.75rem 0;
padding: 1rem;
border-radius: 8px;
}
}
neon-cyberTema escuro com efeitos de brilho neon. Grid decorativo, glow nos botoes e visual cyberpunk.
Header Neon Cyber - Dark futurista com efeitos neon. O header utiliza a classe site-header header-neon como elemento raiz. O conteudo do header esta dentro de um .container do Bootstrap, limitando a largura maxima. O conteudo das paginas e inserido dentro de <main> com classe site-content neon-cyber-content. O placeholder [[CONTENT]] e substituido pelo conteudo renderizado de cada pagina. Rodape: Newsletter. Possui markers para insercao automatica de componentes: NAV_ITEMS, HEADER_UTILITY, FOOTER_ITEMS. Esses markers permitem que o sistema insira menus de modulos, utilitarios e itens do rodape automaticamente. Utiliza os componentes Blade: x-front.search-box, x-front.newsletter-form. Comportamentos JavaScript incluidos: efeito de scroll no header, scroll suave. Recomendado para: Tecnologia, Games, Baladas, E-sports.
<header>
site-header header-neon
<main>
site-content neon-cyber-content
<section>
neon-newsletter
{{-- Header Neon Cyber - Dark futurista com efeitos neon --}}
<header class="site-header header-neon" role="banner">
<nav class="navbar navbar-expand-lg navbar-neon" aria-label="Menu principal">
<div class="container">
{{-- Logo --}}
<a class="navbar-brand" href="/" aria-label="Pagina inicial - {{ $siteName }}">
@if($siteLogo)
<img src="{{ $siteLogo }}" alt="{{ $siteName }}" height="42" class="logo-img">
@else
<span class="logo-neon">{{ $siteName }}</span>
@endif
</a>
{{-- Mobile toggle --}}
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#neonNavbar"
aria-controls="neonNavbar" aria-expanded="false" aria-label="Abrir menu">
<i class="fas fa-bars"></i>
</button>
{{-- Menu --}}
<div class="collapse navbar-collapse" id="neonNavbar">
<ul class="navbar-nav ms-auto align-items-lg-center">
<li class="nav-item">
<a class="nav-link" href="/">Início</a>
</li>
{{-- [COMPONENT:NAV_ITEMS] --}}
<li class="nav-item nav-search ms-lg-2">
<x-front.search-box />
</li>
<li class="nav-item ms-lg-2">
<a class="btn btn-neon-cta" href="/contato">
<span>Contato</span>
</a>
</li>
</ul>
</div>
{{-- [COMPONENT:HEADER_UTILITY] --}}
</div>
</nav>
{{-- Hero Neon --}}
<div class="hero-neon">
<div class="neon-grid-bg"></div>
<div class="neon-glow-orb neon-orb-1"></div>
<div class="neon-glow-orb neon-orb-2"></div>
<div class="container position-relative" style="z-index: 2;">
<div class="row justify-content-center">
<div class="col-lg-8 text-center">
<div class="hero-neon-content">
<span class="neon-badge">{{ $siteTagline ?? '// Sistema Online' }}</span>
<h1 class="neon-title">{{ $siteName }}</h1>
<p class="neon-subtitle">Tecnologia de ponta para seu negocio. Solucoes digitais que fazem a diferenca.</p>
<div class="neon-actions">
<a href="/contato" class="btn btn-neon-primary">
Comecar <i class="fas fa-terminal ms-2"></i>
</a>
<a href="/sobre" class="btn btn-neon-ghost">Explorar</a>
</div>
</div>
</div>
</div>
</div>
<div class="neon-scanline"></div>
</div>
</header>
{{-- Newsletter --}}
<section class="neon-newsletter">
<div class="container">
<div class="neon-newsletter-card">
<div class="row align-items-center">
<div class="col-lg-5 mb-3 mb-lg-0">
<h3 class="text-white mb-1">Newsletter</h3>
<p style="color: rgba(255,255,255,0.5); margin-bottom: 0;">Receba updates e novidades.</p>
</div>
<div class="col-lg-7">
<x-front.newsletter-form layout="inline" theme="dark" />
</div>
</div>
</div>
</div>
</section>
{{-- Footer Neon --}}
<footer class="site-footer footer-neon" role="contentinfo" itemscope itemtype="https://schema.org/Organization">
<div class="footer-neon-main">
<div class="container">
<div class="row gy-4">
<div class="col-lg-4">
@if($siteLogoFooter ?? $siteLogo)
<img src="{{ $siteLogoFooter ?? $siteLogo }}" alt="{{ $siteName }}" height="40" class="footer-logo mb-3" itemprop="logo">
@else
<h5 class="footer-neon-brand" itemprop="name">{{ $siteName }}</h5>
@endif
<p class="footer-neon-about" itemprop="description">{{ $footerAbout }}</p>
@if($footerShowSocial)
<div class="footer-neon-social">
@if($siteFacebook)<a href="{{ $siteFacebook }}" target="_blank" rel="noopener" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>@endif
@if($siteInstagram)<a href="{{ $siteInstagram }}" target="_blank" rel="noopener" aria-label="Instagram"><i class="fab fa-instagram"></i></a>@endif
@if($siteLinkedin)<a href="{{ $siteLinkedin }}" target="_blank" rel="noopener" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>@endif
@if($siteYoutube)<a href="{{ $siteYoutube }}" target="_blank" rel="noopener" aria-label="YouTube"><i class="fab fa-youtube"></i></a>@endif
</div>
@endif
</div>
<div class="col-lg-2 col-md-4">
<h6 class="footer-neon-heading">Links</h6>
<ul class="footer-neon-links">
<li><a href="/">Inicio</a></li>
<li><a href="/sobre">Sobre</a></li>
<li><a href="/contato">Contato</a></li>
</ul>
</div>
@if($footerShowContact)
<div class="col-lg-3 col-md-4">
<h6 class="footer-neon-heading">Contato</h6>
<ul class="footer-neon-contact">
@if($siteEmail)<li><i class="fas fa-envelope"></i> <a href="mailto:{{ $siteEmail }}" itemprop="email">{{ $siteEmail }}</a></li>@endif
@if($sitePhone)<li><i class="fas fa-phone"></i> <a href="tel:{{ preg_replace('/[^0-9+]/', '', $sitePhone) }}" itemprop="telephone">{{ $sitePhone }}</a></li>@endif
@if($siteWhatsapp)<li><i class="fab fa-whatsapp"></i> <a href="{{ $siteWhatsappLink }}" target="_blank" rel="noopener">WhatsApp</a></li>@endif
</ul>
</div>
@endif
<div class="col-lg-3 col-md-4">
@if($siteBusinessHours)
<h6 class="footer-neon-heading">Horario</h6>
<p class="footer-neon-hours">{!! nl2br(e($siteBusinessHours)) !!}</p>
@endif
</div>
</div>
</div>
</div>
{{-- [COMPONENT:FOOTER_ITEMS] --}}
<div class="footer-neon-bottom">
<div class="neon-line-glow"></div>
<div class="container">
<div class="row align-items-center">
<div class="col-md-6 text-center text-md-start">
<p class="mb-0">{!! $footerCopyright !!}</p>
</div>
<div class="col-md-6 text-center text-md-end">
<nav class="footer-legal">
@if($privacyPolicyUrl)<a href="{{ $privacyPolicyUrl }}">Privacidade</a>@endif
@if($termsUrl)<a href="{{ $termsUrl }}">Termos</a>@endif
</nav>
</div>
</div>
</div>
</div>
</footer>
/**
* CSS - Neon Cyber
* Tema escuro futurista com efeitos neon glow
*/
:root {
--neon-color: var(--site-primary, #00ff88);
--neon-glow: 0 0 10px var(--neon-color), 0 0 30px color-mix(in srgb, var(--neon-color) 40%, transparent);
--neon-bg: #0a0a0f;
--neon-surface: #12121a;
--neon-border: #1e1e2e;
--neon-text: #a0a0b8;
}
/* ========================================
NAVBAR
======================================== */
.header-neon {
z-index: 1050 !important;
}
.navbar-neon {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1050;
padding: 1rem 0;
background: rgba(10, 10, 15, 0.85) !important;
backdrop-filter: blur(16px);
border-bottom: 1px solid var(--neon-border);
transition: all 0.3s;
}
.navbar-neon.scrolled {
padding: 0.7rem 0;
border-bottom-color: color-mix(in srgb, var(--site-header-accent, #00ff88) 25%, transparent);
box-shadow: 0 2px 30px color-mix(in srgb, var(--site-header-accent, #00ff88) 10%, transparent);
}
.logo-neon {
color: var(--site-header-text, #fff);
font-size: 1.5rem;
font-weight: 800;
letter-spacing: -0.5px;
}
.logo-neon:hover {
text-shadow: var(--neon-glow);
}
.navbar-neon .navbar-toggler {
border: 1px solid var(--neon-border);
color: var(--neon-text);
padding: 0.4rem 0.75rem;
}
.navbar-neon .nav-link {
color: var(--site-header-text, var(--neon-text));
font-weight: 500;
padding: 0.5rem 1rem;
transition: color 0.2s, text-shadow 0.3s;
font-size: 0.9rem;
}
.navbar-neon .nav-link:hover,
.navbar-neon .nav-link.active {
color: var(--site-header-text-hover, var(--site-header-accent, #00ff88));
text-shadow: 0 0 8px color-mix(in srgb, var(--site-header-accent, #00ff88) 50%, transparent);
}
.btn-neon-cta {
border: 1px solid var(--site-header-accent, #00ff88);
color: var(--site-header-accent, #00ff88);
padding: 0.45rem 1.25rem;
border-radius: var(--site-btn-border-radius, 4px);
font-weight: 600;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: all 0.3s;
text-decoration: none;
}
.btn-neon-cta:hover {
background: var(--site-header-accent, #00ff88);
color: var(--neon-bg);
box-shadow: var(--neon-glow);
}
/* ========================================
HERO
======================================== */
.hero-neon {
background: var(--neon-bg);
min-height: 85vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
padding-top: 80px;
}
.neon-grid-bg {
position: absolute;
inset: 0;
background-image:
linear-gradient(color-mix(in srgb, var(--neon-color) 4%, transparent) 1px, transparent 1px),
linear-gradient(90deg, color-mix(in srgb, var(--neon-color) 4%, transparent) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}
.neon-glow-orb {
position: absolute;
border-radius: 50%;
filter: blur(100px);
pointer-events: none;
}
.neon-orb-1 {
width: 400px;
height: 400px;
background: color-mix(in srgb, var(--neon-color) 15%, transparent);
top: -100px;
right: -100px;
}
.neon-orb-2 {
width: 300px;
height: 300px;
background: color-mix(in srgb, var(--site-accent, #a855f7) 12%, transparent);
bottom: -50px;
left: -50px;
}
.hero-neon-content {
padding: 3rem 0;
}
.neon-badge {
display: inline-block;
color: var(--neon-color);
font-family: 'Courier New', monospace;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 1.5rem;
padding: 0.4rem 1rem;
border: 1px solid color-mix(in srgb, var(--neon-color) 30%, transparent);
border-radius: 4px;
background: color-mix(in srgb, var(--neon-color) 5%, transparent);
}
.neon-title {
color: #fff;
font-size: clamp(3rem, 7vw, 5rem);
font-weight: 900;
line-height: 1;
margin-bottom: 1.5rem;
letter-spacing: -3px;
text-shadow: 0 0 40px color-mix(in srgb, var(--neon-color) 20%, transparent);
}
.neon-subtitle {
color: var(--neon-text);
font-size: 1.15rem;
line-height: 1.7;
max-width: 500px;
margin: 0 auto 2.5rem;
}
.neon-actions {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
}
.btn-neon-primary {
background: var(--neon-color);
color: var(--neon-bg);
padding: 0.9rem 2rem;
border-radius: var(--site-btn-border-radius, 4px);
font-weight: 700;
border: none;
text-decoration: none;
transition: all 0.3s;
}
.btn-neon-primary:hover {
box-shadow: var(--neon-glow);
transform: translateY(-2px);
color: var(--neon-bg);
}
.btn-neon-ghost {
background: transparent;
color: #fff;
padding: 0.9rem 2rem;
border-radius: var(--site-btn-border-radius, 4px);
font-weight: 600;
border: 1px solid var(--neon-border);
text-decoration: none;
transition: all 0.3s;
}
.btn-neon-ghost:hover {
border-color: var(--neon-color);
color: var(--neon-color);
}
/* Scanline overlay */
.neon-scanline {
position: absolute;
inset: 0;
pointer-events: none;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0, 0, 0, 0.03) 2px,
rgba(0, 0, 0, 0.03) 4px
);
}
/* ========================================
CONTENT
======================================== */
.neon-cyber-content {
background: var(--neon-bg);
color: var(--neon-text);
min-height: 60vh;
position: relative;
z-index: 1;
}
/* ========================================
NEWSLETTER
======================================== */
.neon-newsletter {
background: var(--neon-bg);
padding: 3rem 0;
}
.neon-newsletter-card {
background: var(--neon-surface);
border: 1px solid var(--neon-border);
border-radius: 8px;
padding: 2rem;
}
/* ========================================
FOOTER
======================================== */
.footer-neon-main {
background: var(--neon-surface);
padding: 4rem 0;
border-top: 1px solid var(--neon-border);
}
.footer-neon-brand {
color: var(--site-footer-heading, #fff);
font-size: 1.4rem;
font-weight: 800;
margin-bottom: 1rem;
}
.footer-neon-about {
color: var(--site-footer-text, var(--neon-text));
font-size: 0.9rem;
line-height: 1.6;
}
.footer-neon-social {
display: flex;
gap: 0.6rem;
margin-top: 1.25rem;
}
.footer-neon-social a {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--neon-border);
color: var(--neon-text);
border-radius: 4px;
transition: all 0.3s;
}
.footer-neon-social a:hover {
border-color: var(--site-footer-accent, #00ff88);
color: var(--site-footer-accent, #00ff88);
box-shadow: 0 0 12px color-mix(in srgb, var(--site-footer-accent, #00ff88) 25%, transparent);
}
.footer-neon-heading {
color: var(--site-footer-heading, var(--site-footer-accent, #00ff88));
font-weight: 700;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: 1.25rem;
}
.footer-neon-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-neon-links li { margin-bottom: 0.6rem; }
.footer-neon-links a {
color: var(--site-footer-text, var(--neon-text));
text-decoration: none;
transition: color 0.2s;
}
.footer-neon-links a:hover { color: var(--site-footer-accent, #00ff88); }
.footer-neon-contact {
list-style: none;
padding: 0;
margin: 0;
}
.footer-neon-contact li {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
color: var(--site-footer-text, var(--neon-text));
font-size: 0.9rem;
}
.footer-neon-contact i {
color: var(--site-footer-accent, #00ff88);
width: 18px;
text-align: center;
}
.footer-neon-contact a {
color: var(--site-footer-text, var(--neon-text));
text-decoration: none;
transition: color 0.2s;
}
.footer-neon-contact a:hover { color: var(--site-footer-accent, #00ff88); }
.footer-neon-hours {
color: var(--site-footer-text, var(--neon-text));
font-size: 0.9rem;
line-height: 1.7;
}
/* Bottom */
.footer-neon-bottom {
background: var(--neon-bg);
padding: 1.25rem 0;
position: relative;
}
.neon-line-glow {
height: 1px;
background: linear-gradient(90deg, transparent, var(--site-footer-accent, #00ff88), transparent);
opacity: 0.4;
position: absolute;
top: 0;
left: 0;
right: 0;
}
.footer-neon-bottom p,
.footer-neon-bottom a {
color: rgba(255, 255, 255, 0.4);
font-size: 0.85rem;
}
.footer-neon-bottom a:hover { color: var(--site-footer-accent, #00ff88); }
.footer-neon .footer-legal {
display: flex;
justify-content: center;
gap: 1.5rem;
}
@media (min-width: 768px) {
.footer-neon .footer-legal { justify-content: flex-end; }
}
/* ========================================
RESPONSIVE
======================================== */
@media (max-width: 991.98px) {
.navbar-neon .navbar-collapse {
background: var(--neon-surface);
margin: 0.5rem -0.75rem 0;
padding: 1rem;
border: 1px solid var(--neon-border);
border-radius: 4px;
}
}
organic-wavesDesign suave com formas organicas, blob shapes animados e divisores ondulados. Acolhedor e natural.
Header Organic Waves - Suave, natural, acolhedor. O header utiliza a classe site-header header-organic como elemento raiz. O conteudo do header esta dentro de um .container do Bootstrap, limitando a largura maxima. O conteudo das paginas e inserido dentro de <main> com classe site-content organic-waves-content {{ $isHome ? '' : 'inner-page' }}. O placeholder [[CONTENT]] e substituido pelo conteudo renderizado de cada pagina. Rodape: Newsletter. Possui markers para insercao automatica de componentes: NAV_ITEMS, HEADER_UTILITY, FOOTER_ITEMS. Esses markers permitem que o sistema insira menus de modulos, utilitarios e itens do rodape automaticamente. Utiliza os componentes Blade: x-front.search-box, x-front.newsletter-form. Comportamentos JavaScript incluidos: efeito de scroll no header, animacoes de entrada (fade-in), scroll suave. Recomendado para: Spas, Clinicas, Alimentacao, Eco.
<header>
site-header header-organic
<main>
site-content organic-waves-content {{ $isHome ? '' : 'inner-page' }}
<div>
container
{{-- Header Organic Waves - Suave, natural, acolhedor --}}
<header class="site-header header-organic" role="banner">
<nav class="navbar navbar-expand-lg navbar-organic {{ $isHome ? '' : 'navbar-inner' }}" aria-label="Menu principal">
<div class="container">
<a class="navbar-brand" href="/" aria-label="Pagina inicial - {{ $siteName }}">
@if($siteLogo)
<img src="{{ $siteLogo }}" alt="{{ $siteName }}" height="45" class="logo-img">
@else
<span class="logo-organic">{{ $siteName }}</span>
@endif
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#organicNavbar"
aria-controls="organicNavbar" aria-expanded="false" aria-label="Abrir menu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="organicNavbar">
<ul class="navbar-nav ms-auto align-items-lg-center">
<li class="nav-item">
<a class="nav-link" href="/">Início</a>
</li>
{{-- [COMPONENT:NAV_ITEMS] --}}
<li class="nav-item nav-search ms-lg-2">
<x-front.search-box />
</li>
<li class="nav-item ms-lg-2">
<a class="btn btn-organic-cta" href="/contato">
<i class="fas fa-leaf me-1"></i> Fale Conosco
</a>
</li>
</ul>
</div>
{{-- [COMPONENT:HEADER_UTILITY] --}}
</div>
</nav>
@if($isHome)
{{-- Hero com blobs organicos — apenas na home --}}
<div class="hero-organic">
<div class="organic-blob organic-blob-1"></div>
<div class="organic-blob organic-blob-2"></div>
<div class="organic-blob organic-blob-3"></div>
<div class="container position-relative" style="z-index: 2;">
<div class="row align-items-center">
<div class="col-lg-7">
<div class="hero-organic-content">
<span class="organic-badge"><i class="fas fa-seedling me-1"></i> {{ $siteTagline ?? 'Natural e Acolhedor' }}</span>
<h1 class="organic-title">{{ $siteName }}</h1>
<p class="organic-subtitle">Um espaco pensado para voce. Cuidado, qualidade e bem-estar em cada detalhe.</p>
<div class="organic-actions">
<a href="/contato" class="btn btn-organic-primary">Agende Agora</a>
<a href="/sobre" class="btn btn-organic-outline">Conheca</a>
</div>
</div>
</div>
<div class="col-lg-5 d-none d-lg-flex justify-content-center">
<div class="organic-visual">
<div class="organic-circle organic-circle-1"><i class="fas fa-heart"></i></div>
<div class="organic-circle organic-circle-2"><i class="fas fa-spa"></i></div>
<div class="organic-circle organic-circle-3"><i class="fas fa-leaf"></i></div>
</div>
</div>
</div>
</div>
{{-- Wave divider --}}
<div class="organic-wave">
<svg viewBox="0 0 1440 120" preserveAspectRatio="none">
<path d="M0,80 C240,120 480,20 720,60 C960,100 1200,30 1440,70 L1440,120 L0,120 Z" fill="currentColor"/>
</svg>
</div>
</div>
@endif
</header>
{{-- Newsletter --}}
<section style="background: var(--site-background-alt, #f0fdf4); padding: 3.5rem 0;">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-5 mb-3 mb-lg-0">
<h3 style="margin-bottom: 0.25rem;">Fique por dentro</h3>
<p class="text-muted mb-0">Receba dicas de bem-estar e novidades exclusivas.</p>
</div>
<div class="col-lg-7">
<x-front.newsletter-form layout="inline" />
</div>
</div>
</div>
</section>
{{-- Footer Organic --}}
<footer class="site-footer footer-organic" role="contentinfo" itemscope itemtype="https://schema.org/Organization">
<div class="footer-organic-wave">
<svg viewBox="0 0 1440 80" preserveAspectRatio="none">
<path d="M0,40 C360,80 720,0 1080,40 C1260,60 1380,30 1440,40 L1440,80 L0,80 Z" fill="currentColor"/>
</svg>
</div>
<div class="footer-organic-main">
<div class="container">
<div class="row gy-4">
<div class="col-lg-4">
@if($siteLogoFooter ?? $siteLogo)
<img src="{{ $siteLogoFooter ?? $siteLogo }}" alt="{{ $siteName }}" height="40" class="footer-logo mb-3" itemprop="logo">
@else
<h5 class="footer-organic-brand" itemprop="name">{{ $siteName }}</h5>
@endif
<p class="footer-organic-about" itemprop="description">{{ $footerAbout }}</p>
@if($footerShowSocial)
<div class="footer-organic-social">
@if($siteFacebook)<a href="{{ $siteFacebook }}" target="_blank" rel="noopener" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>@endif
@if($siteInstagram)<a href="{{ $siteInstagram }}" target="_blank" rel="noopener" aria-label="Instagram"><i class="fab fa-instagram"></i></a>@endif
@if($siteLinkedin)<a href="{{ $siteLinkedin }}" target="_blank" rel="noopener" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>@endif
@if($siteYoutube)<a href="{{ $siteYoutube }}" target="_blank" rel="noopener" aria-label="YouTube"><i class="fab fa-youtube"></i></a>@endif
</div>
@endif
</div>
<div class="col-lg-2 col-md-4">
<h6 class="footer-organic-heading">Links</h6>
<ul class="footer-organic-links">
<li><a href="/">Inicio</a></li>
<li><a href="/sobre">Sobre</a></li>
<li><a href="/contato">Contato</a></li>
</ul>
</div>
@if($footerShowContact)
<div class="col-lg-3 col-md-4">
<h6 class="footer-organic-heading">Contato</h6>
<ul class="footer-organic-contact">
@if($siteEmail)<li><i class="fas fa-envelope"></i> <a href="mailto:{{ $siteEmail }}" itemprop="email">{{ $siteEmail }}</a></li>@endif
@if($sitePhone)<li><i class="fas fa-phone"></i> <a href="tel:{{ preg_replace('/[^0-9+]/', '', $sitePhone) }}" itemprop="telephone">{{ $sitePhone }}</a></li>@endif
@if($siteWhatsapp)<li><i class="fab fa-whatsapp"></i> <a href="{{ $siteWhatsappLink }}" target="_blank" rel="noopener">WhatsApp</a></li>@endif
</ul>
</div>
@endif
<div class="col-lg-3 col-md-4">
@if($siteBusinessHours)
<h6 class="footer-organic-heading">Horario</h6>
<p class="footer-organic-hours">{!! nl2br(e($siteBusinessHours)) !!}</p>
@endif
</div>
</div>
</div>
</div>
{{-- [COMPONENT:FOOTER_ITEMS] --}}
<div class="footer-organic-bottom">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6 text-center text-md-start">
<p class="mb-0">{!! $footerCopyright !!}</p>
</div>
<div class="col-md-6 text-center text-md-end">
<nav class="footer-legal">
@if($privacyPolicyUrl)<a href="{{ $privacyPolicyUrl }}">Privacidade</a>@endif
@if($termsUrl)<a href="{{ $termsUrl }}">Termos</a>@endif
</nav>
</div>
</div>
</div>
</div>
</footer>
/**
* CSS - Organic Waves
* Design suave com formas organicas e ondas naturais
*/
:root {
--organic-light: color-mix(in srgb, var(--site-primary, #059669) 6%, #fff);
--organic-soft: color-mix(in srgb, var(--site-primary, #059669) 12%, #f0fdf4);
}
/* ========================================
NAVBAR
======================================== */
.header-organic {
position: relative;
}
.navbar-organic {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1030;
padding: 1rem 0;
transition: all 0.3s ease;
}
.navbar-organic.scrolled {
position: fixed;
background: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(10px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
padding: 0.75rem 0;
border-radius: 0 0 24px 24px;
}
.logo-organic {
color: var(--site-header-text, #fff);
font-size: 1.5rem;
font-weight: 700;
}
.navbar-organic.scrolled .logo-organic {
color: var(--site-heading-color, #1a1a2e);
}
.navbar-organic .navbar-toggler {
border: none;
color: #fff;
font-size: 1.4rem;
}
.navbar-organic.scrolled .navbar-toggler {
color: var(--site-text, #333);
}
.navbar-organic .nav-link {
color: var(--site-header-text, rgba(255, 255, 255, 0.9));
font-weight: 500;
padding: 0.5rem 1rem;
transition: color 0.2s;
}
.navbar-organic .nav-link:hover { color: var(--site-header-text-hover, #fff); }
.navbar-organic.scrolled .nav-link { color: var(--site-text, #555); }
.navbar-organic.scrolled .nav-link:hover { color: var(--site-header-accent, #059669); }
.btn-organic-cta {
background: rgba(255, 255, 255, 0.2);
color: #fff;
border: 2px solid rgba(255, 255, 255, 0.4);
padding: 0.45rem 1.25rem;
border-radius: 50px;
font-weight: 600;
transition: all 0.3s;
text-decoration: none;
}
.btn-organic-cta:hover {
background: #fff;
color: var(--site-header-accent, #059669);
border-color: #fff;
}
.navbar-organic.scrolled .btn-organic-cta {
background: var(--site-header-accent, #059669);
color: #fff;
border-color: var(--site-header-accent, #059669);
}
/* ========================================
NAVBAR — PÁGINAS INTERNAS (sem hero)
======================================== */
.navbar-organic.navbar-inner {
position: fixed;
background: linear-gradient(160deg, var(--site-primary, #059669) 0%, color-mix(in srgb, var(--site-primary, #059669) 65%, #34d399) 100%);
padding: 0.75rem 0;
}
.navbar-organic.navbar-inner.scrolled {
background: linear-gradient(160deg, var(--site-primary, #059669) 0%, color-mix(in srgb, var(--site-primary, #059669) 65%, #34d399) 100%);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
border-radius: 0;
}
.navbar-organic.navbar-inner.scrolled .nav-link {
color: rgba(255, 255, 255, 0.9);
}
.navbar-organic.navbar-inner.scrolled .nav-link:hover {
color: #fff;
}
.navbar-organic.navbar-inner.scrolled .logo-organic {
color: #fff;
}
.navbar-organic.navbar-inner.scrolled .btn-organic-cta {
background-color: rgba(255, 255, 255, 0.2);
color: #fff;
border-color: rgba(255, 255, 255, 0.5);
}
.navbar-organic.navbar-inner .btn-organic-cta:hover,
.navbar-organic.navbar-inner.scrolled .btn-organic-cta:hover {
background-color: rgba(255, 255, 255, 0.35);
color: #fff;
border-color: #fff;
}
/* Compensar navbar fixed nas internas */
.organic-waves-content.inner-page {
padding-top: 80px;
}
/* ========================================
HERO
======================================== */
.hero-organic {
background: linear-gradient(160deg, var(--site-primary, #059669) 0%, color-mix(in srgb, var(--site-primary, #059669) 65%, #34d399) 100%);
min-height: 80vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
padding-top: 80px;
}
.organic-blob {
position: absolute;
background: rgba(255, 255, 255, 0.08);
pointer-events: none;
}
.organic-blob-1 {
width: 500px;
height: 500px;
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
top: -120px;
right: -80px;
animation: blobMorph1 12s ease-in-out infinite;
}
.organic-blob-2 {
width: 300px;
height: 300px;
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
bottom: 10%;
left: -60px;
animation: blobMorph2 10s ease-in-out infinite;
}
.organic-blob-3 {
width: 200px;
height: 200px;
border-radius: 40% 60% 70% 30% / 40% 50% 50% 60%;
top: 30%;
right: 15%;
animation: blobMorph1 8s ease-in-out infinite reverse;
}
@keyframes blobMorph1 {
0%, 100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
50% { border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%; }
}
@keyframes blobMorph2 {
0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
50% { border-radius: 30% 70% 60% 40% / 40% 60% 30% 70%; }
}
.hero-organic-content {
padding: 3rem 0;
position: relative;
z-index: 2;
}
.organic-badge {
display: inline-block;
background: rgba(255, 255, 255, 0.2);
color: #fff;
padding: 0.5rem 1.25rem;
border-radius: 50px;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 1.5rem;
backdrop-filter: blur(8px);
}
.organic-title {
color: #fff;
font-size: clamp(2.5rem, 5.5vw, 3.75rem);
font-weight: 800;
line-height: 1.15;
margin-bottom: 1.25rem;
}
.organic-subtitle {
color: rgba(255, 255, 255, 0.9);
font-size: 1.15rem;
line-height: 1.7;
max-width: 480px;
margin-bottom: 2rem;
}
.organic-actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.btn-organic-primary {
background: #fff;
color: var(--site-primary, #059669);
padding: 0.9rem 2.25rem;
border-radius: 50px;
font-weight: 700;
border: none;
text-decoration: none;
transition: all 0.3s;
}
.btn-organic-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
color: var(--site-primary, #059669);
}
.btn-organic-outline {
background: transparent;
color: #fff;
padding: 0.9rem 2.25rem;
border-radius: 50px;
font-weight: 600;
border: 2px solid rgba(255, 255, 255, 0.4);
text-decoration: none;
transition: all 0.3s;
}
.btn-organic-outline:hover {
background: rgba(255, 255, 255, 0.1);
border-color: #fff;
color: #fff;
}
/* Visual circles */
.organic-visual {
position: relative;
width: 280px;
height: 280px;
}
.organic-circle {
position: absolute;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.5rem;
}
.organic-circle-1 {
width: 120px;
height: 120px;
border-radius: 50%;
top: 0;
left: 10%;
animation: organicFloat 5s ease-in-out infinite;
}
.organic-circle-2 {
width: 100px;
height: 100px;
border-radius: 40% 60% 50% 50% / 50% 40% 60% 50%;
top: 40%;
right: 0;
animation: organicFloat 4s ease-in-out infinite 0.5s;
}
.organic-circle-3 {
width: 90px;
height: 90px;
border-radius: 50% 50% 40% 60% / 60% 40% 60% 40%;
bottom: 0;
left: 25%;
animation: organicFloat 6s ease-in-out infinite 1s;
}
@keyframes organicFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
}
/* Wave */
.organic-wave {
position: absolute;
bottom: 0;
left: 0;
right: 0;
color: var(--site-background, #fff);
line-height: 0;
}
.organic-wave svg {
width: 100%;
height: 80px;
}
/* ========================================
CONTENT
======================================== */
.organic-waves-content {
min-height: 60vh;
position: relative;
z-index: 1;
}
/* ========================================
FOOTER
======================================== */
.footer-organic-wave {
color: var(--site-footer-bg, #1e3a2e);
line-height: 0;
background: var(--site-background-alt, #f0fdf4);
}
.footer-organic-wave svg {
width: 100%;
height: 60px;
}
.footer-organic-main {
background: var(--site-footer-bg, #1e3a2e);
padding: 3rem 0 4rem;
}
.footer-organic-brand {
color: var(--site-footer-heading, #fff);
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 1rem;
}
.footer-organic-about {
color: var(--site-footer-text, rgba(255, 255, 255, 0.6));
font-size: 0.9rem;
line-height: 1.6;
}
.footer-organic-social {
display: flex;
gap: 0.6rem;
margin-top: 1.25rem;
}
.footer-organic-social a {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.1);
color: #fff;
border-radius: 50%;
transition: all 0.3s;
}
.footer-organic-social a:hover {
background: var(--site-footer-accent, #059669);
transform: translateY(-2px);
}
.footer-organic-heading {
color: var(--site-footer-heading, #fff);
font-weight: 700;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 1.25rem;
}
.footer-organic-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-organic-links li { margin-bottom: 0.6rem; }
.footer-organic-links a {
color: var(--site-footer-text, rgba(255, 255, 255, 0.6));
text-decoration: none;
transition: color 0.2s;
}
.footer-organic-links a:hover { color: #fff; }
.footer-organic-contact {
list-style: none;
padding: 0;
margin: 0;
}
.footer-organic-contact li {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
color: var(--site-footer-text, rgba(255, 255, 255, 0.6));
font-size: 0.9rem;
}
.footer-organic-contact i {
color: var(--site-footer-accent, #059669);
width: 18px;
text-align: center;
}
.footer-organic-contact a {
color: var(--site-footer-text, rgba(255, 255, 255, 0.6));
text-decoration: none;
transition: color 0.2s;
}
.footer-organic-contact a:hover { color: #fff; }
.footer-organic-hours {
color: var(--site-footer-text, rgba(255, 255, 255, 0.6));
font-size: 0.9rem;
line-height: 1.7;
}
.footer-organic-bottom {
background: color-mix(in srgb, var(--site-footer-bg, #1e3a2e) 80%, black);
padding: 1.25rem 0;
}
.footer-organic-bottom p,
.footer-organic-bottom a {
color: rgba(255, 255, 255, 0.5);
font-size: 0.85rem;
}
.footer-organic-bottom a:hover { color: #fff; }
.footer-organic .footer-legal {
display: flex;
justify-content: center;
gap: 1.5rem;
}
@media (min-width: 768px) {
.footer-organic .footer-legal { justify-content: flex-end; }
}
/* ========================================
RESPONSIVE
======================================== */
@media (max-width: 991.98px) {
.navbar-organic .navbar-collapse {
background: rgba(255, 255, 255, 0.97);
margin: 0.5rem -0.75rem 0;
padding: 1rem;
border-radius: 16px;
}
.navbar-organic .navbar-collapse .nav-link { color: var(--site-text, #333); }
.navbar-organic .navbar-collapse .btn-organic-cta {
background: var(--site-header-accent, #059669);
color: #fff;
border-color: var(--site-header-accent, #059669);
}
}
bold-typeTipografia gigante como protagonista. Titulos enormes, design minimalista e alto impacto visual.
Header Bold Type - Tipografia impactante. O header utiliza a classe site-header header-boldtype como elemento raiz. O conteudo do header esta dentro de um .container do Bootstrap, limitando a largura maxima. O conteudo das paginas e inserido dentro de <main> com classe site-content bold-type-content. O placeholder [[CONTENT]] e substituido pelo conteudo renderizado de cada pagina. Rodape: Newsletter. Possui markers para insercao automatica de componentes: NAV_ITEMS, HEADER_UTILITY, FOOTER_ITEMS. Esses markers permitem que o sistema insira menus de modulos, utilitarios e itens do rodape automaticamente. Utiliza os componentes Blade: x-front.search-box, x-front.newsletter-form. Comportamentos JavaScript incluidos: efeito de scroll no header, animacoes de entrada (fade-in), scroll suave. Recomendado para: Arquitetura, Moda, Fotografia, Design.
<header>
site-header header-boldtype
<main>
site-content bold-type-content
<div>
container
{{-- Header Bold Type - Tipografia impactante --}}
<header class="site-header header-boldtype" role="banner">
<nav class="navbar navbar-expand-lg navbar-boldtype" aria-label="Menu principal">
<div class="container">
<a class="navbar-brand" href="/" aria-label="Pagina inicial - {{ $siteName }}">
@if($siteLogo)
<img src="{{ $siteLogo }}" alt="{{ $siteName }}" height="40" class="logo-img">
@else
<span class="logo-boldtype">{{ $siteName }}</span>
@endif
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#boldtypeNavbar"
aria-controls="boldtypeNavbar" aria-expanded="false" aria-label="Abrir menu">
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="boldtypeNavbar">
<ul class="navbar-nav ms-auto align-items-lg-center">
<li class="nav-item">
<a class="nav-link" href="/">Início</a>
</li>
{{-- [COMPONENT:NAV_ITEMS] --}}
<li class="nav-item nav-search ms-lg-3">
<x-front.search-box />
</li>
<li class="nav-item ms-lg-3">
<a class="btn btn-boldtype-cta" href="/contato">Contato</a>
</li>
</ul>
</div>
{{-- [COMPONENT:HEADER_UTILITY] --}}
</div>
</nav>
{{-- Hero tipografico --}}
<div class="hero-boldtype">
<div class="container">
<div class="hero-boldtype-inner">
<div class="boldtype-accent-line"></div>
<p class="boldtype-tagline">{{ $siteTagline ?? 'Design & Estrategia' }}</p>
<h1 class="boldtype-title">{{ $siteName }}</h1>
<p class="boldtype-subtitle">Criamos experiencias que deixam marca. Menos e mais.</p>
<div class="boldtype-actions">
<a href="/contato" class="btn btn-boldtype-primary">Ver Projetos <i class="fas fa-long-arrow-alt-right ms-2"></i></a>
</div>
</div>
</div>
</div>
</header>
{{-- Newsletter --}}
<section style="background: var(--site-background-alt, #f8fafc); padding: 4rem 0;">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-5 mb-3 mb-lg-0">
<h3 class="boldtype-footer-title">Newsletter</h3>
<p class="text-muted mb-0">Inspiracao direto no seu e-mail.</p>
</div>
<div class="col-lg-7">
<x-front.newsletter-form layout="inline" />
</div>
</div>
</div>
</section>
{{-- Footer Bold Type --}}
<footer class="site-footer footer-boldtype" role="contentinfo" itemscope itemtype="https://schema.org/Organization">
<div class="footer-boldtype-main">
<div class="container">
<div class="row gy-4">
<div class="col-lg-5">
@if($siteLogoFooter ?? $siteLogo)
<img src="{{ $siteLogoFooter ?? $siteLogo }}" alt="{{ $siteName }}" height="40" class="footer-logo mb-3" itemprop="logo">
@else
<h2 class="footer-boldtype-brand" itemprop="name">{{ $siteName }}</h2>
@endif
<p class="footer-boldtype-about" itemprop="description">{{ $footerAbout }}</p>
@if($footerShowSocial)
<div class="footer-boldtype-social">
@if($siteFacebook)<a href="{{ $siteFacebook }}" target="_blank" rel="noopener" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>@endif
@if($siteInstagram)<a href="{{ $siteInstagram }}" target="_blank" rel="noopener" aria-label="Instagram"><i class="fab fa-instagram"></i></a>@endif
@if($siteLinkedin)<a href="{{ $siteLinkedin }}" target="_blank" rel="noopener" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>@endif
@if($siteYoutube)<a href="{{ $siteYoutube }}" target="_blank" rel="noopener" aria-label="YouTube"><i class="fab fa-youtube"></i></a>@endif
</div>
@endif
</div>
<div class="col-lg-3 col-md-6">
<h6 class="footer-boldtype-heading">Links</h6>
<ul class="footer-boldtype-links">
<li><a href="/">Inicio</a></li>
<li><a href="/sobre">Sobre</a></li>
<li><a href="/contato">Contato</a></li>
</ul>
</div>
@if($footerShowContact)
<div class="col-lg-4 col-md-6">
<h6 class="footer-boldtype-heading">Contato</h6>
<ul class="footer-boldtype-contact">
@if($siteEmail)<li><a href="mailto:{{ $siteEmail }}" itemprop="email">{{ $siteEmail }}</a></li>@endif
@if($sitePhone)<li><a href="tel:{{ preg_replace('/[^0-9+]/', '', $sitePhone) }}" itemprop="telephone">{{ $sitePhone }}</a></li>@endif
@if($siteWhatsapp)<li><a href="{{ $siteWhatsappLink }}" target="_blank" rel="noopener">WhatsApp</a></li>@endif
</ul>
</div>
@endif
</div>
</div>
</div>
{{-- [COMPONENT:FOOTER_ITEMS] --}}
<div class="footer-boldtype-bottom">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6 text-center text-md-start">
<p class="mb-0">{!! $footerCopyright !!}</p>
</div>
<div class="col-md-6 text-center text-md-end">
<nav class="footer-legal">
@if($privacyPolicyUrl)<a href="{{ $privacyPolicyUrl }}">Privacidade</a>@endif
@if($termsUrl)<a href="{{ $termsUrl }}">Termos</a>@endif
</nav>
</div>
</div>
</div>
</div>
</footer>
/**
* CSS - Bold Type
* Tipografia gigante como elemento principal de design
*/
/* ========================================
NAVBAR
======================================== */
.header-boldtype {
z-index: 1050 !important;
}
.navbar-boldtype {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1050;
padding: 1.25rem 0;
background: transparent !important;
transition: all 0.3s;
}
.navbar-boldtype.scrolled {
background: rgba(255, 255, 255, 0.98) !important;
box-shadow: 0 1px 0 var(--site-border, #e2e8f0);
padding: 0.8rem 0;
}
.logo-boldtype {
font-size: 1.2rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--site-header-text, var(--site-heading-color, #111827));
}
.navbar-boldtype .navbar-toggler {
border: none;
color: var(--site-text, #333);
font-size: 1.3rem;
}
.navbar-boldtype .nav-link {
color: var(--site-header-text, var(--site-text, #555));
font-weight: 500;
padding: 0.5rem 1rem;
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 0.08em;
transition: color 0.2s;
}
.navbar-boldtype .nav-link:hover,
.navbar-boldtype .nav-link.active {
color: var(--site-header-text-hover, var(--site-header-accent, #111827));
}
.btn-boldtype-cta {
background: var(--site-heading-color, #111827);
color: #fff;
padding: 0.5rem 1.5rem;
border-radius: 0;
font-weight: 700;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.1em;
transition: all 0.3s;
text-decoration: none;
border: 2px solid var(--site-heading-color, #111827);
}
.btn-boldtype-cta:hover {
background: transparent;
color: var(--site-heading-color, #111827);
}
/* ========================================
HERO
======================================== */
.hero-boldtype {
min-height: 90vh;
display: flex;
align-items: center;
background: var(--site-background, #fff);
padding: 8rem 0 6rem;
}
.hero-boldtype-inner {
max-width: 900px;
}
.boldtype-accent-line {
width: 60px;
height: 6px;
background: var(--site-primary, #111827);
margin-bottom: 2rem;
}
.boldtype-tagline {
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--site-primary, #3d3d3d);
margin-bottom: 1.5rem;
}
.boldtype-title {
font-size: clamp(4rem, 12vw, 10rem);
font-weight: 900;
line-height: 0.9;
color: var(--site-heading-color, #111827);
letter-spacing: -0.04em;
margin-bottom: 2rem;
}
.boldtype-subtitle {
font-size: 1.25rem;
color: var(--site-text, #64748b);
line-height: 1.6;
max-width: 500px;
margin-bottom: 2.5rem;
font-weight: 400;
}
.btn-boldtype-primary {
background: transparent;
color: var(--site-heading-color, #111827);
padding: 1rem 2.5rem;
border: 2px solid var(--site-heading-color, #111827);
font-weight: 700;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.1em;
text-decoration: none;
display: inline-flex;
align-items: center;
transition: all 0.3s;
}
.btn-boldtype-primary:hover {
background: var(--site-heading-color, #111827);
color: #fff;
}
/* ========================================
CONTENT
======================================== */
.bold-type-content {
min-height: 50vh;
position: relative;
z-index: 1;
}
/* ========================================
FOOTER
======================================== */
.footer-boldtype-main {
background: var(--site-heading-color, #111827);
padding: 5rem 0;
}
.footer-boldtype-brand {
color: var(--site-footer-heading, #fff);
font-size: 2rem;
font-weight: 900;
letter-spacing: -0.02em;
margin-bottom: 1rem;
}
.footer-boldtype-about {
color: var(--site-footer-text, rgba(255, 255, 255, 0.5));
font-size: 0.95rem;
line-height: 1.7;
max-width: 400px;
}
.footer-boldtype-social {
display: flex;
gap: 1rem;
margin-top: 1.5rem;
}
.footer-boldtype-social a {
color: rgba(255, 255, 255, 0.5);
font-size: 1.1rem;
transition: color 0.2s;
}
.footer-boldtype-social a:hover { color: #fff; }
.footer-boldtype-heading {
color: var(--site-footer-heading, #fff);
font-weight: 800;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.15em;
margin-bottom: 1.5rem;
}
.footer-boldtype-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-boldtype-links li { margin-bottom: 0.75rem; }
.footer-boldtype-links a {
color: var(--site-footer-text, rgba(255, 255, 255, 0.5));
text-decoration: none;
font-size: 0.95rem;
transition: color 0.2s;
}
.footer-boldtype-links a:hover { color: #fff; }
.footer-boldtype-contact {
list-style: none;
padding: 0;
margin: 0;
}
.footer-boldtype-contact li {
margin-bottom: 0.75rem;
}
.footer-boldtype-contact a {
color: var(--site-footer-text, rgba(255, 255, 255, 0.5));
text-decoration: none;
font-size: 0.95rem;
transition: color 0.2s;
}
.footer-boldtype-contact a:hover { color: #fff; }
.footer-boldtype-bottom {
background: color-mix(in srgb, var(--site-heading-color, #111827) 85%, black);
padding: 1.25rem 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-boldtype-bottom p,
.footer-boldtype-bottom a {
color: rgba(255, 255, 255, 0.35);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.footer-boldtype-bottom a:hover { color: rgba(255, 255, 255, 0.7); }
.footer-boldtype .footer-legal {
display: flex;
justify-content: center;
gap: 1.5rem;
}
@media (min-width: 768px) {
.footer-boldtype .footer-legal { justify-content: flex-end; }
}
.boldtype-footer-title {
font-size: 1.75rem;
font-weight: 900;
letter-spacing: -0.02em;
}
/* ========================================
RESPONSIVE
======================================== */
@media (max-width: 991.98px) {
.navbar-boldtype .navbar-collapse {
background: #fff;
padding: 1rem;
margin-top: 0.5rem;
border: 1px solid var(--site-border, #e2e8f0);
}
.hero-boldtype { padding: 7rem 0 4rem; }
}
cards-modernTudo baseado em cards flutuantes. Navbar em card, hero em card, footer em cards. Estetica SaaS/tech limpa.
Header Cards Modern - Navbar flutuante em card. O header utiliza a classe site-header header-cards como elemento raiz. O conteudo do header esta dentro de um .container do Bootstrap, limitando a largura maxima. O conteudo das paginas e inserido dentro de <main> com classe site-content cards-modern-content. O placeholder [[CONTENT]] e substituido pelo conteudo renderizado de cada pagina. Rodape: Newsletter. Possui markers para insercao automatica de componentes: NAV_ITEMS, HEADER_UTILITY, FOOTER_ITEMS. Esses markers permitem que o sistema insira menus de modulos, utilitarios e itens do rodape automaticamente. Utiliza os componentes Blade: x-front.search-box, x-front.newsletter-form. Comportamentos JavaScript incluidos: efeito de scroll no header, animacoes de entrada (fade-in), scroll suave, menu mobile. Recomendado para: SaaS, Startups, Tecnologia, Apps.
<header>
site-header header-cards
<main>
site-content cards-modern-content
<section>
cards-newsletter
{{-- Header Cards Modern - Navbar flutuante em card --}}
<header class="site-header header-cards" role="banner">
<nav class="navbar navbar-expand-lg navbar-cards" aria-label="Menu principal">
<div class="container">
<div class="navbar-card">
{{-- Logo --}}
<a class="navbar-brand" href="/" aria-label="Pagina inicial - {{ $siteName }}">
@if($siteLogo)
<img src="{{ $siteLogo }}" alt="{{ $siteName }}" height="38" class="logo-img">
@else
<span class="logo-text">{{ $siteName }}</span>
@endif
</a>
{{-- Botao mobile --}}
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#cardsNavbar"
aria-controls="cardsNavbar" aria-expanded="false" aria-label="Abrir menu">
<i class="fas fa-bars"></i>
</button>
{{-- Menu --}}
<div class="collapse navbar-collapse" id="cardsNavbar">
<ul class="navbar-nav ms-auto align-items-lg-center">
<li class="nav-item">
<a class="nav-link" href="/">Início</a>
</li>
{{-- [COMPONENT:NAV_ITEMS] --}}
</ul>
{{-- Busca --}}
<div class="navbar-search ms-lg-3">
<x-front.search-box />
</div>
{{-- [COMPONENT:HEADER_UTILITY] --}}
{{-- CTA --}}
<div class="navbar-cta ms-lg-3">
<a href="/contato" class="btn btn-cards-cta btn-sm">
Fale Conosco <i class="fas fa-arrow-right ms-1"></i>
</a>
</div>
</div>
</div>
</div>
</nav>
</header>
{{-- Hero card centralizado --}}
<section class="cards-hero">
<div class="container">
<div class="cards-hero-card">
<span class="cards-hero-badge">{{ $siteTagline ?? 'Inovacao & Tecnologia' }}</span>
<h1 class="cards-hero-title">{{ $siteName }}</h1>
<p class="cards-hero-subtitle">Solucoes inteligentes para transformar o seu negocio. Simplicidade, performance e resultados.</p>
<div class="cards-hero-actions">
<a href="/contato" class="btn btn-cards-primary">
Comecar Agora <i class="fas fa-arrow-right ms-2"></i>
</a>
<a href="/sobre" class="btn btn-cards-outline">
Saiba Mais
</a>
</div>
</div>
{{-- Cards de features --}}
<div class="cards-hero-features">
<div class="row g-4 justify-content-center">
<div class="col-md-4">
<div class="feature-card">
<div class="feature-card-icon">
<i class="fas fa-bolt"></i>
</div>
<h3 class="feature-card-title">Rapido</h3>
<p class="feature-card-text">Performance otimizada para a melhor experiencia.</p>
</div>
</div>
<div class="col-md-4">
<div class="feature-card">
<div class="feature-card-icon">
<i class="fas fa-shield-alt"></i>
</div>
<h3 class="feature-card-title">Seguro</h3>
<p class="feature-card-text">Protecao de dados com as melhores praticas.</p>
</div>
</div>
<div class="col-md-4">
<div class="feature-card">
<div class="feature-card-icon">
<i class="fas fa-chart-line"></i>
</div>
<h3 class="feature-card-title">Escalavel</h3>
<p class="feature-card-text">Cresce junto com o seu negocio sem limites.</p>
</div>
</div>
</div>
</div>
</div>
</section>
{{-- Newsletter --}}
<section class="cards-newsletter">
<div class="container">
<div class="cards-newsletter-card">
<div class="row align-items-center">
<div class="col-lg-5 mb-3 mb-lg-0">
<h3 class="cards-newsletter-title">Fique por dentro</h3>
<p class="cards-newsletter-text">Receba novidades e conteudos exclusivos no seu e-mail.</p>
</div>
<div class="col-lg-7">
<x-front.newsletter-form layout="inline" />
</div>
</div>
</div>
</div>
</section>
{{-- Footer Cards Modern --}}
<footer class="site-footer footer-cards" role="contentinfo" itemscope itemtype="https://schema.org/Organization">
<div class="container">
<div class="row gy-4">
{{-- Card: Marca --}}
<div class="col-lg-4 col-md-6">
<div class="footer-card footer-card-brand">
@if($siteLogoFooter ?? $siteLogo)
<img src="{{ $siteLogoFooter ?? $siteLogo }}" alt="{{ $siteName }}" height="36" class="footer-logo mb-3" itemprop="logo">
@else
<h5 class="footer-brand-name" itemprop="name">{{ $siteName }}</h5>
@endif
<p class="footer-about" itemprop="description">{{ $footerAbout }}</p>
@if($footerShowSocial)
<div class="footer-social">
@if($siteInstagram)
<a href="{{ $siteInstagram }}" target="_blank" rel="noopener" aria-label="Instagram" itemprop="sameAs">
<i class="fab fa-instagram"></i>
</a>
@endif
@if($siteLinkedin)
<a href="{{ $siteLinkedin }}" target="_blank" rel="noopener" aria-label="LinkedIn" itemprop="sameAs">
<i class="fab fa-linkedin-in"></i>
</a>
@endif
@if($siteFacebook)
<a href="{{ $siteFacebook }}" target="_blank" rel="noopener" aria-label="Facebook" itemprop="sameAs">
<i class="fab fa-facebook-f"></i>
</a>
@endif
@if($siteTwitter)
<a href="{{ $siteTwitter }}" target="_blank" rel="noopener" aria-label="Twitter" itemprop="sameAs">
<i class="fab fa-x-twitter"></i>
</a>
@endif
@if($siteYoutube)
<a href="{{ $siteYoutube }}" target="_blank" rel="noopener" aria-label="YouTube" itemprop="sameAs">
<i class="fab fa-youtube"></i>
</a>
@endif
</div>
@endif
</div>
</div>
{{-- Card: Links --}}
<div class="col-lg-4 col-md-6">
<div class="footer-card footer-card-links">
<h6 class="footer-card-heading">Links</h6>
<ul class="footer-links">
<li><a href="/">Inicio</a></li>
<li><a href="/sobre">Sobre nos</a></li>
<li><a href="/contato">Contato</a></li>
</ul>
</div>
</div>
{{-- Card: Contato --}}
@if($footerShowContact)
<div class="col-lg-4 col-md-6">
<div class="footer-card footer-card-contact">
<h6 class="footer-card-heading">Contato</h6>
<ul class="footer-contact">
@if($siteEmail)
<li>
<i class="fas fa-envelope"></i>
<a href="mailto:{{ $siteEmail }}" itemprop="email">{{ $siteEmail }}</a>
</li>
@endif
@if($sitePhone)
<li>
<i class="fas fa-phone"></i>
<a href="tel:{{ preg_replace('/[^0-9+]/', '', $sitePhone) }}" itemprop="telephone">{{ $sitePhone }}</a>
</li>
@endif
@if($siteWhatsapp)
<li>
<i class="fab fa-whatsapp"></i>
<a href="{{ $siteWhatsappLink }}" target="_blank" rel="noopener">WhatsApp</a>
</li>
@endif
@if($siteCity || $siteState)
<li>
<i class="fas fa-map-marker-alt"></i>
<span itemprop="address">{{ $siteCity }}@if($siteCity && $siteState), @endif{{ $siteState }}</span>
</li>
@endif
@if($siteBusinessHours)
<li>
<i class="fas fa-clock"></i>
<span>{{ $siteBusinessHours }}</span>
</li>
@endif
</ul>
</div>
</div>
@endif
</div>
{{-- [COMPONENT:FOOTER_ITEMS] --}}
{{-- Copyright --}}
<div class="footer-bottom">
<div class="footer-bottom-card">
<div class="row align-items-center">
<div class="col-md-6 text-center text-md-start">
<p class="footer-copyright mb-0">
{!! $footerCopyright !!}
</p>
</div>
<div class="col-md-6 text-center text-md-end">
<nav class="footer-legal">
@if($privacyPolicyUrl)
<a href="{{ $privacyPolicyUrl }}">Privacidade</a>
@endif
@if($termsUrl)
<a href="{{ $termsUrl }}">Termos</a>
@endif
</nav>
</div>
</div>
</div>
</div>
</div>
</footer>
/**
* CSS - Cards Modern
* Estetica SaaS/tech com tudo baseado em cards — Stripe-like
*/
/* ========================================
NAVBAR FLUTUANTE (CARD)
======================================== */
.header-cards {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1050;
padding: 12px 0 0;
}
.navbar-cards {
padding: 0;
}
.navbar-card {
display: flex;
align-items: center;
flex-wrap: wrap;
background: #fff;
border-radius: 16px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
padding: 0.65rem 1.5rem;
transition: box-shadow 0.3s ease, border-radius 0.3s ease;
}
.navbar-cards.scrolled .navbar-card {
border-radius: 0 0 16px 16px;
box-shadow: 0 4px 32px rgba(0, 0, 0, 0.10);
}
.navbar-card .navbar-brand {
margin-right: auto;
padding: 0;
}
.navbar-card .logo-text {
font-size: 1.25rem;
font-weight: 700;
color: var(--site-header-text, var(--site-heading-color, #0f172a));
letter-spacing: -0.02em;
}
.navbar-card .logo-img {
max-height: 38px;
}
.navbar-card .navbar-toggler {
border: none;
color: var(--site-heading-color, #0f172a);
font-size: 1.2rem;
padding: 0.4rem 0.6rem;
border-radius: 10px;
transition: background 0.2s;
}
.navbar-card .navbar-toggler:hover {
background: var(--site-background-alt, #f8fafc);
}
.navbar-card .navbar-collapse {
flex-basis: 100%;
flex-grow: 1;
}
.navbar-card .nav-link {
color: var(--site-header-text, var(--site-text, #64748b));
font-weight: 500;
font-size: 0.9rem;
padding: 0.5rem 0.85rem !important;
border-radius: 10px;
transition: color 0.2s, background 0.2s;
}
.navbar-card .nav-link:hover,
.navbar-card .nav-link.active {
color: var(--site-header-text-hover, var(--site-header-accent, #3b82f6));
background: color-mix(in srgb, var(--site-header-accent, #3b82f6) 8%, transparent);
}
.btn-cards-cta {
background: var(--site-header-accent, #3b82f6);
color: #fff !important;
border: none;
padding: 0.5rem 1.25rem;
border-radius: var(--site-btn-border-radius, 10px);
font-weight: 600;
font-size: 0.85rem;
transition: all 0.25s ease;
text-decoration: none;
white-space: nowrap;
}
.btn-cards-cta:hover {
background: color-mix(in srgb, var(--site-header-accent, #3b82f6) 85%, black);
transform: translateY(-1px);
box-shadow: 0 4px 12px color-mix(in srgb, var(--site-header-accent, #3b82f6) 30%, transparent);
}
/* ========================================
HERO — CARD CENTRALIZADO
======================================== */
.cards-hero {
background: var(--site-background, #fff);
padding: 8rem 0 4rem;
text-align: center;
}
.cards-hero-card {
max-width: 900px;
margin: 0 auto 3rem;
background: #fff;
border-radius: 24px;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.07);
padding: 4rem 3rem;
border: 1px solid var(--site-border, #e2e8f0);
}
.cards-hero-badge {
display: inline-block;
background: color-mix(in srgb, var(--site-primary, #3b82f6) 10%, transparent);
color: var(--site-primary, #3b82f6);
font-size: 0.8rem;
font-weight: 600;
padding: 0.35rem 1rem;
border-radius: 50px;
margin-bottom: 1.5rem;
letter-spacing: 0.03em;
}
.cards-hero-title {
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: 800;
color: var(--site-heading-color, #0f172a);
line-height: 1.1;
margin-bottom: 1.25rem;
letter-spacing: -0.03em;
}
.cards-hero-subtitle {
font-size: 1.15rem;
color: var(--site-text, #64748b);
line-height: 1.7;
max-width: 560px;
margin: 0 auto 2rem;
}
.cards-hero-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.btn-cards-primary {
background: var(--site-primary, #3b82f6);
color: #fff !important;
border: 2px solid var(--site-primary, #3b82f6);
padding: 0.75rem 2rem;
border-radius: var(--site-btn-border-radius, 12px);
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
display: inline-flex;
align-items: center;
transition: all 0.25s ease;
}
.btn-cards-primary:hover {
background: color-mix(in srgb, var(--site-primary, #3b82f6) 85%, black);
border-color: color-mix(in srgb, var(--site-primary, #3b82f6) 85%, black);
transform: translateY(-2px);
box-shadow: 0 8px 24px color-mix(in srgb, var(--site-primary, #3b82f6) 30%, transparent);
}
.btn-cards-outline {
background: transparent;
color: var(--site-heading-color, #0f172a) !important;
border: 2px solid var(--site-border, #e2e8f0);
padding: 0.75rem 2rem;
border-radius: var(--site-btn-border-radius, 12px);
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
display: inline-flex;
align-items: center;
transition: all 0.25s ease;
}
.btn-cards-outline:hover {
border-color: var(--site-primary, #3b82f6);
color: var(--site-primary, #3b82f6) !important;
background: color-mix(in srgb, var(--site-primary, #3b82f6) 5%, transparent);
transform: translateY(-2px);
}
/* ========================================
FEATURE CARDS (HERO)
======================================== */
.cards-hero-features {
max-width: 960px;
margin: 0 auto;
}
.feature-card {
background: #fff;
border-radius: 16px;
box-shadow: var(--site-card-shadow, 0 4px 24px rgba(0, 0, 0, 0.06));
padding: 2rem 1.5rem;
text-align: center;
border: 1px solid var(--site-border, #e2e8f0);
transition: transform 0.3s ease, box-shadow 0.3s ease;
height: 100%;
}
.feature-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.10);
}
.feature-card-icon {
width: 52px;
height: 52px;
border-radius: 14px;
background: color-mix(in srgb, var(--site-primary, #3b82f6) 10%, transparent);
color: var(--site-primary, #3b82f6);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
margin-bottom: 1rem;
}
.feature-card-title {
font-size: 1.05rem;
font-weight: 700;
color: var(--site-heading-color, #0f172a);
margin-bottom: 0.5rem;
}
.feature-card-text {
font-size: 0.9rem;
color: var(--site-text, #64748b);
line-height: 1.6;
margin: 0;
}
/* ========================================
CONTENT
======================================== */
.cards-modern-content {
min-height: 50vh;
padding-top: 2rem;
position: relative;
z-index: 1;
}
/* Cards globais para content area */
.cards-modern-content .card,
.cards-modern-content .section-card {
border-radius: 16px;
box-shadow: var(--site-card-shadow, 0 4px 24px rgba(0, 0, 0, 0.06));
border: 1px solid var(--site-border, #e2e8f0);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cards-modern-content .card:hover,
.cards-modern-content .section-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.10);
}
/* ========================================
NEWSLETTER CARD
======================================== */
.cards-newsletter {
background: var(--site-background, #fff);
padding: 3rem 0 4rem;
}
.cards-newsletter-card {
background: var(--site-background-alt, #f8fafc);
border-radius: 20px;
padding: 3rem;
border: 1px solid var(--site-border, #e2e8f0);
}
.cards-newsletter-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--site-heading-color, #0f172a);
margin-bottom: 0.5rem;
}
.cards-newsletter-text {
color: var(--site-text, #64748b);
margin: 0;
font-size: 0.95rem;
}
/* ========================================
FOOTER — CARDS INDIVIDUAIS
======================================== */
.footer-cards {
background: var(--site-footer-bg, #0f172a);
padding: 4rem 0 0;
}
.footer-card {
background: color-mix(in srgb, var(--site-footer-bg, #0f172a) 80%, white);
border-radius: 16px;
padding: 2rem;
height: 100%;
border: 1px solid rgba(255, 255, 255, 0.06);
transition: border-color 0.3s ease;
}
.footer-card:hover {
border-color: rgba(255, 255, 255, 0.12);
}
.footer-brand-name {
color: var(--site-footer-heading, #fff);
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 1rem;
}
.footer-cards .footer-logo {
filter: brightness(0) invert(1);
opacity: 0.9;
}
.footer-cards .footer-about {
color: var(--site-footer-text, rgba(255, 255, 255, 0.55));
font-size: 0.9rem;
line-height: 1.7;
margin-bottom: 1.25rem;
}
/* Social links */
.footer-cards .footer-social {
display: flex;
gap: 0.6rem;
}
.footer-cards .footer-social a {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: rgba(255, 255, 255, 0.08);
border-radius: 10px;
color: rgba(255, 255, 255, 0.6);
font-size: 0.9rem;
transition: all 0.25s ease;
}
.footer-cards .footer-social a:hover {
background: var(--site-footer-accent, #3b82f6);
color: #fff;
transform: translateY(-2px);
}
/* Footer card headings */
.footer-card-heading {
color: var(--site-footer-heading, #fff);
font-weight: 600;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 1.25rem;
}
/* Footer links */
.footer-cards .footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-cards .footer-links li {
margin-bottom: 0.65rem;
}
.footer-cards .footer-links a {
color: var(--site-footer-text, rgba(255, 255, 255, 0.55));
text-decoration: none;
font-size: 0.9rem;
transition: color 0.2s, padding-left 0.2s;
display: inline-block;
}
.footer-cards .footer-links a:hover {
color: #fff;
padding-left: 4px;
}
/* Footer contact */
.footer-cards .footer-contact {
list-style: none;
padding: 0;
margin: 0;
}
.footer-cards .footer-contact li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 0.85rem;
color: var(--site-footer-text, rgba(255, 255, 255, 0.55));
font-size: 0.9rem;
}
.footer-cards .footer-contact li i {
color: var(--site-footer-accent, #3b82f6);
font-size: 0.85rem;
margin-top: 0.2rem;
flex-shrink: 0;
}
.footer-cards .footer-contact a {
color: var(--site-footer-text, rgba(255, 255, 255, 0.55));
text-decoration: none;
transition: color 0.2s;
}
.footer-cards .footer-contact a:hover {
color: #fff;
}
/* Footer bottom */
.footer-bottom {
margin-top: 3rem;
}
.footer-bottom-card {
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding: 1.5rem 0;
}
.footer-cards .footer-copyright {
color: rgba(255, 255, 255, 0.35);
font-size: 0.82rem;
}
.footer-cards .footer-legal {
display: flex;
justify-content: center;
gap: 1.5rem;
}
.footer-cards .footer-legal a {
color: rgba(255, 255, 255, 0.35);
font-size: 0.82rem;
text-decoration: none;
transition: color 0.2s;
}
.footer-cards .footer-legal a:hover {
color: rgba(255, 255, 255, 0.7);
}
/* ========================================
GLOBAL CARD ANIMATIONS
======================================== */
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* ========================================
BACK TO TOP
======================================== */
.back-to-top {
position: fixed;
bottom: 24px;
right: 24px;
width: 44px;
height: 44px;
background: #fff;
border: 1px solid var(--site-border, #e2e8f0);
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
color: var(--site-heading-color, #0f172a);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 1000;
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
background: var(--site-primary, #3b82f6);
color: #fff;
border-color: var(--site-primary, #3b82f6);
transform: translateY(-3px);
box-shadow: 0 8px 24px color-mix(in srgb, var(--site-primary, #3b82f6) 25%, transparent);
}
/* ========================================
RESPONSIVE
======================================== */
@media (max-width: 991.98px) {
.header-cards {
padding: 8px 0 0;
}
.navbar-card {
border-radius: 12px;
padding: 0.5rem 1rem;
}
.navbar-card .navbar-collapse {
padding: 1rem 0;
border-top: 1px solid var(--site-border, #e2e8f0);
margin-top: 0.75rem;
}
.navbar-card .nav-link {
padding: 0.6rem 0.5rem !important;
}
.navbar-card .navbar-search,
.navbar-card .navbar-cta {
margin-left: 0 !important;
margin-top: 0.5rem;
}
.cards-hero {
padding: 6.5rem 0 3rem;
}
.cards-hero-card {
padding: 2.5rem 1.5rem;
border-radius: 16px;
}
.cards-newsletter-card {
padding: 2rem 1.5rem;
}
.footer-card {
padding: 1.5rem;
}
}
@media (min-width: 768px) {
.footer-cards .footer-legal {
justify-content: flex-end;
}
}
@media (min-width: 992px) {
.navbar-card {
flex-wrap: nowrap;
}
.navbar-card .navbar-collapse {
flex-basis: auto;
}
}
@media (max-width: 575.98px) {
.cards-hero-title {
font-size: 2rem;
}
.cards-hero-card {
padding: 2rem 1.25rem;
}
.cards-hero-actions {
flex-direction: column;
}
.cards-hero-actions .btn {
width: 100%;
justify-content: center;
}
}
vintage-charmElegancia retro com ornamentos Art Deco. Divisores decorativos, tipografia serif e paleta quente.
Header Vintage Charm - Art Deco / retro elegante. O header utiliza a classe site-header header-vintage como elemento raiz. O conteudo do header esta dentro de um .container do Bootstrap, limitando a largura maxima. O conteudo das paginas e inserido dentro de <main> com classe site-content vintage-charm-content. O placeholder [[CONTENT]] e substituido pelo conteudo renderizado de cada pagina. Rodape: Newsletter. Possui markers para insercao automatica de componentes: NAV_ITEMS, HEADER_UTILITY, FOOTER_ITEMS. Esses markers permitem que o sistema insira menus de modulos, utilitarios e itens do rodape automaticamente. Utiliza os componentes Blade: x-front.search-box, x-front.newsletter-form. Comportamentos JavaScript incluidos: efeito de scroll no header, botao voltar ao topo, animacoes de entrada (fade-in), scroll suave. Recomendado para: Cafeterias, Barbearias, Boutiques, Artesanato.
<header>
site-header header-vintage
<main>
site-content vintage-charm-content
<section>
vintage-newsletter
{{-- Header Vintage Charm - Art Deco / retro elegante --}}
<header class="site-header header-vintage" role="banner">
<nav class="navbar navbar-expand-lg navbar-vintage" aria-label="Menu principal">
<div class="container">
<a class="navbar-brand" href="/" aria-label="Pagina inicial - {{ $siteName }}">
@if($siteLogo)
<img src="{{ $siteLogo }}" alt="{{ $siteName }}" height="45" class="logo-img">
@else
<span class="logo-vintage">{{ $siteName }}</span>
@endif
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#vintageNavbar"
aria-controls="vintageNavbar" aria-expanded="false" aria-label="Abrir menu">
<span class="toggler-vintage"><i class="fas fa-bars"></i></span>
</button>
<div class="collapse navbar-collapse" id="vintageNavbar">
<ul class="navbar-nav mx-auto align-items-lg-center vintage-nav-list">
<li class="nav-item">
<a class="nav-link" href="/">Início</a>
</li>
{{-- [COMPONENT:NAV_ITEMS] --}}
<li class="nav-item nav-search ms-lg-2">
<x-front.search-box />
</li>
</ul>
{{-- [COMPONENT:HEADER_UTILITY] --}}
<div class="navbar-cta ms-lg-3">
<a href="/contato" class="btn btn-vintage">
Fale Conosco
</a>
</div>
</div>
</div>
</nav>
{{-- Hero ornamental --}}
<div class="hero-vintage">
<div class="hero-vintage-frame">
<div class="container">
<div class="hero-vintage-content text-center">
<span class="vintage-tagline">{{ $siteTagline ?? 'Tradicao & Elegancia' }}</span>
<div class="vintage-divider vintage-divider--hero"></div>
<h1 class="vintage-title">{{ $siteName }}</h1>
<div class="vintage-divider vintage-divider--hero"></div>
<p class="vintage-subtitle">Experiencias com a sofisticacao e o encanto dos bons tempos.</p>
<div class="vintage-actions">
<a href="/contato" class="btn btn-vintage-primary">Conheca</a>
<a href="/sobre" class="btn btn-vintage-outline">Nossa Historia</a>
</div>
</div>
</div>
</div>
</div>
</header>
{{-- Newsletter --}}
<section class="vintage-newsletter">
<div class="container text-center">
<div class="vintage-divider vintage-divider--light"></div>
<h3 class="vintage-newsletter-title">Receba Nossas Novidades</h3>
<p class="vintage-newsletter-text">Cadastre-se e fique por dentro das nossas novidades e ofertas exclusivas.</p>
<div style="max-width: 500px; margin: 0 auto;">
<x-front.newsletter-form layout="inline" />
</div>
</div>
</section>
{{-- Footer Vintage --}}
<footer class="site-footer footer-vintage" role="contentinfo" itemscope itemtype="https://schema.org/Organization">
{{-- Ornamental divider --}}
<div class="footer-vintage-ornament">
<span class="ornament-diamond"></span>
</div>
<div class="container">
<div class="row gy-4 text-center text-lg-start">
{{-- Coluna 1: Logo e sobre --}}
<div class="col-lg-4">
<div class="footer-brand mb-3">
@if($siteLogoFooter ?? $siteLogo)
<img src="{{ $siteLogoFooter ?? $siteLogo }}" alt="{{ $siteName }}" height="50" class="footer-logo" itemprop="logo">
@else
<h4 class="footer-vintage-title" itemprop="name">{{ $siteName }}</h4>
@endif
</div>
<p class="footer-vintage-about" itemprop="description">{{ $footerAbout }}</p>
@if($footerShowSocial)
<div class="footer-vintage-social mt-3">
@if($siteFacebook)
<a href="{{ $siteFacebook }}" target="_blank" rel="noopener" aria-label="Facebook" itemprop="sameAs"><i class="fab fa-facebook-f"></i></a>
@endif
@if($siteInstagram)
<a href="{{ $siteInstagram }}" target="_blank" rel="noopener" aria-label="Instagram" itemprop="sameAs"><i class="fab fa-instagram"></i></a>
@endif
@if($siteLinkedin)
<a href="{{ $siteLinkedin }}" target="_blank" rel="noopener" aria-label="LinkedIn" itemprop="sameAs"><i class="fab fa-linkedin-in"></i></a>
@endif
@if($siteYoutube)
<a href="{{ $siteYoutube }}" target="_blank" rel="noopener" aria-label="YouTube" itemprop="sameAs"><i class="fab fa-youtube"></i></a>
@endif
@if($siteTwitter)
<a href="{{ $siteTwitter }}" target="_blank" rel="noopener" aria-label="Twitter" itemprop="sameAs"><i class="fab fa-twitter"></i></a>
@endif
</div>
@endif
</div>
{{-- Coluna 2: Contato --}}
@if($footerShowContact)
<div class="col-lg-4" itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
<h5 class="footer-vintage-heading">Contato</h5>
<ul class="footer-vintage-contact">
@if($sitePhone)
<li>
<i class="fas fa-phone-alt"></i>
<a href="tel:{{ preg_replace('/[^0-9+]/', '', $sitePhone) }}" itemprop="telephone">{{ $sitePhone }}</a>
</li>
@endif
@if($siteEmail)
<li>
<i class="fas fa-envelope"></i>
<a href="mailto:{{ $siteEmail }}" itemprop="email">{{ $siteEmail }}</a>
</li>
@endif
@if($siteWhatsapp)
<li>
<i class="fab fa-whatsapp"></i>
<a href="{{ $siteWhatsappLink }}" target="_blank" rel="noopener">WhatsApp</a>
</li>
@endif
@if($siteCity || $siteState)
<li>
<i class="fas fa-map-marker-alt"></i>
<span itemprop="addressLocality">{{ $siteCity }}@if($siteState), {{ $siteState }}@endif</span>
</li>
@endif
</ul>
</div>
@endif
{{-- Coluna 3: Horario --}}
<div class="col-lg-4">
@if($siteBusinessHours)
<h5 class="footer-vintage-heading">Horario</h5>
<p class="footer-vintage-hours">{!! nl2br(e($siteBusinessHours)) !!}</p>
@endif
</div>
</div>
{{-- [COMPONENT:FOOTER_ITEMS] --}}
{{-- Copyright --}}
<div class="footer-vintage-bottom">
<p class="footer-vintage-copyright mb-0">
{!! $footerCopyright !!}
</p>
@if($privacyPolicyUrl || $termsUrl)
<nav class="footer-vintage-legal">
@if($privacyPolicyUrl)
<a href="{{ $privacyPolicyUrl }}">Privacidade</a>
@endif
@if($termsUrl)
<a href="{{ $termsUrl }}">Termos</a>
@endif
</nav>
@endif
</div>
</div>
</footer>
/** CSS - Vintage Charm */
:root {
--vintage-cream: #faf7f2;
--vintage-dark: #2d2418;
--vintage-gold: color-mix(in srgb, var(--site-primary) 70%, #d4a054);
--vintage-text: #4a3f35;
--vintage-text-muted: #8b7e6f;
--vintage-border: color-mix(in srgb, var(--site-primary) 30%, #d4c5a9);
--vintage-surface: #f5f0e8;
}
/* ========================================
BASE
======================================== */
body {
background-color: var(--vintage-cream) !important;
color: var(--vintage-text) !important;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.vintage-charm-content {
background-color: var(--vintage-cream);
min-height: 50vh;
position: relative;
z-index: 1;
}
h1, h2, h3, h4, h5, h6 {
font-family: Georgia, 'Times New Roman', serif;
color: var(--vintage-dark);
}
/* ========================================
ORNAMENTAL DIVIDER
======================================== */
.vintage-divider {
display: flex;
align-items: center;
justify-content: center;
margin: 1.25rem auto;
max-width: 280px;
}
.vintage-divider::before,
.vintage-divider::after {
content: '';
flex: 1;
height: 1px;
}
.vintage-divider::before {
background: linear-gradient(90deg, transparent, var(--vintage-gold));
margin-right: 14px;
}
.vintage-divider::after {
background: linear-gradient(90deg, var(--vintage-gold), transparent);
margin-left: 14px;
}
.ornament-diamond {
display: inline-block;
width: 8px;
height: 8px;
background: var(--vintage-gold);
transform: rotate(45deg);
flex-shrink: 0;
}
.vintage-divider--hero { max-width: 200px; }
.vintage-divider--hero::before {
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5));
}
.vintage-divider--hero::after {
background: linear-gradient(90deg, rgba(255,255,255,0.5), transparent);
}
.vintage-divider--light { max-width: 200px; margin-bottom: 1.5rem; }
.vintage-divider--light::before {
background: linear-gradient(90deg, transparent, var(--site-primary));
}
.vintage-divider--light::after {
background: linear-gradient(90deg, var(--site-primary), transparent);
}
/* ========================================
BUTTONS
======================================== */
.btn-vintage,
.btn-vintage-primary,
.btn-vintage-outline {
font-family: Georgia, 'Times New Roman', serif;
letter-spacing: 1.5px;
text-transform: uppercase;
transition: all 0.3s ease;
}
.btn-vintage {
background: transparent;
border: 1px solid var(--vintage-gold);
color: var(--vintage-gold);
font-size: 0.85rem;
padding: 0.5rem 1.25rem;
}
.btn-vintage:hover {
background: var(--vintage-gold);
color: #fff;
}
.btn-vintage-primary {
background: var(--site-primary);
border: 2px solid var(--site-primary);
color: #fff;
font-size: 0.9rem;
padding: 0.75rem 2rem;
}
.btn-vintage-primary:hover {
background: var(--site-primary-darker, var(--vintage-dark));
border-color: var(--site-primary-darker, var(--vintage-dark));
color: #fff;
transform: translateY(-2px);
}
.btn-vintage-outline {
background: transparent;
border: 2px solid #fff;
color: #fff;
font-size: 0.9rem;
padding: 0.75rem 2rem;
}
.btn-vintage-outline:hover {
background: #fff;
color: var(--vintage-dark);
transform: translateY(-2px);
}
/* ========================================
HEADER / NAVBAR
======================================== */
.site-header.header-vintage {
z-index: 1050 !important;
}
.navbar-vintage {
background-color: var(--vintage-cream) !important;
border-bottom: 1px solid var(--vintage-border);
padding: 0.75rem 0;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1050;
transition: box-shadow 0.3s ease, padding 0.3s ease;
}
.navbar-vintage.scrolled {
box-shadow: 0 2px 20px rgba(45, 36, 24, 0.1);
padding: 0.5rem 0;
}
.navbar-vintage .logo-vintage {
font-family: Georgia, 'Times New Roman', serif;
font-size: 1.6rem;
font-weight: 700;
color: var(--site-header-text, var(--vintage-dark));
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
}
.navbar-vintage .logo-img { transition: height 0.3s ease; }
.navbar-vintage .vintage-nav-list { gap: 0; }
/* Ornamental dot separators between nav links */
.navbar-vintage .vintage-nav-list .nav-item + .nav-item:not(.nav-search)::before {
content: '\00B7';
color: var(--vintage-border);
font-size: 1.4rem;
line-height: 1;
display: inline-flex;
align-items: center;
padding: 0 0.15rem;
}
@media (max-width: 991.98px) {
.navbar-vintage .vintage-nav-list .nav-item + .nav-item::before { display: none; }
}
.navbar-vintage .nav-link {
color: var(--site-header-text, var(--vintage-text)) !important;
font-family: Georgia, 'Times New Roman', serif;
font-size: 0.85rem;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 0.5rem 0.75rem !important;
position: relative;
transition: color 0.3s ease;
}
.navbar-vintage .nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 1px;
background: var(--site-header-accent);
transition: all 0.3s ease;
transform: translateX(-50%);
}
.navbar-vintage .nav-link:hover,
.navbar-vintage .nav-link.active {
color: var(--site-header-text-hover, var(--site-header-accent)) !important;
}
.navbar-vintage .nav-link:hover::after,
.navbar-vintage .nav-link.active::after {
width: 80%;
}
.navbar-vintage .toggler-vintage {
color: var(--vintage-dark);
font-size: 1.2rem;
}
.navbar-vintage .navbar-toggler {
border: 1px solid var(--vintage-border);
padding: 0.4rem 0.65rem;
}
/* ========================================
HERO SECTION
======================================== */
.hero-vintage {
background: linear-gradient(135deg, var(--vintage-dark) 0%, color-mix(in srgb, var(--site-primary) 40%, #2d2418) 100%);
position: relative;
overflow: hidden;
z-index: 0;
}
/* Subtle dot texture */
.hero-vintage::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.03) 1px, transparent 0);
background-size: 24px 24px;
pointer-events: none;
}
.hero-vintage-frame {
padding: 8rem 0 4.5rem;
position: relative;
}
/* Art Deco corner borders */
.hero-vintage-frame::before,
.hero-vintage-frame::after {
content: '';
position: absolute;
width: 120px;
height: 120px;
border-color: var(--vintage-gold);
border-style: solid;
opacity: 0.4;
pointer-events: none;
}
.hero-vintage-frame::before {
top: 2rem; left: 2rem;
border-width: 2px 0 0 2px;
}
.hero-vintage-frame::after {
bottom: 2rem; right: 2rem;
border-width: 0 2px 2px 0;
}
.hero-vintage-content { position: relative; z-index: 2; }
.vintage-tagline {
display: inline-block;
font-family: Georgia, 'Times New Roman', serif;
font-size: 0.85rem;
font-style: italic;
letter-spacing: 3px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 0.25rem;
}
.vintage-title {
font-family: Georgia, 'Times New Roman', serif;
font-size: 3.5rem;
font-weight: 700;
color: #fff !important;
letter-spacing: 4px;
text-transform: uppercase;
margin-bottom: 0.25rem;
line-height: 1.15;
}
.vintage-subtitle {
font-size: 1.05rem;
color: rgba(255, 255, 255, 0.7);
max-width: 520px;
margin: 0 auto 2rem;
line-height: 1.7;
}
.vintage-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
@media (max-width: 767.98px) {
.vintage-title { font-size: 2.25rem; letter-spacing: 2px; }
.hero-vintage-frame { padding: 6rem 0 3rem; }
.hero-vintage-frame::before,
.hero-vintage-frame::after { width: 60px; height: 60px; }
}
@media (max-width: 991.98px) {
.navbar-vintage .navbar-collapse {
background: var(--vintage-cream);
padding: 1rem;
margin-top: 0.5rem;
border: 1px solid var(--vintage-border);
}
}
/* ========================================
NEWSLETTER
======================================== */
.vintage-newsletter {
background: var(--vintage-surface);
padding: 3.5rem 0;
border-top: 1px solid var(--vintage-border);
border-bottom: 1px solid var(--vintage-border);
}
.vintage-newsletter-title {
font-family: Georgia, 'Times New Roman', serif;
color: var(--vintage-dark);
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.vintage-newsletter-text {
color: var(--vintage-text-muted);
margin-bottom: 1.5rem;
}
/* ========================================
FOOTER
======================================== */
.site-footer.footer-vintage {
background-color: var(--vintage-dark);
color: rgba(255, 255, 255, 0.75);
padding: 0;
}
/* Ornamental top line with diamond */
.footer-vintage-ornament {
text-align: center;
padding: 2.5rem 0 0;
position: relative;
}
.footer-vintage-ornament::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, transparent 0%, var(--vintage-gold) 20%, var(--vintage-gold) 80%, transparent 100%);
}
.footer-vintage-ornament .ornament-diamond {
width: 10px;
height: 10px;
background: var(--vintage-gold);
display: inline-block;
transform: rotate(45deg);
position: relative;
}
.footer-vintage-ornament .ornament-diamond::before,
.footer-vintage-ornament .ornament-diamond::after {
content: '';
position: absolute;
top: 50%;
width: 80px;
height: 1px;
transform: translateY(-50%);
}
.footer-vintage-ornament .ornament-diamond::before {
right: calc(100% + 8px);
background: linear-gradient(90deg, transparent, var(--vintage-gold));
}
.footer-vintage-ornament .ornament-diamond::after {
left: calc(100% + 8px);
background: linear-gradient(90deg, var(--vintage-gold), transparent);
}
.site-footer.footer-vintage .container {
padding-top: 2.5rem;
padding-bottom: 0;
}
.footer-vintage-title {
font-family: Georgia, 'Times New Roman', serif;
color: var(--site-footer-heading, var(--vintage-gold)) !important;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 1.2rem;
}
.footer-vintage-heading {
font-family: Georgia, 'Times New Roman', serif;
color: var(--site-footer-heading, var(--vintage-gold));
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 0.9rem;
margin-bottom: 1.25rem;
position: relative;
padding-bottom: 0.75rem;
}
.footer-vintage-heading::after {
content: '';
position: absolute;
bottom: 0; left: 0;
width: 30px;
height: 1px;
background: var(--vintage-gold);
}
@media (max-width: 991.98px) {
.footer-vintage-heading::after { left: 50%; transform: translateX(-50%); }
}
.footer-vintage-about,
.footer-vintage-hours {
color: var(--site-footer-text, rgba(255, 255, 255, 0.6));
line-height: 1.8;
font-size: 0.9rem;
}
/* Contact list */
.footer-vintage-contact {
list-style: none;
padding: 0;
margin: 0;
}
.footer-vintage-contact li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 0.85rem;
color: var(--site-footer-text, rgba(255, 255, 255, 0.6));
font-size: 0.9rem;
}
@media (max-width: 991.98px) {
.footer-vintage-contact li { justify-content: center; }
}
.footer-vintage-contact li i {
color: var(--vintage-gold);
margin-top: 0.2rem;
width: 16px;
text-align: center;
flex-shrink: 0;
}
.footer-vintage-contact a {
color: var(--site-footer-text, rgba(255, 255, 255, 0.6));
text-decoration: none;
transition: color 0.3s ease;
}
.footer-vintage-contact a:hover { color: var(--vintage-gold); }
/* Social links */
.footer-vintage-social {
display: flex;
gap: 0.75rem;
justify-content: center;
}
@media (min-width: 992px) {
.footer-vintage-social { justify-content: flex-start; }
}
.footer-vintage-social a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
transition: all 0.3s ease;
}
.footer-vintage-social a:hover {
border-color: var(--vintage-gold);
color: var(--vintage-gold);
transform: translateY(-2px);
}
/* Footer bottom */
.footer-vintage-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 1.25rem 0;
margin-top: 2.5rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
}
@media (max-width: 767.98px) {
.footer-vintage-bottom { justify-content: center; text-align: center; }
}
.footer-vintage-copyright {
color: rgba(255, 255, 255, 0.4);
font-size: 0.8rem;
}
.footer-vintage-legal { display: flex; gap: 1.5rem; }
.footer-vintage-legal a {
color: rgba(255, 255, 255, 0.4);
font-size: 0.8rem;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-vintage-legal a:hover { color: var(--vintage-gold); }
/* ========================================
BACK TO TOP
======================================== */
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
width: 46px;
height: 46px;
background: var(--vintage-dark);
border: 1px solid var(--vintage-gold);
color: var(--vintage-gold);
border-radius: 0;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
}
.back-to-top.visible { opacity: 1; visibility: visible; }
.back-to-top:hover {
background: var(--vintage-gold);
color: var(--vintage-dark);
transform: translateY(-3px);
}
/* ========================================
FADE-IN ANIMATIONS
======================================== */
.fade-in {
opacity: 0;
transform: translateY(15px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
fullscreen-impactHero 100vh cinematico com overlay escuro, titulo centralizado e indicador de scroll animado. Imersivo.
Header Fullscreen Impact - Navbar transparente sobre hero 100vh. O header utiliza a classe site-header header-fullscreen como elemento raiz. O conteudo do header esta dentro de um .container do Bootstrap, limitando a largura maxima. O conteudo das paginas e inserido dentro de <main> com classe site-content fullscreen-impact-content. O placeholder [[CONTENT]] e substituido pelo conteudo renderizado de cada pagina. Rodape: Newsletter. Possui markers para insercao automatica de componentes: NAV_ITEMS, HEADER_UTILITY, FOOTER_ITEMS. Esses markers permitem que o sistema insira menus de modulos, utilitarios e itens do rodape automaticamente. Utiliza os componentes Blade: x-front.search-box, x-front.newsletter-form. Comportamentos JavaScript incluidos: efeito de scroll no header, scroll suave. Recomendado para: Fotografos, Hoteis, Turismo, Imobiliarias.
<header>
site-header header-fullscreen
<main>
site-content fullscreen-impact-content
<section>
fullscreen-newsletter
{{-- Header Fullscreen Impact - Navbar transparente sobre hero 100vh --}}
<header class="site-header header-fullscreen" role="banner">
<nav class="navbar navbar-expand-lg navbar-fullscreen" aria-label="Menu principal">
<div class="container">
{{-- Logo --}}
<a class="navbar-brand" href="/" aria-label="Pagina inicial - {{ $siteName }}">
@if($siteLogo)
<img src="{{ $siteLogo }}" alt="{{ $siteName }}" height="45" class="logo-img">
@else
<span class="logo-text">{{ $siteName }}</span>
@endif
</a>
{{-- Mobile toggle --}}
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#fullscreenNavbar"
aria-controls="fullscreenNavbar" aria-expanded="false" aria-label="Abrir menu">
<span class="navbar-toggler-icon"></span>
</button>
{{-- Menu --}}
<div class="collapse navbar-collapse" id="fullscreenNavbar">
<ul class="navbar-nav ms-auto align-items-lg-center">
<li class="nav-item">
<a class="nav-link" href="/">Início</a>
</li>
{{-- [COMPONENT:NAV_ITEMS] --}}
<li class="nav-item nav-search ms-lg-2">
<x-front.search-box />
</li>
</ul>
</div>
{{-- [COMPONENT:HEADER_UTILITY] --}}
</div>
</nav>
{{-- Hero Fullscreen --}}
<div class="hero-fullscreen">
<div class="hero-pattern"></div>
<div class="hero-overlay"></div>
<div class="hero-content">
<div class="container text-center">
@if($siteTagline)
<p class="hero-tagline">{{ $siteTagline }}</p>
@endif
<h1 class="hero-title">{{ $siteName }}</h1>
<p class="hero-subtitle">Experiencias que inspiram. Resultados que transformam.</p>
<div class="hero-actions">
<a href="/contato" class="btn btn-hero-solid">
Fale Conosco
</a>
<a href="/sobre" class="btn btn-hero-outline">
Saiba Mais
</a>
</div>
</div>
</div>
<a href="#content-start" class="scroll-indicator" aria-label="Rolar para o conteudo">
<i class="fas fa-chevron-down"></i>
</a>
</div>
</header>
{{-- Newsletter --}}
<section class="fullscreen-newsletter">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-5 mb-3 mb-lg-0">
<h3 class="newsletter-title">Fique por Dentro</h3>
<p class="newsletter-text mb-0">Receba novidades e conteudos exclusivos diretamente no seu e-mail.</p>
</div>
<div class="col-lg-7">
<x-front.newsletter-form layout="inline" />
</div>
</div>
</div>
</section>
{{-- Footer Fullscreen Impact --}}
<footer class="site-footer footer-fullscreen" role="contentinfo" itemscope itemtype="https://schema.org/Organization">
<div class="footer-main">
<div class="container">
<div class="row gy-4">
{{-- Coluna 1: Marca e sobre --}}
<div class="col-lg-4">
<div class="footer-brand mb-3">
@if($siteLogoFooter ?? $siteLogo)
<img src="{{ $siteLogoFooter ?? $siteLogo }}" alt="{{ $siteName }}" height="40" class="footer-logo" itemprop="logo">
@else
<h5 class="footer-brand-text" itemprop="name">{{ $siteName }}</h5>
@endif
</div>
<p class="footer-about" itemprop="description">{{ $footerAbout }}</p>
@if($footerShowSocial)
<div class="footer-social">
@if($siteFacebook)
<a href="{{ $siteFacebook }}" target="_blank" rel="noopener" aria-label="Facebook" itemprop="sameAs"><i class="fab fa-facebook-f"></i></a>
@endif
@if($siteInstagram)
<a href="{{ $siteInstagram }}" target="_blank" rel="noopener" aria-label="Instagram" itemprop="sameAs"><i class="fab fa-instagram"></i></a>
@endif
@if($siteLinkedin)
<a href="{{ $siteLinkedin }}" target="_blank" rel="noopener" aria-label="LinkedIn" itemprop="sameAs"><i class="fab fa-linkedin-in"></i></a>
@endif
@if($siteYoutube)
<a href="{{ $siteYoutube }}" target="_blank" rel="noopener" aria-label="YouTube" itemprop="sameAs"><i class="fab fa-youtube"></i></a>
@endif
@if($siteTwitter)
<a href="{{ $siteTwitter }}" target="_blank" rel="noopener" aria-label="Twitter" itemprop="sameAs"><i class="fab fa-twitter"></i></a>
@endif
</div>
@endif
</div>
{{-- Coluna 2: Contato --}}
@if($footerShowContact)
<div class="col-lg-4" itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
<h6 class="footer-heading">Contato</h6>
<ul class="footer-contact">
@if($siteEmail)
<li>
<i class="fas fa-envelope"></i>
<a href="mailto:{{ $siteEmail }}" itemprop="email">{{ $siteEmail }}</a>
</li>
@endif
@if($sitePhone)
<li>
<i class="fas fa-phone"></i>
<a href="tel:{{ preg_replace('/[^0-9+]/', '', $sitePhone) }}" itemprop="telephone">{{ $sitePhone }}</a>
</li>
@endif
@if($siteWhatsapp)
<li>
<i class="fab fa-whatsapp"></i>
<a href="{{ $siteWhatsappLink }}" target="_blank" rel="noopener">WhatsApp</a>
</li>
@endif
@if($siteCity || $siteState)
<li>
<i class="fas fa-map-marker-alt"></i>
<span itemprop="addressLocality">{{ $siteCity }}@if($siteCity && $siteState), @endif{{ $siteState }}</span>
</li>
@endif
</ul>
</div>
@endif
{{-- Coluna 3: Horario --}}
<div class="col-lg-4">
@if($siteBusinessHours)
<h6 class="footer-heading">Horario de Funcionamento</h6>
<p class="footer-hours">{!! nl2br(e($siteBusinessHours)) !!}</p>
@endif
</div>
</div>
</div>
</div>
{{-- [COMPONENT:FOOTER_ITEMS] --}}
{{-- Copyright --}}
<div class="footer-bottom">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6 text-center text-md-start">
<p class="footer-copyright mb-0">{!! $footerCopyright !!}</p>
</div>
<div class="col-md-6 text-center text-md-end">
@if($privacyPolicyUrl || $termsUrl)
<nav class="footer-legal">
@if($privacyPolicyUrl)
<a href="{{ $privacyPolicyUrl }}">Privacidade</a>
@endif
@if($termsUrl)
<a href="{{ $termsUrl }}">Termos</a>
@endif
</nav>
@endif
</div>
</div>
</div>
</div>
</footer>
/**
* CSS - Fullscreen Impact
* Template cinematico e imersivo com hero 100vh e navbar transparente
*/
:root {
--fi-primary: var(--site-primary, #1e3a5f);
--fi-primary-light: color-mix(in srgb, var(--site-primary, #1e3a5f) 70%, white);
--fi-primary-dark: color-mix(in srgb, var(--site-primary, #1e3a5f) 70%, black);
--fi-text-light: rgba(255, 255, 255, 0.95);
--fi-text-muted: rgba(255, 255, 255, 0.65);
--fi-footer-bg: #111827;
--fi-footer-border: rgba(255, 255, 255, 0.08);
}
/* ========================================
NAVBAR - TRANSPARENT
======================================== */
.header-fullscreen {
position: relative;
}
.navbar-fullscreen {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1030;
padding: 1.25rem 0;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.navbar-fullscreen .logo-text {
color: var(--site-header-text, #fff);
font-size: 1.6rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
.navbar-fullscreen .logo-img {
transition: filter 0.4s ease;
}
.navbar-fullscreen .navbar-toggler {
border: 1px solid rgba(255, 255, 255, 0.4);
color: #fff;
padding: 0.4rem 0.65rem;
}
.navbar-fullscreen .navbar-toggler-icon {
filter: invert(1);
}
.navbar-fullscreen .nav-link {
color: var(--site-header-text, rgba(255, 255, 255, 0.85)) !important;
font-weight: 500;
font-size: 0.9rem;
letter-spacing: 0.5px;
padding: 0.5rem 1rem !important;
transition: color 0.3s ease;
position: relative;
}
.navbar-fullscreen .nav-link::after {
content: '';
position: absolute;
bottom: 2px;
left: 50%;
width: 0;
height: 2px;
background: #fff;
transition: all 0.3s ease;
transform: translateX(-50%);
}
.navbar-fullscreen .nav-link:hover {
color: var(--site-header-text-hover, #fff) !important;
}
.navbar-fullscreen .nav-link:hover::after {
width: 60%;
}
/* ========================================
NAVBAR - SCROLLED (SOLID)
======================================== */
.navbar-fullscreen.scrolled {
position: fixed;
background-color: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 1px 20px rgba(0, 0, 0, 0.08);
padding: 0.6rem 0;
}
.navbar-fullscreen.scrolled .logo-text {
color: var(--site-header-accent, #1e3a5f);
}
.navbar-fullscreen.scrolled .navbar-toggler {
border-color: rgba(0, 0, 0, 0.2);
color: var(--site-text, #1f2937);
}
.navbar-fullscreen.scrolled .navbar-toggler-icon {
filter: none;
}
.navbar-fullscreen.scrolled .nav-link {
color: var(--site-text, #374151) !important;
}
.navbar-fullscreen.scrolled .nav-link::after {
background: var(--site-header-accent, #1e3a5f);
}
.navbar-fullscreen.scrolled .nav-link:hover {
color: var(--site-header-accent, #1e3a5f) !important;
}
/* ========================================
HERO - FULLSCREEN 100VH
======================================== */
.hero-fullscreen {
position: relative;
width: 100%;
height: 100vh;
min-height: 600px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* Decorative CSS pattern background */
.hero-pattern {
position: absolute;
inset: 0;
background-color: var(--fi-primary);
background-image:
radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
linear-gradient(45deg, transparent 48%, rgba(255, 255, 255, 0.02) 49%, rgba(255, 255, 255, 0.02) 51%, transparent 52%),
linear-gradient(-45deg, transparent 48%, rgba(255, 255, 255, 0.02) 49%, rgba(255, 255, 255, 0.02) 51%, transparent 52%);
background-size: 60px 60px, 60px 60px, 80px 80px, 80px 80px;
}
/* Dark gradient overlay */
.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
z-index: 1;
}
/* Hero content */
.hero-content {
position: relative;
z-index: 2;
padding: 2rem 1rem;
}
.hero-tagline {
color: rgba(255, 255, 255, 0.7);
font-size: 0.95rem;
font-weight: 500;
letter-spacing: 4px;
text-transform: uppercase;
margin-bottom: 1.25rem;
}
.hero-title {
color: #fff;
font-size: clamp(2rem, 6vw, 4rem);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 6px;
line-height: 1.15;
margin-bottom: 1.5rem;
}
.hero-subtitle {
color: rgba(255, 255, 255, 0.65);
font-size: clamp(1rem, 2vw, 1.25rem);
font-weight: 300;
line-height: 1.7;
max-width: 560px;
margin: 0 auto 2.5rem;
letter-spacing: 0.3px;
}
/* ========================================
HERO - CTA BUTTONS
======================================== */
.hero-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}
.btn-hero-solid {
background-color: #fff;
color: var(--fi-primary) !important;
padding: 0.85rem 2.25rem;
border-radius: 50px;
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.5px;
text-decoration: none;
border: 2px solid #fff;
transition: all 0.3s ease;
}
.btn-hero-solid:hover {
background-color: transparent;
color: #fff !important;
transform: translateY(-2px);
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
}
.btn-hero-outline {
background-color: transparent;
color: #fff !important;
padding: 0.85rem 2.25rem;
border-radius: 50px;
font-weight: 600;
font-size: 0.95rem;
letter-spacing: 0.5px;
text-decoration: none;
border: 2px solid rgba(255, 255, 255, 0.5);
transition: all 0.3s ease;
}
.btn-hero-outline:hover {
border-color: #fff;
background-color: rgba(255, 255, 255, 0.1);
color: #fff !important;
transform: translateY(-2px);
}
/* ========================================
SCROLL INDICATOR
======================================== */
.scroll-indicator {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
z-index: 3;
color: rgba(255, 255, 255, 0.6);
font-size: 1.5rem;
text-decoration: none;
animation: bounce 2s ease-in-out infinite;
transition: color 0.3s ease;
}
.scroll-indicator:hover {
color: #fff;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateX(-50%) translateY(0);
}
40% {
transform: translateX(-50%) translateY(-12px);
}
60% {
transform: translateX(-50%) translateY(-6px);
}
}
/* ========================================
CONTENT AREA
======================================== */
.fullscreen-impact-content {
min-height: 60vh;
position: relative;
z-index: 1;
}
/* ========================================
NEWSLETTER SECTION
======================================== */
.fullscreen-newsletter {
background-color: var(--fi-primary);
padding: 3.5rem 0;
color: #fff;
}
.fullscreen-newsletter .newsletter-title {
color: #fff;
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.35rem;
}
.fullscreen-newsletter .newsletter-text {
color: rgba(255, 255, 255, 0.75);
font-size: 0.95rem;
}
/* ========================================
FOOTER
======================================== */
.footer-fullscreen {
background-color: var(--fi-footer-bg);
color: rgba(255, 255, 255, 0.8);
}
.footer-fullscreen .footer-main {
padding: 3.5rem 0;
}
.footer-fullscreen .footer-brand-text {
color: var(--site-footer-heading, #fff);
font-size: 1.35rem;
font-weight: 700;
letter-spacing: 1px;
}
.footer-fullscreen .footer-logo {
opacity: 0.9;
transition: opacity 0.3s ease;
}
.footer-fullscreen .footer-logo:hover {
opacity: 1;
}
.footer-fullscreen .footer-about {
color: var(--site-footer-text, rgba(255, 255, 255, 0.55));
font-size: 0.9rem;
line-height: 1.7;
margin-top: 0.75rem;
}
/* Footer Social */
.footer-fullscreen .footer-social {
display: flex;
gap: 0.6rem;
margin-top: 1.25rem;
}
.footer-fullscreen .footer-social a {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.7);
border-radius: 50%;
text-decoration: none;
transition: all 0.3s ease;
font-size: 0.9rem;
}
.footer-fullscreen .footer-social a:hover {
background: var(--site-footer-accent, #1e3a5f);
color: #fff;
transform: translateY(-2px);
}
/* Footer Headings */
.footer-fullscreen .footer-heading {
color: var(--site-footer-heading, #fff);
font-weight: 600;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: 1.25rem;
}
/* Footer Contact */
.footer-fullscreen .footer-contact {
list-style: none;
padding: 0;
margin: 0;
}
.footer-fullscreen .footer-contact li {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.85rem;
color: var(--site-footer-text, rgba(255, 255, 255, 0.55));
font-size: 0.9rem;
}
.footer-fullscreen .footer-contact i {
width: 18px;
text-align: center;
color: var(--site-footer-accent, var(--fi-primary-light));
font-size: 0.85rem;
}
.footer-fullscreen .footer-contact a {
color: var(--site-footer-text, rgba(255, 255, 255, 0.55));
text-decoration: none;
transition: color 0.3s ease;
}
.footer-fullscreen .footer-contact a:hover {
color: #fff;
}
/* Footer Hours */
.footer-fullscreen .footer-hours {
color: var(--site-footer-text, rgba(255, 255, 255, 0.55));
font-size: 0.9rem;
line-height: 1.8;
}
/* ========================================
FOOTER BOTTOM
======================================== */
.footer-fullscreen .footer-bottom {
border-top: 1px solid var(--fi-footer-border);
padding: 1.25rem 0;
}
.footer-fullscreen .footer-copyright {
color: rgba(255, 255, 255, 0.4);
font-size: 0.8rem;
}
.footer-fullscreen .footer-legal {
display: flex;
justify-content: center;
gap: 1.5rem;
}
@media (min-width: 768px) {
.footer-fullscreen .footer-legal {
justify-content: flex-end;
}
}
.footer-fullscreen .footer-legal a {
color: rgba(255, 255, 255, 0.4);
text-decoration: none;
font-size: 0.8rem;
transition: color 0.3s ease;
}
.footer-fullscreen .footer-legal a:hover {
color: rgba(255, 255, 255, 0.8);
}
/* ========================================
MOBILE NAVBAR ADJUSTMENTS
======================================== */
@media (max-width: 991.98px) {
.navbar-fullscreen .navbar-collapse {
background: rgba(0, 0, 0, 0.92);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
padding: 1rem 1.25rem;
margin-top: 0.75rem;
border-radius: 12px;
}
.navbar-fullscreen.scrolled .navbar-collapse {
background: rgba(255, 255, 255, 0.98);
}
.navbar-fullscreen.scrolled .navbar-collapse .nav-link {
color: var(--site-text, #374151) !important;
}
.navbar-fullscreen .nav-link::after {
display: none;
}
.hero-title {
letter-spacing: 3px;
}
}
/* ========================================
REDUCED MOTION
======================================== */
@media (prefers-reduced-motion: reduce) {
.scroll-indicator {
animation: none;
}
.navbar-fullscreen {
transition: none;
}
.btn-hero-solid,
.btn-hero-outline {
transition: none;
}
}
geometric-gridBauhaus moderno com blocos de cor solida, linhas fortes e zero curvas. Angular, estruturado e marcante.
Header Geometric Grid - Bauhaus-inspired com blocos geometricos. O header utiliza a classe site-header header-geometric como elemento raiz. O conteudo do header esta dentro de um .container do Bootstrap, limitando a largura maxima. O conteudo das paginas e inserido dentro de <main> com classe site-content geometric-grid-content. O placeholder [[CONTENT]] e substituido pelo conteudo renderizado de cada pagina. Rodape: Newsletter. Possui markers para insercao automatica de componentes: NAV_ITEMS, HEADER_UTILITY, FOOTER_ITEMS. Esses markers permitem que o sistema insira menus de modulos, utilitarios e itens do rodape automaticamente. Utiliza os componentes Blade: x-front.search-box, x-front.newsletter-form. Comportamentos JavaScript incluidos: efeito de scroll no header, scroll suave. Recomendado para: Galerias, Museus, Arquitetura, Design Grafico.
<header>
site-header header-geometric
<main>
site-content geometric-grid-content
<section>
geometric-newsletter
{{-- Header Geometric Grid - Bauhaus-inspired com blocos geometricos --}}
<header class="site-header header-geometric" role="banner">
<nav class="navbar navbar-expand-lg navbar-geometric" aria-label="Menu principal">
<div class="container">
{{-- Logo --}}
<a class="navbar-brand" href="/" aria-label="Pagina inicial - {{ $siteName }}">
@if($siteLogo)
<img src="{{ $siteLogo }}" alt="{{ $siteName }}" height="40" class="logo-img">
@else
<span class="logo-geometric">{{ $siteName }}</span>
@endif
</a>
{{-- Mobile toggle --}}
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#geometricNavbar"
aria-controls="geometricNavbar" aria-expanded="false" aria-label="Abrir menu">
<i class="fas fa-bars"></i>
</button>
{{-- Menu --}}
<div class="collapse navbar-collapse" id="geometricNavbar">
<ul class="navbar-nav ms-auto align-items-lg-center">
<li class="nav-item">
<a class="nav-link" href="/">Inicio</a>
</li>
{{-- [COMPONENT:NAV_ITEMS] --}}
<li class="nav-item nav-search ms-lg-3">
<x-front.search-box />
</li>
<li class="nav-item ms-lg-3">
<a class="btn btn-geometric-cta" href="/contato">Contato</a>
</li>
</ul>
</div>
{{-- [COMPONENT:HEADER_UTILITY] --}}
</div>
</nav>
{{-- Hero Grid --}}
<div class="hero-geometric">
<div class="hero-grid">
<div class="hero-block-main">
<div class="hero-block-main-inner">
<span class="hero-label">{{ $siteTagline ?? 'Design & Arquitetura' }}</span>
<h1 class="hero-geometric-title">{{ $siteName }}</h1>
<p class="hero-geometric-text">Formas que comunicam. Estrutura que inspira. Design com proposito e precisao.</p>
<div class="hero-geometric-actions">
<a href="/contato" class="btn btn-geometric-primary">Iniciar Projeto</a>
<a href="/sobre" class="btn btn-geometric-outline">Saiba Mais</a>
</div>
</div>
</div>
<div class="hero-block-top">
<span class="block-label">EST.</span>
<span class="block-year">2024</span>
</div>
<div class="hero-block-bottom">
<div class="block-accent-line"></div>
<span class="block-tagline">{{ $siteTagline ?? 'Forma segue funcao' }}</span>
</div>
</div>
</div>
</header>
{{-- Newsletter --}}
<section class="geometric-newsletter">
<div class="container">
<div class="geometric-newsletter-grid">
<div class="geometric-newsletter-label">
<div class="geometric-accent-block"></div>
<h3 class="geometric-newsletter-title">Newsletter</h3>
<p class="text-muted mb-0">Receba novidades e inspiracao direto no seu e-mail.</p>
</div>
<div class="geometric-newsletter-form">
<x-front.newsletter-form layout="inline" />
</div>
</div>
</div>
</section>
{{-- Footer Geometric Grid --}}
<footer class="site-footer footer-geometric" role="contentinfo" itemscope itemtype="https://schema.org/Organization">
<div class="footer-geometric-main">
<div class="container">
<div class="footer-geometric-grid">
{{-- Brand --}}
<div class="footer-geometric-col footer-col-brand">
@if($siteLogoFooter ?? $siteLogo)
<img src="{{ $siteLogoFooter ?? $siteLogo }}" alt="{{ $siteName }}" height="40" class="footer-logo mb-3" itemprop="logo">
@else
<h2 class="footer-geometric-brand" itemprop="name">{{ $siteName }}</h2>
@endif
<p class="footer-geometric-about" itemprop="description">{{ $footerAbout }}</p>
@if($footerShowSocial)
<div class="footer-geometric-social">
@if($siteFacebook)<a href="{{ $siteFacebook }}" target="_blank" rel="noopener" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>@endif
@if($siteInstagram)<a href="{{ $siteInstagram }}" target="_blank" rel="noopener" aria-label="Instagram"><i class="fab fa-instagram"></i></a>@endif
@if($siteLinkedin)<a href="{{ $siteLinkedin }}" target="_blank" rel="noopener" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>@endif
@if($siteYoutube)<a href="{{ $siteYoutube }}" target="_blank" rel="noopener" aria-label="YouTube"><i class="fab fa-youtube"></i></a>@endif
@if($siteTwitter)<a href="{{ $siteTwitter }}" target="_blank" rel="noopener" aria-label="Twitter"><i class="fab fa-twitter"></i></a>@endif
</div>
@endif
</div>
{{-- Links --}}
<div class="footer-geometric-col footer-col-links">
<h6 class="footer-geometric-heading">Links</h6>
<ul class="footer-geometric-links">
<li><a href="/">Inicio</a></li>
<li><a href="/sobre">Sobre</a></li>
<li><a href="/contato">Contato</a></li>
</ul>
</div>
{{-- Contato --}}
@if($footerShowContact)
<div class="footer-geometric-col footer-col-contact">
<h6 class="footer-geometric-heading">Contato</h6>
<ul class="footer-geometric-contact">
@if($siteEmail)<li><i class="fas fa-envelope"></i> <a href="mailto:{{ $siteEmail }}" itemprop="email">{{ $siteEmail }}</a></li>@endif
@if($sitePhone)<li><i class="fas fa-phone"></i> <a href="tel:{{ preg_replace('/[^0-9+]/', '', $sitePhone) }}" itemprop="telephone">{{ $sitePhone }}</a></li>@endif
@if($siteWhatsapp)<li><i class="fab fa-whatsapp"></i> <a href="{{ $siteWhatsappLink }}" target="_blank" rel="noopener">WhatsApp</a></li>@endif
@if($siteCity || $siteState)<li><i class="fas fa-map-marker-alt"></i> {{ $siteCity }}@if($siteCity && $siteState), @endif{{ $siteState }}</li>@endif
</ul>
</div>
@endif
{{-- Horario --}}
<div class="footer-geometric-col footer-col-hours">
@if($siteBusinessHours)
<h6 class="footer-geometric-heading">Horario</h6>
<p class="footer-geometric-hours">{!! nl2br(e($siteBusinessHours)) !!}</p>
@endif
</div>
</div>
</div>
</div>
{{-- [COMPONENT:FOOTER_ITEMS] --}}
<div class="footer-geometric-bottom">
<div class="container">
<div class="footer-bottom-grid">
<div class="footer-bottom-left">
<p class="mb-0">{!! $footerCopyright !!}</p>
</div>
<div class="footer-bottom-right">
<nav class="footer-legal">
@if($privacyPolicyUrl)<a href="{{ $privacyPolicyUrl }}">Privacidade</a>@endif
@if($termsUrl)<a href="{{ $termsUrl }}">Termos</a>@endif
</nav>
</div>
</div>
</div>
</div>
</footer>
/**
* CSS - Geometric Grid
* Bauhaus-inspired: blocos solidos, linhas fortes, zero border-radius
*/
/* ========================================
RESET — Zero border-radius everywhere
======================================== */
.header-geometric, .header-geometric *,
.geometric-grid-content, .geometric-grid-content *,
.geometric-newsletter, .geometric-newsletter *,
.footer-geometric, .footer-geometric * {
border-radius: 0 !important;
}
/* ========================================
NAVBAR
======================================== */
.header-geometric {
z-index: 1050 !important;
}
.navbar-geometric {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1050;
padding: 0;
background: var(--site-header-accent, #e11d48) !important;
border-bottom: 3px solid var(--site-heading-color, #111827);
transition: box-shadow 0.3s;
}
.navbar-geometric .container {
display: flex;
align-items: center;
min-height: 60px;
}
.navbar-geometric.scrolled {
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
}
.logo-geometric {
font-size: 1.1rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--site-header-text, #fff);
}
.navbar-geometric .logo-img { filter: brightness(0) invert(1); }
.navbar-geometric .navbar-toggler {
border: 2px solid rgba(255, 255, 255, 0.6);
color: #fff;
font-size: 1.1rem;
padding: 0.4rem 0.7rem;
}
.navbar-geometric .nav-link {
color: var(--site-header-text, rgba(255, 255, 255, 0.85));
font-weight: 700;
padding: 0.5rem 1rem;
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.12em;
transition: color 0.2s;
}
.navbar-geometric .nav-link:hover,
.navbar-geometric .nav-link.active { color: var(--site-header-text-hover, #fff); }
.btn-geometric-cta {
background: #fff;
color: var(--site-header-accent, #e11d48);
padding: 0.5rem 1.5rem;
font-weight: 800;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1em;
border: 2px solid #fff;
transition: all 0.25s;
text-decoration: none;
}
.btn-geometric-cta:hover { background: transparent; color: #fff; }
/* ========================================
HERO GRID
======================================== */
.hero-geometric { padding-top: 63px; position: relative; z-index: 0; }
.hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
min-height: 80vh;
border-bottom: 3px solid var(--site-heading-color, #111827);
}
.hero-block-main {
grid-column: 1 / 2;
grid-row: 1 / 3;
background: linear-gradient(135deg, var(--site-primary, #e11d48), color-mix(in srgb, var(--site-primary, #e11d48) 70%, black));
display: flex;
align-items: center;
padding: 4rem 3rem;
border-right: 3px solid var(--site-heading-color, #111827);
}
.hero-block-main-inner { max-width: 520px; }
.hero-label {
display: inline-block;
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.25em;
color: rgba(255, 255, 255, 0.7);
border: 2px solid rgba(255, 255, 255, 0.3);
padding: 0.35rem 1rem;
margin-bottom: 2rem;
}
.hero-geometric-title {
font-size: clamp(2.5rem, 6vw, 5rem);
font-weight: 900;
line-height: 0.95;
color: #fff;
text-transform: uppercase;
letter-spacing: -0.02em;
margin-bottom: 1.5rem;
}
.hero-geometric-text {
font-size: 1.05rem;
color: rgba(255, 255, 255, 0.75);
line-height: 1.7;
max-width: 400px;
margin-bottom: 2.5rem;
}
.hero-geometric-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.btn-geometric-primary,
.btn-geometric-outline {
padding: 0.9rem 2rem;
font-weight: 800;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.1em;
text-decoration: none;
transition: all 0.25s;
display: inline-block;
}
.btn-geometric-primary {
background: #fff;
color: var(--site-primary, #e11d48);
border: 2px solid #fff;
}
.btn-geometric-primary:hover { background: transparent; color: #fff; }
.btn-geometric-outline {
background: transparent;
color: #fff;
border: 2px solid rgba(255, 255, 255, 0.5);
}
.btn-geometric-outline:hover { border-color: #fff; color: #fff; }
.hero-block-top {
grid-column: 2 / 3;
grid-row: 1 / 2;
background: var(--site-heading-color, #111827);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
border-bottom: 3px solid var(--site-primary, #e11d48);
}
.block-label {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.3em;
color: rgba(255, 255, 255, 0.4);
}
.block-year {
font-size: clamp(3rem, 8vw, 7rem);
font-weight: 900;
color: #fff;
line-height: 1;
letter-spacing: -0.03em;
}
.hero-block-bottom {
grid-column: 2 / 3;
grid-row: 2 / 3;
background: var(--site-background-alt, #f1f5f9);
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: 2rem 3rem;
}
.block-accent-line {
width: 50px;
height: 4px;
background: var(--site-primary, #e11d48);
margin-bottom: 1.5rem;
}
.block-tagline {
font-size: 1.1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--site-heading-color, #111827);
line-height: 1.4;
}
/* ========================================
CONTENT
======================================== */
.geometric-grid-content {
min-height: 50vh;
position: relative;
z-index: 1;
}
/* ========================================
NEWSLETTER
======================================== */
.geometric-newsletter {
background: var(--site-background-alt, #f1f5f9);
padding: 3.5rem 0;
border-top: 3px solid var(--site-heading-color, #111827);
}
.geometric-newsletter-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
align-items: center;
}
.geometric-accent-block {
width: 40px; height: 4px;
background: var(--site-primary, #e11d48);
margin-bottom: 1rem;
}
.geometric-newsletter-title {
font-size: 1.5rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--site-heading-color, #111827);
margin-bottom: 0.25rem;
}
/* ========================================
FOOTER
======================================== */
.footer-geometric-main {
background: var(--site-heading-color, #111827);
padding: 4.5rem 0;
border-top: 3px solid var(--site-footer-accent, #e11d48);
}
.footer-geometric-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
}
.footer-geometric-col {
padding: 0 2rem;
border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-geometric-col:first-child { padding-left: 0; }
.footer-geometric-col:last-child { padding-right: 0; border-right: none; }
.footer-geometric-brand {
color: var(--site-footer-heading, #fff);
font-size: 1.5rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 1rem;
}
.footer-geometric-about {
color: var(--site-footer-text, rgba(255, 255, 255, 0.45));
font-size: 0.9rem;
line-height: 1.7;
max-width: 360px;
}
.footer-geometric-social { display: flex; gap: 0; margin-top: 1.5rem; }
.footer-geometric-social a {
color: rgba(255, 255, 255, 0.4);
font-size: 0.95rem;
width: 38px; height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.15);
margin-right: -1px;
transition: all 0.2s;
}
.footer-geometric-social a:hover {
color: #fff;
background: var(--site-footer-accent, #e11d48);
border-color: var(--site-footer-accent, #e11d48);
}
.footer-geometric-heading {
color: var(--site-footer-heading, #fff);
font-weight: 800;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.2em;
margin-bottom: 1.5rem;
padding-bottom: 0.75rem;
border-bottom: 2px solid var(--site-footer-accent, #e11d48);
display: inline-block;
}
.footer-geometric-links { list-style: none; padding: 0; margin: 0; }
.footer-geometric-links li { margin-bottom: 0.6rem; }
.footer-geometric-links a {
color: var(--site-footer-text, rgba(255, 255, 255, 0.45));
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: color 0.2s;
}
.footer-geometric-links a:hover { color: #fff; }
.footer-geometric-contact { list-style: none; padding: 0; margin: 0; }
.footer-geometric-contact li {
margin-bottom: 0.75rem;
color: var(--site-footer-text, rgba(255, 255, 255, 0.45));
font-size: 0.9rem;
}
.footer-geometric-contact li i {
width: 18px;
color: var(--site-footer-accent, #e11d48);
margin-right: 0.4rem;
}
.footer-geometric-contact a {
color: var(--site-footer-text, rgba(255, 255, 255, 0.45));
text-decoration: none;
transition: color 0.2s;
}
.footer-geometric-contact a:hover { color: #fff; }
.footer-geometric-hours {
color: var(--site-footer-text, rgba(255, 255, 255, 0.45));
font-size: 0.9rem;
line-height: 1.8;
}
.footer-geometric-bottom {
background: color-mix(in srgb, var(--site-heading-color, #111827) 80%, black);
padding: 1rem 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-bottom-grid {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
}
.footer-geometric-bottom p,
.footer-geometric-bottom a {
color: rgba(255, 255, 255, 0.3);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.footer-geometric-bottom a:hover { color: rgba(255, 255, 255, 0.7); }
.footer-geometric .footer-legal {
display: flex;
justify-content: flex-end;
gap: 1.5rem;
}
/* ========================================
RESPONSIVE
======================================== */
@media (max-width: 991.98px) {
.navbar-geometric .navbar-collapse {
background: var(--site-header-accent, #e11d48);
padding: 1rem;
border-top: 2px solid rgba(255, 255, 255, 0.15);
}
.hero-grid {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
min-height: auto;
}
.hero-block-main {
grid-column: 1; grid-row: 1;
border-right: none;
border-bottom: 3px solid var(--site-heading-color, #111827);
padding: 5rem 1.5rem 3rem;
min-height: 60vh;
}
.hero-block-top { grid-column: 1; grid-row: 2; padding: 2rem; border-bottom: none; }
.hero-block-bottom { grid-column: 1; grid-row: 3; padding: 2rem 1.5rem; }
.geometric-newsletter-grid { grid-template-columns: 1fr; }
.footer-geometric-grid { grid-template-columns: 1fr; gap: 2rem; }
.footer-geometric-col {
padding: 0; border-right: none;
padding-bottom: 2rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-geometric-col:last-child { padding-bottom: 0; border-bottom: none; }
.footer-bottom-grid { grid-template-columns: 1fr; text-align: center; gap: 0.75rem; }
.footer-geometric .footer-legal { justify-content: center; }
}
@media (max-width: 575.98px) {
.hero-block-main { padding: 5rem 1.25rem 2.5rem; }
.hero-geometric-title { font-size: 2.5rem; }
.hero-geometric-actions { flex-direction: column; }
.hero-geometric-actions .btn-geometric-primary,
.hero-geometric-actions .btn-geometric-outline { text-align: center; }
.block-year { font-size: 4rem; }
}
nordic-cleanMinimalismo escandinavo com tons quentes, espacamento generoso, bordas finas e cantos suaves. Calmo e acolhedor.
Header Nordic Clean - Minimalismo escandinavo. O header utiliza a classe site-header header-nordic como elemento raiz. O conteudo do header esta dentro de um .container do Bootstrap, limitando a largura maxima. O conteudo das paginas e inserido dentro de <main> com classe site-content nordic-clean-content. O placeholder [[CONTENT]] e substituido pelo conteudo renderizado de cada pagina. Rodape: Newsletter. Possui markers para insercao automatica de componentes: NAV_ITEMS, HEADER_UTILITY, FOOTER_ITEMS. Esses markers permitem que o sistema insira menus de modulos, utilitarios e itens do rodape automaticamente. Utiliza os componentes Blade: x-front.search-box, x-front.newsletter-form. Comportamentos JavaScript incluidos: efeito de scroll no header, botao voltar ao topo, animacoes de entrada (fade-in), scroll suave. Recomendado para: Decoracao, Moveis, Bem-estar, Clinicas.
<header>
site-header header-nordic
<main>
site-content nordic-clean-content
<section>
nordic-newsletter
{{-- Header Nordic Clean - Minimalismo escandinavo --}}
<header class="site-header header-nordic" role="banner">
<nav class="navbar navbar-expand-lg navbar-nordic" aria-label="Menu principal">
<div class="container">
<a class="navbar-brand" href="/" aria-label="Pagina inicial - {{ $siteName }}">
@if($siteLogo)
<img src="{{ $siteLogo }}" alt="{{ $siteName }}" height="38" class="logo-img">
@else
<span class="logo-nordic">{{ $siteName }}</span>
@endif
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nordicNavbar"
aria-controls="nordicNavbar" aria-expanded="false" aria-label="Abrir menu">
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="nordicNavbar">
<ul class="navbar-nav ms-auto align-items-lg-center">
<li class="nav-item">
<a class="nav-link" href="/">Inicio</a>
</li>
{{-- [COMPONENT:NAV_ITEMS] --}}
<li class="nav-item nav-search ms-lg-3">
<x-front.search-box />
</li>
<li class="nav-item ms-lg-3">
<a class="btn btn-nordic-cta" href="/contato">Contato</a>
</li>
</ul>
</div>
{{-- [COMPONENT:HEADER_UTILITY] --}}
</div>
</nav>
{{-- Hero escandinavo --}}
<div class="hero-nordic">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<div class="hero-nordic-content">
<p class="nordic-tagline">{{ $siteTagline ?? 'Simplicidade e Harmonia' }}</p>
<h1 class="nordic-title">{{ $siteName }}</h1>
<p class="nordic-subtitle">Experiencias cuidadosamente projetadas. Design limpo, funcional e atemporal.</p>
<div class="nordic-actions">
<a href="/contato" class="btn btn-nordic-primary">Conheca <i class="fas fa-arrow-right ms-2"></i></a>
<a href="/sobre" class="btn btn-nordic-outline">Saiba Mais</a>
</div>
</div>
</div>
<div class="col-lg-6 d-none d-lg-flex justify-content-center">
<div class="nordic-visual">
<div class="nordic-circle nordic-circle-lg"></div>
<div class="nordic-circle nordic-circle-md"></div>
<div class="nordic-circle nordic-circle-sm"></div>
<div class="nordic-line nordic-line-1"></div>
<div class="nordic-line nordic-line-2"></div>
</div>
</div>
</div>
</div>
</div>
</header>
{{-- Newsletter --}}
<section class="nordic-newsletter">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-5 mb-3 mb-lg-0">
<h3 class="nordic-newsletter-title">Newsletter</h3>
<p class="nordic-newsletter-text">Receba novidades e inspiracao diretamente no seu e-mail.</p>
</div>
<div class="col-lg-7">
<x-front.newsletter-form layout="inline" />
</div>
</div>
</div>
</section>
{{-- Footer Nordic Clean --}}
<footer class="site-footer footer-nordic" role="contentinfo" itemscope itemtype="https://schema.org/Organization">
<div class="footer-nordic-main">
<div class="container">
<div class="row gy-4">
{{-- Brand + About --}}
<div class="col-lg-4">
@if($siteLogoFooter ?? $siteLogo)
<img src="{{ $siteLogoFooter ?? $siteLogo }}" alt="{{ $siteName }}" height="36" class="footer-logo mb-3" itemprop="logo">
@else
<h5 class="nordic-footer-brand" itemprop="name">{{ $siteName }}</h5>
@endif
<p class="nordic-footer-about" itemprop="description">{{ $footerAbout }}</p>
@if($footerShowSocial)
<div class="nordic-footer-social">
@if($siteFacebook)<a href="{{ $siteFacebook }}" target="_blank" rel="noopener" aria-label="Facebook" itemprop="sameAs"><i class="fab fa-facebook-f"></i></a>@endif
@if($siteInstagram)<a href="{{ $siteInstagram }}" target="_blank" rel="noopener" aria-label="Instagram" itemprop="sameAs"><i class="fab fa-instagram"></i></a>@endif
@if($siteLinkedin)<a href="{{ $siteLinkedin }}" target="_blank" rel="noopener" aria-label="LinkedIn" itemprop="sameAs"><i class="fab fa-linkedin-in"></i></a>@endif
@if($siteTwitter)<a href="{{ $siteTwitter }}" target="_blank" rel="noopener" aria-label="Twitter" itemprop="sameAs"><i class="fab fa-x-twitter"></i></a>@endif
@if($siteYoutube)<a href="{{ $siteYoutube }}" target="_blank" rel="noopener" aria-label="YouTube" itemprop="sameAs"><i class="fab fa-youtube"></i></a>@endif
</div>
@endif
</div>
{{-- Links --}}
<div class="col-lg-3 col-md-4 offset-lg-1">
<h6 class="nordic-footer-heading">Links</h6>
<ul class="nordic-footer-links">
<li><a href="/">Inicio</a></li>
<li><a href="/sobre">Sobre</a></li>
<li><a href="/contato">Contato</a></li>
</ul>
</div>
{{-- Contato --}}
@if($footerShowContact)
<div class="col-lg-4 col-md-8">
<h6 class="nordic-footer-heading">Contato</h6>
<ul class="nordic-footer-contact" itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
@if($siteEmail)
<li><i class="fas fa-envelope"></i> <a href="mailto:{{ $siteEmail }}" itemprop="email">{{ $siteEmail }}</a></li>
@endif
@if($sitePhone)
<li><i class="fas fa-phone"></i> <a href="tel:{{ preg_replace('/[^0-9+]/', '', $sitePhone) }}" itemprop="telephone">{{ $sitePhone }}</a></li>
@endif
@if($siteWhatsapp)
<li><i class="fab fa-whatsapp"></i> <a href="{{ $siteWhatsappLink }}" target="_blank" rel="noopener">WhatsApp</a></li>
@endif
@if($siteCity || $siteState)
<li><i class="fas fa-map-marker-alt"></i> <span>{{ $siteCity }}@if($siteCity && $siteState), @endif{{ $siteState }}</span></li>
@endif
</ul>
@if($siteBusinessHours)
<div class="nordic-footer-hours">
<h6 class="nordic-footer-heading mt-3">Horario</h6>
<p>{!! nl2br(e($siteBusinessHours)) !!}</p>
</div>
@endif
</div>
@endif
</div>
</div>
</div>
{{-- [COMPONENT:FOOTER_ITEMS] --}}
<div class="footer-nordic-bottom">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6 text-center text-md-start">
<p class="mb-0">{!! $footerCopyright !!}</p>
</div>
<div class="col-md-6 text-center text-md-end">
<nav class="footer-legal">
@if($privacyPolicyUrl)<a href="{{ $privacyPolicyUrl }}">Privacidade</a>@endif
@if($termsUrl)<a href="{{ $termsUrl }}">Termos</a>@endif
</nav>
</div>
</div>
</div>
</div>
</footer>
{{-- Back to top --}}
<button class="back-to-top nordic-back-to-top" aria-label="Voltar ao topo">
<i class="fas fa-chevron-up"></i>
</button>
/**
* CSS - Nordic Clean
* Minimalismo escandinavo: tons quentes, espacamento generoso, bordas finas, cantos suaves
*/
/* ========================================
NAVBAR
======================================== */
.header-nordic {
z-index: 1050 !important;
}
.navbar-nordic {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1050;
padding: 1.1rem 0;
background: #fff !important;
border-bottom: 1px solid var(--site-border, #e8e2db);
transition: box-shadow 0.3s ease, padding 0.3s ease;
}
.navbar-nordic.scrolled {
box-shadow: 0 2px 16px rgba(45, 41, 38, 0.06);
padding: 0.75rem 0;
}
.logo-nordic {
font-size: 1.25rem;
font-weight: 600;
color: var(--site-header-text, var(--site-heading-color, #2d2926));
letter-spacing: 0.04em;
}
.navbar-nordic .navbar-toggler {
border: 1px solid var(--site-border, #e8e2db);
color: var(--site-heading-color, #2d2926);
font-size: 1.15rem;
padding: 0.35rem 0.65rem;
border-radius: var(--site-btn-border-radius, 6px);
}
.navbar-nordic .nav-link {
color: var(--site-header-text, var(--site-text, #6b6560));
font-weight: 500;
padding: 0.5rem 0.9rem;
font-size: 0.9rem;
letter-spacing: 0.01em;
position: relative;
transition: color 0.25s ease;
}
.navbar-nordic .nav-link::after {
content: '';
position: absolute;
bottom: 2px;
left: 0.9rem;
right: 0.9rem;
height: 1px;
background: var(--site-header-accent, #8b7355);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.3s ease;
}
.navbar-nordic .nav-link:hover::after,
.navbar-nordic .nav-link.active::after {
transform: scaleX(1);
transform-origin: left;
}
.navbar-nordic .nav-link:hover,
.navbar-nordic .nav-link.active {
color: var(--site-header-text-hover, var(--site-header-accent, #8b7355));
}
.btn-nordic-cta {
background: var(--site-header-accent, #8b7355);
color: #fff;
padding: 0.45rem 1.4rem;
border-radius: var(--site-btn-border-radius, 6px);
font-weight: 500;
font-size: 0.88rem;
transition: all 0.3s ease;
text-decoration: none;
border: 1px solid var(--site-header-accent, #8b7355);
}
.btn-nordic-cta:hover {
background: transparent;
color: var(--site-header-accent, #8b7355);
}
/* ========================================
HERO
======================================== */
.hero-nordic {
min-height: 85vh;
display: flex;
align-items: center;
background: var(--site-background, #faf8f5);
padding: 76px 0 0;
position: relative;
overflow: hidden;
}
.hero-nordic-content {
padding: 4rem 0;
}
.nordic-tagline {
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--site-primary, #8b7355);
margin-bottom: 1.25rem;
}
.nordic-title {
font-size: clamp(2.25rem, 4.5vw, 3.25rem);
font-weight: 600;
line-height: 1.2;
color: var(--site-heading-color, #2d2926);
letter-spacing: -0.01em;
margin-bottom: 1.25rem;
}
.nordic-subtitle {
font-size: 1.05rem;
color: var(--site-text, #6b6560);
line-height: 1.75;
max-width: 440px;
margin-bottom: 2rem;
font-weight: 400;
}
.nordic-actions {
display: flex;
flex-wrap: wrap;
gap: 0.85rem;
}
.btn-nordic-primary {
background: var(--site-primary, #8b7355);
color: #fff;
padding: 0.75rem 2rem;
border-radius: var(--site-btn-border-radius, 6px);
font-weight: 500;
font-size: 0.9rem;
border: 1px solid var(--site-primary, #8b7355);
text-decoration: none;
display: inline-flex;
align-items: center;
transition: all 0.3s ease;
}
.btn-nordic-primary:hover {
background: var(--site-heading-color, #2d2926);
border-color: var(--site-heading-color, #2d2926);
color: #fff;
}
.btn-nordic-outline {
background: transparent;
color: var(--site-heading-color, #2d2926);
padding: 0.75rem 2rem;
border-radius: var(--site-btn-border-radius, 6px);
font-weight: 500;
font-size: 0.9rem;
border: 1px solid var(--site-border, #e8e2db);
text-decoration: none;
display: inline-flex;
align-items: center;
transition: all 0.3s ease;
}
.btn-nordic-outline:hover {
border-color: var(--site-primary, #8b7355);
color: var(--site-primary, #8b7355);
}
/* Hero visual - decorative geometric element */
.nordic-visual {
position: relative;
width: 360px;
height: 360px;
}
.nordic-circle {
position: absolute;
border-radius: 50%;
border: 1px solid var(--site-border, #e8e2db);
}
.nordic-circle-lg {
width: 320px;
height: 320px;
top: 20px;
left: 20px;
background: color-mix(in srgb, var(--site-primary, #8b7355) 5%, var(--site-background, #faf8f5));
animation: nordicFloat 8s ease-in-out infinite;
}
.nordic-circle-md {
width: 200px;
height: 200px;
top: 80px;
left: 80px;
background: color-mix(in srgb, var(--site-primary, #8b7355) 10%, var(--site-background, #faf8f5));
animation: nordicFloat 6s ease-in-out infinite 0.5s;
}
.nordic-circle-sm {
width: 100px;
height: 100px;
top: 130px;
left: 130px;
background: color-mix(in srgb, var(--site-primary, #8b7355) 18%, var(--site-background, #faf8f5));
animation: nordicFloat 5s ease-in-out infinite 1s;
}
.nordic-line {
position: absolute;
background: var(--site-border, #e8e2db);
}
.nordic-line-1 {
width: 1px;
height: 120px;
top: -20px;
right: 60px;
animation: nordicFade 4s ease-in-out infinite;
}
.nordic-line-2 {
width: 80px;
height: 1px;
bottom: 40px;
left: -10px;
animation: nordicFade 4s ease-in-out infinite 1s;
}
@keyframes nordicFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes nordicFade {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
/* ========================================
CONTENT
======================================== */
.nordic-clean-content {
min-height: 50vh;
position: relative;
z-index: 1;
}
/* ========================================
NEWSLETTER
======================================== */
.nordic-newsletter {
background: var(--site-background-alt, #f2efe9);
padding: 3.5rem 0;
border-top: 1px solid var(--site-border, #e8e2db);
}
.nordic-newsletter-title {
font-size: 1.5rem;
font-weight: 600;
color: var(--site-heading-color, #2d2926);
margin-bottom: 0.35rem;
}
.nordic-newsletter-text {
color: var(--site-text, #6b6560);
margin-bottom: 0;
font-size: 0.95rem;
}
/* ========================================
FOOTER
All selectors scoped under .footer-nordic
to override base.css .site-footer a rules
======================================== */
.footer-nordic-main {
background: var(--site-footer-bg, #f2efe9);
padding: 4rem 0;
border-top: 1px solid var(--site-border, #e8e2db);
}
.footer-nordic .nordic-footer-brand {
color: var(--site-footer-heading, var(--site-heading-color, #2d2926));
font-size: 1.2rem;
font-weight: 600;
letter-spacing: 0.02em;
margin-bottom: 0.75rem;
}
.footer-nordic .nordic-footer-about {
color: var(--site-footer-text, var(--site-text, #6b6560));
font-size: 0.9rem;
line-height: 1.7;
max-width: 340px;
}
.footer-nordic .nordic-footer-social {
display: flex;
gap: 0.6rem;
margin-top: 1.25rem;
}
.footer-nordic .nordic-footer-social a {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--site-border, #e8e2db);
color: var(--site-text, #6b6560);
border-radius: 50%;
font-size: 0.85rem;
transition: all 0.3s ease;
}
.footer-nordic .nordic-footer-social a:hover {
background: var(--site-footer-accent, #8b7355);
border-color: var(--site-footer-accent, #8b7355);
color: #fff;
}
.footer-nordic .nordic-footer-heading {
color: var(--site-footer-heading, var(--site-heading-color, #2d2926));
font-weight: 600;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.12em;
margin-bottom: 1.25rem;
}
.footer-nordic .nordic-footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-nordic .nordic-footer-links li {
margin-bottom: 0.65rem;
}
.footer-nordic .nordic-footer-links a {
color: var(--site-footer-text, var(--site-text, #6b6560));
text-decoration: none;
font-size: 0.9rem;
position: relative;
transition: color 0.25s ease;
}
.footer-nordic .nordic-footer-links a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 1px;
background: var(--site-footer-accent, #8b7355);
transition: width 0.3s ease;
}
.footer-nordic .nordic-footer-links a:hover {
color: var(--site-footer-accent, #8b7355);
}
.footer-nordic .nordic-footer-links a:hover::after {
width: 100%;
}
.footer-nordic .nordic-footer-contact {
list-style: none;
padding: 0;
margin: 0;
}
.footer-nordic .nordic-footer-contact li {
display: flex;
align-items: center;
gap: 0.65rem;
margin-bottom: 0.7rem;
color: var(--site-footer-text, var(--site-text, #6b6560));
font-size: 0.9rem;
}
.footer-nordic .nordic-footer-contact i {
color: var(--site-footer-accent, #8b7355);
width: 16px;
text-align: center;
font-size: 0.8rem;
}
.footer-nordic .nordic-footer-contact a {
color: var(--site-footer-text, var(--site-text, #6b6560));
text-decoration: none;
transition: color 0.25s ease;
}
.footer-nordic .nordic-footer-contact a:hover {
color: var(--site-footer-accent, #8b7355);
}
.footer-nordic .nordic-footer-hours p {
color: var(--site-footer-text, var(--site-text, #6b6560));
font-size: 0.88rem;
line-height: 1.7;
margin-bottom: 0;
}
.footer-nordic-bottom {
background: color-mix(in srgb, var(--site-footer-bg, #f2efe9) 85%, var(--site-heading-color, #2d2926) 15%);
padding: 1.15rem 0;
border-top: 1px solid var(--site-border, #e8e2db);
}
.footer-nordic .footer-nordic-bottom p,
.footer-nordic .footer-nordic-bottom a {
color: var(--site-text, #6b6560);
font-size: 0.82rem;
}
.footer-nordic .footer-nordic-bottom a:hover {
color: var(--site-footer-accent, #8b7355);
}
.footer-nordic .footer-legal {
display: flex;
justify-content: center;
gap: 1.5rem;
}
@media (min-width: 768px) {
.footer-nordic .footer-legal {
justify-content: flex-end;
}
}
/* ========================================
BACK TO TOP
======================================== */
.nordic-back-to-top {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--site-background, #faf8f5);
color: var(--site-primary, #8b7355);
border: 1px solid var(--site-border, #e8e2db);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
z-index: 1040;
box-shadow: 0 2px 8px rgba(45, 41, 38, 0.06);
}
.nordic-back-to-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nordic-back-to-top:hover {
background: var(--site-primary, #8b7355);
color: #fff;
border-color: var(--site-primary, #8b7355);
}
/* ========================================
FADE IN ANIMATIONS
======================================== */
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* ========================================
RESPONSIVE
======================================== */
@media (max-width: 991.98px) {
.navbar-nordic .navbar-collapse {
background: #fff;
padding: 1rem;
margin-top: 0.5rem;
border: 1px solid var(--site-border, #e8e2db);
border-radius: var(--site-btn-border-radius, 6px);
}
.navbar-nordic .nav-link::after {
display: none;
}
.hero-nordic {
min-height: auto;
padding: 76px 0 0;
}
.hero-nordic-content {
padding: 3rem 0;
}
.nordic-title {
font-size: 2rem;
}
.footer-nordic-main {
padding: 3rem 0;
}
}
@media (max-width: 768px) {
.nordic-actions {
flex-direction: column;
}
.nordic-actions .btn-nordic-primary,
.nordic-actions .btn-nordic-outline {
text-align: center;
justify-content: center;
}
}
@media (max-width: 575.98px) {
.hero-nordic-content {
padding: 2rem 0;
}
.nordic-title {
font-size: 1.75rem;
}
.nordic-subtitle {
font-size: 0.95rem;
}
.nordic-newsletter {
padding: 2.5rem 0;
}
.footer-nordic-main {
padding: 2.5rem 0;
}
.nordic-back-to-top {
bottom: 1.25rem;
right: 1.25rem;
}
}
@media (min-width: 992px) {
.hero-nordic {
min-height: 85vh;
}
.hero-nordic-content {
padding: 5rem 0;
}
}
brutalistAnti-design intencional com bordas grossas, tipografia monospace, alto contraste preto/branco e elementos raw.
Header Brutalist - Raw, structured, anti-smooth. O header utiliza a classe site-header header-brutal como elemento raiz. O conteudo do header esta dentro de um .container do Bootstrap, limitando a largura maxima. O conteudo das paginas e inserido dentro de <main> com classe site-content brutal-content. O placeholder [[CONTENT]] e substituido pelo conteudo renderizado de cada pagina. Rodape: Newsletter. Possui markers para insercao automatica de componentes: NAV_ITEMS, HEADER_UTILITY, FOOTER_ITEMS. Esses markers permitem que o sistema insira menus de modulos, utilitarios e itens do rodape automaticamente. Utiliza os componentes Blade: x-front.search-box, x-front.newsletter-form. Comportamentos JavaScript incluidos: efeito de scroll no header, botao voltar ao topo, animacoes de entrada (fade-in), scroll suave. Recomendado para: Agencias, Estudio de Design, Galeria de Arte, Developers.
<header>
site-header header-brutal
<main>
site-content brutal-content
<section>
brutal-newsletter
{{-- Header Brutalist - Raw, structured, anti-smooth --}}
<header class="site-header header-brutal" role="banner">
<nav class="navbar navbar-expand-lg brutal-navbar" aria-label="Menu principal">
<div class="container">
{{-- Logo --}}
<a class="navbar-brand" href="/" aria-label="Pagina inicial - {{ $siteName }}">
@if($siteLogo)
<img src="{{ $siteLogo }}" alt="{{ $siteName }}" height="40" class="logo-img">
@else
<span class="brutal-logo">{{ $siteName }}</span>
@endif
</a>
{{-- Mobile toggle --}}
<button class="navbar-toggler brutal-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#brutalNavbar"
aria-controls="brutalNavbar" aria-expanded="false" aria-label="Abrir menu">
<i class="fas fa-bars"></i>
</button>
{{-- Menu --}}
<div class="collapse navbar-collapse" id="brutalNavbar">
<ul class="navbar-nav ms-auto align-items-lg-center">
<li class="nav-item">
<a class="nav-link" href="/">Inicio</a>
</li>
{{-- [COMPONENT:NAV_ITEMS] --}}
<li class="nav-item nav-search ms-lg-3">
<x-front.search-box />
</li>
<li class="nav-item ms-lg-3">
<a class="btn brutal-btn-cta" href="/contato">Contato</a>
</li>
</ul>
</div>
{{-- [COMPONENT:HEADER_UTILITY] --}}
</div>
</nav>
{{-- Hero Brutalist --}}
<div class="brutal-hero">
<div class="container">
<div class="brutal-hero-inner">
<div class="brutal-hero-accent"></div>
<p class="brutal-tagline">{{ $siteTagline ?? '// NO CURVES. NO COMPROMISES.' }}</p>
<h1 class="brutal-title">{{ $siteName }}</h1>
<p class="brutal-subtitle">Design cru. Funcionalidade pura. Sem distracao.</p>
<div class="brutal-actions">
<a href="/contato" class="btn brutal-btn-primary">Ver Projetos <i class="fas fa-arrow-right ms-2"></i></a>
<a href="/sobre" class="btn brutal-btn-outline">Sobre</a>
</div>
</div>
</div>
</div>
</header>
{{-- Newsletter --}}
<section class="brutal-newsletter">
<div class="container">
<div class="brutal-newsletter-inner">
<div class="brutal-newsletter-label">
<div class="brutal-newsletter-block"></div>
<h3 class="brutal-newsletter-title">NEWSLETTER</h3>
<p class="brutal-newsletter-desc">Conteudo direto, sem frescura. Direto no seu e-mail.</p>
</div>
<div class="brutal-newsletter-form">
<x-front.newsletter-form layout="inline" />
</div>
</div>
</div>
</section>
{{-- Footer Brutalist --}}
<footer class="site-footer footer-brutal" role="contentinfo" itemscope itemtype="https://schema.org/Organization">
<div class="brutal-footer-main">
<div class="container">
<div class="row gy-4">
{{-- Brand --}}
<div class="col-lg-4 col-md-6">
<div class="brutal-footer-col">
@if($siteLogoFooter ?? $siteLogo)
<img src="{{ $siteLogoFooter ?? $siteLogo }}" alt="{{ $siteName }}" height="40" class="footer-logo mb-3" itemprop="logo">
@else
<h2 class="brutal-footer-name" itemprop="name">{{ $siteName }}</h2>
@endif
<p class="brutal-footer-about" itemprop="description">{{ $footerAbout }}</p>
@if($footerShowSocial)
<div class="brutal-footer-social">
@if($siteFacebook)<a href="{{ $siteFacebook }}" target="_blank" rel="noopener" aria-label="Facebook" itemprop="sameAs"><i class="fab fa-facebook-f"></i></a>@endif
@if($siteInstagram)<a href="{{ $siteInstagram }}" target="_blank" rel="noopener" aria-label="Instagram" itemprop="sameAs"><i class="fab fa-instagram"></i></a>@endif
@if($siteLinkedin)<a href="{{ $siteLinkedin }}" target="_blank" rel="noopener" aria-label="LinkedIn" itemprop="sameAs"><i class="fab fa-linkedin-in"></i></a>@endif
@if($siteYoutube)<a href="{{ $siteYoutube }}" target="_blank" rel="noopener" aria-label="YouTube" itemprop="sameAs"><i class="fab fa-youtube"></i></a>@endif
@if($siteTwitter)<a href="{{ $siteTwitter }}" target="_blank" rel="noopener" aria-label="Twitter" itemprop="sameAs"><i class="fab fa-x-twitter"></i></a>@endif
</div>
@endif
</div>
</div>
{{-- Links --}}
<div class="col-lg-3 col-md-6">
<div class="brutal-footer-col">
<h6 class="brutal-footer-heading">LINKS_</h6>
<ul class="brutal-footer-links">
<li><a href="/">Inicio</a></li>
<li><a href="/sobre">Sobre</a></li>
<li><a href="/contato">Contato</a></li>
</ul>
</div>
</div>
{{-- Contato --}}
@if($footerShowContact)
<div class="col-lg-5 col-md-12">
<div class="brutal-footer-col">
<h6 class="brutal-footer-heading">CONTATO_</h6>
<ul class="brutal-footer-contact" itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
@if($siteEmail)<li><span class="brutal-label">E:</span> <a href="mailto:{{ $siteEmail }}" itemprop="email">{{ $siteEmail }}</a></li>@endif
@if($sitePhone)<li><span class="brutal-label">T:</span> <a href="tel:{{ preg_replace('/[^0-9+]/', '', $sitePhone) }}" itemprop="telephone">{{ $sitePhone }}</a></li>@endif
@if($siteWhatsapp)<li><span class="brutal-label">W:</span> <a href="{{ $siteWhatsappLink }}" target="_blank" rel="noopener">WhatsApp</a></li>@endif
@if($siteCity || $siteState)<li><span class="brutal-label">L:</span> <span itemprop="addressLocality">{{ $siteCity }}</span>@if($siteCity && $siteState), @endif<span itemprop="addressRegion">{{ $siteState }}</span></li>@endif
</ul>
@if($siteBusinessHours)
<h6 class="brutal-footer-heading mt-4">HORARIO_</h6>
<p class="brutal-footer-hours">{!! nl2br(e($siteBusinessHours)) !!}</p>
@endif
</div>
</div>
@endif
</div>
</div>
</div>
{{-- [COMPONENT:FOOTER_ITEMS] --}}
<div class="brutal-footer-bottom">
<div class="container">
<div class="brutal-footer-bottom-inner">
<div class="brutal-copyright">
<p class="mb-0">{!! $footerCopyright !!}</p>
</div>
<div class="brutal-legal">
<nav class="footer-legal">
@if($privacyPolicyUrl)<a href="{{ $privacyPolicyUrl }}">Privacidade</a>@endif
@if($termsUrl)<a href="{{ $termsUrl }}">Termos</a>@endif
</nav>
</div>
</div>
</div>
</div>
</footer>
{{-- Back to top --}}
<button class="back-to-top" aria-label="Voltar ao topo">
<i class="fas fa-chevron-up"></i>
</button>
/**
* CSS - Brutalist
* Raw, structured, anti-smooth. Thick borders, monospace fonts, zero radius.
*/
/* ========================================
GLOBAL OVERRIDES
======================================== */
.header-brutal,
.brutal-content,
.footer-brutal,
.brutal-newsletter {
--brutal-border: 3px solid var(--site-heading-color, #000000);
--brutal-accent: var(--site-primary, #ff3200);
--brutal-bg: var(--site-background, #ffffff);
--brutal-text: var(--site-text, #333333);
--brutal-heading: var(--site-heading-color, #000000);
--brutal-font: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', 'Monaco', 'Courier New', monospace;
}
.header-brutal *,
.brutal-content *,
.footer-brutal *,
.brutal-newsletter * {
border-radius: 0 !important;
}
/* ========================================
NAVBAR
======================================== */
.header-brutal {
z-index: 1050 !important;
}
.brutal-navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1050;
padding: 0;
background: var(--brutal-bg) !important;
border-bottom: 3px solid var(--brutal-heading) !important;
transition: box-shadow 0.2s ease;
}
.brutal-navbar.scrolled {
box-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);
}
.brutal-navbar .container {
display: flex;
align-items: center;
min-height: 56px;
}
.brutal-logo {
font-family: var(--brutal-font);
font-size: 1.1rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--site-header-text, var(--brutal-heading));
text-decoration: none;
}
.brutal-toggler {
border: 3px solid var(--brutal-heading) !important;
background: transparent !important;
color: var(--brutal-heading);
font-family: var(--brutal-font);
font-size: 1.2rem;
padding: 0.35rem 0.65rem;
line-height: 1;
}
.brutal-toggler:focus {
box-shadow: none;
outline: 3px solid var(--site-header-accent, #ff3200);
outline-offset: 2px;
}
.brutal-navbar .nav-link {
font-family: var(--brutal-font);
color: var(--site-header-text, var(--brutal-text));
font-weight: 700;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.12em;
padding: 1rem 0.85rem;
border-bottom: 3px solid transparent;
transition: border-color 0.15s ease, color 0.15s ease;
text-decoration: none;
}
.brutal-navbar .nav-link:hover,
.brutal-navbar .nav-link.active {
color: var(--site-header-text-hover, var(--brutal-heading));
border-bottom-color: var(--site-header-accent, #ff3200);
}
.brutal-btn-cta {
font-family: var(--brutal-font);
background: var(--brutal-heading);
color: #fff;
padding: 0.5rem 1.5rem;
border: 3px solid var(--brutal-heading);
font-weight: 900;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1em;
text-decoration: none;
transition: all 0.15s ease;
}
.brutal-btn-cta:hover {
background: var(--site-header-accent, #ff3200);
border-color: var(--site-header-accent, #ff3200);
color: #fff;
}
/* ========================================
HERO
======================================== */
.brutal-hero {
min-height: 90vh;
display: flex;
align-items: center;
background: var(--brutal-bg);
padding: 8rem 0 5rem;
padding-top: calc(56px + 5rem);
}
.brutal-hero-inner {
max-width: 850px;
position: relative;
}
.brutal-hero-accent {
width: 80px;
height: 80px;
background: var(--brutal-accent);
margin-bottom: 2rem;
}
.brutal-tagline {
font-family: var(--brutal-font);
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--brutal-accent);
margin-bottom: 1.5rem;
}
.brutal-title {
font-family: var(--brutal-font);
font-size: clamp(3.5rem, 10vw, 9rem);
font-weight: 900;
line-height: 0.95;
color: var(--brutal-heading);
letter-spacing: -0.03em;
text-transform: uppercase;
margin-bottom: 2rem;
border-bottom: 4px solid var(--brutal-heading);
padding-bottom: 1.5rem;
display: inline-block;
}
.brutal-subtitle {
font-family: var(--brutal-font);
font-size: 1rem;
color: var(--brutal-text);
line-height: 1.8;
max-width: 500px;
margin-bottom: 2.5rem;
}
.brutal-actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.brutal-btn-primary {
font-family: var(--brutal-font);
background: var(--brutal-heading);
color: #fff;
padding: 1rem 2.5rem;
border: 3px solid var(--brutal-heading);
font-weight: 900;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.1em;
text-decoration: none;
display: inline-flex;
align-items: center;
transition: all 0.15s ease;
}
.brutal-btn-primary:hover {
background: var(--brutal-accent);
border-color: var(--brutal-accent);
color: #fff;
}
.brutal-btn-outline {
font-family: var(--brutal-font);
background: transparent;
color: var(--brutal-heading);
padding: 1rem 2.5rem;
border: 3px solid var(--brutal-heading);
font-weight: 900;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.1em;
text-decoration: none;
display: inline-flex;
align-items: center;
transition: all 0.15s ease;
}
.brutal-btn-outline:hover {
background: var(--brutal-heading);
color: #fff;
}
/* ========================================
CONTENT
======================================== */
.brutal-content {
min-height: 50vh;
position: relative;
z-index: 1;
}
/* ========================================
NEWSLETTER
======================================== */
.brutal-newsletter {
background: var(--site-background-alt, #f5f5f5);
padding: 4rem 0;
border-top: 3px solid var(--brutal-heading);
border-bottom: 3px solid var(--brutal-heading);
}
.brutal-newsletter-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
}
.brutal-newsletter-block {
width: 40px;
height: 40px;
background: var(--brutal-accent);
margin-bottom: 1rem;
}
.brutal-newsletter-title {
font-family: var(--brutal-font);
font-size: 1.75rem;
font-weight: 900;
color: var(--brutal-heading);
letter-spacing: 0.05em;
margin-bottom: 0.5rem;
}
.brutal-newsletter-desc {
font-family: var(--brutal-font);
color: var(--brutal-text);
font-size: 0.85rem;
margin-bottom: 0;
}
/* ========================================
FOOTER
All selectors scoped under .footer-brutal
to override base.css .site-footer a rules
======================================== */
.brutal-footer-main {
background: var(--site-footer-bg, #ffffff);
padding: 4rem 0;
border-top: 4px solid var(--brutal-heading);
}
.footer-brutal .brutal-footer-name {
font-family: var(--brutal-font);
font-size: 1.5rem;
font-weight: 900;
color: var(--site-footer-heading, var(--brutal-heading));
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 1rem;
border-bottom: 3px solid var(--site-footer-accent, #ff3200);
padding-bottom: 0.5rem;
display: inline-block;
}
.footer-brutal .brutal-footer-about {
color: var(--site-footer-text, var(--brutal-text));
font-size: 0.9rem;
line-height: 1.7;
max-width: 380px;
}
.footer-brutal .brutal-footer-social {
display: flex;
gap: 0.75rem;
margin-top: 1.5rem;
}
.footer-brutal .brutal-footer-social a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 3px solid var(--brutal-heading);
color: var(--brutal-heading);
font-size: 0.95rem;
text-decoration: none;
transition: all 0.15s ease;
}
.footer-brutal .brutal-footer-social a:hover {
background: var(--brutal-heading);
color: #fff;
}
.footer-brutal .brutal-footer-heading {
font-family: var(--brutal-font);
font-size: 0.75rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--site-footer-heading, var(--brutal-heading));
margin-bottom: 1.5rem;
border-bottom: 3px solid var(--site-footer-accent, #ff3200);
padding-bottom: 0.5rem;
display: inline-block;
}
/* Footer columns with thick left border dividers */
.footer-brutal .brutal-footer-col {
padding-left: 2rem;
border-left: 3px solid var(--brutal-heading);
}
.footer-brutal .row > :first-child .brutal-footer-col {
padding-left: 0;
border-left: none;
}
.footer-brutal .brutal-footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-brutal .brutal-footer-links li {
margin-bottom: 0.6rem;
border-left: 3px solid transparent;
padding-left: 0.75rem;
transition: border-color 0.15s ease;
}
.footer-brutal .brutal-footer-links li:hover {
border-left-color: var(--site-footer-accent, #ff3200);
}
.footer-brutal .brutal-footer-links a {
font-family: var(--brutal-font);
color: var(--site-footer-text, var(--brutal-text));
text-decoration: none;
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: color 0.15s ease;
}
.footer-brutal .brutal-footer-links a:hover {
color: var(--site-footer-accent, #ff3200);
}
.footer-brutal .brutal-footer-contact {
list-style: none;
padding: 0;
margin: 0;
}
.footer-brutal .brutal-footer-contact li {
margin-bottom: 0.6rem;
font-size: 0.85rem;
color: var(--site-footer-text, var(--brutal-text));
}
.footer-brutal .brutal-footer-contact a {
color: var(--site-footer-text, var(--brutal-text));
text-decoration: none;
transition: color 0.15s ease;
}
.footer-brutal .brutal-footer-contact a:hover {
color: var(--site-footer-accent, #ff3200);
}
.footer-brutal .brutal-label {
font-family: var(--brutal-font);
font-weight: 900;
color: var(--site-footer-heading, var(--brutal-heading));
margin-right: 0.25rem;
}
.footer-brutal .brutal-footer-hours {
font-family: var(--brutal-font);
font-size: 0.85rem;
color: var(--site-footer-text, var(--brutal-text));
line-height: 1.8;
}
/* Footer Bottom */
.brutal-footer-bottom {
background: var(--brutal-heading);
padding: 1.25rem 0;
}
.brutal-footer-bottom-inner {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.footer-brutal .brutal-copyright p,
.footer-brutal .brutal-copyright a {
font-family: var(--brutal-font);
color: rgba(255, 255, 255, 0.6);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.footer-brutal .brutal-legal .footer-legal {
display: flex;
gap: 1.5rem;
}
.footer-brutal .brutal-legal .footer-legal a {
font-family: var(--brutal-font);
color: rgba(255, 255, 255, 0.4);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: all 0.15s ease;
}
.footer-brutal .brutal-legal .footer-legal a:hover {
color: rgba(255, 255, 255, 0.9);
border-bottom-color: var(--site-footer-accent, #ff3200);
}
/* ========================================
BACK TO TOP
======================================== */
.back-to-top {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 48px;
height: 48px;
background: var(--brutal-heading);
color: #fff;
border: 3px solid var(--brutal-heading);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease, background 0.15s ease;
z-index: 999;
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
background: var(--brutal-accent);
border-color: var(--brutal-accent);
}
/* ========================================
FADE-IN ANIMATION
======================================== */
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* ========================================
RESPONSIVE — TABLET (max-width: 991.98px)
======================================== */
@media (max-width: 991.98px) {
.brutal-navbar .navbar-collapse {
background: var(--brutal-bg);
padding: 1rem;
margin-top: 0;
border: 3px solid var(--brutal-heading);
border-top: none;
}
.brutal-navbar .nav-link {
padding: 0.75rem 0.85rem;
border-bottom: none;
border-left: 3px solid transparent;
}
.brutal-navbar .nav-link:hover,
.brutal-navbar .nav-link.active {
border-bottom: none;
border-left-color: var(--site-header-accent, #ff3200);
}
.brutal-hero {
padding: 7rem 0 3rem;
padding-top: calc(56px + 3rem);
min-height: 70vh;
}
.brutal-title {
font-size: clamp(2.5rem, 8vw, 5rem);
}
.brutal-hero-accent {
width: 60px;
height: 60px;
}
/* Footer: stack columns, switch to top borders */
.footer-brutal .brutal-footer-col {
padding-left: 0;
border-left: none;
border-top: 3px solid var(--brutal-heading);
padding-top: 1.5rem;
}
.footer-brutal .row > :first-child .brutal-footer-col {
border-top: none;
padding-top: 0;
}
.brutal-newsletter-inner {
grid-template-columns: 1fr;
gap: 2rem;
}
}
/* ========================================
RESPONSIVE — LARGE (min-width: 992px)
======================================== */
@media (min-width: 992px) {
.brutal-footer-bottom-inner {
flex-wrap: nowrap;
}
}
/* ========================================
RESPONSIVE — MEDIUM (min-width: 768px)
======================================== */
@media (min-width: 768px) {
.brutal-legal .footer-legal {
justify-content: flex-end;
}
}
/* ========================================
RESPONSIVE — MOBILE (max-width: 575.98px)
======================================== */
@media (max-width: 575.98px) {
.brutal-hero {
padding: 6rem 0 2.5rem;
padding-top: calc(56px + 2.5rem);
min-height: 60vh;
}
.brutal-title {
font-size: clamp(2rem, 12vw, 3.5rem);
}
.brutal-hero-accent {
width: 48px;
height: 48px;
}
.brutal-subtitle {
font-size: 0.9rem;
}
.brutal-btn-primary,
.brutal-btn-outline {
padding: 0.75rem 1.5rem;
font-size: 0.75rem;
width: 100%;
justify-content: center;
}
.brutal-actions {
flex-direction: column;
}
.brutal-newsletter {
padding: 3rem 0;
}
.brutal-newsletter-title {
font-size: 1.35rem;
}
.brutal-footer-main {
padding: 3rem 0;
}
.footer-brutal .brutal-footer-social a {
width: 36px;
height: 36px;
font-size: 0.85rem;
}
.brutal-footer-bottom-inner {
flex-direction: column;
text-align: center;
}
.brutal-legal .footer-legal {
justify-content: center;
}
.back-to-top {
width: 40px;
height: 40px;
bottom: 1.25rem;
right: 1.25rem;
font-size: 1rem;
}
}
news-portalLayout estilo portal jornalistico com topbar, area de marca, navbar de categorias e footer completo. Ideal para sites de noticias.
Header Portal de Noticias. O header utiliza a classe site-header header-news-portal como elemento raiz. O conteudo do header esta dentro de um .container do Bootstrap, limitando a largura maxima. O conteudo das paginas e inserido dentro de <main> com classe site-content. O placeholder [[CONTENT]] e substituido pelo conteudo renderizado de cada pagina. Rodape: Footer Portal de Noticias. Possui markers para insercao automatica de componentes: NAV_ITEMS, HEADER_UTILITY, FOOTER_ITEMS. Esses markers permitem que o sistema insira menus de modulos, utilitarios e itens do rodape automaticamente. Utiliza os componentes Blade: x-front.search-box, x-front.newsletter-form. Comportamentos JavaScript incluidos: efeito de scroll no header, botao voltar ao topo, animacoes de entrada (fade-in), scroll suave, menu mobile, link ativo no menu. Recomendado para: Portais de Noticias, Jornais, Blogs, Revistas Online.
<header>
site-header header-news-portal
<main>
site-content
<section>
news-newsletter-section
{{-- Header Portal de Noticias --}}
<header class="site-header header-news-portal" role="banner">
{{-- Topbar --}}
<div class="news-topbar">
<div class="container">
<div class="d-flex align-items-center justify-content-between py-1">
{{-- Data e contato --}}
<div class="topbar-left d-flex align-items-center gap-3">
<span class="topbar-date">
<i class="far fa-calendar-alt me-1"></i>
<span id="newsTopbarDate"></span>
</span>
@if($siteEmail)
<a href="mailto:{{ $siteEmail }}" class="topbar-item d-none d-md-inline-flex">
<i class="fas fa-envelope me-1"></i> {{ $siteEmail }}
</a>
@endif
@if($sitePhone)
<a href="tel:{{ preg_replace('/[^0-9+]/', '', $sitePhone) }}" class="topbar-item d-none d-lg-inline-flex">
<i class="fas fa-phone-alt me-1"></i> {{ $sitePhone }}
</a>
@endif
</div>
{{-- Redes sociais --}}
<div class="topbar-social d-flex align-items-center gap-2">
@if($siteFacebook)
<a href="{{ $siteFacebook }}" target="_blank" rel="noopener" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
@endif
@if($siteInstagram)
<a href="{{ $siteInstagram }}" target="_blank" rel="noopener" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
@endif
@if($siteTwitter)
<a href="{{ $siteTwitter }}" target="_blank" rel="noopener" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
@endif
@if($siteYoutube)
<a href="{{ $siteYoutube }}" target="_blank" rel="noopener" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
@endif
@if($siteLinkedin)
<a href="{{ $siteLinkedin }}" target="_blank" rel="noopener" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
@endif
</div>
</div>
</div>
</div>
{{-- Brand area (logo centralizado) --}}
<div class="news-brand">
<div class="container">
<div class="news-brand__inner">
<div class="news-brand__left d-none d-md-flex">
<x-front.search-box />
</div>
<div class="news-brand__center">
<a class="navbar-brand" href="/" aria-label="Pagina inicial - {{ $siteName }}">
@if($siteLogo)
<img src="{{ $siteLogo }}" alt="{{ $siteName }}" class="logo-img">
@else
<span class="logo-text">{{ $siteName }}</span>
@endif
</a>
@if($siteTagline)
<span class="news-tagline">{{ $siteTagline }}</span>
@endif
</div>
<div class="news-brand__right">
{{-- [COMPONENT:HEADER_UTILITY] --}}
</div>
</div>
</div>
</div>
{{-- Navbar de categorias --}}
<nav class="navbar navbar-expand-lg news-navbar" aria-label="Navegacao principal">
<div class="container">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar"
aria-controls="mainNavbar" aria-expanded="false" aria-label="Abrir menu">
<i class="fas fa-bars"></i>
</button>
{{-- Mini-brand mobile (hamburger + logo compacta estilo Gazeta) --}}
<div class="news-navbar__brand">
<a class="news-navbar__brand-link" href="/">
@if($siteLogo)
<img src="{{ $siteLogo }}" alt="{{ $siteName }}" class="news-navbar__brand-img">
@else
<span class="news-navbar__brand-text">{{ $siteName }}</span>
@endif
</a>
</div>
<div class="collapse navbar-collapse" id="mainNavbar">
<ul class="navbar-nav mx-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="/">Inicio</a>
</li>
{{-- [COMPONENT:NAV_ITEMS] --}}
</ul>
{{-- Busca mobile (abaixo dos itens) --}}
<div class="news-mobile-search d-lg-none">
<form action="/busca" method="GET" class="input-group input-group-sm">
<input type="text" name="q" class="form-control" placeholder="Buscar...">
<button class="btn btn-light" type="submit"><i class="fas fa-search"></i></button>
</form>
</div>
<div class="news-navbar__search ms-lg-2 d-none d-lg-block">
<x-front.search-box />
</div>
</div>
</div>
</nav>
</header>
{{-- Footer Portal de Noticias --}}
{{-- Newsletter --}}
@if($siteEmail)
<section class="news-newsletter-section">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-lg-8">
<div class="d-flex flex-column flex-md-row align-items-center gap-3">
<div class="text-center text-md-start">
<h5 class="mb-0"><i class="fas fa-envelope-open-text me-2"></i> Newsletter</h5>
<small class="text-muted">Receba as principais noticias no seu e-mail</small>
</div>
<div class="flex-grow-1 w-100">
<x-front.newsletter-form layout="inline" />
</div>
</div>
</div>
</div>
</div>
</section>
@endif
{{-- Footer --}}
<footer class="site-footer">
<div class="container">
<div class="row py-5">
{{-- Sobre --}}
<div class="col-lg-4 mb-4 mb-lg-0">
<div class="footer-brand mb-3">
@if($siteLogo)
<img src="{{ $siteLogo }}" alt="{{ $siteName }}" height="40" class="mb-2" style="filter: brightness(0) invert(1);">
@else
<h5 class="mb-0" style="color: var(--site-footer-heading, #fff);">{{ $siteName }}</h5>
@endif
</div>
@if($footerAbout)
<p class="footer-about">{{ $footerAbout }}</p>
@endif
@if($footerShowSocial)
<div class="footer-social d-flex gap-2 mt-3">
@if($siteFacebook)
<a href="{{ $siteFacebook }}" target="_blank" rel="noopener" class="social-link" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
@endif
@if($siteInstagram)
<a href="{{ $siteInstagram }}" target="_blank" rel="noopener" class="social-link" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
@endif
@if($siteTwitter)
<a href="{{ $siteTwitter }}" target="_blank" rel="noopener" class="social-link" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
@endif
@if($siteYoutube)
<a href="{{ $siteYoutube }}" target="_blank" rel="noopener" class="social-link" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
@endif
</div>
@endif
</div>
{{-- Links --}}
<div class="col-lg-2 col-md-4 mb-4 mb-lg-0">
<h6 class="footer-title">Links</h6>
<ul class="footer-links">
<li><a href="/">Inicio</a></li>
{{-- [COMPONENT:FOOTER_ITEMS] --}}
</ul>
</div>
{{-- Contato --}}
<div class="col-lg-3 col-md-4 mb-4 mb-lg-0">
@if($footerShowContact)
<h6 class="footer-title">Contato</h6>
<ul class="footer-contact">
@if($sitePhone)
<li><i class="fas fa-phone-alt me-2"></i> {{ $sitePhone }}</li>
@endif
@if($siteEmail)
<li><i class="fas fa-envelope me-2"></i> {{ $siteEmail }}</li>
@endif
@if($siteAddress)
<li><i class="fas fa-map-marker-alt me-2"></i> {{ $siteAddress }}@if($siteCity), {{ $siteCity }}@endif</li>
@endif
</ul>
@endif
</div>
{{-- WhatsApp CTA --}}
<div class="col-lg-3 col-md-4">
@if($siteWhatsapp)
<h6 class="footer-title">Fale Conosco</h6>
<a href="{{ $siteWhatsappLink }}" target="_blank" rel="noopener" class="btn btn-success btn-block w-100">
<i class="fab fa-whatsapp me-1"></i> Falar pelo WhatsApp
</a>
@endif
@if($siteBusinessHours)
<div class="mt-3">
<h6 class="footer-title">Horario</h6>
<p class="footer-about"><i class="far fa-clock me-1"></i> {{ $siteBusinessHours }}</p>
</div>
@endif
</div>
</div>
{{-- Bottom --}}
<div class="footer-bottom py-3">
<div class="d-flex flex-column flex-md-row justify-content-between align-items-center">
<p class="mb-0 small">© {{ date('Y') }} {{ $siteName }}. {{ $footerCopyright ?? 'Todos os direitos reservados.' }}</p>
</div>
</div>
</div>
</footer>
{{-- Back to Top --}}
<button type="button" class="back-to-top" id="backToTop" aria-label="Voltar ao topo">
<i class="fas fa-chevron-up"></i>
</button>
/* ==========================================================================
* Template: Portal de Noticias
* Inspirado em Gazeta do Povo
* ========================================================================== */
/* --- CSS Variables --- */
:root {
--news-dark: #1a1a2e;
--news-accent: #c0392b;
--news-gray: #4a4a5a;
--news-light: #f5f5f5;
--news-border: #e0e0e0;
}
/* --- Topbar --- */
.news-topbar {
background: var(--site-header-accent, var(--news-dark));
color: rgba(255,255,255,0.8);
font-size: 0.78rem;
}
.news-topbar .topbar-item {
color: rgba(255,255,255,0.7);
text-decoration: none;
transition: color 0.2s;
align-items: center;
}
.news-topbar .topbar-item:hover {
color: #fff;
}
.news-topbar .topbar-date {
color: rgba(255,255,255,0.6);
}
.news-topbar .topbar-social a {
color: rgba(255,255,255,0.6);
text-decoration: none;
font-size: 0.85rem;
transition: color 0.2s;
}
.news-topbar .topbar-social a:hover {
color: #fff;
}
/* --- Brand Area (logo centralizado estilo Gazeta) --- */
.news-brand {
background: #fff;
border-bottom: 1px solid var(--news-border);
}
.news-brand__inner {
display: flex;
align-items: center;
justify-content: center;
padding: 1rem 0;
position: relative;
}
.news-brand__left {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
}
.news-brand__right {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
}
.news-brand__center {
text-align: center;
}
.news-brand .navbar-brand {
text-decoration: none;
display: inline-block;
}
.news-brand .logo-text {
font-size: 2.2rem;
font-weight: 800;
color: var(--news-dark);
letter-spacing: 2px;
text-transform: uppercase;
font-family: 'Georgia', 'Times New Roman', serif;
}
.news-brand .logo-img {
max-height: 55px;
transition: max-height 0.3s ease;
}
.news-brand .news-tagline {
display: block;
font-size: 0.8rem;
color: var(--news-gray);
margin-top: 0.15rem;
}
/* Busca na brand area */
.news-brand__left .search-box-icon,
.news-brand__left .search-box-header {
display: flex;
align-items: center;
}
.news-brand__left .search-toggle {
color: var(--news-dark) !important;
font-size: 1.15rem;
padding: 0.25rem;
}
.news-brand__left .search-toggle:hover {
color: var(--site-header-accent) !important;
}
.news-brand__left .search-expandable {
right: auto !important;
left: 0 !important;
}
/* --- Navbar --- */
.header-news-portal .news-navbar {
background: var(--site-header-bg, var(--site-header-accent, var(--news-accent))) !important;
padding: 0;
min-height: 42px;
}
.header-news-portal .news-navbar .navbar-toggler {
border: none;
color: #fff;
font-size: 1.3rem;
padding: 0.4rem 0.6rem;
outline: none;
box-shadow: none;
}
.header-news-portal .news-navbar .navbar-toggler:focus {
box-shadow: none;
outline: none;
}
.header-news-portal .news-navbar .nav-link {
color: var(--site-header-text, rgba(255,255,255,0.9)) !important;
font-size: 0.82rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 0.55rem 0.85rem !important;
transition: color 0.2s, background 0.2s;
}
.header-news-portal .news-navbar .nav-link:hover,
.header-news-portal .news-navbar .nav-link.active {
color: var(--site-header-text-hover, #fff) !important;
background: rgba(0,0,0,0.2);
}
.header-news-portal .news-navbar .dropdown-menu {
border-radius: 0;
border: none;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
margin-top: 0;
}
.header-news-portal .news-navbar .dropdown-item {
font-size: 0.85rem;
padding: 0.5rem 1rem;
}
.header-news-portal .news-navbar .dropdown-item:hover {
background: var(--news-light);
}
/* Navbar centraliza e permite wrap */
.header-news-portal .news-navbar .navbar-nav {
justify-content: center;
flex-wrap: wrap;
}
/* Busca dentro da navbar */
.news-navbar__search {
flex-shrink: 0;
}
.news-navbar__search .search-toggle {
color: rgba(255,255,255,0.8) !important;
font-size: 1rem;
}
.news-navbar__search .search-toggle:hover {
color: #fff !important;
}
.news-navbar__search .search-expandable {
right: 0 !important;
left: auto !important;
}
/* Impedir expansao do input na navbar */
.news-navbar__search .search-input,
.news-navbar__search .search-input:focus {
width: 180px !important;
transition: none !important;
}
/* --- Sticky Header on Scroll --- */
.header-news-portal {
position: relative;
z-index: 1050 !important;
}
.header-news-portal.scrolled .news-topbar {
max-height: 0;
overflow: hidden;
opacity: 0;
padding: 0;
transition: max-height 0.3s ease, opacity 0.2s ease;
}
.header-news-portal .news-topbar {
max-height: 60px;
opacity: 1;
transition: max-height 0.3s ease, opacity 0.2s ease;
}
.header-news-portal.scrolled .news-brand {
max-height: 0;
overflow: hidden;
opacity: 0;
padding: 0;
border: none;
transition: max-height 0.3s ease, opacity 0.2s ease;
}
.header-news-portal .news-brand {
max-height: 150px;
opacity: 1;
transition: max-height 0.3s ease, opacity 0.2s ease;
}
.header-news-portal.scrolled .news-navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1050;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
/* Desktop scrolled: fundo colorido */
@media (min-width: 992px) {
.header-news-portal.scrolled .news-navbar {
background: var(--site-header-bg, var(--site-header-accent, var(--news-accent))) !important;
}
}
/* --- Content area --- */
.site-content {
min-height: 60vh;
}
/* --- Newsletter Section --- */
.news-newsletter-section {
background: var(--news-light);
padding: 2rem 0;
border-top: 1px solid var(--news-border);
border-bottom: 1px solid var(--news-border);
}
/* --- Footer --- */
.site-footer {
background: var(--site-footer-bg, var(--news-dark));
color: var(--site-footer-text, rgba(255,255,255,0.75));
}
.footer-title {
color: var(--site-footer-heading, #fff);
font-size: 0.9rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--site-footer-accent, var(--news-accent));
display: inline-block;
}
.footer-about {
font-size: 0.85rem;
line-height: 1.6;
color: var(--site-footer-text, rgba(255,255,255,0.6));
}
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 0.4rem;
}
.footer-links a {
color: var(--site-footer-text, rgba(255,255,255,0.65));
text-decoration: none;
font-size: 0.85rem;
transition: color 0.2s, padding-left 0.2s;
}
.footer-links a:hover {
color: var(--site-footer-heading, #fff);
padding-left: 4px;
}
.footer-contact {
list-style: none;
padding: 0;
margin: 0;
}
.footer-contact li {
margin-bottom: 0.5rem;
font-size: 0.85rem;
color: var(--site-footer-text, rgba(255,255,255,0.65));
}
.social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(255,255,255,0.1);
color: var(--site-footer-text, rgba(255,255,255,0.7));
text-decoration: none;
transition: background 0.2s, color 0.2s;
font-size: 0.85rem;
}
.social-link:hover {
background: var(--site-footer-accent, var(--news-accent));
color: var(--site-footer-heading, #fff);
}
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.1);
color: var(--site-footer-text, rgba(255,255,255,0.4));
}
/* --- Back to Top --- */
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--site-primary, var(--news-accent));
color: #fff;
border: none;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.back-to-top.show {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
transform: translateY(-2px);
}
/* --- Mini-brand (logo compacta no navbar mobile fixo) --- */
.news-navbar__brand {
display: none; /* Oculto por padrao — aparece só no mobile ao rolar */
}
/* --- Responsive --- */
@media (max-width: 991.98px) {
/* Esconder brand area no mobile — navbar assume o papel */
.header-news-portal .news-brand {
display: none;
}
/* Navbar mobile: fundo branco, hamburger + logo (estilo Gazeta) */
.header-news-portal .news-navbar {
background: #fff !important;
padding: 0.4rem 0;
border-bottom: 1px solid var(--news-border);
}
.header-news-portal .news-navbar > .container {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.header-news-portal .news-navbar .navbar-toggler {
color: var(--news-dark);
order: 0;
flex-shrink: 0;
}
/* Mini-brand: sempre visível no mobile */
.header-news-portal .news-navbar .news-navbar__brand {
display: block;
order: 1;
flex: 1;
text-align: center;
padding-right: 2.5rem; /* compensa toggler para centralizar */
}
.news-navbar__brand-link {
text-decoration: none;
display: inline-block;
}
.news-navbar__brand-text {
font-size: 1.1rem;
font-weight: 800;
color: var(--news-dark);
letter-spacing: 1.5px;
text-transform: uppercase;
font-family: 'Georgia', 'Times New Roman', serif;
}
.news-navbar__brand-img {
max-height: 32px;
}
/* Collapse: fundo com cor do sistema, largura total */
.header-news-portal .news-navbar .navbar-collapse {
order: 3;
flex-basis: 100%;
background: var(--site-header-bg, var(--site-header-accent, var(--news-accent)));
margin: 0.4rem -0.75rem -0.4rem;
padding: 0.5rem 0;
}
/* Mobile nav links */
.header-news-portal .news-navbar .navbar-nav {
padding: 0;
}
.header-news-portal .news-navbar .nav-link {
padding: 0.6rem 1.25rem !important;
font-size: 0.85rem;
color: rgba(255,255,255,0.85) !important;
}
.header-news-portal .news-navbar .nav-link:hover,
.header-news-portal .news-navbar .nav-link.active {
background: rgba(255,255,255,0.1);
color: #fff !important;
}
/* Busca mobile — abaixo dos itens */
.news-mobile-search {
border-top: 1px solid rgba(255,255,255,0.15);
padding: 0.75rem 1rem;
}
.news-mobile-search .form-control {
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
color: #fff;
font-size: 0.85rem;
}
.news-mobile-search .form-control::placeholder {
color: rgba(255,255,255,0.5);
}
.news-mobile-search .form-control:focus {
background: rgba(255,255,255,0.15);
border-color: rgba(255,255,255,0.3);
color: #fff;
box-shadow: none;
}
.news-mobile-search .btn {
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.2);
color: #fff;
}
/* Scrolled: mesmo visual branco, fixo com sombra */
.header-news-portal.scrolled .news-navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1050;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
}
@media (max-width: 575.98px) {
.news-navbar__brand-text {
font-size: 0.95rem;
letter-spacing: 1px;
}
.news-topbar {
font-size: 0.72rem;
}
}
/* --- Fade-in animation --- */
.fade-in-up {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in-up.visible {
opacity: 1;
transform: translateY(0);
}