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

# About Crossmint

export const Footer = () => {
  const socials = [{
    name: "Website",
    icon: <svg viewBox="0 0 24 24" fill="currentColor" style={{
      width: "20px",
      height: "20px"
    }}>
                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z" />
                </svg>,
    href: "https://www.crossmint.com"
  }, {
    name: "Twitter",
    icon: <svg viewBox="0 0 24 24" fill="currentColor" style={{
      width: "20px",
      height: "20px"
    }}>
                    <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
                </svg>,
    href: "https://twitter.com/crossmint"
  }, {
    name: "GitHub",
    icon: <svg viewBox="0 0 24 24" fill="currentColor" style={{
      width: "20px",
      height: "20px"
    }}>
                    <path d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.17 6.839 9.49.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.167 22 16.418 22 12c0-5.523-4.477-10-10-10z" />
                </svg>,
    href: "https://github.com/crossmint"
  }];
  return <>
            <style>{`
        .custom-footer {
          width: 100%;
          border-top: 1px solid #e5e7eb;
          padding: 24px 16px;
          margin-top: 48px;
        }

        .custom-footer-content {
          max-width: 1326px;
          margin: 0 auto;
          display: flex;
          justify-content: flex-start;
          align-items: center;
        }

        .footer-socials {
          display: flex;
          gap: 12px;
          align-items: center;
          flex-wrap: wrap;
        }

        .footer-social-link {
          color: #6b7280;
          transition: color 0.2s ease;
          display: flex;
          align-items: center;
          text-decoration: none;
          padding: 4px;
        }

        .footer-social-link:hover {
          color: #36b37e;
        }

        .footer-social-link svg {
          width: 18px;
          height: 18px;
        }

        @media (min-width: 640px) {
          .custom-footer {
            padding: 32px 16px;
            margin-top: 64px;
          }

          .footer-socials {
            gap: 16px;
          }

          .footer-social-link svg {
            width: 20px;
            height: 20px;
          }
        }

        html[data-theme='dark'] .custom-footer,
        html.dark .custom-footer {
          border-top-color: #3a3a3a;
        }

        html[data-theme='dark'] .footer-social-link,
        html.dark .footer-social-link {
          color: #9ca3af;
        }

        html[data-theme='dark'] .footer-social-link:hover,
        html.dark .footer-social-link:hover {
          color: #36b37e;
        }
      `}</style>

            <footer className="custom-footer">
                <div className="custom-footer-content">
                    <div className="footer-socials">
                        {socials.map((social, index) => <a key={index} href={social.href} className="footer-social-link" target="_blank" rel="noopener noreferrer" aria-label={social.name}>
                                {social.icon}
                            </a>)}
                    </div>
                </div>
            </footer>
        </>;
};

export const OtherResources = ({children}) => {
  return <>
            <style>{`
        .other-resources-section {
          max-width: 1326px;
          margin: 32px auto 32px auto;
          padding: 0 16px;
        }

        .other-resources-heading {
          font-family: 'Inter', sans-serif;
          font-size: 1.5rem;
          font-weight: 500;
          margin-bottom: 20px;
          color: #1a1a1a;
        }

        @media (min-width: 640px) {
          .other-resources-section {
            margin: 48px auto 40px auto;
          }

          .other-resources-heading {
            font-size: 1.75rem;
            margin-bottom: 24px;
          }
        }

        html[data-theme='dark'] .other-resources-heading,
        html.dark .other-resources-heading {
          color: #ffffff;
        }
      `}</style>

            <div className="other-resources-section">
                <h2 className="other-resources-heading">Other Resources</h2>
                <CardGroup cols={2}>
                    <Card title="Crossmint CLI" icon="terminal" color="#36b37e" href="/cli/install">
                        Set up your Crossmint projects directly from the command line
                    </Card>
                    <Card title="Contact Sales" icon="message" iconType="duotone" color="#36b37e" href="https://www.crossmint.com/contact/sales">
                        Work with our team to design and launch your integration
                    </Card>
                </CardGroup>
            </div>
        </>;
};

export const SampleApps = ({count = 4}) => {
  const displayCount = Math.min(count, 4);
  const sampleApps = [{
    title: "Neobank Demo",
    description: "Build a neobank with wallets, onramps, yield, and more",
    image: "/images/sample-apps/sample-app-neobank.png",
    href: "https://www.crossmint.com/sample-apps/neobank-solution-demo",
    tags: ["Wallets", "Onramp", "Authentication"]
  }, {
    title: "Fintech Starter App",
    description: "Create your own Fintech app in minutes using Crossmint wallets and onramp",
    image: "/images/sample-apps/sample-app-fintech.png",
    href: "https://www.crossmint.com/sample-apps/fintech-starter-app",
    tags: ["Wallets", "Onramp", "Authentication"]
  }, {
    title: "Wallets Demo",
    description: "Create and interact with Crossmint wallets in Web and Mobile",
    image: "/images/sample-apps/sample-app-wallets.png",
    href: "https://www.crossmint.com/sample-apps/wallets-quickstart",
    tags: ["Wallets", "Authentication"]
  }, {
    title: "Onramp Demo",
    description: "Create and fund a crypto wallet using Crossmint Onramp",
    image: "/images/sample-apps/sample-app-onramp.png",
    href: "https://www.crossmint.com/sample-apps/onramp",
    tags: ["Onramp"]
  }];
  return <>
            <style>{`
        .sample-apps-section {
          margin: 32px auto 32px auto;
          max-width: 1326px;
          padding: 0 16px;
        }

        .sample-apps-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 20px;
          gap: 12px;
        }

        .sample-apps-heading {
          font-family: 'Inter', sans-serif;
          font-size: 1.5rem;
          font-weight: 500;
          color: #1a1a1a;
          margin: 0;
        }

        .view-all-link {
          font-size: 0.875rem;
          font-weight: 600;
          color: #36b37e;
          text-decoration: none;
          display: flex;
          align-items: center;
          gap: 4px;
          transition: color 0.2s ease;
          white-space: nowrap;
        }

        .view-all-link:hover {
          color: #2d9668;
        }

        .sample-apps-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: 16px;
        }

        .sample-app-card {
          background: #FFFFFF;
          border: 1px solid #e2e8f0;
          border-radius: 12px;
          overflow: hidden;
          text-decoration: none;
          color: inherit;
          transition: all 0.2s ease;
          display: flex;
          flex-direction: column;
          box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.04);
        }

        .sample-app-card:hover {
          transform: translateY(-4px);
          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
          border-color: #36b37e;
        }

        .sample-app-image-container {
          padding: 8px;
          width: 100%;
        }

        .sample-app-image {
          width: 100%;
          height: 160px;
          border: 1px solid #e2e8f0;
          border-radius: 8px;
          background: #f3f4f6;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
        }

        .sample-app-image img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 10px;
        }

        .sample-app-content {
          padding: 12px 14px 14px 14px;
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 12px;
        }

        .sample-app-text {
          display: flex;
          flex-direction: column;
          gap: 6px;
          min-height: 90px;
        }

        .sample-app-title {
          font-family: 'Inter', sans-serif;
          font-size: 0.9375rem;
          font-weight: 600;
          line-height: 1.4;
          margin: 0;
          color: #313a2c;
          text-transform: capitalize;
        }

        .sample-app-description {
          font-family: 'Inter', sans-serif;
          font-size: 0.8125rem;
          font-weight: 400;
          color: #777d74;
          line-height: 1.4;
          margin: 0;
          flex: 1;
        }

        .sample-app-tags {
          display: flex;
          gap: 6px;
          flex-wrap: wrap;
          margin-top: auto;
        }

        .sample-app-tag {
          padding: 3px 7px;
          background: white;
          border: 1px solid #e2e8f0;
          border-radius: 5px;
          font-family: 'Inter', sans-serif;
          font-size: 0.6875rem;
          font-weight: 500;
          line-height: 1.3;
          color: #334155;
        }

        html[data-theme='dark'] .sample-apps-heading,
        html.dark .sample-apps-heading {
          color: #ffffff;
        }

        html[data-theme='dark'] .sample-app-card,
        html.dark .sample-app-card {
          background: #242424;
          border-color: #3a3a3a;
        }

        html[data-theme='dark'] .sample-app-card:hover,
        html.dark .sample-app-card:hover {
          background: #2e2e2e;
          border-color: #36b37e;
        }

        html[data-theme='dark'] .sample-app-title,
        html.dark .sample-app-title {
          color: #f0f0f0;
        }

        html[data-theme='dark'] .sample-app-description,
        html.dark .sample-app-description {
          color: #b0b0b0;
        }

        html[data-theme='dark'] .sample-app-image,
        html.dark .sample-app-image {
          background: #1a1a1a;
          border-color: #3a3a3a;
        }

        html[data-theme='dark'] .sample-app-tag,
        html.dark .sample-app-tag {
          background: #242424;
          border-color: #3a3a3a;
          color: #d1d5db;
        }

        @media (min-width: 640px) {
          .sample-apps-section {
            margin: 48px auto 40px auto;
          }

          .sample-apps-header {
            margin-bottom: 24px;
          }

          .sample-apps-heading {
            font-size: 1.75rem;
          }

          .view-all-link {
            font-size: 1rem;
          }

          .sample-apps-grid {
            grid-template-columns: repeat(${Math.min(displayCount, 2)}, 1fr);
            gap: 20px;
          }

          .sample-app-card {
            border-radius: 16px;
          }

          .sample-app-image-container {
            padding: 10px;
          }

          .sample-app-image {
            height: 180px;
            border-radius: 10px;
          }

          .sample-app-content {
            padding: 16px 20px 20px 20px;
            gap: 16px;
          }

          .sample-app-text {
            gap: 8px;
            min-height: 104px;
          }

          .sample-app-title {
            font-size: 1rem;
            line-height: 1.75;
          }

          .sample-app-description {
            font-size: 0.875rem;
            line-height: 1.43;
          }

          .sample-app-tag {
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 0.75rem;
            line-height: 1.33;
          }
        }

        @media (min-width: 1024px) {
          .sample-apps-grid {
            grid-template-columns: repeat(${displayCount}, 1fr);
          }
        }
      `}</style>

            <div className="sample-apps-section">
                <div className="sample-apps-header">
                    <h2 className="sample-apps-heading">Sample Apps</h2>
                    <a href="https://www.crossmint.com/sample-apps" target="_blank" className="view-all-link" rel="noreferrer">
                        View All →
                    </a>
                </div>

                <div className="sample-apps-grid">
                    {sampleApps.slice(0, displayCount).map((app, index) => <a key={index} href={app.href} target="_blank" rel="noreferrer" className="sample-app-card">
                            <div className="sample-app-image-container">
                                <div className="sample-app-image">
                                    <img src={app.image} alt={app.title} />
                                </div>
                            </div>
                            <div className="sample-app-content">
                                <div className="sample-app-text">
                                    <h3 className="sample-app-title">{app.title}</h3>
                                    <p className="sample-app-description">{app.description}</p>
                                </div>
                                <div className="sample-app-tags">
                                    {app.tags.map((tag, tagIndex) => <span key={tagIndex} className="sample-app-tag">
                                            {tag}
                                        </span>)}
                                </div>
                            </div>
                        </a>)}
                </div>
            </div>
        </>;
};

export const ExploreBySolutionCards = ({showTitle = true, fullWidth = true}) => {
  const solutionsData = {
    fintech: [{
      icon: "/images/icons/onramps.svg",
      title: "Remittances",
      description: "Global instant cross-border payments",
      href: "/solutions/fintech/remittances"
    }, {
      icon: "/images/icons/building-green.svg",
      title: "Neobanks",
      description: "Build a global compliant neobank",
      href: "/solutions/fintech/neobanks"
    }, {
      icon: "/images/icons/money-check-dollar 1.svg",
      title: "Payroll",
      description: "Pay global teams faster and cheaper",
      href: "/solutions/fintech/global-payroll"
    }, {
      icon: "/images/icons/coins-green.svg",
      title: "Stablecoin Payouts",
      description: "Add instant global payouts to any product",
      href: "/solutions/fintech/stablecoin-payouts#marketplace-platforms"
    }],
    agentsAndAutomations: [{
      icon: "/images/icons/diagram-project 1.svg",
      title: "n8n",
      description: "Workflows to automate payments, money movement, and purchasing",
      href: "/solutions/n8n/overview"
    }]
  };
  return <>
            <style>{`
        .explore-by-solution-container {
          width: 100%;
        }

        .solution-section-heading {
          font-family: 'Inter', sans-serif;
          font-size: 1.5rem;
          font-weight: 500;
          max-width: 1326px;
          color: #1a1a1a;
          line-height: 1.3;
          letter-spacing: -0.02em;
          padding: 0;
          margin: 0 auto 20px auto;
        }

        .explore-by-solution-wrapper {
          width: 100%;
          background: ${fullWidth ? "#F9F9FB" : "transparent"};
          padding: ${fullWidth ? "32px 16px 32px 16px" : "0"};
          border-radius: ${fullWidth ? "20px" : "0"};
        }

        .explore-by-solution-section {
          max-width: ${fullWidth ? "1326px" : "100%"};
          margin: 0 auto;
          display: flex;
          flex-direction: column;
          gap: ${fullWidth ? "24px" : "32px"};
        }

        .solution-category {
          width: 100%;
        }

        .solution-category-heading {
          font-family: 'Inter', sans-serif;
          font-size: 0.75rem;
          font-weight: 600;
          margin-bottom: 12px;
          margin-top: 0;
          color: #67797f;
          line-height: 1.5;
          letter-spacing: 0.05em;
          text-transform: uppercase;
          padding: 0 4px;
        }

        .solution-cards-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: 12px;
        }

        .solution-card {
          display: flex;
          flex-direction: row;
          align-items: center;
          gap: 16px;
          padding: 20px;
          background: #ffffff;
          border-radius: 12px;
          text-decoration: none;
          color: inherit;
          transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
          border: 1px solid rgba(0, 0, 0, 0.06);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
        }

        .solution-card:hover {
          transform: translateY(-3px);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
          border-color: #36b37e;
        }

        .solution-icon-wrapper {
          width: 40px;
          height: 40px;
          min-width: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 10px;
          background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
          border: 1px solid rgba(0, 0, 0, 0.04);
          padding: 8px;
        }

        .solution-icon {
          width: 100%;
          height: 100%;
          display: block;
          object-fit: contain;
        }

        .solution-content {
          display: flex;
          flex-direction: column;
          gap: 4px;
          flex: 1;
          min-width: 0;
        }

        .solution-title {
          font-family: 'Inter', sans-serif;
          font-size: 1rem;
          font-weight: 600;
          margin: 0;
          color: #0f172a;
          line-height: 1.3;
          letter-spacing: -0.01em;
        }

        .solution-description {
          font-family: 'Inter', sans-serif;
          font-size: 0.875rem;
          font-weight: 400;
          margin: 0;
          color: #64748b;
          line-height: 1.5;
          letter-spacing: -0.01em;
        }

        html[data-theme='dark'] .explore-by-solution-wrapper,
        html.dark .explore-by-solution-wrapper {
          background: ${fullWidth ? "#1a1a1a" : "transparent"};
        }

        html[data-theme='dark'] .solution-section-heading,
        html.dark .solution-section-heading {
          color: #ffffff;
        }

        html[data-theme='dark'] .solution-category-heading,
        html.dark .solution-category-heading {
          color: #888;
        }

        html[data-theme='dark'] .solution-card,
        html.dark .solution-card {
          background: #242424;
          border-color: rgba(255, 255, 255, 0.06);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        }

        html[data-theme='dark'] .solution-card:hover,
        html.dark .solution-card:hover {
          background: #2e2e2e;
          border-color: #36b37e;
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
        }

        html[data-theme='dark'] .solution-icon-wrapper,
        html.dark .solution-icon-wrapper {
          background: linear-gradient(135deg, #2a2a2a 0%, #333333 100%);
          border-color: rgba(255, 255, 255, 0.06);
        }

        html[data-theme='dark'] .solution-title,
        html.dark .solution-title {
          color: #f0f0f0;
        }

        html[data-theme='dark'] .solution-description,
        html.dark .solution-description {
          color: #a0a0a0;
        }

        @media (min-width: 640px) {
          .solution-section-heading {
            font-size: 1.75rem;
            margin: 0 auto 32px auto;
            padding: 0;
          }

          .explore-by-solution-wrapper {
            padding: ${fullWidth ? "48px 24px 40px 24px" : "0"};
          }

          .solution-category-heading {
            font-size: 0.8125rem;
            margin-bottom: 15px;
          }

          .solution-cards-grid {
            gap: 12px;
          }

          .solution-card {
            gap: 16px;
            padding: 24px;
            border-radius: 14px;
          }

          .solution-icon-wrapper {
            width: 44px;
            height: 44px;
            min-width: 44px;
            padding: 9px;
          }

          .solution-title {
            font-size: 1.125rem;
          }

          .solution-description {
            font-size: 0.9375rem;
          }

          .solution-cards-grid.fintech-grid {
            grid-template-columns: repeat(2, 1fr);
          }

          .solution-cards-grid.agents-grid {
            grid-template-columns: 1fr;
          }
        }
      `}</style>

            <div className="explore-by-solution-container">
                <div className="explore-by-solution-wrapper">
                    {showTitle && <h2 className="solution-section-heading">Explore by Solution</h2>}
                    <div className="explore-by-solution-section">
                        {}
                        <div className="solution-category">
                            <h3 className="solution-category-heading">Fintech</h3>
                            <div className="solution-cards-grid fintech-grid">
                                {solutionsData.fintech.map((solution, index) => <a key={index} href={solution.href} className="solution-card">
                                        <div className="solution-icon-wrapper">
                                            <img src={solution.icon} alt="" className="solution-icon" />
                                        </div>
                                        <div className="solution-content">
                                            <h3 className="solution-title">{solution.title}</h3>
                                            <p className="solution-description">{solution.description}</p>
                                        </div>
                                    </a>)}
                            </div>
                        </div>

                        {}
                        <div className="solution-category">
                            <h3 className="solution-category-heading">Agents and Automations</h3>
                            <div className="solution-cards-grid agents-grid">
                                {solutionsData.agentsAndAutomations.map((solution, index) => <a key={index} href={solution.href} className="solution-card">
                                        <div className="solution-icon-wrapper">
                                            <img src={solution.icon} alt="" className="solution-icon" />
                                        </div>
                                        <div className="solution-content">
                                            <h3 className="solution-title">{solution.title}</h3>
                                            <p className="solution-description">{solution.description}</p>
                                        </div>
                                    </a>)}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </>;
};

export const ExploreByProductsCards = () => {
  const productsData = {
    wallets: [{
      icon: <img src="/images/icons/wallet.svg" alt="Wallet icon" style={{
        width: "100%",
        height: "100%"
      }} />,
      title: "Embedded Wallets",
      description: "Add whitelabel wallets to your site or app",
      href: "/wallets/introduction"
    }, {
      icon: <img src="/images/icons/vault.svg" alt="Vault icon" style={{
        width: "100%",
        height: "100%"
      }} />,
      title: "Treasury Wallets",
      description: "Manage and automate your treasury operations",
      href: "/wallets/concepts/treasury"
    }],
    payments: [{
      icon: <img src="/images/icons/credit-card.svg" alt="Credit card icon" style={{
        width: "100%",
        height: "100%"
      }} />,
      title: "Stablecoin Orchestration",
      description: "Move money globally, instantly",
      href: "/stablecoin-orchestration/overview"
    }, {
      icon: <img src="/images/icons/onramps.svg" alt="Onramps icon" style={{
        width: "100%",
        height: "100%"
      }} />,
      title: "Onramps",
      description: "Allow users to fund their wallets",
      href: "/onramp/overview"
    }, {
      icon: <img src="/images/icons/onramps.svg" alt="Offramps icon" style={{
        width: "100%",
        height: "100%"
      }} />,
      title: "Offramps",
      description: "Convert stablecoins into fiat",
      href: "/offramp/overview",
      isFlipped: true
    }, {
      icon: <img src="/images/icons/cart-shopping.svg" alt="Cart shopping icon" style={{
        width: "100%",
        height: "100%"
      }} />,
      title: "Token Checkout",
      description: "Enable purchases of digital assets with cards and Apple Pay",
      href: "/payments/introduction"
    }],
    others: [{
      icon: <img src="/images/icons/robot.svg" alt="Robot icon" style={{
        width: "100%",
        height: "100%"
      }} />,
      title: "Agentic Payments",
      description: "Allow agents to hold money and pay with cards and stablecoins",
      href: "/agents/overview"
    }, {
      icon: <img src="/images/icons/cube.svg" alt="Cube icon" style={{
        width: "100%",
        height: "100%"
      }} />,
      title: "Tokenization",
      description: "Mint and distribute tokens at scale",
      href: "/minting/introduction"
    }]
  };
  return <>
            <style>{`
        .explore-by-products-container {
          width: 100%;
          max-width: 1326px;
          margin: 0 auto;
        }

        .products-section-heading {
          font-family: 'Inter', sans-serif;
          font-size: 1.5rem;
          font-weight: 500;
          color: #1a1a1a;
          line-height: 1.3;
          letter-spacing: -0.02em;
          padding: 0 16px;
          margin: 0 0 20px 0;
        }

        .explore-by-products-section {
          display: flex;
          flex-direction: column;
          gap: 16px;
          background: white;
          border-radius: 16px;
          width: 100%;
          margin: 0 0 32px 0;
        }

        .product-category {
          display: flex;
          flex-direction: column;
          gap: 12px;
          padding: 16px;
          border-radius: 14px;
          position: relative;
          overflow: hidden;
        }

        .product-category.wallets-category {
          background: linear-gradient(135deg, #f0fdf4 0%, #f8fafc 100%);
          border: 1px solid rgba(54, 179, 126, 0.12);
        }

        .product-category.payments-category {
          background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
          border: 1px solid rgba(59, 130, 246, 0.12);
        }

        .product-category.others-category {
          background: linear-gradient(135deg, #faf5ff 0%, #f8fafc 100%);
          border: 1px solid rgba(139, 92, 246, 0.12);
        }

        .category-heading {
          font-family: 'Inter', sans-serif;
          font-weight: 600;
          font-size: 0.75rem;
          line-height: 1.5;
          letter-spacing: 0.05em;
          text-transform: uppercase;
          color: #67797f;
          margin: 0;
          padding: 0 4px;
        }

        .product-cards-grid {
          display: flex;
          flex-direction: column;
          gap: 12px;
          width: 100%;
        }

        .product-card {
          display: flex;
          align-items: center;
          gap: 16px;
          padding: 20px;
          background: white;
          border: 1px solid rgba(0, 0, 0, 0.06);
          border-radius: 12px;
          text-decoration: none;
          color: inherit;
          transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
          flex: 1;
          min-width: 0;
          min-height: 100px;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
        }

        .product-card:hover {
          transform: translateY(-3px);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
          border-color: #36b37e;
        }

        .product-icon-wrapper {
          width: 44px;
          height: 44px;
          min-width: 44px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 10px;
          background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
          border: 1px solid rgba(0, 0, 0, 0.04);
          padding: 8px;
        }

        .product-icon-wrapper img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }

        .product-icon-wrapper.flipped {
          transform: scaleY(-1);
        }

        .product-content {
          display: flex;
          flex-direction: column;
          gap: 4px;
          flex: 1;
          min-width: 0;
        }

        .product-title {
          font-family: 'Inter', sans-serif;
          font-weight: 600;
          font-size: 1rem;
          line-height: 1.3;
          letter-spacing: -0.01em;
          color: #0f172a;
          margin: 0;
        }

        .product-description {
          font-family: 'Inter', sans-serif;
          font-weight: 400;
          font-size: 0.875rem;
          line-height: 1.5;
          letter-spacing: -0.01em;
          color: #64748b;
          margin: 0;
        }

        .product-card-arrow {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 24px;
          height: 24px;
          min-width: 24px;
          opacity: 0;
          transition: opacity 0.2s ease, transform 0.2s ease;
          color: #36b37e;
        }

        .product-card:hover .product-card-arrow {
          opacity: 1;
          transform: translateX(2px);
        }

        /* Dark mode */
        html[data-theme='dark'] .products-section-heading,
        html.dark .products-section-heading {
          color: #ffffff;
        }

        html[data-theme='dark'] .explore-by-products-section,
        html.dark .explore-by-products-section {
          background: transparent;
        }

        html[data-theme='dark'] .product-category.wallets-category,
        html.dark .product-category.wallets-category {
          background: linear-gradient(135deg, rgba(54, 179, 126, 0.06) 0%, #1a1a1a 100%);
          border-color: rgba(54, 179, 126, 0.15);
        }

        html[data-theme='dark'] .product-category.payments-category,
        html.dark .product-category.payments-category {
          background: linear-gradient(135deg, rgba(59, 130, 246, 0.06) 0%, #1a1a1a 100%);
          border-color: rgba(59, 130, 246, 0.15);
        }

        html[data-theme='dark'] .product-category.others-category,
        html.dark .product-category.others-category {
          background: linear-gradient(135deg, rgba(139, 92, 246, 0.06) 0%, #1a1a1a 100%);
          border-color: rgba(139, 92, 246, 0.15);
        }

        html[data-theme='dark'] .product-card,
        html.dark .product-card {
          background: #242424;
          border-color: rgba(255, 255, 255, 0.06);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        }

        html[data-theme='dark'] .product-card:hover,
        html.dark .product-card:hover {
          background: #2e2e2e;
          border-color: #36b37e;
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
        }

        html[data-theme='dark'] .product-icon-wrapper,
        html.dark .product-icon-wrapper {
          background: linear-gradient(135deg, #2a2a2a 0%, #333333 100%);
          border-color: rgba(255, 255, 255, 0.06);
        }

        html[data-theme='dark'] .product-title,
        html.dark .product-title {
          color: #f0f0f0;
        }

        html[data-theme='dark'] .product-description,
        html.dark .product-description {
          color: #a0a0a0;
        }

        html[data-theme='dark'] .category-heading,
        html.dark .category-heading {
          color: #888;
        }

        @media (min-width: 640px) {
          .products-section-heading {
            font-size: 1.75rem;
            margin: 48px 0 32px 0;
            padding: 0;
          }

          .explore-by-products-section {
            margin: 0 0 40px 0;
            border-radius: 20px;
          }

          .product-category {
            padding: 20px;
            border-radius: 16px;
          }

          .category-heading {
            font-size: 0.8125rem;
          }

          .product-card {
            gap: 16px;
            padding: 24px;
            border-radius: 14px;
            min-height: 110px;
          }

          .product-icon-wrapper {
            width: 48px;
            height: 48px;
            min-width: 48px;
            padding: 10px;
          }

          .product-title {
            font-size: 1.125rem;
          }

          .product-description {
            font-size: 0.9375rem;
          }

          .product-cards-grid.wallets-grid {
            flex-direction: row;
          }

          .product-cards-grid.payments-grid {
            flex-direction: row;
            flex-wrap: wrap;
            gap: 12px;
          }

          .product-cards-grid.payments-grid .product-card {
            flex: 1;
            min-width: calc(50% - 6px);
          }

          .product-cards-grid.others-grid {
            flex-direction: row;
          }

          .product-cards-grid.others-grid .product-card {
            flex: 1;
            max-width: calc(50% - 6px);
          }

        }

        @media (min-width: 768px) {
          .explore-by-products-section {
            margin: 0 0 40px 0;
          }
        }
      `}</style>

            <div className="explore-by-products-container">
                <h2 className="products-section-heading">Explore by Product</h2>

                <div className="explore-by-products-section">
                    {}
                    <div className="product-category wallets-category">
                        <h3 className="category-heading">Wallets</h3>
                        <div className="product-cards-grid wallets-grid">
                            {productsData.wallets.map((product, index) => <a key={index} href={product.href} className="product-card">
                                    <div className="product-icon-wrapper">{product.icon}</div>
                                    <div className="product-content">
                                        <h3 className="product-title">{product.title}</h3>
                                        <p className="product-description">{product.description}</p>
                                    </div>
                                    <div className="product-card-arrow">
                                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                                            <path d="M6 3l5 5-5 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                                        </svg>
                                    </div>
                                </a>)}
                        </div>
                    </div>

                    {}
                    <div className="product-category payments-category">
                        <h3 className="category-heading">Payments</h3>
                        <div className="product-cards-grid payments-grid">
                            {productsData.payments.map((product, index) => <a key={index} href={product.href} className="product-card">
                                    <div className={`product-icon-wrapper ${product.isFlipped ? "flipped" : ""}`}>
                                        {product.icon}
                                    </div>
                                    <div className="product-content">
                                        <h3 className="product-title">{product.title}</h3>
                                        <p className="product-description">{product.description}</p>
                                    </div>
                                    <div className="product-card-arrow">
                                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                                            <path d="M6 3l5 5-5 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                                        </svg>
                                    </div>
                                </a>)}
                        </div>
                    </div>

                    {}
                    <div className="product-category others-category">
                        <h3 className="category-heading">Others</h3>
                        <div className="product-cards-grid others-grid">
                            {productsData.others.map((product, index) => <a key={index} href={product.href} className="product-card">
                                    <div className="product-icon-wrapper">{product.icon}</div>
                                    <div className="product-content">
                                        <h3 className="product-title">{product.title}</h3>
                                        <p className="product-description">{product.description}</p>
                                    </div>
                                    <div className="product-card-arrow">
                                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                                            <path d="M6 3l5 5-5 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                                        </svg>
                                    </div>
                                </a>)}
                        </div>
                    </div>
                </div>
            </div>
        </>;
};

export const GetStartedCards = () => {
  const cards = [{
    icon: <img src="/images/icons/cpu-chip.svg" alt="CPU chip icon" style={{
      width: "100%",
      height: "100%"
    }} />,
    title: "Platform Overview",
    description: "Learn more about the platform, supported blockchains, and how the modules fit together.",
    href: "/introduction/about-crossmint",
    variant: "minimal"
  }, {
    icon: <img src="/images/icons/window.svg" alt="Window icon" style={{
      width: "100%",
      height: "100%"
    }} />,
    title: "Create an Account",
    description: "Get started by setting up a Crossmint account and getting your API keys.",
    href: "/introduction/getting-started",
    variant: "minimal-green"
  }, {
    icon: <img src="/images/icons/message-smile-square.svg" alt="Message icon" style={{
      width: "100%",
      height: "100%"
    }} />,
    title: "AI Assistants",
    description: "Integrate Crossmint faster by ingesting docs into your favorite AI coding tool.",
    href: "/introduction/ai-assistants",
    variant: "minimal-purple"
  }];
  return <>
            <style>{`
        .get-started-section {
          margin: 32px 8px 32px 8px;
          max-width: 1326px;
          padding: 0 8px;
        }

        .get-started-heading {
          font-size: 1.5rem;
          font-weight: 500;
          margin-bottom: 20px;
          color: #1a1a1a;
        }

        html[data-theme='dark'] .get-started-heading,
        html.dark .get-started-heading {
          color: #ffffff;
        }

        .cards-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: 16px;
        }

        /* Variant tokens */
        .get-started-card.card-minimal,
        .get-started-card.card-minimal-green,
        .get-started-card.card-minimal-purple {
          --card-bg-start: rgba(255, 255, 255, 1);
          --card-bg-end: rgba(255, 255, 255, 1);
          --card-border: rgba(0, 0, 0, 0.08);
          --card-border-hover: rgba(0, 0, 0, 0.12);
        }

        .get-started-card.card-blue {
          --card-bg-start: rgba(173, 216, 230, 0.3);
          --card-bg-end: rgba(173, 216, 230, 0.1);
          --card-border: rgba(43, 137, 194, 0.8);
          --card-border-hover: rgba(43, 137, 194, 1);
        }

        .get-started-card.card-green {
          --card-bg-start: rgba(144, 238, 144, 0.3);
          --card-bg-end: rgba(144, 238, 144, 0.1);
          --card-border: rgba(76, 175, 80, 0.8);
          --card-border-hover: rgba(76, 175, 80, 1);
        }

        .get-started-card.card-purple {
          --card-bg-start: rgba(221, 160, 221, 0.3);
          --card-bg-end: rgba(221, 160, 221, 0.1);
          --card-border: rgba(140, 99, 170, 0.8);
          --card-border-hover: rgba(140, 99, 170, 1);
        }

        /* Card styles */
        .get-started-card {
          position: relative;
          display: flex;
          flex-direction: column;
          gap: 4px;
          padding: 20px 20px 24px 20px;
          border-radius: 12px;
          text-decoration: none;
          color: inherit;
          transition: all 0.3s ease;
          overflow: hidden;
          border: 1.5px solid var(--card-border, #2f8cff);
          background: linear-gradient(135deg, var(--card-bg-start) 0%, var(--card-bg-end) 100%);
          box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
          min-height: 220px;
        }

        .get-started-card::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 40%),
            linear-gradient(135deg, var(--card-bg-start) 0%, var(--card-bg-end) 100%);
          opacity: 1;
          z-index: -1;
        }

        .get-started-card::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-image: url("data:image/svg+xml,%3Csvg width='400' height='260' viewBox='0 0 400 260' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 180 Q100 120 200 170 T400 140' fill='none' stroke='%23ffffff' stroke-width='1' stroke-opacity='0.4'/%3E%3Cpath d='M0 210 Q120 150 240 200 T400 190' fill='none' stroke='%23ffffff' stroke-width='1' stroke-opacity='0.25'/%3E%3Cpath d='M0 150 Q80 90 180 140 T400 120' fill='none' stroke='%23ffffff' stroke-width='1' stroke-opacity='0.2'/%3E%3C/svg%3E");
          z-index: -1;
        }

        /* Minimal variant specific styles */
        .get-started-card.card-minimal,
        .get-started-card.card-minimal-green,
        .get-started-card.card-minimal-purple {
          padding: 16px;
          box-shadow: none;
          min-height: 200px;
          background: white;
          justify-content: space-between;
        }

        .get-started-card.card-minimal::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: radial-gradient(100% 171.44% at 89.5% 0%, rgba(78, 194, 248, 0.2) 0%, rgba(255, 255, 255, 0.2) 68.75%);
          opacity: 1;
          z-index: 0;
          pointer-events: none;
        }

        .get-started-card.card-minimal::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-image: url("/images/patterns/lines-1.png");
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
          z-index: 0;
          pointer-events: none;
        }

        .get-started-card.card-minimal:hover {
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
          border-color: #36b37e;
        }

        .get-started-card.card-minimal .card-icon {
          background: transparent;
          border: none;
          margin-bottom: 16px;
          padding: 0;
          position: relative;
          z-index: 1;
        }

        .get-started-card.card-minimal .card-title {
          font-size: 1.25rem;
          font-weight: 500;
          margin: 0;
          line-height: 1.2;
          letter-spacing: -0.02em;
          position: relative;
          z-index: 1;
        }

        .get-started-card.card-minimal .card-description {
          font-size: 0.8125rem;
          line-height: 1.4;
          opacity: 0.6;
          letter-spacing: -0.01em;
          position: relative;
          z-index: 1;
        }

        /* Minimal Green variant specific styles */
        .get-started-card.card-minimal-green::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: radial-gradient(100% 171.44% at 89.5% 0%, rgba(78, 248, 106, 0.2) 0%, rgba(255, 255, 255, 0.2) 68.75%);
          opacity: 1;
          z-index: 0;
          pointer-events: none;
        }

        .get-started-card.card-minimal-green::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-image: url("/images/patterns/grid-2.png");
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
          z-index: 0;
          pointer-events: none;
        }

        .get-started-card.card-minimal-green .card-icon {
          background: transparent;
          border: none;
          margin-bottom: 16px;
          padding: 0;
          position: relative;
          z-index: 1;
        }

        .get-started-card.card-minimal-green .card-title {
          font-size: 1.25rem;
          font-weight: 500;
          margin: 0;
          line-height: 1.2;
          letter-spacing: -0.02em;
          position: relative;
          z-index: 1;
        }

        .get-started-card.card-minimal-green .card-description {
          font-size: 0.875rem;
          line-height: 1.4;
          opacity: 0.6;
          letter-spacing: -0.02em;
          position: relative;
          z-index: 1;
        }

        .get-started-card.card-minimal-green:hover {
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
          border-color: #36b37e;
        }

        /* Minimal Purple variant specific styles */
        .get-started-card.card-minimal-purple::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: radial-gradient(100% 171.44% at 89.5% 0%, rgba(136, 63, 253, 0.2) 0%, rgba(81, 38, 151, 0) 100%);
          opacity: 1;
          z-index: 0;
          pointer-events: none;
        }

        .get-started-card.card-minimal-purple::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-image: url("/images/patterns/lines-2.png");
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
          z-index: 0;
          pointer-events: none;
        }

        .get-started-card.card-minimal-purple .card-icon {
          background: transparent;
          border: none;
          margin-bottom: 16px;
          padding: 0;
          position: relative;
          z-index: 1;
        }

        .get-started-card.card-minimal-purple .card-title {
          font-size: 1.25rem;
          font-weight: 500;
          margin: 0;
          line-height: 1.2;
          letter-spacing: -0.02em;
          position: relative;
          z-index: 1;
        }

        .get-started-card.card-minimal-purple .card-description {
          font-size: 0.875rem;
          line-height: 1.4;
          opacity: 0.6;
          letter-spacing: -0.02em;
          position: relative;
          z-index: 1;
        }

        .get-started-card.card-minimal-purple:hover {
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
          border-color: #36b37e;
        }

        .get-started-card:hover {
          transform: translateY(-3px);
          box-shadow: 0 14px 26px rgba(0, 0, 0, 0.12);
          border-color: #36b37e;
        }

        .card-icon {
          width: 40px;
          height: 40px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          border-radius: 10px;
          background: rgba(255, 255, 255, 0.6);
          border: 1px solid rgba(0, 0, 0, 0.05);
          color: #9ca3af;
          margin-bottom: 52px;
        }

        .card-text-content {
          display: flex;
          flex-direction: column;
          gap: 4px;
          position: relative;
          z-index: 1;
        }

        .card-title {
          font-size: 1.2rem;
          font-weight: 700;
          margin: 0 0 2px 0;
          color: #0f172a;
        }

        .card-description {
          font-size: 0.95rem;
          line-height: 1.5;
          margin: 0;
          color: #4b5563;
        }

        html[data-theme='dark'] .get-started-card,
        html.dark .get-started-card {
          border-color: rgba(255, 255, 255, 0.2);
          box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4);
        }

        html[data-theme='dark'] .get-started-card:hover,
        html.dark .get-started-card:hover {
          border-color: #36b37e;
        }

        html[data-theme='dark'] .card-title,
        html.dark .card-title {
          color: #f0f0f0;
        }

        html[data-theme='dark'] .card-description,
        html.dark .card-description {
          color: #b0b0b0;
        }

        html[data-theme='dark'] .card-icon,
        html.dark .card-icon {
          background: rgba(255, 255, 255, 0.1);
          color: #d1d5db;
          border-color: rgba(255, 255, 255, 0.05);
        }

        /* Dark mode for minimal variant */
        html[data-theme='dark'] .get-started-card.card-minimal,
        html.dark .get-started-card.card-minimal,
        html[data-theme='dark'] .get-started-card.card-minimal-green,
        html.dark .get-started-card.card-minimal-green,
        html[data-theme='dark'] .get-started-card.card-minimal-purple,
        html.dark .get-started-card.card-minimal-purple {
          --card-bg-start: rgba(26, 26, 26, 1);
          --card-bg-end: rgba(26, 26, 26, 1);
          --card-border: rgba(255, 255, 255, 0.1);
          --card-border-hover: rgba(255, 255, 255, 0.15);
          background: #1a1a1a;
        }

        html[data-theme='dark'] .get-started-card.card-minimal::before,
        html.dark .get-started-card.card-minimal::before {
          background: radial-gradient(100% 171.44% at 89.5% 0%, rgba(78, 194, 248, 0.15) 0%, rgba(26, 26, 26, 0.2) 68.75%);
        }

        html[data-theme='dark'] .get-started-card.card-minimal-green::before,
        html.dark .get-started-card.card-minimal-green::before {
          background: radial-gradient(100% 171.44% at 89.5% 0%, rgba(78, 248, 106, 0.15) 0%, rgba(26, 26, 26, 0.2) 68.75%);
        }

        html[data-theme='dark'] .get-started-card.card-minimal-purple::before,
        html.dark .get-started-card.card-minimal-purple::before {
          background: radial-gradient(100% 171.44% at 89.5% 0%, rgba(136, 63, 253, 0.15) 0%, rgba(81, 38, 151, 0) 100%);
        }

        html[data-theme='dark'] .get-started-card.card-minimal-purple::after,
        html.dark .get-started-card.card-minimal-purple::after {
          opacity: 0.7;
        }

        html[data-theme='dark'] .get-started-card.card-minimal .card-title,
        html.dark .get-started-card.card-minimal .card-title,
        html[data-theme='dark'] .get-started-card.card-minimal-green .card-title,
        html.dark .get-started-card.card-minimal-green .card-title,
        html[data-theme='dark'] .get-started-card.card-minimal-purple .card-title,
        html.dark .get-started-card.card-minimal-purple .card-title {
          color: #ffffff;
        }

        html[data-theme='dark'] .get-started-card.card-minimal .card-description,
        html.dark .get-started-card.card-minimal .card-description,
        html[data-theme='dark'] .get-started-card.card-minimal-green .card-description,
        html.dark .get-started-card.card-minimal-green .card-description,
        html[data-theme='dark'] .get-started-card.card-minimal-purple .card-description,
        html.dark .get-started-card.card-minimal-purple .card-description {
          color: #ffffff;
          opacity: 0.6;
        }

        @media (min-width: 640px) {
          .get-started-section {
            margin: 48px 16px 40px 16px;
            padding: 0;
          }

          .get-started-heading {
            font-size: 1.75rem;
            margin-bottom: 24px;
          }

          .cards-grid {
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
          }

          .get-started-card.card-minimal .card-title {
            font-size: 1.25rem;
          }

          .get-started-card.card-minimal .card-description {
            font-size: 0.875rem;
          }
        }

        @media (min-width: 768px) {
          .get-started-section {
            margin: 48px auto 40px auto;
          }

          .cards-grid {
            gap: 24px;
          }
        }
      `}</style>

            <div className="get-started-section">
                <h2 className="get-started-heading">Get Started</h2>
                <div className="cards-grid">
                    {cards.map((card, index) => <a key={index} href={card.href} className={`get-started-card ${card.variant ? `card-${card.variant}` : ""}`}>
                            <div className="card-icon">{card.icon}</div>
                            <div className="card-text-content">
                                <h3 className="card-title">{card.title}</h3>
                                <p className="card-description">{card.description}</p>
                            </div>
                        </a>)}
                </div>
            </div>
        </>;
};

export const Hero = () => {
  const handleSearchClick = () => {
    const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
    const event = new KeyboardEvent("keydown", {
      key: "k",
      code: "KeyK",
      keyCode: 75,
      which: 75,
      metaKey: isMac,
      ctrlKey: !isMac,
      bubbles: true,
      cancelable: true
    });
    document.dispatchEvent(event);
  };
  const handleKeyDown = e => {
    if (e.key === "Enter") {
      handleSearchClick();
    }
  };
  const imgPattern = "/images/patterns/pattern.png";
  const imgGrid = "/images/patterns/grid.png";
  return <>
            <style>{`
        /* Hide tab highlighting on landing page */
        .nav-tabs-item > div {
          display: none !important;
        }

        .nav-tabs-item {
          text-shadow: none !important;
          font-weight: 400 !important;
        }

        .hero-container {
          position: relative;
          background: transparent;
          border: 1px solid rgba(0, 0, 0, 0.07);
          border-radius: 16px;
          padding: 24px 12px;
          margin: 16px 8px 32px 8px;
          text-align: center;
          max-width: 1326px;
          overflow: hidden;
          height: 321px;
        }

        .hero-gradient {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          pointer-events: none;
          z-index: 0;
          background: radial-gradient(ellipse at center top, rgba(0, 199, 104, 0.08) 0%, rgba(0, 199, 104, 0.02) 40%, rgba(248, 248, 248, 0.5) 100%);
          border-radius: 16px;
        }

        .hero-pattern {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          pointer-events: none;
          z-index: 1;
        }

        .hero-pattern img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .hero-grid {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          pointer-events: none;
          z-index: 2;
        }

        .hero-grid img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .hero-content {
          position: relative;
          z-index: 3;
        }

        .hero-title {
          font-size: 1.75rem;
          font-weight: 400;
          margin-bottom: 12px;
          line-height: normal;
          font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
          color: #20343e;
          letter-spacing: -0.035em;
        }

        .hero-title-highlight {
          color: #00c768;
          font-weight: 500;
        }

        .hero-description {
          font-size: 0.9375rem;
          font-weight: 400;
          color: #67797f;
          margin-bottom: 32px;
          max-width: 595px;
          width: 595px;
          margin-left: auto;
          margin-right: auto;
          line-height: normal;
          padding: 0 8px;
          letter-spacing: -0.01em;
        }

        .search-container {
          max-width: 443px;
          margin: 32px auto 0 auto;
          padding: 0 8px;
          position: relative;
        }

        .search-input-wrapper {
          display: flex;
          align-items: center;
          background: white;
          border: 1px solid #d0d5dd;
          border-radius: 12px;
          padding: 14px;
          cursor: pointer;
          transition: all 0.2s ease;
          gap: 8px;
        }

        .search-input-wrapper:hover {
          border-color: #00c768;
          box-shadow: 0 0 0 1px #00c768;
        }

        .search-input-wrapper:focus-within {
          border-color: #00c768;
          box-shadow: 0 0 0 1px #00c768;
        }

        .search-icon {
          width: 20px;
          height: 20px;
          flex-shrink: 0;
          color: #59797f;
        }

        .search-input {
          flex: 1;
          border: none;
          outline: none;
          background: transparent;
          font-size: 1rem;
          color: #20343e;
          font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
          min-width: 0;
          letter-spacing: -0.02em;
          line-height: 24px;
        }

        .search-input::placeholder {
          color: #67797f;
        }

        /* Dark mode styles */
        html[data-theme='dark'] .hero-container,
        html.dark .hero-container {
          background: transparent;
          border-color: rgba(255, 255, 255, 0.08);
        }

        html[data-theme='dark'] .hero-gradient,
        html.dark .hero-gradient {
          background: radial-gradient(ellipse at center top, rgba(0, 199, 104, 0.15) 0%, rgba(0, 199, 104, 0.05) 40%, rgba(26, 26, 26, 0.6) 100%);
        }

        html[data-theme='dark'] .hero-pattern,
        html.dark .hero-pattern {
          opacity: 0.3;
        }

        html[data-theme='dark'] .hero-grid-vector1,
        html.dark .hero-grid-vector1,
        html[data-theme='dark'] .hero-grid-vector2,
        html.dark .hero-grid-vector2 {
          opacity: 0.15;
        }

        html[data-theme='dark'] .hero-title,
        html.dark .hero-title {
          color: #ffffff;
        }

        html[data-theme='dark'] .hero-title-highlight,
        html.dark .hero-title-highlight {
          color: #00c768;
        }

        html[data-theme='dark'] .hero-description,
        html.dark .hero-description {
          color: #9ca3af;
        }

        html[data-theme='dark'] .search-input-wrapper,
        html.dark .search-input-wrapper {
          background: #242424;
          border-color: rgba(255, 255, 255, 0.1);
        }

        html[data-theme='dark'] .search-input-wrapper:hover,
        html.dark .search-input-wrapper:hover {
          border-color: #00c768;
          box-shadow: 0 0 0 1px #00c768;
        }

        html[data-theme='dark'] .search-input-wrapper:focus-within,
        html.dark .search-input-wrapper:focus-within {
          border-color: #00c768;
          box-shadow: 0 0 0 1px #00c768;
        }

        html[data-theme='dark'] .search-icon,
        html.dark .search-icon {
          color: #9ca3af;
        }

        html[data-theme='dark'] .search-input,
        html.dark .search-input {
          color: #ffffff;
        }

        html[data-theme='dark'] .search-input::placeholder,
        html.dark .search-input::placeholder {
          color: #6b7280;
        }

        @media (min-width: 640px) {
          .hero-container {
            padding: 40px 24px;
            margin: 20px 16px 40px 16px;
            border-radius: 16px;
            height: auto;
            min-height: 321px;
          }

          .hero-title {
            font-size: 2.5rem;
            margin-bottom: 16px;
            letter-spacing: -0.02em;
          }

          .hero-description {
            font-size: 1.125rem;
            padding: 0;
            margin-bottom: 32px;
          }

          .search-container {
            max-width: 443px;
            padding: 0;
          }

          .search-input-wrapper {
            padding: 14px;
            border-radius: 12px;
          }

          .search-input {
            font-size: 1rem;
          }
        }

        @media (min-width: 768px) {
          .hero-container {
            padding: 60px 40px;
            margin: 20px auto 40px auto;
          }

          .hero-title {
            font-size: 3rem;
            letter-spacing: -0.02em;
          }
        }
      `}</style>

            <div className="hero-container">
                {}
                <div className="hero-gradient"></div>

                {}
                <div className="hero-pattern">
                    <img src={imgPattern} alt="" />
                </div>

                {}
                <div className="hero-grid">
                    <img src={imgGrid} alt="" />
                </div>

                {}
                <div className="hero-content">
                    <h1 className="hero-title">
                        Build with <span className="hero-title-highlight">Crossmint</span>
                    </h1>

                    <p className="hero-description">
                        Crossmint is an all-in-one platform to integrate stablecoins and wallets on your product via
                        simple compliant APIs.
                    </p>

                    <div className="search-container">
                        <div className="search-input-wrapper" onClick={handleSearchClick}>
                            <svg className="search-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth="2">
                                <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                            </svg>

                            <input type="text" placeholder="I'm looking for..." onKeyDown={handleKeyDown} className="search-input" />
                        </div>
                    </div>
                </div>
            </div>
        </>;
};

<Hero />

<GetStartedCards />

<ExploreByProductsCards />

<ExploreBySolutionCards />

<SampleApps />

<OtherResources />

<Footer />