A premium, responsive AI SaaS web application that helps professionals automate everyday workplace tasks — writing emails, planning work, and summarizing research — with a sleek dark-blue glassmorphism interface.
Built with Lovable · Live preview
The AI Workplace Productivity Assistant combines a polished marketing site with a full in-app workspace. Visitors land on a hero page with animated statistics, feature highlights, pricing and FAQs; signed-in users move into a sidebar workspace where the AI tools live.
Every AI response is editable, exportable, and accompanied by a Responsible AI disclaimer:
AI-generated content may contain errors or inaccuracies. Please review and verify all information before using it for professional or business purposes.
- AI Email Generator — enter purpose, recipient, details, and tone (Professional, Friendly, Formal, Persuasive) to produce a ready-to-send, editable email.
- AI Task Planner — turn tasks, deadlines, and priorities into an organized daily or weekly schedule with completion tracking.
- AI Research Summarizer — paste long articles or notes and get a concise summary with key points, insights, and recommended next steps.
- Dashboard with animated productivity counters and recent activity
- Saved projects / generation history with search and filtering
- Settings page and user profile menu
- Notification menu and global search in the sticky nav
- Editable results, copy-to-clipboard, clear, and download
- Export to PDF, Word, and plain text
- Loading animations and success toasts
- Sticky glass navigation: Home, Features, Pricing, About, Contact, Login, Get Started
- Animated hero with dashboard preview, animated statistics
- Feature cards, "How It Works", testimonials, Free/Professional/Enterprise pricing, FAQ
- Footer with social links, Privacy Policy, and Terms
- Dark / light mode toggle
- Smooth scrolling, hover effects, and subtle motion throughout
- Fully responsive from mobile to desktop
- Accessible semantics and keyboard support
- Per-route SEO metadata (titles, descriptions, Open Graph, Twitter cards)
| Area | Technology |
|---|---|
| Framework | TanStack Start v1 (React 19, SSR + server functions) |
| Routing | TanStack Router (file-based routes in src/routes) |
| Data fetching | TanStack Query |
| Build tool | Vite 8 |
| Styling | Tailwind CSS v4 (tokens in src/styles.css) |
| UI components | shadcn/ui + Radix UI primitives |
| Icons | lucide-react |
| Notifications | sonner |
| AI | Vercel AI SDK (ai, @ai-sdk/openai-compatible) via the Lovable AI Gateway |
| Validation | Zod |
| Language | TypeScript |
| Tooling | ESLint, Prettier |
src/
components/ Shared UI (SiteNav, SiteFooter, AppShell, ResultPanel, …)
lib/ AI server functions, history/export helpers, plan data
routes/ File-based routes — marketing pages + `_app.*` workspace pages
styles.css Design tokens, theme, animations
- Node.js 20+ and npm (install with nvm)
git clone <this-repository-url>
cd <repository-name>
npm install
npm run devThe app starts on http://localhost:8080.
AI features run through the Lovable AI Gateway, which is configured automatically in
the Lovable environment (LOVABLE_API_KEY). To run the AI tools locally, add the key to
a .env file at the project root:
LOVABLE_API_KEY=your-key-here
Without the key, the site and all pages still render — only AI generation calls fail.
| Command | Description |
|---|---|
npm run dev |
Start the dev server |
npm run build |
Production build |
npm run preview |
Preview the production build |
npm run lint |
Run ESLint |
npm run format |
Format with Prettier |
Open the project in the Lovable editor
and click Publish. Changes pushed to main on GitHub sync back into Lovable.