Build a modern, light-themed SaaS web application called Rate-YOU using Vue 3 (Composition API) and Tailwind CSS.
Rate-YOU is a self-improvement and life evaluation platform for university students and young professionals.
The platform allows users to rate themselves in key life areas and receive smart improvement recommendations.
Use a CLEAN LIGHT THEME only.
No dark mode.
Design style:
White background
Soft gray sections (#F9FAFB)
Primary color: Indigo (#4F46E5)
Accent color: Purple (#6366F1)
Rounded corners (xl)
Soft shadows
Modern SaaS dashboard layout
Professional but motivating
Fully responsive
📄 Required Pages & Features
1️⃣ Landing Page (/)
Sections:
Hero section
Headline:
“Rate Yourself. Improve Yourself. Become Better.”
Subtext:
“Analyze your life balance using structured evaluation and smart recommendations.”
CTA Button: “Start Assessment”
How It Works (3 steps with icons):
Answer Questions
Analyze Scores
Get Personalized Guidance
Features Section:
Life Area Scoring
Smart Recommendation Engine
Progress Tracking
Coach Marketplace
Clean footer with:
About | Contact | Privacy
2️⃣ Authentication Pages
/login
Centered card
Email & Password fields
Gradient button
Minimal layout
/register
Name
Password
Confirm password
3️⃣ Assessment Page (/assessment)
Multi-step form with progress bar.
Life categories:
Health & Physical
Mental Health
Education
Work
Relationships
Each category contains 4–5 slider questions (1–5 scale).
Include:
Next / Previous buttons
Clean spacing
Submit button: “Analyze My Life”
Use placeholder scoring logic.
4️⃣ Dashboard Page (/dashboard)
SaaS-style dashboard layout with sidebar.
Sidebar links:
Dashboard
Improvement Plan
Profile
Coaches
Main content:
Radar chart placeholder
Bar chart placeholder
Cards showing:
Health Score
Mental Score
Education Score
Work Score
Relationships Score
Highlight weakest area in a colored alert card
Button: “Get Improvement Plan”
Use dummy data for now.
5️⃣ Improvement Plan Page (/improvement)
Show:
Weakest 3 life areas
Recommended actions list
Habit suggestions in card layout
Improvement projection section
Button: “Start Tracking”
6️⃣ Profile Page (/profile)
Include:
User info card
Assessment history list
Line chart placeholder for progress over time
7️⃣ Coach Marketplace Page (/coaches)
Grid layout of coach cards.
Each card includes:
Profile image placeholder
Name
Specialty tag (Fitness / Mental / Career)
Star rating
Short description
“Book Session” button
🧩 Component Requirements
Use reusable components:
Navbar component
Sidebar component
Card component
Button component
Form input component
Chart placeholder component
Use vue-router for routing.
Organize folder structure cleanly.
⚙️ Technical Instructions
Vue 3 Composition API
Tailwind CSS
Responsive layout
Clean modular code
Use placeholder data for now
No backend required yet
No dark theme
🎯 Final Instruction
Focus on clean UI structure and dashboard layout.
Avoid heavy animations.
Make it look like a professional startup SaaS product.
I'll build this Vue 3 SaaS application from scratch. Let me start by setting up the project structure.
I need to convert this from a Next.js project to a Vue 3 + Vite project. Let me set up the entire project structure.
Now I'll convert this to a Vue 3 + Vite project. Let me start by rewriting the core configuration files and building all the Vue components.
Now let me create the core Vue files and styles:
Now let me build all the reusable components:
Now let me build the Landing Page and Auth pages:
Now let me build the Improvement Plan, Profile, and Coaches pages:
Now let me clean up the Next.js files that are no longer needed and remove conflicts:
Let me also check if there's a tailwind.config.ts that might conflict:
Good, that's already gone. Let me now verify the project structure is correct:
All files are in place. Let me mark all tasks as done:
The Rate-YOU Vue 3 SaaS application is now fully built. Here's what was created:
Project Setup: Converted from Next.js to Vue 3 + Vite with Tailwind CSS 3, vue-router, Inter font, and a clean light theme using Indigo (#4F46E5) as the primary color with soft grays and white backgrounds.
7 Pages built:
/) -- Hero section, How It Works (3 steps), Features grid (4 cards), CTA section, and footer/login) and Register (/register) -- Centered card layouts with gradient buttons/assessment) -- Multi-step form with 5 life categories, slider questions (1-5), progress bar with step indicators, and navigation/dashboard) -- SaaS sidebar layout with overall score ring, 5 score cards with mini bars, bar chart visualization, weakest area alert, and quick actions/improvement) -- Weakest areas, prioritized action list, 6 habit suggestion cards, and improvement projections/profile) -- User card, assessment history with change indicators, achievements/badges, and progress chart placeholder/coaches) -- Filterable grid of 6 coach cards with ratings, specialties, pricing, and "Book Session" buttons6 Reusable Components: Navbar (responsive with mobile menu), Sidebar (with mobile overlay), AppCard, AppButton (5 variants, 4 sizes), FormInput, and ChartPlaceholder.
You can send messages while the preview loads