Readme refactor (#1963)

A refactoring of the README for dev along with content updates, new
badges, and a new leading gif

README.md

@@ -1,21 +1,49 @@
 <!-- markdownlint-disable MD030 -->
 
-# [![Langflow](https://github.com/langflow-ai/langflow/blob/dev/docs/static/img/hero.png)](https://www.langflow.org)
+# [![Langflow](./docs/static/img/hero.png)](https://www.langflow.org)
 
-### [Langflow](https://www.langflow.org) is a new, visual way to build, iterate and deploy AI apps.
+<p align="center"><strong>
+    A visual framework for building Gen-AI and RAG apps with LangChain
+</strong></p>
+<p align="center" style="font-size: 12px;">
+    Open-source, Python-powered, fully customizable, LLM and vector store agnostic
+</p>
 
-# ⚡️ Documentation and Community
+<p align="center" style="font-size: 12px;">
+    <a href="https://docs.langflow.org" style="text-decoration: underline;">Docs</a> - 
+    <a href="https://discord.com/invite/EqksyE2EX9" style="text-decoration: underline;">Join our Discord</a> - 
+    <a href="https://twitter.com/langflow_ai" style="text-decoration: underline;">Follow us on X</a> - 
+    <a href="https://huggingface.co/spaces/Langflow/Langflow-Preview" style="text-decoration: underline;">Live demo</a>
+</p>
 
-- [Documentation](https://docs.langflow.org)
+<p align="center">
-- [Discord](https://discord.com/invite/EqksyE2EX9)
+    <a href="https://github.com/langflow-ai/langflow">
+        <img src="https://img.shields.io/github/stars/langflow-ai/langflow">
+    </a>
+    <a href="https://discord.com/invite/EqksyE2EX9">
+        <img src="https://img.shields.io/discord/1116803230643527710?label=Discord">
+    </a>
+</p>
 
-# 📦 Installation
+<p align="center">
+  <img src="./docs/static/img/langflow_basic_howto.gif" alt="Your GIF" style="border: 3px solid #211C43;">
+</p>
+
+# 📝 Content
+
+- [Get Started](#-get-started)
+- [Create Flows](#-create-flows)
+- [Deploy](#deploy)
+- [Command Line Interface (CLI)](#️-command-line-interface-cli)
+- [Contribute](#-contribute)
+
+# 📦 Get Started
 
 You can install Langflow with pip:
 
 ```shell
-# Make sure you have Python 3.10 installed on your system.
+# Make sure you have Python 3.10 or greater installed on your system.
-# Install the pre-release version
+# Install the pre-release version (recommended for the latest updates)
 python -m pip install langflow --pre --force-reinstall
 
 # or stable version
@@ -28,9 +56,9 @@ Then, run Langflow with:
 python -m langflow run
 ```
 
-You can also preview Langflow in [HuggingFace Spaces](https://huggingface.co/spaces/Langflow/Langflow-Preview). [Clone the space using this link](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true), to create your own Langflow workspace in minutes.
+You can also preview Langflow in [HuggingFace Spaces](https://huggingface.co/spaces/Langflow/Langflow-Preview). [Clone the space using this link](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true) to create your own Langflow workspace in minutes.
 
-# 🎨 Creating Flows
+# 🎨 Create Flows
 
 Creating flows with Langflow is easy. Simply drag components from the sidebar onto the canvas and connect them to start building your application.
 
@@ -46,6 +74,32 @@ from langflow.load import run_flow_from_json
 results = run_flow_from_json("path/to/flow.json", input_value="Hello, World!")
 ```
 
+# Deploy
+
+## Deploy Langflow on Google Cloud Platform
+
+Follow our step-by-step guide to deploy Langflow on Google Cloud Platform (GCP) using Google Cloud Shell. The guide is available in the [**Langflow in Google Cloud Platform**](GCP_DEPLOYMENT.md) document.
+
+Alternatively, click the **"Open in Cloud Shell"** button below to launch Google Cloud Shell, clone the Langflow repository, and start an **interactive tutorial** that will guide you through the process of setting up the necessary resources and deploying Langflow on your GCP project.
+
+[![Open in Cloud Shell](https://gstatic.com/cloudssh/images/open-btn.svg)](https://console.cloud.google.com/cloudshell/open?git_repo=https://github.com/langflow-ai/langflow&working_dir=scripts/gcp&shellonly=true&tutorial=walkthroughtutorial_spot.md)
+
+## Deploy on Railway
+
+Use this template to deploy Langflow 1.0 Preview on Railway:
+
+[![Deploy 1.0 Preview on Railway](https://railway.app/button.svg)](https://railway.app/template/UsJ1uB?referralCode=MnPSdg)
+
+Or this one to deploy Langflow 0.6.x:
+
+[![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/template/JMXEWp?referralCode=MnPSdg)
+
+## Deploy on Render
+
+<a href="https://render.com/deploy?repo=https://github.com/langflow-ai/langflow/tree/main">
+<img src="https://render.com/images/deploy-to-render-button.svg" alt="Deploy to Render" />
+</a>
+
 # 🖥️ Command Line Interface (CLI)
 
 Langflow provides a command-line interface (CLI) for easy management and configuration.
@@ -87,33 +141,7 @@ You can configure many of the CLI options using environment variables. These can
 
 A sample `.env` file named `.env.example` is included with the project. Copy this file to a new file named `.env` and replace the example values with your actual settings. If you're setting values in both your OS and the `.env` file, the `.env` settings will take precedence.
 
-# Deployment
+# 👋 Contribute
-
-## Deploy Langflow on Google Cloud Platform
-
-Follow our step-by-step guide to deploy Langflow on Google Cloud Platform (GCP) using Google Cloud Shell. The guide is available in the [**Langflow in Google Cloud Platform**](GCP_DEPLOYMENT.md) document.
-
-Alternatively, click the **"Open in Cloud Shell"** button below to launch Google Cloud Shell, clone the Langflow repository, and start an **interactive tutorial** that will guide you through the process of setting up the necessary resources and deploying Langflow on your GCP project.
-
-[![Open in Cloud Shell](https://gstatic.com/cloudssh/images/open-btn.svg)](https://console.cloud.google.com/cloudshell/open?git_repo=https://github.com/langflow-ai/langflow&working_dir=scripts/gcp&shellonly=true&tutorial=walkthroughtutorial_spot.md)
-
-## Deploy on Railway
-
-Use this template to deploy Langflow 1.0 Preview on Railway:
-
-[![Deploy 1.0 Preview on Railway](https://railway.app/button.svg)](https://railway.app/template/UsJ1uB?referralCode=MnPSdg)
-
-Or this one to deploy Langflow 0.6.x:
-
-[![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/template/JMXEWp?referralCode=MnPSdg)
-
-## Deploy on Render
-
-<a href="https://render.com/deploy?repo=https://github.com/langflow-ai/langflow/tree/main">
-<img src="https://render.com/images/deploy-to-render-button.svg" alt="Deploy to Render" />
-</a>
-
-# 👋 Contributing
 
 We welcome contributions from developers of all levels to our open-source project on GitHub. If you'd like to contribute, please check our [contributing guidelines](./CONTRIBUTING.md) and help make Langflow more accessible.