Integrations: Demo landing page

content/en/guides/integrations/_index.md

@@ -7,14 +7,74 @@ weight: 9
 url: guides/integrations
 cascade:
 - url: guides/integrations/:filename
+no_list: true
 ---
 
-W&B integrations make it fast and easy to set up experiment tracking and data versioning inside existing projects. Check out integrations for ML frameworks such as [PyTorch]({{< relref "pytorch.md" >}}), ML libraries such as [Hugging Face]({{< relref "huggingface.md" >}}), or cloud services such as [Amazon SageMaker]({{< relref "sagemaker.md" >}}).
+ W&B integrations make it fast and easy to set up experiment tracking and data versioning inside existing projects. Check out integrations for ML frameworks such as [PyTorch]({{< relref "pytorch.md" >}}), ML libraries such as [Hugging Face]({{< relref "huggingface.md" >}}), or cloud services such as [Amazon SageMaker]({{< relref "sagemaker.md" >}}).
 
+{{% cardpane %}}
+{{% card header="**Open AI**" %}}
+<div onclick="window.location.href='https://docs.wandb.ai/guides/integrations/openai-api/'" style="cursor: pointer; display: flex; justify-content: center; align-items: center; height: 120px;">
+<img src="/img/OpenAI-black-monoblossom.svg" alt="Open AI logo" width="120"/></div>
+{{% /card %}}
+{{% card header="**Hugging Face**" %}}
+<div onclick="window.location.href='https://wandb.ai/fully-connected/blog/hugging-face/'" style="cursor: pointer; display: flex; justify-content: center; align-items: center; height: 120px;">
+<img src="/img/hf-logo.svg" alt="Hugging Face logo" width="100"/></div>
+{{% /card %}}
+{{% card header="**Keras**" %}}
+<div onclick="window.location.href='https://docs.wandb.ai/guides/integrations/keras/'" style="cursor: pointer; display: flex; justify-content: center; align-items: center; height: 120px;">
+<img src="/img/Keras_logo.svg" alt="Keras logo" width="120"/></div>
+{{% /card %}}
+{{% card header="**PyTorch**" %}}
+<div onclick="window.location.href='https://docs.wandb.ai/guides/integrations/pytorch/'" style="cursor: pointer; display: flex; justify-content: center; align-items: center; height: 120px;">
+<img src="/img/Pytorch-svgrepo-com.svg" alt="PyTorch logo" width="100"/></div>
+{{% /card %}}
+{{% /cardpane %}}
 
-<iframe width="668" height="376" src="https://www.youtube.com/embed/hmewPDNUNJs?list=PLD80i8An1OEGajeVo15ohAQYF1Ttle0lk" title="Log Your First Run With W&amp;B" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+<!-- Row two -->
 
-## Related resources
+{{% cardpane %}}
+{{% card header="**PyG**" %}}
+<div onclick="window.location.href='https://docs.wandb.ai/guides/integrations/pytorch-geometric/'" style="cursor: pointer; display: flex; justify-content: center; align-items: center; height: 120px;">
+<img src="/img/pyg_logo.png" alt="PyTorch Geometric logo" width="100"/></div>
+{{% /card %}}
+{{% card header="**PyTorch Lightning**" %}}
+<div onclick="window.location.href='https://docs.wandb.ai/guides/integrations/lightning/'" style="cursor: pointer; display: flex; justify-content: center; align-items: center; height: 120px;">
+<img src="/img/Lightning_Logo_v2.png" alt="PyTorch Lightning logo" width="120"/></div>
+{{% /card %}}
+{{% card header="**Amazon SageMaker**" %}}
+<div onclick="window.location.href='https://docs.wandb.ai/guides/integrations/sagemaker/'" style="cursor: pointer; display: flex; justify-content: center; align-items: center; height: 120px;">
+<img src="/img/SageMaker.svg" alt="SageMaker logo" width="100"/></div>
+{{% /card %}}
+{{% card header="**Scikit-Learn**" %}}
+<div onclick="window.location.href='https://docs.wandb.ai/guides/integrations/scikit/'" style="cursor: pointer; display: flex; justify-content: center; align-items: center; height: 120px;">
+<img src="/img/Scikit_learn_logo_small.svg" alt="Scikit Learn logo" width="100"/></div>
+{{% /card %}}
+{{% /cardpane %}}
 
-* [Examples](https://github.com/wandb/examples): Try the code with notebook and script examples for each integration.
-* [Video Tutorials](https://www.youtube.com/playlist?list=PLD80i8An1OEGajeVo15ohAQYF1Ttle0lk): Learn to use W&B with YouTube video tutorials
+<!-- Row three -->
+
+{{% cardpane %}}
+{{% card header="**SpaCy**" %}}
+<div onclick="window.location.href='https://docs.wandb.ai/guides/integrations/spacy/'" style="cursor: pointer; display: flex; justify-content: center; align-items: center; height: 120px;">
+<img src="/img/SpaCy_logo.svg" alt="SpaCy logo" width="120"/></div>
+{{% /card %}}
+{{% card header="**Ray tune**" %}}
+<div onclick="window.location.href='https://docs.wandb.ai/guides/integrations/ray-tune/'" style="cursor: pointer; display: flex; justify-content: center; align-items: center; height: 120px;">
+<img src="/img/Ray_tune.png" alt="Ray Tune logo" width="120"/></div>
+{{% /card %}}
+{{% card header="**XGBoost**" %}}
+<div onclick="window.location.href='https://docs.wandb.ai/guides/integrations/xgboost/'" style="cursor: pointer; display: flex; justify-content: center; align-items: center; height: 120px;">
+<img src="/img/XGBoost_logo.svg" alt="XGBoost logo" width="120"/></div>
+{{% /card %}}
+{{% card header="**YOLO**" %}}
+<div onclick="window.location.href='https://docs.wandb.ai/'" style="cursor: pointer; display: flex; justify-content: center; align-items: center; height: 120px;">
+<img src="/img/yolo_logo.png" alt="YOLO logo" width="120"/></div>
+{{% /card %}}
+{{% /cardpane %}}
+
+<!-- 
+{{% card header="**PyTorch Ignite**" %}}
+<div onclick="window.location.href='https://docs.wandb.ai/'" style="cursor: pointer; display: flex; justify-content: center; align-items: center; height: 120px;">
+<img src="/img/ignite_logo.png" alt="PyTorch Ignite logo" width="100"/></div>
+{{% /card %}} -->