Install
This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.
Install straight from GitHub with WP-CLI:
wp plugin install https://github.com/hassansnexus/sam-landing-page/archive/refs/heads/main.zip🧭 AssetSonar SAM Landing Page (ACF Block-Based Template)
A custom WordPress plugin that creates a modern, responsive marketing landing page to promote the Software Asset Management (SAM) feature in AssetSonar — an IT Asset Management platform for growing IT teams.
This plugin demonstrates clean front-end development, modular block structure using ACF PRO, and best practices for building maintainable landing experiences in a SaaS environment.
✨ Features
✅ Custom Page Template
– Adds a dedicated “SAM Landing Page” template selectable under Page Attributes.
✅ Modular ACF Blocks
– Includes 4 reusable Gutenberg-compatible blocks:
- Hero Section – Headline, subtext, CTA, and hero image.
- Feature Section – Highlight benefits like renewal reminders, risk flagging, etc.
- Testimonial Section – Customer quote with name, role, and avatar.
- Contact Section – Simple, accessible demo request form.
✅ SaaS-Grade Design
– Clean layout, white space, consistent hierarchy, and smooth responsive behavior.
✅ Performance & Accessibility
– Lightweight CSS & JS, semantic HTML, ARIA labels, and keyboard-friendly interactions.
✅ Theme-Agnostic
– Works with any WordPress theme; hides the default site header when template is active.
🧩 Technical Overview
| Area | Description |
|---|---|
| Framework | WordPress + ACF PRO |
| Blocks | acf/sam-hero, acf/sam-features, acf/sam-testimonial, acf/sam-contact |
| Language Stack | PHP, HTML5, CSS3, JavaScript |
| Responsive | Mobile-first grid and flex-based layout |
| Accessibility | ARIA tags, semantic headings, visible focus states |
| File Structure | Organized assets (CSS/JS) and templates for easy maintainability |
⚙️ Installation
- Ensure ACF PRO is installed and active.
- Upload this plugin folder to your WordPress installation:
- Activate the plugin from Plugins → Installed Plugins.
- Create a new Page in WordPress.
- Under Page Attributes → Template, select SAM Landing Page.
- Add the following ACF blocks in Gutenberg:
SAM HeroSAM FeaturesSAM TestimonialSAM Contact
- Publish and view your live landing page 🎉
🖼️ Preview (Example Layout)
┌──────────────────────────────┐ │ Header Navigation │ ├──────────────────────────────┤ │ Hero Section (CTA + Image) │ ├──────────────────────────────┤ │ Feature Cards (4 Columns) │ ├──────────────────────────────┤ │ Testimonial Block │ ├──────────────────────────────┤ │ Contact / Demo Form │ └──────────────────────────────┘
🧠 Development Notes
- Uses
acf_register_block_type()for flexible, future-proof block creation. - Blocks are conditionally visible only when the SAM Landing template is active.
- CSS variables and gradients provide a modern, customizable palette.
- JavaScript is minimal, limited to simple interactivity and form feedback.
- Each section is semantic and fully independent — easy to reorder or reuse.
🧩 Folder Structure
assetsonar-sam-landing/ │ ├── assetsonar-sam-landing.php # Main plugin file ├── templates/ │ └── assetsonar-sam-landing-template.php ├── assets/ │ ├── style.css │ └── script.js └── README.md
🔍 SEO & Performance
- Proper heading structure (
<h1>,<h2>,<p>). - Metadata and alt attributes supported through ACF fields.
- Optimized DOM, minimal nesting, and lazy-load placeholders.
🧪 Requirements
- WordPress 6.0+
- Advanced Custom Fields PRO
- PHP 7.4 or higher
📽️ Demo Video
🎥 Loom Walkthrough: Watch here
🧑💻 Author
Developed by: Hassan
For: AssetSonar Frontend Assessment
Date: October 2025
⚡ Built with clean code, accessibility, and scalability in mind — reflecting modern SaaS landing page best practices.