talenthook-ai

byLucifer

Build a premium, high-converting, mobile-responsive full-stack web application named "TalentHook AI" that operates as an exclusive human-sounding job post generator. The entire system must be architected as a 100% serverless, client-side application to handle massive viral traffic spikes across different devices simultaneously without database lag or server crashes. 1. PROMPT BAR CONSOLE & PLATFORM ENGINE: - CENTER VIEW: Design a prominent, wide search-engine style prompt input console with the placeholder: "Enter job details (e.g., Remote Node.js Dev, 3 Yrs exp, $20k salary)..." accompanied by an "Engine Start" button. - MULTI-PLATFORM DROPDOWN: Immediately next to the prompt bar, place a stylized interactive selection dropdown component titled "Target Platform" with pre-configured filters: [Universal Omni-Post, LinkedIn Feed, Naukri Elite, Indeed Standard, Corporate Portal]. 2. ANTI-MISUSE VALIDATION FIREWALL: - Hardcode a robust client-side string-filtering security middleware layer that scans all inputs before processing. - If a user attempts to input phrases or tokens related to image generation, video creation, coding assignments, or non-recruitment chat topics, block the execution. Immediately display a bold red warning notification banner across the screen: "❌ Access Denied: TalentHook AI exclusively processes job vacancies and hiring specifications. Media generation modules are deactivated." 3. CONVERTING GENERAL LLM FRICTION TO THE NATIVE ENGINE: - Hardcode a secret system prompt context routing logic inside the generator loop. The output engine must act as an elite executive headhunter, automatically stripping all robotic AI clichés ("Are you ready to level up?", "Look no further", "Exciting opportunity"). - The text must open immediately with a pattern-interrupting human hook line designed to stop the scroll on LinkedIn. It must automatically structure the generation into three clear, transparent segments that job seekers love: The Reality (What you'll do), What We Need (The actual skills/stack), and The Trade-Offs (Salary, Remote setup, Benefits). 4. AUTHENTICATION & INFRASTRUCTURE PAGES (CLIENT-SIDE MODALS): - SIGN-IN MODAL: Position a glowing "Sign In / Join" action controller in the header navigation navbar. When clicked, toggle a beautiful modal window featuring two distinct, styled social authentication vectors: "Continue with Google" and "Continue with LinkedIn". Manage the toggle state purely in local React memory so clicking updates the UI instantly to an "Authenticated" profile view. - STATIC FOOTER LINKS: Build high-fidelity overlay modal cards accessible via navigation links for: * "How It Works": A clean, bulleted operational tutorial checklist showing how TalentHook AI hooks top talent. * "Pricing Plans": A beautiful tier comparison matrix presenting a $0 Free Tier alongside a $39/month Corporate Tier. * "Terms & Conditions": Legal copy stating a strict 100% Stateless Privacy Policy—declaring that zero job details or user search strings are ever stored on an external server, and everything is permanently purged upon closing or refreshing the tab. 5. ENGINE INTERACTION COMPONENTS: - RENDER PIPELINE: Show a high-fidelity loading skeleton text animation loop during generation ("Purging corporate AI cliches...", "Formatting for Naukri standard layouts..."). - OUTPUT CARDS: Render the finalized text into a beautiful obsidian copy card. Include a functional "Copy to Clipboard" trigger with a floating success animation, alongside a client-side "Download Text File" button.