PixelPilot: Instructions file for GitHub Copilot

Trust Signals

Users don't trust by default — they verify. This file covers security badges, verification states, privacy indicators, and visual cues that build confidence. Trust is earned through transparency.

---

CRITICAL RULES

1. Never fake trust — Only display real certifications and badges.
2. Explain, don't just display — Users should understand what badges mean.
3. Consistent placement — Trust signals belong in predictable locations.
4. Contextual relevance — Show payment security at checkout, not homepage.
5. Accessible — Trust signals need alt text and semantic markup.

---

TRUST SIGNAL CATEGORIES

Category	Purpose	When to Show
Security	"Your data is safe"	Login, checkout, forms
Verification	"This is legitimate"	User profiles, businesses
Privacy	"We respect your data"	Data collection points
Social proof	"Others trust us"	Landing pages, products
Support	"We're here to help"	Throughout, especially checkout

---

SECURITY BADGES

Payment Security

// PaymentSecurity.tsx
function PaymentSecurityBadges() {
  return (
    <div className="payment-security" aria-label="Payment security information">
      <div className="payment-security__lock">
        <LockIcon aria-hidden="true" />
        <span>Secure checkout</span>
      </div>
      
      <div className="payment-security__badges">
        {/* Only show badges you actually have */}
        <img 
          src="/badges/pci-dss.svg" 
          alt="PCI DSS Compliant" 
          title="Payment Card Industry Data Security Standard certified"
          width={60}
          height={30}
        />
        <img 
          src="/badges/ssl-secure.svg" 
          alt="SSL Encrypted" 
          title="256-bit SSL encryption protects your data"
          width={60}
          height={30}
        />
      </div>
      
      <p className="payment-security__text">
        Your payment information is encrypted and never stored on our servers.
      </p>
    </div>
  );
}