Page integrations (overview,detail) (#22)

* Added examples for detail and overview integration pages

* Fix landing card icon styles

Author: josuebran

preview-src/examples/cassio.svg

@@ -0,0 +1,114 @@
+= Lang Chain
+
+== Overview
+
+By integrating LangChain with Astra, you can seamlessly 
+utilize advanced linguistic processing capabilities of 
+LangChain within the Astra vector database environment. 
+This combination enhances vector data analysis, 
+allowing natural language data to be processed, 
+stored, and queried with efficiency.
+
+image::ROOT:template-examples/langchain-overview.png["Architecture diagram"]
+
+To get started, ensure you have an 
+https://example.com[active LangChain account,role=external] with the requisite permissions.
+
+You will also need an https://example.com[active LangChain account,role=external] 
+an access to its API keys.
+
+== Setup
+
+=== [.step]#1# Acquire API Key from LangChain:
+
+Log into your LangChain dashboard and navigate to the 'API' section to obtain your API key.
+
+=== [.step]#2# Configure Astra's SDK for LangChain
+
+[source,python]
+----
+from astra import VectorDB
+db = VectorDB(config='astra_config.yaml')
+db.set_integration('LangChain', api_key='YOUR_LANGCHAIN_API_KEY')
+----
+
+=== [.step]#3# Initialize Data Transfer
+
+[source,python]
+----
+db.sync_from('LangChain')
+----
+
+== Verify Integration
+
+Ensure your integration was successful by checking for new linguistic vector entries in your Astra database:
+
+. Navigate to the Astra dashboard.
+. Open the 'Vector Data' tab.
+. Confirm the appearance of recent vector entries from LangChain.
+
+image::ROOT:template-examples/langchain-screenshot.png["Screenshot"]
+
+[.header-noline]
+== Advanced Configuration
+
+[cols="1,1"]
+|===
+|Parameter |Description
+
+|Sync Frequency
+|The lower the value, the more frequent the sync, impacting server performance.
+
+Sample `30 min`
+
+|Data Volume Limit
+|The lower the value, the more frequent the sync, impacting server performance.
+
+Sample `500 MB`
+|===
+
+
+[.header-noline]
+== Troubleshotting
+[cols="1,1"]
+|===
+|Error |Solution
+
+|`LangChain API key invalid`
+|Make sure you copied the correct API key. Refresh or regenerate the key in the LangChain dashboard if necessary.
+
+|`Data sync failed`
+|Ensure both Astra and LangChain servers are running without issues. Check network connectivity and try syncing again after a few minutes.
+|===
+
+
+[.header-noline]
+== Next Steps
+
+[.ds-card]
+--
+[unstyled]
+* https://example.com[Advanced Natural Language Processing with Astra and LangChain] [.material-icons]#auto_stories# Tutorial 
++
+Dive into how the combination of Astra's vector database and LangChain's 
+linguistic prowess can enhance your NLP projects.
+--
+
+[.ds-card]
+--
+[unstyled.guide]
+* https://example.com[Optimizing Linguistic Vector Searches in Astra] [.material-icons]#auto_stories# Tutorial 
++
+Discover best practices and techniques to improve the efficiency and accuracy 
+of linguistic vector searches in Astra, leveraging LangChain integrations.
+--
+
+[.ds-card]
+--
+[unstyled]
+* https://example.com[Cohere] [.material-icons]#integration_instructions# Integration 
++
+Cohere provides advanced NLP models designed for a variety of tasks, ranging from text generation to understanding. 
+Their models offer a balance between performance and efficiency. 
+With Astra's integration, developers can effortlessly combine Cohere's capabilities with a powerful vector database solution.
+--

preview-src/examples/cohere.svg

@@ -0,0 +1,163 @@
+= Integrations
+:page-layout: tutorial
+:hugging-icon: image:hugging-face.svg[,20]
+:langchain-icon: image:langchain.svg[,20]
+:openai-icon: image:openai.svg[,20]
+:jina-icon: image:jina.svg[,20]
+:deepset-icon: image:deepset.svg[,20]
+:cohere-icon: image:cohere.svg[,20]
+:llamaindex-icon: image:llamaindex.svg[,20]
+:cassio-icon: image:cassio.svg[,20]
+
+Dive into our curated marketplace of integrations
+that elevate the capabilities of Astra's vector databases.
+Whether you're looking to amplify your machine learning workflows,
+visualize embeddings, or integrate real-time data processing,
+we've got you covered.
+
+[.ds-row.header-noline]
+== Recommended
+
+[.ds-row]
+--
+
+[.ds-card.ds-grid]
+====
+[discrete]
+==== Hugging Face
+
+[.text-overflow.line-3]
+Hugging Face offers one of the largest collections of pre-trained natural language processing (NLP) models. Its user-friendly Transformers library provides deep learning models optimized for tasks like text classification,
+sentiment analysis, and more. Integrating with Astra empowers developers
+to harness these models directly alongside their database operations.
+
+[.tags-container]
+[.tag]#Natural Language# [.tag]#Machine Learning# 
+
+[.landing-card-icon]
+{hugging-icon}
+====
+
+[.ds-card.ds-grid]
+====
+[discrete]
+==== OpenAI
+
+[.text-overflow.line-3]
+OpenAI, renowned for its groundbreaking models like GPT series, brings generative AI
+capabilities to the forefront. Through its API and tools, developers can generate
+human-like text, analyze data, or even create chatbots. Integration with Astra ensures
+that data can be fetched, analyzed, and stored seamlessly when working with OpenAI tools.
+
+[.tags-container]
+[.tag]#Natural Language# [.tag]#Machine Learning# 
+
+[.landing-card-icon.bg-black]
+{openai-icon}
+====
+
+--
+
+[.ds-row]
+--
+
+[.ds-card.ds-grid]
+====
+[discrete]
+==== LangChain
+
+[.text-overflow.line-3]
+LangChain provides an enriched environment for developers looking to infuse advanced
+language understanding into their applications. As a potent machine learning framework,
+it offers sophisticated models and tools tailored for natural language processing tasks.
+When integrated with Astra's vector databases, LangChain not only generates high-quality
+embeddings but also ensures real-time syncing of data, giving your applications
+an edge in language-based operations.
+
+[.tags-container]
+[.tag]#Natural Language# [.tag]#Machine Learning# 
+
+[.landing-card-icon]
+{langchain-icon}
+====
+
+[.ds-card.ds-grid]
+====
+[discrete]
+==== Jina
+
+[.text-overflow.line-3]
+Jina offers a neural search framework that aids in building search systems with deep learning.
+Whether it's text, images, or videos, Jina can index and retrieve data with high precision.
+Integration with Astra enables an optimized storage solution that complements Jina's search capabilities.
+
+[.tags-container]
+[.tag]#Natural Language# [.tag]#Machine Learning# 
+
+[.landing-card-icon]
+{jina-icon}
+====
+
+--
+
+
+== All Integrations
+
+[.ds-card.flow-col]
+--
+[unstyled]
+* *Deepset*
++
+[.text-overflow]
+Deepset is known for its tools that specialize in extracting insights from text data. With capabilities like question-answering, document search, and more, Deepset stands out for textual data analysis. When integrated with Astra, it offers a robust solution for businesses that rely heavily on textual analytics.
+
+[.material-icons]
+https://example.com[arrow_forward]
+
+[.landing-card-icon.full]
+{deepset-icon}
+--
+
+[.ds-card.flow-col]
+--
+[unstyled.guide]
+* *Cohere*
++
+[.text-overflow]
+Cohere provides advanced NLP models designed for a variety of tasks, ranging from text generation to understanding. Their models offer a balance between performance and efficiency. With Astra's integration, developers can effortlessly combine Cohere's capabilities with a powerful vector database solution.
+
+[.material-icons]
+https://example.com[arrow_forward]
+
+[.landing-card-icon]
+{cohere-icon}
+--
+
+[.ds-card.flow-col]
+--
+[unstyled]
+* *Llama Index*
++
+Simplify data indexing with LlamaIndex. Integrate with Astra's vector capabilities to boost data retrieval speeds and accuracy.
+
+[.material-icons]
+https://example.com[arrow_forward]
+
+[.landing-card-icon.bg-black]
+{llamaindex-icon}
+--
+
+[.ds-card.flow-col]
+--
+[unstyled]
+* *CassIO*
++
+[.text-overflow]
+A specialized library designed to abstract the intricacies of accessing Cassandra databases, perfect for AI and ML applications. Its integration with Astra enhances real-time data interactions.
+
+[.material-icons]
+https://example.com[arrow_forward]
+
+[.landing-card-icon]
+{cassio-icon}
+--