Syntara AI — Frontend SaaS Landing Page

“Turn repetitive work into intelligent workflows.”

A production-quality frontend SaaS landing page for Syntara AI, a fictional AI workflow automation platform for startups and modern teams.

Portfolio Concept Project:
Designed and engineered by Manoj Kushwaha.
This project is a portfolio concept demonstration of high-end SaaS frontend engineering, clean design systems, responsive layouts, and interactive UI micro-interactions.

---

🚀 Tech Stack

• Framework: Next.js 14 (App Router, Static Generation)
• Language: TypeScript (Strict typing, zero lint warnings)
• Styling: Tailwind CSS (Custom warm-white SaaS palette, refined violet-to-blue accents, subtle grid and dot patterns)
• Animations: Framer Motion (Restrained, smooth layout transitions, modal reveals, accordion springs)
• Icons: Lucide React (Consistent 24px icon system)
• Micro-Interactions: Custom canvas confetti triggers, accessible dialog traps, responsive drawer navigation, interactive simulations

---

✨ Features & Sections Included

1. Sticky Navbar:

   • Brand mark with pulsing activity indicator
   • Navigation links: Product, Solutions, Resources, Pricing
   • Actions: Log in and Get Started modals
   • Background blur and shadow transitions dynamically on scroll
   • Fully responsive slide-in mobile navigation drawer

2. Hero Section & Workflow Builder Mockup:

   • Eyebrow: AI WORKFLOW AUTOMATION
   • Headline: “Turn repetitive work into intelligent workflows.”
   • Interactive Workflow Builder hero canvas displaying: New Lead Ingestion → AI Qualification → CRM Update → Personalized Outreach → Slack Notification
   • Simulate Execution: User can trigger a live 5-step workflow simulation with step-by-step progress, latency metrics, and an active payload inspector panel.

3. Trust & Capability Strip:

   • “Built for modern teams”
   • Dedicated capability previews for: CRM, Marketing, Support, Sales, Operations, Product
   • Displays real integration protocols and sample flows without fake company logos or fake testimonials.

4. Problem & Solution Section:

   • Headline: “Your tools shouldn’t create more work.”
   • Problem cards: Too many manual steps, Scattered tools, Repetitive decisions
   • Interactive “Without Syntara vs. With Syntara AI” comparison toggle.

5. Platform Features:

   • Describe workflows in plain English (with interactive micro-CLI preview)
   • AI-powered decisions (with semantic confidence slider & guardrails)
   • Connect your existing tools (live integration health matrix)
   • Monitor everything (latency waterfall and SLA telemetry)

6. Interactive Product Showcase:

   • Full-featured dashboard mockup with canvas, sidebar, inspector, and execution status
   • Interactive 3-way tab switcher:
     • Build: Visual canvas with node palette and parameter inspectors
     • Test: Dry-run sandbox with mock JSON payload editor and assertion runner
     • Monitor: Real-time throughput metrics, P95 latency, and live streaming logs

7. AI Workflow Generation Section:

   • Headline: “Describe it. Syntara builds it.”
   • Live prompt simulator with preset pills and interactive “Generate” button
   • 4-phase synthesis pipeline:
     1. Understanding request
     2. Generating workflow
     3. Connecting actions
     4. Workflow ready

8. Compounding Benefits:

   • Save hours every week (18+ hrs / week)
   • Reduce repetitive tasks (94% reduction in manual handoffs)
   • Move faster with AI (10x faster deployment)
   • Keep your team focused (100% operational transparency)

9. Concept Pricing:

   • Three tiers: Starter, Team (Most Popular), Scale
   • Monthly and annual billing toggle with 20% discount badge
   • Clear portfolio concept disclaimers

10. Interactive FAQ Accordion:

    • Accessible accordion with animated height transitions
    • Keyboard-friendly (Enter / Space toggling)
    • Live search filter across questions and answers

11. Final Call-to-Action:

    • Headline: “Your next workflow could automate itself.”
    • Quick email submission to launch instant workspace sandbox

12. Footer:

    • Structured site navigation links
    • Back-to-top smooth scrolling
    • Notice: “© 2026 Syntara AI — Concept project by Manoj Kushwaha”

---

🛠️ Local Development

1. Install Dependencies

npm install

2. Run the Development Server

npm run dev

Open http://localhost:3000 in your browser.

3. Production Build

npm run build
npm run start

---

📄 License & Attribution

Concept UI design and frontend implementation created by Manoj Kushwaha. Free for personal study and portfolio reference.