<!DOCTYPE html>

<head>

<title>3 a Fio | A trilha sonora da sua vida</title>

tailwind.config = {

darkMode: "class",

theme: {

extend: {

colors: {

"background": "#0e0e0e",

"surface": "#131313",

"surface-container": "#1a1919",

"surface-container-low": "#131313",

"surface-container-high": "#201f1f",

"surface-container-highest": "#262626",

"surface-variant": "#262626",

"on-surface": "#ffffff",

"on-surface-variant": "#adaaaa",

"primary": "#e08dff",

"primary-fixed": "#d978ff",

"primary-container": "#d978ff",

"on-primary": "#4f006c",

"on-primary-container": "#3d0055",

"secondary": "#2ff801",

"secondary-fixed": "#2ff801",

"secondary-container": "#106e00",

"on-secondary": "#0b5800",

"on-secondary-container": "#e7ffd9",

"tertiary": "#a1faff",

"outline": "#767575",

"outline-variant": "#484847"

fontFamily: {

"headline": ["Space Grotesk"],

"body": ["Be Vietnam Pro"],

"label": ["Plus Jakarta Sans"]

}

};

</script>

<style>

.material-symbols-outlined {

font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;

}

html { scroll-behavior: smooth; }

body {

font-family: 'Be Vietnam Pro', sans-serif;

background: #0e0e0e;

color: #fff;

}

.text-gradient {

background: linear-gradient(135deg, #edb5ff 0%, #e08dff 100%);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}

.glass-card {

background: rgba(26, 25, 25, 0.55);

backdrop-filter: blur(18px);

}

.section-anchor { scroll-margin-top: 110px; }

.member-slice {

transition: all .35s ease;

cursor: pointer;

}

.member-slice:hover { filter: brightness(1.08); }

</style>

</head>

<span class="material-symbols-outlined text-primary">graphic_eq</span>

</div>

<a href="#integrantes" class="text-[11px] uppercase tracking-[0.18em] text-on-surface-variant hover:text-white transition">Integrantes</a>

<a href="#videos" class="text-[11px] uppercase tracking-[0.18em] text-on-surface-variant hover:text-white transition">Vídeos</a>

<a href="#parceiros" class="text-[11px] uppercase tracking-[0.18em] text-on-surface-variant hover:text-white transition">Parceiros</a>

<a id="link-presskit-top" href="#" class="text-[11px] uppercase tracking-[0.18em] text-on-surface-variant hover:text-white transition">Presskit</a>

</nav>

Ao vivo agora

</a>

Contato

</a>

</div>

</header>

<div>

<p class="font-label text-[10px] uppercase tracking-[0.18em] font-bold">Ao vivo agora</p>

<p id="live-alert-text" class="font-headline text-lg font-bold">Participe do show da 3 a Fio</p>

</div>

Entrar no 3 a Fio Live

</a>

</div>

</div>

<span class="font-label text-[11px] uppercase tracking-[0.18em] font-bold">Ao vivo agora</span>

<a id="hero-live-link" href="#" class="underline underline-offset-4 font-bold">Entrar no 3 a Fio Live</a>

</div>

A trilha sonora da sua vida. <span class="text-gradient">Ao vivo.</span>

</h1>

A 3 a Fio entrega shows com repertório marcante, fidelidade musical e energia de palco para pubs, eventos corporativos, festas e experiências inesquecíveis.

</p>

Solicitar orçamento

</a>

Conheça o 3 a Fio Live

</a>

</div>

</section>

</div>

<div>

Música, memória e presença de palco.

</h2>

<p>A 3 a Fio é uma banda especializada em criar experiências ao vivo com forte identidade musical, repertório marcante e conexão real com o público.</p>

<p>Com foco especial nos clássicos dos anos 80, o show combina nostalgia, energia, elegância e performance profissional para eventos corporativos, pubs, festas e celebrações.</p>

</div>

<span class="material-symbols-outlined">arrow_forward</span>

</button>

</div>

<p>Fundada em 2016, a 3 a Fio reúne músicos experientes, com mais de 15 anos de estrada, em um projeto que valoriza a fidelidade sonora, o repertório de impacto e o relacionamento com o público e contratantes.</p>

<p>A proposta da banda é transformar cada apresentação em uma experiência emocional e vibrante, despertando boas lembranças e criando momentos memoráveis com profissionalismo e identidade.</p>

</div>

</section>

<p class="font-label text-tertiary text-[11px] uppercase tracking-[0.25em] mb-4">Integrantes</p>

<h2 class="font-headline text-4xl md:text-6xl font-bold tracking-tight">Quem faz a 3 a Fio acontecer</h2>

</div>

<p class="font-headline text-xl font-bold">Tiago</p>

<p class="text-on-surface-variant text-sm">Voz e Baixo</p>

</button>

<p class="text-on-surface-variant text-sm">Voz e Guitarra</p>

</button>

<p class="text-on-surface-variant text-sm">Voz e Bateria</p>

</button>

<p class="font-headline text-xl font-bold">Mauricio</p>

<p class="text-on-surface-variant text-sm">Teclados</p>

</button>

</div>

</div>

</div>

</div>

</div>

</div>

Voltar para a banda

</button>

</div>

</section>

<div>

<p class="font-label text-secondary text-[11px] uppercase tracking-[0.25em] mb-4">Vídeos</p>

<h2 class="font-headline text-4xl md:text-5xl font-bold tracking-tight">Veja a banda em ação</h2>

</div>

</div>

</div>

<span id="videos-btn-text">Ver mais vídeos</span>

<span class="material-symbols-outlined">arrow_forward</span>

</button>

</div>

</div>

</section>

</div>

O público participa do show em tempo real.

</h2>

Com o 3 a Fio Live, o público pode pedir músicas, enviar mensagens e compartilhar fotos durante a apresentação, criando uma experiência interativa e memorável.

</p>

Entrar no live

</a>

Ver presskit

</a>

</div>

<span class="material-symbols-outlined text-primary mb-4">queue_music</span>

<h3 class="font-headline text-2xl font-bold mb-3">Pedidos de música</h3>

<p class="text-on-surface-variant">O público interage diretamente com o repertório durante o evento.</p>

</div>

<span class="material-symbols-outlined text-tertiary mb-4">chat_bubble</span>

<h3 class="font-headline text-2xl font-bold mb-3">Mensagens ao vivo</h3>

<p class="text-on-surface-variant">Mais conexão, mais participação e mais envolvimento com o show.</p>

</div>

<span class="material-symbols-outlined text-secondary mb-4">photo_camera</span>

<h3 class="font-headline text-2xl font-bold mb-3">Fotos da noite</h3>

<p class="text-on-surface-variant">O público envia imagens e a experiência continua depois do palco.</p>

</div>

<span class="material-symbols-outlined text-primary mb-4">dashboard</span>

<h3 class="font-headline text-2xl font-bold mb-3">Painel da banda</h3>

<p class="text-on-surface-variant">Controle e moderação ao vivo para uma experiência profissional de ponta a ponta.</p>

</div>

</section>

<p class="font-label text-tertiary text-[11px] uppercase tracking-[0.25em] mb-4">Parceiros e clientes</p>

<h2 class="font-headline text-4xl md:text-5xl font-bold tracking-tight">Quem já viveu essa experiência</h2>

</div>

<a href="#" class="bg-surface-container-low rounded-2xl p-6 border border-white/5 text-center hover:border-primary/25 transition"><span class="font-headline text-xl font-bold">Alltech</span></a>

<a href="#" class="bg-surface-container-low rounded-2xl p-6 border border-white/5 text-center hover:border-primary/25 transition"><span class="font-headline text-xl font-bold">Franz</span></a>

<a href="#" class="bg-surface-container-low rounded-2xl p-6 border border-white/5 text-center hover:border-primary/25 transition"><span class="font-headline text-xl font-bold">Bovary</span></a>

</div>

</section>

<p class="font-label text-primary text-[11px] uppercase tracking-[0.25em] mb-6">Contato</p>

Leve a <span class="text-gradient">3 a Fio</span> para o seu evento

</h2>

Eventos corporativos, festas, pubs e experiências especiais com repertório marcante, profissionalismo e forte presença de palco.

</p>

</a>

Instagram

</a>

Presskit

</a>

</div>

<p class="font-label text-[11px] uppercase tracking-[0.18em] mb-2">Contato comercial</p>

<p class="font-headline text-2xl font-bold">contato@3afio.com.br</p>

</div>

</section>

</main>

<a id="link-presskit-footer" href="#" class="hover:text-white transition">Presskit</a>

<a href="https://www.instagram.com/3afio" target="_blank" rel="noopener noreferrer" class="hover:text-white transition">Instagram</a>

</div>

</footer>

let landingData = {

project: {},

evento_ativo: null,

agenda: [],

links: {}

};

const members = {

tiago: {

nome: 'Tiago',

funcao: 'Voz e Baixo',

bio: 'Groove, presença de palco e condução musical. Tiago é uma das vozes centrais da identidade sonora da 3 a Fio.',

imagem: 'https://lh3.googleusercontent.com/d/1x-rSgEiBVS8dXYpOyunHDyAgjgCKTme1=w1200'

jota: {

nome: 'Jota',

funcao: 'Voz e Guitarra',

bio: 'Riffs, solos e energia. Jota entrega presença de palco e timbres marcantes para a assinatura da banda.',

imagem: 'https://lh3.googleusercontent.com/d/1x-rSgEiBVS8dXYpOyunHDyAgjgCKTme1=w1200'

gere: {

nome: 'Gerê',

funcao: 'Voz e Bateria',

bio: 'Potência rítmica e vocal. Gerê sustenta o show com impacto, precisão e presença.',

imagem: 'https://lh3.googleusercontent.com/d/1x-rSgEiBVS8dXYpOyunHDyAgjgCKTme1=w1200'

mauricio: {

nome: 'Mauricio',

funcao: 'Teclados',

bio: 'Texturas, climas e identidade oitocentista premium. Mauricio ajuda a construir a atmosfera sonora da banda.',

imagem: 'https://lh3.googleusercontent.com/d/1x-rSgEiBVS8dXYpOyunHDyAgjgCKTme1=w1200'

}

};

function toggleHistoria() {

const box = document.getElementById('historia-expandida');

const text = document.getElementById('historia-btn-text');

const isHidden = box.classList.contains('hidden');

box.classList.toggle('hidden', !isHidden);

text.textContent = isHidden ? 'Fechar história' : 'Ler mais';

}

function selectMember(key) {

const data = members[key];

if (!data) return;

document.getElementById('member-detail-name').textContent = data.nome;

document.getElementById('member-detail-role').textContent = data.funcao;

document.getElementById('member-detail-bio').textContent = data.bio;

document.getElementById('member-detail-image').src = data.imagem;

document.getElementById('member-detail-image').alt = data.nome;

document.getElementById('member-detail').classList.remove('hidden');

document.getElementById('member-detail').scrollIntoView({ behavior: 'smooth', block: 'nearest' });

}

function closeMemberDetail() {

document.getElementById('member-detail').classList.add('hidden');

}

function toggleMoreVideos() {

const box = document.getElementById('more-videos');

const text = document.getElementById('videos-btn-text');

const isHidden = box.classList.contains('hidden');

box.classList.toggle('hidden', !isHidden);

text.textContent = isHidden ? 'Ver menos vídeos' : 'Ver mais vídeos';

}

function renderLiveLinks() {

const liveUrl = (landingData.links && landingData.links.live_public) || '#';

const presskitUrl = (landingData.links && landingData.links.presskit) || '#';

const eventoAtivo = !!landingData.evento_ativo;

const headerLive = document.getElementById('header-live-link');

const heroLive = document.getElementById('hero-live-link');

const heroButton = document.getElementById('hero-live-button');

const footerLive = document.getElementById('footer-live-link');

const liveSectionButton = document.getElementById('live-section-button');

const liveBanner = document.getElementById('live-highlight-banner');

const liveAlertBar = document.getElementById('live-alert-bar');

const liveAlertLink = document.getElementById('live-alert-link');

const liveAlertText = document.getElementById('live-alert-text');

const landingMain = document.getElementById('landing-main');

[headerLive, heroLive, heroButton, footerLive, liveSectionButton, liveAlertLink].forEach(el => {

if (el) {

el.href = liveUrl;

el.target = '_top';

}

});

[

document.getElementById('link-presskit-top'),

document.getElementById('link-presskit-contact'),

document.getElementById('link-presskit-footer'),

document.getElementById('link-presskit-footer-cta')

].forEach(el => {

if (el) {

el.href = presskitUrl;

el.target = '_top';

}

});

if (eventoAtivo) {

if (headerLive) {

headerLive.classList.remove('hidden');

headerLive.textContent = 'Ao vivo agora';

}

if (heroButton) heroButton.textContent = 'Entrar no 3 a Fio Live';

if (liveSectionButton) liveSectionButton.textContent = 'Participar agora';

if (liveBanner) liveBanner.classList.remove('hidden');

if (liveAlertBar) liveAlertBar.classList.remove('hidden');

const evt = landingData.evento_ativo || {};

const local = evt.local || '3 a Fio ao vivo';

const cidade = evt.cidade_uf || '';

if (liveAlertText) {

liveAlertText.textContent = cidade ? `${local} • ${cidade}` : 'Participe do show da 3 a Fio';

}

if (landingMain) landingMain.classList.add('pt-20');

} else {

if (headerLive) headerLive.classList.add('hidden');

if (heroButton) heroButton.textContent = 'Conheça o 3 a Fio Live';

if (liveSectionButton) liveSectionButton.textContent = 'Conhecer a experiência';

if (liveBanner) liveBanner.classList.add('hidden');

if (liveAlertBar) liveAlertBar.classList.add('hidden');

if (landingMain) landingMain.classList.remove('pt-20');

}

function loadLandingData() {

google.script.run

.withSuccessHandler(response => {

try {

landingData = response ? JSON.parse(response) : {};

} catch (e) {

landingData = {};

}

renderLiveLinks();

})

.withFailureHandler(() => {

renderLiveLinks();

})

.getLandingData();

}

document.addEventListener('DOMContentLoaded', () => {

loadLandingData();

});

</script>

</body>

</html>