|
| 1 | +# H&A Security Solutions - AI Coding Agent Instructions |
| 2 | + |
| 3 | +## Project Overview |
| 4 | +H&A Security Solutions is a cybersecurity company website built as a **static HTML site**. The architecture follows a simple static web approach with external contact form integration. |
| 5 | + |
| 6 | +## Core Architecture |
| 7 | + |
| 8 | +### Contact System |
| 9 | +- **External Contact Form**: All contact requests redirect to `https://tellaro.io/contact/` |
| 10 | +- **Business Relationship**: H&A operates as a "Doing Business As" (DBA) entity of Tellaro |
| 11 | +- **No PHP Dependencies**: Contact forms have been removed - site is purely static HTML |
| 12 | + |
| 13 | +### Asset Organization |
| 14 | +- **CSS**: `assets/css/` - modular with external imports (TypeKit fonts, FontAwesome) |
| 15 | +- **JavaScript**: `assets/js/main.js` - jQuery-based with animations and UI interactions |
| 16 | +- **Images**: `assets/img/` organized by purpose (`hero/`, `tab/`, `logo/`, `about/`, etc.) |
| 17 | +- **No Server Dependencies**: Pure static HTML site, no PHP processing required |
| 18 | + |
| 19 | +### Page Structure Pattern |
| 20 | +All pages follow consistent structure: |
| 21 | +```html |
| 22 | +<!DOCTYPE html> |
| 23 | +<!-- IE8 compatibility comments --> |
| 24 | +<head> |
| 25 | + <!-- Google Analytics (G-NM6M7MMYLD) --> |
| 26 | + <!-- CSS: reset.css + style.css --> |
| 27 | +</head> |
| 28 | +<body> |
| 29 | + <!-- Preloader with custom loader animation --> |
| 30 | + <div class="wrapper [page-class]"> |
| 31 | + <header class="header [header-transparent|header-white]"> |
| 32 | + <!-- Logo + Navigation + Social links --> |
| 33 | + </header> |
| 34 | + <!-- Page content --> |
| 35 | + </div> |
| 36 | + <!-- jQuery + validation + WOW.js animations --> |
| 37 | +</body> |
| 38 | +``` |
| 39 | + |
| 40 | +## Development Patterns |
| 41 | + |
| 42 | +### CSS Architecture |
| 43 | +- **Base**: `reset.css` for normalization |
| 44 | +- **Main**: `style.css` with external imports at top |
| 45 | +- **Animations**: WOW.js integration with CSS classes |
| 46 | +- **Responsive**: Bootstrap-like container system (768px/992px/1200px breakpoints) |
| 47 | + |
| 48 | +### JavaScript Patterns |
| 49 | +- **jQuery-based**: All interactions use jQuery |
| 50 | +- **External Contact**: Contact requests redirect to `https://tellaro.io/contact/` |
| 51 | +- **Animation**: WOW.js for scroll-triggered animations with data attributes |
| 52 | +- **Mobile**: Slide toggle navigation for mobile menu |
| 53 | + |
| 54 | +```javascript |
| 55 | +// Standard animation and UI patterns |
| 56 | +$('.mobile-button').toggleClass('active'); |
| 57 | +$('.lists-wrap').slideToggle(); |
| 58 | +``` |
| 59 | + |
| 60 | +## File Naming Conventions |
| 61 | +- **Pages**: `.html` for all pages (static site) |
| 62 | +- **Assets**: Lowercase with hyphens (`logo-white.svg`, `edr-icon.png`) |
| 63 | +- **Directories**: Lowercase, descriptive (`our-team/`, `section/`) |
| 64 | + |
| 65 | +## Deployment Context |
| 66 | +- **Server**: Any web server (no special requirements) |
| 67 | +- **No Build Process**: Direct file serving - no compilation step |
| 68 | +- **External Dependencies**: |
| 69 | + - Google Fonts (TypeKit) |
| 70 | + - FontAwesome |
| 71 | + - Google Analytics |
| 72 | + - jQuery CDN |
| 73 | + |
| 74 | +## Key Integration Points |
| 75 | +- **Contact Routing**: All contact links → `https://tellaro.io/contact/` (external) |
| 76 | +- **Analytics**: Google Tag Manager integration on all pages |
| 77 | +- **Social Media**: Twitter, YouTube, LinkedIn links in header |
| 78 | +- **Mobile Responsiveness**: CSS breakpoints + jQuery mobile menu |
| 79 | + |
| 80 | +## Development Workflow |
| 81 | +1. **Local Development**: Any web server or file:// protocol for testing |
| 82 | +2. **No Dependencies**: Static HTML - no server-side processing |
| 83 | +3. **Assets**: Direct file modification - no build step |
| 84 | +4. **Deployment**: Upload files to any web server |
| 85 | + |
| 86 | +## Common Gotchas |
| 87 | +- **External Links**: Contact forms redirect to Tellaro.io - ensure `target="_blank"` is used |
| 88 | +- **Mobile Menu**: Relies on jQuery slideToggle - ensure jQuery loads first |
| 89 | +- **Icon Updates**: Use `fa-external-link` for external contact links |
| 90 | + |
| 91 | +## File Priority for Changes |
| 92 | +1. **Content**: `index.html`, `about.html`, `services.html`, `contact.html` |
| 93 | +2. **Styling**: `assets/css/style.css` |
| 94 | +3. **Functionality**: `assets/js/main.js` |
| 95 | +4. **Assets**: `assets/img/` for visual updates |
0 commit comments