Create a modern, professional website for "UgottaConnect" - an automation workflow platform that helps businesses and creators discover, plan, and implement automation solutions.

BRAND IDENTITY:
- Company: UgottaConnect (Ugottaconnect.com)
- Tagline: "Your Automation Orchestrator"
- Mission: Simplify workflow automation through intelligent tool recommendations and connection strategies

TARGET AUDIENCE:
- Entrepreneurs and small business owners
- Content creators and digital marketers
- Developers looking for automation shortcuts
- Teams wanting to streamline operations

WEBSITE STRUCTURE:

1. HERO SECTION
- Headline: "Stop Building. Start Connecting."
- Subheadline: "AI-powered automation planning that turns your ideas into workflows"
- CTA: "Get Your Free Automation Plan" + "See How It Works"
- Visual: Animated node-connection diagram showing tools linking together

2. HOW IT WORKS (3-Step Process)
- Step 1: "Tell Us What You Need" - Describe your project or workflow
- Step 2: "Get Your Blueprint" - AI analyzes and suggests optimal tool combinations
- Step 3: "Connect & Automate" - Follow our setup guide or let us build it

3. FEATURED SOLUTIONS (Cards)
- Content Creation Pipeline
- Lead Generation & CRM
- Social Media Automation
- E-commerce Operations
- Development Workflows
- Data Analytics & Reporting

4. TOOLS WE CONNECT
- Visual grid/carousel of popular tools: n8n, Zapier, Make, Airtable, Notion, GitHub, Cloudflare, Stripe, OpenAI, etc.
- "...and 500+ more tools"

5. USE CASE EXAMPLES
- "Auto-post YouTube videos to social media"
- "Sync Google Sheets to website database"
- "Generate images from blog posts automatically"
- Interactive demo showing before/after workflow

6. PRICING (3 Tiers)
- Free: "Blueprint" - Get 1 automation plan/month
- Pro: "Architect" - Unlimited plans + priority support ($29/mo)
- Enterprise: "White Glove" - We build it for you (Custom pricing)

7. TOOL DISCOVERY SECTION
- "Latest Tools We're Tracking"
- Live feed of recent Product Hunt launches relevant to automation
- Filter by category: Marketing, Development, Analytics, etc.

8. FOOTER
- About UgottaGroup ecosystem
- Links to Ugot2AI.org and Ugottaplay
- Newsletter signup: "Weekly automation tips & new tool alerts"

TECHNICAL REQUIREMENTS:
- Framework: Use modern React with Next.js 14+ (App Router)
- Styling: Tailwind CSS with custom design system
- Animations: Framer Motion for smooth transitions
- Components: Modular, reusable component architecture
- Responsive: Mobile-first design
- Performance: Optimized for Core Web Vitals
- Accessibility: WCAG 2.1 AA compliant

DESIGN AESTHETIC:
- Modern, clean, slightly tech-forward
- Color scheme: Deep blues/purples (trust, tech) with vibrant accent colors (orange/cyan for CTAs)
- Typography: Clean sans-serif (Inter or similar)
- Generous white space
- Subtle gradients and glass-morphism effects
- Connection/network theme throughout (nodes, lines, flows)

SPECIAL FEATURES:
- Interactive automation calculator: "How much time will you save?"
- Live API status indicators showing tool availability
- Searchable tool directory with tags/filters
- Embedded workflow visualizations
- Chat widget for immediate questions

PAGES TO BUILD:
1. Homepage (main landing)
2. /tools (directory of all supported integrations)
3. /solutions (use case examples with templates)
4. /about (company story, team, mission)
5. /pricing
6. /blog (automation tips, tool reviews, case studies)
7. /contact

OUTPUT FORMAT:
- Complete file structure for Next.js app
- All React components with full code
- Tailwind config with custom theme
- Sample content for each section
- README with setup instructions
- Deployment guide for Hostinger

BONUS REQUESTS:
- Include a "Workflow Builder" demo component
- Add dark mode toggle
- Create reusable "Tool Card" component for directory
- Build email capture form with validation
```

---

README.md

@@ -1,10 +1,13 @@
 ---
-title: Workflow Wizard Orchestrator
-emoji: ⚡
-colorFrom: blue
+title: Workflow Wizard Orchestrator 🚀
+colorFrom: yellow
 colorTo: purple
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/navbar.js

@@ -0,0 +1,101 @@
+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .nav-link {
+                    position: relative;
+                    transition: color 0.3s ease;
+                }
+                .nav-link:hover::after {
+                    width: 100%;
+                }
+                .nav-link::after {
+                    content: '';
+                    position: absolute;
+                    bottom: -2px;
+                    left: 0;
+                    width: 0;
+                    height: 2px;
+                    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
+                    transition: width 0.3s ease;
+                }
+            </style>
+            <nav class="bg-white/80 backdrop-blur-sm border-b border-gray-200 sticky top-0 z-50">
+                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                    <div class="flex justify-between items-center py-4">
+                        <!-- Logo -->
+                        <div class="flex items-center">
+                            <a href="/" class="text-2xl font-bold text-gray-900 flex items-center">
+                                <i data-feather="zap" class="text-primary mr-2"></i>
+                                UgottaConnect
+                            </a>
+                        </div>
+
+                        <!-- Desktop Navigation -->
+                        <div class="hidden lg:flex items-center space-x-8">
+                            <a href="/" class="nav-link text-gray-700 hover:text-primary font-medium">Home</a>
+                            <a href="/tools" class="nav-link text-gray-700 hover:text-primary font-medium">Tools</a>
+                            <a href="/solutions" class="nav-link text-gray-700 hover:text-primary font-medium">Solutions</a>
+                            <a href="/pricing" class="nav-link text-gray-700 hover:text-primary font-medium">Pricing</a>
+                            <a href="/blog" class="nav-link text-gray-700 hover:text-primary font-medium">Blog</a>
+                            <a href="/about" class="nav-link text-gray-700 hover:text-primary font-medium">About</a>
+                        </div>
+
+                        <!-- Auth Buttons -->
+                        <div class="hidden lg:flex items-center space-x-4">
+                            <a href="/login" class="text-gray-700 hover:text-primary font-medium">Login</a>
+                            <a href="/signup" class="bg-gradient-to-r from-primary to-secondary text-white px-6 py-2 rounded-lg font-medium hover:shadow-lg transition-all duration-300">
+                                Sign Up Free
+                            </a>
+                            <button data-dark-mode-toggle class="p-2 rounded-lg hover:bg-gray-100 transition-colors">
+                                <i data-feather="moon"></i>
+                            </button>
+                        </div>
+
+                        <!-- Mobile menu button -->
+                        <div class="lg:hidden">
+                            <button id="mobile-menu-button" class="p-2 rounded-lg hover:bg-gray-100 transition-colors">
+                                <i data-feather="menu"></i>
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- Mobile Navigation -->
+                    <div id="mobile-menu" class="lg:hidden hidden pt-4 pb-6 border-t border-gray-200">
+                        <div class="flex flex-col space-y-4">
+                            <a href="/" class="text-gray-700 hover:text-primary font-medium">Home</a>
+                            <a href="/tools" class="text-gray-700 hover:text-primary font-medium">Tools</a>
+                            <a href="/solutions" class="text-gray-700 hover:text-primary font-medium">Solutions</a>
+                            <a href="/pricing" class="text-gray-700 hover:text-primary font-medium">Pricing</a>
+                            <a href="/blog" class="text-gray-700 hover:text-primary font-medium">Blog</a>
+                            <a href="/about" class="text-gray-700 hover:text-primary font-medium">About</a>
+                            <div class="pt-4 border-t border-gray-200">
+                                <a href="/login" class="text-gray-700 hover:text-primary font-medium block">Login</a>
+                                <a href="/signup" class="bg-gradient-to-r from-primary to-secondary text-white px-4 py-2 rounded-lg font-medium hover:shadow-lg transition-all duration-300 mt-2 block text-center">
+                                Sign Up Free
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </nav>
+        `;
+
+        // Mobile menu functionality
+        const mobileMenuButton = this.shadowRoot.getElementById('mobile-menu-button');
+        const mobileMenu = this.shadowRoot.getElementById('mobile-menu');
+
+        mobileMenuButton.addEventListener('click', () => {
+            mobileMenu.classList.toggle('hidden');
+            const icon = mobileMenuButton.querySelector('i');
+            if (mobileMenu.classList.contains('hidden')) {
+                icon.setAttribute('data-feather', 'menu');
+            } else {
+                icon.setAttribute('data-feather', 'x');
+            }
+            feather.replace();
+        });
+    }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

components/pricing-card.js

@@ -0,0 +1,45 @@
+class CustomPricingCard extends HTMLElement {
+    connectedCallback() {
+        const plan = this.getAttribute('plan') || 'Plan';
+        const price = this.getAttribute('price') || '$0';
+        const period = this.getAttribute('period') || '';
+        const description = this.getAttribute('description') || '';
+        const features = JSON.parse(this.getAttribute('features') || '[]');
+        const ctaText = this.getAttribute('cta-text') || 'Get Started';
+        const popular = this.getAttribute('popular') === 'true';
+
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .pricing-card {
+                    transition: all 0.3s ease;
+                }
+                .pricing-card:hover {
+                    transform: translateY(-5px);
+                }
+                .popular-card {
+                    border: 2px solid #3b82f6;
+                }
+            </style>
+            <div class="pricing-card ${popular ? 'popular-card bg-white relative' : 'bg-white'} rounded-2xl p-8 shadow-lg border border-gray-100">
+                ${popular ? `
+                    <div class="popular-badge text-white text-xs font-bold px-4 py-1 rounded-full absolute -top-3 left-1/2 transform -translate-x-1/2">
+                        Most Popular
+                    </div>
+                ` : ''}
+                <h3 class="text-2xl font-bold text-gray-900 mb-2">${plan}</h3>
+                <div class="flex items-baseline mb-4">
+                    <span class="text-4xl font-bold text-gray-900">${price}</span>
+                    <span class="text-gray-600 ml-1">${period}</span>
+                </div>
+                <p class="text-gray-600 mb-6">${description}</p>
+                <ul class="space-y-3 mb-8">
+                    ${features.map(feature => `
+                        <li class="flex items-center">
+                            <i data-feather="check" class="w-4 h-4 text-green-500 mr-3"></i>
+                        <span class="text-gray-600">${feature}</span>
+                        </li>
+                    `).join('')}
+                </ul>
+                <button class="w-full ${popular ? 'bg-gradient-to-r from-primary to-secondary' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'} text-white py-3 rounded-xl font-semibold transition-all duration-300">
+                    ${

components/solution-card.js

@@ -0,0 +1,46 @@
+class CustomSolutionCard extends HTMLElement {
+    connectedCallback() {
+        const title = this.getAttribute('title') || 'Solution';
+        const description = this.getAttribute('description') || 'Automate your workflow with this solution';
+        const icon = this.getAttribute('icon') || 'settings';
+        const category = this.getAttribute('category') || 'General';
+
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .card {
+                    transition: all 0.3s ease;
+                }
+                .card:hover {
+                    transform: translateY(-5px);
+                }
+            </style>
+            <div class="card bg-white rounded-2xl p-6 shadow-md border border-gray-100 hover:shadow-xl cursor-pointer">
+                <div class="flex items-start justify-between mb-4">
+                    <div class="w-12 h-12 bg-gradient-to-r from-primary to-secondary rounded-xl flex items-center justify-center">
+                    <i data-feather="${icon}"></i>
+                </div>
+                <div class="flex items-center mb-2">
+                    <span class="text-xs font-semibold bg-primary/10 text-primary px-3 py-1 rounded-full">
+                    ${category}
+                </span>
+                </div>
+                <h3 class="text-xl font-bold text-gray-900 mb-3">${title}</h3>
+                <p class="text-gray-600 leading-relaxed mb-4">${description}</p>
+                <div class="flex items-center text-primary font-semibold">
+                    <span>Learn More</span>
+                    <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
+                </div>
+            </div>
+        `;
+
+        // Add click handler to navigate to solution detail
+        const card = this.shadowRoot.querySelector('.card');
+        card.addEventListener('click', () => {
+            const solutionSlug = title.toLowerCase().replace(/[^a-z0-9]+/g, '-');
+            window.location.href = `/solutions/${solutionSlug}`;
+        });
+    }
+}
+
+customElements.define('custom-solution-card', CustomSolutionCard);

components/tools-carousel.js

@@ -0,0 +1,42 @@
+class CustomToolsCarousel extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .tool-grid {
+                    display: grid;
+                    grid-template-columns: repeat(4, 1fr);
+                    gap: 1rem;
+                }
+                @media (max-width: 768px) {
+                    .tool-grid {
+                        grid-template-columns: repeat(2, 1fr);
+                    }
+                }
+                .fade-in {
+                    opacity: 0;
+                    transform: translateY(20px);
+                    transition: all 0.6s ease;
+                }
+                .fade-in.animate-in {
+                    opacity: 1;
+                    transform: translateY(0);
+                }
+            </style>
+            <div class="fade-in">
+                <div class="tool-grid mb-8"></div>
+                <div class="text-center">
+                    <p class="text-gray-600 text-lg">
+                        ...and 500+ more tools in our directory
+                    </p>
+                    <a href="/tools" class="inline-flex items-center text-primary font-semibold mt-4">
+                        <span>Explore All Tools</span>
+                        <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
+                    </a>
+                </div>
+            </div>
+        `;
+    }
+}
+
+customElements.define('custom-tools-carousel', CustomToolsCarousel);

index.html

@@ -1,19 +1,213 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<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>

script.js

@@ -0,0 +1,277 @@
+// Main JavaScript for UgottaConnect
+document.addEventListener('DOMContentLoaded', function() {
+    initializeNodeVisualization();
+    initializeToolCarousel();
+    initializeNewsletterForm();
+    initializeDarkModeToggle();
+});
+
+// Node connection visualization
+function initializeNodeVisualization() {
+    const container = document.getElementById('node-visualization');
+    if (!container) return;
+
+    const tools = [
+        { name: 'n8n', icon: 'box', color: 'bg-blue-500' },
+        { name: 'Zapier', icon: 'zap', color: 'bg-orange-500' },
+        { name: 'Airtable', icon: 'database', color: 'bg-purple-500' },
+        { name: 'Notion', icon: 'file-text', color: 'bg-gray-800' },
+        { name: 'GitHub', icon: 'github', color: 'bg-gray-900' },
+        { name: 'Stripe', icon: 'credit-card', color: 'bg-blue-600' },
+        { name: 'OpenAI', icon: 'cpu', color: 'bg-green-600' },
+        { name: 'Slack', icon: 'message-circle', color: 'bg-purple-600' },
+        { name: 'Google', icon: 'mail', color: 'bg-red-500' }
+    ];
+
+    // Create nodes
+    tools.forEach((tool, index) => {
+        const node = document.createElement('div');
+        node.className = `node ${tool.color} text-white flex flex-col items-center justify-center p-2 rounded-xl shadow-lg`;
+        node.innerHTML = `
+            <i data-feather="${tool.icon}"></i>
+            <span class="text-xs mt-1 font-medium">${tool.name}</span>
+        `;
+        container.appendChild(node);
+    });
+
+    // Animate connections
+    setTimeout(() => {
+        createConnections();
+    }, 1000);
+}
+
+function createConnections() {
+    const nodes = document.querySelectorAll('.node');
+    const container = document.getElementById('node-visualization');
+    
+    nodes.forEach((node, index) => {
+        if (index < nodes.length - 1) {
+            const nextNode = nodes[index + 1];
+            const line = document.createElement('div');
+            line.className = 'connection-line';
+            
+            const rect1 = node.getBoundingClientRect();
+            const rect2 = nextNode.getBoundingClientRect();
+            const containerRect = container.getBoundingClientRect();
+            
+            const x1 = rect1.left + rect1.width / 2 - containerRect.left;
+            const y1 = rect1.top + rect1.height / 2 - containerRect.top;
+            const x2 = rect2.left + rect2.width / 2 - containerRect.left;
+            const y2 = rect2.top + rect2.height / 2 - containerRect.top;
+            
+            const length = Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
+            const angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
+            
+            line.style.width = `${length}px`;
+            line.style.transform = `rotate(${angle}deg)`;
+            line.style.top = `${y1}px`;
+            line.style.left = `${x1}px`;
+            
+            container.appendChild(line);
+        }
+    });
+}
+
+// Tool carousel functionality
+function initializeToolCarousel() {
+    const carousel = document.querySelector('custom-tools-carousel');
+    if (!carousel) return;
+
+    let currentIndex = 0;
+    const tools = [
+        'n8n', 'Zapier', 'Make', 'Airtable', 'Notion', 'GitHub', 'Cloudflare', 
+        'Stripe', 'OpenAI', 'Slack', 'Google', 'Microsoft', 'Salesforce',
+        'HubSpot', 'Mailchimp', 'Twitter', 'Facebook', 'Instagram', 'YouTube'
+    ];
+
+    function updateCarousel() {
+        const shadow = carousel.shadowRoot;
+        if (!shadow) return;
+
+        const toolGrid = shadow.querySelector('.tool-grid');
+        if (!toolGrid) return;
+
+        // Rotate tools
+        const visibleTools = tools.slice(currentIndex, currentIndex + 8);
+        if (visibleTools.length < 8) {
+            visibleTools.push(...tools.slice(0, 8 - visibleTools.length));
+        }
+
+        toolGrid.innerHTML = '';
+        visibleTools.forEach(tool => {
+            const toolElement = document.createElement('div');
+            toolElement.className = 'tool-card bg-white p-4 rounded-xl shadow-md border border-gray-100 flex items-center justify-center hover:shadow-lg transition-all duration-300';
+            toolElement.innerHTML = `
+                <div class="text-center">
+                    <div class="w-12 h-12 bg-gradient-to-r from-primary to-secondary rounded-lg flex items-center justify-center mx-auto mb-2">
+                        <i data-feather="${getToolIcon(tool)}"></i>
+                    </div>
+                    <span class="text-sm font-medium text-gray-700">${tool}</span>
+                </div>
+            `;
+            toolGrid.appendChild(toolElement);
+        });
+
+        currentIndex = (currentIndex + 1) % tools.length;
+    }
+
+    // Update carousel every 3 seconds
+    setInterval(updateCarousel, 3000);
+    updateCarousel(); // Initial call
+}
+
+function getToolIcon(toolName) {
+    const iconMap = {
+        'n8n': 'box',
+        'Zapier': 'zap',
+        'Make': 'settings',
+        'Airtable': 'database',
+        'Notion': 'file-text',
+        'GitHub': 'github',
+        'Cloudflare': 'cloud',
+        'Stripe': 'credit-card',
+        'OpenAI': 'cpu',
+        'Slack': 'message-circle',
+        'Google': 'mail',
+        'Microsoft': 'briefcase',
+        'Salesforce': 'trending-up',
+        'HubSpot': 'target',
+        'Mailchimp': 'send',
+        'Twitter': 'twitter',
+        'Facebook': 'facebook',
+        'Instagram': 'instagram',
+        'YouTube': 'youtube'
+    };
+    return iconMap[toolName] || 'link';
+}
+
+// Newsletter form handling
+function initializeNewsletterForm() {
+    const form = document.querySelector('custom-newsletter-form');
+    if (!form) return;
+
+    form.addEventListener('submit', function(e) {
+        e.preventDefault();
+        const shadow = form.shadowRoot;
+        const emailInput = shadow.querySelector('input[type="email"]');
+        const submitBtn = shadow.querySelector('button[type="submit"]');
+        
+        if (!validateEmail(emailInput.value)) {
+            showFormError(shadow, 'Please enter a valid email address');
+            return;
+        }
+
+        // Simulate API call
+        submitBtn.disabled = true;
+        submitBtn.innerHTML = '<div class="spinner"></div>';
+
+        setTimeout(() => {
+            showFormSuccess(shadow, 'Success! You\'ve been added to our newsletter.');
+            emailInput.value = '';
+            submitBtn.disabled = false;
+            submitBtn.textContent = 'Subscribe';
+        }, 1500);
+    });
+}
+
+function validateEmail(email) {
+    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return re.test(email);
+}
+
+function showFormError(shadow, message) {
+    let errorDiv = shadow.querySelector('.error-message');
+    if (!errorDiv) {
+        errorDiv = document.createElement('div');
+        errorDiv.className = 'error-message text-center mt-2';
+        shadow.querySelector('form').appendChild(errorDiv);
+    }
+    errorDiv.textContent = message;
+    
+    setTimeout(() => {
+        errorDiv.textContent = '';
+    }, 5000);
+}
+
+function showFormSuccess(shadow, message) {
+    const successDiv = document.createElement('div');
+    successDiv.className = 'text-green-600 text-center mt-2 font-medium';
+    successDiv.textContent = message;
+    shadow.querySelector('form').appendChild(successDiv);
+    
+    setTimeout(() => {
+        successDiv.remove();
+    }, 5000);
+}
+
+// Dark mode functionality
+function initializeDarkModeToggle() {
+    const toggle = document.querySelector('[data-dark-mode-toggle]');
+    if (!toggle) return;
+
+    toggle.addEventListener('click', function() {
+        const html = document.documentElement;
+        if (html.classList.contains('dark')) {
+            html.classList.remove('dark');
+            localStorage.setItem('darkMode', 'false');
+        } else {
+            html.classList.add('dark');
+            localStorage.setItem('darkMode', 'true');
+        }
+        feather.replace();
+    });
+
+    // Check for saved dark mode preference
+    if (localStorage.getItem('darkMode') === 'true') {
+        document.documentElement.classList.add('dark');
+    }
+}
+
+// Intersection Observer for animations
+function initializeScrollAnimations() {
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('animate-in');
+            }
+        });
+    }, {
+        threshold: 0.1
+    });
+
+    // Observe elements that should animate on scroll
+    document.querySelectorAll('.fade-in').forEach(el => {
+        observer.observe(el);
+    });
+}
+
+// API status check
+async function checkAPIStatus() {
+    try {
+        const response = await fetch('https://api.ugottaconnect.com/status');
+        const data = await response.json();
+        updateStatusIndicators(data);
+    } catch (error) {
+        console.error('Failed to fetch API status:', error);
+    }
+}
+
+function updateStatusIndicators(statusData) {
+    // Update status indicators in the UI
+    const indicators = document.querySelectorAll('[data-api-status]');
+    indicators.forEach(indicator => {
+        const service = indicator.dataset.apiService;
+        if (statusData[service] === 'operational') {
+            indicator.className = 'w-2 h-2 bg-green-500 rounded-full';
+        } else {
+            indicator.className = 'w-2 h-2 bg-red-500 rounded-full';
+        }
+    });
+}
+
+// Initialize when DOM is loaded
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeScrollAnimations);
+} else {
+    initializeScrollAnimations();
+}

style.css

@@ -1,28 +1,135 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+/* Custom styles for UgottaConnect */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+
+* {
+    font-family: 'Inter', sans-serif;
+}
+
+/* Smooth scrolling */
+html {
+    scroll-behavior: smooth;
+}
+
+/* Custom gradient backgrounds */
+.gradient-bg {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+/* Glass morphism effect */
+.glass {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+/* Node animation styles */
+.node {
+    width: 60px;
+    height: 60px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+    cursor: pointer;
+}
+
+.node:hover {
+    transform: scale(1.1);
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+}
+
+.connection-line {
+    position: absolute;
+    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
+    height: 2px;
+    transform-origin: left center;
+    z-index: -1;
+}
+
+/* Tool card hover effects */
+.tool-card {
+    transition: all 0.3s ease;
+}
+
+.tool-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+/* Pricing card popular badge */
+.popular-badge {
+    background: linear-gradient(135deg, #f59e0b, #d97706);
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+::-webkit-scrollbar-track {
+    background: #f1f5f9;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+::-webkit-scrollbar-thumb {
+    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
+    border-radius: 4px;
 }
+
+::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(135deg, #2563eb, #7c3aed);
+}
+
+/* Animation keyframes */
+@keyframes float {
+    0%, 100% {
+        transform: translateY(0px);
+    }
+    50% {
+        transform: translateY(-10px);
+    }
+}
+
+.float-animation {
+    animation: float 3s ease-in-out infinite;
+}
+
+/* Loading spinner */
+.spinner {
+    border: 2px solid #f3f4f6;
+    border-top: 2px solid #3b82f6;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* Responsive text sizes */
+@media (max-width: 640px) {
+    .hero-text {
+        font-size: 2.5rem;
+    }
+}
+
+/* Focus states for accessibility */
+button:focus,
+a:focus {
+    outline: 2px solid #3b82f6;
+    outline-offset: 2px;
+}
+
+/* Form validation styles */
+.input-error {
+    border-color: #ef4444;
+}
+
+.error-message {
+    color: #ef4444;
+    font-size: 0.875rem;
+    margin-top: 0.25rem;
+}