Footer Preview

Barterfy Footer Component

Standalone reference — not displayed on the main site.

Static HTML Export

Copy and paste this into your marketplace site. No React or build tools needed — just plain HTML + inline CSS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Barterfy Footer</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'Inter', sans-serif; background: #070708; color: #f8fafc; }
    a { color: inherit; text-decoration: none; }
    a:hover { color: #ff8000; }
    .footer { position: relative; background: #070708; border-top: 1px solid rgba(255,255,255,0.08); overflow: hidden; }
    .footer-inner { max-width: 1400px; margin: 0 auto; padding: 80px 48px; }
    .cta-band { border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); padding: 60px 0; margin-bottom: 72px; display: flex; flex-wrap: wrap; gap: 40px; align-items: center; justify-content: space-between; }
    .cta-headline { font-family: 'Space Grotesk', sans-serif; font-size: clamp(2rem, 5vw, 4rem); font-weight: 700; letter-spacing: -0.04em; line-height: 0.95; }
    .cta-headline span { color: #ff8000; }
    .cta-right { display: flex; flex-direction: column; gap: 16px; align-items: flex-end; }
    .cta-desc { color: rgba(148,163,184,1); font-size: 1rem; max-width: 380px; line-height: 1.6; }
    .btn-group { display: flex; flex-wrap: wrap; gap: 12px; }
    .btn-primary { display: inline-flex; align-items: center; gap: 10px; background: #ff8000; color: #fff; padding: 14px 28px; font-weight: 600; font-size: 0.875rem; cursor: pointer; transition: opacity 0.2s; }
    .btn-primary:hover { opacity: 0.9; color: #fff; }
    .btn-outline { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #ff8000; color: #ff8000; padding: 12px 22px; font-weight: 600; font-size: 0.875rem; cursor: pointer; transition: all 0.2s; }
    .btn-outline:hover { background: #ff8000; color: #fff; }
    .nav-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 40px; margin-bottom: 56px; }
    .brand-col p { margin-top: 16px; font-size: 0.8125rem; color: rgba(148,163,184,1); line-height: 1.6; max-width: 220px; }
    .logo-text { font-family: 'Space Grotesk', sans-serif; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
    .logo-text span { color: #ff8000; }
    .col-title { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(148,163,184,1); margin-bottom: 18px; }
    .col-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
    .col-links li a { font-size: 0.875rem; color: rgba(248,250,252,0.75); transition: color 0.2s; }
    .col-links li a:hover { color: #f8fafc; }
    .network-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
    .network-list li { font-size: 0.875rem; color: rgba(248,250,252,0.75); }
    .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 0.75rem; color: rgba(148,163,184,1); }
    @media (max-width: 768px) {
      .footer-inner { padding: 48px 24px; }
      .cta-right { align-items: flex-start; }
    }
  </style>
</head>
<body>
<footer class="footer">
  <div class="footer-inner">
    <!-- CTA Band -->
    <div class="cta-band">
      <h2 class="cta-headline">Still paying cash<br><span>when you could trade?</span></h2>
      <div class="cta-right">
        <p class="cta-desc">Join the AI-powered reciprocity trade commerce marketplace. Earn trade credits. Spend trade instead of cash.</p>
        <div class="btn-group">
          <a href="https://cal.com/barterfy" target="_blank" rel="noopener noreferrer" class="btn-outline">
            📞 Book a Call
          </a>
          <a href="https://barterfy.app/index.php/home/signup_step_1" target="_blank" rel="noopener noreferrer" class="btn-primary">
            Join Free ↗
          </a>
        </div>
      </div>
    </div>

    <!-- Nav Grid -->
    <div class="nav-grid">
      <div class="brand-col">
        <div class="logo-text">Barter<span>fy</span></div>
        <p>The world's first AI Agent powered barter exchange network built for progressive businesses.</p>
      </div>

      <div>
        <p class="col-title">Platform</p>
        <ul class="col-links">
          <li><a href="https://barterfy.io/">Home</a></li>
          <li><a href="https://barterfy.io/explore">Explore Marketplace</a></li>
          <li><a href="https://barterfy.io/how-it-works">How it Works</a></li>
          <li><a href="https://barterfy.io/pricing">Pricing</a></li>
          <li><a href="https://barterfy.io/trade-card">Trade Card</a></li>
        </ul>
      </div>

      <div>
        <p class="col-title">Company</p>
        <ul class="col-links">
          <li><a href="https://barterfy.io/support">Contact</a></li>
          <li><a href="https://barterfy.io/about">About</a></li>
          <li><a href="https://barterfy.app" target="_blank" rel="noopener noreferrer">Login</a></li>
          <li><a href="https://barterfy.app/index.php/home/signup_step_1" target="_blank" rel="noopener noreferrer">Sign Up</a></li>
          <li><a href="https://cal.com/barterfy" target="_blank" rel="noopener noreferrer">Book a Call</a></li>
        </ul>
      </div>

      <div>
        <p class="col-title">Resources</p>
        <ul class="col-links">
          <li><a href="https://capacity.barterfy.io" target="_blank" rel="noopener noreferrer">Capacity Calculator</a></li>
          <li><a href="https://barterfy.app" target="_blank" rel="noopener noreferrer">Trade Marketplace</a></li>
          <li><a href="https://iso.barterfy.io" target="_blank" rel="noopener noreferrer">ISO Partners</a></li>
          <li><a href="https://barterfy.io/five-industries">Five Industries</a></li>
          <li><a href="https://barterfy.io/old-vs-new">Old vs New</a></li>
        </ul>
      </div>

      <div>
        <p class="col-title">Network</p>
        <ul class="network-list">
          <li>Zero Trade Deficit</li>
          <li>Global Business Members</li>
          <li>High Velocity Network</li>
        </ul>
      </div>
    </div>

    <!-- Bottom bar -->
    <div class="footer-bottom">
      <p>&copy; 2026 Barterfy. Reciprocal Intelligence System.</p>
      <p>Exchange Without Limits.</p>
    </div>
  </div>
</footer>
</body>
</html>

Links Reference

LabelTypeURL / Path
Join FreeExternalhttps://barterfy.app/index.php/home/signup_step_1
Book a CallExternalhttps://cal.com/barterfy
HomeInternal/
Explore MarketplaceInternal/explore
How it WorksInternal/how-it-works
PricingInternal/pricing
Trade CardInternal/trade-card
ContactInternal/support
AboutInternal/about
LoginExternalhttps://barterfy.app
Sign UpExternalhttps://barterfy.app/index.php/home/signup_step_1
Capacity CalculatorExternalhttps://capacity.barterfy.io
Trade MarketplaceExternalhttps://barterfy.app
ISO PartnersExternalhttps://iso.barterfy.io
Five IndustriesInternal/five-industries
Old vs NewInternal/old-vs-new