Posts
Role: Front-End UI Developer.
Task: Build a single, fully-contained HTML file (Tailwind CSS via CDN, Lucide Icons via CDN) for a modern dark-mode dashboard called "TrendSpike AI" designed for Google Blogger (Static Page).
Niche: Instagram Reels Tracking for AI & Tech Creators.
Aesthetic & Theme:
- Dark cyber/minimalist dashboard (zinc-900 background, vibrant emerald/cyan accents).
- Pure Vanilla JS, responsive for both desktop and mobile view inside Blogger.
Key Sections:
1. Header:
- "TrendSpike AI" logo with a badge: "AI Creator Viral Radar".
- Quick counters: Tracked AI Creators, Top Outlier Multiplier, Average Hook Duration.
2. Outlier Hero Spotlight:
- "Viral AI Reel of the Day":
* Creator handle & Outlier score (e.g. "36.2x Above Average").
* Tool Featured Badge (e.g. "Kling AI", "Perplexity").
* Exact 3-Second Hook quote.
* Buttons: "View Analysis" and "Copy Hook Template".
3. Winning Reels Feed (Card Grid):
- Filters: [All, Prompt Tutorials, New Tools, Money/Automation, Shock/Comparison].
- Duration filters: [< 15s, 15-30s, > 30s].
- Cards showing: Creator, Play Count, Tool Tag, Outlier Multiplier, and a "Save Hook" bookmark icon.
4. Deep-Dive Modal (AI Breakdown):
- Tool Breakdown: What problem the tool solves.
- Hook Deconstruction:
* Visual Action: (e.g. "Split screen showing manual work vs 1-click AI").
* Spoken Script: (e.g. "Stop using ChatGPT like a beginner...").
- 3 Adapted Hook Templates: Ready to copy with placeholders like "[Tool Name]".
5. Data Structure:
- Provide an initial mock JSON array representing 8-10 high-performing AI reels with fields:
`{ id, creator, tool, plays, baselineMultiplier, hookSpoken, hookVisual, url, date, template }`.
- Setup a `fetch()` call fallback to read dynamically from an external raw JSON URL.