// app/page.tsx — Site Institucional TLX
import { Navbar } from "@/components/layout/navbar";
import { HeroBlock } from "@/components/organisms/hero-block";
import { MarqueeTicker } from "@/components/molecules/marquee-ticker";
import { StatsGrid } from "@/components/organisms/stats-grid";
import { FAQAccordion } from "@/components/organisms/faq-accordion";
import { CTABlock } from "@/components/organisms/cta-block";
import { ProcessTimeline } from "@/components/organisms/process-timeline";
import { Footer } from "@/components/layout/footer";

export default function HomePage() {
  return (
    <>
      <Navbar />
      <main>
        {/* 01 Hero — gradient-hero bg, max-w-4xl centered */}
        <HeroBlock
          headline="Inteligencia de mercado para marcas ambiciosas"
          cta={{ label: "Agendar diagnostico", href: "/diagnostico" }}
        />

        {/* 02 Social Proof — marquee logos */}
        <MarqueeTicker logos={clientLogos} />

        {/* 03 Enemy — pain points grid 2x2 */}
        <section className="py-24">
          <div className="mx-auto max-w-7xl px-6">
            {/* 2x2 PainGrid */}
          </div>
        </section>

        {/* 04 Services — 3-col ServiceCard grid */}
        <section className="py-24 bg-surface">
          <div className="mx-auto max-w-7xl px-6 grid md:grid-cols-3 gap-6">
            {/* ServiceCard × 3 */}
          </div>
        </section>

        {/* 05-06 Cases + Stats */}
        <StatsGrid metrics={metrics} />

        {/* 07 Process */}
        <ProcessTimeline steps={processSteps} />

        {/* 10 CTA */}
        <CTABlock
          headline="Pronto para escalar?"
          cta={{ label: "Agendar diagnostico", href: "/diagnostico" }}
        />

        {/* 11 FAQ */}
        <FAQAccordion items={faqItems} />
      </main>
      <Footer />
    </>
  );
}

Clique para copiar

// app/diagnostico/page.tsx — Landing Page de Conversao
import { Navbar } from "@/components/layout/navbar";
import { Footer } from "@/components/layout/footer";

export default function DiagnosticoPage() {
  return (
    <>
      <Navbar minimal />
      <main>
        {/* 01 Hero — proposta de valor + CTA unico */}
        <section className="py-32" style={{ background: "var(--gradient-hero)" }}>
          <div className="mx-auto max-w-3xl px-6 text-center">
            <span className="inline-block rounded-full bg-accent-subtle px-4 py-1
                             font-mono text-xs text-accent">
              Diagnostico gratuito
            </span>
            <h1 className="mt-6 font-display text-display-xl font-bold text-primary">
              Descubra o que esta travando seu crescimento
            </h1>
            <p className="mt-4 text-body-lg text-secondary">
              30 minutos. Sem compromisso. Clareza total.
            </p>
            <a href="#agendar"
               className="mt-8 inline-block bg-accent px-8 py-4
                          font-display text-sm font-semibold text-base
                          transition-transform hover:scale-[1.02]">
              Agendar diagnostico
            </a>
          </div>
        </section>

        {/* 02 Pain/Agitate — grid 2x2 com dores */}
        <section className="py-24 bg-surface">
          <div className="mx-auto max-w-5xl px-6">
            <h2 className="font-display text-display-md text-primary">
              Voce ja tentou de tudo...
            </h2>
            <div className="mt-8 grid gap-4 sm:grid-cols-2">
              {/* PainCard com icone error + texto */}
            </div>
          </div>
        </section>

        {/* 03 Solution — 3-col com checks */}
        <section className="py-24">
          <div className="mx-auto max-w-5xl px-6 grid md:grid-cols-3 gap-6">
            {/* SolutionCard com icone success + texto */}
          </div>
        </section>

        {/* 04 Social Proof — testimonials */}
        <section className="py-24 bg-surface">
          <div className="mx-auto max-w-3xl px-6 space-y-6">
            {/* TestimonialCard com foto + quote + nome */}
          </div>
        </section>

        {/* 05 CTA Final — urgencia */}
        <section className="py-24 bg-accent text-center">
          <div className="mx-auto max-w-2xl px-6">
            <h2 className="font-display text-display-lg font-bold text-base">
              Pronto para ter clareza?
            </h2>
            <a href="#agendar"
               className="mt-8 inline-block border-2 border-base bg-transparent
                          px-10 py-5 font-display text-sm font-semibold text-base
                          transition-transform hover:scale-[1.02]">
              Agendar agora
            </a>
            <p className="mt-4 font-mono text-xs text-base/60">
              Vagas limitadas · resposta em 24h
            </p>
          </div>
        </section>
      </main>
      <Footer />
    </>
  );
}

Clique para copiar

// app/foundations/page.tsx — Brandbook Page Pattern
import { Sidebar, type SidebarSection } from "@/components/layout/sidebar";
import { SectionHeader } from "@/components/brand/section-header";
import { FadeIn } from "@/components/ui/fade-in";
import { Container } from "@/components/layout/container";

const sections: SidebarSection[] = [
  { id: "colors", number: "01", label: "Cores" },
  { id: "typography", number: "02", label: "Tipografia" },
  { id: "spacing", number: "03", label: "Espacamento" },
  // ...
];

export default function FoundationsPage() {
  return (
    <Container className="flex gap-12 py-20">
      {/* Sidebar sticky — w-52/w-60, hidden < lg */}
      <Sidebar sections={sections} />

      {/* Content area */}
      <div className="min-w-0 flex-1 space-y-24">
        <FadeIn>
          <SectionHeader
            number="02"
            title="Foundations"
            sectionName="Design System"
            subtitle="Tokens, cores, tipografia e espacamento."
          />
        </FadeIn>

        {/* Section 01 */}
        <section id="colors" className="scroll-mt-24">
          <FadeIn>
            <SectionLabel number="01" label="CORES" />
            <p className="mt-2 max-w-2xl text-body-lg text-secondary">
              Paleta semantica com 3 temas.
            </p>
          </FadeIn>

          <FadeIn delay={0.075}>
            <div className="mt-8 grid gap-6 sm:grid-cols-2 md:grid-cols-3">
              {/* ColorSwatch cards */}
            </div>
          </FadeIn>
        </section>

        {/* Section 02 ... */}
      </div>
    </Container>
  );
}

Clique para copiar

// app/links/page.tsx — Links-in-bio com tokens TLX
import { ProfileHeader } from "@/components/profile-header";
import { FeaturedLink } from "@/components/featured-link";
import { LinkCard } from "@/components/link-card";
import { SocialIcons } from "@/components/social-icons";
import { Footer } from "@/components/footer";
import { profile, featuredLinks, secondaryLinks, socialLinks, footer } from "@/data/links";

export default function LinksPage() {
  return (
    <div className="relative flex min-h-svh flex-col items-center overflow-hidden bg-base">
      {/* Ambient glow — radial accent no topo */}
      <div
        className="pointer-events-none fixed left-1/2 top-[-200px]
                   h-[400px] w-[600px] -translate-x-1/2 rounded-full"
        style={{
          background: "radial-gradient(ellipse, var(--color-accent-glow), transparent 70%)",
        }}
        aria-hidden="true"
      />

      <div className="relative z-10 mx-auto flex w-full max-w-[480px]
                      flex-col items-center px-5 py-12">
        {/* Profile: foto + nome + subtitle + bio */}
        <ProfileHeader {...profile} />

        {/* Links: featured (accent border) + secondary */}
        <div className="mt-8 w-full space-y-3">
          {featuredLinks.map((link) => (
            <FeaturedLink key={link.url} {...link} />
          ))}
          {secondaryLinks.map((link) => (
            <LinkCard key={link.url} {...link} />
          ))}
        </div>

        {/* Social icons */}
        <SocialIcons links={socialLinks} />

        {/* Footer */}
        <Footer {...footer} />
      </div>
    </div>
  );
}

Clique para copiar

// data/links.ts — Data Model
export const profile = {
  name: string;          // "Lucas Sales"
  subtitle: string;      // "Brutalmente Lucido"
  bio: string;           // "Construtor de negocios + IA | Founder @agenciatlx"
  photo: string;         // "/images/lucas-profile.jpg"
};

export const featuredLinks = [
  {
    label: string;       // "Assinar Brutalmente Lucido"
    url: string;         // "https://olucasales.substack.com"
    emoji: string;       // "🔥"
    description?: string; // "Newsletter semanal..."
  }
];

export const secondaryLinks = [
  { label: string; url: string; emoji: string; }
];

export const socialLinks = [
  { platform: "instagram" | "threads" | "substack"; url: string; label: string; }
];

export const footer = {
  tagline: string;       // "Dados, fatos e numeros."
  copyright: string;     // "© 2026 Lucas Sales"
};

Clique para copiar