<div class="rounded-lg p-6 mb-8 text-white mt-6"
     style="background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px);">
    <h2 class="text-xl font-bold mb-4">How to Customize This Page</h2>
    <div class="space-y-3">
        <div>
            <h3 class="font-semibold">Adding New Links</h3>
            <p class="text-sm opacity-80">Copy one of the link cards and update the href, icon, title, and description.</p>
        </div>
        <div>
            <h3 class="font-semibold">Changing Icons</h3>
            <p class="text-sm opacity-80">Replace the Font Awesome class (e.g., 'fa-twitter') with any icon from <a href="https://fontawesome.com/icons" class="underline" target="_blank">Font Awesome</a>.</p>
        </div>
        <div>
            <h3 class="font-semibold">Updating Profile</h3>
            <p class="text-sm opacity-80">Edit the profile section at the top with your name, bio, and profile image URL.</p>
        </div>
        <div>
            <h3 class="font-semibold">Theme Colors</h3>
            <p class="text-sm opacity-80">Modify the Tailwind color classes (e.g., 'bg-blue-400') to match your brand.</p>
        </div>
    </div>
</div>
