Create a modern, professional website for "UgottaConnect" - an automation workflow platform that helps businesses and creators discover, plan, and implement automation solutions.
2414e36 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>UgottaConnect - Your Automation Orchestrator</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#2563eb', | |
| secondary: '#7c3aed', | |
| accent: '#f59e0b', | |
| 'accent-cyan': '#06b6d4' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gradient-to-br from-slate-50 to-blue-50 min-h-screen"> | |
| <!-- Navigation --> | |
| <custom-navbar></custom-navbar> | |
| <!-- Hero Section --> | |
| <section class="relative overflow-hidden"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 lg:py-32"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> | |
| <div class="space-y-8"> | |
| <h1 class="text-5xl lg:text-6xl font-bold text-gray-900 leading-tight"> | |
| Stop Building. <span class="text-primary">Start Connecting.</span> | |
| </h1> | |
| <p class="text-xl text-gray-600 leading-relaxed"> | |
| AI-powered automation planning that turns your ideas into workflows. Discover the perfect tools and connections to streamline your business. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4"> | |
| <a href="#pricing" class="bg-gradient-to-r from-primary to-secondary text-white px-8 py-4 rounded-xl font-semibold text-lg hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 text-center"> | |
| Get Your Free Automation Plan | |
| </a> | |
| <a href="#how-it-works" class="border-2 border-primary text-primary px-8 py-4 rounded-xl font-semibold text-lg hover:bg-primary hover:text-white transition-all duration-300 text-center"> | |
| See How It Works | |
| </a> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="relative z-10 bg-white/80 backdrop-blur-sm rounded-2xl p-8 shadow-2xl"> | |
| <div class="grid grid-cols-3 gap-4" id="node-visualization"> | |
| <!-- Node visualization will be populated by JavaScript --> | |
| </div> | |
| </div> | |
| <div class="absolute inset-0 bg-gradient-to-r from-primary/20 to-secondary/20 rounded-2xl transform rotate-6"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works --> | |
| <section id="how-it-works" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-bold text-gray-900 mb-4">How It Works</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Transform your workflow ideas into automated reality in just three simple steps</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="text-center p-8 rounded-2xl bg-gradient-to-br from-blue-50 to-purple-50 hover:shadow-lg transition-all duration-300"> | |
| <div class="w-16 h-16 bg-primary text-white rounded-full flex items-center justify-center text-2xl font-bold mx-auto mb-6">1</div> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-4">Tell Us What You Need</h3> | |
| <p class="text-gray-600">Describe your project or workflow challenge. Our AI understands natural language and business context.</p> | |
| </div> | |
| <div class="text-center p-8 rounded-2xl bg-gradient-to-br from-purple-50 to-pink-50 hover:shadow-lg transition-all duration-300"> | |
| <div class="w-16 h-16 bg-secondary text-white rounded-full flex items-center justify-center text-2xl font-bold mx-auto mb-6">2</div> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-4">Get Your Blueprint</h3> | |
| <p class="text-gray-600">Receive AI-analyzed recommendations with optimal tool combinations and connection strategies.</p> | |
| </div> | |
| <div class="text-center p-8 rounded-2xl bg-gradient-to-br from-pink-50 to-orange-50 hover:shadow-lg transition-all duration-300"> | |
| <div class="w-16 h-16 bg-accent text-white rounded-full flex items-center justify-center text-2xl font-bold mx-auto mb-6">3</div> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-4">Connect & Automate</h3> | |
| <p class="text-gray-600">Follow our step-by-step setup guide or let our experts build the automation for you.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Solutions --> | |
| <section class="py-20 bg-gradient-to-br from-slate-50 to-blue-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-bold text-gray-900 mb-4">Featured Solutions</h2> | |
| <p class="text-xl text-gray-600">Pre-built automation templates for common business challenges</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <custom-solution-card | |
| title="Content Creation Pipeline" | |
| description="Automate content planning, creation, and distribution across multiple platforms" | |
| icon="file-text" | |
| category="Marketing" | |
| ></custom-solution-card> | |
| <custom-solution-card | |
| title="Lead Generation & CRM" | |
| description="Capture, qualify, and nurture leads automatically with smart CRM integration" | |
| icon="users" | |
| category="Sales" | |
| ></custom-solution-card> | |
| <custom-solution-card | |
| title="Social Media Automation" | |
| description="Schedule, publish, and analyze social media content across all channels" | |
| icon="share-2" | |
| category="Marketing" | |
| ></custom-solution-card> | |
| <custom-solution-card | |
| title="E-commerce Operations" | |
| description="Streamline inventory, orders, shipping, and customer communication" | |
| icon="shopping-cart" | |
| category="E-commerce" | |
| ></custom-solution-card> | |
| <custom-solution-card | |
| title="Development Workflows" | |
| description="Automate testing, deployment, and code management for development teams" | |
| icon="code" | |
| category="Development" | |
| ></custom-solution-card> | |
| <custom-solution-card | |
| title="Data Analytics & Reporting" | |
| description="Collect, process, and visualize data automatically with real-time dashboards" | |
| icon="bar-chart-2" | |
| category="Analytics" | |
| ></custom-solution-card> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Tools We Connect --> | |
| <section class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-bold text-gray-900 mb-4">Tools We Connect</h2> | |
| <p class="text-xl text-gray-600">Integrate with your favorite tools and discover new ones</p> | |
| </div> | |
| <custom-tools-carousel></custom-tools-carousel> | |
| </div> | |
| </section> | |
| <!-- Pricing --> | |
| <section id="pricing" class="py-20 bg-gradient-to-br from-slate-50 to-blue-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-bold text-gray-900 mb-4">Simple, Transparent Pricing</h2> | |
| <p class="text-xl text-gray-600">Choose the plan that fits your automation needs</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto"> | |
| <custom-pricing-card | |
| plan="Blueprint" | |
| price="Free" | |
| description="Perfect for getting started with automation" | |
| features='["1 automation plan per month", "Basic tool recommendations", "Community support", "Email setup guides"]' | |
| cta-text="Get Started" | |
| popular="false" | |
| ></custom-pricing-card> | |
| <custom-pricing-card | |
| plan="Architect" | |
| price="$29" | |
| period="/month" | |
| description="For growing businesses and teams" | |
| features='["Unlimited automation plans", "Priority AI recommendations", "Advanced workflow templates", "Email & chat support", "API access"]' | |
| cta-text="Start Free Trial" | |
| popular="true" | |
| ></custom-pricing-card> | |
| <custom-pricing-card | |
| plan="White Glove" | |
| price="Custom" | |
| description="Full-service automation implementation" | |
| features='["Everything in Architect", "Dedicated automation expert", "Custom tool integration", "24/7 priority support", "SLA guarantees"]' | |
| cta-text="Contact Sales" | |
| popular="false" | |
| ></custom-pricing-card> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter --> | |
| <section class="py-20 bg-gradient-to-r from-primary to-secondary"> | |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h2 class="text-3xl font-bold text-white mb-4">Weekly Automation Tips & New Tool Alerts</h2> | |
| <p class="text-blue-100 text-xl mb-8">Stay updated with the latest automation strategies and tool discoveries</p> | |
| <custom-newsletter-form></custom-newsletter-form> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <custom-footer></custom-footer> | |
| <!-- Component Scripts --> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/solution-card.js"></script> | |
| <script src="components/tools-carousel.js"></script> | |
| <script src="components/pricing-card.js"></script> | |
| <script src="components/newsletter-form.js"></script> | |
| <script src="components/footer.js"></script> | |
| <!-- Main Script --> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |