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

# DotNetDocs - Documentation That Ships With Your Code

> Transform your .NET XML comments into stunning, searchable documentation sites. Zero config. Full control.

export const CTASection = () => {
  const [animationsStarted, setAnimationsStarted] = React.useState(false);
  React.useEffect(() => {
    setAnimationsStarted(true);
  }, []);
  return <div style={{
    width: '100%',
    padding: '120px 0',
    background: 'linear-gradient(135deg, #1A2B3D 0%, #0A1628 100%)',
    textAlign: 'center',
    opacity: animationsStarted ? 1 : 0,
    transition: 'opacity 0.5s ease-out'
  }}>
      <div style={{
    maxWidth: '800px',
    margin: '0 auto',
    padding: '0 40px'
  }}>
        <h2 style={{
    fontSize: 'clamp(36px, 5vw, 48px)',
    fontWeight: '900',
    marginBottom: '30px',
    color: 'white'
  }}>
          Ready to Ship Better Docs?
        </h2>
        <div style={{
    fontSize: '20px',
    color: '#B0C4DE',
    marginBottom: '40px',
    lineHeight: '1.6'
  }}>
          Start building beautiful docs in less than 5 minutes.
        </div>
        <div style={{
    display: 'flex',
    gap: '20px',
    justifyContent: 'center',
    flexWrap: 'wrap'
  }}>
          <a href="/quickstart" style={{
    padding: '18px 40px',
    background: 'linear-gradient(135deg, #3CD0E2, #419AC5)',
    color: 'white',
    borderRadius: '12px',
    textDecoration: 'none',
    fontWeight: 'bold',
    fontSize: '18px',
    boxShadow: '0 10px 40px rgba(60, 208, 226, 0.3)',
    transition: 'all 0.3s',
    display: 'inline-block'
  }}>
            Get Started Free
          </a>
        </div>

        {}
        <div style={{
    marginTop: '60px',
    padding: '30px',
    background: 'rgba(60, 208, 226, 0.05)',
    border: '1px solid rgba(60, 208, 226, 0.2)',
    borderRadius: '12px'
  }}>
          <p style={{
    color: '#8B9DC3',
    marginBottom: '15px',
    fontSize: '14px',
    textTransform: 'uppercase',
    letterSpacing: '1px'
  }}>
            Quick Install
          </p>
          <code style={{
    display: 'block',
    padding: '15px',
    background: 'rgba(0, 0, 0, 0.3)',
    borderRadius: '8px',
    color: '#3CD0E2',
    fontSize: '16px',
    fontFamily: 'monospace'
  }}>
            dotnet tool install DotNetDocs --global
          </code>
        </div>
      </div>
    </div>;
};

export const MintlifyPartnership = () => {
  const [animationsStarted, setAnimationsStarted] = React.useState(false);
  React.useEffect(() => {
    setAnimationsStarted(true);
  }, []);
  return <div style={{
    width: '100%',
    padding: '120px 0',
    background: '#0a1628',
    position: 'relative',
    overflow: 'hidden',
    opacity: animationsStarted ? 1 : 0,
    transition: 'opacity 0.5s ease-out'
  }}>
            {}
            <div style={{
    position: 'absolute',
    top: '0',
    left: '0',
    right: '0',
    bottom: '0',
    backgroundImage: 'url(/images/mintlify-bg.svg)',
    backgroundSize: 'cover',
    backgroundPosition: 'center center',
    backgroundRepeat: 'no-repeat',
    opacity: 1,
    pointerEvents: 'none'
  }} />

            <div style={{
    maxWidth: '1400px',
    margin: '0 auto',
    padding: '0 40px',
    position: 'relative',
    zIndex: 10
  }}>
                {}
                <div style={{
    textAlign: 'center',
    marginBottom: '60px'
  }}>
                    <div style={{
    display: 'inline-flex',
    alignItems: 'center',
    gap: '12px',
    padding: '10px 20px',
    background: 'rgba(14, 164, 114, 0.1)',
    border: '1px solid rgba(14, 164, 114, 0.3)',
    borderRadius: '100px',
    color: '#0ea472',
    fontWeight: '600',
    fontSize: '22px',
    letterSpacing: '0.3px',
    boxShadow: '0 0 20px rgba(14, 164, 114, 0.15)',
    fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
  }}>
                        <Icon icon="handshake" iconType="solid" size={28} color="#0ea472" />
                        <span>Official Partner</span>
                    </div>
                </div>

                {}
                <div style={{
    textAlign: 'center',
    marginBottom: '80px'
  }}>
                    <h2 style={{
    fontSize: 'clamp(40px, 6vw, 72px)',
    fontWeight: '600',
    color: 'white',
    margin: '0 0 20px 0',
    lineHeight: '1.1',
    fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
  }}>
                        Better with Mintlify
                    </h2>
                    <p style={{
    fontSize: '20px',
    lineHeight: '1.6',
    color: 'rgba(255, 255, 255, 0.7)',
    maxWidth: '800px',
    margin: '0 auto',
    fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
  }}>
                        Why settle for static markdown when you can have interactive API docs, AI-powered search, custom components, and enterprise analytics?
                        Give your users the same experience as Coinbase, Vercel, Anthropic, and more.
                    </p>
                </div>

                {}
                <div style={{
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 400px), 1fr))',
    gap: '60px',
    alignItems: 'start',
    marginBottom: '80px'
  }}>
                    {}
                    <div style={{
    background: 'rgba(10, 22, 40, 0.6)',
    borderRadius: '24px',
    padding: '48px',
    boxShadow: '0 4px 24px rgba(0, 0, 0, 0.3)',
    border: '1px solid rgba(255, 255, 255, 0.2)',
    backdropFilter: 'blur(20px)',
    display: 'flex',
    flexDirection: 'column',
    gap: '32px'
  }}>
                        <div>
                            <div style={{
    display: 'flex',
    alignItems: 'center',
    gap: '16px',
    marginBottom: '16px'
  }}>
                                <img src="/images/icons/mintlify.svg" alt="Mintlify" style={{
    width: '48px',
    height: '48px',
    filter: 'invert(31%) sepia(67%) saturate(3604%) hue-rotate(146deg) brightness(90%) contrast(91%)'
  }} />
                                <h3 style={{
    fontSize: '28px',
    fontWeight: '600',
    color: 'white',
    margin: 0,
    fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
  }}>
                                    Why Mintlify?
                                </h3>
                            </div>

                            <p style={{
    fontSize: '16px',
    lineHeight: '1.7',
    color: 'rgba(255, 255, 255, 0.7)',
    margin: 0,
    fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
  }}>
                                GitHub Pages, Jekyll, and Hugo can't do this.
                            </p>
                        </div>

                        <div style={{
    display: 'flex',
    flexDirection: 'column',
    gap: '24px'
  }}>
                            {[{
    icon: 'robot',
    title: 'Built for People and AI',
    text: 'AI search, LLMS.txt, MCP support, and AI agents for writing'
  }, {
    icon: 'code',
    title: 'OpenAPI Integration',
    text: 'Interactive REST API docs with live SDK examples and testing'
  }, {
    icon: 'chart-line',
    title: 'Analytics & Insights',
    text: 'Track usage, search behavior, and user feedback'
  }, {
    icon: 'shield-check',
    title: 'Enterprise Compliance',
    text: 'SOC 2, GDPR, and ISO 27001 certified for security teams'
  }, {
    icon: 'lock',
    title: 'Granular Access Control',
    text: 'Secure access and provisioning with enterprise authentication'
  }].map((item, index) => <div key={index} style={{
    display: 'flex',
    alignItems: 'flex-start',
    gap: '16px'
  }}>
                                    <div style={{
    width: '40px',
    height: '40px',
    borderRadius: '12px',
    background: 'rgba(14, 164, 114, 0.2)',
    border: '1px solid rgba(14, 164, 114, 0.3)',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    flexShrink: 0,
    marginTop: '2px'
  }}>
                                        <Icon icon={item.icon} iconType="solid" size={20} color="#0ea472" />
                                    </div>
                                    <div>
                                        <div style={{
    fontSize: '16px',
    fontWeight: '600',
    color: 'white',
    marginBottom: '4px',
    fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
  }}>
                                            {item.title}
                                        </div>
                                        <div style={{
    fontSize: '14px',
    color: 'rgba(255, 255, 255, 0.6)',
    lineHeight: '1.5',
    fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
  }}>
                                            {item.text}
                                        </div>
                                    </div>
                                </div>)}
                        </div>
                    </div>

                    {}
                    <div style={{
    background: 'rgba(10, 22, 40, 0.6)',
    borderRadius: '24px',
    padding: '48px',
    boxShadow: '0 4px 24px rgba(0, 0, 0, 0.3)',
    border: '1px solid rgba(255, 255, 255, 0.2)',
    backdropFilter: 'blur(20px)',
    display: 'flex',
    flexDirection: 'column',
    gap: '32px'
  }}>
                        <div>
                            <h3 style={{
    fontSize: '28px',
    fontWeight: '600',
    color: 'white',
    margin: '0 0 16px 0',
    lineHeight: '1.4',
    display: 'flex',
    alignItems: 'flex-start',
    gap: '16px',
    flexWrap: 'wrap',
    fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
  }}>
                                <img src="/images/icons/favicon.svg" alt="DotNetDocs" style={{
    width: '48px',
    height: '48px',
    flexShrink: 0,
    display: 'inline-block',
    verticalAlign: 'middle'
  }} />
                                <span style={{
    flex: '1 1 180px',
    minWidth: '180px'
  }}>
                                    DotNetDocs + Mintlify = Awesome
                                </span>
                            </h3>

                            <p style={{
    fontSize: '16px',
    lineHeight: '1.7',
    color: 'rgba(255, 255, 255, 0.7)',
    margin: 0,
    fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
  }}>
                                The magical duo for modern .NET documentation.
                            </p>
                        </div>

                        <div style={{
    display: 'flex',
    flexDirection: 'column',
    gap: '24px'
  }}>
                            {[{
    icon: 'file-code',
    title: 'MDX with Frontmatter',
    text: 'Auto-generated frontmatter w/ icons, tags, SEO metadata, & keywords'
  }, {
    icon: 'diagram-project',
    title: 'Rich Components',
    text: 'Custom React components, Mermaid diagrams, interactive elements'
  }, {
    icon: 'sitemap',
    title: 'Smart Navigation',
    text: 'Auto-generated docs.json w/ hierarchical namespace navigation'
  }, {
    icon: 'icons',
    title: 'Context-Aware Icons',
    text: 'FontAwesome icons for all object types'
  }, {
    icon: 'magnifying-glass',
    title: 'Enhanced Discoverability',
    text: 'SEO-optimized descriptions, keywords, and wide mode'
  }].map((item, index) => <div key={index} style={{
    display: 'flex',
    alignItems: 'flex-start',
    gap: '16px'
  }}>
                                    <div style={{
    width: '40px',
    height: '40px',
    borderRadius: '12px',
    background: 'rgba(60, 208, 226, 0.2)',
    border: '1px solid rgba(60, 208, 226, 0.3)',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    flexShrink: 0,
    marginTop: '2px'
  }}>
                                        <Icon icon={item.icon} iconType="solid" size={20} color="#3CD0E2" />
                                    </div>
                                    <div>
                                        <div style={{
    fontSize: '16px',
    fontWeight: '600',
    color: 'white',
    marginBottom: '4px',
    fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
  }}>
                                            {item.title}
                                        </div>
                                        <div style={{
    fontSize: '14px',
    color: 'rgba(255, 255, 255, 0.6)',
    lineHeight: '1.5',
    fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
  }}>
                                            {item.text}
                                        </div>
                                    </div>
                                </div>)}
                        </div>
                    </div>
                </div>

                {}
                <div style={{
    textAlign: 'center',
    marginBottom: '60px'
  }}>
                    <p style={{
    fontSize: '14px',
    color: 'rgba(255, 255, 255, 0.5)',
    marginBottom: '24px',
    fontWeight: '500',
    letterSpacing: '0.5px',
    textTransform: 'uppercase',
    fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
  }}>
                        Trusted by innovative teams
                    </p>
                    <div style={{
    display: 'flex',
    gap: '48px',
    justifyContent: 'center',
    alignItems: 'center',
    flexWrap: 'wrap',
    opacity: 0.5
  }}>
                        {['Anthropic', 'Vercel', 'PayPal', 'Coinbase', 'LinkedIn', 'X'].map((company, index) => <div key={index} style={{
    fontSize: '18px',
    fontWeight: '600',
    color: 'white',
    fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
  }}>
                                {company}
                            </div>)}
                    </div>
                </div>

                {}
                <div style={{
    textAlign: 'center'
  }}>
                    <div style={{
    display: 'flex',
    gap: '16px',
    justifyContent: 'center',
    alignItems: 'center',
    flexWrap: 'wrap'
  }}>
                        <a href="/providers/mintlify" target="_blank" rel="noopener noreferrer" className="mintlify-cta-secondary" style={{
    display: 'inline-flex',
    alignItems: 'center',
    gap: '8px',
    padding: '14px 28px',
    background: 'rgba(255, 255, 255, 0.05)',
    border: '1px solid rgba(255, 255, 255, 0.2)',
    color: 'white',
    borderRadius: '100px',
    textDecoration: 'none',
    fontWeight: '600',
    fontSize: '15px',
    transition: 'all 0.2s',
    fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.2)'
  }}>
                            Learn About Mintlify
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                                <path d="M11 5L11 11M11 5L5 5M11 5L5 11" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                            </svg>
                        </a>
                        <a href="https://dashboard.mintlify.com/signup?ajs_aid=281bf9d4-cd11-4748-9f5e-03a8cdff7f26&_gl=1*lqwmpa*_gcl_au*MTUxMDgzOTg3NS4xNzU5NTYzNDg1&amp;utm_source=dotnetdocs" target="_blank" rel="noopener noreferrer" className="mintlify-cta-primary" style={{
    display: 'inline-flex',
    alignItems: 'center',
    gap: '8px',
    padding: '14px 28px',
    background: 'white',
    color: '#0a1628',
    borderRadius: '100px',
    textDecoration: 'none',
    fontWeight: '600',
    fontSize: '15px',
    transition: 'all 0.2s',
    border: 'none',
    fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
    boxShadow: '0 4px 16px rgba(255, 255, 255, 0.1)'
  }}>
                            Sign Up for Free
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" style={{
    marginLeft: '4px'
  }}>
                                <path d="M6 3L11 8L6 13" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                            </svg>
                        </a>
                    </div>
                </div>
            </div>

            <style>{`
                .mintlify-cta-primary:hover {
                    background: #0ea472 !important;
                    color: white !important;
                    transform: translateY(-2px);
                    box-shadow: 0 8px 24px rgba(14, 164, 114, 0.3) !important;
                }

                .mintlify-cta-secondary:hover {
                    background: rgba(255, 255, 255, 0.1) !important;
                    border-color: rgba(255, 255, 255, 0.3) !important;
                    transform: translateY(-2px);
                    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
                }
            `}</style>
        </div>;
};

export const FeatureShowcase = () => {
  const [animationsStarted, setAnimationsStarted] = React.useState(false);
  React.useEffect(() => {
    setAnimationsStarted(true);
  }, []);
  const features = [{
    icon: 'layer-group',
    iconType: 'duotone',
    title: 'Integrated Conceptual Docs',
    description: 'Weave in generated & written docs without losing your work',
    color: '#3CD0E2',
    details: 'Content on how to use an API, best practices, and more do not belong in your code files. Expertly weave your API & Conceptual docs and regenerate without losing your hard work.'
  }, {
    icon: 'gears',
    iconType: 'duotone',
    title: 'Native MSBuild Integration',
    description: 'Automatically updates your Docs every time you compile',
    color: '#3CD0E2',
    details: 'Your docs are always up-to-date, whether you compile in VS, with `dotnet build` or in your CI/CD pipeline. No external tools required.'
  }, {
    icon: 'pipe-valve',
    iconType: 'duotone',
    title: 'Pluggable Pipeline',
    description: 'Easily generate, merge, enrich, transform, and render your docs',
    color: '#3CD0E2',
    details: 'DotNetDocs is the last documentation system you\'ll ever need. Our modern pipeline is designed for the future with full extensibility.'
  }];
  return <div style={{
    width: '100%',
    padding: '120px 0',
    background: 'linear-gradient(180deg, #0F1922 0%, #1A2B3D 100%)',
    position: 'relative',
    overflow: 'hidden',
    opacity: animationsStarted ? 1 : 0,
    transition: 'opacity 0.5s ease-out'
  }}>
            {}
            <div style={{
    position: 'absolute',
    inset: 0,
    opacity: 0.05,
    backgroundImage: `radial-gradient(circle at 20% 50%, #3CD0E2 0%, transparent 50%),
                          radial-gradient(circle at 80% 50%, #419AC5 0%, transparent 50%)`
  }} />

            <div style={{
    maxWidth: '1400px',
    margin: '0 auto',
    padding: '0 40px',
    position: 'relative',
    zIndex: 10
  }}>
                {}
                <div style={{
    textAlign: 'center',
    marginBottom: '80px'
  }}>
                    <div style={{
    display: 'inline-block',
    padding: '8px 20px',
    background: 'rgba(255, 107, 107, 0.1)',
    border: '1px solid rgba(255, 107, 107, 0.3)',
    borderRadius: '50px',
    marginBottom: '20px',
    fontSize: '13px',
    fontWeight: 'bold',
    color: '#FF6B6B',
    letterSpacing: '1px',
    textTransform: 'uppercase'
  }}>
                        Beyond DocFX
                    </div>

                    <h2 style={{
    fontSize: 'clamp(36px, 5vw, 56px)',
    fontWeight: '900',
    marginBottom: '20px',
    lineHeight: '1.2'
  }}>
                        <span style={{
    background: 'linear-gradient(135deg, #3CD0E2, #419AC5)',
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
    backgroundClip: 'text'
  }}>
                            Features DocFX Can't Handle
                        </span>
                    </h2>
                    <p style={{
    fontSize: '20px',
    color: '#B0D4E8',
    maxWidth: '700px',
    margin: '0 auto',
    lineHeight: '1.6'
  }}>
                        While DocFX generates static API docs, DotNetDocs brings modern workflows, multiple output formats, and true integration with your development process
                    </p>
                </div>

                {}
                <div style={{
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fit, minmax(350px, 1fr))',
    gap: '30px',
    marginBottom: '60px'
  }}>
                    {features.map((feature, index) => <div key={index} className="feature-card" style={{
    background: 'rgba(255, 255, 255, 0.02)',
    border: '2px solid rgba(60, 208, 226, 0.1)',
    borderRadius: '20px',
    padding: '40px',
    cursor: 'pointer',
    transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)'
  }}>
                            <div style={{
    marginBottom: '20px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-start'
  }}>
                                <Icon icon={feature.icon} iconType={feature.iconType} size={48} color={feature.color} />
                            </div>

                            <h3 style={{
    fontSize: '24px',
    fontWeight: 'bold',
    color: 'white',
    marginBottom: '10px'
  }}>
                                {feature.title}
                            </h3>

                            <div style={{
    color: '#A0C8DD',
    fontSize: '16px',
    lineHeight: '1.6',
    marginBottom: '0'
  }}>
                                {feature.description}
                            </div>

                            <div className="feature-details" style={{
    color: '#B0C4DE',
    fontSize: '14px',
    lineHeight: '1.6',
    marginTop: '20px',
    paddingTop: '20px',
    borderTop: '1px solid rgba(60, 208, 226, 0.1)',
    maxHeight: '0',
    overflow: 'hidden',
    opacity: '0',
    transition: 'all 0.3s ease-in-out'
  }}>
                                {feature.details}
                            </div>
                        </div>)}
                </div>

                {}
                <div style={{
    textAlign: 'center',
    paddingTop: '40px'
  }}>
                    <a href="https://dotnetdocs.com/docs/features" className="explore-features-btn" style={{
    display: 'inline-flex',
    alignItems: 'center',
    gap: '10px',
    padding: '16px 32px',
    background: 'transparent',
    border: '2px solid #3CD0E2',
    color: '#3CD0E2',
    borderRadius: '10px',
    textDecoration: 'none',
    fontWeight: 'bold',
    fontSize: '16px',
    transition: 'all 0.3s'
  }}>
                        Explore All Features
                        <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor">
                            <path d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" />
                        </svg>
                    </a>
                </div>
            </div>

            <style>{`
        .feature-card:hover {
          background: linear-gradient(135deg, rgba(60, 208, 226, 0.1), rgba(65, 154, 197, 0.1)) !important;
          border-color: #3CD0E2 !important;
          transform: translateY(-5px) scale(1.02);
          box-shadow: 0 20px 40px rgba(60, 208, 226, 0.2);
        }

        .feature-card:hover h3 {
          color: #3CD0E2 !important;
        }

        .feature-card:hover .feature-details {
          max-height: 200px !important;
          opacity: 1 !important;
        }

        .explore-features-btn:hover {
          background: rgba(60, 208, 226, 0.1) !important;
          transform: translateX(5px);
        }
      `}</style>
        </div>;
};

export const ValueProposition = ({minimal = false, minCardWidth = 360, gap = 40}) => {
  const [animationsStarted, setAnimationsStarted] = React.useState(false);
  React.useEffect(() => {
    setAnimationsStarted(true);
  }, []);
  const values = [{
    icon: 'sidebar-flip',
    iconType: 'duotone',
    number: '01',
    title: 'Bring any docs into Visual Studio',
    description: 'The new .docsproj Projects + the DotNetDocs.Sdk bring your docs for Mintlify, DocFX, MkDocs, Jekyll, Hugo, and more right into your VS and VSCode solutions.',
    gradient: 'linear-gradient(135deg, #3CD0E2, #2BA8C7)'
  }, {
    icon: 'file-code',
    iconType: 'duotone',
    number: '02',
    title: 'Add real-time API reference docs',
    description: 'Automatically transform your .NET XML Documentation Comments into beautiful, searchable API reference docs that stay in sync with every build.',
    gradient: 'linear-gradient(135deg, #419AC5, #2D7BA8)'
  }, {
    icon: 'rocket-launch',
    iconType: 'duotone',
    number: '03',
    title: 'Build & deploy anywhere',
    description: 'Your docs, your way. Deploy to Mintlify, GitHub Pages, Netlify, Vercel, or any static hosting. Full MSBuild integration means your CI/CD pipeline is already ready.',
    gradient: 'linear-gradient(135deg, #3CD0E2, #419AC5)'
  }];
  const valueCards = <div style={{
    display: 'grid',
    gridTemplateColumns: `repeat(auto-fit, minmax(${minCardWidth}px, 1fr))`,
    gap: `${gap}px`,
    marginBottom: minimal ? 0 : '80px'
  }}>
            {values.map((value, index) => <div key={index} className="value-card" style={{
    position: 'relative',
    background: 'linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01))',
    border: '2px solid rgba(60, 208, 226, 0.25)',
    borderRadius: '28px',
    padding: '50px 40px',
    transition: 'all 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
    overflow: 'hidden',
    boxShadow: '0 10px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05)'
  }}>
                    {}
                    {minimal && <div className="card-background" style={{
    position: 'absolute',
    inset: 0,
    borderRadius: '28px',
    overflow: 'hidden',
    zIndex: 0
  }}>
                            {}
                            <div style={{
    position: 'absolute',
    inset: 0,
    background: 'linear-gradient(180deg, #050B12 0%, #0D1821 50%, #0A1520 100%)'
  }} />

                            {}
                            <div style={{
    position: 'absolute',
    inset: 0,
    opacity: 0.4,
    background: `
                                    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(60, 208, 226, 0.25), transparent),
                                    radial-gradient(ellipse 60% 50% at 10% 40%, rgba(65, 154, 197, 0.2), transparent),
                                    radial-gradient(ellipse 60% 50% at 90% 60%, rgba(60, 208, 226, 0.2), transparent),
                                    radial-gradient(ellipse 100% 100% at 50% 100%, rgba(65, 154, 197, 0.15), transparent)
                                `,
    filter: 'blur(60px)',
    animation: 'morphGradient 12s ease-in-out infinite'
  }} />

                            {}
                            <div style={{
    position: 'absolute',
    inset: 0,
    opacity: 0.03,
    backgroundImage: `
                                    linear-gradient(#3CD0E2 1px, transparent 1px),
                                    linear-gradient(90deg, #3CD0E2 1px, transparent 1px)
                                `,
    backgroundSize: '100px 100px',
    animation: 'gridSlide 20s linear infinite'
  }} />
                        </div>}

                    {}
                    <div className="card-border-gradient" style={{
    position: 'absolute',
    inset: 0,
    borderRadius: '28px',
    padding: '2px',
    background: `linear-gradient(135deg, ${value.gradient.replace('linear-gradient(135deg, ', '').replace(')', '')}, transparent, transparent)`,
    WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
    WebkitMaskComposite: 'xor',
    maskComposite: 'exclude',
    opacity: 0,
    transition: 'opacity 0.5s ease'
  }} />

                    {}
                    <div className="card-glow" style={{
    position: 'absolute',
    top: '-50%',
    left: '-50%',
    width: '200%',
    height: '200%',
    background: value.gradient,
    opacity: 0,
    transition: 'opacity 0.5s ease',
    borderRadius: '50%',
    filter: 'blur(60px)'
  }} />

                    {}
                    <div style={{
    position: 'absolute',
    top: '30px',
    right: '30px',
    fontSize: '72px',
    fontWeight: '900',
    background: value.gradient,
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
    backgroundClip: 'text',
    opacity: 0.1,
    lineHeight: '1',
    pointerEvents: 'none'
  }}>
                        {value.number}
                    </div>

                    <div style={{
    position: 'relative',
    zIndex: 2
  }}>
                        {}
                        <div className="icon-container" style={{
    marginBottom: minimal ? '20px' : '30px',
    display: 'inline-flex',
    padding: '24px',
    background: `linear-gradient(135deg, rgba(60, 208, 226, 0.15), rgba(65, 154, 197, 0.1))`,
    borderRadius: '20px',
    border: '2px solid rgba(60, 208, 226, 0.3)',
    position: 'relative',
    boxShadow: '0 8px 32px rgba(60, 208, 226, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1)',
    transition: 'all 0.4s ease'
  }}>
                            <Icon icon={value.icon} iconType={value.iconType} size={44} color="#3CD0E2" />
                        </div>

                        {}
                        <h3 style={{
    fontSize: '28px',
    fontWeight: 'bold',
    color: 'white',
    margin: '0 0 16px 0',
    lineHeight: '1.3'
  }}>
                            {value.title}
                        </h3>

                        {}
                        <p style={{
    color: '#A0C8DD',
    fontSize: '17px',
    lineHeight: '1.7',
    marginBottom: '0'
  }}>
                            {value.description}
                        </p>
                    </div>
                </div>)}
        </div>;
  if (minimal) {
    return <>
                {valueCards}
                <style>{`
                    @keyframes morphGradient {
                        0%, 100% {
                            opacity: 0.4;
                            transform: scale(1) rotate(0deg);
                        }
                        50% {
                            opacity: 0.6;
                            transform: scale(1.1) rotate(5deg);
                        }
                    }

                    @keyframes gridSlide {
                        0% { background-position: 0 0; }
                        100% { background-position: 100px 100px; }
                    }

                    .value-card:hover {
                        transform: translateY(-12px) scale(1.02);
                        border-color: transparent !important;
                        box-shadow: 0 40px 80px rgba(60, 208, 226, 0.35), 0 0 60px rgba(60, 208, 226, 0.15);
                        background: linear-gradient(135deg, rgba(60, 208, 226, 0.08), rgba(65, 154, 197, 0.05)) !important;
                    }

                    .value-card:hover .card-glow {
                        opacity: 0.12 !important;
                    }

                    .value-card:hover .card-border-gradient {
                        opacity: 1 !important;
                    }

                    .value-card:hover .icon-container {
                        transform: scale(1.1) rotate(-5deg);
                        box-shadow: 0 12px 48px rgba(60, 208, 226, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.2) !important;
                        background: linear-gradient(135deg, rgba(60, 208, 226, 0.25), rgba(65, 154, 197, 0.2)) !important;
                        border-color: rgba(60, 208, 226, 0.6) !important;
                    }

                    .value-card:hover h3 {
                        background: linear-gradient(135deg, #3CD0E2, #419AC5);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                        background-clip: text;
                        transform: translateX(5px);
                    }

                    .value-card h3 {
                        transition: all 0.4s ease;
                    }
                `}</style>
            </>;
  }
  return <div style={{
    width: '100%',
    padding: '140px 0',
    background: 'linear-gradient(180deg, #050B12 0%, #0D1821 50%, #0A1520 100%)',
    position: 'relative',
    overflow: 'hidden',
    opacity: animationsStarted ? 1 : 0,
    transition: 'opacity 0.5s ease-out'
  }}>
            {}
            <div style={{
    position: 'absolute',
    inset: 0,
    opacity: 0.4,
    background: `
                    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(60, 208, 226, 0.25), transparent),
                    radial-gradient(ellipse 60% 50% at 10% 40%, rgba(65, 154, 197, 0.2), transparent),
                    radial-gradient(ellipse 60% 50% at 90% 60%, rgba(60, 208, 226, 0.2), transparent),
                    radial-gradient(ellipse 100% 100% at 50% 100%, rgba(65, 154, 197, 0.15), transparent)
                `,
    filter: 'blur(60px)',
    animation: 'morphGradient 12s ease-in-out infinite'
  }} />

            {}
            <div style={{
    position: 'absolute',
    inset: 0,
    opacity: 0.03,
    backgroundImage: `
                    linear-gradient(#3CD0E2 1px, transparent 1px),
                    linear-gradient(90deg, #3CD0E2 1px, transparent 1px)
                `,
    backgroundSize: '100px 100px',
    animation: 'gridSlide 20s linear infinite'
  }} />

            {}
            <div className="orb orb-1" style={{
    position: 'absolute',
    top: '10%',
    left: '5%',
    width: '400px',
    height: '400px',
    background: 'radial-gradient(circle, rgba(60, 208, 226, 0.15), transparent 70%)',
    borderRadius: '50%',
    filter: 'blur(80px)',
    animation: 'floatOrb1 25s ease-in-out infinite'
  }} />
            <div className="orb orb-2" style={{
    position: 'absolute',
    bottom: '10%',
    right: '10%',
    width: '500px',
    height: '500px',
    background: 'radial-gradient(circle, rgba(65, 154, 197, 0.2), transparent 70%)',
    borderRadius: '50%',
    filter: 'blur(90px)',
    animation: 'floatOrb2 30s ease-in-out infinite'
  }} />

            <div style={{
    maxWidth: '1400px',
    margin: '0 auto',
    padding: '0 40px',
    position: 'relative',
    zIndex: 10
  }}>
                {}
                <div style={{
    textAlign: 'center',
    marginBottom: '100px',
    position: 'relative'
  }}>
                    <div style={{
    display: 'inline-block',
    padding: '8px 20px',
    background: 'rgba(60, 208, 226, 0.1)',
    border: '1px solid rgba(60, 208, 226, 0.3)',
    borderRadius: '50px',
    marginBottom: '30px',
    fontSize: '14px',
    fontWeight: 'bold',
    color: '#3CD0E2',
    letterSpacing: '1px',
    textTransform: 'uppercase'
  }}>
                        Why DotNetDocs
                    </div>

                    <h2 style={{
    fontSize: 'clamp(42px, 6vw, 72px)',
    fontWeight: '900',
    marginBottom: '20px',
    lineHeight: '1.1',
    letterSpacing: '-0.02em'
  }}>
                        <span style={{
    display: 'block',
    background: 'linear-gradient(135deg, #3CD0E2, #419AC5, #3CD0E2)',
    backgroundSize: '200% auto',
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
    backgroundClip: 'text',
    animation: 'shine 3s linear infinite'
  }}>
                            Make Documentation a Joy
                        </span>
                        <span style={{
    color: 'white',
    fontSize: '0.7em',
    fontWeight: '600',
    display: 'block',
    marginTop: '10px'
  }}>
                            Not a Chore
                        </span>
                    </h2>

                </div>

                {}
                {valueCards}

                {}
                <div style={{
    textAlign: 'center',
    padding: '60px 40px',
    background: 'rgba(60, 208, 226, 0.03)',
    border: '2px solid rgba(60, 208, 226, 0.15)',
    borderRadius: '20px',
    position: 'relative',
    overflow: 'hidden'
  }}>
                    <div style={{
    position: 'absolute',
    inset: 0,
    background: 'linear-gradient(90deg, transparent, rgba(60, 208, 226, 0.05), transparent)',
    animation: 'slideShine 3s ease-in-out infinite'
  }} />

                    <h3 style={{
    fontSize: 'clamp(24px, 4vw, 36px)',
    fontWeight: '800',
    background: 'linear-gradient(135deg, #3CD0E2, #419AC5)',
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
    backgroundClip: 'text',
    marginBottom: '16px',
    position: 'relative',
    zIndex: 2
  }}>
                        Give devs the experience they deserve.
                    </h3>
                    <p style={{
    fontSize: '18px',
    color: '#B0D4E8',
    maxWidth: '700px',
    margin: '0 auto',
    lineHeight: '1.6',
    position: 'relative',
    zIndex: 2
  }}>
                        No more context switching. No more outdated docs. Just seamless, integrated documentation that grows with your codebase.
                    </p>
                </div>
            </div>

            <style>{`
                @keyframes morphGradient {
                    0%, 100% {
                        opacity: 0.4;
                        transform: scale(1) rotate(0deg);
                    }
                    50% {
                        opacity: 0.6;
                        transform: scale(1.1) rotate(5deg);
                    }
                }

                @keyframes gridSlide {
                    0% { background-position: 0 0; }
                    100% { background-position: 100px 100px; }
                }

                @keyframes floatOrb1 {
                    0%, 100% { transform: translate(0, 0) scale(1); }
                    25% { transform: translate(30px, -20px) scale(1.05); }
                    50% { transform: translate(-20px, 30px) scale(0.95); }
                    75% { transform: translate(20px, 20px) scale(1.02); }
                }

                @keyframes floatOrb2 {
                    0%, 100% { transform: translate(0, 0) scale(1); }
                    33% { transform: translate(-40px, 20px) scale(1.08); }
                    66% { transform: translate(30px, -30px) scale(0.92); }
                }

                @keyframes shine {
                    to { background-position: 200% center; }
                }

                @keyframes slideShine {
                    0%, 100% { transform: translateX(-100%); }
                    50% { transform: translateX(100%); }
                }

                .value-card:hover {
                    transform: translateY(-12px) scale(1.02);
                    border-color: transparent !important;
                    box-shadow: 0 40px 80px rgba(60, 208, 226, 0.35), 0 0 60px rgba(60, 208, 226, 0.15);
                    background: linear-gradient(135deg, rgba(60, 208, 226, 0.08), rgba(65, 154, 197, 0.05)) !important;
                }

                .value-card:hover .card-glow {
                    opacity: 0.12 !important;
                }

                .value-card:hover .card-border-gradient {
                    opacity: 1 !important;
                }

                .value-card:hover .icon-container {
                    transform: scale(1.1) rotate(-5deg);
                    box-shadow: 0 12px 48px rgba(60, 208, 226, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.2) !important;
                    background: linear-gradient(135deg, rgba(60, 208, 226, 0.25), rgba(65, 154, 197, 0.2)) !important;
                    border-color: rgba(60, 208, 226, 0.6) !important;
                }

                .value-card:hover h3 {
                    background: linear-gradient(135deg, #3CD0E2, #419AC5);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    background-clip: text;
                    transform: translateX(5px);
                }

                .value-card h3 {
                    transition: all 0.4s ease;
                }
            `}</style>
        </div>;
};

export const SaaSHero = () => {
  const [animationsStarted, setAnimationsStarted] = React.useState(false);
  React.useEffect(() => {
    setAnimationsStarted(true);
  }, []);
  return <div style={{
    width: '100%',
    minHeight: '100vh',
    background: 'linear-gradient(135deg, #0A1628 0%, #1A2B3D 50%, #0A1628 100%)',
    position: 'relative',
    overflow: 'hidden',
    display: 'flex',
    alignItems: 'center',
    padding: '80px 0'
  }} className="hero-section">
      {}
      <div style={{
    position: 'absolute',
    width: '800px',
    height: '800px',
    background: 'radial-gradient(circle, #3CD0E2 0%, transparent 70%)',
    opacity: '0.15',
    borderRadius: '50%',
    top: '-200px',
    left: '-400px',
    filter: 'blur(100px)',
    animation: 'float 20s infinite ease-in-out'
  }} />

      <div style={{
    position: 'absolute',
    width: '600px',
    height: '600px',
    background: 'radial-gradient(circle, #419AC5 0%, transparent 70%)',
    opacity: '0.2',
    borderRadius: '50%',
    bottom: '-100px',
    right: '-300px',
    filter: 'blur(80px)',
    animation: 'float 15s infinite ease-in-out reverse'
  }} />

      {}
      <div style={{
    position: 'absolute',
    inset: 0,
    backgroundImage: `
          linear-gradient(#3CD0E2 1px, transparent 1px),
          linear-gradient(90deg, #3CD0E2 1px, transparent 1px)
        `,
    backgroundSize: '100px 100px',
    opacity: 0.03
  }} />

      {}
      <div style={{
    maxWidth: '1400px',
    margin: '0 auto',
    padding: '0 40px',
    position: 'relative',
    zIndex: 10,
    width: '100%'
  }}>
        <div style={{
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 500px), 1fr))',
    gap: '80px',
    alignItems: 'center'
  }}>
          {}
          <div style={{
    animation: animationsStarted ? 'slideInLeft 1s ease-out forwards' : 'none',
    backfaceVisibility: 'hidden',
    opacity: animationsStarted ? undefined : 0,
    transform: animationsStarted ? undefined : 'translateX(-50px)'
  }}>
            {}
            <div className="hero-logo" style={{
    marginBottom: '40px',
    display: 'flex',
    alignItems: 'center',
    gap: '20px'
  }}>
              <img src="/images/logos/dotnetdocs.dark.svg" alt="DotNetDocs" style={{
    height: '56px',
    width: 'auto'
  }} />
            </div>

            <div style={{
    display: 'none',
    alignItems: 'center',
    padding: '8px 20px',
    background: 'linear-gradient(135deg, #3CD0E2, #419AC5)',
    borderRadius: '50px',
    marginBottom: '30px',
    boxShadow: '0 0 30px rgba(60, 208, 226, 0.3)'
  }}>
              <span style={{
    background: 'white',
    padding: '4px 8px',
    borderRadius: '20px',
    fontSize: '12px',
    fontWeight: 'bold',
    color: '#419AC5',
    marginRight: '10px'
  }}>NEW</span>
              <span style={{
    color: 'white',
    fontSize: '14px',
    fontWeight: '600'
  }}>Transform XML → Beautiful Docs in Seconds</span>
            </div>

            {}
            <h1 className="hero-heading">
              <span className="hero-heading-line1">Documentation</span>
              <span className="hero-heading-line2">
                That 
                <span className="dropping-texts">
                  <span>Lives</span>
                  <span>Builds</span>
                  <span>Ships</span>
                </span>
              </span>
              <span className="hero-heading-line3">With Your Code</span>
            </h1>

            <div style={{
    paddingBottom: '30px',
    maxWidth: '500px'
  }}>
              <p style={{
    fontSize: 'clamp(16px, 4vw, 20px)',
    lineHeight: '1.6',
    color: '#B0C4DE',
    margin: 0
  }}>
                Turn your amazing .NET projects into stunning <nobr>AI-ready</nobr> documentation sites. 
                <nobr>Zero config.</nobr> <nobr>Full control.</nobr> Built for developers.
              </p>
            </div>

            <div className="hero-cta-buttons" style={{
    display: 'flex',
    gap: '20px',
    flexWrap: 'wrap',
    marginBottom: '60px'
  }}>
              <a href="/quickstart" className="hero-cta-primary" style={{
    padding: '18px 40px',
    background: 'linear-gradient(135deg, #3CD0E2, #419AC5)',
    color: 'white',
    borderRadius: '12px',
    textDecoration: 'none',
    fontWeight: 'bold',
    fontSize: '16px',
    boxShadow: '0 10px 40px rgba(60, 208, 226, 0.3)',
    transition: 'all 0.3s',
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    gap: '10px'
  }}>
                <span className="hero-cta-text-desktop">Start Building</span>
                <span className="hero-cta-text-mobile">Get Started</span>
                <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
                  <path d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" />
                </svg>
              </a>

              <a href="https://github.com/CloudNimble/DotNetDocs" className="hero-cta-secondary" style={{
    padding: '18px 40px',
    background: 'rgba(255, 255, 255, 0.1)',
    backdropFilter: 'blur(10px)',
    color: 'white',
    border: '2px solid rgba(60, 208, 226, 0.3)',
    borderRadius: '12px',
    textDecoration: 'none',
    fontWeight: 'bold',
    fontSize: '16px',
    transition: 'all 0.3s',
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    gap: '10px'
  }}>
                <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
                </svg>
                <span className="hero-cta-text-desktop">View on GitHub</span>
                <span className="hero-cta-text-mobile">GitHub</span>
              </a>
            </div>

            {}
            <div className="hero-footer-links" style={{
    paddingTop: '40px',
    borderTop: '1px solid rgba(60, 208, 226, 0.2)',
    display: 'flex',
    gap: '60px',
    alignItems: 'flex-start',
    flexWrap: 'wrap'
  }}>
              {}
              <div>
                <div style={{
    color: '#8B9DC3',
    fontSize: '12px',
    fontWeight: '600',
    letterSpacing: '1px',
    textTransform: 'uppercase',
    marginBottom: '20px'
  }}>
                  Created By
                </div>
                <a href="https://github.com/cloudnimble" target="_blank" rel="noopener noreferrer">
                  <img src="/images/logos/cloudnimble.dark.svg" alt="CloudNimble" style={{
    height: '28px',
    width: 'auto',
    opacity: 0.7,
    transition: 'opacity 0.3s',
    cursor: 'pointer'
  }} onMouseOver={e => e.currentTarget.style.opacity = '1'} onMouseOut={e => e.currentTarget.style.opacity = '0.7'} />
                </a>
              </div>

              {}
              <div>
                <div style={{
    color: '#8B9DC3',
    fontSize: '12px',
    fontWeight: '600',
    letterSpacing: '1px',
    textTransform: 'uppercase',
    marginBottom: '20px'
  }}>
                  Sponsored By
                </div>
                <div style={{
    display: 'flex',
    gap: '40px',
    alignItems: 'center',
    flexWrap: 'wrap'
  }}>
                  <a href="/providers/mintlify" target="_blank" rel="noopener noreferrer">
                    <img src="/images/logos/mintlify.dark.svg" alt="Mintlify" style={{
    height: '28px',
    width: 'auto',
    opacity: 0.7,
    transition: 'opacity 0.3s',
    cursor: 'pointer'
  }} onMouseOver={e => e.currentTarget.style.opacity = '1'} onMouseOut={e => e.currentTarget.style.opacity = '0.7'} />
                  </a>
                </div>
              </div>
            </div>
          </div>

          {}
          <div style={{
    position: 'relative',
    animation: animationsStarted ? 'slideInRight 1s ease-out forwards' : 'none',
    backfaceVisibility: 'hidden',
    opacity: animationsStarted ? undefined : 0,
    transform: animationsStarted ? undefined : 'translateX(50px)'
  }}>
            {}
            <div style={{
    background: 'rgba(10, 22, 40, 0.8)',
    backdropFilter: 'blur(20px)',
    borderRadius: '16px',
    border: '1px solid rgba(60, 208, 226, 0.2)',
    overflow: 'hidden',
    boxShadow: '0 30px 60px rgba(0, 0, 0, 0.5)'
  }}>
              <div style={{
    padding: '12px 20px',
    background: 'rgba(60, 208, 226, 0.1)',
    borderBottom: '1px solid rgba(60, 208, 226, 0.2)',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between'
  }}>
                <div style={{
    display: 'flex',
    gap: '8px'
  }}>
                  <div style={{
    width: '12px',
    height: '12px',
    borderRadius: '50%',
    background: '#ff5f57'
  }} />
                  <div style={{
    width: '12px',
    height: '12px',
    borderRadius: '50%',
    background: '#ffbd2e'
  }} />
                  <div style={{
    width: '12px',
    height: '12px',
    borderRadius: '50%',
    background: '#28ca42'
  }} />
                </div>
                <span style={{
    color: '#8B9DC3',
    fontSize: '12px',
    fontFamily: 'monospace'
  }}>MyProject.cs</span>
              </div>

              <div style={{
    padding: '30px',
    fontFamily: 'monospace',
    fontSize: '14px'
  }}>
                <div style={{
    color: '#608B4E'
  }}>/// &lt;summary&gt;</div>
                <div style={{
    color: '#608B4E'
  }}>/// Processes payment transactions</div>
                <div style={{
    color: '#608B4E'
  }}>/// &lt;/summary&gt;</div>
                <div>
                  <span style={{
    color: '#608B4E'
  }}>/// &lt;param </span>
                  <span style={{
    color: '#9CDCFE'
  }}>name</span>
                  <span style={{
    color: '#D4D4D4'
  }}>=</span>
                  <span style={{
    color: '#CE9178'
  }}>"amount"</span>
                  <span style={{
    color: '#608B4E'
  }}>&gt;The transaction amount to process&lt;/param&gt;</span>
                </div>
                <div>
                  <span style={{
    color: '#608B4E'
  }}>/// &lt;returns&gt;A &lt;see </span>
                  <span style={{
    color: '#9CDCFE'
  }}>cref</span>
                  <span style={{
    color: '#D4D4D4'
  }}>=</span>
                  <span style={{
    color: '#CE9178'
  }}>"PaymentResult"</span>
                  <span style={{
    color: '#608B4E'
  }}>/&gt; indicating success or failure&lt;/returns&gt;</span>
                </div>
                <div>
                  <span style={{
    color: '#569CD6'
  }}>public </span>
                  <span style={{
    color: '#569CD6'
  }}>async </span>
                  <span style={{
    color: '#4EC9B0'
  }}>Task</span>
                  <span style={{
    color: '#D4D4D4'
  }}>&lt;</span>
                  <span style={{
    color: '#4EC9B0'
  }}>PaymentResult</span>
                  <span style={{
    color: '#D4D4D4'
  }}>&gt; </span>
                  <span style={{
    color: '#DCDCAA'
  }}>ProcessPayment</span>
                  <span style={{
    color: '#D4D4D4'
  }}>(</span>
                  <span style={{
    color: '#569CD6'
  }}>decimal</span>
                  <span style={{
    color: '#9CDCFE'
  }}> amount</span>
                  <span style={{
    color: '#D4D4D4'
  }}>)</span>
                </div>
                <div style={{
    color: '#D4D4D4'
  }}>{'{'}</div>
                <div style={{
    paddingLeft: '20px'
  }}>
                  <span style={{
    color: '#C586C0'
  }}>return </span>
                  <span style={{
    color: '#C586C0'
  }}>await </span>
                  <span style={{
    color: '#9CDCFE'
  }}>_processor</span>
                  <span style={{
    color: '#D4D4D4'
  }}>.</span>
                  <span style={{
    color: '#DCDCAA'
  }}>Execute</span>
                  <span style={{
    color: '#D4D4D4'
  }}>(</span>
                  <span style={{
    color: '#9CDCFE'
  }}>amount</span>
                  <span style={{
    color: '#D4D4D4'
  }}>);</span>
                </div>
                <div style={{
    color: '#D4D4D4'
  }}>{'}'}</div>
              </div>
            </div>

            {}
            <div style={{
    position: 'absolute',
    top: '-20px',
    right: '-20px',
    padding: '10px 20px',
    background: 'linear-gradient(135deg, #3CD0E2, #419AC5)',
    borderRadius: '30px',
    color: 'white',
    fontWeight: 'bold',
    fontSize: '14px',
    boxShadow: '0 10px 30px rgba(60, 208, 226, 0.4)',
    animation: 'float 3s infinite ease-in-out'
  }}>
              AI-Ready Docs
            </div>

            <div style={{
    position: 'absolute',
    bottom: '-20px',
    left: '-20px',
    padding: '10px 20px',
    background: 'rgba(255, 255, 255, 0.1)',
    backdropFilter: 'blur(10px)',
    border: '1px solid rgba(60, 208, 226, 0.3)',
    borderRadius: '30px',
    color: 'white',
    fontWeight: 'bold',
    fontSize: '14px',
    animation: 'float 3s infinite ease-in-out reverse 1s'
  }}>
              Zero Config
            </div>
          </div>
        </div>
      </div>
    </div>;
};

<div className="custom-mode">
  <SaaSHero />

  <ValueProposition />

  <MintlifyPartnership />

  <FeatureShowcase />

  <CTASection />
</div>
