This content contains the template and instance data for the Attention Theme, designed to mimic the structure of https://phpwn.com/gemini/ with clean, semantic HTML.
Template Data (JSON)
<code>{
"theme": "Attention",
"templates": {
"home": {
"boxes": {
"HTML_Head": [
"HTML_Head_PM_Google_Analytics",
"HTML_Head_Stylesheet",
"HTML_Head_Favicon",
"HTML_Head_Canonical_URL",
"HTML_Head_Meta_Robots",
"HTML_Head_Title_Tag",
"HTML_Head_Meta_Description"
],
"HTML_Body": [
"header",
"hero",
"features",
"cta-section",
"footer"
],
"hero": [
"hero-content"
],
"features": [
"features-container"
],
"features-container": [
"feature-card-1",
"feature-card-2",
"feature-card-3"
],
"cta-section": [
"cta-content"
],
"footer": [
"footer-content"
]
}
},
"page": {
"boxes": {
"HTML_Head": [
"HTML_Head_PM_Google_Analytics",
"HTML_Head_Stylesheet",
"HTML_Head_Favicon",
"HTML_Head_Canonical_URL",
"HTML_Head_Meta_Robots",
"HTML_Head_Title_Tag",
"HTML_Head_Meta_Description"
],
"HTML_Body": [
"header",
"page-hero",
"page-content",
"footer"
],
"page-hero": [
"page-hero-content"
],
"page-content": [
"content-container"
],
"content-container": [
"main-content",
"sidebar"
],
"footer": [
"footer-content"
]
}
},
"error": {
"boxes": {
"HTML_Head": [
"HTML_Head_PM_Google_Analytics",
"HTML_Head_Stylesheet",
"HTML_Head_Favicon",
"HTML_Head_Canonical_URL",
"HTML_Head_Meta_Robots",
"HTML_Head_Title_Tag",
"HTML_Head_Meta_Description"
],
"HTML_Body": [
"header",
"error-content",
"footer"
],
"error-content": [
"error-message"
],
"footer": [
"footer-content"
]
}
}
},
"instances": {
"Stylesheets": {
"HTML_Head_Stylesheets": {
"parent": "HTML_Head"
}
},
"Title_Tag": {
"HTML_Head_Title_Tag": {
"parent": "HTML_Head"
}
},
"Meta_Description": {
"HTML_Head_Meta_Description": {
"parent": "HTML_Head"
}
},
"Meta_Robots": {
"HTML_Head_Meta_Robots": {
"parent": "HTML_Head"
}
},
"Canonical_URL": {
"HTML_Head_Canonical_URL": {
"parent": "HTML_Head"
}
},
"Favicon": {
"HTML_Head_Favicon": {
"parent": "HTML_Head"
}
},
"PM_Google_Analytics": {
"HTML_Head_PM_Google_Analytics": {
"parent": "HTML_Head"
}
},
"HTML_Container": {
"header": {
"html": {
"tag": "header",
"id": "header"
},
"name": "Header"
},
"hero": {
"html": {
"tag": "section",
"id": "hero"
},
"admin": {
"toggle": {
"open": true
},
"id": "hero"
},
"name": "Hero Section"
},
"hero-content": {
"html": {
"tag": "div",
"class": "container"
},
"admin": {
"id": "hero-content"
},
"name": "Hero Content"
},
"features": {
"html": {
"tag": "section",
"id": "features"
},
"admin": {
"toggle": {
"open": true
},
"id": "features"
},
"name": "Features Section"
},
"features-container": {
"html": {
"tag": "div",
"class": "container"
},
"admin": {
"toggle": {
"open": true
},
"id": "features-container"
},
"name": "Features Container"
},
"feature-card-1": {
"html": {
"tag": "div",
"class": "feature-card"
},
"admin": {
"id": "feature-1"
},
"name": "Feature Card 1"
},
"feature-card-2": {
"html": {
"tag": "div",
"class": "feature-card"
},
"admin": {
"id": "feature-2"
},
"name": "Feature Card 2"
},
"feature-card-3": {
"html": {
"tag": "div",
"class": "feature-card"
},
"admin": {
"id": "feature-3"
},
"name": "Feature Card 3"
},
"cta-section": {
"html": {
"tag": "section",
"id": "cta"
},
"admin": {
"toggle": {
"open": true
},
"id": "cta"
},
"name": "Call to Action Section"
},
"cta-content": {
"html": {
"tag": "div",
"class": "container"
},
"admin": {
"id": "cta-content"
},
"name": "CTA Content"
},
"page-hero": {
"html": {
"tag": "section",
"id": "page-hero"
},
"admin": {
"toggle": {
"open": true
},
"id": "page-hero"
},
"name": "Page Hero Section"
},
"page-hero-content": {
"html": {
"tag": "div",
"class": "container"
},
"admin": {
"id": "page-hero-content"
},
"name": "Page Hero Content"
},
"page-content": {
"html": {
"tag": "section",
"id": "page-content"
},
"admin": {
"toggle": {
"open": true
},
"id": "page-content"
},
"name": "Page Content Section"
},
"content-container": {
"html": {
"tag": "div",
"class": "container columns"
},
"admin": {
"toggle": {
"open": true
},
"id": "content-columns"
},
"name": "Content Container"
},
"main-content": {
"html": {
"tag": "div",
"class": "column-content"
},
"admin": {
"toggle": {
"open": true
},
"id": "main-content"
},
"name": "Main Content"
},
"sidebar": {
"html": {
"tag": "aside",
"class": "column-sidebar"
},
"admin": {
"id": "sidebar"
},
"name": "Sidebar"
},
"error-content": {
"html": {
"tag": "section",
"id": "error-content"
},
"admin": {
"toggle": {
"open": true
},
"id": "error-content"
},
"name": "Error Content Section"
},
"error-message": {
"html": {
"tag": "div",
"class": "container"
},
"admin": {
"id": "error-message"
},
"name": "Error Message"
},
"footer": {
"html": {
"tag": "footer",
"id": "footer"
},
"admin": {
"toggle": {
"open": true
},
"id": "footer"
},
"name": "Footer"
},
"footer-content": {
"html": {
"tag": "div",
"class": "container"
},
"admin": {
"id": "footer-content"
},
"name": "Footer Content"
}
},
"Site_Title": {
"Site_Title": {
"html": {
"tag": "div",
"class": "site-title"
},
"options": {
"link": "home"
}
}
},
"Modular_Content": {
"header-nav": {
"options": {
"display": "select"
},
"name": "Header Navigation"
},
"banner": {
"options": {
"display": "select"
},
"name": "Banner"
},
"fallback": {
"options": {
"display": "fallback"
},
"name": "Fallback Content"
},
"footer-info": {
"options": {
"display": "select"
},
"name": "Footer Information"
}
}
}
}</code>
Implementation Notes
- Header: Clean, semantic
<header>element with an ID for targeting. Contains the site title and navigation via Modular Content. - Hero Section: Uses
<section>tags with semantic IDs like “hero,” “page-hero,” etc. Content wrapped in a container div. - Features Section: Organized as a section containing a container with three reusable feature card instances.
- CTA Section: Dedicated call-to-action section with semantic structure.
- Page Layout: Main content area with optional sidebar for pages that need it.
- Footer: Semantic
<footer>element containing footer content via Modular Content. - All class names: Human-readable (container, feature-card, column-content, column-sidebar, etc.)
- No Tailwind: Zero cryptic utility classes; all names describe their purpose.
How to Use This Data
- Copy the JSON from the Template Data section above
- Go to your PageMotor Theme settings
- Import the template data using the import function
- Begin styling with clean, semantic CSS
- Use Modular Content to populate dynamic sections (header-nav, banner, footer-info)