You are a senior WordPress developer and architect.
GOAL:
Convert the provided HTML, CSS, and JS files into a clean, reusable, theme-like WordPress structure using Astra (free), Code Snippets, and Gravity Forms.
CONTEXT:
– The attached files represent a fully designed static website (multiple page templates).
– Instead of copying page-by-page HTML, your task is to abstract this into reusable components similar to a custom theme structure.
– The implementation must remain lightweight and compatible with Astra (no custom theme build required unless absolutely necessary).
STRICT CONSTRAINTS:
– DO NOT fetch any external resources.
– DO NOT use page builders or additional plugins.
– DO NOT rely on CDNs, web fonts, or third-party scripts.
– Use only the provided HTML, CSS, and JS.
– Keep everything minimal, structured, and maintainable.
ARCHITECTURE REQUIREMENTS:
1. COMPONENT IDENTIFICATION
– Analyze all HTML files and extract reusable sections:
– Header / Navbar
– Hero sections
– Services blocks
– Stats / counters
– Testimonials
– CTA sections
– Footer
– Group them into reusable components
2. REUSABLE STRUCTURE DESIGN
– Define a reusable structure similar to a theme:
– Global components (header, footer)
– Section components (cards, grids, CTAs)
– Represent these as:
– Gutenberg reusable blocks OR
– Block patterns OR
– Structured HTML modules
3. WORDPRESS IMPLEMENTATION STRATEGY
– Use Astra as the base theme
– Explain how to integrate reusable components using:
– Gutenberg reusable blocks
– Global styles
– Template pages
4. CSS STRATEGY
– Consolidate CSS into:
– One global stylesheet (via Astra Additional CSS or Code Snippets)
– Refactor CSS to:
– Remove duplication
– Support reusable sections
– Maintain design consistency
5. JAVASCRIPT STRUCTURE
– Extract JS into modular logic blocks:
– Navigation handling
– Scroll progress
– Counters
– Form feedback
– Provide:
– A single optimized script structure
– Instructions to place in Code Snippets
6. PAGE TEMPLATES
– Instead of raw page copies, define page compositions:
Example:
Home Page = Header + Hero + Services + Stats + Testimonials + CTA + Footer
– Provide structure for:
– Home
– About
– Services (Networking, CCTV, Repair)
– Contact
7. GRAVITY FORMS INTEGRATION
– Map all forms into reusable form types:
– Lead form
– Contact form
– Show:
– Field structure
– Where each form is used
– How to embed inside reusable sections
8. RESPONSIVENESS FRAMEWORK
– Ensure reusable components maintain responsiveness
– Define layout rules for:
– Mobile
– Tablet
– Desktop
9. PERFORMANCE & CLEANUP
– Minimize CSS and JS footprint
– Remove redundant styles/scripts
– Avoid inline duplication
10. DELIVERABLE FORMAT
Provide output in this structure:
– Component List (reusable blocks)
– Global CSS (final cleaned version)
– Global JS (final cleaned version)
– Page Composition Templates
– WordPress Implementation Steps
– Final checklist
OUTPUT RULES:
– Build everything as reusable and modular (avoid duplication)
– Do NOT fall back to page-by-page raw HTML dumping
– Keep implementation realistic for WordPress + Astra
– Ensure instructions are actionable and structured
END RESULT:
I should be able to build a clean, scalable WordPress site with reusable components instead of duplicating HTML across pages.