# 📂 Digital Marketing Module (Trendnut)
This directory houses the high-performance, biometric-themed components for the Trendnut Digital Marketing service line. These files are designed as modular "Blocks" that can be loaded independently or via shortcodes.

## 🏗️ Folder Structure


            /trendnut.com #wordpress web site
            │
/public_html/digital-marketing/
├── dm-functions.php    # 🧠 Module Controller (The "Brain")
│                       # 1. SMART LOADER: Scans the directory and automatically turns 
│                       #    every .php file into a WordPress shortcode: [tn_filename].
│                       # 2. WRAPPER: Injects a standard <div class="tn-auto-section"> 
│                       #    around every block for consistent layout control.
│                       # 3. GLOBAL DESIGN: Defines CSS :root variables (--tn-blue, 
│                       #    --tn-electric) to ensure biometric branding matches 
│                       #    across all modular components.
│ 
├── hero.php            # ⚡ Hero Segment [tn_hero]
│                       # 1. UI ENGINE: Combined Typewriter Header + Glassmorphism 
│                       #    Contact Form (CF7 integration).
│                       # 2. BIOMETRIC ELEMENTS: Features a custom fingerprint-themed 
│                       #    submit button with a vertical "Cyan Laser" scan animation.
│                       # 3. DATA VISUALIZATION: Background includes a dynamic SVG 
│                       #    Growth Path with animated motion-along-path circles.
│                       # 4. DEPTH ENGINE: Implements a multi-layered 3D text-shadow 
│                       #    system (Slate/Blue) for high-end typography.
│ 
├── seo-stats.php       # 📊 SEO Analytics [tn_seo-stats]
│                       # 1. VISUAL ENGINE: Inherits the Hero's 50px grid pattern 
│                       #    and `tnScanline` animation for site-wide continuity.
│                       # 2. BIOMETRIC CARDS: 3-column grid featuring "Hover-to-Scan" 
│                       #    logic; cards activate a vertical laser beam on mouse-over.
│                       # 3. BACKGROUND ANALYTICS: Features an underlayed SVG 
│                       #    Growth Area (`opacity: 0.3`) to simulate data reporting.
│                       # 4. BRANDED CTA: Dedicated "Fingerprint" button linking to 
│                       #    SEO packages, utilizing the `biometricScanHorizontal` effect.
│             
├── trust.php           # 🛡️ Trust Engine [tn_trust]
│                       # 1. INFINITE SCROLL: Pure CSS slider using dual-group 
│                       #    translation for a seamless 0% to -50% loop.
│                       # 2. MASKING ENGINE: Uses linear-gradient mask-image to 
│                       #    fade logos at the left/right container edges.
│                       # 3. BIOMETRIC HOVER: Individual logo items feature a 
│                       #    "Laser Move" scan and SVG pulse on mouse-over.
│                       # 4. DECORATIVE ASSETS: Includes an anti-clockwise rotating 
│                       #    gear and the standardized Hero scanline background.
│ 
├── seo-areas.php        # 📡 Market Radar [tn_seo-areas]
│                        # 1. GEOSPATIAL ENGINE: Uses a localized 50px grid underlay 
│                        #    to simulate a "Radar Tracking" environment.
│                        # 2. DETECTION UI: Features a "Live Pulse" status indicator 
│                        #    synced with the `--tn-electric` brand color.
│                        # 3. INTERACTIVE MAPPING: Hovering over regions triggers 
│                        #    the `tnScanline` logic and a crosshair cursor.
│                        # 4. DEPTH ENGINE: Title utilizes the standard 3D stack 
│                        #    to maintain visual hierarchy with the Hero block.
│          
├── /                    #further folders
│
└──                      #further files

---

## 🧩 Architectural Principles
1. **DECOUPLING:** UI logic (PHP/CSS) is strictly separated from WordPress Page Builders to ensure maximum site speed and zero "plugin bloat."
2. **ATOMIC CSS:** Global keyframes (e.g., `tnScanline`, `tnRotateGear`) are defined in `dm-functions.php`. Avoid redefining these in individual component files.
3. **BIOMETRIC CONSISTENCY:** All "Laser" effects and scanning borders MUST use the brand-standard Electric Cyan: `#22d3ee`.
4. **DEPTH ENGINE:** Typography follows a strict 3D shadow stack to maintain the "Physical Interface" look.

---

## 🛠️ Implementation Guide

### How to Add a New Section:
1. **File Creation:** Create a new `.php` file in the `/digital-marketing/` folder (e.g., `services-grid.php`).
2. **Styling:** Use the standard 3D Depth Engine for headers to match existing blocks:
   `text-shadow: 0 1px 0 #cbd5e1, 0 2px 0 #94a3b8, 0 5px 10px rgba(0,0,0,0.1);`
3. **Deployment:** Simply type the shortcode `[tn_services-grid]` into any Gutenberg, Elementor, or Classic Editor text block. The "Brain" (`dm-functions.php`) handles the rest.

### Global CSS Variables:
* **Primary Blue:** `#2563eb`
* **Electric Cyan:** `#22d3ee` (Used for lasers/scanners)
* **Grid Spacing:** `50px 50px`
* **Font Family:** `Inter`, sans-serif (Weights: 400, 700, 800, 900).
* **Colors:** Primary Blue (`#2563eb`), Electric Cyan (`#22d3ee`), Slate (`#0f172a`).
* **Core Feature:** "Biometric Laser Style" — All interactive items must feature a scanning light beam or gear rotation (`tnRotateAntiClock`).

## 🔒 Security & Performance
- **Isolation:** Each `.php` file is self-contained with internal `<style>` blocks to prevent global CSS leakage.
- **Animation Performance:** Uses `transform` and `opacity` properties for GPU-accelerated rendering at 60fps.
- **Pathing:** Uses absolute server paths (`/home/tren7094/...`) to ensure reliable inclusion via the `init.php` bootstrap.
-