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

# Featured examples

> Explore featured examples to get started with Pylon's API

export const VibeCard = ({title = "Deploy an OpenAI-compatible LLM service", subtitle = "Run large language models with a drop-in replacement for the OpenAI API", image = "https://images.unsplash.com/photo-1614850523296-d8c1af93d400?auto=format&fit=crop&q=80&w=1000", titleColor = "#dcfce7", subtitleColor = "#dcfce7", href = null}) => {
  const card = <div className="group relative w-full aspect-[5/6] min-h-[350px] overflow-hidden rounded-2xl cursor-pointer bg-[#050505] dark:border dark:border-gray-700">
      <div className="absolute inset-0 bg-cover bg-center transition-transform duration-400 ease-out scale-110 group-hover:scale-100" style={{
    backgroundImage: `url('${image}')`
  }} />
      
      {}
      <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent opacity-100" />

      <div className="absolute inset-0 p-4 sm:p-5 md:p-6 flex flex-col justify-end z-10">
        <h2 className="text-lg sm:text-[20px] md:text-[22px] lg:text-[25px] font-medium leading-[1.1] tracking-tight mb-2 md:mb-3 transition-colors duration-400 drop-shadow-lg" style={{
    color: titleColor,
    textShadow: '0 2px 8px rgba(0,0,0,0.8)'
  }}>
          {title}
        </h2>
        
        {}
        <p className="text-xs sm:text-[13px] md:text-[14px] font-normal mb-4 sm:mb-6 md:mb-7 leading-snug transition-colors duration-400 opacity-100 drop-shadow-lg" style={{
    color: subtitleColor,
    textShadow: '0 2px 8px rgba(0,0,0,0.8)'
  }}>
          {subtitle}
        </p>

        <div className="transition-transform duration-400 ease-out transform group-hover:translate-x-1.5 group-hover:-translate-y-1.5" style={{
    color: titleColor
  }}>
          <svg width="20" height="20" className="md:w-[22px] md:h-[22px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
            <line x1="7" y1="17" x2="17" y2="7"></line>
            <polyline points="7 7 17 7 17 17"></polyline>
          </svg>
        </div>
      </div>
    </div>;
  if (href) {
    return <a href={href} style={{
      display: 'block',
      textDecoration: 'none',
      color: 'inherit'
    }}>
        {card}
      </a>;
  }
  return card;
};

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 mt-10">
  <VibeCard title="Determine maximum affordability" subtitle="Get prequalification results across all products with just 8 pieces of information" image="https://images.unsplash.com/photo-1614850523296-d8c1af93d400?w=800" titleColor="#D1FAE5" subtitleColor="#A7F3D0" href="/recipes/prequalification" />

  <VibeCard title="Show real-time pricing scenarios" subtitle="Evaluate thousands of loan structures against live rates and guidelines" image="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?w=800" titleColor="#FFFFFF" subtitleColor="#FFFFFF" href="/recipes/scenarios" />

  <VibeCard title="Display competitive rates" subtitle="Power rate displays on your website with real-time mortgage rates" image="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=800" titleColor="#E9FF70" subtitleColor="#D1D1D1" href="/recipes/marketing-rates" />

  <VibeCard title="Build a complete loan application" subtitle="Create an end-to-end loan origination flow programmatically" image="https://images.unsplash.com/photo-1620712943543-bcc4628c7190?w=800" titleColor="#DDD6FE" subtitleColor="#A5B4FC" href="/guides/getting-started/e2e-build" />

  <VibeCard title="Track loan updates" subtitle="Monitor loan changes by polling the GraphQL API" image="https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=800" titleColor="#BAE6FD" subtitleColor="#7DD3FC" href="/recipes/loan-updates" />
</div>