Displays welcome message and start button

by gianksp

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dappify NFT Token Gating Example</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="min-h-screen bg-white text-gray-900">
    <!-- Header -->
    <header class="w-full flex items-center justify-between px-6 py-4 border-b border-gray-200">
        <h1 class="text-xl font-semibold">Dappify</h1>
        <div id="connect-button-demo" data-widget="ConnectButton" data-client-id="e9bae73377d43e42aea12c0d07474163"
            data-chains="43113,1,137" data-theme="light" data-locale="en_US" data-label="🔥Sign In">
        </div>
    </header>

    <!-- Hero Section -->
    <main class="flex flex-col items-center justify-center text-center px-6 py-20">
        <h2 class="text-4xl font-semibold mb-4">Dappify NFT Token Gating Example</h2>
        <p class="text-lg text-gray-600 mb-6">Configure the TokenGating html widget to restrict the Airtable</p>
    </main>

    <!-- 2. Add and configure TokenGating component, change contract and quantity requirements -->
    <div data-widget="TokenGating" data-client-id="e9bae73377d43e42aea12c0d07474163" data-chain="43113"
        data-gate-id="gated-content-20" data-contract-address="0x21A91F2888fD0a1f2ca653eeD2aa61Dc6910d79E"
        data-quantity="0" data-type="ERC20">
    </div>

    <!-- Content to be gated -->
    <section class="w-full px-6 pb-20" id="gated-content-20" style="display: none;">
        <div class="max-w-6xl mx-auto">
            <iframe class="airtable-embed"
                src="https://airtable.com/embed/appnaKcBzd4G0hrln/shrzgXxlFHoJDiWFk?viewControls=on" frameborder="0"
                onmousewheel="" width="100%" height="533"
                style="background: transparent; border: 1px solid #ccc;"></iframe>
        </div>
    </section>

    <!-- 1. Paste the library -->
    <script...