Template Components

Discover all the building blocks included in this modern SaaS template.

Navigation & Header

The template includes a flexible, responsive header with logo, navigation links, and a theme toggle button. It works across all pages and adapts to mobile devices.

Hero Sections

Pre-styled hero sections for landing pages, about pages, or product showcases. You can set a background image, heading, paragraph, and buttons. The hero is fully responsive and uses shadows and gradients for modern styling.

Features & Content Blocks

Grid-based sections for highlighting features or services. Includes reusable .card components with hover effects and shadows. You can use the .features class for automatic responsive layout.

Buttons

The template has several button styles:

Forms

Pre-styled forms with labels, input fields, and textareas. Includes hover and focus effects, validation colors, and a responsive layout. Forms are wrapped in .form-card for consistent spacing and shadows.

Cards

Reusable cards for features, team members, or other content. They have shadows, rounded corners, and hover animations. Easily placed inside grids or content sections.

Modals

Pre-built modal dialogs for success messages, alerts, or notifications. Can be triggered with a simple class toggle, fully responsive and centered with backdrop overlay.

Footer

Simple and responsive footer section with text and border. Can be reused on all pages and inherits the theme colors.

Dark / Light Theme

The template includes a theme toggle button. Switching themes updates colors globally using CSS variables, and your preference is saved in localStorage.

Responsive Design

All components are fully responsive, with grid layouts, flexible containers, and media queries to ensure your template looks great on mobile, tablet, and desktop.