<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Flipper Hub — A inteligência operacional do flip imobiliário no Brasil</title>
<meta name="description" content="A operação do flip, finalmente organizada. O Flipper Hub reúne a jornada de cada imóvel em um só lugar — da prospecção ao fechamento, com método, controle e visão de resultado.">
<meta name="theme-color" content="#3A82F6">
<link rel="canonical" href="https://flipperhub.com.br/">

<link rel="icon" type="image/png" sizes="32x32" href="/assets/logo-app-icon-blue.png">
<link rel="icon" type="image/png" sizes="192x192" href="/assets/logo-app-icon-blue.png">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/logo-app-icon-blue.png">

<meta property="og:type" content="website">
<meta property="og:site_name" content="Flipper Hub">
<meta property="og:locale" content="pt_BR">
<meta property="og:url" content="https://flipperhub.com.br/">
<meta property="og:title" content="Flipper Hub — A inteligência operacional do flip imobiliário no Brasil">
<meta property="og:description" content="A operação do flip, finalmente organizada. Método, conteúdo e tecnologia pra organizar cada imóvel — da prospecção ao fechamento.">
<meta property="og:image" content="https://flipperhub.com.br/assets/logo-app-icon-blue.png">
<meta property="og:image:width" content="2049">
<meta property="og:image:height" content="2049">

<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Flipper Hub — A inteligência operacional do flip imobiliário no Brasil">
<meta name="twitter:description" content="A operação do flip, finalmente organizada. Método, conteúdo e tecnologia pra organizar cada imóvel — da prospecção ao fechamento.">
<meta name="twitter:image" content="https://flipperhub.com.br/assets/logo-app-icon-blue.png">

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Flipper Hub",
  "url": "https://flipperhub.com.br",
  "logo": "https://flipperhub.com.br/assets/logo-app-icon-blue.png",
  "description": "A inteligência operacional do flip imobiliário no Brasil. Plataforma que une método, conteúdo e tecnologia para organizar cada imóvel como uma operação completa — do garimpo ao fechamento.",
  "areaServed": "BR",
  "inLanguage": "pt-BR"
}
</script>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "Flipper Hub",
  "url": "https://flipperhub.com.br",
  "inLanguage": "pt-BR"
}
</script>

<link rel="stylesheet" href="colors_and_type.css">
<link rel="stylesheet" href="site.css?v=dv6">
<link rel="stylesheet" href="hero-orbit-cinematic.css?v=dv6">
<link rel="stylesheet" href="flipper-demo.css?v=dv6">
<link rel="stylesheet" href="sobre.css?v=dv6">

<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>

<!-- Animation stack — local vendored libs -->
<script src="vendor/gsap.min.js"></script>
<script src="vendor/ScrollTrigger.min.js"></script>
<script src="vendor/Flip.min.js"></script>
<script src="vendor/MotionPathPlugin.min.js"></script>
<script src="vendor/Observer.min.js"></script>
<script src="vendor/Physics2DPlugin.min.js"></script>
<script src="vendor/lenis.min.js"></script>
<script src="vendor/split-type.min.js"></script>
<script src="vendor/vanilla-tilt.min.js"></script>
<script src="animations.js"></script>
</head>
<body>
<div id="root"></div>

<script type="text/babel" src="icons.jsx"></script>
<script type="text/babel" src="plataforma-menu.jsx"></script>
<script type="text/babel" src="nav-hero.jsx"></script>
<script type="text/babel" src="hero-orbit-cinematic.jsx"></script>
<script type="text/babel" src="flipper-demo.jsx"></script>
<script type="text/babel" src="dobras.jsx"></script>
<script type="text/babel" src="sobre-parts-2.jsx"></script>
<script type="text/babel" src="cta-footer.jsx"></script>

<script type="text/babel">
function App() {
  React.useEffect(() => {
    document.documentElement.setAttribute('data-density', 'compact');
  }, []);

  // Reveal-on-scroll: caminho principal é via animations.js
  // (GSAP ScrollTrigger.batch). Se FH não carregou (algum erro upstream),
  // cai num IntersectionObserver puro — sem fallback a página fica em
  // branco porque .reveal { opacity: 0 } no CSS.
  React.useEffect(() => {
    if (window.FH && window.FH.bindReveals) {
      window.FH.bindReveals(document);
      return;
    }
    const els = document.querySelectorAll('.reveal');
    if (!('IntersectionObserver' in window)) {
      els.forEach(el => el.classList.add('in'));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
    }, { rootMargin: '0px 0px -10% 0px', threshold: 0.06 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  const { Nav, Hero, Dobras, DobraCTA, SiteFooter } = window;

  return (
    <div className="fh-site">
      <Nav />
      <main>
        <Hero />
        <div className="reveal"><Dobras.DobraTensao variant="cards" /></div>
        <div className="reveal"><Dobras.DobraDor /></div>
        <div className="reveal"><Dobras.DobraVirada /></div>
        <div className="reveal"><Dobras.DobraImovel /></div>
        <div className="reveal"><Dobras.DobraJornada /></div>
        <div className="reveal"><Dobras.DobraBrasil /></div>
        <div className="reveal"><DobraCTA /></div>
      </main>
      <SiteFooter />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>
