From ef4e6a8dabedadb4614eda3f5930678f551b60c0 Mon Sep 17 00:00:00 2001
From: Anubhav Gupta <anubhavgupta@Anubhavs-MacBook-Pro.local>
Date: Sun, 22 Feb 2026 02:04:10 +0530
Subject: [PATCH] docs: improve UI with modern floating cards content for
 software interfaces

---
 docs/benchmark/index.md | 35 ++++++++++++++++++++++++++++-------
 docs/css/extra.css      | 33 +++++++++++++++++++++++++++++++++
 2 files changed, 61 insertions(+), 7 deletions(-)

diff --git a/docs/benchmark/index.md b/docs/benchmark/index.md
index 8b0917c2..fa27b39e 100644
--- a/docs/benchmark/index.md
+++ b/docs/benchmark/index.md
@@ -34,14 +34,35 @@ Seamlessly integrated into the OpenML platform, benchmark suites standardize the
 - results from other users can be easily downloaded and reused
 
 
-## Software interfaces
-To use OpenML Benchmark suites, you can use bindings in several programming languages. These all interface with the OpenML REST API. The default endpoint for this is `https://www.openml.org/api/v1/`, but this can change when later versions of the API are released. To use the code examples below, you only need a recent version of one of the following libraries:
-  
-* [OpenML Java ApiConnector](https://mvnrepository.com/artifact/org.openml/apiconnector) (version `1.0.22` and up).
-* [OpenML Weka](https://search.maven.org/search?q=a:openmlweka) (version `0.9.6` and up). This package adds a Weka Integration.
-* [OpenML Python](https://pypi.org/project/openml/) (version `0.9.0` and up)
-* [OpenML R](https://cran.r-project.org/web/packages/OpenML/index.html) (version `1.8` and up)
+## We speak your language!
+
+Whether you're a Python wizard, an R enthusiast, or building enterprise systems in Java, OpenML fits right into your workflow. No complicated setups—just install and start exploring.
+
+<div class="grid cards" markdown>
+
+-   :fontawesome-brands-python: **Python**
+    ---
+    **For Modern ML.** The gold standard for `scikit-learn` and `PyTorch` users. Built for researchers who want to automate everything.
+    [:octicons-arrow-right-24: Get started with Python](https://openml.github.io/openml-python/)
+
+-   :fontawesome-brands-r-project: **R Language**
+    ---
+    **For Data Science.** A dream for statisticians. Access thousands of datasets and tasks directly from your R console.
+    [:octicons-arrow-right-24: Get started with R](https://openml.github.io/openml-r/)
 
+-   :fontawesome-brands-java: **Java & Weka**
+    ---
+    **For Production.** Solid, reliable connectors for Java and native Weka support. Perfect for big data and enterprise apps.
+    [:octicons-arrow-right-24: Browse Java Docs](https://github.com/openml/openml-java)
+
+-   :material-api: **REST API**
+    ---
+    **For Creators.** Building a new client or a custom dashboard? Our REST API gives you raw power and total control.
+    [:octicons-arrow-right-24: Explore the API](https://www.openml.org/api_docs/)
+
+</div>
+
+---
 
 ## Using OpenML Benchmark Suites
 Below are walk-through instructions for common use cases, as well as code examples. These illustrations use the reference [OpenML-CC18](https://docs.openml.org/benchmark/#openml-cc18) benchmark suite, but you can replace it with any other benchmark suite. Note that a benchmark suite is a set of OpenML `tasks`, which envelop not only a specific dataset, but also the train-test splits and (for predictive tasks) the target feature.
diff --git a/docs/css/extra.css b/docs/css/extra.css
index f3c129b1..6bae1941 100644
--- a/docs/css/extra.css
+++ b/docs/css/extra.css
@@ -122,4 +122,37 @@ table {
 }
 .pink{
   color: #4caf50
+}
+
+
+.grid.cards {
+    background-color: #f5f7f9 !important; 
+    padding: 40px 20px !important;
+    border-radius: 20px;
+}
+
+
+.grid.cards > ul > li {
+    background-color: #ffffff !important; 
+    border-radius: 16px !important;
+    padding: 24px !important;
+    border: 1px solid rgba(0,0,0,0.05) !important; 
+    
+
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important; 
+    
+    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
+}
+
+
+.grid.cards > ul > li:hover {
+    transform: translateY(-10px) !important;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important; 
+    border-color: #2196f3 !important; 
+}
+
+
+.grid.cards p {
+    color: #586069 !important; 
+    line-height: 1.6;
 }
\ No newline at end of file