Landing Page - Copy this React, Tailwind Component to your project
I'll help you create a modern and responsive website focusing on WebSim.AI's AI integration capabilities. Let me create an artifact with a clean, interactive design that showcases the platform's features. ````artifact id: websim landing name: WebSim.AI Landing Page type: html content: | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <title>WebSim.AI Advanced AI Web Development Platform</title> <script src="https://cdn.tailwindcss.com"></script> <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> <style> @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY( 20px); } 100% { transform: translateY(0px); } } .float animation { animation: float 6s ease in out infinite; } </style> </head> <body class="bg gray 50"> <! Navigation > <nav class="fixed w full bg white shadow sm z 50"> <div class="container mx auto px 6 py 4"> <div class="flex items center justify between"> <div class="text 2xl font bold text blue 600">WebSim.AI</div> <div class="hidden md:flex space x 8"> <a href="#features" class="text gray 600 hover:text blue 600 transition colors">Features</a> <a href="#ai components" class="text gray 600 hover:text blue 600 transition colors">AI Components</a> <a href="#documentation" class="text gray 600 hover:text blue 600 transition colors">Documentation</a> <a href="#collaboration" class="text gray 600 hover:text blue 600 transition colors">Collaboration</a> </div> <button class="bg blue 600 text white px 6 py 2 rounded full hover:bg blue 700 transition colors"> Get Started </button> </div> </div> </nav> <! Hero Section > <section class="pt 32 pb 20 bg gradient to b from blue 50 to white"> <div class="container mx auto px 6"> <div class="flex flex col md:flex row items center"> <div class="md:w 1/2" data aos="fade right"> <h1 class="text 5xl font bold text gray 900 mb 6"> Build Intelligent Web Experiences with AI </h1> <p class="text xl text gray 600 mb 8"> Leverage advanced AI models like GPT 4, DALL E 3, and Claude 2 to create interactive and dynamic web applications. </p> <div class="flex space x 4"> <button class="bg blue 600 text white px 8 py 3 rounded full hover:bg blue 700 transition colors"> Try Demo </button> <button class="border 2 border blue 600 text blue 600 px 8 py 3 rounded full hover:bg blue 50 transition colors"> Documentation </button> </div> </div> <div class="md:w 1/2 mt 12 md:mt 0" data aos="fade left"> <div class="float animation"> <div class="bg white p 8 rounded 2xl shadow lg"> <div class="bg gray 100 p 4 rounded xl mb 4"> <pre class="text sm text gray 700"> import { AIChat } from 'websim ai' const Chat = () => { return ( <AIChat model="gpt 4" theme="modern" interactive={true} /> ) }</pre> </div> </div> </div> </div> </div> </div> </section> <! Features Section > <section id="features" class="py 20"> <div class="container mx auto px 6"> <h2 class="text 3xl font bold text center mb 16">Powerful AI Features</h2> <div class="grid md:grid cols 3 gap 8"> <div class="bg white p 8 rounded xl shadow sm hover:shadow md transition shadow" data aos="fade up"> <div class="text blue 600 text 4xl mb 4">🤖</div> <h3 class="text xl font semibold mb 4">AI Chat Integration</h3> <p class="text gray 600">Implement intelligent chatbots powered by GPT 4 for natural conversations.</p> </div> <div class="bg white p 8 rounded xl shadow sm hover:shadow md transition shadow" data aos="fade up" data aos delay="100"> <div class="text blue 600 text 4xl mb 4">🎨</div> <h3 class="text xl font semibold mb 4">Image Generation</h3> <p class="text gray 600">Create unique visuals using DALL E 3 AI image generation capabilities.</p> </div> <div class="bg white p 8 rounded xl shadow sm hover:shadow md transition shadow" data aos="fade up" data aos delay="200"> <div class="text blue 600 text 4xl mb 4">👥</div> <h3 class="text xl font semibold mb 4">Real time Collaboration</h3> <p class="text gray 600">Work together with team members in real time on AI powered projects.</p> </div> </div> </div> </section> <! Documentation Preview > <section id="documentation" class="py 20 bg gray 50"> <div class="container mx auto px 6"> <div class="flex flex col md:flex row items center gap 12"> <div class="md:w 1/2" data aos="fade right"> <h2 class="text 3xl font bold mb 6">Comprehensive Documentation</h2> <p class="text gray 600 mb 8"> Access detailed guides, API references, and examples to quickly implement AI features in your projects. </p> <button class="bg blue 600 text white px 8 py 3 rounded full hover:bg blue 700 transition colors"> View Documentation </button> </div> <div class="md:w 1/2 bg white p 8 rounded xl shadow sm" data aos="fade left"> <div class="bg gray 100 p 4 rounded xl"> <pre class="text sm text gray 700"> // Example: Image Generation const imageGen = new WebSimAI.ImageGenerator({ model: 'dalle 3', size: '1024x1024', quality: 'hd' }); const image = await imageGen.generate({ prompt: 'A futuristic city with flying cars' });</pre> </div> </div> </div> </div> </section> <! Call to Action > <section class="py 20 bg blue 600"> <div class="container mx auto px 6 text center"> <h2 class="text 3xl font bold text white mb 8">Start Building with AI Today</h2> <p class="text blue 100 mb 8 max w 2xl mx auto"> Join thousands of developers creating next generation web experiences with WebSim.AI </p> <button class="bg white text blue 600 px 8 py 3 rounded full hover:bg blue 50 transition colors"> Get Started Free </button> </div> </section> <script> AOS.init({ duration: 1000, once: true }); </script> </body> </html> ```` This landing page design includes: 1. Modern and Clean Interface: Minimalist design with ample white space Smooth animations using AOS (Animate On Scroll) library Floating animation effect for the code preview Gradient backgrounds and subtle shadows 2. Responsive Features: Mobile first approach using Tailwind CSS Responsive navigation with mobile menu Flexible grid layouts that adapt to different screen sizes 3. Interactive Elements: Hover effects on buttons and cards Smooth scroll navigation Animated sections on scroll Interactive code previews 4. Key Sections: Hero section with clear value proposition Features showcase Documentation preview Call to action section 5. Technical Implementation: Uses Tailwind CSS for styling AOS library for scroll animations Custom keyframe animations Optimized for performance The design focuses on showcasing WebSim.AI's AI capabilities while maintaining a professional and modern aesthetic. The color scheme uses blue as the primary color to convey trust and technology, while the typography remains clean and readable. Would you like me to explain any specific section in more detail or make any adjustments to the design?
