DOP-4300: Make client libraries icons show up in the side navigation for Homepage redesign (#157)

* oldhomepagewhodat

* empty

* use old intro

* image update

* tweak

* more tweaks

* model

* commit

* Source

* Oops

* client library

* editing carousel and logos

* updated homepage content

* updates

---------

Co-authored-by: Allison Reinheimer Moore <[email protected]>

Author: mayaraman19

source/images/homepage-hero-revert.svg

@@ -26,206 +26,170 @@ MongoDB Documentation
       :id: client-libraries
       :url: https://www.mongodb.com/docs/drivers/
 
+      .. card-group::
+         :columns: 4
+         :layout: default
+         :ia-entry-id: client-libraries
+         :type: drivers
+
+         .. card::
+            :headline: C
+            :url: https://www.mongodb.com/docs/drivers/c/
+            :icon: /images/icons/c.svg
+            :icon-alt: C Driver icon
+
+         .. card::
+            :headline: C++
+            :url: https://www.mongodb.com/docs/drivers/cxx/
+            :icon: /images/icons/cpp.svg
+            :icon-alt: C plus plus Driver icon
+
+         .. card::
+            :headline: C#
+            :url: https://www.mongodb.com/docs/drivers/csharp/current/
+            :icon: /images/icons/csharp.svg
+            :icon-alt: C sharp Driver icon
+
+         .. card::
+            :headline: Go
+            :url: https://www.mongodb.com/docs/drivers/go/current/
+            :icon: /images/icons/go.svg
+            :icon-alt: Go Driver icon
+
+         .. card::
+            :headline: Java
+            :url: https://www.mongodb.com/docs/drivers/java-drivers/
+            :icon: /images/icons/java.svg
+            :icon-alt: Java Driver icon
+         
+         .. card::
+            :headline: Kotlin
+            :url: https://www.mongodb.com/docs/drivers/kotlin-drivers/
+            :icon: /images/icons/kotlin.svg
+            :icon-alt: Kotlin Driver icon
+
+         .. card::
+            :headline: Node.js
+            :url: https://www.mongodb.com/docs/drivers/node/current/
+            :icon: /images/icons/node.svg
+            :icon-alt: Node Driver icon
+
+         .. card::
+            :headline: PHP
+            :url: https://www.mongodb.com/docs/drivers/php/
+            :icon: /images/icons/php.svg
+            :icon-alt: PHP Driver icon
+
+         .. card::
+            :headline: Python
+            :url: https://www.mongodb.com/docs/drivers/python/
+            :icon: /images/icons/python.svg
+            :icon-alt: Python Driver icon
+         
+         .. card::
+            :headline: Ruby
+            :url: https://www.mongodb.com/docs/drivers/ruby/
+            :icon: /images/icons/ruby.svg
+            :icon-alt: Ruby Driver icon
+
+         .. card::
+            :headline: Rust
+            :url: https://www.mongodb.com/docs/drivers/rust/current/
+            :icon: /images/icons/rust.svg
+            :icon-alt: Rust Driver icon
+
+         .. card::
+            :headline: Scala
+            :url: https://www.mongodb.com/docs/drivers/scala/
+            :icon: /images/icons/scala.svg
+            :icon-alt: Scala Driver icon
+
+         .. card::
+            :headline: Swift
+            :url: https://www.mongodb.com/docs/drivers/swift/
+            :icon: /images/icons/swift.svg
+            :icon-alt: Swift Driver icon
+
+         .. card::
+            :headline: TypeScript
+            :url: https://www.mongodb.com/docs/drivers/typescript/
+            :icon: /images/icons/ts.svg
+            :icon-alt: TypeScript Driver icon
+
+.. introduction::
+
+   Welcome to the official MongoDB Documentation. 
+   Whether you’re a developer, database administrator, 
+   or just starting your journey with MongoDB, our 
+   documentation provides you with the information and 
+   knowledge needed to build applications on MongoDB and 
+   the Atlas developer data platform.
+
+.. image:: /images/homepage-hero-revert.svg
+   :class: hero-img
+   :alt: Homepage illustration
 
-.. STRICT structure of:
-.. title argument, and 3 elements in content block (paragraph, cta, hero)
-
-.. landing:introduction:: Get Started with MongoDB
-
-   Store data in flexible documents and develop applications 
-   designed to adapt and scale, backed by Atlas, a fully managed 
-   platform with always-on security and an ecosystem of tools 
-   and integrations.
-
-   .. button:: Deploy a Free Cluster
-      :uri: https://www.mongodb.com/docs/atlas/getting-started/
-
-   .. image:: /images/hero-v2.svg
-      :class: hero-img
-      :alt: Homepage illustration
-
-.. landing:products::
-
-   .. landing:product:: MongoDB Atlas
+.. card-group::
+   :columns: 1
+   :layout: default
+   
+   .. card::
+      :headline: MongoDB Atlas →
+      :url: https://www.mongodb.com/docs/atlas/getting-started/
       :icon: /images/technical-atlas-serverless.svg
-      :icon-alt: Atlas
+      :icon-alt: Atlas icon
 
       Run MongoDB on a multi-cloud developer data platform that 
       accelerates and simplifies working with operational data.
 
-      .. cta::
-      
-         :atlas:`Learn about MongoDB Atlas </getting-started>`
-
-   .. landing:product:: Database Manual
+   .. card:: 
+      :headline: Database Manual →
       :icon: /images/technical-mdb-shell.svg
       :icon-alt: MongoDB Database Manual
+      :url: https://www.mongodb.com/docs/manual/
 
       Learn core MongoDB concepts, including data modeling, querying 
       data, aggregations, sharding, and more.
-
-      .. cta::
-
-         :manual:`Explore MongoDB fundamentals </>`
 
-   .. landing:product:: Migrators, Tools, and Connectors
+   .. card:: 
+      :headline: Migrators, Tools, and Connectors →
       :icon: /images/general-features-tools.svg
       :icon-alt: Migrators, Tools, and Connectors
+      :url: https://www.mongodb.com/docs/tools-and-connectors/
 
       Explore tools and integrations for MongoDB, from data 
       visualization and development to migration and management.
 
-      .. cta::
-
-         :doc:`Connect and interact with MongoDB </tools-and-connectors>`
-
-.. landing:client-libraries:: Client Libraries
-   :cta: View all
-   :url: https://www.mongodb.com/docs/drivers/
-
-.. card-group::
-   :columns: 4
-   :layout: default
-   :ia-entry-id: client-libraries
-   :type: drivers
-
-   .. card::
-      :headline: C
-      :url: https://www.mongodb.com/docs/drivers/c/
-      :icon: /images/icons/c.svg
-      :icon-alt: C Driver icon
-
-   .. card::
-      :headline: C++
-      :url: https://www.mongodb.com/docs/drivers/cxx/
-      :icon: /images/icons/cpp.svg
-      :icon-alt: C plus plus Driver icon
-
-   .. card::
-      :headline: C#
-      :url: https://www.mongodb.com/docs/drivers/csharp/current/
-      :icon: /images/icons/csharp.svg
-      :icon-alt: C sharp Driver icon
-
-   .. card::
-      :headline: Go
-      :url: https://www.mongodb.com/docs/drivers/go/current/
-      :icon: /images/icons/go.svg
-      :icon-alt: Go Driver icon
-
-   .. card::
-      :headline: Java
-      :url: https://www.mongodb.com/docs/drivers/java-drivers/
-      :icon: /images/icons/java.svg
-      :icon-alt: Java Driver icon
-   
-   .. card::
-      :headline: Kotlin
-      :url: https://www.mongodb.com/docs/drivers/kotlin-drivers/
-      :icon: /images/icons/kotlin.svg
-      :icon-alt: Kotlin Driver icon
-
-   .. card::
-      :headline: Node.js
-      :url: https://www.mongodb.com/docs/drivers/node/current/
-      :icon: /images/icons/node.svg
-      :icon-alt: Node Driver icon
-
-   .. card::
-      :headline: PHP
-      :url: https://www.mongodb.com/docs/drivers/php/
-      :icon: /images/icons/php.svg
-      :icon-alt: PHP Driver icon
-
-   .. card::
-      :headline: Python
-      :url: https://www.mongodb.com/docs/drivers/python/
-      :icon: /images/icons/python.svg
-      :icon-alt: Python Driver icon
-   
-   .. card::
-      :headline: Ruby
-      :url: https://www.mongodb.com/docs/drivers/ruby/
-      :icon: /images/icons/ruby.svg
-      :icon-alt: Ruby Driver icon
-
-   .. card::
-      :headline: Rust
-      :url: https://www.mongodb.com/docs/drivers/rust/current/
-      :icon: /images/icons/rust.svg
-      :icon-alt: Rust Driver icon
-
-   .. card::
-      :headline: Scala
-      :url: https://www.mongodb.com/docs/drivers/scala/
-      :icon: /images/icons/scala.svg
-      :icon-alt: Scala Driver icon
-
-   .. card::
-      :headline: Swift
-      :url: https://www.mongodb.com/docs/drivers/swift/
-      :icon: /images/icons/swift.svg
-      :icon-alt: Swift Driver icon
-
-   .. card::
-      :headline: TypeScript
-      :url: https://www.mongodb.com/docs/drivers/typescript/
-      :icon: /images/icons/ts.svg
-      :icon-alt: TypeScript Driver icon
-
-.. STRICT structure of:
-.. title argument, and 3 elements in content block (paragraph, button, codeblock)
-
-.. landing:explore:: Explore the Document Model
-
-   Interact with JSON-like documents using the MongoDB Shell to insert, 
-   query, and delete sample data.
-
-   .. button:: Launch Interactive Lab
-      :uri: https://www.mongodb.com/docs/manual/tutorial/getting-started/
-
-   .. code-block:: sh
-      :copyable: true
-      
-      db.people.insertOne({
-         name: { first: 'Alan', last: 'Turing' },
-         birth: new Date('Jun 23, 1912'),
-         death: new Date('Jun 07, 1954'),
-         contribs: [ 'Turing machine', 'Turing test' ],
-         views : Long(1250000)
-      })
+   .. card:: 
+      :headline: Client Libraries →
+      :icon: /images/technical-atlas-drivers.svg
+      :icon-alt: Client libraries icon.
+      :url: https://www.mongodb.com/docs/drivers/
 
+      Connect your application to your database with one of the 
+      official MongoDB libraries.
 
 More Ways to Learn
 ------------------
 
-.. landing:more-ways:: Deploy a cluster on Atlas
-   :video_url: https://fast.wistia.net/embed/iframe/dro6xerqbs
-   
-   Watch a short series of videos on how to create and set up an 
-   account, deploy a free cluster, and load sample data.
-
-   .. cta::
-   
-      `Learn with MongoDB University <https://learn.mongodb.com/>`__
-
 .. card-group::
    :columns: 3
+   :layout: default
 
    .. card::
       :icon: /images/general-content-learn.svg
-      :headline: Become MongoDB Certified
-      :cta: MongoDB Certifications
-      :url: https://learn.mongodb.com/pages/certification-program
+      :headline: Take Free Courses on MongoDB University
+      :tag: landing-bottom
+      :url: https://learn.mongodb.com/
 
    .. card::
       :icon: /images/general-content-community.svg
       :headline: Join Forums and Discussions
-      :cta: MongoDB Community
+      :tag: landing-bottom
       :url: https://www.mongodb.com/community/
 
    .. card::
       :icon: /images/technical-mdb-devhub.svg
-      :headline: View MongoDB Tutorials
-      :cta: Developer Center
+      :headline: View Developer Resources
+      :tag: landing-bottom
       :url: https://www.mongodb.com/developer/