Landing Page Template

A marketing-focused template with header navigation, hero section, features grid, stats, CTA, and footer.

Preview

Open in New Tab →

Structure

  • Header — Logo, nav links, theme toggle, CTA buttons
  • Hero — Headline, description, action buttons
  • Features — 3-column grid of ip-panel cards
  • Stats — 4-column grid of ip-frame stat cards
  • CTA — Call-to-action section
  • Footer — Copyright, nav links

Patterns Used

This template uses the following patterns from the Layouts & Patterns documentation:

  • Full Page Layout — Header navigation, main content, footer structure
  • Card Grid — 3-column responsive grid for features section
  • Stats Row — 4-column ip-frame grid for metrics display

Theme Switcher

This template includes the theme switcher component for real-time theme, font, and mode changes.

<!-- Include theme switcher in head -->
<link rel="stylesheet" href="/path/to/themes/planetary.css" id="theme-css">
<link rel="stylesheet" href="/path/to/fonts/terminal.css" id="font-css">
<script src="/path/to/theme.js"></script>
<script src="/path/to/theme-switcher.js" data-theme-base="/path/to/css"></script>

<!-- Add container in header -->
<div id="theme-switcher-container"></div>

<!-- Initialize on DOMContentLoaded -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    themeSwitcher.createSwitcher('#theme-switcher-container');
});
</script>

Source Code

landing.html 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Landing Page — Interplanetary UI</title>
    
    <!-- Core CSS (with Tailwind utilities) -->
    <link rel="stylesheet" href="./css/styles.css">
    <!-- Theme and Font (dynamically switched by theme-switcher.js) -->
    <link rel="stylesheet" href="../interplanetary-ui/css/themes/planetary.css" id="theme-css">
    <link rel="stylesheet" href="../interplanetary-ui/css/fonts/terminal.css" id="font-css">
    
    <!-- Theme JS -->
    <script src="../interplanetary-ui/js/theme.js"></script>
    <script src="../interplanetary-ui/js/theme-switcher.js" data-theme-base="../interplanetary-ui/css"></script>
</head>
<body class="bg-primary text-secondary font-body text-xs min-h-screen">
    
    <!-- Header -->
    <header class="border-b border-secondary">
        <div class="max-w-6xl mx-auto px-4 py-3">
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-6">
                    <a href="#" class="font-display text-sm text-accent uppercase">Brand</a>
                    <nav class="ip-nav-list hidden md:flex">
                        <a href="#" class="active">Home</a>
                        <a href="#">Features</a>
                        <a href="#">Pricing</a>
                        <a href="#">About</a>
                    </nav>
                </div>
                <div class="flex items-center gap-3">
                    <button onclick="themeManager.toggle()" class="ip-btn-icon" aria-label="Toggle theme">
                        <span class="ip-btn-icon-content">◐</span>
                    </button>
                    <a href="#" class="ip-btn hidden sm:inline-flex">Sign In</a>
                    <a href="#" class="ip-btn-primary">Get Started</a>
                </div>
            </div>
        </div>
    </header>

    <!-- Hero -->
    <section class="py-16 md:py-24">
        <div class="max-w-6xl mx-auto px-4 text-center">
            <h1 class="font-display text-xl md:text-2xl text-accent uppercase mb-4">
                Build Something Remarkable
            </h1>
            <p class="text-secondary text-sm md:text-base max-w-2xl mx-auto mb-8">
                A terminal-inspired design system for industrial-strength web applications. 
                Ship faster with components that work out of the box.
            </p>
            <div class="flex flex-col sm:flex-row gap-3 justify-center">
                <a href="#" class="ip-btn-primary">Start Building</a>
                <a href="#" class="ip-btn">View Documentation</a>
            </div>
        </div>
    </section>

    <!-- Features -->
    <section class="py-12 border-t border-secondary">
        <div class="max-w-6xl mx-auto px-4">
            <div class="text-center mb-10">
                <h2 class="font-display text-lg text-accent uppercase mb-2">Features</h2>
                <p class="text-secondary">Everything you need to build modern interfaces.</p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="ip-panel">
                    <div class="ip-panel-header">Theming</div>
                    <div class="ip-panel-body">
                        <div class="ip-title">4 Built-in Themes</div>
                        <p class="text-secondary mt-2">
                            Planetary, Industrial, Military, and Royal. Each with light and dark variants.
                        </p>
                    </div>
                </div>
                <!-- More cards... -->
            </div>
        </div>
    </section>

    <!-- Stats -->
    <section class="py-12 border-t border-secondary bg-secondary/5">
        <div class="max-w-6xl mx-auto px-4">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
                <div class="ip-frame">
                    <div class="ip-frame-header">Downloads</div>
                    <div class="ip-frame-body">
                        <div class="ip-stat">
                            <div class="ip-stat-value">12K+</div>
                        </div>
                    </div>
                </div>
                <!-- More stats... -->
            </div>
        </div>
    </section>

    <!-- CTA -->
    <section class="py-16 border-t border-secondary">
        <div class="max-w-6xl mx-auto px-4 text-center">
            <h2 class="font-display text-lg text-accent uppercase mb-4">Ready to Build?</h2>
            <p class="text-secondary mb-6">Get started with Interplanetary UI in minutes.</p>
            <a href="#" class="ip-btn-primary">View Documentation</a>
        </div>
    </section>

    <!-- Footer -->
    <footer class="border-t border-secondary py-6">
        <div class="max-w-6xl mx-auto px-4">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                <div class="font-nav text-xs text-secondary/50 uppercase">
                    © 2025 Your Company
                </div>
                <nav class="ip-nav-list">
                    <a href="#">Privacy</a>
                    <a href="#">Terms</a>
                    <a href="#">Contact</a>
                </nav>
            </div>
        </div>
    </footer>

</body>
</html>
← All Templates Dashboard →