Skip to content
PLANOVI Docs

Landing Page & UI Components

The PLANOVI landing page (index.php) provides an interactive, visual showcase of the Smart Energy Cooperative platform. It features dynamic particle animation, glassmorphism aesthetics, responsive layouts, and interactive conversion tools.

1. Page Component Structure

The frontend is modularized into reusable PHP components:

planovi-webpage/
├── index.php                 # Master landing template assembling all sections
├── components/
│   ├── navbar.php            # Header navigation, logo, desktop menu, theme toggle, i18n
│   └── footer.php            # Footer sitemap, social icons, copyright, legal links
├── cookie-banner.php         # GDPR consent popup with localStorage persistence
├── css/
│   └── style.css             # Unified vanilla stylesheet with CSS custom properties
└── js/
    └── script.js             # Canvas particle physics, theme toggle, mobile overlay

2. Interactive Canvas Background (#bg-canvas)

An HTML5 Canvas element runs a real-time particle grid simulating energy flows and distributed grid telemetry:

  • Particle Initialization: Spawns 60-120 dynamic nodes with randomized velocity, radius, and opacity.
  • Proximity Linking: When two nodes come within a specified pixel threshold (120px), a subtle connecting line is rendered.
  • Mouse Interaction: Particle trajectories gently deflect away from the cursor on desktop screens.
  • Theme Adaptability: Detects dark vs. light mode and adjusts stroke styles and alpha gradients dynamically to ensure high contrast without overwhelming foreground copy.

3. Dark / Light Theme Engine

Theme toggling is handled completely client-side in js/script.js with instant persistence:

const themeToggleBtn = document.getElementById('theme-toggle');
const html = document.documentElement;


function setTheme(theme) {
    html.setAttribute('data-theme', theme);
    localStorage.setItem('planovi_theme', theme);
    const icon = themeToggleBtn.querySelector('i');
    if (theme === 'light') {
        icon.className = 'ph ph-sun';
    } else {
        icon.className = 'ph ph-moon';
    }
}

CSS variables define harmonious color palettes for surface, text, border, and accent tokens:

  • Dark Mode: High-contrast dark charcoal background (#0b0f19) with glowing teal/emerald energy accents (#10b981, #06b6d4).
  • Light Mode: Crisp clean off-white background (#f8fafc) with slate typography and deep emerald highlights.

4. Key Landing Page Sections

  1. Hero Section:
    • Compelling headline highlighting autarky and OZE self-consumption.
    • Primary Call-to-Action (CTA) linking to demo booking (site_url('demo_booking')) and panel login (site_url('panel_login')).
    • Interactive hero badge indicating active live deployment status.
  2. Feature Showcase (#features):
    • 4-column card grid detailing AI Optimization Agent, Automated DSO Balancing (0.8 / 0.6 factors), Real-time Hardware Fleet Control, and Digital Voting.
  3. How It Works (#how):
    • 3-step sequence covering Hardware Connect (Modbus/IP), AI Autonomous Dispatch, and Member Automated Settling.
  4. Pricing Comparison (#pricing):
    • Tiered pricing plans: Basic, Pro, and Enterprise.
    • CTA routing directly to Dealflow microservice (inquiry.php) or Google Calendar scheduling.
  5. Interactive Savings Calculator:
    • Real-time client-side calculator computing estimated annual energy cost reductions based on cooperative member count and solar capacity (kWp).
  6. FAQ (#faq) & Blog Highlights (#blog):
    • Collapsible accordion answering regulatory, legal, and hardware compatibility questions.