<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HarshAI - AI Workflow Automation</title>
    <meta name="description" content="Build once. Automate forever. Connect 50+ AI tools into automated workflows.">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        :root {
            --bg-dark: #0a0a0a;
            --bg-card: #1a1a1a;
            --text-white: #ffffff;
            --text-grey: #a1a1aa;
            --accent-blue: #2563eb;
            --accent-blue-glow: rgba(37, 99, 235, 0.3);
            --border: #27272a;
            --success: #10b981;
        }
        
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background: var(--bg-dark);
            color: var(--text-white);
            line-height: 1.6;
            overflow-x: hidden;
        }
        
        /* Smooth scroll */
        html {
            scroll-behavior: smooth;
        }
        
        /* Animated background */
        .bg-animation {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background: 
                radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 0% 50%, rgba(37, 99, 235, 0.05) 0%, transparent 40%),
                radial-gradient(circle at 100% 50%, rgba(37, 99, 235, 0.05) 0%, transparent 40%);
        }
        
        /* Container */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
        }
        
        /* Header */
        header {
            padding: 2rem 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            font-size: 1.5rem;
            font-weight: 600;
            letter-spacing: -0.5px;
        }
        
        .nav-links {
            display: flex;
            gap: 2rem;
        }
        
        .nav-links a {
            color: var(--text-grey);
            text-decoration: none;
            font-size: 0.9rem;
            transition: color 0.3s;
        }
        
        .nav-links a:hover {
            color: var(--text-white);
        }
        
        .nav-links a.disabled {
            opacity: 0.5;
            cursor: not-allowed;
            pointer-events: none;
        }
        
        .btn-primary {
            background: var(--accent-blue);
            color: var(--text-white);
            padding: 0.75rem 1.5rem;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s;
            border: none;
            cursor: pointer;
            font-size: 0.9rem;
        }
        
        .btn-primary:hover {
            background: #1d4ed8;
            transform: translateY(-2px);
            box-shadow: 0 10px 30px var(--accent-blue-glow);
        }
        
        /* Hero Section */
        .hero {
            padding: 6rem 0 4rem;
            text-align: center;
        }
        
        .hero h1 {
            font-size: 4rem;
            font-weight: 600;
            letter-spacing: -2px;
            margin-bottom: 1.5rem;
            background: linear-gradient(135deg, #ffffff 0%, #a1a1aa 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .hero p {
            font-size: 1.25rem;
            color: var(--text-grey);
            max-width: 600px;
            margin: 0 auto 3rem;
        }
        
        .hero-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            margin-bottom: 4rem;
        }
        
        .btn-secondary {
            background: transparent;
            color: var(--text-white);
            padding: 0.75rem 1.5rem;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 500;
            border: 1px solid var(--border);
            transition: all 0.3s;
        }
        
        .btn-secondary:hover {
            border-color: var(--accent-blue);
            background: rgba(37, 99, 235, 0.1);
        }
        
        /* Video Section */
        .video-section {
            padding: 4rem 0;
        }
        
        .video-container {
            position: relative;
            border-radius: 16px;
            overflow: hidden;
            background: var(--bg-card);
            border: 1px solid var(--border);
            aspect-ratio: 16/9;
        }
        
        .video-container iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
        
        /* Stats Section */
        .stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            padding: 4rem 0;
            text-align: center;
        }
        
        .stat-item h3 {
            font-size: 3rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }
        
        .stat-item p {
            color: var(--text-grey);
            font-size: 0.9rem;
        }
        
        /* Features Section */
        .features {
            padding: 6rem 0;
        }
        
        .section-title {
            text-align: center;
            font-size: 2.5rem;
            font-weight: 600;
            margin-bottom: 1rem;
        }
        
        .section-subtitle {
            text-align: center;
            color: var(--text-grey);
            margin-bottom: 4rem;
            font-size: 1.1rem;
        }
        
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }
        
        .feature-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 2rem;
            transition: all 0.3s;
        }
        
        .feature-card:hover {
            border-color: var(--accent-blue);
            transform: translateY(-5px);
        }
        
        .feature-icon {
            font-size: 2rem;
            margin-bottom: 1rem;
        }
        
        .feature-card h3 {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }
        
        .feature-card p {
            color: var(--text-grey);
            font-size: 0.95rem;
        }
        
        /* Pricing Section */
        .pricing {
            padding: 6rem 0;
        }
        
        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }
        
        .pricing-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 2.5rem;
            position: relative;
            transition: all 0.3s;
        }
        
        .pricing-card:hover {
            border-color: var(--accent-blue);
            transform: translateY(-5px);
            box-shadow: 0 20px 60px rgba(37, 99, 235, 0.15);
        }
        
        .pricing-card.featured {
            border-color: var(--accent-blue);
            background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(37, 99, 235, 0.05) 100%);
        }
        
        .badge {
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--accent-blue);
            color: var(--text-white);
            padding: 0.4rem 1.2rem;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
        }
        
        .pricing-card h3 {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }
        
        .price {
            font-size: 3rem;
            font-weight: 700;
            margin: 1.5rem 0;
        }
        
        .price span {
            font-size: 1rem;
            color: var(--text-grey);
            font-weight: 400;
        }
        
        .pricing-features {
            list-style: none;
            margin: 2rem 0;
        }
        
        .pricing-features li {
            padding: 0.75rem 0;
            border-bottom: 1px solid var(--border);
            color: var(--text-grey);
            font-size: 0.95rem;
        }
        
        .pricing-features li:last-child {
            border-bottom: none;
        }
        
        .pricing-features li::before {
            content: "✓";
            color: var(--accent-blue);
            font-weight: 600;
            margin-right: 0.75rem;
        }
        
        .pricing-card .btn-primary {
            width: 100%;
            text-align: center;
            display: block;
        }
        
        /* Testimonials */
        .testimonials {
            padding: 6rem 0;
        }
        
        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }
        
        .testimonial-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 2rem;
        }
        
        .testimonial-text {
            font-size: 1.05rem;
            margin-bottom: 1.5rem;
            line-height: 1.7;
        }
        
        .testimonial-author {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .author-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: var(--accent-blue);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
        }
        
        .author-info h4 {
            font-size: 1rem;
            font-weight: 600;
        }
        
        .author-info p {
            color: var(--text-grey);
            font-size: 0.9rem;
        }
        
        /* Footer */
        footer {
            padding: 4rem 0 2rem;
            border-top: 1px solid var(--border);
            text-align: center;
            color: var(--text-grey);
        }
        
        .footer-links {
            display: flex;
            justify-content: center;
            gap: 2rem;
            margin: 2rem 0;
        }
        
        .footer-links a {
            color: var(--text-grey);
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .footer-links a:hover {
            color: var(--text-white);
        }
        
        /* Animations */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .fade-in {
            animation: fadeIn 0.6s ease forwards;
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .hero h1 {
                font-size: 2.5rem;
            }
            
            .stats {
                grid-template-columns: 1fr;
            }
            
            .nav-links {
                display: none;
            }
        }
    </style>
</head>
<body>
    <div class="bg-animation"></div>
    
    <div class="container">
        <!-- Header -->
        <header>
            <div class="logo">HarshAI</div>
            <nav class="nav-links">
                <a href="#">Home</a>
                <a href="#about">About</a>
            </nav>
            <a href="#" onclick="openAuthModal()" class="btn-secondary" style="margin-right:1rem;">Sign In</a><a href="#pricing" class="btn-primary">Get Started</a>
        </header>
        
        <!-- Hero Section -->
        <section class="hero fade-in">
            <h1>Build once.<br>Automate forever.</h1>
            <p>Connect 50+ AI tools into automated workflows. No code required. Build once, automate forever.</p>
            <div class="hero-buttons">
                <a href="#pricing" class="btn-primary">Start Free</a>
                <a href="https://github.com/harshaldevloper/harshai" class="btn-secondary">View on GitHub</a>
            </div>
        </section>
        
        <!-- Stats -->
        <section class="stats">
            <div class="stat-item">
                <h3>52+</h3>
                <p>AI Integrations</p>
            </div>
            <div class="stat-item">
                <h3>Beta</h3>
                <p>Currently in Beta</p>
            </div>
            <div class="stat-item">
                <h3>100%</h3>
                <p>Free During Beta</p>
            </div>
        </section>
        
        <!-- Video Section -->
        <section class="video-section">
            <div class="video-container">
                <iframe 
                    src="https://www.loom.com/embed/3856c7c0330643c190009adc2f166e0d"
                    frameborder="0" 
                    webkitallowfullscreen 
                    mozallowfullscreen 
                    allowfullscreen>
                </iframe>
            </div>
        </section>
        
        <!-- Features -->
        <section id="features" class="features">
            <h2 class="section-title">Why HarshAI?</h2>
            <p class="section-subtitle">Stop juggling 10+ AI tools. Automate everything in one place.</p>
            
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">🎨</div>
                    <h3>Visual Builder</h3>
                    <p>Drag, drop, automate. No code required. Build complex workflows in minutes.</p>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon">🔗</div>
                    <h3>52+ Integrations</h3>
                    <p>ChatGPT, Claude, ElevenLabs, Notion, Gmail & more. Connect everything.</p>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon">⚡</div>
                    <h3>Smart Triggers</h3>
                    <p>Schedule, webhook, upload automation. Make your workflows truly intelligent.</p>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon">🧠</div>
                    <h3>Conditional Logic</h3>
                    <p>If/then rules for smart workflows. Handle edge cases like a pro.</p>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon">🧪</div>
                    <h3>Test Mode</h3>
                    <p>Try workflows without API keys. Test before you commit.</p>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon">📊</div>
                    <h3>Analytics</h3>
                    <p>Track executions, errors, and performance. Optimize your workflows.</p>
                </div>
            </div>
        </section>
        
        <!-- Pricing -->
        <section id="pricing" class="pricing">
            <h2 class="section-title">Simple, Transparent Pricing</h2>
            <p class="section-subtitle">Start free. Upgrade when you're ready.</p>
            
            <div class="pricing-grid">
                <!-- Free Tier -->
                <div class="pricing-card">
                    <h3>Open Source</h3>
                    <div class="price">$0<span>/forever</span></div>
                    <p style="color: var(--text-grey); margin-bottom: 1.5rem;">Self-hosted, free forever</p>
                    <ul class="pricing-features">
                        <li>Self-hosted deployment</li>
                        <li>All 52+ AI integrations</li>
                        <li>Visual workflow builder</li>
                        <li>Community support</li>
                        <li>Basic templates (10 included)</li>
                        <li>Test mode (no API keys)</li>
                    </ul>
                    <a href="https://github.com/harshaldevloper/harshai" class="btn-secondary">Deploy on GitHub</a>
                </div>
                
                <!-- PRO Tier -->
                <div class="pricing-card featured">
                    <div class="badge">MOST POPULAR</div>
                    <h3>PRO</h3>
                    <div class="price">$19<span>/month</span></div>
                    <p style="color: var(--text-grey); margin-bottom: 1.5rem;">Hosted version, 100 workflows/month</p>
                    <ul class="pricing-features">
                        <li>Everything in Open Source</li>
                        <li>Hosted cloud version</li>
                        <li>100 workflow executions/month</li>
                        <li>10 active workflows</li>
                        <li>Email support (24hr)</li>
                        <li>Premium templates (50+)</li>
                        <li>Analytics dashboard</li>
                    </ul>
                    <a href="https://vendors.paddle.com/checkout" class="btn-primary">Start Free Trial</a>
                </div>
                
                <!-- BUSINESS Tier -->
                <div class="pricing-card">
                    <h3>Business</h3>
                    <div class="price">$49<span>/month</span></div>
                    <p style="color: var(--text-grey); margin-bottom: 1.5rem;">Unlimited workflows, team access</p>
                    <ul class="pricing-features">
                        <li>Everything in PRO</li>
                        <li>Unlimited executions</li>
                        <li>Unactive workflows</li>
                        <li>Team access (5 members)</li>
                        <li>Priority support (4hr)</li>
                        <li>Custom branding</li>
                        <li>Advanced analytics</li>
                    </ul>
                    <a href="https://vendors.paddle.com/checkout" class="btn-secondary">Start Free Trial</a>
                </div>
                
                <!-- ENTERPRISE Tier -->
                <div class="pricing-card">
                    <h3>Enterprise</h3>
                    <div class="price">$149<span>/month</span></div>
                    <p style="color: var(--text-grey); margin-bottom: 1.5rem;">Custom integrations, SLA</p>
                    <ul class="pricing-features">
                        <li>Everything in BUSINESS</li>
                        <li>Unlimited team members</li>
                        <li>Custom AI integrations</li>
                        <li>Dedicated Slack channel</li>
                        <li>SLA (99.9% uptime)</li>
                        <li>SSO/SAML authentication</li>
                        <li>Priority development</li>
                    </ul>
                    <a href="mailto:harshaldevloper@gmail.com" class="btn-secondary">Book Demo</a>
                </div>
            </div>
        </section>
        
        <!-- Testimonials -->
        <section id="testimonials" class="testimonials">
            <h2 class="section-title">Built for Developers & Creators</h2>
            <p class="section-subtitle">Join the waitlist and be the first to experience AI workflow automation</p>
            
            <div style="text-align: center; padding: 3rem 0;">
                <p style="color: var(--text-grey); margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto;">
                    HarshAI is currently in beta. We're working with early adopters to refine the platform and add the features that matter most.
                </p>
                <a href="mailto:harshaldevloper@gmail.com?subject=HarshAI Early Access" class="btn-primary">Request Early Access</a>
            </div>
        </section>
        
        <!-- Footer -->
        <footer>
            <p>Built with ❤️ by Harshal Lahare</p>
            <p>India 🇮🇳</p>
            <div class="footer-links">
                <a href="https://github.com/harshaldevloper/harshai">GitHub</a>
                <a href="https://dev.to/aiavantage">Dev.to</a>
                <a href="mailto:harshaldevloper@gmail.com">Contact</a>
            </div>
            <p style="margin-top: 2rem; font-size: 0.9rem; opacity: 0.7;">© 2026 HarshAI. All rights reserved.</p>
        </footer>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
    <script>
        // Initialize Supabase (NEW PROJECT)
        const SUPABASE_URL = 'https://bwkaeimowgxsocjalivd.supabase.co';
        const SUPABASE_KEY = 'sb_publishable_z-AY-qeMkr07YB2yn3K5nQ_woC2YT6N';
        const supabase = supabase.createClient(SUPABASE_URL, SUPABASE_KEY);
        
        // Auth state listener
        supabase.auth.onAuthStateChange((event, session) => {
            console.log('Auth event:', event);
            if (event === 'SIGNED_IN') {
                console.log('User signed in:', session.user.email);
                alert('Welcome! You are now signed in.');
            }
            if (event === 'SIGNED_OUT') {
                console.log('User signed out');
            }
        });
        
        // Check if user is already logged in
        async function checkAuth() {
            const { data: { session } } = await supabase.auth.getSession();
            if (session) {
                console.log('Already logged in:', session.user.email);
            }
        }
        checkAuth();
    </script>


    <!-- Auth Modal -->
    <div id="authModal" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:9999;align-items:center;justify-content:center;">
        <div style="background:#1a1a1a;padding:2rem;border-radius:12px;max-width:400px;width:90%;border:1px solid #27272a;">
            <h3 style="margin-bottom:1.5rem;font-size:1.5rem;">Sign In to HarshAI</h3>
            <input type="email" id="authEmail" placeholder="Email" style="width:100%;padding:0.75rem;margin-bottom:1rem;border-radius:8px;border:1px solid #27272a;background:#0a0a0a;color:#fff;">
            <input type="password" id="authPassword" placeholder="Password" style="width:100%;padding:0.75rem;margin-bottom:1rem;border-radius:8px;border:1px solid #27272a;background:#0a0a0a;color:#fff;">
            <button onclick="handleSignIn()" style="width:100%;padding:0.75rem;background:#2563eb;color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:600;margin-bottom:0.5rem;">Sign In</button>
            <button onclick="handleSignUp()" style="width:100%;padding:0.75rem;background:transparent;color:#fff;border:1px solid #27272a;border-radius:8px;cursor:pointer;">Sign Up</button>
            <button onclick="closeAuthModal()" style="width:100%;padding:0.75rem;margin-top:1rem;background:transparent;color:#a1a1aa;border:none;border-radius:8px;cursor:pointer;">Close</button>
        </div>
    </div>
    <script>
        function openAuthModal() { document.getElementById('authModal').style.display = 'flex'; }
        function closeAuthModal() { document.getElementById('authModal').style.display = 'none'; }
        
        async function handleSignIn() {
            const email = document.getElementById('authEmail').value;
            const password = document.getElementById('authPassword').value;
            const { data, error } = await supabase.auth.signInWithPassword({ email, password });
            if (error) alert('Error: ' + error.message);
            else { alert('Signed in successfully!'); closeAuthModal(); }
        }
        
        async function handleSignUp() {
            const email = document.getElementById('authEmail').value;
            const password = document.getElementById('authPassword').value;
            const { data, error } = await supabase.auth.signUp({ email, password });
            if (error) alert('Error: ' + error.message);
            else { alert('Check your email to confirm signup!'); closeAuthModal(); }
        }
    </script>

</body>
</html>