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

# Partner

> Template for Spark integration pages.

export const HCard = ({icon, light, dark, href, title, description, target = "_self"}) => {
  return <div className="spark-card rounded-2xl flex justify-center items-center p-4 hover:scale-[1.02] transition-all duration-300">
      <a href={href} target={target} rel={target === "_blank" ? "noopener noreferrer" : undefined} className="w-full">
        <div className="hcard-row" style={{
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    gap: '1rem'
  }}>
          <div className="hcard-icon" style={{
    flexShrink: 0,
    width: '40px',
    height: '40px'
  }}>
            {light && dark ? <>
                <img src={light} className="icon-light pointer-events-none" alt={title} width={40} height={40} style={{
    width: '40px',
    height: '40px',
    margin: 0
  }} />
                <img src={dark} className="icon-dark pointer-events-none" alt={title} width={40} height={40} style={{
    width: '40px',
    height: '40px',
    margin: 0
  }} />
              </> : <img src={icon} className="pointer-events-none" alt={title} width={40} height={40} style={{
    width: '40px',
    height: '40px',
    margin: 0
  }} />}
          </div>
          <div className="hcard-text" style={{
    display: 'flex',
    flexDirection: 'column',
    gap: '0.5rem'
  }}>
            <h2 className="card-title text font-semibold leading-none" style={{
    margin: 0
  }}>
              {title}
            </h2>
            <p className="card-description text-sm leading-none" style={{
    margin: 0
  }}>
              {description}
            </p>
          </div>
        </div>
      </a>
    </div>;
};

export const VCard = ({img, light, dark, icon, href, title, description, target = "_self"}) => {
  return <div className="spark-card overflow-hidden rounded-2xl flex justify-center items-center hover:scale-[1.02] transition-all duration-300">
      <a href={href} target={target} rel={target === "_blank" ? "noopener noreferrer" : undefined} className="w-full">
        <div className="vcard-col">
          <div className="vcard-image w-full aspect-video relative">
            {light && dark ? <>
                <img src={light} alt={title} className="icon-light w-full h-full object-cover pointer-events-none" />
                <img src={dark} alt={title} className="icon-dark w-full h-full object-cover pointer-events-none" />
              </> : <div className="w-full h-full bg-cover bg-center bg-no-repeat" style={{
    backgroundImage: `url(${img})`
  }} />}
          </div>
          <div className="vcard-content flex flex-col gap-2 p-6">
            <h2 className="card-title text font-semibold leading-none">
              {title}
            </h2>
            <p className="card-description text-sm leading-tight">
              {description}
            </p>
          </div>
        </div>
      </a>
    </div>;
};

export const Card = ({icon, iconLight, iconDark, href, title, description, target = "_self"}) => {
  return <div className="spark-card rounded-2xl flex justify-center p-4 hover:scale-[1.02] transition-all duration-300">
      <a href={href} target={target} rel={target === "_blank" ? "noopener noreferrer" : undefined} className="w-full">
        <div className="flex flex-col gap-12 justify-space-between">
          <div className="w-8 h-8">
            {iconLight && iconDark ? <>
                <img src={iconLight} className="icon-light w-full h-full pointer-events-none" alt={title} width={32} height={32} />
                <img src={iconDark} className="icon-dark w-full h-full pointer-events-none" alt={title} width={32} height={32} />
              </> : <img src={icon} className="w-full h-full pointer-events-none" alt={title} width={32} height={32} />}
          </div>
          <div className="flex flex-col gap-2">
            <h2 className="card-title text font-semibold leading-tight">
              {title}
            </h2>
            <p className="card-description text-sm leading-tight">
              {description}
            </p>
          </div>
        </div>
      </a>
    </div>;
};

<Frame className="chill">
  <img src="https://mintcdn.com/lightspark/1qhg2-dutO4_dxVH/images/integrations/partner.png?fit=max&auto=format&n=1qhg2-dutO4_dxVH&q=85&s=ca05d1ae81a7be4918a4c3649310d548" alt="Partner" width="1920" height="1080" data-path="images/integrations/partner.png" />
</Frame>

Integrate \[Partner Name] for use case this partner enables and what functionality they provide. \[Brief description of what the partner does and their value proposition for developers building on Spark.]
Integrate \[Partner Name] for use case this partner enables and what functionality they provide. \[Brief description of what the partner does and their value proposition for developers building on Spark.]

***

## Features

<Columns cols="3" className="gap-4 chill">
  <Card title="First Feature" iconLight="/icons/icon-wallet-black.svg" iconDark="/icons/icon-wallet-white.svg" description="First feature description to go here" />

  <Card title="Second Feature" iconLight="/icons/icon-wallet-black.svg" iconDark="/icons/icon-wallet-white.svg" description="Second feature description to go here" />

  <Card title="Third Feature" iconLight="/icons/icon-wallet-black.svg" iconDark="/icons/icon-wallet-white.svg" description="Third feature description to go here" />

  <Card title="Fourth Feature" iconLight="/icons/icon-wallet-black.svg" iconDark="/icons/icon-wallet-white.svg" description="Fourth feature description to go here" />

  <Card title="Fifth Feature" iconLight="/icons/icon-wallet-black.svg" iconDark="/icons/icon-wallet-white.svg" description="Fifth feature description to go here" />

  <Card title="Sixth Feature" iconLight="/icons/icon-wallet-black.svg" iconDark="/icons/icon-wallet-white.svg" description="Sixth feature description to go here" />
</Columns>

***

## Quick Integration (if applicable)

```typescript theme={null}
// Example code showing basic integration
import { PartnerClient } from '@partner/client'

const client = new PartnerClient({
  apiKey: 'your-partner-key',
  network: 'spark'
})

// Basic usage example
const result = await client.someMethod({
  // configuration options
})
```

***

## Use Cases

<Columns cols="3">
  <VCard title="Use Case 1" icon="/icons/icon-app-grid.svg" href="https://grid.lightsparks.com/" description="Use case 1 description to go here" />

  <VCard title="Use Case 2" icon="/icons/icon-app-grid.svg" href="https://grid.lightsparks.com/" description="Use case 2 description to go here" />

  <VCard title="Use Case 3" icon="/icons/icon-app-grid.svg" href="https://grid.lightsparks.com/" description="Use case 3 description to go here" />
</Columns>

## Guides

Coming soon...

<br />

***

<br />

## Documentation

<Columns cols="1">
  <HCard title="Partner Official Docs" icon="/icons/icon-app-grid.svg" href="https://grid.lightsparks.com/" description="Official docs for partner" />
</Columns>
