Create a landing page for Lamatic AI Google Drive Chatbot with the following specifications:

1. Header/Navigation:

   • Use the Lamatic AI logo (display from the provided image) on the left, linking to https://lamatic.ai
   • Include these custom buttons in the right side of the navbar:
   <div className="flex gap-4"> <a href="https://lamatic.ai/docs" target="_blank" rel="noopener noreferrer" className="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors flex items-center gap-1"> <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" xmlns="http://www.w3.org/2000/svg"> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /> </svg> Docs </a> <a href="https://github.com/Lamatic/lamatic-sdk-ts" target="_blank" rel="noopener noreferrer" className="px-4 py-2 bg-gray-800 text-white rounded-md hover:bg-gray-900 transition-colors flex items-center gap-1"> <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/> </svg> GitHub </a> </div>

2. Main Content:

   • A hero section explaining that Lamatic AI is a chatbot that answers questions from Google Drive documents
   • A "How It Works" section explaining:
     • Authenticate with Google OAuth in our flow
     • Select your folder from Google Drive
     • We vectorize and index your documents
     • The second flow builds a RAG-based chatbot for your documents

3. Display Area:

   • An iframe displaying the Google Drive folder content from this link: https://drive.google.com/drive/folders/1oeBVP-aokrik2iSlb9QYNQZXZ13ViXvs?usp=sharing
   • A chat interface below/beside the iframe

• make sure this is displayed

4. Chat Integration:

   • Include this script for the chatbot functionality. just add this script it will automatically make the chatbot appear. It does not need a seperate tab. It is a widget which will come automatically
   <script async> (function () { // Wait for DOM to be fully loaded document.addEventListener("DOMContentLoaded", function () { const PROJECT_ID = '1f5577bb-ec4a-4db1-a883-bbdd90f3078d'; const FLOW_ID = '120e7afc-9695-4f53-a883-8b4f1fafb3fb'; const API_URL = 'https://production-lamaticshowcase-googledrivechatbot533.lamatic.workers.dev'; // Create the root element const root = document.createElement("div"); root.id = "lamatic-chat-root"; root.dataset.apiUrl = API_URL; root.dataset.flowId = FLOW_ID; root.dataset.projectId = PROJECT_ID; document.body.appendChild(root); // Load the script const script = document.createElement("script"); script.type = "module"; script.src = `https://widget.lamatic.ai/chat-v2?projectId=${PROJECT_ID}`; document.body.appendChild(script); }); })(); </script>

5. Style/Theming:

   • Use a color scheme based on the Lamatic AI logo (black and red accents)
   • Clean, modern UI with responsive design
   • DO NOT include the line "The chatbot is powered by..." anywhere in the design

Make sure the application is fully functional in a single page with all components properly integrated.