Variant 1View code Variant 1 — Source code <%# Variant 1: 4-column links — logo + 4 columns of links (Product, Company, Resources, Legal) + copyright %> <footer class="bg-background border-t border-border py-16 lg:py-24"> <div class="mx-auto max-w-7xl px-6 lg:px-8"> <div class="grid grid-cols-2 gap-8 lg:grid-cols-5"> <div class="col-span-2 lg:col-span-1"> <div class="flex items-center gap-2"> <%= ui.icon "cube", size: 7, class: "text-primary" %> <span class="text-foreground text-lg font-bold">JetRockets</span> </div> <p class="text-muted-foreground mt-4 text-sm leading-relaxed"> Building tools that help teams ship faster and work smarter. </p> </div> <div> <h3 class="text-foreground text-sm font-semibold">Product</h3> <ul class="mt-4 space-y-3"> <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Features</a></li> <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Pricing</a></li> <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Integrations</a></li> <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Changelog</a></li> </ul> </div> <div> <h3 class="text-foreground text-sm font-semibold">Company</h3> <ul class="mt-4 space-y-3"> <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">About</a></li> <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Blog</a></li> <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Careers</a></li> <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Contact</a></li> </ul> </div> <div> <h3 class="text-foreground text-sm font-semibold">Resources</h3> <ul class="mt-4 space-y-3"> <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Documentation</a></li> <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Help Center</a></li> <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Community</a></li> <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">API Reference</a></li> </ul> </div> <div> <h3 class="text-foreground text-sm font-semibold">Legal</h3> <ul class="mt-4 space-y-3"> <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Privacy Policy</a></li> <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Terms of Service</a></li> <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Cookie Policy</a></li> <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Licenses</a></li> </ul> </div> </div> <div class="mt-16 border-t border-border pt-8"> <p class="text-muted-foreground text-sm">© 2026 JetRockets. All rights reserved.</p> </div> </div> </footer> Variant 2View code Variant 2 — Source code <%# Variant 2: Simple centered — centered logo, single row of links, social icons, copyright %> <footer class="bg-background border-t border-border py-16 lg:py-24"> <div class="mx-auto max-w-7xl px-6 text-center lg:px-8"> <div class="flex items-center justify-center gap-2"> <%= ui.icon "cube", size: 7, class: "text-primary" %> <span class="text-foreground text-lg font-bold">JetRockets</span> </div> <nav class="mt-8 flex flex-wrap items-center justify-center gap-x-8 gap-y-3"> <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Features</a> <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Pricing</a> <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">About</a> <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Blog</a> <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Docs</a> <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Contact</a> </nav> <div class="mt-8 flex items-center justify-center gap-4"> <a href="#" class="text-muted-foreground hover:text-foreground transition"> <%= ui.icon "github", size: 5 %> </a> <a href="#" class="text-muted-foreground hover:text-foreground transition"> <%= ui.icon "globe-alt", size: 5 %> </a> <a href="#" class="text-muted-foreground hover:text-foreground transition"> <%= ui.icon "envelope", size: 5 %> </a> </div> <div class="mt-8 border-t border-border pt-8"> <p class="text-muted-foreground text-sm">© 2026 JetRockets. All rights reserved.</p> </div> </div> </footer> Variant 3View code Variant 3 — Source code <%# Variant 3: 2-column — company info on left, link columns on right %> <footer class="bg-background border-t border-border py-16 lg:py-24"> <div class="mx-auto max-w-7xl px-6 lg:px-8"> <div class="grid grid-cols-1 gap-12 lg:grid-cols-2"> <div> <div class="flex items-center gap-2"> <%= ui.icon "cube", size: 7, class: "text-primary" %> <span class="text-foreground text-lg font-bold">JetRockets</span> </div> <p class="text-muted-foreground mt-4 max-w-md text-sm leading-relaxed"> We help teams build better products faster. Our platform combines powerful development tools with intuitive design, so you can focus on what matters most. </p> <div class="mt-6 flex items-center gap-4"> <a href="#" class="text-muted-foreground hover:text-foreground transition"> <%= ui.icon "github", size: 5 %> </a> <a href="#" class="text-muted-foreground hover:text-foreground transition"> <%= ui.icon "globe-alt", size: 5 %> </a> <a href="#" class="text-muted-foreground hover:text-foreground transition"> <%= ui.icon "envelope", size: 5 %> </a> </div> </div> <div class="grid grid-cols-2 gap-8 sm:grid-cols-3"> <div> <h3 class="text-foreground text-sm font-semibold">Product</h3> <ul class="mt-4 space-y-3"> <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Features</a></li> <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Pricing</a></li> <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Integrations</a></li> <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Changelog</a></li> </ul> </div> <div> <h3 class="text-foreground text-sm font-semibold">Company</h3> <ul class="mt-4 space-y-3"> <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">About</a></li> <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Blog</a></li> <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Careers</a></li> <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Contact</a></li> </ul> </div> <div> <h3 class="text-foreground text-sm font-semibold">Support</h3> <ul class="mt-4 space-y-3"> <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Help Center</a></li> <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Documentation</a></li> <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">API Reference</a></li> <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Status</a></li> </ul> </div> </div> </div> <div class="mt-16 border-t border-border pt-8 flex flex-col items-center justify-between gap-4 sm:flex-row"> <p class="text-muted-foreground text-sm">© 2026 JetRockets. All rights reserved.</p> <div class="flex items-center gap-6"> <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Privacy</a> <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Terms</a> <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Cookies</a> </div> </div> </div> </footer> Variant 4View code Variant 4 — Source code <%# Variant 4: With newsletter — footer with email signup integrated in top row %> <footer class="bg-background border-t border-border py-16 lg:py-24"> <div class="mx-auto max-w-7xl px-6 lg:px-8"> <div class="grid grid-cols-1 gap-12 lg:grid-cols-2"> <div> <h3 class="text-foreground text-lg font-semibold">Stay in the loop</h3> <p class="text-muted-foreground mt-2 text-sm leading-relaxed"> Get product updates, company news, and engineering insights delivered to your inbox every two weeks. </p> </div> <div class="flex items-start justify-start lg:justify-end"> <%= form_with url: root_path, class: "w-full max-w-md !gap-0" do |f| %> <%= ui.group do %> <%= f.email_field :email, label: false, placeholder: "Enter your email" %> <%= ui.btn "Subscribe" %> <% end %> <% end %> </div> </div> <div class="mt-16 border-t border-border pt-12 grid grid-cols-2 gap-8 sm:grid-cols-4"> <div> <h3 class="text-foreground text-sm font-semibold">Product</h3> <ul class="mt-4 space-y-3"> <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Features</a></li> <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Pricing</a></li> <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Integrations</a></li> <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Changelog</a></li> </ul> </div> <div> <h3 class="text-foreground text-sm font-semibold">Company</h3> <ul class="mt-4 space-y-3"> <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">About</a></li> <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Blog</a></li> <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Careers</a></li> <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Press</a></li> </ul> </div> <div> <h3 class="text-foreground text-sm font-semibold">Resources</h3> <ul class="mt-4 space-y-3"> <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Documentation</a></li> <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Help Center</a></li> <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Community</a></li> <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Guides</a></li> </ul> </div> <div> <h3 class="text-foreground text-sm font-semibold">Legal</h3> <ul class="mt-4 space-y-3"> <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Privacy</a></li> <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Terms</a></li> <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Cookie Policy</a></li> <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Licenses</a></li> </ul> </div> </div> <div class="mt-12 border-t border-border pt-8 flex flex-col items-center justify-between gap-4 sm:flex-row"> <div class="flex items-center gap-2"> <%= ui.icon "cube", size: 6, class: "text-primary" %> <span class="text-foreground text-sm font-semibold">JetRockets</span> </div> <p class="text-muted-foreground text-sm">© 2026 JetRockets. All rights reserved.</p> </div> </div> </footer> Variant 5View code Variant 5 — Source code <%# Variant 5: Minimal — single line: copyright + links inline %> <footer class="bg-background border-t border-border py-6"> <div class="mx-auto max-w-7xl px-6 lg:px-8"> <div class="flex flex-col items-center justify-between gap-4 sm:flex-row"> <p class="text-muted-foreground text-sm">© 2026 JetRockets. All rights reserved.</p> <nav class="flex items-center gap-6"> <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Privacy</a> <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Terms</a> <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Contact</a> <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition">Status</a> </nav> </div> </div> </footer>