> ## Documentation Index
> Fetch the complete documentation index at: https://site.aspect.build/llms.txt
> Use this file to discover all available pages before exploring further.

# Resources & Guides

> Explore tutorials, best practices, and expert insights on Bazel migration, build optimization, and developer workflows with Aspect Build's resources.

export const MarketingPage = () => <div className="marketing-page-marker" style={{
  display: "none"
}} />;

export const CTA = ({title, subtitle, primaryCta, primaryHref = "#", secondaryCta, secondaryHref = "#"}) => <section className="w-full flex justify-center px-4 py-16 md:py-20">
    <div className="w-full rounded-2xl text-white flex flex-col md:flex-row items-center justify-center gap-10 md:gap-16 p-8 md:p-12 text-center md:text-left" style={{
  maxWidth: "1140px",
  background: "linear-gradient(135deg, #1a3a5c 0%, #176ACC 100%)"
}}>
      <div>
        <h2 className="text-2xl md:text-3xl font-semibold tracking-tight">{title}</h2>
        {subtitle && <div className="mt-3 text-blue-100 text-base">{subtitle}</div>}
      </div>
      <div className="flex flex-wrap gap-3 shrink-0 justify-center">
        {primaryCta && <a href={primaryHref} className="inline-flex items-center px-6 py-3 rounded-lg bg-white text-blue-700 font-semibold hover:bg-blue-50 transition whitespace-nowrap shadow-sm">
            {primaryCta}
          </a>}
        {secondaryCta && <a href={secondaryHref} className={`inline-flex items-center px-6 py-3 rounded-lg border border-blue-300/50 text-white font-semibold hover:bg-blue-700/30 transition whitespace-nowrap ${secondaryHref === "/request-demo" ? "demo-gradient-btn" : ""}`}>
            {secondaryCta}
          </a>}
      </div>
    </div>
  </section>;

export const SectionHeader = ({title, subtitle, centered = true, label}) => <div className={`mb-12 ${centered ? "text-center" : ""}`}>
    {label && <p className="text-xs font-semibold tracking-widest text-blue-600 dark:text-blue-400 uppercase mb-3">
        {label}
      </p>}
    <h2 className="text-4xl md:text-5xl font-semibold text-zinc-900 dark:text-white tracking-tight">{title}</h2>
    {subtitle && <div className={`subtitle-gap text-lg md:text-xl text-zinc-500 dark:text-zinc-300 leading-relaxed ${centered ? "mx-auto" : ""}`} style={{
  marginTop: "1rem",
  maxWidth: centered ? "700px" : "none"
}}>
        {subtitle}
      </div>}
  </div>;

export const Hero = ({title, subtitle, badge, eyebrow, heroImageClassName = "", primaryCta, primaryHref = "#", secondaryCta, secondaryHref = "#", centered = true, children}) => <section className="w-full flex justify-center px-4 pt-16 pb-16 md:pt-24 md:pb-24" style={{
  background: "linear-gradient(180deg, var(--hero-gradient-start, #f8fafc) 0%, var(--hero-gradient-end, #ffffff) 100%)"
}}>
    <div className="w-full" style={{
  maxWidth: "1140px"
}}>
      {centered && !children ? <div className="flex flex-col items-center text-center">
          {badge && <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-700 text-blue-700 dark:text-blue-300 text-sm font-medium mb-6">
              {badge}
            </div>}
          {eyebrow && <div className="text-xs font-semibold tracking-widest uppercase text-blue-600 dark:text-blue-400 mb-4">
              {eyebrow}
            </div>}
          <h1 className="text-4xl md:text-5xl font-semibold text-zinc-900 dark:text-white leading-tight tracking-tight" style={{
  maxWidth: "820px"
}}>
            {String(title).split(/\\n|\n/).map((line, i) => i ? [<br key={i} />, line] : line)}
          </h1>
          {subtitle && <div className="subtitle-gap text-lg md:text-xl text-zinc-500 dark:text-zinc-300 leading-relaxed" style={{
  marginTop: "1rem",
  maxWidth: "600px"
}}>
              {subtitle}
            </div>}
          <div className="flex flex-wrap gap-3 mt-10 justify-center">
            {primaryCta && <a href={primaryHref} className="inline-flex items-center px-6 py-3 rounded-lg bg-blue-600 text-white font-semibold hover:bg-blue-700 transition shadow-sm">
                {primaryCta}
              </a>}
            {secondaryCta && <a href={secondaryHref} className={`inline-flex items-center px-6 py-3 rounded-lg border border-zinc-300 dark:border-zinc-600 text-zinc-700 dark:text-zinc-200 font-semibold hover:bg-zinc-50 dark:hover:bg-zinc-800 transition ${secondaryHref === "/request-demo" ? "demo-gradient-btn" : ""}`}>
                {secondaryCta}
              </a>}
          </div>
        </div> : <div className="flex flex-col md:flex-row items-center gap-10 md:gap-16">
          <div className="flex-1 min-w-0">
            {badge && <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-700 text-blue-700 dark:text-blue-300 text-sm font-medium mb-6">
                {badge}
              </div>}
            {eyebrow && <div className="text-xs font-semibold tracking-widest uppercase text-blue-600 dark:text-blue-400 mb-4">
                {eyebrow}
              </div>}
            <h1 className="text-4xl md:text-5xl font-semibold text-zinc-900 dark:text-white leading-tight tracking-tight">
            {String(title).split(/\\n|\n/).map((line, i) => i ? [<br key={i} />, line] : line)}
          </h1>
            {subtitle && <div className="subtitle-gap text-lg md:text-xl text-zinc-500 dark:text-zinc-300 leading-relaxed" style={{
  marginTop: "1rem"
}}>
                {subtitle}
              </div>}
            <div className="flex flex-wrap gap-3 mt-8">
              {primaryCta && <a href={primaryHref} className="inline-flex items-center px-6 py-3 rounded-lg bg-blue-600 text-white font-semibold hover:bg-blue-700 transition shadow-sm">
                  {primaryCta}
                </a>}
              {secondaryCta && <a href={secondaryHref} className={`inline-flex items-center px-6 py-3 rounded-lg border border-zinc-300 dark:border-zinc-600 text-zinc-700 dark:text-zinc-200 font-semibold hover:bg-zinc-50 dark:hover:bg-zinc-800 transition ${secondaryHref === "/request-demo" ? "demo-gradient-btn" : ""}`}>
                  {secondaryCta}
                </a>}
            </div>
          </div>
          {children && <div className={`flex-1 min-w-0 hero-image ${heroImageClassName}`}>
              {children}
            </div>}
        </div>}
    </div>
  </section>;

export const Section = ({children, className = "", gray = false, dark = false, id}) => <section id={id} className={`w-full flex justify-center px-4 py-16 md:py-24 ${gray ? "bg-gray-50 dark:bg-zinc-900" : dark ? "bg-zinc-900 dark:bg-zinc-950" : ""} ${className}`}>
    <div className="w-full" style={{
  maxWidth: "1140px"
}}>
      {children}
    </div>
  </section>;

<MarketingPage />

<Hero title="Our Resources" subtitle="Explore the Aspect Insights podcast, conference talks, and meetup presentations on Bazel and build systems." />

<Section>
  <div className="flex flex-col md:flex-row items-center gap-8 md:gap-12 p-8 rounded-2xl bg-zinc-50 dark:bg-zinc-800/50 border border-zinc-200 dark:border-zinc-700">
    <div className="flex-1">
      <h2 className="text-2xl md:text-3xl font-semibold text-zinc-900 dark:text-white">Aspect Insights is our podcast on Bazel and its ecosystem.</h2>

      <p className="mt-4 text-zinc-600 dark:text-zinc-300 leading-relaxed">
        We invite experts and practitioners to share their knowledge and keep developers updated on the latest developments. Follow us to find out about upcoming episodes. Join us live!
      </p>

      <div className="flex flex-wrap gap-3 mt-6">
        <a href="https://podcasts.apple.com/us/podcast/aspect-insights/id1765600258" target="_blank" rel="noopener noreferrer" className="inline-flex items-center px-4 py-2 rounded-lg border border-zinc-300 dark:border-zinc-600 text-zinc-900 dark:text-white text-sm font-semibold hover:bg-zinc-50 dark:hover:bg-zinc-800 transition">
          Apple Podcasts
        </a>

        <a href="https://open.spotify.com/show/00scj8eaBhgi08eJEe7MSf" target="_blank" rel="noopener noreferrer" className="inline-flex items-center px-4 py-2 rounded-lg border border-zinc-300 dark:border-zinc-600 text-zinc-900 dark:text-white text-sm font-semibold hover:bg-zinc-50 dark:hover:bg-zinc-800 transition">
          Spotify
        </a>

        <a href="https://www.youtube.com/@aspectbuild/streams" target="_blank" rel="noopener noreferrer" className="inline-flex items-center px-4 py-2 rounded-lg border border-zinc-300 dark:border-zinc-600 text-zinc-900 dark:text-white text-sm font-semibold hover:bg-zinc-50 dark:hover:bg-zinc-800 transition">
          YouTube
        </a>

        <a href="https://www.linkedin.com/company/aspect-build/" target="_blank" rel="noopener noreferrer" className="inline-flex items-center px-4 py-2 rounded-lg border border-zinc-300 dark:border-zinc-600 text-zinc-900 dark:text-white text-sm font-semibold hover:bg-zinc-50 dark:hover:bg-zinc-800 transition">
          LinkedIn
        </a>
      </div>
    </div>
  </div>
</Section>

<Section gray id="what-is-bazel">
  <SectionHeader title="What is Bazel?" />

  <div className="relative w-full" style={{ paddingTop: "56.17%" }}>
    <iframe src="https://www.youtube.com/embed/fSxOZSFph4g?rel=0&controls=1&autoplay=0&mute=0&start=0" frameBorder="0" style={{ position: "absolute", left: 0, top: 0, width: "100%", height: "100%" }} allow="autoplay; encrypted-media" allowFullScreen title="What is Bazel?" />
  </div>
</Section>

<Section id="conferences">
  <SectionHeader title="Conference Talks" />

  <div className="grid gap-6" style={{ gridTemplateColumns: "repeat(2, 1fr)" }}>
    {[
            { id: "en3ep4rw0oA", title: "Python Monorepo with Bazel, Alex Eagle" },
            { id: "CnK-RAdfrpI", title: "Rules_lint: Formatting and Linting All Languages - Alex Eagle, Aspect Build Systems" },
            { id: "lqo5qkzTS3k", title: "Aspect Build - Alex Eagle, Aspect Build Systems" },
            { id: "kcPnibD9yxI", title: "Building Monorepo gRPC Services with Bazel" },
            { id: "WKaSfnUl2Vo", title: "Achieving the Promised 3x-10x Bazel Speedup" },
            { id: "nicNBI9T1Ow", title: "Aspect Workflows" },
            { id: "1GafMnbINik", title: "Python and Bazel: Aspect's rules_py" },
            { id: "9eDxaAMuXBQ", title: "Bazel-lib for BUILD and rules authors" },
            { id: "AJpcKrF2al8", title: "I'm an Imposter and So Can You: working in many languages at once" },
            { id: "1guozdH-bik", title: "Aspect.build: An end-to-end Bazel experience developers want to use" },
            { id: "8dnTclL9A1k", title: 'Google Open Source Live "Bazel day": Full Event', start: "2803" },
            { id: "UwuRGpVpmbo", title: "BazelCon 2019 Day 2: Bazel Migration Patterns", start: "2803" },
            { id: "J1lnp-nU4wM", title: "ng-conf 2019: The Bazel opt-in preview is here", start: "2803" },
            { id: "lDyIc2Abkwg", title: "Google Cloud Next: Building Apps Like Google with Angular, Bazel, and GCP", start: "2803" },
            { id: "yBg9zG6ZGb4", title: "BazelCon 2018: Building Large Angular Apps with Bazel", start: "2803" },
            { id: "1KDDIhcQORM", title: "ng-conf 2018: Full Stack development with Nx and Bazel", start: "2803" },
          ].map((talk) => (
            <div key={talk.id} className="rounded-xl border border-zinc-200 dark:border-zinc-700 overflow-hidden bg-white dark:bg-zinc-800">
              <div className="relative w-full" style={{ paddingTop: "56.17%" }}>
                <iframe
                  src={`https://www.youtube.com/embed/${talk.id}?rel=0&controls=1&autoplay=0&mute=0&start=${talk.start || "0"}`}
                  frameBorder="0"
                  style={{ position: "absolute", left: 0, top: 0, width: "100%", height: "100%" }}
                  allow="autoplay; encrypted-media"
                  allowFullScreen
                  title={talk.title}
                />
              </div>
              <div className="p-4">
                <h3 className="text-base font-semibold text-zinc-900 dark:text-white">{talk.title}</h3>
              </div>
            </div>
          ))}
  </div>
</Section>

<Section gray id="meetups">
  <SectionHeader title="Meetup Talks" />

  <div className="grid gap-6" style={{ gridTemplateColumns: "repeat(2, 1fr)" }}>
    {[
            { id: "rLDKcNv7xAY", title: "Migrating away from rules_docker to rules_oci" },
            { id: "WBW0TthiTU4", title: "STT e53 - The Bazel Build System, and Aspect.dev (Guest: Alex Eagle)" },
            { id: "fEUgZopCK8E", title: "AngularNYC Meetup: Bazel in Angular CLI" },
          ].map((talk) => (
            <div key={talk.id} className="rounded-xl border border-zinc-200 dark:border-zinc-700 overflow-hidden bg-white dark:bg-zinc-800">
              <div className="relative w-full" style={{ paddingTop: "56.17%" }}>
                <iframe
                  src={`https://www.youtube.com/embed/${talk.id}?rel=0&controls=1&autoplay=0&mute=0&start=0`}
                  frameBorder="0"
                  style={{ position: "absolute", left: 0, top: 0, width: "100%", height: "100%" }}
                  allow="autoplay; encrypted-media"
                  allowFullScreen
                  title={talk.title}
                />
              </div>
              <div className="p-4">
                <h3 className="text-base font-semibold text-zinc-900 dark:text-white">{talk.title}</h3>
              </div>
            </div>
          ))}

    <div className="rounded-xl border border-zinc-200 dark:border-zinc-700 overflow-hidden bg-white dark:bg-zinc-800">
      <div className="relative w-full" style={{ paddingTop: "56.17%" }}>
        <iframe src="https://drive.google.com/file/d/1AxrwjLUf_35Z2C9VK5Ut7wo5L89roHH2/preview" style={{ position: "absolute", left: 0, top: 0, width: "100%", height: "100%" }} allow="autoplay" title="ModernWeb Meetup: Layering in JS tooling" />
      </div>

      <div className="p-4">
        <h3 className="text-base font-semibold text-zinc-900 dark:text-white">ModernWeb Meetup: Layering in JS tooling</h3>

        <a href="https://hackmd.io/@alexeagle/HJZ_ekxuN?type=slide#/" target="_blank" rel="noopener noreferrer" className="inline-flex items-center mt-2 text-sm text-blue-600 dark:text-blue-400 font-semibold hover:underline">
          View presentation →
        </a>
      </div>
    </div>
  </div>
</Section>

<CTA title="Want a closer look?" primaryCta="Request a Demo" primaryHref="/request-demo" secondaryCta="Talk with Us" secondaryHref="/contact" />