frozen-website

As an admin I want to be able to use the backend API to fetch summary statistics for the Admin Dashboard overview. Implement a FastAPI endpoint GET /api/admin/dashboard/stats that returns summary counts: total blog posts, published blog posts, open job listings, total testimonials, pending/unreviewed testimonials, and total contact form submissions. Endpoint must be protected by JWT authentication middleware. Returns a JSON object with named count fields. Use MySQL queries via SQLAlchemy ORM. Include error handling and appropriate HTTP status codes.

As a user I want to be able to use the frontend to toggle between English and Gujarati language across all pages. Implement a robust internationalization (i18n) system supporting English and Gujarati across the entire React frontend. Set up react-i18next with translation JSON files (en.json and gu.json). Create a language toggle component (EN/ગુજ pill switcher with sliding indicator) for the site header that persists the user's language preference in localStorage. Translate all static UI labels, navigation items, button text, form labels, error messages, and page headings. Ensure Noto Sans Gujarati font is loaded via Google Fonts. Apply to all pages: Home, Login, Dashboard, Blog, Careers, Services, Industries, About, Contact, Testimonials, HR Calculator.

As an admin I want to be able to use the frontend to sign in securely to access the dashboard. Implement the Admin Login page UI based on the existing v2 design. Build a clean, branded login form centered on a #F5F9FF background with a white surface card, coral accent elements, email and password fields, validation feedback, error states, and a coral submit button (border-radius 10px). Apply the Employzee theme. The page should be responsive and accessible. Wire up the form to the existing authentication backend. Include redirect logic to the Admin Dashboard on successful login. Add appropriate SEO meta tags marking the page as noindex for admin routes.

As a user I want to be able to use the frontend for seamless site-wide navigation. Implement the global Navigation Header and Footer components used across all pages based on the NavBar design from the v2 designs. Header: logo (coral accent bar + Employzee wordmark), main navigation links (Home, Services, Industries, About, Blog, Careers, Contact), language toggle pill (EN/ગુજ) with sliding indicator, mobile hamburger menu with full-width slide-down drawer, and a prominent coral 'Book Consultation' CTA button (border-radius 10px). On scroll: frosted glass transition from rgba(255,255,255,0.65)/blur(2px) to rgba(255,255,255,0.88)/blur(16px) with drop shadow. Footer: company logo (white wordmark on navy), tagline, navigation columns, services list, contact info (Rajkot Gujarat address, phone, email), social media links (LinkedIn, Facebook, Instagram, WhatsApp), language switcher, copyright. Apply Employzee theme. Fully responsive mobile-first.

As an admin I want to be able to use the backend API to manage job listings and view submitted applications. Implement protected FastAPI CRUD endpoints: POST /api/admin/careers/jobs, GET /api/admin/careers/jobs, PUT /api/admin/careers/jobs/{id}, DELETE /api/admin/careers/jobs/{id}, PATCH /api/admin/careers/jobs/{id}/toggle (activate/deactivate), GET /api/admin/careers/applications (list all, filterable by job_id), GET /api/admin/careers/applications/{id} (single application detail), GET /api/admin/careers/applications/{id}/resume (download resume file). All endpoints require JWT authentication.

As an admin I want to be able to use the backend API to create, edit, publish, and delete blog posts. Implement protected FastAPI CRUD endpoints: POST /api/admin/blog/posts (create), GET /api/admin/blog/posts (list all including drafts), GET /api/admin/blog/posts/{id} (get by ID), PUT /api/admin/blog/posts/{id} (update), DELETE /api/admin/blog/posts/{id} (delete), PATCH /api/admin/blog/posts/{id}/publish (toggle publish status). All require JWT authentication. Define BlogPost SQLAlchemy model: id, title, slug, excerpt, content, featured_image_url, category, tags, language, is_published, created_at, updated_at. Include Pydantic input validation.

As a user I want to be able to use the frontend to contact Employzee and book a consultation from the Contact page. Implement the Contact page based on the existing v1 design. Build a contact form with fields: full name, email, phone number, company name, service of interest (dropdown), message, and preferred language. Include form validation, success confirmation, and error handling. Display company contact info (Rajkot Gujarat address, phone, email, business hours). Embed a Google Maps iframe of the Rajkot office. Add WhatsApp integration button. Support multilingual labels (English/Gujarati). Apply Employzee theme with coral CTAs. SEO-friendly with LocalBusiness structured data. Mobile-first responsive.

As a user I want to be able to use the frontend to explore all HR services offered by Employzee in detail. Implement the Services page based on the existing v2 design. Build sections: sticky NavBar, hero banner with coral accent and service overview, detailed service cards for Recruitment & Staffing, Payroll Management, HR Consulting, Compliance Management, Training & Development, and HR Outsourcing — each with icon, title, description, key benefits list, and 'Book Consultation' CTA. Include a features/USP band, client logos strip, and a bottom CTA section linking to Contact. Support multilingual content (English/Gujarati). Apply Employzee theme with #F5F9FF background. SEO-friendly. Mobile-first responsive.

As a user I want to be able to use the frontend to explore Employzee's services and book consultations from the Home page. Implement the Home page UI based on the existing v2 design. Build all sections: NavBar (sticky frosted-glass), Hero (3D interactive iceberg concept with ocean animation, coral CTA), Services overview grid, Industries served preview, Why Choose Employzee trust section, Client testimonials carousel, HR Calculator teaser/widget, Blog preview cards, Call-to-Action band, and Footer. Ensure mobile-first responsive layout, SEO-friendly semantic HTML, and multilingual text support (English and Gujarati toggle). Connect to theme/color system. The iceberg hero should have hover/click micro-interactions with ripple effects and color shift animations.

As a user I want to be able to use the frontend to read client testimonials and build trust in Employzee. Implement the public-facing Testimonials page based on the existing v2 design. Build a visually rich grid layout displaying client testimonials with coral quotation marks, client name, company/role, testimonial text, 5-star rating, optional client photo, and industry tag pill. Include a filter or tab row for industry category. Feature a hero section and a bottom CTA. Support both English and Gujarati testimonials. Apply Employzee theme with alternating #F5F9FF and #FFFFFF section backgrounds. Add SEO meta tags and structured data (Review schema). Mobile-first responsive.

As a user I want to be able to use the frontend to browse job openings and submit my resume via the Careers page. Implement the public-facing Careers page based on the existing v2 design. Build a hero section, job listings grid with open positions (title, department, location, type, brief description, 'Apply Now' CTA), an expandable/modal resume submission form (name, email, phone, position, cover letter, PDF/DOC upload), and a CTA to Contact. Show form validation, success, and error states. Apply Employzee theme. SEO meta tags with JobPosting structured data schema. Mobile-first responsive.

As a user I want to be able to use the frontend to read HR insights and articles on the Blog. Implement the public-facing Blog pages based on the existing v2 design. Build a Blog Listing page with a hero, category filter chips, and a grid of blog post cards showing title, excerpt, category pill, author, date, and thumbnail. Implement pagination. Build a Blog Detail page with full article content, author info, publish date, tags, related posts section, and a CTA linking to Contact. Ensure SEO-friendly markup with meta title, description, canonical URLs, and Article structured data. Support multilingual content rendering. Apply Employzee theme. Mobile-first responsive.

As an admin I want to be able to use the frontend to view an overview of all content and manage the CMS from the Dashboard. Implement the Admin Dashboard page UI based on the existing v2 design. Build a sidebar navigation (260px, white surface, coral active state with left border) linking to Blog, Careers, Content, and Testimonials management sections. Include a stats panel with counts for active blog posts, open job listings, pending testimonials, and recent contact submissions. Show a welcome banner, activity chart placeholder, quick action cards, and recent items list. Implement protected route logic to redirect unauthenticated users to the Login page. Apply the Employzee theme with #F5F9FF background and white surface cards. Responsive for tablet and desktop.

As a guest I want to be able to use the frontend to learn about Employzee's story, team, and values on the About page. Implement the About page based on the existing v2 design. Build sections: NavBar, hero banner, company story and mission/vision, team member profile cards (photo, name, designation, bio), company stats bar (years in business, clients served, employees placed), awards or certifications, Rajkot/Gujarat office location section, and a CTA to Contact. Support multilingual content (English/Gujarati) fetched from the About API. Apply Employzee theme. SEO-friendly with Organization and Person structured data. Mobile-first responsive.

As a guest I want to be able to use the frontend to explore the industry sectors Employzee serves. Implement the Industries page based on the existing v2 design. Build sections: NavBar, HeroIndustries (iceberg-tip SVG illustration, coral glow, pill badge, dual CTAs), IndustriesOverviewGrid (3-col card grid with coral icons for Manufacturing, IT & Technology, Healthcare, Retail & FMCG, Banking & Finance, Education, Logistics, Hospitality, Construction, Startups), IndustryDetailSpotlight (pill-selector tabs with animated two-column detail view per industry), WhyChooseEmployzee (4-col feature grid), IndustryCaseStudies (3-col cards with coral metric numerals), StatsBar (deep navy band with animated count-up stats), IndustryTestimonials carousel, CallToAction (deep navy inverted band with iceberg watermark), and Footer. Support multilingual content. Mobile-first responsive.

As a guest I want to be able to use the frontend to calculate estimated HR costs and potential savings with Employzee's outsourcing. Implement the interactive HR Cost Calculator as a standalone page and embeddable widget for the Home page. Allow users to input: number of employees, industry sector, current HR processes handled in-house (checkboxes: payroll, recruitment, compliance, training), and company size tier. Calculate and display estimated annual HR cost and potential savings. Show a breakdown chart using Recharts. Include a CTA to contact Employzee for a detailed quote. Fully client-side computation. Support multilingual UI labels (English/Gujarati). Apply Employzee theme with coral accents. Mobile-first responsive.

As an admin I want to be able to use the frontend to create, edit, publish, and delete blog posts from the Admin Dashboard Blog management section. Implement the Blog Management section within the Admin Dashboard based on the v2 Dashboard design patterns. Build a blog post list view with options to create, edit, publish/unpublish, and delete posts. Implement a rich-text editor (React Quill or TipTap) for post content. Include fields for title, slug (auto-generated), excerpt, content, featured image URL, category, tags, language (English/Gujarati), and published status. Add a preview mode. Wire up to the admin blog CRUD API. Protect with authentication.

As an admin I want to be able to use the frontend to upload, edit, and manage client testimonials from the Admin Dashboard. Implement the Testimonials Management section within the Admin Dashboard based on the v2 Dashboard design patterns. Build a list view of all testimonials with the ability to add new testimonials, edit existing ones, publish/unpublish, and delete. Form fields: client name, company, role, testimonial text, star rating (1-5), industry category, optional photo URL, language (English/Gujarati), and published status. Wire up to admin testimonials API. Protect with authentication.

As an admin I want to be able to use the frontend to manage multilingual site content from the Content management page. Implement the Content Management section within the Admin Dashboard based on the existing v2 design. Build the layout with a fixed sidebar (ContentSidebar), page header with breadcrumb and save controls (ContentPageHeader), language switch banner (EN/Gujarati toggle), collapsible table-of-contents chip row, accordion-style dual-language editor panel with English and Gujarati textareas side-by-side, live preview panel with device switcher, version history timeline, and a sticky publish controls bar. Wire up to the content admin API. Protect with authentication. Mobile-first responsive with sidebar collapsing to drawer.

As an admin I want to be able to use the frontend to manage job listings and view applications from the Admin Dashboard Careers section. Implement the Careers Management section within the Admin Dashboard based on the v2 Dashboard design patterns and v2 Careers design. Build a job listings manager with create, edit, activate/deactivate, and delete functionality. Form fields: job title, department, location, employment type, description, requirements, active status. Build a job applications viewer listing all submitted applications per job with applicant details and a resume download link. Wire up to admin careers CRUD API. Protect with authentication.

As a user I want to be able to use the frontend with SEO-optimized pages that appear correctly in search results and social sharing. Implement a comprehensive SEO system across all public pages. Set up React Helmet Async for dynamic meta tag management per page. Implement unique title tags and meta descriptions, Open Graph tags, Twitter Card meta tags, canonical URLs, robots meta tag, JSON-LD structured data for Organization, LocalBusiness (Rajkot), BlogPosting, JobPosting, Service, and Review schemas. Create a sitemap.xml generation script and robots.txt file. Ensure admin/login routes are marked noindex.