<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>INSCIPE Sellers Landing Page</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.134.0/examples/js/controls/OrbitControls.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.134.0/examples/js/loaders/FontLoader.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.134.0/examples/js/geometries/TextGeometry.js"></script>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        body { margin: 0; overflow-x: hidden; }
        canvas { display: block; position: absolute; top: 0; left: 0; z-index: -1; }
        .section { min-height: 100vh; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
        .ins { color: #ff5722; }
        .scipe { color: #3f51b5; }
        .content { position: relative; z-index: 1; }
        #logoCanvas { position: fixed; bottom: 20px; right: 20px; width: 200px; height: 100px; z-index: 10; }
        @media (max-width: 640px) {
            .section { padding: 1rem; }
            h1 { font-size: 2.5rem; }
            h2 { font-size: 1.8rem; }
            p { font-size: 0.9rem; }
            button { padding: 0.5rem 1rem; font-size: 0.9rem; }
            #logoCanvas { width: 150px; height: 75px; bottom: 10px; right: 10px; }
        }
    </style>
</head>
<body class="bg-gray-900 text-white">
    
    <canvas id="logoCanvas"></canvas>

    
    <section id="hero" class="section">
        <canvas id="heroCanvas" class="w-full h-full"></canvas>
        <div class="content">
            <h1 class="text-5xl font-bold"><span class="ins">INS</span><span class="scipe">CIPE</span> Sellers</h1>
            <p class="text-xl mt-4 max-w-2xl mx-auto">Sell on inscipe.shop with zero investment! No GST, no bank account—just list products and earn with your UPI ID.</p>
            <a href="/Home" class="mt-6 px-6 py-3 bg-gradient-to-r from-[#ff5722] to-[#3f51b5] rounded-full hover:scale-110 transition-transform inline-block">Join Now</a>
        </div>
    </section>

    
    <section id="know-more" class="section">
        <canvas id="knowMoreCanvas" class="w-full h-full"></canvas>
        <div class="content">
            <h2 class="text-4xl font-bold">How It Works</h2>
            <p class="text-lg mt-4 max-w-2xl mx-auto">List products from Flipkart, Amazon, Meesho, or our 1000+ wholesale catalog. Your products appear on inscipe.shop—share links and earn on every sale!</p>
            <a href="https://sellers.inscipe.shop/GUID" class="mt-6 px-6 py-3 bg-gradient-to-r from-[#3f51b5] to-[#ff5722] rounded-full hover:scale-110 transition-transform inline-block">Learn More Guid</a>
        </div>
    </section>

    
    <section id="features" class="section">
        <canvas id="featuresCanvas" class="w-full h-full"></canvas>
        <div class="content">
            <h2 class="text-4xl font-bold">Why Choose INSCIPE?</h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-8 max-w-5xl mx-auto">
                <div class="p-6 bg-gray-800 rounded-lg hover:scale-105 transition-transform">
                    <h3 class="text-xl font-semibold">No Investment Needed</h3>
                    <p class="mt-2">Start selling without spending a penny—just use your UPI ID for payments.</p>
                </div>
                <div class="p-6 bg-gray-800 rounded-lg hover:scale-105 transition-transform">
                    <h3 class="text-xl font-semibold">Advanced Analytics</h3>
                    <p class="mt-2">Free tools to track sales, find top products, and grow your business.</p>
                </div>
                <div class="p-6 bg-gray-800 rounded-lg hover:scale-105 transition-transform">
                    <h3 class="text-xl font-semibold">Sell on inscipe.shop</h3>
                    <p class="mt-2">Your products reach customers on inscipe.shop, boosting your earning potential.</p>
                </div>
            </div>
        </div>
    </section>

    
    <section id="contact" class="section">
        <canvas id="contactCanvas" class="w-full h-full"></canvas>
        <div class="content">
            <h2 class="text-4xl font-bold">Get in Touch</h2>
            <p class="text-lg mt-4 max-w-2xl mx-auto">Have questions about selling on <span class="ins">INS</span><span class="scipe">CIPE</span>? Connect with us today!</p>
            <ul class="mt-8 text-lg max-w-md mx-auto space-y-2">
                <li><a href="mailto:inscipe@gmail.com" class="hover:text-[#ff5722]"><i class="fas fa-envelope mr-2"></i>inscipe@gmail.com</a></li>
                <li class="font-semibold"><i class="fas fa-share-alt mr-2"></i>Follow us:</li>
                <li><a href="https://www.instagram.com/inscipe.shop" class="hover:text-[#ff5722]"><i class="fab fa-instagram mr-2"></i>Instagram</a></li>
                <li><a href="https://www.youtube.com/@INSCIPE_03" class="hover:text-[#ff5722]"><i class="fab fa-youtube mr-2"></i>YouTube</a></li>
            </ul>
        </div>
    </section>
</body>
</html>