🧭 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

1. Ensure ACF PRO is installed and active.
2. Upload this plugin folder to your WordPress installation:
3. Activate the plugin from Plugins → Installed Plugins.
4. Create a new Page in WordPress.
5. Under Page Attributes → Template, select SAM Landing Page.
6. Add the following ACF blocks in Gutenberg:

• SAM Hero
• SAM Features
• SAM Testimonial
• SAM Contact

7. 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.