feat: Add more resources and rework layout of Community Resources page

docs/community.md

@@ -1,107 +1,207 @@
 # Community Resources
 
-Welcome! This page highlights resources maintained by the Agent Development Kit
-community.
+Welcome! This page highlights resources built and maintained by the Agent
+Development Kit community.
 
 !!! info
 
     Google and the ADK team do not provide support for the content linked in
     these external community resources.
 
-## Translations
-
-Community-provided translations of the ADK documentation.
-
-*   **[adk.wiki - ADK Documentation (Chinese)](https://adk.wiki/)**
-
-    > adk.wiki is the Chinese version of the Agent Development Kit
-    > documentation, maintained by an individual. The documentation is
-    > continuously updated and translated to provide a localized reading
-    > experience for developers in China.
-
-*   **[ADK Documentation (Korean, 한국어)](https://adk-labs.github.io/adk-docs/ko/)**
-
-    > the Korean version of the Agent Development Kit
-    > documentation, maintained by an individual. The documentation is
-    > continuously updated and translated to provide a localized reading
-    > experience for developers in South Korea.
+## Getting Started
 
-*   **[ADK Documentation (Japanese, 日本語)](https://adk-labs.github.io/adk-docs/ja/)**
-
-    > the Japanese version of the Agent Development Kit
-    > documentation, maintained by an individual. The documentation is
-    > continuously updated and translated to provide a localized reading
-    > experience for developers in Japan.
-
-## Tutorials, Guides & Blog Posts
-
-*Find community-written guides covering ADK features, use cases, and
-integrations here.*
-
-*   **[Build an e-commerce recommendation AI agents with ADK + Vector Search](https://github.com/google/adk-docs/blob/main/examples/python/notebooks/shop_agent.ipynb)**
+<div class="resource-grid">
+  <a href="https://www.youtube.com/watch?v=zgrOwow_uTQ" class="resource-card">
+    <div class="card-image-wrapper">
+      <img src="../assets/community-agent-development-kit.jpg" alt="Introducing Agent Development Kit">
+    </div>
+    <div class="card-content">
+      <div class="type">Video Demo</div>
+      <h3>📺 Introducing Agent Development Kit</h3>
+      <p>A demo of building a multi-agent travel planner, showcasing core design principles.</p>
+    </div>
+  </a>
+  <a href="https://www.youtube.com/watch?v=44C8u0CDtSo" class="resource-card">
+    <div class="card-image-wrapper">
+      <img src="../assets/community-building-your-first-agent.jpg" alt="Building your first agent with ADK">
+    </div>
+    <div class="card-content">
+      <div class="type">Video</div>
+      <h3>📺 Getting started with Agent Development Kit</h3>
+      <p>Learn the fundamentals of agent definition and how to run and debug your first agent.</p>
+    </div>
+  </a>
+  <a href="https://www.youtube.com/watch?v=5ZmaWY7UX6k" class="resource-card">
+    <div class="card-image-wrapper">
+      <img src="../assets/community-agent-tools-101.jpg" alt="ADK Agent Tools 101">
+    </div>
+    <div class="card-content">
+      <div class="type">Video</div>
+      <h3>📺 Getting Started with ADK Tools</h3>
+      <p>A guide to building a software bug assistant using tools like MCP, Google Search, and LangChain.</p>
+    </div>
+  </a>
+</div>
 
-    > In this tutorial, we will explore how to build a simple multi-agent system for an 
-    > e-commerce site, designed to offer the "Generative Recommendations" you find in the 
-    > [Shopper's Concierge demo](https://www.youtube.com/watch?v=LwHPYyw7u6U).
+## Courses & Deep Dives
 
-* **[Google ADK + Vertex AI Live API](https://medium.com/google-cloud/google-adk-vertex-ai-live-api-125238982d5e)**
+<div class="resource-grid">
+  <a href="https://www.youtube.com/watch?v=P4VFL9nIaIA" class="resource-card">
+    <div class="card-image-wrapper">
+      <img src="../assets/community-adk-masterclass.jpg" alt="ADK Masterclass Thumbnail">
+    </div>
+    <div class="card-content">
+      <div class="type">Video Course</div>
+      <h3>🎓 ADK Masterclass: Build AI Agents & Automate Workflows</h3>
+      <p>A complete crash course that takes you from beginner to expert with 12 hands-on examples.</p>
+    </div>
+  </a>
+  <a href="https://raphaelmansuy.github.io/adk_training/" class="resource-card">
+    <div class="card-image-wrapper">
+      <img src="../assets/community-adk-training-hub.png" alt="ADK Training Hub Banner">
+    </div>
+    <div class="card-content">
+      <div class="type">Website</div>
+      <h3>🎓 ADK Training Hub</h3>
+      <p>Master ADK from first principles to production with comprehensive tutorials and examples.</p>
+    </div>
+  </a>
+  <a href="https://www.youtube.com/playlist?list=PLLrA_pU9-Gz2HwepRUVpq1TEPuYWo_fSi" class="resource-card">
+    <div class="card-image-wrapper">
+      <img src="../assets/community-master-agentic-ai-with-adk.jpg" alt="Master Agentic AI with ADK">
+    </div>
+    <div class="card-content">
+      <div class="type">YouTube Playlist</div>
+      <h3>🎓 Master Agentic AI with ADK</h3>
+      <p>A step-by-step playlist covering everything from setup to deploying and scaling agents.</p>
+    </div>
+  </a>
+  <a href="https://www.youtube.com/playlist?list=PL6tW9BrhiPTAZts0W5nQS9dbW6VMnLKab" class="resource-card">
+    <div class="card-image-wrapper">
+      <img src="../assets/community-adk-course.jpg" alt="ADK Course">
+    </div>
+    <div class="card-content">
+      <div class="type">YouTube Playlist</div>
+      <h3>🎓 Google ADK End-to-end Course</h3>
+      <p>Build, deploy, and scale production-ready agents with this in-depth course series.</p>
+    </div>
+  </a>
+  <a href="https://iamulya.one/tags/building-intelligent-agents-with-google-adk/" class="resource-card">
+    <div class="card-image-wrapper">
+      <img src="../assets/community-building-intelligent-agents-with-adk.jpg" alt="Building intelligent agents with ADK">
+    </div>
+    <div class="card-content">
+      <div class="type">Blog Series</div>
+      <h3>🎓 Building Intelligent Agents with Google ADK</h3>
+      <p>A developer's guide to building intelligent agents with Google’s code-first Python toolkit.</p>
+    </div>
+  </a>
+</div>
 
-    > Going Beyond the ADK CLI by Building Streaming Experiences with the Agent Development Kit and the Vertex AI Live API.
+## Agent Tutorials and Demos
 
-## Videos & Screencasts
+<div class="resource-grid">
+  <a href="https://www.youtube.com/watch?v=efcUXoMX818" class="resource-card">
+    <div class="card-image-wrapper">
+      <img src="../assets/community-data-science-agent.jpg" alt="Building a data science agent with ADK">
+    </div>
+    <div class="card-content">
+      <div class="type">Video Tutorial</div>
+      <h3>📖 How to Build a Data Science Agent with ADK</h3>
+      <p>A deep dive into building a multi-agent system for database queries, Python analysis, and BigQuery ML.</p>
+    </div>
+  </a>
+  <a href="https://www.youtube.com/watch?v=hPzjkQFV5yI" class="resource-card">
+    <div class="card-image-wrapper">
+      <img src="../assets/community-brand-search-optimization-agent.jpg" alt="Building a brand search optimization agent with ADK">
+    </div>
+    <div class="card-content">
+      <div class="type">Video Tutorial</div>
+      <h3>📖 Build a Browser Use Agent with ADK and Selenium</h3>
+      <p>Learn to build an agent that enhances a retail website's product data by filling in missing information.</p>
+    </div>
+  </a>
+  <a href="https://github.com/google/adk-docs/blob/main/examples/python/notebooks/shop_agent.ipynb" class="resource-card">
+    <div class="card-image-wrapper">
+      <img src="../assets/community-shoppers-concierge-demo.jpg" alt="ADK Shopper's Concierge Demo">
+    </div>
+    <div class="card-content">
+      <div class="type">Jupyter Notebook</div>
+      <h3>📖 Build an E-commerce Recommendation Agent</h3>
+      <p>A tutorial on creating a simple multi-agent system for generative e-commerce recommendations.</p>
+    </div>
+  </a>
+  <a href="https://medium.com/google-cloud/google-adk-vertex-ai-live-api-125238982d5e" class="resource-card">
+    <div class="card-image-wrapper">
+      <img src="../assets/community-adk-vertex-ai-live-api.png" alt="ADK + Vertex AI Live API">
+    </div>
+    <div class="card-content">
+      <div class="type">Blog Post</div>
+      <h3>📖 Google ADK + Vertex AI Live API</h3>
+      <p>Go beyond the ADK CLI by building real-time, streaming experiences with the Live API.</p>
+    </div>
+  </a>
+  <a href="https://www.youtube.com/watch?v=LwHPYyw7u6U" class="resource-card">
+    <div class="card-image-wrapper">
+      <img src="../assets/community-shoppers-concierge-demo.jpg" alt="ADK Shopper's Concierge Demo">
+    </div>
+    <div class="card-content">
+      <div class="type">Video Demo</div>
+      <h3>📺 Shopper's Concierge Demo</h3>
+      <p>See how AI agents can revolutionize shopping with personalized, real-time recommendations.</p>
+    </div>
+  </a>
+</div>
 
-Discover video walkthroughs, talks, and demos showcasing ADK.
+## ADK for Java
 
-<div class="video-grid">
-  <div class="video-item">
-    <div class="video-container">
-      <iframe src="https://www.youtube-nocookie.com/embed/zgrOwow_uTQ?si=1xVxuZyW022Rq5ZC" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+<div class="resource-grid">
+  <a href="https://www.youtube.com/watch?v=L6V6aQixOZU" class="resource-card">
+    <div class="card-image-wrapper">
+      <img src="../assets/community-discover-adk-java.jpg" alt="Discover ADK Java for Building AI Agents">
     </div>
-  </div>
-
-  <div class="video-item">
-    <div class="video-container">
-      <iframe src="https://www.youtube-nocookie.com/embed/44C8u0CDtSo?si=EkZu_m5O-fQPzORk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+    <div class="card-content">
+      <div class="type">Video Talk</div>
+      <h3>☕ Discover ADK Java for Building AI Agents</h3>
+      <p>A presentation to help you build your first AI agents in Java.</p>
     </div>
-  </div>
-
-  <div class="video-item">
-    <div class="video-container">
-      <iframe src="https://www.youtube-nocookie.com/embed/efcUXoMX818?si=Dwez2zH8OSwf7Ktg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+  </a>
+  <a href="https://www.youtube.com/playlist?list=PLLMxXO6kMiNhP87WYQ8CeC3xpV3EnF9cu" class="resource-card">
+    <div class="card-image-wrapper">
+      <img src="../assets/community-google-adk-for-java-experiments.jpg" alt="ADK for Java (Experiments)">
     </div>
-  </div>
-
-  <div class="video-item">
-    <div class="video-container">
-      <iframe src="https://www.youtube-nocookie.com/embed/hPzjkQFV5yI?si=GNbDQ1iqP4fok-SY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+    <div class="card-content">
+      <div class="type">YouTube Playlist</div>
+      <h3>☕ Google ADK for Java Tutorials</h3>
+      <p>Step-by-step tutorials covering A2A, MCP, multi-agent systems, and callbacks in Java.</p>
     </div>
-  </div>
-
-  <div class="video-item">
-    <div class="video-container">
-      <iframe src="https://www.youtube-nocookie.com/embed/LwHPYyw7u6U" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+  </a>
+  <a href="https://codelabs.developers.google.com/adk-java-getting-started" class="resource-card">
+    <div class="card-image-wrapper">
+      <img src="../assets/community-build-ai-agents-with-adk-for-java.png" alt="Build AI Agents with ADK for Java">
     </div>
-  </div>
-
-  <div class="video-item">
-    <div class="video-container">
-      <iframe src="https://www.youtube-nocookie.com/embed/5ZmaWY7UX6k" title="ADK Tools Walkthrough" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+    <div class="card-content">
+      <div class="type">Codelab</div>
+      <h3>☕ Build AI Agents with ADK for Java</h3>
+      <p>Move beyond simple LLM calls to create autonomous Java agents that reason, plan, and use tools.</p>
     </div>
-  </div>
-
+  </a>
 </div>
 
-*   **[Agent Development Kit (ADK) Masterclass: Build AI Agents & Automate Workflows (Beginner to Pro)](https://www.youtube.com/watch?v=P4VFL9nIaIA)**
+## Translations
+
+Community-provided translations of the ADK documentation.
 
-    > A comprehensive crash course that takes you from beginner to expert in Google's Agent Development Kit. 
-    > Covers 12 hands-on examples progressing from single agent setup to advanced multi-agent workflows.
-    > Includes step-by-step code walkthroughs and downloadable source code for all examples.
+<ul class="translation-list">
+  <li><a href="https://adk.wiki/">🇨🇳 Chinese (中文) Documentation</a></li>
+  <li><a href="https://adk-labs.github.io/adk-docs/ko/">🇰🇷 Korean (한국어) Documentation</a></li>
+  <li><a href="https://adk-labs.github.io/adk-docs/ja/">🇯🇵 Japanese (日本語) Documentation</a></li>
+</ul>
 
 ## Contributing Your Resource
 
-Have an ADK resource to share (tutorial, translation, tool, video, example)?
+Have an ADK resource to share (tutorial, translation, tool, video, or example)?
 
-Refer to the steps in the [Contributing Guide](contributing-guide.md) for more
-information on how to get involved!
+Refer to the steps in the **[Contributing Guide](contributing-guide.md)** for more information on how to get involved!
 
 Thank you for your contributions to Agent Development Kit! ❤️

docs/stylesheets/custom.css

@@ -55,4 +55,75 @@
   white-space: nowrap;
   max-width: none !important;
   overflow: visible !important;
-}
+}
+
+.resource-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1.5rem;
+    margin: 2rem 0;
+}
+.resource-card {
+    background: #ffffff;
+    border: 1px solid #e2e8f0;
+    border-radius: 12px;
+    text-decoration: none !important;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+}
+.resource-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
+    border-color: #4285F4;
+}
+.card-image-wrapper {
+    width: 100%;
+    aspect-ratio: 16/9;
+    background-color: #f0f4f8;
+}
+.card-image-wrapper img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.card-content {
+    padding: 1.0rem;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+}
+.card-content .type {
+    font-size: 0.7rem;
+    font-weight: 600;
+    color: #4285F4;
+    margin-bottom: 0.5rem;
+}
+.card-content h3 {
+    font-size: 0.9rem;
+    color: #1a202c;
+    margin: 0;
+}
+.card-content p {
+    font-size: 0.8rem;
+    color: #4a5568;
+    line-height: 1.6;
+    margin-top: 0.75rem;
+    flex-grow: 1;
+}
+
+.translation-list {
+    list-style: none; padding: 0; display: grid; gap: 1rem;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+}
+.translation-list a {
+    display: block; padding: 1rem 1.5rem; border-radius: 8px;
+    background: #f7fafc; border: 1px solid #e2e8f0; text-decoration: none;
+    font-weight: 600; font-size: 0.9rem; color: #2d3748;
+    transition: all 0.2s ease-in-out;
+}
+.translation-list a:hover {
+    background: white; border-color: #4285F4; transform: translateY(-2px);
+}