Welcome to AI Mockup Generator

Create a new page at /about that includes:
- A hero section with a headline "About Us" and a brief company description
- A team members grid showing 4 team members with their photo placeholder, name, role, and a short bio
- A company values section with 3 values, each with an icon, title, and description
- Use the existing Card, Badge, and other UI components from @/components/ui
- Include proper metadata export for SEO (title and description)
- Make it responsive for mobile and desktop

Add a newsletter signup form to the footer component at src/components/shared/footer.tsx:
- Add an email input field with proper placeholder text
- Add a "Subscribe" button that shows loading state when clicked
- Validate the email with Zod (must be a valid email format)
- Show a success message after "submission" (just log to console for now)
- Show an error message if validation fails
- Use the Input, Button, and existing UI components
- Make the form accessible with proper labels

Create a pricing comparison feature table at the bottom of the pricing page:
- Show a comparison table with features in rows and plans in columns
- Include checkmarks for included features, X marks for excluded
- Make the "Pro" column highlighted as recommended
- Add tooltips explaining each feature when hovering on the feature name
- Use the existing Table component from @/components/ui/table
- Make it responsive (horizontal scroll on mobile)
- Add smooth hover effects on rows

Wire up the contact form at /contact to submit data to the /api/contact endpoint:
- The API already exists and accepts { firstName, lastName, email, message }
- Add a loading spinner while the form is submitting
- Display the success message from the API response
- Display validation errors next to the relevant fields
- Clear the form after successful submission
- Prevent double-submission while loading
- Use the existing form components and Zod for client-side validation

Create a new page at /settings for user account settings:
- Include sections for: Profile (name, email, avatar), Preferences (theme toggle, notifications), Account (change password, delete account)
- Use Tabs component to organize the sections
- Each section should be in a Card with appropriate form inputs
- Add form validation with Zod schemas
- Include a "Save Changes" button per section with loading states
- Add a confirmation dialog before "Delete Account" action
- Make it work without a backend (just log the data)
- Include SEO metadata

Add a working checkout flow to the Pro plan on the pricing page:
- When the "Start Free Trial" button is clicked, call /api/stripe/checkout with the price ID
- Show a loading spinner on the button while processing
- Redirect to the Stripe checkout URL returned from the API
- Handle errors gracefully with a toast notification
- Use the existing Button component with loading state
- Note: The /api/stripe/checkout endpoint is already set up and expects { priceId }
- For testing, you can use price_id "price_test_123"

Update the blog page at /blog to fetch posts from the /api/blog endpoint instead of using static data:
- Create a server component that fetches from /api/blog with proper error handling
- Add a loading skeleton while posts are being fetched
- Handle empty state (no posts found)
- Handle error state (API failed)
- Keep the existing featured posts section and category filtering
- Ensure the page still has proper SEO metadata
- Use React Suspense for the loading state

Create an admin dashboard at /admin/dashboard with:
- A stats overview showing: Total Users, Revenue This Month, Active Subscriptions, New Signups
- Each stat in a Card with an icon, value, and trend indicator (up/down %)
- A recent activity feed showing the last 10 user actions
- A simple bar chart showing signups over the last 7 days (use mock data)
- Add a sidebar navigation with links to: Dashboard, Users, Content, Settings
- Protect the page (add a simple check, can be a TODO comment for actual auth)
- Make it responsive with the sidebar collapsing on mobile

I need to work with Stripe payments. Please use the Stripe MCP server to:

[CHOOSE ONE OR MORE]
- Create a payment link for $[AMOUNT]
- Check the status of subscription [SUBSCRIPTION_ID]
- List recent failed payments
- Create a new product called "[PRODUCT_NAME]" with price $[AMOUNT]/month
- Show me all active subscriptions

If you need authentication, I'll connect when prompted.

I need to work with my Supabase database. Please use the Supabase MCP server to:

[CHOOSE ONE OR MORE]
- Create a table called "[TABLE_NAME]" with columns: [COLUMN_1], [COLUMN_2], [COLUMN_3]
- Show me the current database schema
- Run this query: [YOUR SQL QUERY]
- Add a column "[COLUMN_NAME]" of type [TYPE] to the "[TABLE_NAME]" table
- Find all records in "[TABLE_NAME]" where [CONDITION]

If you need authentication, I'll connect when prompted.