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

# Contact

> Get in touch with Wokelo

export const MobileLogos = () => {
  const [isDark, setIsDark] = useState(typeof document !== "undefined" && document.documentElement.classList.contains("dark"));
  useEffect(() => {
    if (typeof document === "undefined") return;
    const observer = new MutationObserver(() => {
      setIsDark(document.documentElement.classList.contains("dark"));
    });
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["class"]
    });
    return () => observer.disconnect();
  }, []);
  const row1 = [{
    name: "B Capital",
    dark: "/images/hero-carousel/bcapital-white.svg",
    light: "/images/hero-carousel/bcapital-dark.svg",
    w: 150,
    h: 30
  }, {
    name: "Premji Invest",
    dark: "/images/hero-carousel/premji-white.svg",
    light: "/images/hero-carousel/premji-dark.svg",
    w: 175,
    h: 36
  }];
  const row2 = [{
    name: "Bain & Company",
    dark: "/images/hero-carousel/Bain-white.svg",
    light: "/images/hero-carousel/Bain-dark.svg",
    w: 122,
    h: 32
  }, {
    name: "KPMG",
    dark: "/images/hero-carousel/kpmg-white.svg",
    light: "/images/hero-carousel/kpmg-dark.svg",
    w: 66,
    h: 42
  }, {
    name: "The Heritage Group",
    dark: "/images/hero-carousel/heritage-group-white.svg",
    light: "/images/hero-carousel/heritage-group-dark.svg",
    w: 56,
    h: 42
  }];
  const row3 = [{
    name: "Untapped",
    dark: "/images/hero-carousel/untapped-white.svg",
    light: "/images/hero-carousel/untapped-dark.svg",
    w: 113,
    h: 25
  }, {
    name: "Finstrat Management",
    dark: "/images/hero-carousel/finstrat-management-white.svg",
    light: "/images/hero-carousel/finstrat-management-dark.svg",
    w: 123,
    h: 32
  }];
  const rowStyle = {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    gap: "32px",
    width: "100%"
  };
  const imgStyle = (w, h) => ({
    width: `${w}px`,
    height: `${h}px`,
    objectFit: "contain",
    flexShrink: 0,
    transition: "opacity 0.2s ease"
  });
  const renderRow = logos => logos.map(logo => <img key={logo.name} src={isDark ? logo.dark : logo.light} alt={logo.name} loading="eager" style={imgStyle(logo.w, logo.h)} />);
  return <div style={{
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    gap: "28px",
    width: "100%"
  }}>
      <div style={rowStyle}>{renderRow(row1)}</div>
      <div style={rowStyle}>{renderRow(row2)}</div>
      <div style={rowStyle}>{renderRow(row3)}</div>
    </div>;
};

export const LogoGridv2 = () => {
  const [isDark, setIsDark] = useState(typeof document !== "undefined" && document.documentElement.classList.contains("dark"));
  useEffect(() => {
    if (typeof document === "undefined") return;
    const observer = new MutationObserver(() => {
      setIsDark(document.documentElement.classList.contains("dark"));
    });
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["class"]
    });
    return () => observer.disconnect();
  }, []);
  const row1 = [{
    name: "Bain & Company",
    dark: "/images/hero-carousel/Bain-white.svg",
    light: "/images/hero-carousel/Bain-dark.svg",
    w: 135,
    h: 40
  }, {
    name: "B Capital",
    dark: "/images/hero-carousel/bcapital-white.svg",
    light: "/images/hero-carousel/bcapital-dark.svg",
    w: 164,
    h: 42
  }, {
    name: "Premji Invest",
    dark: "/images/hero-carousel/premji-white.svg",
    light: "/images/hero-carousel/premji-dark.svg",
    w: 234,
    h: 50
  }];
  const row2 = [{
    name: "KPMG",
    dark: "/images/hero-carousel/kpmg-white.svg",
    light: "/images/hero-carousel/kpmg-dark.svg",
    w: 102,
    h: 58
  }, {
    name: "Untapped",
    dark: "/images/hero-carousel/untapped-white.svg",
    light: "/images/hero-carousel/untapped-dark.svg",
    w: 150,
    h: 32
  }, {
    name: "Finstrat Management",
    dark: "/images/hero-carousel/finstrat-management-white.svg",
    light: "/images/hero-carousel/finstrat-management-dark.svg",
    w: 209,
    h: 58
  }, {
    name: "The Heritage Group",
    dark: "/images/hero-carousel/heritage-group-white.svg",
    light: "/images/hero-carousel/heritage-group-dark.svg",
    w: 86,
    h: 58
  }];
  const rowStyle = {
    display: "flex",
    alignItems: "center",
    justifyContent: "flex-start",
    gap: "48px",
    width: "100%"
  };
  return <div className="logov2-wrap" style={{
    display: "flex",
    flexDirection: "column",
    alignItems: "flex-start",
    gap: "30px",
    width: "100%"
  }}>
      <style>{`
        /* Scale logos down on smaller desktops so they never overflow the left column */
        @media (min-width: 1024px) and (max-width: 1299px) {
          .logov2-wrap { zoom: 0.68; }
        }
        @media (min-width: 1300px) and (max-width: 1499px) {
          .logov2-wrap { zoom: 0.78; }
        }
        @media (min-width: 1500px) and (max-width: 1699px) {
          .logov2-wrap { zoom: 0.88; }
        }
      `}</style>
      {}
      <div style={rowStyle}>
        {row1.map(logo => <img key={logo.name} src={isDark ? logo.dark : logo.light} alt={logo.name} loading="eager" style={{
    width: `${logo.w}px`,
    height: `${logo.h}px`,
    objectFit: "contain",
    flexShrink: 0,
    transition: "opacity 0.2s ease"
  }} />)}
      </div>

      {}
      <div style={rowStyle}>
        {row2.map(logo => <img key={logo.name} src={isDark ? logo.dark : logo.light} alt={logo.name} loading="eager" style={{
    width: `${logo.w}px`,
    height: `${logo.h}px`,
    objectFit: "contain",
    flexShrink: 0,
    transition: "opacity 0.2s ease"
  }} />)}
      </div>
    </div>;
};

export const LogoTicker = ({children, className = ""}) => {
  return <div className={className} style={{
    width: "100%",
    maxWidth: "1800px",
    margin: "0 auto",
    paddingTop: "35px",
    paddingBottom: "35px",
    paddingLeft: "40px",
    paddingRight: "40px",
    boxSizing: "border-box",
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    gap: "28px"
  }}>
      {children}
    </div>;
};

export const ContactForm = ({onThankYouStatusChange}) => {
  const industryList = ["Academia", "Accelerator / Incubator", "Asset Manager", "Corporate Strategy", "Corporate Venture Capital", "Family Office", "Fund of Funds", "Hedge Funds", "Investment Banking", "Management Consulting", "Private Equity", "Startup", "Venture Capital (pre-seed / seed)", "Venture Capital (series A+)", "Venture Debt", "Others"];
  const inputStyle = error => ({
    width: "100%",
    height: "48px",
    marginBottom: "12px",
    padding: "12px",
    borderRadius: "8px",
    background: "#21262D",
    color: "white",
    border: error ? "2px solid #ef4444" : "none",
    outline: "none"
  });
  const Error = ({text}) => <div style={{
    color: "#ef4444",
    fontSize: "12px",
    marginBottom: "8px"
  }}>
    {text}
  </div>;
  const [formData, setFormData] = useState({
    email: "",
    name: "",
    company: "",
    industry: "",
    useCase: ""
  });
  const [errors, setErrors] = useState({});
  const [isLoading, setIsLoading] = useState(false);
  const [submitted, setSubmitted] = useState(false);
  const validate = () => {
    const err = {};
    if (!formData.email) err.email = "Email is required"; else if (!(/^[^\s@]+@[^\s@]+\.[^\s@]+$/).test(formData.email)) err.email = "Invalid email";
    if (!formData.name) err.name = "Name is required";
    if (!formData.company) err.company = "Company is required";
    setErrors(err);
    return Object.keys(err).length === 0;
  };
  const handleChange = e => {
    const {name, value} = e.target;
    setFormData(p => ({
      ...p,
      [name]: value
    }));
  };
  const handleSubmit = async e => {
    e.preventDefault();
    if (!validate()) return;
    setIsLoading(true);
    const payload = {
      username: formData.email,
      firstname: formData.name.split(" ")[0],
      lastname: formData.name.split(" ").slice(1).join(" "),
      organisation: formData.company,
      industry: formData.industry,
      usecase: formData.useCase,
      source: "contact-page"
    };
    try {
      const res = await fetch("https://request-access.azurewebsites.net/api/create-or-update-deal/", {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify(payload)
      });
      if (!res.ok) throw new Error();
      setSubmitted(true);
      onThankYouStatusChange?.(true);
      setFormData({
        email: "",
        name: "",
        company: "",
        industry: "",
        useCase: ""
      });
    } catch {
      setErrors({
        submit: "Something went wrong. Try again."
      });
    } finally {
      setIsLoading(false);
    }
  };
  if (submitted) {
    return <div className="text-center" style={{
      textAlign: "center",
      padding: "60px 20px"
    }}>
        <h3 className="text-gray-900 dark:text-white">Thank you!</h3>
        <p className="text-gray-600 dark:text-gray-300">
          We'll reach out shortly.
        </p>
      </div>;
  }
  return <div className="md:px-10 md:py-11 md:bg-gray-100 md:dark:bg-[#181B20] md:border-[0.5px] md:border-gray-200 dark:md:border-[#494F56] rounded-[12px]">
      <form onSubmit={handleSubmit}>
        {}
        <div className="mb-3 md:mb-5">
          <input name="email" type="email" placeholder="Business email address *" value={formData.email} onChange={handleChange} required disabled={isLoading} className={`bg-white dark:bg-[#21262D] h-12 w-full rounded-lg px-3 py-4 text-base md:text-sm text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-muted-foreground shadow-sm dark:shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 ${errors.email ? 'ring-2 ring-red-500' : ''}`} />
          {errors.email && <div style={{
    color: "#ef4444",
    fontSize: "12px",
    marginTop: "4px"
  }}>
              {errors.email}
            </div>}
        </div>

        {}
        <div className="mb-3 md:mb-5">
          <input name="name" placeholder="Name *" value={formData.name} onChange={handleChange} required disabled={isLoading} className={`bg-white dark:bg-[#21262D] h-12 w-full rounded-lg px-3 py-4 text-base md:text-sm text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-muted-foreground shadow-sm dark:shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 ${errors.name ? 'ring-2 ring-red-500' : ''}`} />
          {errors.name && <div style={{
    color: "#ef4444",
    fontSize: "12px",
    marginTop: "4px"
  }}>
              {errors.name}
            </div>}
        </div>

        {}
        <div className="mb-3 md:mb-5">
          <input name="company" placeholder="Company name *" value={formData.company} onChange={handleChange} required disabled={isLoading} className={`bg-white dark:bg-[#21262D] h-12 w-full rounded-lg px-3 py-4 text-base md:text-sm text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-muted-foreground shadow-sm dark:shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 ${errors.company ? 'ring-2 ring-red-500' : ''}`} />
          {errors.company && <div style={{
    color: "#ef4444",
    fontSize: "12px",
    marginTop: "4px"
  }}>
              {errors.company}
            </div>}
        </div>

        {}
        <div className="mb-3 md:mb-5 relative">
          <select name="industry" value={formData.industry} onChange={handleChange} disabled={isLoading} className={`bg-white dark:bg-[#21262D] h-12 w-full rounded-lg pl-3 pr-10 py-3 text-base md:text-sm shadow-sm dark:shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 appearance-none cursor-pointer ${!formData.industry ? 'text-gray-400' : 'text-gray-900 dark:text-white'}`}>
            <option value="" disabled selected hidden>Industry</option>
            {industryList.map(i => <option key={i} value={i}>{i}</option>)}
          </select>
          <svg className="cheveron-svg absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="6 9 12 15 18 9"></polyline>
          </svg>
        </div>

        {}
        <div className="mb-4 md:mb-8">
          <input name="useCase" placeholder="Describe use case" value={formData.useCase} onChange={handleChange} disabled={isLoading} className="bg-white dark:bg-[#21262D] h-12 w-full rounded-lg px-3 py-4 text-base md:text-sm text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-muted-foreground shadow-sm dark:shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50" />
        </div>

        {errors.submit && <div style={{
    color: "#ef4444",
    fontSize: "12px",
    marginBottom: "8px"
  }}>
            {errors.submit}
          </div>}

        <button type="submit" disabled={isLoading} className="wk-footer-links inline-flex items-center justify-center gap-2 whitespace-nowrap rounded transition-all disabled:pointer-events-none disabled:opacity-50 shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] bg-black text-white dark:bg-white dark:text-black py-2 font-semibold text-[16px] cursor-pointer hover:bg-neutral-800 dark:hover:bg-gray-100 focus-within:bg-neutral-800 dark:focus-within:bg-gray-100 active:bg-neutral-700 dark:dark:active:bg-gray-200 h-10 px-6 has-[>svg]:px-4 w-full mb-4">
          {isLoading ? <>
              <svg className="animate-spin w-5 h-5" viewBox="0 0 24 24" fill="none">
                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
              </svg>
              Submitting...
            </> : "Request API access"}
        </button>

         <span className="text-gray-500 dark:text-white/70 max-md:text-xs">
          By clicking "Request API access, you agree to Wokelo's{" "}
          <a className="underline" href="https://www.wokelo.ai/legal?tab=privacy">
            Privacy Policy
          </a>{" "}
          and consent to receive product updates and insights.
        </span>
      </form>
    </div>;
};

<div
  className="bg-white dark:bg-[#181b20]"
  style={{
position: 'relative',
minHeight: 'calc(100dvh - 80px)',
overflow: 'hidden',
}}
>
  <div
    className="dark:block hidden"
    style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
overflow: 'hidden',
opacity: 0.65
}}
  >
    <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
      <defs>
        <linearGradient id="paint0_linear" x1="1.27639e-06" y1="444" x2="86" y2="444" gradientUnits="userSpaceOnUse">
          <stop stopColor="#3B3B3B" />

          <stop offset="0.286086" stopColor="#343434" />

          <stop offset="0.796624" stopColor="#313131" />
        </linearGradient>
      </defs>

      <rect width="100%" height="100%" fill="rgba(24,27,32,0.35)" />

      <rect width="100%" height="100%" fill="rgba(0,0,0,0.2)" />
    </svg>

    <div
      className="hero-blob-1"
      style={{
position: 'absolute',
top: '50%',
left: '50%',
width: '460px',
height: '1780px',
borderRadius: '230px',
background: '#239BB1',
opacity: 0.32,
filter: 'blur(150px)',
willChange: 'transform'
}}
    />

    <div
      className="hero-blob-2"
      style={{
position: 'absolute',
top: '50%',
left: '50%',
width: '496px',
height: '1485px',
borderRadius: '235px',
background: '#D1D3D3',
opacity: 0.32,
filter: 'blur(150px)',
willChange: 'transform'
}}
    />

    <style
      dangerouslySetInnerHTML={{ __html: `
@keyframes blob1 {
  0% { transform: translate3d(calc(-50% - 300px), -50%, 0) rotate(-50deg); }
  27.8% { transform: translate3d(calc(-50% + 100px), -50%, 0) rotate(-50deg); }
  66.7% { transform: translate3d(calc(-50% + 100px), calc(-50% + 150px), 0) rotate(-50deg); }
  100% { transform: translate3d(calc(-50% - 300px), -50%, 0) rotate(-50deg); }
}
@keyframes blob2 {
  0% { transform: translate3d(calc(-50% + 400px), calc(-50% - 50px), 0) rotate(40deg); }
  27.8% { transform: translate3d(calc(-50% - 100px), calc(-50% - 50px), 0) rotate(40deg); }
  50% { transform: translate3d(calc(-50% - 100px), calc(-50% - 120px), 0) rotate(40deg); }
  100% { transform: translate3d(calc(-50% + 400px), calc(-50% - 50px), 0) rotate(40deg); }
}
.hero-blob-1 { animation: blob1 18s linear infinite; }
.hero-blob-2 { animation: blob2 18s linear infinite; }
`}}
    />
  </div>

  <div
    style={{
position: 'relative',
zIndex: 1,
width: '100%',
maxWidth:'1500px',
margin: 'auto',
}}
    className="main-container-contact-page"
  >
    {/* Left Content */}

    <div className="wk-contact-form-text">
      <div className="mt-12">
        <h1
          className="text-gray-900 dark:text-white"
          style={{
  fontFamily: 'Figtree, sans-serif',
  fontSize: '42px',
  fontWeight: 600,
  lineHeight: 1.2,
  letterSpacing: '-0.5px',
  marginBottom: '16px',
}}
        >
          Start Building with <br /> Wokelo APIs
        </h1>

        <p
          className="text-gray-600 dark:text-gray-300"
          style={{
  fontSize: '18px',
}}
        >
          Access AI-native APIs designed for your agentic workflows and tools without the overhead of legacy data infrastructure.
        </p>
      </div>

      <div className=" mb-12 flex-col hidden lg:flex">
        <p className="text-gray-500 dark:text-gray-400 text-sm font-medium mb-5 text-[28px] whitespace-nowrap">Trusted by Industry Leaders</p>

        <LogoGridv2 />
      </div>
    </div>

    {/* Contact Form */}

    <div className="wk-contact-form-wrapper md:bg-white md:dark:bg-[#1e2128] md:shadow-lg md:rounded-xl">
      <ContactForm />
    </div>
  </div>

  <div className="block lg:hidden">
    <LogoTicker>
      <p className="text-gray-500 dark:text-gray-400 text-sm font-medium text-[28px] whitespace-nowrap">Trusted by Industry Leaders</p>

      <MobileLogos />
    </LogoTicker>
  </div>
</div>