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

# Seamless Developer Portal

export const WelcomeSectionHeader = ({children}) => {
  return <div className="text-black dark:text-white relative z-10 flex flex-col md:flex-row gap-6">
      <h2 className="text-xl md:text-3xl font-bold mb-8 mt-16 mx-auto text-center">
        <span>{children}</span>
      </h2>
    </div>;
};

export const WelcomeHero = () => {
  const hexToRgb = hex => {
    const result = (/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i).exec(hex);
    return result ? {
      r: parseInt(result[1], 16),
      g: parseInt(result[2], 16),
      b: parseInt(result[3], 16)
    } : {
      r: 255,
      g: 255,
      b: 255
    };
  };
  const getLuminance = (r, g, b) => {
    return (0.299 * r + 0.587 * g + 0.114 * b) / 255;
  };
  const color = hexToRgb("#004550");
  const luminance = getLuminance(color.r, color.g, color.b);
  const [gradientValues] = useState(() => Array.from({
    length: 12
  }, () => ({
    rotation: Math.random() > 0.5 ? 45 : 225,
    x: Math.random() * 100,
    y: Math.random() * 100,
    direction: Math.random() > 0.5 ? 1 : -1
  })));
  const handleClick = () => {
    const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
    const event = new KeyboardEvent("keydown", {
      key: "k",
      code: "KeyK",
      metaKey: isMac,
      ctrlKey: !isMac,
      bubbles: true
    });
    document.dispatchEvent(event);
  };
  return <>
      <div className="pt-8"></div>
      <div className="card block font-normal group relative rounded-2xl w-full" style={{
    backgroundPosition: "center",
    backgroundSize: "cover",
    backgroundRepeat: "no-repeat",
    backgroundImage: (() => {
      const gradients = [];
      for (let i = 0; i < gradientValues.length; i++) {
        const {rotation, x, y} = gradientValues[i];
        const direction = gradientValues[i].direction === 1 ? "" : "-";
        gradients.push(`conic-gradient(from ${direction}${rotation}deg at ${x}% ${y}%,
                  rgba(${luminance > 0.5 ? "0,0,0" : "255,255,255"}, 0.1) 0%,
                  rgba(${color.r}, ${color.g}, ${color.b}, 0.1) 50%)`);
      }
      gradients.push(`url('/public/images/sigmund.jpg')`);
      return gradients.join(", ");
    })()
  }}>
        <div className="text-center px-4 py-16 max-w-3xl mx-auto">
          <h1 className="relative text-4xl md:text-4xl font-bold pb-8">
            <span className="hero-heading-color pb-2 inline-block">
              Build with
            </span>
            <br />
            <span className="hero-heading hero-heading-color">Seamless OS</span>
          </h1>

          <p className="text-lg md:text-xl text-white mb-6">
            Learn how to get started with the Seamless Developer Portal.
          </p>
          <div className="pt-8 flex justify-center">
            <button onClick={handleClick} className="inline-flex items-center gap-2 px-6 py-3 bg-primary-light text-primary font-medium rounded-full transition-colors duration-200">
              Ask Docs
              <Icon icon="book-sparkles" iconType="light" size={24} color="currentColor" />
            </button>
          </div>
        </div>
      </div>
    </>;
};

export const SetMousePositionVars = () => {
  useEffect(() => {
    const syncPointer = ({x, y}) => {
      document.documentElement.style.setProperty("--x", x.toFixed(2));
      document.documentElement.style.setProperty("--xp", (x / window.innerWidth).toFixed(2));
      document.documentElement.style.setProperty("--y", y.toFixed(2));
      document.documentElement.style.setProperty("--yp", (y / window.innerHeight).toFixed(2));
    };
    document.body.addEventListener("pointermove", syncPointer);
    return () => {
      document.body.removeEventListener("pointermove", syncPointer);
    };
  }, []);
  return null;
};

<SetMousePositionVars />

<div class="max-w-8xl mx-auto relative px-12">
  <WelcomeHero />
</div>

<div className="px-12 max-w-6xl mx-auto mb-32">
  <WelcomeSectionHeader>Seamless Developer Portal</WelcomeSectionHeader>

  <Columns cols={3}>
    <Card icon="rocket" title="Get started" href="/api-reference/get-started" cta="Take me to the developer Guide">
      Launch your mobile operator with Seamless OS - the `#teltech` platform
      that makes it playfully easy and scalable.
    </Card>

    <Card icon="list-tree" title="Choose your integration" href="/api-reference/choose-your-integration" cta="Take me to the integration guide">
      Select the Seamless OS API integration style that best fits your business
      model and technical ownership.
    </Card>

    <Card icon="code" title="API reference" href="/api-reference/" cta="Take me to the API reference">
      Explore our comprehensive API documentation with endpoints for billing,
      subscriptions, payments, and telecommunications services.
    </Card>
  </Columns>
</div>