Nexora — AI Productivity SaaS Website

Create a complete, production-quality, visually exceptional AI productivity SaaS website called Nexora using only vanilla HTML, CSS, and JavaScript.

The final website must look like a real venture-backed SaaS product designed by an experienced product design team.

This is NOT a generic startup landing page.

Avoid repetitive feature cards, excessive glassmorphism, random gradients, oversized rounded containers, meaningless AI graphics, and unnecessary animation.

The website should communicate:

• Intelligence
• Speed
• Productivity
• Clarity
• Trust
• Modern technology
• Professional software
• Strong product thinking

The final result must be convincing enough that a real software company could replace the placeholder product information and use the website professionally.

---

1. REQUIRED FILES

Create exactly:

• index.html
• style.css
• script.js

Keep all HTML inside index.html.

Keep all CSS inside style.css.

Keep all JavaScript inside script.js.

Correctly connect the files.

The website must work immediately when these three files are placed in the same directory.

No installation, package manager, compilation, or development server should be required.

---

2. TECHNOLOGY RESTRICTIONS

Use ONLY:

• HTML5
• CSS3
• Vanilla JavaScript

Do NOT use:

• React
• Vue
• Angular
• Svelte
• Next.js
• Nuxt
• Tailwind CSS
• Bootstrap
• jQuery
• GSAP
• npm
• Node packages
• external JavaScript libraries
• backend frameworks
• databases
• build tools

Use inline SVG icons where needed.

This must remain a true static website.

---

3. BRAND IDENTITY

Brand:

NEXORA

Tagline:

Think less. Move faster.

Nexora is a fictional AI productivity workspace that helps teams organize work, generate content, summarize information, automate repetitive tasks, and keep projects moving.

The brand should feel:

• Modern
• Intelligent
• Calm
• Fast
• Premium
• Professional
• Product-focused

Avoid creating a loud “AI neon” aesthetic.

---

4. VISUAL DIRECTION

Create a sophisticated modern SaaS design.

Suggested palette:

• Deep navy
• Near-black
• Soft white
• Cool gray
• Electric indigo accent
• Subtle cyan secondary accent

Use gradients sparingly.

Use:

• Clean product surfaces
• Thin borders
• Soft shadows
• Strong spacing
• Dashboard mockups
• Crisp typography
• Subtle visual depth

Avoid:

• Too much blur
• Too many glass cards
• Neon outlines everywhere
• Random floating blobs
• Excessive purple gradients

The design should feel like a mature productivity platform.

---

5. TYPOGRAPHY

Use a modern sans-serif visual system.

Create strong hierarchy between:

• Hero headline
• Product labels
• Section titles
• Feature names
• Body text
• Buttons
• Pricing
• Metadata

Use clamp() for responsive typography.

The hero headline should be large and confident but not consume the entire viewport.

Keep paragraphs concise and readable.

---

6. ANNOUNCEMENT BAR

Create a slim announcement bar at the top.

Example:

New — Nexora Automations is now available

Add a small:

See what’s new →

link.

Keep it visually subtle.

---

7. NAVIGATION

Create a refined sticky navigation.

Include:

• NEXORA logo
• Product
• Solutions
• Integrations
• Pricing
• Resources

Right side:

• Sign In
• Start Free

The Start Free button should be visually distinct.

After scrolling, transition the navigation into a slightly elevated state with:

• Background opacity
• Blur used lightly
• Border
• Subtle shadow

---

8. MOBILE NAVIGATION

Create a polished mobile menu.

Requirements:

• Accessible hamburger button
• Smooth open/close transition
• Large navigation links
• Start Free CTA
• Sign In link
• Escape key closes menu
• Selecting link closes menu
• Body scroll locking
• Correct ARIA state

---

9. HERO SECTION

Create a premium SaaS hero.

Small badge:

AI WORKSPACE FOR MODERN TEAMS

Main headline:

One workspace for thinking, creating, and getting things done.

Supporting text:

“Nexora brings AI, projects, notes, automation, and team knowledge into one focused workspace.”

Primary CTA:

Start Free

Secondary CTA:

Watch Demo

Add small trust text:

“No credit card required · Setup in minutes”

---

10. HERO PRODUCT MOCKUP

The product mockup is one of the most important visual elements.

Create a sophisticated dashboard interface using pure HTML and CSS.

The dashboard should include:

• Left sidebar
• Workspace switcher
• Navigation items
• Main content area
• AI assistant panel
• Project tasks
• Activity feed
• Search
• Notifications
• User avatar placeholder

Make it look realistic.

Do not use a screenshot image for the entire dashboard.

Build the UI as actual HTML/CSS so it scales cleanly.

Include subtle micro-interactions.

---

11. PRODUCT MOCKUP DETAILS

Inside the dashboard, show a sample workspace called:

Product Launch

Include:

• 12 Tasks
• 4 Team Members
• 3 Automations
• 78% Progress

Create a small task list:

• Finalize landing page
• Review onboarding flow
• Prepare launch email
• Publish release notes

Add status labels such as:

• In Progress
• Review
• Done

Include a compact AI panel with a prompt:

“Summarize what changed this week.”

and a realistic short response.

---

12. TRUST / LOGO STRIP

Create a section:

Built for teams that move fast

Display 5–6 fictional company logos as simple text marks or SVG-style placeholders.

Do not use real company logos unless clearly generic.

---

13. CORE VALUE SECTION

Create a typography-led statement:

Less switching. More progress.

Supporting copy:

“Bring your work, context, and AI into one place so your team spends less time searching and more time moving forward.”

Keep this section visually simple.

---

14. MAIN FEATURES

Create four primary product features.

Do NOT present them as four identical small cards.

Use alternating editorial/product layouts.

Feature 1:

AI That Knows Your Workspace

Explain how Nexora can answer questions using project context.

Show a product UI mockup.

Feature 2:

Projects Without the Noise

Show tasks, deadlines, assignees, and progress.

Feature 3:

Automate Repetitive Work

Show a simple automation builder.

Feature 4:

Notes That Stay Connected

Show meeting notes linked to projects and tasks.

Each feature should include:

• Heading
• Description
• Product visual
• Short supporting bullet points

---

15. INTERACTIVE PRODUCT DEMO

Create an interactive section with tabs:

• Ask
• Plan
• Automate
• Summarize

When the user changes tabs, update the demo content using vanilla JavaScript.

Example:

Ask

Prompt:

“What are the biggest blockers this week?”

Show a realistic AI response.

Plan

Generate a simple launch plan.

Automate

Show an automation workflow.

Summarize

Show a meeting summary.

Animate transitions subtly.

---

16. AI ASSISTANT SECTION

Create a focused section:

AI that works with context.

Explain that Nexora can work across:

• Projects
• Notes
• Tasks
• Documents
• Team updates

Create a realistic chat UI.

Example prompt:

“Turn these meeting notes into next steps.”

Response should produce:

• 3 action items
• Owners
• Due dates

Use fictional sample data only.

---

17. WORKFLOW AUTOMATION

Create a section:

Set it once. Let Nexora handle the rest.

Show a visual workflow.

Example automation:

When:

Task status changes to Done

Then:

1. Update project progress
2. Notify project channel
3. Add summary to weekly report

Create an interactive toggle allowing the automation to be enabled/disabled.

This is frontend-only.

Do not pretend it runs a real automation.

---

18. PROJECT MANAGEMENT

Create a product section:

Everything your project needs, without project-management overload.

Show:

• Task board
• Due dates
• Assignees
• Priorities
• Progress
• Comments

Include a simplified Kanban-style mockup.

Columns:

• Backlog
• In Progress
• Review
• Done

Make it visually realistic and responsive.

---

19. KNOWLEDGE / NOTES

Create:

Your team’s knowledge, actually usable.

Show a document/notes interface.

Include:

• Meeting Notes
• Product Requirements
• Research
• Decisions

Add an example AI action:

Summarize Document

When clicked, show a short generated summary using JavaScript.

No external API.

---

20. SEARCH

Create a section:

Find anything in seconds.

Show a command/search interface.

Search examples:

• “Launch plan”
• “Pricing decision”
• “Q3 goals”
• “Customer feedback”

Use JavaScript to filter a small set of sample results.

The search should feel instant.

---

21. TEAM COLLABORATION

Create a section:

Keep everyone moving in the same direction.

Include:

• Comments
• Mentions
• Assignments
• Activity
• Shared notes

Show a compact collaboration interface.

---

22. INTEGRATIONS

Create:

Works with the tools you already use.

Show fictional/generic integrations such as:

• Slack-style chat
• Email
• Calendar
• Git repository
• Cloud storage
• Webhooks

Do not use copyrighted logos if avoidable.

Use clean icon-style placeholders.

Create an integrations grid with restrained styling.

---

23. USE CASES

Create tabs or a segmented interface for:

• Product Teams
• Marketing
• Founders
• Operations
• Agencies

Changing the selected audience should update:

• Headline
• Description
• Example workflow
• Benefit list

Use vanilla JavaScript.

---

24. STATISTICS

Create a compact credibility section.

Use fictional demo numbers such as:

8,000+ Active workspaces

2.4M Tasks organized

540K AI actions completed

99.9% Platform uptime

Make it clear these are placeholder/demo values in implementation comments or content context.

Animate numbers subtly when visible.

---

25. TESTIMONIALS

Create 4 professional fictional testimonials.

Each should contain:

• Name
• Role
• Company
• Short quote
• Avatar placeholder

Keep quotes believable.

Example:

“Nexora replaced three separate tools for our small product team. The biggest difference is how much context stays connected.”

Use a lightweight accessible slider.

---

26. PRICING SECTION

Create three pricing tiers.

Starter

$0

For individuals exploring Nexora.

Include:

• 1 workspace
• Basic AI
• Up to 3 projects
• 500 MB storage

CTA:

Start Free

Pro

$12 / user / month

For professionals and small teams.

Include:

• Unlimited projects
• Advanced AI
• Automations
• 10 GB storage
• Integrations

Highlight this plan.

CTA:

Start Pro

Business

$24 / user / month

For growing organizations.

Include:

• Everything in Pro
• Advanced permissions
• Shared knowledge
• Team analytics
• Priority support

CTA:

Start Business

Use fictional pricing for demo purposes.

---

27. PRICING TOGGLE

Add:

Monthly

Yearly

toggle.

When Yearly is selected:

• Adjust displayed prices
• Show a small “Save 20%” indicator

Implement with JavaScript.

Use accessible controls.

---

28. COMPARISON DETAILS

Below pricing, add a simple feature comparison area.

Compare:

• AI limits
• Projects
• Automations
• Storage
• Integrations
• Analytics
• Support

Keep it readable on mobile.

---

29. SECURITY SECTION

Create:

Built with trust in mind.

Do not invent certifications.

Focus on product principles such as:

• Encryption in transit
• Permission controls
• Account security
• Data access controls
• Export capability

Use wording carefully.

Do NOT claim SOC 2, ISO 27001, HIPAA, GDPR certification, or other compliance unless presented clearly as placeholder text.

---

30. FAQ

Create at least 8 FAQ items.

Examples:

• What is Nexora?
• Do I need technical knowledge?
• Can I invite my team?
• What can the AI assistant access?
• Can I cancel anytime?
• Does Nexora replace a project management tool?
• Can I export my data?
• Is there a free plan?

Use an accessible accordion.

Requirements:

• Keyboard accessible
• aria-expanded
• Smooth but quick animation

---

31. FINAL CTA

Create a visually strong closing section.

Heading:

Your work is already complicated. Your workspace doesn’t have to be.

Primary CTA:

Start Free

Secondary CTA:

Explore Product

Supporting text:

“No credit card required.”

Use a distinct but brand-consistent background treatment.

---

32. FOOTER

Create a professional SaaS footer.

Columns:

Product

• Features
• AI
• Automations
• Integrations
• Pricing

Solutions

• Product Teams
• Marketing
• Founders
• Operations
• Agencies

Resources

• Help Center
• Guides
• Changelog
• API
• Status

Company

• About
• Careers
• Contact
• Privacy
• Terms

Include:

• NEXORA logo
• Short tagline
• Social icons
• Dynamic year

Add a back-to-top control.

---

33. JAVASCRIPT FUNCTIONALITY

Implement in script.js:

• Mobile navigation
• Sticky/scrolled navbar
• Active section tracking
• Smooth scrolling
• Interactive product demo tabs
• Automation toggle
• Document summarize interaction
• Search filtering
• Use-case tabs
• Animated statistics
• Testimonial slider
• Pricing monthly/yearly toggle
• FAQ accordion
• Back-to-top
• Dynamic copyright year
• Scroll reveal animations

Use IntersectionObserver where appropriate.

Keep JavaScript efficient.

---

34. PRODUCT MICRO-INTERACTIONS

Add subtle interactions to the dashboard mockups.

Examples:

• Task checkbox toggle
• Status change
• AI prompt submit simulation
• Search filtering
• Automation toggle

These should remain frontend-only demo behaviors.

Do not create fake server calls.

Do not show fake network loading for long periods.

---

35. MOTION DIRECTION

Animations should feel like polished product software.

Use:

• Quick fade
• Subtle vertical movement
• Smooth tab transitions
• Small scale changes
• Dashboard highlight effects

Avoid:

• Bouncing
• Floating blobs everywhere
• Rotating icons
• Overly long animations
• Heavy parallax

Respect prefers-reduced-motion.

All content must remain visible and usable with reduced motion enabled.

---

36. RESPONSIVE DESIGN

The website must be intentionally designed for:

• 320px mobile
• 375px mobile
• 430px mobile
• Tablet
• Laptop
• Desktop
• Large desktop

On mobile:

• Stack hero content
• Simplify the dashboard mockup
• Keep product UI readable
• Make tabs horizontally scrollable when necessary
• Stack pricing cards
• Make FAQ easy to use
• Preserve strong typography hierarchy
• Reduce decorative effects
• Keep all controls touch-friendly

No horizontal overflow.

---

37. DASHBOARD RESPONSIVENESS

The hero dashboard must not break on mobile.

On smaller screens:

• Hide nonessential sidebar labels if necessary
• Simplify panels
• Preserve main project content
• Keep readable scaling
• Avoid tiny unreadable fake text

Do not simply scale the entire desktop dashboard down to 40%.

Create responsive states.

---

38. ACCESSIBILITY

Use semantic HTML5.

Ensure:

• One H1
• Logical heading hierarchy
• Accessible buttons
• Keyboard navigation
• Form/control labels
• Accessible tabs
• Accessible pricing toggle
• Accessible FAQ
• Visible focus states
• Sufficient color contrast
• Appropriate ARIA attributes

Use actual buttons for interactive elements.

---

39. SEO

Add professional SaaS SEO metadata.

Include:

• Page title
• Meta description
• Canonical placeholder
• Open Graph title
• Open Graph description
• Open Graph image placeholder
• Twitter card
• Theme color

Add SoftwareApplication structured data using JSON-LD with fictional/sample product values.

Do not include fake reviews or ratings inside structured data.

---

40. PERFORMANCE

Keep the page lightweight.

Requirements:

• No framework
• No external JS libraries
• No background video
• Efficient CSS
• Efficient DOM manipulation
• Minimal layout shifts
• Stable mockup dimensions
• Lazy-load below-the-fold images
• No unnecessary animation loops
• No excessive event listeners

---

41. CSS QUALITY

Organize CSS in a clean structure:

1. Variables
2. Reset
3. Base
4. Typography
5. Layout
6. Navigation
7. Hero
8. Dashboard
9. Product sections
10. Interactive components
11. Pricing
12. FAQ
13. Footer
14. Animations
15. Responsive rules
16. Reduced motion

Use:

• CSS custom properties
• Grid
• Flexbox
• clamp()
• aspect-ratio
• Modern responsive CSS

Avoid excessive !important.

Avoid unnecessary absolute positioning.

---

42. JAVASCRIPT QUALITY

Use clean modern vanilla JavaScript.

Requirements:

• Clear function names
• Reusable functions
• Guard missing elements
• Minimal global state
• No console errors
• No fake backend requests
• No unnecessary complexity

The essential page content should still display if JavaScript fails.

---

43. CONTENT QUALITY

Do not use Lorem Ipsum.

Write believable product copy specifically for Nexora.

Avoid generic AI phrases such as:

• Revolutionize your workflow
• Harness the power of AI
• Cutting-edge solution
• Transform your business
• Unlock your potential

Use concise, clear software-product language.

The copy should sound like a real product team wrote it.

---

44. VISUAL RHYTHM

Do NOT build the page as:

Hero

→ six cards

→ six cards

→ six cards

→ pricing

Instead create a rhythm such as:

Product hero

→ Dashboard

→ Simple statement

→ Large product feature

→ Interactive demo

→ Alternate product feature

→ Automation visualization

→ Use-case tabs

→ Integrations

→ Testimonials

→ Pricing

→ FAQ

→ Final CTA

→ Footer

The website should feel product-led rather than template-led.

---

45. FINAL QUALITY CHECK

Before returning code, verify:

• HTML/CSS/JS connect correctly
• Mobile menu works
• Dashboard mockup renders correctly
• Interactive demo tabs work
• Automation toggle works
• Search interaction works
• Use-case tabs work
• Testimonial slider works
• Pricing toggle works
• FAQ works
• All buttons have meaningful behavior
• Navigation anchors exist
• No undefined JavaScript variables
• No console errors
• No horizontal overflow
• Mobile dashboard is readable
• Keyboard interactions work
• Reduced-motion support works
• No prohibited dependencies are included

Fix problems before returning the final code.

---

46. FINAL OUTPUT FORMAT

Return exactly three complete code sections:

index.html

Provide the complete HTML.

style.css

Provide all CSS.

script.js

Provide all JavaScript.

Do NOT use placeholders such as:

“remaining styles here”

“add more features”

“continue code”

“same as above”

Do not return pseudo-code.

Do not omit parts of the implementation to shorten the response.

Everything must be complete and immediately usable.

The final Nexora website should feel modern, intelligent, product-driven, responsive, fast, polished, screenshot-worthy, and believable enough to look like a real AI productivity SaaS company.