sage-ai

As a user I want to be able to use the frontend Homepage so I can view the Hero section with neural network animation, About AI, Services, Industries, Development Process (6 clickable orbs: Discovery, Design, Development, Integration, Deployment, Optimization), AI Visuals bento grid, Testimonials carousel, Trust Badges marquee, and ContactCTA. Implement based on the existing Homepage (v3) JSX design. NavBar must include exactly 4 headers: Industries (https://www.hyena.ai/industries/), About (https://www.hyena.ai/about-us/), Contact (https://www.hyena.ai/contact-us/), AI Application Development (https://www.hyena.ai/services/artificial-intelligence/) — no other menu items. CTA buttons: 'Unlock AI Power' and 'Accelerate Growth with AI', both linking to https://www.hyena.ai/contact-us/. Includes frosted-glass sticky NavBar and Footer with four-column grid. All DoFollow internal links embedded per SRD Section 3. Radial violet glow behind hero. Mobile responsive.

As an admin I want to be able to use the frontend Backend Login Page so I can authenticate and access the admin dashboard. Implement based on the Backend (v4) JSX design login section. Includes email/password form, Hyena AI branding, error states, and redirects to Dashboard on success. Follows dark navy theme with violet accents. Mobile responsive.

As an admin I want to be able to use the frontend Backend/Dashboard page so I can view site analytics (page views, CTA clicks, lead form submissions) via charts and stats widgets, and navigate to content management, SEO panel, contact manager, and AI model status sections. Implement based on the existing Backend (v4) and Dashboard (v4) JSX designs. Includes TopBar, collapsible Sidebar, WelcomeBanner, StatsCards, AnalyticsChart, AIModelsStatus, ActivityLog, and StatusBar. Follows dark navy theme with violet accents. Mobile responsive with off-canvas sidebar drawer.

As a user I want to be able to use the frontend Contact Page so I can view Hyena AI's Ashburn HQ address (44320 Premier Plaza, Suite 210, Ashburn, VA 20147), phone (+1-703-263-0855), and email (sales@hyena.ai), and submit an inquiry via a secure contact form. Implement based on the existing Contact Page (v4) JSX design. Page includes lead capture form with name, email, company, and message fields, and a submit CTA. Links from Homepage and Services Page CTAs land here. NavBar must match Homepage header (Industries, About, Contact, AI Application Development). Mobile responsive.

As a user I want to be able to use the frontend Services Page so I can view detailed information about Hyena AI's AI services including AI Application Development, LLM Integration, Intelligent Automation, Data & Analytics AI, Cloud AI Infrastructure, and AI Consulting. Each service includes an icon, title, description, and DoFollow link. Implement based on the existing Services Page (v4) JSX design. Page links back to Homepage and to Contact Page CTA. NavBar must match Homepage header (Industries, About, Contact, AI Application Development). Follows dark navy theme with violet accents. Mobile responsive.

As an admin I want to be able to use the backend API for analytics so I can track page views, CTA click events, and form submissions from the Homepage and Contact Page. FastAPI endpoints GET /api/analytics (aggregated stats) and POST /api/events (event ingestion). Data stored in MySQL. Supports time-range filtering (7D/30D/90D) for the Dashboard AnalyticsChart.

As a user I want to be able to use the backend API for the contact form so I can submit my inquiry (name, email, company, message) securely. FastAPI endpoint POST /api/contact stores submission in MySQL via Alembic-managed schema. Input validation, HTTPS enforcement, email notification to sales@hyena.ai on new submission. GET /api/contact for admin retrieval of submissions.

As an admin I want to be able to use the frontend Contact Manager Page so I can view, update, and manage incoming lead form submissions and public contact information. Implement based on the existing Contact Manager (v3) JSX design. Includes editable inline fields for HQ address, phone, and email with pencil-icon toggles and Save/Cancel controls, a live preview card showing how the contact block renders on the live site, and a Sync to Live Site button with a confirmation modal. Follows dark navy theme. Mobile responsive.

As an admin I want to be able to use the frontend Content Editor Page so I can update visuals (AI-themed images generated via Google Nano Banana), edit internal DoFollow links, and manage section copy across the Homepage. Implement based on the existing Content Editor (v3) JSX design. Includes a visual asset grid with Replace/Regenerate actions, a links editor table with anchor text, target URL, SEO status, and edit/delete controls. Follows dark navy theme. Mobile responsive.

As an admin I want to be able to use the backend API for content management so I can update Homepage visuals, section copy, and internal DoFollow link targets via the Content Editor. FastAPI CRUD endpoints GET/PUT /api/content/{section} and GET/PUT/POST/DELETE /api/content/links. Data stored in MySQL. Supports visual asset metadata and DoFollow link configuration.

As an admin I want to be able to use the frontend SEO Panel Page so I can configure DoFollow link settings, manage meta tags, page titles, OG image URLs, canonical URLs, and sitemap/robots.txt settings. Implement based on the existing SEO Panel (v2) JSX design. Includes DoFollow link toggle table with global Apply-to-All, inline meta tag editors, sitemap generation status, and a primary Save button with violet glow. Follows dark navy theme. Mobile responsive.

As a user I want to be able to use the AI API for image generation so the Homepage automatically renders AI-themed visuals (Neural Network, Enterprise Dashboard, Human-AI Collaboration, Cloud AI Infrastructure, etc.) generated by Google Nano Banana via Litellm routing. Backend endpoint POST /api/generate-image proxies requests to Google Nano Banana model, caches results in MySQL/filesystem, and returns URLs for frontend consumption. Langchain used for prompt chaining.

As an admin I want to be able to use the backend API for SEO configuration so I can manage DoFollow link mappings for all internal keywords, meta tags, canonical URLs, OG image URLs, and sitemap/robots.txt configuration. FastAPI CRUD endpoints GET/PUT /api/seo/links, GET/PUT /api/seo/meta, POST /api/seo/sitemap/regenerate. Changes reflect dynamically on the Homepage and Services Page.

As a user I want to be able to use a frontend that loads within 2 seconds on desktop and mobile, passes WCAG 2.1 accessibility checks, and has all meta tags, canonical URLs, and DoFollow links correctly configured. Run Lighthouse audits, implement lazy loading for AI visuals, add aria-labels to all interactive elements across Homepage, Contact Page, and Services Page. Configure robots.txt, sitemap.xml, and HTTPS enforcement.