/index.html
/about.html
/css/
/js/
/images/

⚠️ Important: Webflow CMS content and forms do not export as a working backend. You’re only getting static HTML/CSS/JS. That’s fine, we’ll rebuild the dynamic parts next.

💡 Tip: The best AI is the one that fits your workflow. All of these options can help you convert a Webflow export into a full Next.js project if you give them clear, structured instructions.

You are a senior full-stack engineer.

I have opened a Webflow exported codebase.
It contains static HTML files, CSS, JS, and assets.

Your task is to:

1. Convert this entire project into a modern Next.js 14+ App Router project.
2. Create a clean project structure.
3. Convert all static HTML pages into proper React components.
4. Extract reusable components (Navbar, Footer, Hero, Sections, etc).
5. Move static assets into /public.
6. Ensure images use Next.js  where appropriate.
7. Preserve styling exactly as-is for now.
8. Make routing file-based using the App Router.
9. Ensure clean TypeScript usage.
10. Remove unnecessary Webflow scripts while preserving interactions if possible.

Project Requirements:
- Framework: Next.js (latest, App Router)
- Language: TypeScript
- Styling: Keep existing CSS (do not convert to Tailwind yet)
- Deployment target: Vercel

Deliverables:
- Full new folder structure
- Updated package.json
- Converted page files
- Extracted shared layout
- Clear instructions for anything that cannot be auto-converted

Do this conversion across the entire codebase, not just a single file. Then, commit your changes.

Now that the static site is converted to Next.js:

1. Analyze the original Webflow CMS structure.
2. Recreate equivalent tables in Supabase (Postgres).
3. Generate SQL schema.
4. Create seed data examples.
5. Create dynamic routes in Next.js for each CMS collection (e.g. /blog/[slug]).
6. Replace static content with database-driven content.
7. Use server components for data fetching.
8. Use environment variables for Supabase keys.
9. Generate a lib/supabase.ts client helper.

Database platform: Supabase
Hosting: Vercel
Auth: Not required unless content is protected

Output:
- SQL schema
- Next.js data fetching logic
- Dynamic page examples
- Updated folder structure
- Instructions to connect Supabase project

Finally, commit your changes.

Locate all forms in the project.

For each form:
1. Create a corresponding Supabase table.
2. Create a Next.js API route to handle submissions.
3. Add validation.
4. Store submission in database.
5. Return success/error state properly.
6. Prevent spam with basic honeypot field.

Tech stack:
- Next.js App Router
- Supabase
- TypeScript
- Deploying on Vercel

Output:
- SQL schema for submissions table
- /app/api routes
- Updated frontend form component
- Clear instructions for environment variables

Finally, commit your changes.

Refactor this entire Next.js project to:

1. Improve folder structure clarity.
2. Extract reusable UI components.
3. Remove unused CSS.
4. Improve accessibility (ARIA, semantic HTML).
5. Improve SEO (metadata, OpenGraph, sitemap).
6. Optimize images.
7. Improve performance where possible.
8. Ensure compatibility with Vercel deployment.

Do not change visual design.
Do not introduce new design systems.
Focus on clean architecture and maintainability.

Output:
- Updated file structure
- Refactored components
- Summary of improvements made

Finally, commit your changes.

You are a full-stack AI assistant.

I have a Next.js project. Help me deploy it to Vercel.

Tasks:
1. Generate deployment instructions for Vercel (web or CLI).
2. Scaffold any required config files.
3. Detect needed environment variables (SUPABASE_URL, SUPABASE_ANON_KEY) and generate .env.example.
4. Explain how to deploy without GitHub if needed.
5. Include instructions for connecting a custom domain.

Output:
- Ready-to-run instructions
- Config files
- Notes on env variables

Finally, commit your changes.

💡 Tip: You can deploy the frontend first; add Supabase keys in Vercel after creating your database. The site will still deploy but dynamic features will work after adding keys.

You are a full-stack AI assistant.

I have a Next.js project and want to replace Webflow CMS and forms with a Supabase backend.

Tasks:
1. Generate SQL for all needed tables (CMS + forms).
2. Create instructions for setting up a Supabase project via web UI or CLI.
3. Generate /lib/supabase.ts helper file with environment variable references.
4. Update dynamic pages/forms to use Supabase calls.
5. Provide a .env.example with variables (SUPABASE_URL, SUPABASE_ANON_KEY).
6. Include local testing instructions and notes for production deployment.

Output:
- SQL schema
- Client helper file
- Updated dynamic pages/forms
- Step-by-step setup instructions

Finally, commit your changes.