├── public
    ├── api.svg
    ├── wix.svg
    ├── bigcommerce.svg
    ├── magento.svg
    ├── shopify.svg
    ├── squarespace.svg
    ├── webflow.svg
    ├── wordpress.svg
    ├── wix.png
    ├── drupal.png
    ├── squarespace.jpg
    ├── logos
    │   ├── bigcommerce.svg
    │   ├── squarespace.svg
    │   ├── wix.svg
    │   ├── api.svg
    │   ├── wordpress.svg
    │   ├── webflow.svg
    │   ├── shopify.svg
    │   └── magento.svg
    ├── firecrawl-logo-with-fire.webp
    ├── vercel.svg
    ├── svg
    │   ├── magento.svg
    │   ├── api.svg
    │   ├── bigcommerce.svg
    │   ├── shopify.svg
    │   ├── webflow.svg
    │   └── wordpress.svg
    ├── window.svg
    ├── file.svg
    ├── csv-file-icon.svg
    ├── json-file-icon.svg
    ├── globe.svg
    ├── next.svg
    └── firecrawl.svg
├── next.config.ts
├── src
    ├── lib
    │   └── utils.ts
    ├── components
    │   ├── ui
    │   │   ├── label.tsx
    │   │   ├── input.tsx
    │   │   ├── textarea.tsx
    │   │   ├── select.tsx
    │   │   ├── checkbox.tsx
    │   │   └── button.tsx
    │   └── layout
    │   │   ├── hero.tsx
    │   │   ├── header.tsx
    │   │   └── layout.tsx
    └── app
    │   ├── layout.tsx
    │   ├── api
    │       ├── map
    │       │   └── route.ts
    │       └── crawl
    │       │   └── route.ts
    │   ├── globals.css
    │   └── page.tsx
├── postcss.config.mjs
├── eslint.config.mjs
├── .gitignore
├── tsconfig.json
├── package.json
├── tailwind.config.ts
└── README.md


/public/api.svg:
--------------------------------------------------------------------------------
1 |  


--------------------------------------------------------------------------------
/public/wix.svg:
--------------------------------------------------------------------------------
1 |  


--------------------------------------------------------------------------------
/public/bigcommerce.svg:
--------------------------------------------------------------------------------
1 |  


--------------------------------------------------------------------------------
/public/magento.svg:
--------------------------------------------------------------------------------
1 |  


--------------------------------------------------------------------------------
/public/shopify.svg:
--------------------------------------------------------------------------------
1 |  


--------------------------------------------------------------------------------
/public/squarespace.svg:
--------------------------------------------------------------------------------
1 |  


--------------------------------------------------------------------------------
/public/webflow.svg:
--------------------------------------------------------------------------------
1 |  


--------------------------------------------------------------------------------
/public/wordpress.svg:
--------------------------------------------------------------------------------
1 |  


--------------------------------------------------------------------------------
/public/wix.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/firecrawl/firecrawl-migrator/HEAD/public/wix.png


--------------------------------------------------------------------------------
/public/drupal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/firecrawl/firecrawl-migrator/HEAD/public/drupal.png


--------------------------------------------------------------------------------
/public/squarespace.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/firecrawl/firecrawl-migrator/HEAD/public/squarespace.jpg


--------------------------------------------------------------------------------
/public/logos/bigcommerce.svg:
--------------------------------------------------------------------------------
1 | File not found: /v1/AUTH_mw/wikipedia-commons-local-public.73/7/73/Bc-logo-dark.svg


--------------------------------------------------------------------------------
/public/logos/squarespace.svg:
--------------------------------------------------------------------------------
1 | File not found: /v1/AUTH_mw/wikipedia-commons-local-public.9a/9/9a/Squarespace_logo_2019.svg


--------------------------------------------------------------------------------
/public/firecrawl-logo-with-fire.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/firecrawl/firecrawl-migrator/HEAD/public/firecrawl-logo-with-fire.webp


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>


--------------------------------------------------------------------------------
/next.config.ts:
--------------------------------------------------------------------------------
1 | import type { NextConfig } from "next";
2 | 
3 | const nextConfig: NextConfig = {
4 |   /* config options here */
5 | };
6 | 
7 | export default nextConfig;
8 | 


--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs))
6 | }


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 |   plugins: {
4 |     tailwindcss: {},
5 |     autoprefixer: {},
6 |   },
7 | };
8 | 
9 | export default config;


--------------------------------------------------------------------------------
/public/svg/magento.svg:
--------------------------------------------------------------------------------
1 | <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
2 |   <rect x="2" y="2" width="36" height="36" rx="4" fill="#EE672F"/>
3 |   <path d="M20 8l-8 4v12l3 1.5V15.5l5 2.5l5-2.5v10l3-1.5V12l-8-4z" fill="white"/>
4 |   <path d="M12 25.5V32l8 4l8-4v-6.5l-3 1.5v3.5l-5 2.5l-5-2.5V27l-3-1.5z" fill="white"/>
5 | </svg>


--------------------------------------------------------------------------------
/public/window.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>


--------------------------------------------------------------------------------
/public/file.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>


--------------------------------------------------------------------------------
/public/logos/wix.svg:
--------------------------------------------------------------------------------
1 | <svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
2 |   <g fill="#000000">
3 |     <path d="M20 40 L20 60 L24 60 L24 44 L28 60 L32 60 L36 44 L36 60 L40 60 L40 40 L34 40 L30 56 L26 40 L20 40 Z"/>
4 |     <circle cx="50" cy="50" r="4"/>
5 |     <path d="M60 40 L64 40 L66 50 L68 40 L72 40 L74 50 L76 40 L80 40 L76 60 L72 60 L70 50 L68 60 L64 60 L60 40 Z"/>
6 |   </g>
7 | </svg>


--------------------------------------------------------------------------------
/public/svg/api.svg:
--------------------------------------------------------------------------------
1 | <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
2 |   <rect x="2" y="2" width="36" height="36" rx="4" fill="#4285F4"/>
3 |   <path d="M10 15h8v2h-8zM10 19h8v2h-8zM10 23h8v2h-8z" fill="white"/>
4 |   <path d="M22 15h8v2h-8zM22 19h8v2h-8zM22 23h8v2h-8z" fill="white"/>
5 |   <circle cx="20" cy="12" r="2" fill="white"/>
6 |   <circle cx="20" cy="28" r="2" fill="white"/>
7 | </svg>


--------------------------------------------------------------------------------
/public/svg/bigcommerce.svg:
--------------------------------------------------------------------------------
1 | <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
2 |   <rect x="2" y="2" width="36" height="36" rx="18" fill="#121118"/>
3 |   <path d="M20 10c-5.5 0-10 4.5-10 10s4.5 10 10 10c2.8 0 5.3-1.1 7.1-2.9l-2.8-2.8c-1.1 1.1-2.6 1.7-4.3 1.7-3.3 0-6-2.7-6-6s2.7-6 6-6c1.7 0 3.2 0.7 4.3 1.8l2.8-2.8C25.3 11.1 22.8 10 20 10z" fill="white"/>
4 |   <path d="M26 14v12h4V14h-4z" fill="white"/>
5 | </svg>


--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
 1 | import { dirname } from "path";
 2 | import { fileURLToPath } from "url";
 3 | import { FlatCompat } from "@eslint/eslintrc";
 4 | 
 5 | const __filename = fileURLToPath(import.meta.url);
 6 | const __dirname = dirname(__filename);
 7 | 
 8 | const compat = new FlatCompat({
 9 |   baseDirectory: __dirname,
10 | });
11 | 
12 | const eslintConfig = [
13 |   ...compat.extends("next/core-web-vitals", "next/typescript"),
14 | ];
15 | 
16 | export default eslintConfig;
17 | 


--------------------------------------------------------------------------------
/public/logos/api.svg:
--------------------------------------------------------------------------------
1 | <svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
2 |   <rect x="10" y="40" width="20" height="20" fill="#374151" rx="2"/>
3 |   <rect x="70" y="40" width="20" height="20" fill="#374151" rx="2"/>
4 |   <path d="M30 50 L70 50" stroke="#374151" stroke-width="4"/>
5 |   <text x="50" y="30" text-anchor="middle" font-family="monospace" font-size="16" font-weight="bold" fill="#374151">API</text>
6 |   <circle cx="50" cy="50" r="4" fill="#374151"/>
7 | </svg>


--------------------------------------------------------------------------------
/public/csv-file-icon.svg:
--------------------------------------------------------------------------------
 1 | <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 |   <!-- File shape -->
 3 |   <path d="M10 6C10 4.89543 10.8954 4 12 4H26L38 16V40C38 41.1046 37.1046 42 36 42H12C10.8954 42 10 41.1046 10 40V6Z" fill="#ffffff" stroke="#000000" stroke-width="2"/>
 4 |   
 5 |   <!-- Folded corner -->
 6 |   <path d="M26 4L38 16H28C26.8954 16 26 15.1046 26 14V4Z" fill="#000000"/>
 7 |   
 8 |   <!-- CSV text -->
 9 |   <text x="24" y="30" font-family="Arial, sans-serif" font-size="10" font-weight="bold" text-anchor="middle" fill="#000000">CSV</text>
10 | </svg>


--------------------------------------------------------------------------------
/public/json-file-icon.svg:
--------------------------------------------------------------------------------
 1 | <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 |   <!-- File shape -->
 3 |   <path d="M10 6C10 4.89543 10.8954 4 12 4H26L38 16V40C38 41.1046 37.1046 42 36 42H12C10.8954 42 10 41.1046 10 40V6Z" fill="#ffffff" stroke="#000000" stroke-width="2"/>
 4 |   
 5 |   <!-- Folded corner -->
 6 |   <path d="M26 4L38 16H28C26.8954 16 26 15.1046 26 14V4Z" fill="#000000"/>
 7 |   
 8 |   <!-- JSON text -->
 9 |   <text x="24" y="30" font-family="Arial, sans-serif" font-size="8" font-weight="bold" text-anchor="middle" fill="#000000">JSON</text>
10 | </svg>


--------------------------------------------------------------------------------
/src/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { cn } from "@/lib/utils"
 3 | 
 4 | export type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement>
 5 | 
 6 | const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
 7 |   ({ className, ...props }, ref) => {
 8 |     return (
 9 |       <label
10 |         ref={ref}
11 |         className={cn(
12 |           "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
13 |           className
14 |         )}
15 |         {...props}
16 |       />
17 |     )
18 |   }
19 | )
20 | Label.displayName = "Label"
21 | 
22 | export { Label }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.*
 7 | .yarn/*
 8 | !.yarn/patches
 9 | !.yarn/plugins
10 | !.yarn/releases
11 | !.yarn/versions
12 | 
13 | # testing
14 | /coverage
15 | 
16 | # next.js
17 | /.next/
18 | /out/
19 | 
20 | # production
21 | /build
22 | 
23 | # misc
24 | .DS_Store
25 | *.pem
26 | 
27 | # debug
28 | npm-debug.log*
29 | yarn-debug.log*
30 | yarn-error.log*
31 | .pnpm-debug.log*
32 | 
33 | # env files (can opt-in for committing if needed)
34 | .env*
35 | 
36 | # vercel
37 | .vercel
38 | 
39 | # typescript
40 | *.tsbuildinfo
41 | next-env.d.ts
42 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2017",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "noEmit": true,
 9 |     "esModuleInterop": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "bundler",
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "jsx": "preserve",
15 |     "incremental": true,
16 |     "plugins": [
17 |       {
18 |         "name": "next"
19 |       }
20 |     ],
21 |     "paths": {
22 |       "@/*": ["./src/*"]
23 |     }
24 |   },
25 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 |   "exclude": ["node_modules", "test-batch-scrape"]
27 | }
28 | 


--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next";
 2 | import { Inter } from "next/font/google";
 3 | import "./globals.css";
 4 | 
 5 | const inter = Inter({
 6 |   variable: "--font-inter",
 7 |   subsets: ["latin"],
 8 | });
 9 | 
10 | export const metadata: Metadata = {
11 |   title: "Firecrawl Content Migrator",
12 |   description: "Turn any website into structured CMS-ready data in seconds",
13 |   icons: {
14 |     icon: '/firecrawl.svg',
15 |   },
16 | };
17 | 
18 | export default function RootLayout({
19 |   children,
20 | }: Readonly<{
21 |   children: React.ReactNode;
22 | }>) {
23 |   return (
24 |     <html lang="en">
25 |       <body
26 |         className={`${inter.variable} font-sans antialiased`}
27 |       >
28 |         {children}
29 |       </body>
30 |     </html>
31 |   );
32 | }
33 | 


--------------------------------------------------------------------------------
/public/globe.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>


--------------------------------------------------------------------------------
/src/components/layout/hero.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | interface HeroProps {
 6 |   title: string | React.ReactNode
 7 |   subtitle?: string
 8 |   className?: string
 9 | }
10 | 
11 | export function Hero({ title, subtitle, className }: HeroProps) {
12 |   return (
13 |     <div className={cn("px-4 sm:px-6 lg:px-8 pt-8 pb-6", className)}>
14 |       <div className="max-w-4xl mx-auto text-center">
15 |         <h1 className="text-[2.5rem] lg:text-[3.8rem] font-semibold tracking-tight">
16 |           {typeof title === 'string' ? (
17 |             <span className="bg-gradient-to-tr from-red-600 to-yellow-500 bg-clip-text text-transparent">
18 |               {title}
19 |             </span>
20 |           ) : (
21 |             title
22 |           )}
23 |         </h1>
24 |         
25 |         {subtitle && (
26 |           <p className="mt-4 text-lg text-zinc-600 dark:text-zinc-400">
27 |             {subtitle}
28 |           </p>
29 |         )}
30 |       </div>
31 |     </div>
32 |   )
33 | }


--------------------------------------------------------------------------------
/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { cn } from "@/lib/utils"
 3 | 
 4 | export type InputProps = React.InputHTMLAttributes<HTMLInputElement>
 5 | 
 6 | const Input = React.forwardRef<HTMLInputElement, InputProps>(
 7 |   ({ className, type, ...props }, ref) => {
 8 |     return (
 9 |       <input
10 |         type={type}
11 |         className={cn(
12 |           "flex h-10 w-full rounded-[10px] border border-zinc-300 bg-white px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-zinc-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-orange-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-800 dark:bg-zinc-950 dark:ring-offset-zinc-950 dark:placeholder:text-zinc-400 dark:focus-visible:ring-orange-500 disabled:shadow-none",
13 |           className
14 |         )}
15 |         ref={ref}
16 |         {...props}
17 |       />
18 |     )
19 |   }
20 | )
21 | Input.displayName = "Input"
22 | 
23 | export { Input }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "firecrawl-observer",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev --turbopack",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@mendable/firecrawl-js": "^1.29.1",
13 |     "@radix-ui/react-dialog": "^1.1.14",
14 |     "@radix-ui/react-slot": "^1.2.3",
15 |     "class-variance-authority": "^0.7.1",
16 |     "clsx": "^2.1.1",
17 |     "jszip": "^3.10.1",
18 |     "lucide-react": "^0.525.0",
19 |     "next": "15.3.5",
20 |     "react": "^19.0.0",
21 |     "react-dom": "^19.0.0",
22 |     "react-icons": "^5.5.0",
23 |     "tailwind-merge": "^3.3.1",
24 |     "zod": "^3.25.76"
25 |   },
26 |   "devDependencies": {
27 |     "@eslint/eslintrc": "^3",
28 |     "@types/node": "^20",
29 |     "@types/react": "^19",
30 |     "@types/react-dom": "^19",
31 |     "autoprefixer": "^10.4.21",
32 |     "eslint": "^9",
33 |     "eslint-config-next": "15.3.5",
34 |     "postcss": "^8.5.6",
35 |     "tailwindcss": "^3.4.17",
36 |     "tailwindcss-animate": "^1.0.7",
37 |     "typescript": "^5"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/src/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { cn } from "@/lib/utils"
 3 | 
 4 | export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>
 5 | 
 6 | const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 7 |   ({ className, ...props }, ref) => {
 8 |     return (
 9 |       <textarea
10 |         className={cn(
11 |           "flex min-h-[80px] w-full rounded-[10px] border border-zinc-200 bg-white px-3 py-2 text-sm ring-offset-background placeholder:text-zinc-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-orange-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-800 dark:bg-zinc-950 dark:ring-offset-zinc-950 dark:placeholder:text-zinc-400 dark:focus-visible:ring-orange-500 [box-shadow:inset_0px_-2px_0px_0px_#e4e4e7,_0px_1px_4px_0px_rgba(228,_228,_231,_40%)] focus:[box-shadow:inset_0px_-2px_0px_0px_#f97316,_0px_1px_4px_0px_rgba(249,_115,_22,_20%)] disabled:shadow-none",
12 |           className
13 |         )}
14 |         ref={ref}
15 |         {...props}
16 |       />
17 |     )
18 |   }
19 | )
20 | Textarea.displayName = "Textarea"
21 | 
22 | export { Textarea }


--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/src/components/layout/header.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import Link from 'next/link'
 4 | import Image from 'next/image'
 5 | import { Github } from 'lucide-react'
 6 | import { Button } from '@/components/ui/button'
 7 | 
 8 | interface HeaderProps {
 9 |   showCTA?: boolean
10 |   ctaText?: string
11 |   ctaHref?: string
12 | }
13 | 
14 | export function Header({ showCTA = true, ctaText = "Use this template", ctaHref = "#" }: HeaderProps) {
15 |   return (
16 |     <header className="px-4 sm:px-6 lg:px-8 pt-4">
17 |       <div className="flex items-center justify-between max-w-7xl mx-auto">
18 |         <div className="flex items-center gap-8">
19 |           <Link href="/" className="flex items-center">
20 |             <Image 
21 |               src="/firecrawl-logo-with-fire.webp" 
22 |               alt="Firecrawl logo" 
23 |               width={40}
24 |               height={40}
25 |               className="h-10 w-auto"
26 |             />
27 |           </Link>
28 |           
29 |         </div>
30 |         
31 |         {showCTA && (
32 |           <Button
33 |             variant="code"
34 |             asChild
35 |           >
36 |             <Link href={ctaHref} target="_blank" rel="noopener noreferrer">
37 |               <Github className="mr-2 h-4 w-4" />
38 |               {ctaText}
39 |             </Link>
40 |           </Button>
41 |         )}
42 |       </div>
43 |     </header>
44 |   )
45 | }


--------------------------------------------------------------------------------
/public/logos/wordpress.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 122.52 122.523" xmlns="http://www.w3.org/2000/svg"><g fill="#464342"><path d="m8.708 61.26c0 20.802 12.089 38.779 29.619 47.298l-25.069-68.686c-2.916 6.536-4.55 13.769-4.55 21.388z"/><path d="m96.74 58.608c0-6.495-2.333-10.993-4.334-14.494-2.664-4.329-5.161-7.995-5.161-12.324 0-4.831 3.664-9.328 8.825-9.328.233 0 .454.029.681.042-9.35-8.566-21.807-13.796-35.489-13.796-18.36 0-34.513 9.42-43.91 23.688 1.233.037 2.395.063 3.382.063 5.497 0 14.006-.667 14.006-.667 2.833-.167 3.167 3.994.337 4.329 0 0-2.847.335-6.015.501l19.138 56.925 11.501-34.493-8.188-22.434c-2.83-.166-5.511-.501-5.511-.501-2.832-.166-2.5-4.496.332-4.329 0 0 8.679.667 13.843.667 5.496 0 14.006-.667 14.006-.667 2.835-.167 3.168 3.994.337 4.329 0 0-2.853.335-6.015.501l18.992 56.494 5.242-17.517c2.272-7.269 4.001-12.49 4.001-16.989z"/><path d="m62.184 65.857-15.768 45.819c4.708 1.384 9.687 2.141 14.846 2.141 6.12 0 11.989-1.058 17.452-2.979-.141-.225-.269-.464-.374-.724z"/><path d="m107.376 36.046c.226 1.674.354 3.471.354 5.404 0 5.333-.996 11.328-3.996 18.824l-16.053 46.413c15.624-9.111 26.133-26.038 26.133-45.426.001-9.137-2.333-17.729-6.438-25.215z"/><path d="m61.262 0c-33.779 0-61.262 27.481-61.262 61.26 0 33.783 27.483 61.263 61.262 61.263 33.778 0 61.265-27.48 61.265-61.263-.001-33.779-27.487-61.26-61.265-61.26zm0 119.715c-32.23 0-58.453-26.223-58.453-58.455 0-32.23 26.222-58.451 58.453-58.451 32.229 0 58.45 26.221 58.45 58.451 0 32.232-26.221 58.455-58.45 58.455z"/></g></svg>


--------------------------------------------------------------------------------
/src/components/layout/layout.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from '@/lib/utils'
 2 | 
 3 | interface LayoutProps {
 4 |   children: React.ReactNode
 5 |   className?: string
 6 | }
 7 | 
 8 | export function Layout({ children, className }: LayoutProps) {
 9 |   return (
10 |     <div className={cn("min-h-screen flex flex-col", className)}>
11 |       {children}
12 |     </div>
13 |   )
14 | }
15 | 
16 | interface MainContentProps {
17 |   children: React.ReactNode
18 |   className?: string
19 |   maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '7xl' | 'full'
20 | }
21 | 
22 | export function MainContent({ 
23 |   children, 
24 |   className,
25 |   maxWidth = 'lg'
26 | }: MainContentProps) {
27 |   const maxWidthClasses = {
28 |     sm: 'max-w-sm',
29 |     md: 'max-w-md',
30 |     lg: 'max-w-4xl',
31 |     xl: 'max-w-xl',
32 |     '2xl': 'max-w-2xl',
33 |     '7xl': 'max-w-7xl',
34 |     full: 'max-w-full'
35 |   }
36 | 
37 |   return (
38 |     <main className={cn(
39 |       "flex-1 px-4 sm:px-6 lg:px-8",
40 |       className
41 |     )}>
42 |       <div className={cn(
43 |         "mx-auto",
44 |         maxWidthClasses[maxWidth]
45 |       )}>
46 |         {children}
47 |       </div>
48 |     </main>
49 |   )
50 | }
51 | 
52 | interface FooterProps {
53 |   children?: React.ReactNode
54 |   className?: string
55 | }
56 | 
57 | export function Footer({ children, className }: FooterProps) {
58 |   return (
59 |     <footer className={cn(
60 |       "px-4 sm:px-6 lg:px-8 py-8 mt-auto",
61 |       className
62 |     )}>
63 |       <div className="max-w-7xl mx-auto">
64 |         {children}
65 |       </div>
66 |     </footer>
67 |   )
68 | }


--------------------------------------------------------------------------------
/src/components/ui/select.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import * as React from "react"
 4 | import { ChevronDown } from "lucide-react"
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | export interface SelectProps
 8 |   extends React.SelectHTMLAttributes<HTMLSelectElement> {
 9 |   placeholder?: string
10 | }
11 | 
12 | const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
13 |   ({ className, children, placeholder, ...props }, ref) => {
14 |     return (
15 |       <div className="relative">
16 |         <select
17 |           className={cn(
18 |             "flex h-10 w-full appearance-none rounded-[10px] border border-zinc-200 bg-white px-3 py-2 pr-10 text-sm ring-offset-background placeholder:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-800 dark:bg-zinc-950 dark:ring-offset-zinc-950 dark:placeholder:text-zinc-400 dark:focus:ring-orange-500 [box-shadow:inset_0px_-2px_0px_0px_#e4e4e7,_0px_1px_4px_0px_rgba(228,_228,_231,_40%)] focus:[box-shadow:inset_0px_-2px_0px_0px_#f97316,_0px_1px_4px_0px_rgba(249,_115,_22,_20%)] disabled:shadow-none",
19 |             className
20 |           )}
21 |           ref={ref}
22 |           {...props}
23 |         >
24 |           {placeholder && (
25 |             <option value="" disabled>
26 |               {placeholder}
27 |             </option>
28 |           )}
29 |           {children}
30 |         </select>
31 |         <ChevronDown className="absolute right-3 top-3 h-4 w-4 pointer-events-none text-zinc-500" />
32 |       </div>
33 |     )
34 |   }
35 | )
36 | Select.displayName = "Select"
37 | 
38 | export { Select }


--------------------------------------------------------------------------------
/src/components/ui/checkbox.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import * as React from "react"
 4 | import { Check } from "lucide-react"
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | export interface CheckboxProps
 8 |   extends React.InputHTMLAttributes<HTMLInputElement> {
 9 |   label?: string
10 | }
11 | 
12 | const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
13 |   ({ className, label, id, ...props }, ref) => {
14 |     const generatedId = React.useId()
15 |     const checkboxId = id || generatedId
16 |     
17 |     return (
18 |       <div className="flex items-center space-x-2">
19 |         <div className="relative">
20 |           <input
21 |             type="checkbox"
22 |             className={cn(
23 |               "peer h-4 w-4 appearance-none rounded border border-zinc-300 bg-white checked:bg-orange-500 checked:border-orange-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-orange-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-700 dark:bg-zinc-950 dark:checked:bg-orange-500 dark:checked:border-orange-500",
24 |               className
25 |             )}
26 |             ref={ref}
27 |             id={checkboxId}
28 |             {...props}
29 |           />
30 |           <Check className="absolute left-0 top-0 h-4 w-4 text-white pointer-events-none opacity-0 peer-checked:opacity-100" />
31 |         </div>
32 |         {label && (
33 |           <label
34 |             htmlFor={checkboxId}
35 |             className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
36 |           >
37 |             {label}
38 |           </label>
39 |         )}
40 |       </div>
41 |     )
42 |   }
43 | )
44 | Checkbox.displayName = "Checkbox"
45 | 
46 | export { Checkbox }


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss";
 2 | 
 3 | const config: Config = {
 4 |   darkMode: "class",
 5 |   content: [
 6 |     "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
 7 |     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
 8 |     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
 9 |   ],
10 |   theme: {
11 |     container: {
12 |       center: true,
13 |       padding: "2rem",
14 |       screens: {
15 |         "2xl": "1400px",
16 |       },
17 |     },
18 |     extend: {
19 |       colors: {
20 |         border: "hsl(var(--border))",
21 |         input: "hsl(var(--input))",
22 |         ring: "hsl(var(--ring))",
23 |         background: "hsl(var(--background))",
24 |         foreground: "hsl(var(--foreground))",
25 |         primary: {
26 |           DEFAULT: "hsl(var(--primary))",
27 |           foreground: "hsl(var(--primary-foreground))",
28 |         },
29 |         secondary: {
30 |           DEFAULT: "hsl(var(--secondary))",
31 |           foreground: "hsl(var(--secondary-foreground))",
32 |         },
33 |         destructive: {
34 |           DEFAULT: "hsl(var(--destructive))",
35 |           foreground: "hsl(var(--destructive-foreground))",
36 |         },
37 |         muted: {
38 |           DEFAULT: "hsl(var(--muted))",
39 |           foreground: "hsl(var(--muted-foreground))",
40 |         },
41 |         accent: {
42 |           DEFAULT: "hsl(var(--accent))",
43 |           foreground: "hsl(var(--accent-foreground))",
44 |         },
45 |         popover: {
46 |           DEFAULT: "hsl(var(--popover))",
47 |           foreground: "hsl(var(--popover-foreground))",
48 |         },
49 |         card: {
50 |           DEFAULT: "hsl(var(--card))",
51 |           foreground: "hsl(var(--card-foreground))",
52 |         },
53 |       },
54 |       borderRadius: {
55 |         lg: "var(--radius)",
56 |         md: "calc(var(--radius) - 2px)",
57 |         sm: "calc(var(--radius) - 4px)",
58 |       },
59 |       fontFamily: {
60 |         sans: ["var(--font-inter)", "ui-sans-serif", "system-ui", "sans-serif"],
61 |         mono: ["ui-monospace", "SFMono-Regular", "monospace"],
62 |       },
63 |     },
64 |   },
65 |   plugins: [require("tailwindcss-animate")],
66 | };
67 | 
68 | export default config;


--------------------------------------------------------------------------------
/public/logos/webflow.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 808.3 203.3" style="enable-background:new 0 0 808.3 203.3;" xml:space="preserve">
 5 | <path d="M261,79.5c0-14.5-14.1-29.9-38.5-29.9c-27.4,0-57.5,20.1-62.1,60.2c-4.7,40.5,20.5,58.5,45.9,58.5s38.7-9.9,52.3-23.1
 6 | 	c-11.7-14.7-26.8-7.9-29.7-6.4c-3.2,1.6-7.3,3.8-15.7,3.8c-9.8,0-19.8-4.4-19.8-22.7C256.2,113.7,261,94,261,79.5z M229.9,81.9
 7 | 	c-0.4,4.5-2.2,12.2-34,16.5c6.7-23.8,19.5-25.6,25.4-25.6C226.8,72.8,230.3,77.1,229.9,81.9z M123.5,85.8c0,0-13.5,42.4-14.6,45.9
 8 | 	C108.5,128.1,98.6,52,98.6,52c-23,0-35.3,16.4-41.8,33.7c0,0-16.4,42.5-17.8,46.1c-0.1-3.3-2.5-45.6-2.5-45.6
 9 | 	C35.1,65,15.7,52.1,0,52.1l19,115.3c24.1-0.1,37.1-16.4,43.9-33.7c0,0,14.5-37.5,15.1-39.2c0.1,1.6,10.4,72.9,10.4,72.9
10 | 	c24.2,0,37.2-15.3,44.2-32l33.9-83.3C142.6,52.1,130,68.4,123.5,85.8z M349.8,49.4c-14.9,0-26.3,8.1-35.9,20v-0.1L322.5,0
11 | 	c-19.8,0-35.9,17.2-39,42.8l-15,123.7c11.4,0,23.5-3.3,30-11.7c5.8,7.5,14.5,13.5,27.4,13.5c33.4,0,56.3-38.8,56.3-75.2
12 | 	C382,59.9,365.9,49.4,349.8,49.4z M346.7,108.9c-3.5,20.3-14.8,34.1-25.7,34.1c-11,0-15.7-4.9-15.7-4.9c2.1-17.8,3.4-28.7,7.4-38.1
13 | 	c4-9.4,13.5-24.4,23.4-24.4C345.8,75.6,350.2,88.5,346.7,108.9z M465.6,52.1h-23.3l0.1-1.2c1.6-15.2,5.2-23.2,17.1-24.5
14 | 	c8.1-0.8,11.7-5,12.6-9.6c0.7-3.6,2.9-16.1,2.9-16.1c-46.8-0.3-61.5,19.9-65.3,50.7l-0.1,0.7h-0.5c-7.6,0-16,8.6-17.4,19.5l-0.5,4
15 | 	h15.6l-13.1,108.2l-4,19.4c0.5,0,1.1,0.1,1.6,0.1c21.9-0.8,35.9-18.1,39-43.2l10.2-84.5h7.3c7.2,0,15.6-7.2,17.1-19.2L465.6,52.1z
16 | 	 M586.8,50.1c-26.9,0-52.3,19.8-60.1,50.9s4,67.9,43.6,67.9c39.5,0,62.3-38.3,62.3-70.2C632.6,67,611.1,50.1,586.8,50.1z
17 | 	 M597.7,107.9c-1.4,14.1-7.6,35.5-24.6,35.5c-17.1,0-14.7-25-13-36.9c1.8-12.7,8.9-30.8,24.2-30.8C598,75.7,599.3,92,597.7,107.9z
18 | 	 M765.5,85.8c0,0-13.5,42.4-14.6,45.9c-0.4-3.6-10.3-79.7-10.3-79.7c-23,0-35.3,16.4-41.8,33.7c0,0-16.4,42.5-17.8,46.1
19 | 	c-0.1-3.3-2.5-45.6-2.5-45.6C677.1,65,657.7,52.1,642,52.1l18.9,115.3c24.1-0.1,37.1-16.4,43.9-33.7c0,0,14.5-37.5,15-39.2
20 | 	c0.2,1.6,10.4,72.9,10.4,72.9c24.2,0,37.2-15.3,44.2-32l33.9-83.3C784.5,52.1,771.9,68.4,765.5,85.8z M487.6,0.7L468,158.8l0,0
21 | 	l-4,19.5c0.5,0,1.1,0.1,1.6,0.1l0,0c21.1-0.3,36.1-18.8,38.9-42.1l11.3-90.7C519.2,17.9,502.7,0.7,487.6,0.7z"/>
22 | </svg>
23 | 


--------------------------------------------------------------------------------
/public/logos/shopify.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 302.1 612 192"><path fill="#95BF47" d="M131.5 341.9c-.1-.9-.9-1.3-1.5-1.3s-13.7-1-13.7-1-9.1-9.1-10.2-10c-1-1-2.9-.7-3.7-.5-.1 0-2 .6-5.1 1.6-3.1-8.9-8.4-17-17.9-17h-.9c-2.6-3.4-6-5-8.8-5-22 0-32.6 27.5-35.9 41.5-8.6 2.7-14.7 4.5-15.4 4.8-4.8 1.5-4.9 1.6-5.5 6.1-.5 3.4-13 100.1-13 100.1l97.3 18.2L150 468c.1-.2-18.4-125.2-18.5-126.1zm-39.6-9.8c-2.4.7-5.3 1.6-8.2 2.6v-1.8c0-5.4-.7-9.8-2-13.3 5 .6 8.1 6.1 10.2 12.5zm-16.3-11.4c1.3 3.4 2.2 8.2 2.2 14.8v1c-5.4 1.7-11.1 3.4-17 5.3 3.3-12.6 9.6-18.8 14.8-21.1zm-6.4-6.2c1 0 2 .4 2.8 1-7.1 3.3-14.6 11.6-17.7 28.4-4.7 1.5-9.2 2.8-13.5 4.2 3.6-12.8 12.6-33.6 28.4-33.6z"/><path fill="#5E8E3E" d="M130 340.4c-.6 0-13.7-1-13.7-1s-9.1-9.1-10.2-10c-.4-.4-.9-.6-1.3-.6l-7.3 150.6 52.8-11.4s-18.5-125.2-18.6-126.1c-.4-.9-1.1-1.3-1.7-1.5z"/><path fill="#FFF" d="M79.4 369.6L73 388.9s-5.8-3.1-12.7-3.1c-10.3 0-10.8 6.5-10.8 8.1 0 8.8 23 12.2 23 32.9 0 16.3-10.3 26.8-24.2 26.8-16.8 0-25.2-10.4-25.2-10.4l4.5-14.8s8.8 7.6 16.2 7.6c4.9 0 6.9-3.8 6.9-6.6 0-11.5-18.8-12-18.8-31 0-15.9 11.4-31.3 34.5-31.3 8.6-.1 13 2.5 13 2.5z"/><path d="M211.6 405.9c-5.3-2.8-8-5.3-8-8.6 0-4.2 3.8-6.9 9.7-6.9 6.9 0 13 2.8 13 2.8l4.8-14.7s-4.4-3.4-17.4-3.4c-18.1 0-30.7 10.4-30.7 25 0 8.3 5.9 14.6 13.7 19.1 6.4 3.5 8.6 6.1 8.6 9.9 0 3.9-3.2 7.1-9.1 7.1-8.7 0-17-4.5-17-4.5l-5.1 14.7s7.6 5.1 20.4 5.1c18.6 0 32.1-9.2 32.1-25.7-.2-9-6.9-15.2-15-19.9zM285.8 374.9c-9.2 0-16.4 4.4-21.9 11l-.2-.1 8-41.6H251l-20.2 106h20.7l6.9-36.2c2.7-13.7 9.8-22.2 16.4-22.2 4.7 0 6.5 3.2 6.5 7.7 0 2.8-.2 6.4-.9 9.2l-7.8 41.5h20.7l8.1-42.8c.9-4.5 1.5-9.9 1.5-13.6-.1-11.9-6.2-18.9-17.1-18.9zM349.7 374.9c-25 0-41.5 22.5-41.5 47.6 0 16 9.9 29 28.5 29 24.5 0 41-21.9 41-47.6.1-14.9-8.5-29-28-29zm-10.2 60.8c-7.1 0-10-6-10-13.6 0-11.9 6.1-31.2 17.4-31.2 7.3 0 9.8 6.4 9.8 12.5 0 12.7-6.3 32.3-17.2 32.3zM430.8 374.9c-14 0-21.9 12.4-21.9 12.4h-.2l1.2-11.1h-18.4c-.9 7.5-2.6 19-4.2 27.5L373 479.6h20.7l5.8-30.7h.5s4.3 2.7 12.1 2.7c24.4 0 40.3-25 40.3-50.2-.1-14-6.4-26.5-21.6-26.5zm-19.8 61c-5.4 0-8.6-3.1-8.6-3.1l3.4-19.3c2.4-13 9.2-21.5 16.4-21.5 6.4 0 8.3 5.9 8.3 11.4.1 13.4-7.9 32.5-19.5 32.5zM481.9 345.2c-6.6 0-11.9 5.3-11.9 12 0 6.1 3.9 10.4 9.8 10.4h.2c6.5 0 12-4.4 12.1-12 .1-6.1-4-10.4-10.2-10.4zM452.9 450.1h20.7l14-73.6h-20.8M540.4 376.4H526l.7-3.4c1.2-7.1 5.4-13.3 12.4-13.3 3.7 0 6.6 1.1 6.6 1.1l4-16.3s-3.5-1.8-11.3-1.8c-7.3 0-14.7 2.1-20.3 6.9-7.1 6-10.4 14.7-12 23.5l-.6 3.4h-9.7l-3.1 15.7h9.7l-11 58h20.7l11-58h14.3l3-15.8zM590.3 376.5s-13 32.7-18.7 50.6h-.2c-.4-5.8-5.1-50.6-5.1-50.6h-21.8l12.5 67.4c.2 1.5.1 2.4-.5 3.4-2.4 4.7-6.5 9.2-11.3 12.5-3.9 2.8-8.3 4.7-11.8 5.9l5.8 17.6c4.2-.9 13-4.4 20.3-11.3 9.4-8.8 18.2-22.5 27.2-41.1l25.3-54.5h-21.7z"/></svg>


--------------------------------------------------------------------------------
/public/svg/shopify.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 302.1 612 192"><path fill="#95BF47" d="M131.5 341.9c-.1-.9-.9-1.3-1.5-1.3s-13.7-1-13.7-1-9.1-9.1-10.2-10c-1-1-2.9-.7-3.7-.5-.1 0-2 .6-5.1 1.6-3.1-8.9-8.4-17-17.9-17h-.9c-2.6-3.4-6-5-8.8-5-22 0-32.6 27.5-35.9 41.5-8.6 2.7-14.7 4.5-15.4 4.8-4.8 1.5-4.9 1.6-5.5 6.1-.5 3.4-13 100.1-13 100.1l97.3 18.2L150 468c.1-.2-18.4-125.2-18.5-126.1zm-39.6-9.8c-2.4.7-5.3 1.6-8.2 2.6v-1.8c0-5.4-.7-9.8-2-13.3 5 .6 8.1 6.1 10.2 12.5zm-16.3-11.4c1.3 3.4 2.2 8.2 2.2 14.8v1c-5.4 1.7-11.1 3.4-17 5.3 3.3-12.6 9.6-18.8 14.8-21.1zm-6.4-6.2c1 0 2 .4 2.8 1-7.1 3.3-14.6 11.6-17.7 28.4-4.7 1.5-9.2 2.8-13.5 4.2 3.6-12.8 12.6-33.6 28.4-33.6z"/><path fill="#5E8E3E" d="M130 340.4c-.6 0-13.7-1-13.7-1s-9.1-9.1-10.2-10c-.4-.4-.9-.6-1.3-.6l-7.3 150.6 52.8-11.4s-18.5-125.2-18.6-126.1c-.4-.9-1.1-1.3-1.7-1.5z"/><path fill="#FFF" d="M79.4 369.6L73 388.9s-5.8-3.1-12.7-3.1c-10.3 0-10.8 6.5-10.8 8.1 0 8.8 23 12.2 23 32.9 0 16.3-10.3 26.8-24.2 26.8-16.8 0-25.2-10.4-25.2-10.4l4.5-14.8s8.8 7.6 16.2 7.6c4.9 0 6.9-3.8 6.9-6.6 0-11.5-18.8-12-18.8-31 0-15.9 11.4-31.3 34.5-31.3 8.6-.1 13 2.5 13 2.5z"/><path d="M211.6 405.9c-5.3-2.8-8-5.3-8-8.6 0-4.2 3.8-6.9 9.7-6.9 6.9 0 13 2.8 13 2.8l4.8-14.7s-4.4-3.4-17.4-3.4c-18.1 0-30.7 10.4-30.7 25 0 8.3 5.9 14.6 13.7 19.1 6.4 3.5 8.6 6.1 8.6 9.9 0 3.9-3.2 7.1-9.1 7.1-8.7 0-17-4.5-17-4.5l-5.1 14.7s7.6 5.1 20.4 5.1c18.6 0 32.1-9.2 32.1-25.7-.2-9-6.9-15.2-15-19.9zM285.8 374.9c-9.2 0-16.4 4.4-21.9 11l-.2-.1 8-41.6H251l-20.2 106h20.7l6.9-36.2c2.7-13.7 9.8-22.2 16.4-22.2 4.7 0 6.5 3.2 6.5 7.7 0 2.8-.2 6.4-.9 9.2l-7.8 41.5h20.7l8.1-42.8c.9-4.5 1.5-9.9 1.5-13.6-.1-11.9-6.2-18.9-17.1-18.9zM349.7 374.9c-25 0-41.5 22.5-41.5 47.6 0 16 9.9 29 28.5 29 24.5 0 41-21.9 41-47.6.1-14.9-8.5-29-28-29zm-10.2 60.8c-7.1 0-10-6-10-13.6 0-11.9 6.1-31.2 17.4-31.2 7.3 0 9.8 6.4 9.8 12.5 0 12.7-6.3 32.3-17.2 32.3zM430.8 374.9c-14 0-21.9 12.4-21.9 12.4h-.2l1.2-11.1h-18.4c-.9 7.5-2.6 19-4.2 27.5L373 479.6h20.7l5.8-30.7h.5s4.3 2.7 12.1 2.7c24.4 0 40.3-25 40.3-50.2-.1-14-6.4-26.5-21.6-26.5zm-19.8 61c-5.4 0-8.6-3.1-8.6-3.1l3.4-19.3c2.4-13 9.2-21.5 16.4-21.5 6.4 0 8.3 5.9 8.3 11.4.1 13.4-7.9 32.5-19.5 32.5zM481.9 345.2c-6.6 0-11.9 5.3-11.9 12 0 6.1 3.9 10.4 9.8 10.4h.2c6.5 0 12-4.4 12.1-12 .1-6.1-4-10.4-10.2-10.4zM452.9 450.1h20.7l14-73.6h-20.8M540.4 376.4H526l.7-3.4c1.2-7.1 5.4-13.3 12.4-13.3 3.7 0 6.6 1.1 6.6 1.1l4-16.3s-3.5-1.8-11.3-1.8c-7.3 0-14.7 2.1-20.3 6.9-7.1 6-10.4 14.7-12 23.5l-.6 3.4h-9.7l-3.1 15.7h9.7l-11 58h20.7l11-58h14.3l3-15.8zM590.3 376.5s-13 32.7-18.7 50.6h-.2c-.4-5.8-5.1-50.6-5.1-50.6h-21.8l12.5 67.4c.2 1.5.1 2.4-.5 3.4-2.4 4.7-6.5 9.2-11.3 12.5-3.9 2.8-8.3 4.7-11.8 5.9l5.8 17.6c4.2-.9 13-4.4 20.3-11.3 9.4-8.8 18.2-22.5 27.2-41.1l25.3-54.5h-21.7z"/></svg>


--------------------------------------------------------------------------------
/src/app/api/map/route.ts:
--------------------------------------------------------------------------------
 1 | import { NextRequest, NextResponse } from 'next/server'
 2 | import FirecrawlApp from '@mendable/firecrawl-js'
 3 | 
 4 | export async function POST(request: NextRequest) {
 5 |   try {
 6 |     const body = await request.json()
 7 |     const { url, limit = 200 } = body
 8 | 
 9 |     if (!url) {
10 |       return NextResponse.json(
11 |         { error: 'URL is required' },
12 |         { status: 400 }
13 |       )
14 |     }
15 | 
16 |     const apiKey = process.env.FIRECRAWL_API_KEY
17 |     if (!apiKey || apiKey === 'fc-YOUR_API_KEY') {
18 |       return NextResponse.json(
19 |         { error: 'Firecrawl API key not configured' },
20 |         { status: 500 }
21 |       )
22 |     }
23 | 
24 | 
25 |     const app = new FirecrawlApp({ apiKey })
26 | 
27 |     // Map the website
28 |     const mapResult = await app.mapUrl(url, {
29 |       limit,
30 |       includeSubdomains: false
31 |     })
32 | 
33 | 
34 |     // The mapUrl might return an object with a data property or other structure
35 |     // Let's ensure we have an array
36 |     let urls: string[] = []
37 |     
38 |     if (Array.isArray(mapResult)) {
39 |       urls = mapResult
40 |     } else if (mapResult && Array.isArray((mapResult as unknown as {data?: string[]}).data)) {
41 |       urls = (mapResult as unknown as {data: string[]}).data
42 |     } else if (mapResult && Array.isArray((mapResult as unknown as {links?: string[]}).links)) {
43 |       urls = (mapResult as unknown as {links: string[]}).links
44 |     } else if (mapResult && (mapResult as unknown as {success?: boolean; urls?: string[]}).success && Array.isArray((mapResult as unknown as {urls?: string[]}).urls)) {
45 |       urls = (mapResult as unknown as {urls: string[]}).urls
46 |     } else {
47 |       urls = [] // Fallback to empty array
48 |     }
49 | 
50 | 
51 |     // Analyze the URLs
52 |     const analysis = {
53 |       total: urls.length,
54 |       posts: urls.filter((u: string) => {
55 |         try {
56 |           const path = new URL(u).pathname
57 |           return path.match(/\/[a-z0-9-]+$/) && 
58 |                  !path.includes('/category/') &&
59 |                  !path.includes('/tag/') &&
60 |                  !path.includes('/page/')
61 |         } catch {
62 |           return false
63 |         }
64 |       }).length,
65 |       categories: urls.filter((u: string) => u.includes('/category/')).length,
66 |       tags: urls.filter((u: string) => u.includes('/tag/')).length,
67 |       pages: urls.filter((u: string) => u.includes('/page/')).length
68 |     }
69 | 
70 | 
71 |     return NextResponse.json({
72 |       success: true,
73 |       urls,
74 |       analysis,
75 |       creditsUsed: 2 // Map always uses 2 credits
76 |     })
77 | 
78 |   } catch (error) {
79 |     return NextResponse.json(
80 |       { error: error instanceof Error ? error.message : 'Failed to map website' },
81 |       { status: 500 }
82 |     )
83 |   }
84 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Firecrawl Content Migrator
  2 | 
  3 | A powerful web scraping and content migration tool built with Next.js, TypeScript, and the Firecrawl API. Extract structured data from any website and export it in formats ready for your CMS, database, or data pipeline.
  4 | 
  5 | **Repository**: [github.com/mendableai/firecrawl-migrator](https://github.com/mendableai/firecrawl-migrator)
  6 | 
  7 | ## What it does
  8 | 
  9 | Scrapes content from websites and exports structured data. Map a site, select URLs, define what data to extract, and export as CSV.
 10 | 
 11 | ## Key Features
 12 | 
 13 | - Map website structure to discover all pages
 14 | - Select specific URLs to scrape
 15 | - Define custom fields (title, date, content, etc.)
 16 | - Export data as CSV
 17 | - Batch process multiple pages at once
 18 | 
 19 | ## Use Cases
 20 | 
 21 | - **Blog Migration**: Extract posts, metadata, and content from any blog platform
 22 | - **E-commerce Data**: Scrape product information, prices, and descriptions
 23 | - **News Archives**: Collect articles with dates, authors, and categories
 24 | - **Documentation Sites**: Extract technical documentation with proper structure
 25 | - **Content Audits**: Analyze and export existing website content
 26 | 
 27 | ## Prerequisites
 28 | 
 29 | - Node.js 18+ and npm
 30 | - Firecrawl API key (get one at [firecrawl.dev](https://firecrawl.dev))
 31 | 
 32 | ## Quick Start
 33 | 
 34 | ### 1. Clone the repository
 35 | ```bash
 36 | git clone https://github.com/mendableai/firecrawl-migrator.git
 37 | cd firecrawl-migrator
 38 | ```
 39 | 
 40 | ### 2. Install dependencies
 41 | ```bash
 42 | npm install
 43 | ```
 44 | 
 45 | ### 3. Get your Firecrawl API key
 46 | - Sign up at [firecrawl.dev](https://firecrawl.dev)
 47 | - Navigate to your dashboard
 48 | - Copy your API key
 49 | 
 50 | ### 4. Configure environment variables
 51 | Create a `.env.local` file in the root directory:
 52 | ```bash
 53 | touch .env.local
 54 | ```
 55 | 
 56 | Add your Firecrawl API key to the file:
 57 | ```env
 58 | FIRECRAWL_API_KEY=fc-YOUR_ACTUAL_API_KEY_HERE
 59 | ```
 60 | 
 61 | ### 5. Run the development server
 62 | ```bash
 63 | npm run dev
 64 | ```
 65 | 
 66 | ### 6. Open the application
 67 | Visit [http://localhost:3000](http://localhost:3000) in your browser
 68 | 
 69 | You should see the Firecrawl Content Migrator interface. If you see an API key error, double-check your `.env.local` file.
 70 | 
 71 | ## How It Works
 72 | 
 73 | ### Step 1: Map Website Structure
 74 | Enter a URL to analyze the website's structure. The mapping operation discovers all available pages and organizes them in a hierarchical tree view.
 75 | 
 76 | ### Step 2: Select Content
 77 | Browse the interactive tree and select which pages to scrape. Use the built-in filters to:
 78 | - Select all pages in a directory
 79 | - Filter by URL patterns
 80 | - Exclude categories, tags, or pagination
 81 | 
 82 | ### Step 3: Define Schema
 83 | Configure what data to extract from each page:
 84 | - **Default fields**: title, date, content
 85 | - **Add custom fields**: author, category, price, tags, etc.
 86 | - **Auto-detection**: The tool can analyze pages and suggest fields
 87 | 
 88 | ### Step 4: Extract & Export
 89 | Start the batch scraping process to extract structured data from all selected pages. Export results as:
 90 | - CSV for spreadsheets and databases
 91 | - JSON for APIs and applications
 92 | - Custom formats for specific CMS platforms
 93 | 
 94 | ## Troubleshooting
 95 | 
 96 | If you see **"Firecrawl API key not configured"**:
 97 | - Make sure you created the `.env.local` file
 98 | - Check that your API key starts with `fc-`
 99 | - Restart the development server
100 | 
101 | ## Development
102 | 
103 | ### Build for production
104 | ```bash
105 | npm run build
106 | npm start
107 | ```
108 | 
109 | ### Run linting
110 | ```bash
111 | npm run lint
112 | ```
113 | 
114 | ## Contributing
115 | 
116 | Just fork, make your changes, and submit a PR!
117 | 
118 | ## License
119 | 
120 | MIT License - see LICENSE file for details
121 | 
122 | ## Support
123 | 
124 | - Create an issue on GitHub
125 | - Check [Firecrawl docs](https://docs.firecrawl.dev)
126 | - Join [Firecrawl Discord](https://discord.gg/firecrawl)


--------------------------------------------------------------------------------
/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center whitespace-nowrap rounded-[10px] text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: "bg-zinc-900 text-white hover:bg-zinc-800 [box-shadow:inset_0px_-2px_0px_0px_#18181b,_0px_1px_6px_0px_rgba(24,_24,_27,_58%)] hover:translate-y-[1px] hover:scale-[0.98] hover:[box-shadow:inset_0px_-1px_0px_0px_#18181b,_0px_1px_3px_0px_rgba(24,_24,_27,_40%)] active:translate-y-[2px] active:scale-[0.97] active:[box-shadow:inset_0px_1px_1px_0px_#18181b,_0px_1px_2px_0px_rgba(24,_24,_27,_30%)] disabled:shadow-none disabled:hover:translate-y-0 disabled:hover:scale-100",
13 |         secondary: "bg-zinc-100 text-zinc-900 hover:bg-zinc-200 [box-shadow:inset_0px_-2px_0px_0px_#d4d4d8,_0px_1px_6px_0px_rgba(161,_161,_170,_58%)] hover:translate-y-[1px] hover:scale-[0.98] hover:[box-shadow:inset_0px_-1px_0px_0px_#d4d4d8,_0px_1px_3px_0px_rgba(161,_161,_170,_40%)] active:translate-y-[2px] active:scale-[0.97] active:[box-shadow:inset_0px_1px_1px_0px_#d4d4d8,_0px_1px_2px_0px_rgba(161,_161,_170,_30%)] disabled:shadow-none disabled:hover:translate-y-0 disabled:hover:scale-100",
14 |         outline: "border border-zinc-300 bg-transparent hover:bg-zinc-50 text-zinc-900 [box-shadow:inset_0px_-2px_0px_0px_#e4e4e7,_0px_1px_6px_0px_rgba(228,_228,_231,_58%)] hover:translate-y-[1px] hover:scale-[0.98] hover:[box-shadow:inset_0px_-1px_0px_0px_#e4e4e7,_0px_1px_3px_0px_rgba(228,_228,_231,_40%)] active:translate-y-[2px] active:scale-[0.97] active:[box-shadow:inset_0px_1px_1px_0px_#e4e4e7,_0px_1px_2px_0px_rgba(228,_228,_231,_30%)] disabled:shadow-none disabled:hover:translate-y-0 disabled:hover:scale-100",
15 |         destructive: "bg-red-500 text-white hover:bg-red-600 [box-shadow:inset_0px_-2px_0px_0px_#dc2626,_0px_1px_6px_0px_rgba(239,_68,_68,_58%)] hover:translate-y-[1px] hover:scale-[0.98] hover:[box-shadow:inset_0px_-1px_0px_0px_#dc2626,_0px_1px_3px_0px_rgba(239,_68,_68,_40%)] active:translate-y-[2px] active:scale-[0.97] active:[box-shadow:inset_0px_1px_1px_0px_#dc2626,_0px_1px_2px_0px_rgba(239,_68,_68,_30%)] disabled:shadow-none disabled:hover:translate-y-0 disabled:hover:scale-100",
16 |         code: "bg-[#36322F] text-white hover:bg-[#4a4542] [box-shadow:inset_0px_-2px_0px_0px_#171310,_0px_1px_6px_0px_rgba(58,_33,_8,_58%)] hover:translate-y-[1px] hover:scale-[0.98] hover:[box-shadow:inset_0px_-1px_0px_0px_#171310,_0px_1px_3px_0px_rgba(58,_33,_8,_40%)] active:translate-y-[2px] active:scale-[0.97] active:[box-shadow:inset_0px_1px_1px_0px_#171310,_0px_1px_2px_0px_rgba(58,_33,_8,_30%)] disabled:shadow-none disabled:hover:translate-y-0 disabled:hover:scale-100",
17 |         orange: "bg-orange-500 text-white hover:bg-orange-600 [box-shadow:inset_0px_-2px_0px_0px_#c2410c,_0px_1px_6px_0px_rgba(234,_88,_12,_58%)] hover:translate-y-[1px] hover:scale-[0.98] hover:[box-shadow:inset_0px_-1px_0px_0px_#c2410c,_0px_1px_3px_0px_rgba(234,_88,_12,_40%)] active:translate-y-[2px] active:scale-[0.97] active:[box-shadow:inset_0px_1px_1px_0px_#c2410c,_0px_1px_2px_0px_rgba(234,_88,_12,_30%)] disabled:shadow-none disabled:hover:translate-y-0 disabled:hover:scale-100",
18 |       },
19 |       size: {
20 |         default: "h-10 px-4 py-2",
21 |       },
22 |     },
23 |     defaultVariants: {
24 |       variant: "default",
25 |       size: "default",
26 |     },
27 |   }
28 | )
29 | 
30 | export interface ButtonProps
31 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
32 |     VariantProps<typeof buttonVariants> {
33 |   asChild?: boolean
34 | }
35 | 
36 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
37 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
38 |     const Comp = asChild ? Slot : "button"
39 |     return (
40 |       <Comp
41 |         className={cn(buttonVariants({ variant, size, className }))}
42 |         ref={ref}
43 |         {...props}
44 |       />
45 |     )
46 |   }
47 | )
48 | Button.displayName = "Button"
49 | 
50 | export { Button, buttonVariants }


--------------------------------------------------------------------------------
/public/logos/magento.svg:
--------------------------------------------------------------------------------
 1 | <svg id="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3316 915.7">
 2 | 	<title>magento-logo</title>
 3 | 	<g>
 4 | 		<polygon points="396.9 0 0 229.1 0 686.7 113.3 752.2 112.5 294.5 396.1 130.8 679.7 294.5 679.7 752 793 686.7 793 228.7 396.9 0" fill="#f26322"/>
 5 | 		<polygon points="453.1 752.1 396.5 785 339.6 752.4 339.6 294.5 226.4 359.9 226.6 817.6 396.4 915.7 566.4 817.6 566.4 359.9 453.1 294.5 453.1 752.1" fill="#f26322"/>
 6 | 		<path d="M1053,232l155.8,393.6h1.3l152-393.6h59.3V683h-41v-393h-1.3q-3.2,10.7-6.9,21.4-3.2,8.8-7.3,19.5c-2.7,7.2-5.2,13.9-7.2,20.2L1227.1,683h-37.2L1058,351.2q-3.8-8.8-7.6-19.2t-7-19.9q-3.8-11.4-7.6-22.1h-1.3V683H995.6V232H1053Z"
 7 | 			  transform="translate(-0.5 -0.1)" fill="#4d4d4d"/>
 8 | 		<path d="M1540.6,684.9a96,96,0,0,1-33.7-17,80.1,80.1,0,0,1-22.4-28.4q-8.2-17-8.2-39.7,0-29,10.7-47.3a82.8,82.8,0,0,1,29-29.3q18.3-11,42.6-16.7a456.1,456.1,0,0,1,52-8.8q24-2.5,40.7-5.4t27.1-7.3q10.4-4.4,15.1-11.7t4.7-19.9v-6.3q0-33.4-20.2-49.5t-58-16.1q-87.1,0-91.5,72.6h-38.5q3.2-47.3,35-75.7t94.9-28.4q53.6,0,84.5,23.7t30.9,77.3V628.2q0,14.5,5.4,21.1t16.1,7.3a37.7,37.7,0,0,0,6.6-.6c2.3-.4,4.9-1.1,7.9-1.9h1.9v28.4a74,74,0,0,1-10.7,3.5,66.7,66.7,0,0,1-15.8,1.6q-21.4,0-34.1-11.1t-13.9-35v-6.9H1697a190.5,190.5,0,0,1-16.7,19.6,112.6,112.6,0,0,1-23.7,18.3,132.3,132.3,0,0,1-32.2,13.2q-18.3,5.1-41.6,5a151.1,151.1,0,0,1-42.3-5.7m96.2-34.4q20.5-8.5,34.4-21.8a88.3,88.3,0,0,0,27.8-63.7V506.4q-15.8,8.8-38.2,13.6t-46.4,7.9q-20.8,3.2-38.5,6.6t-30.6,11a56.5,56.5,0,0,0-20.5,20.5q-7.6,12.9-7.6,33.8,0,17,6,28.4a51.5,51.5,0,0,0,15.8,18.3,61.9,61.9,0,0,0,23,9.8,132.2,132.2,0,0,0,27.8,2.8q26.5,0,47-8.5"
 9 | 			  transform="translate(-0.5 -0.1)" fill="#4d4d4d"/>
10 | 		<path d="M1840.2,773q-32.8-24.3-37.2-60.9h37.8q5.1,28.4,30.6,40.7t60.9,12.3q52.4,0,77.3-24.9t24.9-68.5V620h-1.9q-18.3,27.7-42.3,42.2t-61.2,14.5q-32.2,0-58-12a128.3,128.3,0,0,1-44.2-33.4q-18.3-21.4-28.1-51.4t-9.8-65.9q0-39.7,11.3-70.3t30.3-51.4a124.9,124.9,0,0,1,44.5-31.5,137.9,137.9,0,0,1,53.9-10.7q37.8,0,62.4,15.5t41,41.9h1.9V356.9H2073V670.4q0,54.2-30.3,87.7-37.2,39.1-109.1,39.1-60.6,0-93.4-24.3m171-165q25.9-36,25.9-94.6,0-29-6.3-53t-19.6-41.3a89.5,89.5,0,0,0-33.1-26.8q-19.9-9.5-46.4-9.5-48.6,0-75.4,35.9t-26.8,95.9a199.6,199.6,0,0,0,6.3,51.4q6.3,23.6,18.9,41a89.1,89.1,0,0,0,31.5,27.1q18.9,9.8,44.8,9.8,54.2,0,80.1-36"
11 | 			  transform="translate(-0.5 -0.1)" fill="#4d4d4d"/>
12 | 		<path d="M2208.6,678.3a133,133,0,0,1-47.6-35.9q-19.2-23-29.3-54.3t-10.1-67.8q0-36.6,10.7-67.8t29.9-54.2a135.3,135.3,0,0,1,46.7-36q27.4-12.9,61.5-12.9,39.1,0,65.9,14.8a123.5,123.5,0,0,1,43.5,39.7q16.7,24.9,23.7,57.1a313.1,313.1,0,0,1,6.9,66.2H2161.9a189,189,0,0,0,7.9,51.4,129.2,129.2,0,0,0,20.8,41.3,94.5,94.5,0,0,0,34.4,27.8q20.8,10.1,48.6,10.1,41,0,63.4-19.9t31.8-53.3h37.9q-10.7,48.6-44.2,77.6t-88.9,29q-36.6,0-65-12.9m153.9-227.1q-6.3-21.1-18.3-36.6a83.7,83.7,0,0,0-30.3-24.3q-18.3-8.8-43.5-8.8t-43.9,8.8a93.8,93.8,0,0,0-32.5,24.3,121.2,121.2,0,0,0-21.1,36.3,178.9,178.9,0,0,0-10.4,45.4h206.9a172.3,172.3,0,0,0-6.9-45.1"
13 | 			  transform="translate(-0.5 -0.1)" fill="#4d4d4d"/>
14 | 		<path d="M2498.1,356.9v49.8h1.3a134,134,0,0,1,43.2-40.7q26.8-16.1,65.9-16.1,45.4,0,74.8,26.2t29.3,75.4V683.1h-39.1V455.3q0-37.2-19.9-54.6t-54.6-17.3a109.3,109.3,0,0,0-39.1,7,103.1,103.1,0,0,0-32.2,19.2,88.4,88.4,0,0,0-21.8,29.3,87.4,87.4,0,0,0-7.9,37.2V683.1H2459V356.9h39.1Z"
15 | 			  transform="translate(-0.5 -0.1)" fill="#4d4d4d"/>
16 | 		<path d="M2813.5,672q-17-13.6-17-45.1V389.1h-49.2V356.9h49.2V256.6h39.1V356.9h60.6v32.2h-60.6V620.6q0,17.7,7.9,24.3t23.6,6.6a67,67,0,0,0,14.2-1.6,65.1,65.1,0,0,0,11.7-3.5h1.9v33.4a109.4,109.4,0,0,1-36,5.7q-28.4,0-45.4-13.6"
17 | 			  transform="translate(-0.5 -0.1)" fill="#4d4d4d"/>
18 | 		<path d="M3011.9,678.3a136.6,136.6,0,0,1-47.6-36q-19.6-23-30-54.2t-10.4-67.8q0-36.6,10.4-67.8t30-54.3a136.8,136.8,0,0,1,47.6-36q28.1-12.9,63.4-12.9t63.1,12.9a137.6,137.6,0,0,1,47.3,36q19.6,23,29.6,54.3t10.1,67.8q0,36.6-10.1,67.8t-29.6,54.2a137.4,137.4,0,0,1-47.3,36q-27.7,12.9-63.1,12.9t-63.4-12.9m111.4-30.6a98.3,98.3,0,0,0,34.7-29.6q13.9-18.9,20.8-44.2a210.3,210.3,0,0,0,0-107.2q-6.9-25.3-20.8-44.2a98,98,0,0,0-34.7-29.6q-20.8-10.8-47.9-10.7t-48.3,10.7a101.9,101.9,0,0,0-34.7,29.6q-14.2,18.9-21.1,44.2a210.8,210.8,0,0,0,0,107.2q6.9,25.2,21.1,44.2a102.3,102.3,0,0,0,34.7,29.6q20.5,10.7,48.3,10.7t47.9-10.7"
19 | 			  transform="translate(-0.5 -0.1)" fill="#4d4d4d"/>
20 | 		<path d="M3275.4,411.1c-24.2,0-41-16.8-41-41.9s17.2-42.1,41-42.1,41.1,17,41.1,42.1-17.2,41.9-41.1,41.9m0-79.2c-19.5,0-35.1,13.4-35.1,37.2s15.5,37,35.1,37,35.3-13.4,35.3-37-15.7-37.2-35.3-37.2m12.1,59.7-13.9-19.9h-4.5v19.2h-8V344.3h14.1c9.7,0,16.2,4.9,16.2,13.6,0,6.7-3.6,11-9.4,12.8l13.4,19Zm-12.2-39.9h-6.2v13.7h5.8c5.2,0,8.5-2.2,8.5-6.9s-2.9-6.9-8.1-6.9"
21 | 			  transform="translate(-0.5 -0.1)" fill="#4d4d4d"/>
22 | 	</g>
23 | </svg>


--------------------------------------------------------------------------------
/public/svg/webflow.svg:
--------------------------------------------------------------------------------
 1 | <svg width="1080" height="181" viewBox="0 0 1080 181" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path fill-rule="evenodd" clip-rule="evenodd" d="M288.606 0.684082L196.515 180.711H110.016L148.556 106.1H146.827C115.032 147.374 67.5931 174.545 0 180.711V107.133C0 107.133 43.2409 104.579 68.661 77.8531H0V0.685504H77.1676V64.1547L78.8996 64.1476L110.433 0.685504H168.793V63.7523L170.525 63.7495L203.241 0.684082H288.606Z" fill="#146EF5"/>
 3 | <path d="M790.78 160.84H815.632V18.1868H790.78V160.84Z" fill="#080808"/>
 4 | <path fill-rule="evenodd" clip-rule="evenodd" d="M653.772 159.383C659.174 161.629 664.666 162.751 670.25 162.751C679.475 162.751 687.728 160.506 695.011 156.015C702.294 151.524 707.938 145.333 711.944 137.444C715.95 129.493 717.952 120.481 717.952 110.406C717.952 100.331 715.889 91.3188 711.762 83.3683C707.635 75.4179 701.9 69.2578 694.556 64.8881C687.213 60.4577 678.868 58.2728 669.521 58.3335C663.574 58.3335 657.869 59.4866 652.407 61.7929C646.944 64.0991 642.393 67.3764 638.751 71.6247C638.47 71.9482 638.197 72.2749 637.932 72.6048V18.2778H612.988V160.84H637.75L637.7 147.522C638.341 148.307 639.025 149.074 639.753 149.824C643.698 153.891 648.371 157.077 653.772 159.383ZM679.262 136.351C675.196 138.839 670.553 140.084 665.334 140.084C660.175 140.084 655.441 138.809 651.132 136.26C646.823 133.65 643.394 130.1 640.845 125.609C638.357 121.118 637.113 116.02 637.113 110.315C637.052 104.61 638.266 99.512 640.754 95.0209C643.303 90.4691 646.732 86.9491 651.041 84.4608C655.35 81.9118 660.114 80.6676 665.334 80.7283C670.553 80.6676 675.196 81.8814 679.262 84.3697C683.389 86.7973 686.545 90.287 688.73 94.8388C690.975 99.3299 692.098 104.489 692.098 110.315C692.098 116.141 690.975 121.3 688.73 125.791C686.545 130.282 683.389 133.802 679.262 136.351Z" fill="#080808"/>
 5 | <path d="M324.611 26.8352H353.014L378.422 119.625L405.451 26.8352H429.12L458.434 117.763L482.831 26.8352H508.867L470.45 160.84H445.961L416.154 72.0107L388.791 160.84H364.029L324.611 26.8352Z" fill="#080808"/>
 6 | <path fill-rule="evenodd" clip-rule="evenodd" d="M550.811 163.207C540.918 163.267 531.997 161.082 524.046 156.652C516.157 152.161 509.936 145.94 505.384 137.99C500.893 130.039 498.647 120.966 498.647 110.77C498.647 100.878 500.954 91.9257 505.566 83.9145C510.178 75.9034 516.43 69.6523 524.319 65.1612C532.209 60.6701 541.009 58.4245 550.72 58.4245C561.644 58.4245 571.203 60.8522 579.396 65.7074C587.65 70.5626 593.81 77.451 597.876 86.3725C602.003 95.2333 603.49 105.399 602.337 116.869H524.358C524.576 121.439 525.716 125.597 527.779 129.341C530.085 133.468 533.302 136.685 537.428 138.991C541.555 141.297 546.168 142.45 551.266 142.45C555.15 142.39 558.761 141.722 562.099 140.448C565.437 139.113 568.259 137.322 570.566 135.077C572.932 132.831 574.601 130.282 575.572 127.43H601.609C600.031 134.409 596.875 140.63 592.141 146.092C587.407 151.493 581.459 155.711 574.298 158.746C567.136 161.78 559.307 163.267 550.811 163.207ZM527.87 91.8346C526.415 94.3709 525.408 97.102 524.847 100.028H576.537C576.162 96.3314 575.021 92.9631 573.114 89.9229C570.93 86.3422 567.956 83.5807 564.193 81.6387C560.43 79.6359 556.182 78.6345 551.448 78.6345C546.411 78.6345 541.829 79.7876 537.702 82.0938C533.575 84.4001 530.297 87.647 527.87 91.8346Z" fill="#080808"/>
 7 | <path d="M736.25 60.5184C736.25 52.3858 738.102 45.1637 741.804 38.8519C745.506 32.4794 750.695 27.5331 757.371 24.0131C764.107 20.4323 771.967 18.5813 780.949 18.4599V40.5815C776.761 40.6422 773.181 41.5223 770.207 43.2216C767.294 44.8602 765.048 47.2575 763.47 50.4134C762.017 53.3188 761.233 56.6871 761.118 60.5184H780.403V81.5476H761.103V160.84H736.25V81.5476H720.228V60.5184H736.25Z" fill="#080808"/>
 8 | <path fill-rule="evenodd" clip-rule="evenodd" d="M878.811 163.025C868.676 163.025 859.603 160.809 851.591 156.379C843.641 151.888 837.39 145.697 832.838 137.808C828.347 129.857 826.101 120.845 826.101 110.77C826.101 100.635 828.347 91.5919 832.838 83.6414C837.39 75.6303 843.641 69.4095 851.591 64.9791C859.603 60.5487 868.676 58.3335 878.811 58.3335C889.007 58.3335 898.111 60.5487 906.122 64.9791C914.194 69.4095 920.475 75.5999 924.966 83.5504C929.457 91.5008 931.733 100.574 931.794 110.77C931.733 120.845 929.457 129.857 924.966 137.808C920.536 145.697 914.285 151.888 906.213 156.379C898.141 160.809 889.007 163.025 878.811 163.025ZM878.811 140.175C884.152 140.175 888.886 138.961 893.013 136.533C897.14 134.045 900.326 130.585 902.571 126.155C904.817 121.664 905.94 116.536 905.94 110.77C905.94 104.944 904.817 99.7851 902.571 95.294C900.326 90.8029 897.14 87.3436 893.013 84.9159C888.886 82.4276 884.152 81.1835 878.811 81.1835C873.531 81.1835 868.828 82.4276 864.701 84.9159C860.634 87.3436 857.478 90.8029 855.233 95.294C852.987 99.7851 851.895 104.944 851.956 110.77C851.956 116.536 853.078 121.664 855.324 126.155C857.63 130.585 860.786 134.045 864.792 136.533C868.858 138.961 873.531 140.175 878.811 140.175Z" fill="#080808"/>
 9 | <path d="M958.649 60.5184H930.975L960.925 160.84H985.141L1004.84 96.7646L1026.11 160.84H1049.96L1080 60.5184H1054.97L1037.93 122.962L1019.1 60.5184H994.882L976.141 124.338L958.649 60.5184Z" fill="#080808"/>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/public/firecrawl.svg:
--------------------------------------------------------------------------------
1 | <svg width="2907" height="600" viewBox="0 0 2907 600" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <text x="0" y="599.93" fontSize="600" dominant-baseline="text-after-edge">🔥</text>
3 | <path d="M768.456 483V119.364H993.953V166.594H823.321V277.389H977.796V324.442H823.321V483H768.456ZM1052.16 483V210.273H1105.25V483H1052.16ZM1078.97 168.192C1069.74 168.192 1061.81 165.114 1055.18 158.959C1048.67 152.685 1045.42 145.228 1045.42 136.587C1045.42 127.827 1048.67 120.37 1055.18 114.214C1061.81 107.941 1069.74 104.804 1078.97 104.804C1088.21 104.804 1096.08 107.941 1102.59 114.214C1109.22 120.37 1112.53 127.827 1112.53 136.587C1112.53 145.228 1109.22 152.685 1102.59 158.959C1096.08 165.114 1088.21 168.192 1078.97 168.192ZM1171.68 483V210.273H1222.99V253.597H1225.83C1230.8 238.919 1239.56 227.377 1252.11 218.973C1264.77 210.45 1279.1 206.189 1295.08 206.189C1298.39 206.189 1302.3 206.307 1306.8 206.544C1311.41 206.781 1315.02 207.077 1317.63 207.432V258.213C1315.5 257.621 1311.71 256.97 1306.26 256.26C1300.82 255.431 1295.37 255.017 1289.93 255.017C1277.38 255.017 1266.19 257.68 1256.37 263.007C1246.66 268.215 1238.97 275.495 1233.29 284.847C1227.61 294.08 1224.76 304.615 1224.76 316.452V483H1171.68ZM1466.35 488.504C1439.48 488.504 1416.33 482.763 1396.92 471.281C1377.63 459.681 1362.71 443.405 1352.18 422.453C1341.76 401.383 1336.55 376.703 1336.55 348.412C1336.55 320.476 1341.76 295.855 1352.18 274.548C1362.71 253.241 1377.39 236.61 1396.21 224.655C1415.15 212.699 1437.29 206.722 1462.62 206.722C1478.01 206.722 1492.92 209.267 1507.36 214.357C1521.8 219.446 1534.77 227.437 1546.25 238.327C1557.73 249.217 1566.78 263.362 1573.41 280.763C1580.04 298.045 1583.36 319.056 1583.36 343.795V362.616H1366.56V322.844H1531.33C1531.33 308.876 1528.49 296.506 1522.81 285.734C1517.13 274.844 1509.14 266.262 1498.84 259.989C1488.66 253.715 1476.7 250.578 1462.97 250.578C1448.06 250.578 1435.04 254.248 1423.91 261.587C1412.9 268.807 1404.38 278.277 1398.34 289.996C1392.42 301.596 1389.46 314.203 1389.46 327.815V358.888C1389.46 377.117 1392.66 392.624 1399.05 405.408C1405.56 418.192 1414.62 427.957 1426.22 434.705C1437.82 441.333 1451.37 444.648 1466.88 444.648C1476.94 444.648 1486.11 443.227 1494.4 440.386C1502.69 437.427 1509.85 433.047 1515.89 427.247C1521.92 421.447 1526.54 414.286 1529.73 405.763L1579.98 414.818C1575.96 429.615 1568.74 442.576 1558.32 453.703C1548.02 464.712 1535.06 473.294 1519.44 479.449C1503.93 485.486 1486.23 488.504 1466.35 488.504ZM1752.14 488.504C1725.74 488.504 1703.02 482.527 1683.96 470.571C1665.02 458.497 1650.46 441.866 1640.28 420.678C1630.1 399.489 1625.01 375.223 1625.01 347.879C1625.01 320.18 1630.22 295.737 1640.63 274.548C1651.05 253.241 1665.73 236.61 1684.67 224.655C1703.61 212.699 1725.92 206.722 1751.61 206.722C1772.32 206.722 1790.79 210.569 1807.01 218.263C1823.22 225.839 1836.3 236.492 1846.25 250.223C1856.31 263.954 1862.28 279.993 1864.18 298.341H1812.51C1809.67 285.557 1803.16 274.548 1792.98 265.315C1782.92 256.082 1769.42 251.466 1752.5 251.466C1737.7 251.466 1724.74 255.372 1713.61 263.185C1702.6 270.879 1694.02 281.887 1687.86 296.21C1681.71 310.415 1678.63 327.223 1678.63 346.636C1678.63 366.523 1681.65 383.687 1687.69 398.128C1693.72 412.569 1702.25 423.755 1713.26 431.686C1724.38 439.617 1737.46 443.582 1752.5 443.582C1762.56 443.582 1771.67 441.748 1779.84 438.078C1788.13 434.29 1795.05 428.904 1800.61 421.92C1806.3 414.937 1810.26 406.532 1812.51 396.707H1864.18C1862.28 414.345 1856.54 430.088 1846.96 443.938C1837.37 457.787 1824.52 468.677 1808.43 476.608C1792.45 484.539 1773.68 488.504 1752.14 488.504ZM1915.95 483V210.273H1967.27V253.597H1970.11C1975.08 238.919 1983.84 227.377 1996.39 218.973C2009.05 210.45 2023.37 206.189 2039.35 206.189C2042.67 206.189 2046.58 206.307 2051.07 206.544C2055.69 206.781 2059.3 207.077 2061.9 207.432V258.213C2059.77 257.621 2055.99 256.97 2050.54 256.26C2045.1 255.431 2039.65 255.017 2034.21 255.017C2021.66 255.017 2010.47 257.68 2000.65 263.007C1990.94 268.215 1983.25 275.495 1977.56 284.847C1971.88 294.08 1969.04 304.615 1969.04 316.452V483H1915.95ZM2179.77 489.037C2162.49 489.037 2146.87 485.841 2132.9 479.449C2118.93 472.938 2107.86 463.528 2099.7 451.217C2091.65 438.907 2087.62 423.814 2087.62 405.94C2087.62 390.552 2090.58 377.886 2096.5 367.943C2102.42 358 2110.41 350.128 2120.47 344.328C2130.53 338.528 2141.78 334.148 2154.21 331.189C2166.63 328.23 2179.3 325.981 2192.2 324.442C2208.54 322.548 2221.8 321.009 2231.98 319.825C2242.16 318.523 2249.55 316.452 2254.17 313.611C2258.79 310.77 2261.09 306.153 2261.09 299.761V298.518C2261.09 283.012 2256.71 270.997 2247.96 262.474C2239.31 253.952 2226.41 249.69 2209.25 249.69C2191.37 249.69 2177.29 253.656 2166.99 261.587C2156.81 269.399 2149.77 278.099 2145.86 287.688L2095.97 276.324C2101.89 259.752 2110.53 246.376 2121.89 236.196C2133.37 225.898 2146.57 218.44 2161.49 213.824C2176.4 209.089 2192.08 206.722 2208.54 206.722C2219.43 206.722 2230.97 208.024 2243.16 210.628C2255.47 213.114 2266.95 217.73 2277.61 224.477C2288.38 231.224 2297.2 240.872 2304.06 253.419C2310.93 265.848 2314.36 282.006 2314.36 301.892V483H2262.52V445.713H2260.38C2256.95 452.579 2251.8 459.326 2244.94 465.955C2238.07 472.583 2229.25 478.088 2218.48 482.467C2207.71 486.847 2194.81 489.037 2179.77 489.037ZM2191.31 446.423C2205.99 446.423 2218.54 443.523 2228.96 437.723C2239.49 431.923 2247.48 424.347 2252.93 414.996C2258.49 405.526 2261.27 395.405 2261.27 384.634V349.477C2259.38 351.371 2255.71 353.147 2250.26 354.804C2244.94 356.343 2238.84 357.704 2231.98 358.888C2225.11 359.953 2218.42 360.959 2211.91 361.906C2205.4 362.735 2199.96 363.445 2195.58 364.037C2185.28 365.339 2175.87 367.529 2167.34 370.607C2158.94 373.684 2152.19 378.123 2147.1 383.923C2142.13 389.605 2139.65 397.181 2139.65 406.651C2139.65 419.79 2144.5 429.733 2154.21 436.48C2163.91 443.109 2176.28 446.423 2191.31 446.423ZM2439.2 483L2358.94 210.273H2413.81L2467.25 410.557H2469.92L2523.54 210.273H2578.4L2631.67 409.669H2634.34L2687.42 210.273H2742.29L2662.21 483H2608.06L2552.66 286.089H2548.58L2493.18 483H2439.2ZM2840.76 119.364V483H2787.67V119.364H2840.76Z" fill="#36322F"/>
4 | </svg> 


--------------------------------------------------------------------------------
/public/svg/wordpress.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 4 | <svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="540px"
 5 | 	 height="122.523px" viewBox="0 0 540 122.523" enable-background="new 0 0 540 122.523" xml:space="preserve">
 6 | <g id="Layer_1">
 7 | </g>
 8 | <g id="Layer_2">
 9 | 	<g>
10 | 		<path fill="#00749A" d="M313.19,48.227h-21.257v2.255c6.649,0,7.718,1.425,7.718,9.857V75.54c0,8.431-1.068,9.975-7.718,9.975
11 | 			c-5.105-0.712-8.55-3.444-13.3-8.669l-5.462-5.937c7.362-1.308,11.28-5.938,11.28-11.164c0-6.53-5.58-11.518-16.031-11.518h-20.9
12 | 			v2.255c6.649,0,7.718,1.425,7.718,9.857V75.54c0,8.431-1.069,9.975-7.718,9.975v2.256h23.631v-2.256
13 | 			c-6.649,0-7.718-1.544-7.718-9.975v-4.274h2.018l13.182,16.505h34.557c16.981,0,24.344-9.024,24.344-19.832
14 | 			C337.534,57.133,330.172,48.227,313.19,48.227z M263.434,67.582V51.79h4.868c5.343,0,7.719,3.681,7.719,7.956
15 | 			c0,4.157-2.376,7.837-7.719,7.837H263.434z M313.547,84.09h-0.832c-4.274,0-4.868-1.068-4.868-6.531V51.79c0,0,5.225,0,5.7,0
16 | 			c12.35,0,14.605,9.024,14.605,16.031C328.152,75.064,325.896,84.09,313.547,84.09z"/>
17 | 		<path fill="#00749A" d="M181.378,71.978l8.194-24.227c2.376-7.006,1.307-9.024-6.293-9.024v-2.376h22.325v2.376
18 | 			c-7.481,0-9.262,1.781-12.231,10.45L179.834,89.79h-1.543l-12.114-37.17l-12.349,37.17h-1.544l-13.181-40.613
19 | 			c-2.85-8.669-4.75-10.45-11.638-10.45v-2.376h26.363v2.376c-7.007,0-8.908,1.662-6.413,9.024l7.956,24.227l11.994-35.627h2.257
20 | 			L181.378,71.978z"/>
21 | 		<path fill="#00749A" d="M221.752,89.314c-13.062,0-23.75-9.618-23.75-21.376c0-11.637,10.689-21.257,23.75-21.257
22 | 			c13.063,0,23.75,9.62,23.75,21.257C245.502,79.696,234.815,89.314,221.752,89.314z M221.752,50.365
23 | 			c-10.924,0-14.725,9.855-14.725,17.574c0,7.839,3.801,17.576,14.725,17.576c11.045,0,14.845-9.737,14.845-17.576
24 | 			C236.597,60.22,232.797,50.365,221.752,50.365z"/>
25 | 		<path fill="#464342" d="M366.864,85.396v2.375H339.67v-2.375c7.957,0,9.382-2.018,9.382-13.895V52.502
26 | 			c0-11.877-1.425-13.776-9.382-13.776v-2.376h24.581c12.231,0,19.002,6.294,19.002,14.727c0,8.194-6.771,14.606-19.002,14.606
27 | 			h-6.769v5.817C357.482,83.378,358.907,85.396,366.864,85.396z M364.251,40.625h-6.769v20.664h6.769
28 | 			c6.651,0,9.738-4.631,9.738-10.212C373.989,45.377,370.902,40.625,364.251,40.625z"/>
29 | 		<path fill="#464342" d="M464.833,76.609l-0.594,2.137c-1.068,3.919-2.376,5.344-10.807,5.344h-1.663
30 | 			c-6.174,0-7.243-1.425-7.243-9.856v-5.462c9.263,0,9.976,0.83,9.976,7.006h2.256V58.083h-2.256c0,6.175-0.713,7.006-9.976,7.006
31 | 			V51.79h6.53c8.433,0,9.738,1.425,10.807,5.344l0.595,2.255h1.899l-0.83-11.162h-34.914v2.255c6.649,0,7.719,1.425,7.719,9.857
32 | 			V75.54c0,7.713-0.908,9.656-6.151,9.933c-4.983-0.761-8.404-3.479-13.085-8.627l-5.463-5.937
33 | 			c7.363-1.308,11.282-5.938,11.282-11.164c0-6.53-5.581-11.518-16.031-11.518h-20.9v2.255c6.649,0,7.718,1.425,7.718,9.857V75.54
34 | 			c0,8.431-1.068,9.975-7.718,9.975v2.256h23.632v-2.256c-6.649,0-7.719-1.544-7.719-9.975v-4.274h2.019l13.181,16.505h48.806
35 | 			l0.713-11.161H464.833z M401.896,67.582V51.79h4.868c5.344,0,7.72,3.681,7.72,7.956c0,4.157-2.376,7.837-7.72,7.837H401.896z"/>
36 | 		<path fill="#464342" d="M488.939,89.314c-4.75,0-8.907-2.493-10.688-4.038c-0.594,0.595-1.662,2.376-1.899,4.038h-2.257V72.928
37 | 			h2.375c0.951,7.837,6.412,12.468,13.419,12.468c3.8,0,6.888-2.137,6.888-5.699c0-3.087-2.731-5.463-7.6-7.719l-6.769-3.206
38 | 			c-4.751-2.258-8.313-6.177-8.313-11.401c0-5.7,5.344-10.568,12.707-10.568c3.919,0,7.243,1.425,9.263,3.087
39 | 			c0.593-0.475,1.187-1.782,1.544-3.208h2.256v14.014h-2.494c-0.832-5.582-3.919-10.213-10.212-10.213
40 | 			c-3.325,0-6.414,1.9-6.414,4.87c0,3.087,2.494,4.749,8.195,7.362l6.53,3.206c5.701,2.731,7.956,7.127,7.956,10.689
41 | 			C503.426,84.09,496.895,89.314,488.939,89.314z"/>
42 | 		<path fill="#464342" d="M525.514,89.314c-4.751,0-8.908-2.493-10.688-4.038c-0.594,0.595-1.662,2.376-1.899,4.038h-2.257V72.928
43 | 			h2.375c0.95,7.837,6.412,12.468,13.419,12.468c3.8,0,6.888-2.137,6.888-5.699c0-3.087-2.731-5.463-7.601-7.719l-6.769-3.206
44 | 			c-4.75-2.258-8.313-6.177-8.313-11.401c0-5.7,5.344-10.568,12.707-10.568c3.919,0,7.243,1.425,9.263,3.087
45 | 			c0.593-0.475,1.187-1.782,1.542-3.208h2.257v14.014h-2.493c-0.832-5.582-3.919-10.213-10.212-10.213
46 | 			c-3.325,0-6.414,1.9-6.414,4.87c0,3.087,2.494,4.749,8.195,7.362l6.53,3.206c5.701,2.731,7.956,7.127,7.956,10.689
47 | 			C540,84.09,533.469,89.314,525.514,89.314z"/>
48 | 		<g>
49 | 			<path fill="#464342" d="M8.708,61.26c0,20.802,12.089,38.779,29.619,47.298L13.258,39.872
50 | 				C10.342,46.408,8.708,53.641,8.708,61.26z"/>
51 | 			<path fill="#464342" d="M96.74,58.608c0-6.495-2.333-10.993-4.334-14.494c-2.664-4.329-5.161-7.995-5.161-12.324
52 | 				c0-4.831,3.664-9.328,8.825-9.328c0.233,0,0.454,0.029,0.681,0.042c-9.35-8.566-21.807-13.796-35.489-13.796
53 | 				c-18.36,0-34.513,9.42-43.91,23.688c1.233,0.037,2.395,0.063,3.382,0.063c5.497,0,14.006-0.667,14.006-0.667
54 | 				c2.833-0.167,3.167,3.994,0.337,4.329c0,0-2.847,0.335-6.015,0.501L48.2,93.547l11.501-34.493l-8.188-22.434
55 | 				c-2.83-0.166-5.511-0.501-5.511-0.501c-2.832-0.166-2.5-4.496,0.332-4.329c0,0,8.679,0.667,13.843,0.667
56 | 				c5.496,0,14.006-0.667,14.006-0.667c2.835-0.167,3.168,3.994,0.337,4.329c0,0-2.853,0.335-6.015,0.501l18.992,56.494
57 | 				l5.242-17.517C95.011,68.328,96.74,63.107,96.74,58.608z"/>
58 | 			<path fill="#464342" d="M62.184,65.857l-15.768,45.819c4.708,1.384,9.687,2.141,14.846,2.141c6.12,0,11.989-1.058,17.452-2.979
59 | 				c-0.141-0.225-0.269-0.464-0.374-0.724L62.184,65.857z"/>
60 | 			<path fill="#464342" d="M107.376,36.046c0.226,1.674,0.354,3.471,0.354,5.404c0,5.333-0.996,11.328-3.996,18.824l-16.053,46.413
61 | 				c15.624-9.111,26.133-26.038,26.133-45.426C113.815,52.124,111.481,43.532,107.376,36.046z"/>
62 | 			<path fill="#464342" d="M61.262,0C27.483,0,0,27.481,0,61.26c0,33.783,27.483,61.263,61.262,61.263
63 | 				c33.778,0,61.265-27.48,61.265-61.263C122.526,27.481,95.04,0,61.262,0z M61.262,119.715c-32.23,0-58.453-26.223-58.453-58.455
64 | 				c0-32.23,26.222-58.451,58.453-58.451c32.229,0,58.45,26.221,58.45,58.451C119.712,93.492,93.491,119.715,61.262,119.715z"/>
65 | 		</g>
66 | 	</g>
67 | </g>
68 | </svg>
69 | 


--------------------------------------------------------------------------------
/src/app/globals.css:
--------------------------------------------------------------------------------
  1 | @tailwind base;
  2 | @tailwind components;
  3 | @tailwind utilities;
  4 | 
  5 | @layer utilities {
  6 |   /* Hide scrollbar for Chrome, Safari and Opera */
  7 |   .scrollbar-hide::-webkit-scrollbar {
  8 |     display: none;
  9 |   }
 10 |   
 11 |   /* Hide scrollbar for IE, Edge and Firefox */
 12 |   .scrollbar-hide {
 13 |     -ms-overflow-style: none;  /* IE and Edge */
 14 |     scrollbar-width: none;  /* Firefox */
 15 |   }
 16 |   
 17 |   /* Infinite scroll animation */
 18 |   @keyframes scroll {
 19 |     0% {
 20 |       transform: translateX(0);
 21 |     }
 22 |     100% {
 23 |       transform: translateX(-50%);
 24 |     }
 25 |   }
 26 |   
 27 |   .animate-scroll {
 28 |     animation: scroll 30s linear infinite;
 29 |   }
 30 |   
 31 |   /* Pause on hover */
 32 |   .animate-scroll:hover {
 33 |     animation-play-state: paused;
 34 |   }
 35 |   
 36 |   /* Fade in animation */
 37 |   @keyframes fade-in {
 38 |     0% {
 39 |       opacity: 0;
 40 |       transform: translateY(10px);
 41 |     }
 42 |     100% {
 43 |       opacity: 1;
 44 |       transform: translateY(0);
 45 |     }
 46 |   }
 47 |   
 48 |   .animate-fade-in {
 49 |     opacity: 0;
 50 |     animation: fade-in 0.6s ease-out forwards;
 51 |   }
 52 |   
 53 |   /* Slide in animation */
 54 |   @keyframes slide-in {
 55 |     0% {
 56 |       opacity: 0;
 57 |       transform: translateX(-20px);
 58 |     }
 59 |     100% {
 60 |       opacity: 1;
 61 |       transform: translateX(0);
 62 |     }
 63 |   }
 64 |   
 65 |   .animate-slide-in {
 66 |     opacity: 0;
 67 |     animation: slide-in 0.6s ease-out forwards;
 68 |   }
 69 |   
 70 |   /* Slide in from right animation for button */
 71 |   @keyframes slide-in-right {
 72 |     0% {
 73 |       opacity: 0;
 74 |       transform: translateX(10px);
 75 |     }
 76 |     100% {
 77 |       opacity: 1;
 78 |       transform: translateX(0);
 79 |     }
 80 |   }
 81 |   
 82 |   .animate-slide-in-right {
 83 |     opacity: 0;
 84 |     animation: slide-in-right 0.4s ease-out forwards;
 85 |     animation-delay: 0.2s;
 86 |   }
 87 |   
 88 |   /* Rotate platforms animation */
 89 |   @keyframes rotate-platforms {
 90 |     0%, 20% {
 91 |       transform: translateY(0);
 92 |     }
 93 |     25%, 45% {
 94 |       transform: translateY(-50px);
 95 |     }
 96 |     50%, 70% {
 97 |       transform: translateY(-100px);
 98 |     }
 99 |     75%, 95% {
100 |       transform: translateY(-150px);
101 |     }
102 |     100% {
103 |       transform: translateY(0);
104 |     }
105 |   }
106 |   
107 |   .animate-rotate-platforms {
108 |     animation: rotate-platforms 8s ease-in-out infinite;
109 |   }
110 |   
111 |   /* Rotate formats animation - fade between formats */
112 |   @keyframes fade-formats {
113 |     0%, 22% {
114 |       opacity: 1;
115 |     }
116 |     25%, 97% {
117 |       opacity: 0;
118 |     }
119 |     100% {
120 |       opacity: 1;
121 |     }
122 |   }
123 |   
124 |   .animate-rotate-formats > div > div:nth-child(1) {
125 |     animation: fade-formats 12s ease-in-out infinite;
126 |   }
127 |   
128 |   .animate-rotate-formats > div > div:nth-child(2) {
129 |     opacity: 0;
130 |     animation: fade-formats 12s ease-in-out infinite;
131 |     animation-delay: 3s;
132 |   }
133 |   
134 |   .animate-rotate-formats > div > div:nth-child(3) {
135 |     opacity: 0;
136 |     animation: fade-formats 12s ease-in-out infinite;
137 |     animation-delay: 6s;
138 |   }
139 |   
140 |   .animate-rotate-formats > div > div:nth-child(4) {
141 |     opacity: 0;
142 |     animation: fade-formats 12s ease-in-out infinite;
143 |     animation-delay: 9s;
144 |   }
145 |   
146 |   /* Crawl URLs animation */
147 |   @keyframes crawl-urls {
148 |     0% {
149 |       transform: translateY(0);
150 |     }
151 |     100% {
152 |       transform: translateY(-360px);
153 |     }
154 |   }
155 |   
156 |   .animate-crawl-urls {
157 |     animation: crawl-urls 12s linear infinite;
158 |   }
159 |   
160 |   /* Extract data animation - fade between items */
161 |   @keyframes fade-cycle-4 {
162 |     0%, 20% {
163 |       opacity: 1;
164 |     }
165 |     25%, 95% {
166 |       opacity: 0;
167 |     }
168 |     100% {
169 |       opacity: 1;
170 |     }
171 |   }
172 |   
173 |   .animate-extract-data > div > div:nth-child(1) {
174 |     animation: fade-cycle-4 8s ease-in-out infinite;
175 |   }
176 |   
177 |   .animate-extract-data > div > div:nth-child(2) {
178 |     opacity: 0;
179 |     animation: fade-cycle-4 8s ease-in-out infinite;
180 |     animation-delay: 2s;
181 |   }
182 |   
183 |   .animate-extract-data > div > div:nth-child(3) {
184 |     opacity: 0;
185 |     animation: fade-cycle-4 8s ease-in-out infinite;
186 |     animation-delay: 4s;
187 |   }
188 |   
189 |   .animate-extract-data > div > div:nth-child(4) {
190 |     opacity: 0;
191 |     animation: fade-cycle-4 8s ease-in-out infinite;
192 |     animation-delay: 6s;
193 |   }
194 |   
195 |   /* Counter animation */
196 |   @keyframes counter {
197 |     0% {
198 |       content: "1";
199 |     }
200 |     20% {
201 |       content: "23";
202 |     }
203 |     40% {
204 |       content: "47";
205 |     }
206 |     60% {
207 |       content: "82";
208 |     }
209 |     80% {
210 |       content: "109";
211 |     }
212 |     100% {
213 |       content: "127";
214 |     }
215 |   }
216 |   
217 |   .animate-counter::after {
218 |     content: "127";
219 |     animation: counter 6s steps(1) infinite;
220 |   }
221 |   
222 |   /* Fade in and out animation */
223 |   @keyframes fade-in-out {
224 |     0%, 100% {
225 |       opacity: 0;
226 |       transform: translateY(10px);
227 |     }
228 |     20%, 80% {
229 |       opacity: 1;
230 |       transform: translateY(0);
231 |     }
232 |   }
233 |   
234 |   /* Slow spin animation */
235 |   @keyframes spin-slow {
236 |     from {
237 |       transform: rotate(0deg);
238 |     }
239 |     to {
240 |       transform: rotate(360deg);
241 |     }
242 |   }
243 |   
244 |   .animate-spin-slow {
245 |     animation: spin-slow 3s linear infinite;
246 |   }
247 |   
248 |   /* Custom checkbox styles */
249 |   .custom-checkbox {
250 |     @apply appearance-none w-4 h-4 border-2 border-zinc-300 rounded transition-all cursor-pointer relative;
251 |   }
252 |   
253 |   .custom-checkbox:checked {
254 |     @apply bg-orange-500 border-orange-500;
255 |   }
256 |   
257 |   .custom-checkbox:checked::after {
258 |     content: '';
259 |     @apply absolute inset-0 flex items-center justify-center;
260 |     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
261 |     background-size: 12px;
262 |     background-repeat: no-repeat;
263 |     background-position: center;
264 |   }
265 |   
266 |   .custom-checkbox:hover:not(:checked) {
267 |     @apply border-orange-400;
268 |   }
269 |   
270 |   .custom-checkbox:focus {
271 |     @apply outline-none ring-2 ring-orange-500 ring-offset-2;
272 |   }
273 |   
274 |   .custom-checkbox:indeterminate {
275 |     @apply bg-orange-500 border-orange-500;
276 |   }
277 |   
278 |   .custom-checkbox:indeterminate::after {
279 |     content: '';
280 |     @apply absolute inset-0 flex items-center justify-center;
281 |     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z' clip-rule='evenodd'/%3E%3C/svg%3E");
282 |     background-size: 12px;
283 |     background-repeat: no-repeat;
284 |     background-position: center;
285 |   }
286 | }
287 | 
288 | @layer base {
289 |   :root {
290 |     --background: 0 0% 100%;
291 |     --foreground: 240 10% 3.9%;
292 |     --card: 0 0% 100%;
293 |     --card-foreground: 240 10% 3.9%;
294 |     --popover: 0 0% 100%;
295 |     --popover-foreground: 240 10% 3.9%;
296 |     --primary: 25 95% 53%;
297 |     --primary-foreground: 0 0% 98%;
298 |     --secondary: 240 4.8% 95.9%;
299 |     --secondary-foreground: 240 5.9% 10%;
300 |     --muted: 240 4.8% 95.9%;
301 |     --muted-foreground: 240 3.8% 46.1%;
302 |     --accent: 240 4.8% 95.9%;
303 |     --accent-foreground: 240 5.9% 10%;
304 |     --destructive: 0 84.2% 60.2%;
305 |     --destructive-foreground: 0 0% 98%;
306 |     --border: 240 5.9% 90%;
307 |     --input: 240 5.9% 90%;
308 |     --ring: 25 95% 53%;
309 |     --radius: 0.5rem;
310 |     --chart-1: 12 76% 61%;
311 |     --chart-2: 173 58% 39%;
312 |     --chart-3: 197 37% 24%;
313 |     --chart-4: 43 74% 66%;
314 |     --chart-5: 27 87% 67%;
315 |   }
316 | 
317 |   .dark {
318 |     --background: 240 10% 3.9%;
319 |     --foreground: 0 0% 98%;
320 |     --card: 240 10% 3.9%;
321 |     --card-foreground: 0 0% 98%;
322 |     --popover: 240 10% 3.9%;
323 |     --popover-foreground: 0 0% 98%;
324 |     --primary: 25 95% 53%;
325 |     --primary-foreground: 240 5.9% 10%;
326 |     --secondary: 240 3.7% 15.9%;
327 |     --secondary-foreground: 0 0% 98%;
328 |     --muted: 240 3.7% 15.9%;
329 |     --muted-foreground: 240 5% 64.9%;
330 |     --accent: 240 3.7% 15.9%;
331 |     --accent-foreground: 0 0% 98%;
332 |     --destructive: 0 62.8% 30.6%;
333 |     --destructive-foreground: 0 0% 98%;
334 |     --border: 240 3.7% 15.9%;
335 |     --input: 240 3.7% 15.9%;
336 |     --ring: 240 4.9% 83.9%;
337 |     --chart-1: 220 70% 50%;
338 |     --chart-2: 160 60% 45%;
339 |     --chart-3: 30 80% 55%;
340 |     --chart-4: 280 65% 60%;
341 |     --chart-5: 340 75% 55%;
342 |   }
343 | }
344 | 
345 | @layer base {
346 |   * {
347 |     @apply border-border;
348 |   }
349 |   body {
350 |     @apply bg-background text-foreground;
351 |   }
352 | }
353 | 


--------------------------------------------------------------------------------
/src/app/api/crawl/route.ts:
--------------------------------------------------------------------------------
  1 | import { NextRequest, NextResponse } from 'next/server'
  2 | import FirecrawlApp from '@mendable/firecrawl-js'
  3 | // import { z } from 'zod' // Keeping for potential future use
  4 | 
  5 | // New endpoint for schema inference
  6 | export async function GET(request: NextRequest) {
  7 |   try {
  8 |     const { searchParams } = new URL(request.url)
  9 |     let url = searchParams.get('url')
 10 | 
 11 |     if (!url) {
 12 |       return NextResponse.json(
 13 |         { error: 'URL is required' },
 14 |         { status: 400 }
 15 |       )
 16 |     }
 17 | 
 18 |     // Ensure URL has proper protocol
 19 |     if (!url.startsWith('http://') && !url.startsWith('https://')) {
 20 |       url = 'https://' + url
 21 |     }
 22 | 
 23 |     // Validate URL format
 24 |     try {
 25 |       new URL(url)
 26 |     } catch {
 27 |       return NextResponse.json(
 28 |         { error: 'Invalid URL format' },
 29 |         { status: 400 }
 30 |       )
 31 |     }
 32 | 
 33 |     // Use API key from environment variable only
 34 |     const finalApiKey = process.env.FIRECRAWL_API_KEY
 35 |     if (!finalApiKey || finalApiKey === 'fc-YOUR_API_KEY') {
 36 |       return NextResponse.json(
 37 |         { error: 'Firecrawl API key not configured. Please check server configuration.' },
 38 |         { status: 500 }
 39 |       )
 40 |     }
 41 | 
 42 |     // Initialize Firecrawl with the provided API key
 43 |     const app = new FirecrawlApp({
 44 |       apiKey: finalApiKey
 45 |     })
 46 | 
 47 |     // First, scrape a sample page to analyze structure
 48 |     const scrapeResult = await app.scrapeUrl(url, {
 49 |       formats: ['markdown', 'html'],
 50 |       onlyMainContent: true,
 51 |       timeout: 30000, // 30 second timeout
 52 |       maxAge: 86400000 // Use 1 day cache for schema inference for speed
 53 |     } as Parameters<typeof app.scrapeUrl>[1])
 54 | 
 55 |     if (!scrapeResult.success) {
 56 |       // Provide more specific error messages
 57 |       const errorMessage = scrapeResult.error || 'Unknown scraping error'
 58 |       if (errorMessage.includes('502') || errorMessage.includes('Bad Gateway')) {
 59 |         return NextResponse.json({
 60 |           error: 'The website is temporarily unavailable. Please try again later or try a different URL.',
 61 |           fallbackSchema: getDefaultSchema()
 62 |         }, { status: 503 })
 63 |       }
 64 |       
 65 |       return NextResponse.json({
 66 |         error: `Failed to analyze website: ${errorMessage}`,
 67 |         fallbackSchema: getDefaultSchema()
 68 |       }, { status: 500 })
 69 |     }
 70 | 
 71 |     // Infer schema from the scraped content  
 72 |     const inferredSchema = inferSchemaFromContent(scrapeResult)
 73 | 
 74 |     return NextResponse.json({
 75 |       success: true,
 76 |       schema: inferredSchema,
 77 |       sampleContent: scrapeResult.markdown?.substring(0, 1000) + '...' // Preview
 78 |     })
 79 | 
 80 |   } catch (error) {
 81 |     
 82 |     // Provide helpful error messages and fallback schema
 83 |     let errorMessage = 'Failed to analyze website'
 84 |     
 85 |     if (error instanceof Error) {
 86 |       if (error.message.includes('502')) {
 87 |         errorMessage = 'The website is temporarily unavailable. Please try again later.'
 88 |       } else if (error.message.includes('timeout')) {
 89 |         errorMessage = 'The website took too long to respond. Please try again.'
 90 |       } else if (error.message.includes('API key')) {
 91 |         errorMessage = 'Invalid API key. Please check your Firecrawl API key.'
 92 |       } else {
 93 |         errorMessage = error.message
 94 |       }
 95 |     }
 96 | 
 97 |     return NextResponse.json({
 98 |       error: errorMessage,
 99 |       fallbackSchema: getDefaultSchema()
100 |     }, { status: 500 })
101 |   }
102 | }
103 | 
104 | export async function POST(request: NextRequest) {
105 |   let body: Record<string, unknown> = {}
106 |   try {
107 |     body = await request.json()
108 |     const { url, schema, autoInfer = false, includeRaw = false, selectedUrls = [], maxAge = 0 } = body as {
109 |       url: string
110 |       schema?: Schema
111 |       autoInfer?: boolean
112 |       includeRaw?: boolean
113 |       selectedUrls?: string[]
114 |       maxAge?: number
115 |     }
116 | 
117 |     if (!url) {
118 |       return NextResponse.json(
119 |         { error: 'URL is required' },
120 |         { status: 400 }
121 |       )
122 |     }
123 | 
124 |     // Initialize Firecrawl with the environment API key
125 |     const finalApiKey = process.env.FIRECRAWL_API_KEY
126 |     if (!finalApiKey || finalApiKey === 'fc-YOUR_API_KEY') {
127 |       return NextResponse.json(
128 |         { error: 'Firecrawl API key not configured. Please check server configuration.' },
129 |         { status: 500 }
130 |       )
131 |     }
132 |     
133 |     const app = new FirecrawlApp({
134 |       apiKey: finalApiKey
135 |     })
136 | 
137 |     let finalSchema = schema
138 | 
139 |          // If auto-infer is requested and no schema provided, infer it first
140 |      if (autoInfer && !schema) {
141 |        const scrapeResult = await app.scrapeUrl(url, {
142 |          formats: ['markdown', 'html'],
143 |          onlyMainContent: true
144 |        })
145 | 
146 |        if (scrapeResult.success) {
147 |          finalSchema = inferSchemaFromContent(scrapeResult)
148 |        } else {
149 |          // Fallback to basic schema if inference fails
150 |          finalSchema = getDefaultSchema()
151 |        }
152 |      }
153 | 
154 |     if (!finalSchema) {
155 |       return NextResponse.json(
156 |         { error: 'Schema is required or auto-inference failed' },
157 |         { status: 400 }
158 |       )
159 |     }
160 | 
161 |     // Convert our schema to JSON schema for Firecrawl
162 |     const jsonSchema = createJsonSchema(finalSchema)
163 |     
164 | 
165 |     let crawlResult: {
166 |       success: boolean
167 |       id?: string
168 |       data?: Array<{
169 |         json?: Record<string, unknown>
170 |         extract?: Record<string, unknown>
171 |         markdown?: string
172 |         metadata?: Record<string, unknown>
173 |         url?: string
174 |         links?: string[]
175 |         screenshot?: string
176 |       }>
177 |       total?: number
178 |       completed?: number
179 |       creditsUsed?: number
180 |       error?: string
181 |       status?: string
182 |     }
183 | 
184 |     // Map + Batch Scrape Strategy
185 |     if (!selectedUrls || selectedUrls.length === 0) {
186 |       return NextResponse.json(
187 |         { error: 'No URLs selected for scraping' },
188 |         { status: 400 }
189 |       )
190 |     }
191 |     
192 |       
193 |       // Build scrape options with schema if available
194 |       interface ScrapeOptions {
195 |         formats: string[]
196 |         onlyMainContent: boolean
197 |         timeout: number
198 |         maxAge: number
199 |         jsonOptions?: {
200 |           schema: Record<string, unknown>
201 |         }
202 |       }
203 |       
204 |       const scrapeOptions: ScrapeOptions = {
205 |         formats: finalSchema ? ['markdown', 'json'] : ['markdown'],
206 |         onlyMainContent: true,
207 |         timeout: 60000, // 60 second timeout per URL
208 |         maxAge: maxAge
209 |       }
210 |       
211 |       // Add jsonOptions if we have a schema
212 |       if (finalSchema) {
213 |         const jsonSchema = createJsonSchema(finalSchema)
214 |         scrapeOptions.jsonOptions = { schema: jsonSchema }
215 |       }
216 |       
217 |       
218 |       try {
219 |         // Use Firecrawl SDK's synchronous batch scrape method
220 |         
221 |         // Call the synchronous batchScrapeUrls method
222 |         const batchScrapeResult = await app.batchScrapeUrls(selectedUrls, scrapeOptions as Parameters<typeof app.batchScrapeUrls>[1])
223 |         
224 |         
225 |         if (!batchScrapeResult.success) {
226 |           throw new Error('error' in batchScrapeResult ? batchScrapeResult.error : 'Batch scrape failed')
227 |         }
228 |         
229 |         // Convert SDK response to our format
230 |         const resultData = 'data' in batchScrapeResult ? batchScrapeResult.data || [] : []
231 |         crawlResult = {
232 |           success: true,
233 |           data: resultData,
234 |           total: selectedUrls.length,
235 |           completed: resultData.length,
236 |           creditsUsed: 'creditsUsed' in batchScrapeResult ? batchScrapeResult.creditsUsed : resultData.length
237 |         }
238 |         
239 |         
240 |       } catch (error) {
241 |         
242 |         // Fallback to individual scraping if batch fails
243 |         const fallbackResults: Array<{
244 |           success: boolean
245 |           error?: string
246 |           url?: string
247 |           data?: unknown
248 |           json?: Record<string, unknown>
249 |           extract?: Record<string, unknown>
250 |           markdown?: string
251 |           metadata?: Record<string, unknown>
252 |           links?: string[]
253 |           screenshot?: string
254 |         }> = []
255 |         
256 |         for (const url of selectedUrls) {
257 |           try {
258 |             const result = await app.scrapeUrl(url, scrapeOptions as Parameters<typeof app.scrapeUrl>[1])
259 |             fallbackResults.push(result)
260 |           } catch (err) {
261 |             fallbackResults.push({
262 |               success: false,
263 |               error: err instanceof Error ? err.message : 'Scrape failed',
264 |               url,
265 |               metadata: { sourceURL: url }
266 |             })
267 |           }
268 |         }
269 |         
270 |         // Convert to batch scrape result format
271 |         crawlResult = {
272 |           success: true,
273 |           data: fallbackResults.filter(r => r.success).map(result => {
274 |             if ('data' in result && result.data) {
275 |               return result.data as {
276 |                 json?: Record<string, unknown>
277 |                 extract?: Record<string, unknown>
278 |                 markdown?: string
279 |                 metadata?: Record<string, unknown>
280 |                 url?: string
281 |                 links?: string[]
282 |                 screenshot?: string
283 |               }
284 |             }
285 |             return {
286 |               json: 'json' in result ? result.json : undefined,
287 |               extract: 'extract' in result ? result.extract : undefined,
288 |               markdown: 'markdown' in result ? result.markdown || '' : '',
289 |               metadata: 'metadata' in result ? result.metadata || {} : {},
290 |               url: String(('url' in result ? result.url : '') || ('metadata' in result && result.metadata ? (result.metadata as Record<string, unknown>)?.sourceURL : '') || ''),
291 |               links: 'links' in result ? result.links || [] : [],
292 |               screenshot: 'screenshot' in result ? result.screenshot : undefined
293 |             }
294 |           }),
295 |           total: selectedUrls.length,
296 |           completed: fallbackResults.filter(r => r.success).length,
297 |           creditsUsed: fallbackResults.filter(r => r.success).length
298 |         }
299 |         
300 |       }
301 |       
302 | 
303 | 
304 | 
305 |     // Extract the JSON data from each page
306 |     const extractedData = (crawlResult.data?.map((page) => {
307 |       // If we have structured data, use it
308 |       if (page.json || page.extract) {
309 |         return page.json || page.extract
310 |       }
311 |       
312 |       // Otherwise, extract from markdown using the schema
313 |       const structuredData: Record<string, unknown> = {}
314 |       
315 |       // Extract based on schema properties
316 |       for (const [key, property] of Object.entries(finalSchema.properties)) {
317 |         if (key === 'title') {
318 |           // Try to extract title from metadata or first heading
319 |           structuredData.title = page.metadata?.title || extractTitleFromMarkdown(page.markdown || '')
320 |         } else if (key === 'date') {
321 |           // Try to extract date from metadata or content
322 |           structuredData.date = page.metadata?.publishedTime || extractDateFromMarkdown(page.markdown || '')
323 |         } else if (key === 'content') {
324 |           // Use the markdown content
325 |           structuredData.content = page.markdown || ''
326 |         } else if (key === 'url') {
327 |           // Use the page URL
328 |           structuredData.url = page.metadata?.sourceURL || page.url || ''
329 |         } else {
330 |           // For other fields, try to extract from markdown
331 |           structuredData[key] = extractFieldFromMarkdown(page.markdown || '', key, property.type as string)
332 |         }
333 |       }
334 |       
335 |       return structuredData
336 |     }) || []) as Record<string, unknown>[]
337 | 
338 |     const response: {
339 |       success: boolean
340 |       data: Array<Record<string, unknown>>
341 |       totalPages: number
342 |       completed: number
343 |       inferredSchema?: Schema
344 |       strategy: string
345 |       creditsUsed: number
346 |       rawData?: Array<{
347 |         extractedJson: Record<string, unknown> | null
348 |         metadata: Record<string, unknown>
349 |         url: string
350 |         markdown: string
351 |         links: string[]
352 |         screenshot: string | null
353 |       }>
354 |     } = {
355 |       success: true,
356 |       data: extractedData,
357 |       totalPages: crawlResult.total || extractedData.length,
358 |       completed: crawlResult.completed || extractedData.length,
359 |       inferredSchema: autoInfer ? finalSchema : undefined,
360 |       strategy: 'mapCrawl',
361 |       creditsUsed: selectedUrls.length + 2
362 |     }
363 | 
364 |     // Include raw data if requested
365 |     if (includeRaw) {
366 |       response.rawData = crawlResult.data?.map((page) => ({
367 |         // Include the extracted data
368 |         extractedJson: page.json || page.extract || null,
369 |         // Include page metadata
370 |         metadata: page.metadata || {},
371 |         // Include source URL
372 |         url: String(page.url || page.metadata?.sourceURL || ''),
373 |         // Include markdown content (truncated for size)
374 |         markdown: (page.markdown?.substring(0, 2000) || '') + (page.markdown && page.markdown.length > 2000 ? '...' : ''),
375 |         // Include any other relevant data
376 |         links: page.links || [],
377 |         screenshot: page.screenshot || null
378 |       })) || []
379 |     }
380 | 
381 |     return NextResponse.json(response)
382 | 
383 |   } catch (error) {
384 |     
385 |     return NextResponse.json(
386 |       { error: error instanceof Error ? error.message : 'Failed to crawl website' },
387 |       { status: 500 }
388 |     )
389 |   }
390 | }
391 | 
392 | interface SchemaProperty {
393 |   type: 'string' | 'number' | 'boolean' | 'array'
394 |   description?: string
395 | }
396 | 
397 | interface Schema {
398 |   type: string
399 |   properties: Record<string, SchemaProperty>
400 | }
401 | 
402 | // Convert our schema format to Zod schema for Firecrawl v1
403 | // Keeping this for potential future use
404 | // function createZodSchema(schema: Schema): z.ZodObject<Record<string, unknown>> {
405 | //   const zodProperties: Record<string, z.ZodType<unknown>> = {}
406 | //   
407 | //   for (const [key, property] of Object.entries(schema.properties)) {
408 | //     // Convert spaces to underscores in field names
409 | //     const safeName = key.replace(/\s+/g, '_')
410 | //     
411 | //     switch (property.type) {
412 | //       case 'string':
413 | //         zodProperties[safeName] = z.string().nullable().optional().describe(property.description || `${key} field`)
414 | //         break
415 | //       case 'number':
416 | //         zodProperties[safeName] = z.number().nullable().optional().describe(property.description || `${key} field`)
417 | //         break
418 | //       case 'boolean':
419 | //         zodProperties[safeName] = z.boolean().nullable().optional().describe(property.description || `${key} field`)
420 | //         break
421 | //       case 'array':
422 | //         zodProperties[safeName] = z.array(z.string()).nullable().optional().describe(property.description || `${key} field`)
423 | //         break
424 | //       default:
425 | //         zodProperties[safeName] = z.string().nullable().optional().describe(property.description || `${key} field`)
426 | //     }
427 | //   }
428 | //   
429 | //   return z.object(zodProperties)
430 | // }
431 | 
432 | // Convert our schema format to JSON schema for Firecrawl
433 | function createJsonSchema(schema: Schema) {
434 |   const jsonProperties: { [key: string]: Record<string, unknown> } = {}
435 |   
436 |   for (const [key, property] of Object.entries(schema.properties)) {
437 |     switch (property.type) {
438 |       case 'string':
439 |         jsonProperties[key] = { 
440 |           type: 'string',
441 |           description: property.description || `${key} field`
442 |         }
443 |         break
444 |       case 'number':
445 |         jsonProperties[key] = { 
446 |           type: 'number',
447 |           description: property.description || `${key} field`
448 |         }
449 |         break
450 |       case 'boolean':
451 |         jsonProperties[key] = { 
452 |           type: 'boolean',
453 |           description: property.description || `${key} field`
454 |         }
455 |         break
456 |       case 'array':
457 |         jsonProperties[key] = { 
458 |           type: 'array',
459 |           items: { type: 'string' },
460 |           description: property.description || `${key} field`
461 |         }
462 |         break
463 |       default:
464 |         jsonProperties[key] = { 
465 |           type: 'string',
466 |           description: property.description || `${key} field`
467 |         }
468 |     }
469 |   }
470 |   
471 |   return {
472 |     type: 'object',
473 |     properties: jsonProperties,
474 |     required: Object.keys(schema.properties)
475 |   }
476 | }
477 | 
478 | // Intelligent schema inference based on content analysis
479 | function inferSchemaFromContent(data: { markdown?: string; html?: string }): Schema {
480 |   const markdown = data?.markdown || ''
481 |   const html = data?.html || ''
482 |   const content = markdown + ' ' + html
483 | 
484 |   const schema: Schema = {
485 |     type: 'object',
486 |     properties: {}
487 |   }
488 | 
489 |   // Common patterns to detect
490 |   const patterns = [
491 |     // E-commerce patterns
492 |     { regex: /\$[\d,]+\.?\d*/g, field: 'price', type: 'string' as const, description: 'Product price' },
493 |     { regex: /price[:\s]*\$?[\d,]+\.?\d*/gi, field: 'price', type: 'string' as const, description: 'Price information' },
494 |     
495 |     // Title patterns
496 |     { regex: /<h[1-3][^>]*>([^<]+)<\/h[1-3]>/gi, field: 'title', type: 'string' as const, description: 'Main title or heading' },
497 |     
498 |     // Description patterns
499 |     { regex: /<p[^>]*>([^<]{50,})<\/p>/gi, field: 'description', type: 'string' as const, description: 'Content description' },
500 |     
501 |     // Image patterns
502 |     { regex: /<img[^>]*src="([^"]+)"/gi, field: 'image_url', type: 'string' as const, description: 'Image URL' },
503 |     { regex: /\!\[([^\]]*)\]\(([^)]+)\)/g, field: 'image_url', type: 'string' as const, description: 'Image URL from markdown' },
504 |     
505 |     // Category patterns
506 |     { regex: /category[:\s]*([^,\n]+)/gi, field: 'category', type: 'string' as const, description: 'Product or content category' },
507 |     { regex: /tags?[:\s]*([^,\n]+)/gi, field: 'tags', type: 'array' as const, description: 'Content tags' },
508 |     
509 |     // Contact/Business patterns
510 |     { regex: /phone[:\s]*([^,\n]+)/gi, field: 'phone', type: 'string' as const, description: 'Phone number' },
511 |     { regex: /email[:\s]*([^,\s\n]+@[^,\s\n]+)/gi, field: 'email', type: 'string' as const, description: 'Email address' },
512 |     { regex: /address[:\s]*([^,\n]{10,})/gi, field: 'address', type: 'string' as const, description: 'Physical address' },
513 |     
514 |     // Date patterns
515 |     { regex: /\d{1,2}\/\d{1,2}\/\d{4}/g, field: 'date', type: 'string' as const, description: 'Date information' },
516 |     { regex: /\d{4}-\d{2}-\d{2}/g, field: 'date', type: 'string' as const, description: 'Date in ISO format' },
517 |     
518 |     // Rating patterns
519 |     { regex: /rating[:\s]*(\d+\.?\d*)/gi, field: 'rating', type: 'number' as const, description: 'Rating score' },
520 |     { regex: /(\d+\.?\d*)\s*stars?/gi, field: 'rating', type: 'number' as const, description: 'Star rating' },
521 |     
522 |     // Stock/Availability
523 |     { regex: /in\s+stock/gi, field: 'availability', type: 'string' as const, description: 'Stock availability' },
524 |     { regex: /out\s+of\s+stock/gi, field: 'availability', type: 'string' as const, description: 'Stock availability' },
525 |     
526 |     // Author/Publisher
527 |     { regex: /author[:\s]*([^,\n]+)/gi, field: 'author', type: 'string' as const, description: 'Content author' },
528 |     { regex: /by\s+([A-Z][a-z]+\s+[A-Z][a-z]+)/g, field: 'author', type: 'string' as const, description: 'Author name' },
529 |     
530 |     // ID patterns
531 |     { regex: /id[:\s]*([A-Za-z0-9-_]+)/gi, field: 'id', type: 'string' as const, description: 'Unique identifier' },
532 |     { regex: /sku[:\s]*([A-Za-z0-9-_]+)/gi, field: 'sku', type: 'string' as const, description: 'Product SKU' },
533 |   ]
534 | 
535 |   // Apply pattern matching
536 |   patterns.forEach(pattern => {
537 |     const matches = content.match(pattern.regex)
538 |     if (matches && matches.length > 0) {
539 |       schema.properties[pattern.field] = {
540 |         type: pattern.type,
541 |         description: pattern.description
542 |       }
543 |     }
544 |   })
545 | 
546 |   // Always include basic fields if not detected
547 |   if (!schema.properties.title) {
548 |     schema.properties.title = { type: 'string', description: 'Main title or name' }
549 |   }
550 |   
551 |   if (!schema.properties.description) {
552 |     schema.properties.description = { type: 'string', description: 'Main content or description' }
553 |   }
554 | 
555 |   // Content-type specific fields
556 |   if (content.toLowerCase().includes('product') || schema.properties.price) {
557 |     // E-commerce detected
558 |     if (!schema.properties.price) schema.properties.price = { type: 'string', description: 'Product price' }
559 |     if (!schema.properties.category) schema.properties.category = { type: 'string', description: 'Product category' }
560 |     if (!schema.properties.availability) schema.properties.availability = { type: 'string', description: 'Stock status' }
561 |   }
562 | 
563 |   if (content.toLowerCase().includes('article') || content.toLowerCase().includes('blog')) {
564 |     // Blog/Article detected
565 |     if (!schema.properties.author) schema.properties.author = { type: 'string', description: 'Article author' }
566 |     if (!schema.properties.date) schema.properties.date = { type: 'string', description: 'Publication date' }
567 |     if (!schema.properties.tags) schema.properties.tags = { type: 'array', description: 'Article tags' }
568 |   }
569 | 
570 |   if (content.toLowerCase().includes('contact') || schema.properties.phone || schema.properties.email) {
571 |     // Contact/Business page detected
572 |     if (!schema.properties.name) schema.properties.name = { type: 'string', description: 'Business or person name' }
573 |     if (!schema.properties.phone) schema.properties.phone = { type: 'string', description: 'Phone number' }
574 |     if (!schema.properties.email) schema.properties.email = { type: 'string', description: 'Email address' }
575 |     if (!schema.properties.address) schema.properties.address = { type: 'string', description: 'Physical address' }
576 |   }
577 | 
578 |   return schema
579 | }
580 | 
581 | // Fallback default schema
582 | function getDefaultSchema(): Schema {
583 |   return {
584 |     type: 'object',
585 |     properties: {
586 |       title: { type: 'string', description: 'Main title or heading' },
587 |       description: { type: 'string', description: 'Content description' },
588 |       url: { type: 'string', description: 'Source URL' }
589 |     }
590 |   }
591 | }
592 | 
593 | // Helper functions to extract data from markdown
594 | function extractTitleFromMarkdown(markdown: string): string {
595 |   // Look for first H1 heading
596 |   const h1Match = markdown.match(/^#\s+(.+)$/m)
597 |   if (h1Match) return h1Match[1].trim()
598 |   
599 |   // Look for first H2 heading
600 |   const h2Match = markdown.match(/^##\s+(.+)$/m)
601 |   if (h2Match) return h2Match[1].trim()
602 |   
603 |   // Take first line as title
604 |   const firstLine = markdown.split('\n')[0]
605 |   return firstLine ? firstLine.trim() : ''
606 | }
607 | 
608 | function extractDateFromMarkdown(markdown: string): string {
609 |   // Look for common date patterns
610 |   const datePatterns = [
611 |     /(\d{4}-\d{2}-\d{2})/,
612 |     /(\d{1,2}\/\d{1,2}\/\d{4})/,
613 |     /(January|February|March|April|May|June|July|August|September|October|November|December)\s+\d{1,2},?\s+\d{4}/i,
614 |     /(\d{1,2}\s+(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)\s+\d{4})/i,
615 |     /(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)\s+\d{1,2},?\s+\d{4}/i  // Added pattern for "Oct 21, 2024"
616 |   ]
617 |   
618 |   for (const pattern of datePatterns) {
619 |     const match = markdown.match(pattern)
620 |     if (match) return match[1]
621 |   }
622 |   
623 |   return ''
624 | }
625 | 
626 | function extractFieldFromMarkdown(markdown: string, fieldName: string, fieldType: string): unknown {
627 |   // Simple extraction based on field name
628 |   const fieldRegex = new RegExp(`${fieldName}[:\\s]+(.+)`, 'i')
629 |   const match = markdown.match(fieldRegex)
630 |   
631 |   if (match) {
632 |     const value = match[1].trim()
633 |     
634 |     // Convert based on type
635 |     if (fieldType === 'number') {
636 |       const num = parseFloat(value)
637 |       return isNaN(num) ? null : num
638 |     } else if (fieldType === 'boolean') {
639 |       return value.toLowerCase() === 'true' || value.toLowerCase() === 'yes'
640 |     } else if (fieldType === 'array') {
641 |       return value.split(',').map(s => s.trim())
642 |     }
643 |     
644 |     return value
645 |   }
646 |   
647 |   return fieldType === 'array' ? [] : ''
648 | }
649 | 
650 | 


--------------------------------------------------------------------------------
/src/app/page.tsx:
--------------------------------------------------------------------------------
   1 | 'use client'
   2 | 
   3 | import { useState } from 'react'
   4 | import Image from 'next/image'
   5 | import { Layout, MainContent, Footer } from '@/components/layout/layout'
   6 | import { Header } from '@/components/layout/header'
   7 | import { Hero } from '@/components/layout/hero'
   8 | import { Button } from '@/components/ui/button'
   9 | import { Input } from '@/components/ui/input'
  10 | import { Select } from '@/components/ui/select'
  11 | import { Label } from '@/components/ui/label'
  12 | import { ChevronRightIcon, ChevronDownIcon } from 'lucide-react'
  13 | 
  14 | type Step = 1 | 2 | 3 | 4
  15 | type Platform = 'wordpress' | 'shopify' | 'webflow' | 'drupal' | 'squarespace' | 'wix' | 'csv' | 'custom' | null
  16 | 
  17 | interface SchemaField {
  18 |   name: string
  19 |   type: 'string' | 'number' | 'boolean' | 'array'
  20 |   description?: string
  21 | }
  22 | 
  23 | // TreeView Component
  24 | interface TreeNode {
  25 |   urls: string[]
  26 |   children: Record<string, TreeNode>
  27 |   count: number
  28 |   path: string
  29 | }
  30 | 
  31 | // Collapsible JSON viewer component
  32 | interface CollapsibleJSONProps {
  33 |   data: unknown
  34 |   depth?: number
  35 | }
  36 | 
  37 | function CollapsibleJSON({ data, depth = 0 }: CollapsibleJSONProps) {
  38 |   const [collapsed, setCollapsed] = useState<Set<string>>(new Set())
  39 |   
  40 |   const toggleCollapse = (key: string) => {
  41 |     const newCollapsed = new Set(collapsed)
  42 |     if (newCollapsed.has(key)) {
  43 |       newCollapsed.delete(key)
  44 |     } else {
  45 |       newCollapsed.add(key)
  46 |     }
  47 |     setCollapsed(newCollapsed)
  48 |   }
  49 |   
  50 |   const renderValue = (value: unknown, key: string, parentKey: string = ''): React.ReactElement => {
  51 |     const fullKey = parentKey ? `${parentKey}.${key}` : key
  52 |     const indent = '  '.repeat(depth)
  53 |     
  54 |     if (value === null) return <span className="text-orange-400">null</span>
  55 |     if (value === undefined) return <span className="text-orange-400">undefined</span>
  56 |     
  57 |     if (typeof value === 'string') {
  58 |       // Check if string is long (more than 160 chars for better UX)
  59 |       if (value.length > 160) {
  60 |         const isCollapsed = collapsed.has(fullKey)
  61 |         // Show first line or 160 chars when collapsed
  62 |         const firstLineEnd = value.indexOf('\n')
  63 |         const truncateAt = firstLineEnd > 0 && firstLineEnd < 160 ? firstLineEnd : 160
  64 |         
  65 |         return (
  66 |           <span>
  67 |             {isCollapsed ? (
  68 |               <>
  69 |                 <span className="text-white">&quot;{value.substring(0, truncateAt)}...&quot;</span>
  70 |                 <button
  71 |                   onClick={() => toggleCollapse(fullKey)}
  72 |                   className="ml-2 text-zinc-500 hover:text-zinc-300 text-[10px] font-mono"
  73 |                 >
  74 |                   [+{value.length - truncateAt} chars]
  75 |                 </button>
  76 |               </>
  77 |             ) : (
  78 |               <div className="inline-block align-top">
  79 |                 <span className="text-white">&quot;</span>
  80 |                 <div className="inline-block max-w-xl overflow-x-hidden whitespace-pre-wrap break-words align-top text-white">
  81 |                   {value}
  82 |                 </div>
  83 |                 <span className="text-white">&quot;</span>
  84 |                 <button
  85 |                   onClick={() => toggleCollapse(fullKey)}
  86 |                   className="ml-2 text-zinc-500 hover:text-zinc-300 text-[10px] font-mono align-top"
  87 |                 >
  88 |                   [collapse]
  89 |                 </button>
  90 |               </div>
  91 |             )}
  92 |           </span>
  93 |         )
  94 |       }
  95 |       return <span className="text-white">&quot;{value}&quot;</span>
  96 |     }
  97 |     
  98 |     if (typeof value === 'number') return <span className="text-blue-400">{value}</span>
  99 |     if (typeof value === 'boolean') return <span className="text-purple-400">{String(value)}</span>
 100 |     
 101 |     if (Array.isArray(value)) {
 102 |       const isCollapsed = collapsed.has(fullKey)
 103 |       if (value.length === 0) return <span className="text-zinc-400">[]</span>
 104 |       
 105 |       return (
 106 |         <span>
 107 |           <button
 108 |             onClick={() => toggleCollapse(fullKey)}
 109 |             className="text-zinc-500 hover:text-zinc-300 mr-1"
 110 |           >
 111 |             {isCollapsed ? <ChevronRightIcon className="w-3 h-3 inline" /> : <ChevronDownIcon className="w-3 h-3 inline" />}
 112 |           </button>
 113 |           <span className="text-zinc-400">[</span>
 114 |           {!isCollapsed && (
 115 |             <>
 116 |               {value.map((item, i) => (
 117 |                 <div key={i} className="ml-4">
 118 |                   {indent}  {renderValue(item, String(i), fullKey)}
 119 |                   {i < value.length - 1 && <span className="text-zinc-400">,</span>}
 120 |                 </div>
 121 |               ))}
 122 |               <div>{indent}</div>
 123 |             </>
 124 |           )}
 125 |           {isCollapsed && <span className="text-zinc-500">...{value.length} items</span>}
 126 |           <span className="text-zinc-400">]</span>
 127 |         </span>
 128 |       )
 129 |     }
 130 |     
 131 |     if (typeof value === 'object' && value !== null) {
 132 |       const isCollapsed = collapsed.has(fullKey)
 133 |       const entries = Object.entries(value)
 134 |       if (entries.length === 0) return <span className="text-zinc-400">{'{}'}</span>
 135 |       
 136 |       return (
 137 |         <span>
 138 |           <button
 139 |             onClick={() => toggleCollapse(fullKey)}
 140 |             className="text-zinc-500 hover:text-zinc-300 mr-1"
 141 |           >
 142 |             {isCollapsed ? <ChevronRightIcon className="w-3 h-3 inline" /> : <ChevronDownIcon className="w-3 h-3 inline" />}
 143 |           </button>
 144 |           <span className="text-zinc-400">{'{'}</span>
 145 |           {!isCollapsed && (
 146 |             <>
 147 |               {entries.map(([k, v], i) => (
 148 |                 <div key={k} className="ml-4">
 149 |                   {indent}  <span className="text-orange-400">&quot;{k}&quot;</span>
 150 |                   <span className="text-zinc-400">: </span>
 151 |                   {renderValue(v, k, fullKey)}
 152 |                   {i < entries.length - 1 && <span className="text-zinc-400">,</span>}
 153 |                 </div>
 154 |               ))}
 155 |               <div>{indent}</div>
 156 |             </>
 157 |           )}
 158 |           {isCollapsed && <span className="text-zinc-500">...{entries.length} properties</span>}
 159 |           <span className="text-zinc-400">{'}'}</span>
 160 |         </span>
 161 |       )
 162 |     }
 163 |     
 164 |     return <span className="text-zinc-300">{String(value)}</span>
 165 |   }
 166 |   
 167 |   return <div className="font-mono text-xs">{renderValue(data, 'root')}</div>
 168 | }
 169 | 
 170 | interface TreeViewProps {
 171 |   tree: Record<string, TreeNode>
 172 |   selectedUrls: string[]
 173 |   onSelectionChange: (urls: string[]) => void
 174 |   onMapNode: (path: string) => Promise<void>
 175 |   mappingNodes: Set<string>
 176 |   expandedNodes: Set<string>
 177 |   onToggleNode: (path: string) => void
 178 | }
 179 | 
 180 | function TreeView({ tree, selectedUrls, onSelectionChange, onMapNode, mappingNodes, expandedNodes, onToggleNode }: TreeViewProps) {
 181 | 
 182 |   const toggleNode = (path: string) => {
 183 |     onToggleNode(path)
 184 |   }
 185 | 
 186 |   const getNodeUrls = (node: TreeNode): string[] => {
 187 |     const urls: string[] = [...node.urls]
 188 |     Object.values(node.children).forEach(child => {
 189 |       urls.push(...getNodeUrls(child))
 190 |     })
 191 |     return urls
 192 |   }
 193 | 
 194 |   const isNodeSelected = (node: TreeNode): 'full' | 'partial' | 'none' => {
 195 |     const nodeUrls = getNodeUrls(node)
 196 |     const selectedCount = nodeUrls.filter(url => selectedUrls.includes(url)).length
 197 |     
 198 |     if (selectedCount === 0) return 'none'
 199 |     if (selectedCount === nodeUrls.length) return 'full'
 200 |     return 'partial'
 201 |   }
 202 | 
 203 |   const toggleNodeSelection = (node: TreeNode) => {
 204 |     const nodeUrls = getNodeUrls(node)
 205 |     const isSelected = isNodeSelected(node) === 'full'
 206 |     
 207 |     if (isSelected) {
 208 |       onSelectionChange(selectedUrls.filter(url => !nodeUrls.includes(url)))
 209 |     } else {
 210 |       onSelectionChange([...new Set([...selectedUrls, ...nodeUrls])])
 211 |     }
 212 |   }
 213 | 
 214 |   const renderNode = (name: string, node: TreeNode, level: number = 0) => {
 215 |     const hasChildren = Object.keys(node.children).length > 0
 216 |     const isExpanded = expandedNodes.has(node.path)
 217 |     const selectionState = isNodeSelected(node)
 218 |     const isMapping = mappingNodes.has(node.path)
 219 |     
 220 |     // For root level, show the full domain name
 221 |     const displayName = level === 0 ? name : `/${name}`
 222 |     
 223 |     return (
 224 |       <div key={node.path} className={level === 0 ? '' : 'ml-6'}>
 225 |         <div className="flex items-center gap-2 py-1.5 px-2 hover:bg-orange-50 rounded group">
 226 |           {hasChildren && (
 227 |             <button
 228 |               onClick={() => toggleNode(node.path)}
 229 |               className="w-4 h-4 flex items-center justify-center text-zinc-400 hover:text-zinc-600"
 230 |             >
 231 |               <svg className={`w-3 h-3 transition-transform ${isExpanded ? 'rotate-90' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
 232 |                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
 233 |               </svg>
 234 |             </button>
 235 |           )}
 236 |           {!hasChildren && <div className="w-4" />}
 237 |           
 238 |           <label className="flex items-center gap-2 flex-1 cursor-pointer">
 239 |             <input
 240 |               type="checkbox"
 241 |               checked={selectionState === 'full'}
 242 |               ref={input => {
 243 |                 if (input) input.indeterminate = selectionState === 'partial'
 244 |               }}
 245 |               onChange={() => toggleNodeSelection(node)}
 246 |               className="custom-checkbox"
 247 |             />
 248 |             <span className="text-sm font-medium text-zinc-700">{displayName}</span>
 249 |             {isMapping ? (
 250 |               <span className="text-xs text-orange-600 bg-orange-100 px-2 py-0.5 rounded-full animate-pulse">
 251 |                 mapping...
 252 |               </span>
 253 |             ) : (
 254 |               <span className="text-xs text-zinc-500 bg-zinc-100 px-2 py-0.5 rounded-full whitespace-nowrap">
 255 |                 {node.count} {node.count === 1 ? 'page' : 'pages'}
 256 |               </span>
 257 |             )}
 258 |           </label>
 259 |           
 260 |           {/* Map button - show for any path that could be a directory */}
 261 |           {!isMapping && !node.path.match(/\.(html?|xml|json|txt|pdf|jpg|jpeg|png|gif|svg|css|js)$/i) && (
 262 |             <button
 263 |               onClick={(e) => {
 264 |                 e.stopPropagation()
 265 |                 onMapNode(node.path)
 266 |               }}
 267 |               className="opacity-0 group-hover:opacity-100 transition-opacity text-xs px-2 py-1 bg-orange-500 text-white rounded hover:bg-orange-600"
 268 |               title={`Map all pages under ${displayName}`}
 269 |             >
 270 |               Map
 271 |             </button>
 272 |           )}
 273 |         </div>
 274 |         
 275 |         {hasChildren && isExpanded && (
 276 |           <div>
 277 |             {Object.entries(node.children)
 278 |               .sort(([a], [b]) => a.localeCompare(b))
 279 |               .map(([childName, childNode]) => 
 280 |                 renderNode(childName, childNode, level + 1)
 281 |               )}
 282 |           </div>
 283 |         )}
 284 |       </div>
 285 |     )
 286 |   }
 287 | 
 288 |   return (
 289 |     <div className="p-2">
 290 |       {Object.entries(tree).map(([name, node]) => renderNode(name, node))}
 291 |     </div>
 292 |   )
 293 | }
 294 | 
 295 | export default function ContentMigratorPage() {
 296 |   const [currentStep, setCurrentStep] = useState<Step>(1)
 297 |   const [sourceUrl, setSourceUrl] = useState('https://firecrawl.dev')
 298 |   const [selectedPlatform, setSelectedPlatform] = useState<Platform>('webflow')
 299 |   const [exportFormat, setExportFormat] = useState('webflow')
 300 |   const [showSuccess, setShowSuccess] = useState(false)
 301 |   const [showUrlInput, setShowUrlInput] = useState(false)
 302 |   const [showExportOptions, setShowExportOptions] = useState(false)
 303 |   const [loading, setLoading] = useState(false)
 304 |   const [loadingText, setLoadingText] = useState('')
 305 |   const [schemaFields, setSchemaFields] = useState<SchemaField[]>([
 306 |     { name: 'title', type: 'string' },
 307 |     { name: 'date', type: 'string' },
 308 |     { name: '', type: 'string' }
 309 |   ])
 310 | 
 311 |   const moveToStep = (step: Step) => {
 312 |     setCurrentStep(step)
 313 |   }
 314 | 
 315 |   const [crawlData, setCrawlData] = useState<Record<string, unknown>[]>([])
 316 |   const [saveRawResults] = useState(true)
 317 |   const [mapResults, setMapResults] = useState<string[]>([])
 318 |   const [selectedUrls, setSelectedUrls] = useState<string[]>([])
 319 |   const [isMapping, setIsMapping] = useState(false)
 320 |   const [mapProgress, setMapProgress] = useState('')
 321 |   const [mappingNodes, setMappingNodes] = useState<Set<string>>(new Set())
 322 |   const [isTransitioning, setIsTransitioning] = useState(false)
 323 |   const [fieldPage, setFieldPage] = useState(0)
 324 |   const fieldsPerPage = 8
 325 |   const [viewMode, setViewMode] = useState<'list' | 'tree'>('tree')
 326 |   const [batchSize, setBatchSize] = useState(50)
 327 |   const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set())
 328 | 
 329 |   // Toggle node expansion
 330 |   const toggleNode = (path: string) => {
 331 |     setExpandedNodes(prev => {
 332 |       const newSet = new Set(prev)
 333 |       if (newSet.has(path)) {
 334 |         newSet.delete(path)
 335 |       } else {
 336 |         newSet.add(path)
 337 |       }
 338 |       return newSet
 339 |     })
 340 |   }
 341 | 
 342 |   // Map a specific node/path
 343 |   const handleMapNode = async (path: string) => {
 344 |     // Add to mapping set
 345 |     setMappingNodes(prev => new Set([...prev, path]))
 346 |     
 347 |     try {
 348 |       const response = await fetch('/api/map', {
 349 |         method: 'POST',
 350 |         headers: {
 351 |           'Content-Type': 'application/json',
 352 |         },
 353 |         body: JSON.stringify({
 354 |           url: path,
 355 |           limit: 200
 356 |         })
 357 |       })
 358 |       
 359 |       const result = await response.json()
 360 |       
 361 |       if (result.success && Array.isArray(result.urls)) {
 362 |         // Filter URLs that start with the mapped path
 363 |         const pathUrls = result.urls.filter((url: string) => {
 364 |           try {
 365 |             const urlObj = new URL(url)
 366 |             const urlPath = urlObj.pathname
 367 |             const mappedPath = new URL(path).pathname
 368 |             return urlPath.startsWith(mappedPath)
 369 |           } catch {
 370 |             return false
 371 |           }
 372 |         })
 373 |         
 374 |         // If we only found one URL (the path itself), still process it
 375 |         // This allows recursive exploration even when a path has no immediate children
 376 |         const urlsToAdd = pathUrls.length > 0 ? pathUrls : [path]
 377 |         
 378 |         // Merge with existing results
 379 |         setMapResults(prev => {
 380 |           const combined = [...prev, ...urlsToAdd]
 381 |           return [...new Set(combined)] // Remove duplicates
 382 |         })
 383 |         
 384 |         // Auto-select new URLs under this path
 385 |         setSelectedUrls(prev => {
 386 |           const combined = [...prev, ...urlsToAdd]
 387 |           return [...new Set(combined)]
 388 |         })
 389 |         
 390 |         // Auto-expand the mapped node
 391 |         setExpandedNodes(prev => new Set([...prev, path]))
 392 |         
 393 |         // Recursively expand all parent nodes to ensure the new content is visible
 394 |         const expandParents = (nodePath: string) => {
 395 |           const parts = nodePath.split('/').filter(Boolean)
 396 |           let currentPath = ''
 397 |           const pathsToExpand: string[] = []
 398 |           
 399 |           for (const part of parts) {
 400 |             currentPath = currentPath ? `${currentPath}/${part}` : `https://${part}`
 401 |             pathsToExpand.push(currentPath)
 402 |           }
 403 |           
 404 |           setExpandedNodes(prev => new Set([...prev, ...pathsToExpand]))
 405 |         }
 406 |         
 407 |         expandParents(path)
 408 |       } else {
 409 |         throw new Error(result.error || 'Failed to map path')
 410 |       }
 411 |     } catch (error) {
 412 |       alert(error instanceof Error ? error.message : 'Failed to map path')
 413 |     } finally {
 414 |       // Remove from mapping set
 415 |       setMappingNodes(prev => {
 416 |         const newSet = new Set(prev)
 417 |         newSet.delete(path)
 418 |         return newSet
 419 |       })
 420 |     }
 421 |   }
 422 | 
 423 |   // Build tree structure from URLs
 424 |   const buildUrlTree = (urls: string[]) => {
 425 |     const tree: Record<string, TreeNode> = {}
 426 |     
 427 |     // Group URLs by normalized domain first
 428 |     const urlsByDomain: Record<string, string[]> = {}
 429 |     
 430 |     urls.forEach(url => {
 431 |       try {
 432 |         const urlObj = new URL(url)
 433 |         // Normalize domain (remove www. for grouping)
 434 |         const normalizedDomain = urlObj.hostname.replace(/^www\./, '')
 435 |         const domainKey = `${urlObj.protocol}//${normalizedDomain}`
 436 |         
 437 |         if (!urlsByDomain[domainKey]) {
 438 |           urlsByDomain[domainKey] = []
 439 |         }
 440 |         urlsByDomain[domainKey].push(url)
 441 |       } catch {
 442 |         // Invalid URL
 443 |       }
 444 |     })
 445 |     
 446 |     // Build tree for each domain group
 447 |     Object.entries(urlsByDomain).forEach(([domainKey, domainUrls]) => {
 448 |       const domainNode: TreeNode = {
 449 |         urls: [],
 450 |         children: {},
 451 |         count: 0,
 452 |         path: domainKey
 453 |       }
 454 |       
 455 |       domainUrls.forEach(url => {
 456 |         try {
 457 |           const urlObj = new URL(url)
 458 |           const pathParts = urlObj.pathname.split('/').filter(Boolean)
 459 |           
 460 |           // If it's the root path, count it for the domain
 461 |           if (pathParts.length === 0) {
 462 |             domainNode.urls.push(url)
 463 |           } else {
 464 |             // Build nested structure
 465 |             let current = domainNode.children
 466 |             let currentPath = domainKey
 467 |             
 468 |             pathParts.forEach((part, index) => {
 469 |               currentPath += '/' + part
 470 |               if (!current[part]) {
 471 |                 current[part] = { 
 472 |                   urls: [], 
 473 |                   children: {},
 474 |                   count: 0,
 475 |                   path: currentPath
 476 |                 }
 477 |               }
 478 |               
 479 |               // If it's the last part, add the URL
 480 |               if (index === pathParts.length - 1) {
 481 |                 current[part].urls.push(url)
 482 |               }
 483 |               
 484 |               current = current[part].children
 485 |             })
 486 |           }
 487 |         } catch {
 488 |           // Invalid URL
 489 |         }
 490 |       })
 491 |       
 492 |       // Calculate total count for domain
 493 |       domainNode.count = domainUrls.length
 494 |       tree[domainKey] = domainNode
 495 |     })
 496 |     
 497 |     // Recalculate counts for all nodes
 498 |     const updateCounts = (node: TreeNode) => {
 499 |       let totalCount = node.urls.length
 500 |       Object.values(node.children).forEach((child: TreeNode) => {
 501 |         updateCounts(child)
 502 |         totalCount += child.count
 503 |       })
 504 |       node.count = totalCount
 505 |     }
 506 |     
 507 |     Object.values(tree).forEach(node => updateCounts(node))
 508 |     
 509 |     // Debug: Log the tree structure
 510 |     const totalUrls = urls.length
 511 |     let treeTotal = 0
 512 |     Object.values(tree).forEach(node => {
 513 |       treeTotal += node.count
 514 |     })
 515 |     
 516 |     // URL count validation
 517 |     
 518 |     return tree
 519 |   }
 520 | 
 521 |   const analyzeWebsite = async () => {
 522 |     if (!sourceUrl) {
 523 |       alert('Please enter a URL')
 524 |       return
 525 |     }
 526 | 
 527 |     // Start fade transition
 528 |     setIsTransitioning(true)
 529 |     
 530 |     // Wait for fade out, then start mapping
 531 |     setTimeout(async () => {
 532 |       moveToStep(2)
 533 |       setIsTransitioning(false)
 534 |       
 535 |       // Automatically start mapping
 536 |       setIsMapping(true)
 537 |       setMapProgress('Mapping site structure...')
 538 |       
 539 |       try {
 540 |         const response = await fetch('/api/map', {
 541 |           method: 'POST',
 542 |           headers: {
 543 |             'Content-Type': 'application/json',
 544 |           },
 545 |           body: JSON.stringify({
 546 |             url: sourceUrl,
 547 |             limit: 200
 548 |           })
 549 |         })
 550 |         
 551 |         const result = await response.json()
 552 |         
 553 |         if (result.success && Array.isArray(result.urls)) {
 554 |           
 555 |           // Group URLs by their base path (without query params) to see duplicates
 556 |           const urlGroups: Record<string, string[]> = {}
 557 |           result.urls.forEach((url: string) => {
 558 |             try {
 559 |               const urlObj = new URL(url)
 560 |               const baseUrl = `${urlObj.origin}${urlObj.pathname}`
 561 |               if (!urlGroups[baseUrl]) {
 562 |                 urlGroups[baseUrl] = []
 563 |               }
 564 |               urlGroups[baseUrl].push(url)
 565 |             } catch {
 566 |               // Invalid URL
 567 |             }
 568 |           })
 569 |           
 570 |           // Log URLs that have duplicates
 571 |           const duplicates = Object.entries(urlGroups).filter(([, urls]) => urls.length > 1)
 572 |           
 573 |           // Filter out duplicate URLs that only differ by query parameters
 574 |           const uniqueUrls = Array.from(new Set(
 575 |             result.urls.map((url: string) => {
 576 |               try {
 577 |                 const urlObj = new URL(url)
 578 |                 // Remove query parameters for deduplication
 579 |                 return `${urlObj.origin}${urlObj.pathname}`
 580 |               } catch {
 581 |                 return url
 582 |               }
 583 |             })
 584 |           ))
 585 |           
 586 |           
 587 |           setMapResults(uniqueUrls as string[])
 588 |           // Start with no URLs selected
 589 |           setSelectedUrls([])
 590 |           
 591 |           // Auto-expand root domains
 592 |           const tree = buildUrlTree(uniqueUrls as string[])
 593 |           const rootPaths = Object.values(tree).map(node => node.path)
 594 |           setExpandedNodes(new Set(rootPaths))
 595 |           
 596 |           // Clear loading state immediately
 597 |           setIsMapping(false)
 598 |           setMapProgress('')
 599 |         } else {
 600 |           throw new Error(result.error || 'Failed to map website')
 601 |         }
 602 |       } catch (error) {
 603 |         alert(error instanceof Error ? error.message : 'Failed to map website')
 604 |         setIsMapping(false)
 605 |         setMapProgress('')
 606 |       }
 607 |     }, 500)
 608 |   }
 609 | 
 610 |   const addSchemaField = () => {
 611 |     setSchemaFields([...schemaFields, { name: '', type: 'string' }])
 612 |     // If we're adding the 9th field, move to the next page
 613 |     const newFieldCount = schemaFields.length + 1
 614 |     if (newFieldCount > fieldsPerPage && (newFieldCount - 1) % fieldsPerPage === 0) {
 615 |       setFieldPage(Math.floor((newFieldCount - 1) / fieldsPerPage))
 616 |     }
 617 |   }
 618 | 
 619 |   const removeSchemaField = (index: number) => {
 620 |     const newFields = schemaFields.filter((_, i) => i !== index)
 621 |     // Always ensure at least one empty field at the end
 622 |     if (newFields.length === 0 || newFields[newFields.length - 1].name !== '') {
 623 |       newFields.push({ name: '', type: 'string' })
 624 |     }
 625 |     setSchemaFields(newFields)
 626 |   }
 627 | 
 628 |   const updateSchemaField = (index: number, field: Partial<SchemaField>) => {
 629 |     const newFields = [...schemaFields]
 630 |     newFields[index] = { ...newFields[index], ...field }
 631 |     setSchemaFields(newFields)
 632 |   }
 633 | 
 634 |   const applyTemplate = (templateName: string) => {
 635 |     const templates: Record<string, SchemaField[]> = {
 636 |       shopify: [
 637 |         { name: 'title', type: 'string' },
 638 |         { name: 'description', type: 'string' },
 639 |         { name: 'price', type: 'string' },
 640 |         { name: 'vendor', type: 'string' },
 641 |         { name: 'product_type', type: 'string' },
 642 |         { name: 'tags', type: 'string' },
 643 |         { name: 'image_url', type: 'string' },
 644 |         { name: 'sku', type: 'string' },
 645 |         { name: 'inventory_quantity', type: 'number' },
 646 |         { name: '', type: 'string' } // Empty field for custom additions
 647 |       ],
 648 |       wordpress: [
 649 |         { name: 'title', type: 'string' },
 650 |         { name: 'content', type: 'string' },
 651 |         { name: 'author', type: 'string' },
 652 |         { name: 'publish_date', type: 'string' },
 653 |         { name: 'category', type: 'string' },
 654 |         { name: 'tags', type: 'string' },
 655 |         { name: 'featured_image', type: 'string' },
 656 |         { name: '', type: 'string' }
 657 |       ],
 658 |       woocommerce: [
 659 |         { name: 'title', type: 'string' },
 660 |         { name: 'description', type: 'string' },
 661 |         { name: 'price', type: 'string' },
 662 |         { name: 'regular_price', type: 'string' },
 663 |         { name: 'sale_price', type: 'string' },
 664 |         { name: 'sku', type: 'string' },
 665 |         { name: 'stock_quantity', type: 'number' },
 666 |         { name: 'category', type: 'string' },
 667 |         { name: 'image_url', type: 'string' },
 668 |         { name: '', type: 'string' }
 669 |       ],
 670 |       blog: [
 671 |         { name: 'title', type: 'string' },
 672 |         { name: 'content', type: 'string' },
 673 |         { name: 'date', type: 'string' },
 674 |         { name: 'author', type: 'string' },
 675 |         { name: 'category', type: 'string' },
 676 |         { name: 'tags', type: 'string' },
 677 |         { name: '', type: 'string' }
 678 |       ],
 679 |       ecommerce: [
 680 |         { name: 'title', type: 'string' },
 681 |         { name: 'description', type: 'string' },
 682 |         { name: 'price', type: 'string' },
 683 |         { name: 'image_url', type: 'string' },
 684 |         { name: 'category', type: 'string' },
 685 |         { name: 'availability', type: 'string' },
 686 |         { name: '', type: 'string' }
 687 |       ]
 688 |     }
 689 | 
 690 |     const template = templates[templateName]
 691 |     if (template) {
 692 |       setSchemaFields(template)
 693 |       setFieldPage(0) // Reset to first page
 694 |     }
 695 |   }
 696 | 
 697 |   const selectPlatform = (platform: Platform) => {
 698 |     setSelectedPlatform(platform)
 699 |     // Set appropriate export format based on platform
 700 |     switch (platform) {
 701 |       case 'wordpress':
 702 |         setExportFormat('wordpress')
 703 |         break
 704 |       case 'shopify':
 705 |         setExportFormat('shopify')
 706 |         break
 707 |       case 'webflow':
 708 |         setExportFormat('webflow')
 709 |         break
 710 |       case 'drupal':
 711 |         setExportFormat('drupal')
 712 |         break
 713 |       case 'csv':
 714 |         setExportFormat('csv')
 715 |         break
 716 |       case 'squarespace':
 717 |         setExportFormat('squarespace')
 718 |         break
 719 |       case 'wix':
 720 |         setExportFormat('wix')
 721 |         break
 722 |       case 'custom':
 723 |         setExportFormat('json')
 724 |         break
 725 |     }
 726 |     // Don't auto-advance - let user see the preview and decide
 727 |   }
 728 | 
 729 |   const startCrawl = async () => {
 730 |     if (!sourceUrl) {
 731 |       alert('Please enter a URL')
 732 |       return
 733 |     }
 734 | 
 735 |     // Check if URLs are selected
 736 |     if (selectedUrls.length === 0) {
 737 |       alert('Please map the site and select URLs to scrape')
 738 |       return
 739 |     }
 740 | 
 741 |     setLoading(true)
 742 |     
 743 |     let loadingInterval: NodeJS.Timeout | null = null
 744 |     
 745 |     setLoadingText(`Starting batch scrape of ${selectedUrls.length} pages...`)
 746 |     
 747 |     // Update loading text periodically
 748 |     loadingInterval = setInterval(() => {
 749 |       const messages = [
 750 |         `Extracting content from ${selectedUrls.length} pages...`,
 751 |         `Processing website data...`,
 752 |         `Applying schema to extracted content...`,
 753 |         `Organizing structured data...`
 754 |       ]
 755 |       const randomMessage = messages[Math.floor(Math.random() * messages.length)]
 756 |       setLoadingText(randomMessage)
 757 |     }, 3000)
 758 | 
 759 |     try {
 760 |       // Add AbortController for timeout
 761 |       const controller = new AbortController();
 762 |       const timeoutId = setTimeout(() => controller.abort(), 180000); // 3 minute timeout
 763 |       
 764 |       const response = await fetch('/api/crawl', {
 765 |         method: 'POST',
 766 |         headers: {
 767 |           'Content-Type': 'application/json',
 768 |         },
 769 |         body: JSON.stringify({
 770 |           url: sourceUrl,
 771 |           schema: schemaFields.filter(f => f.name).length > 0 ? getSchema() : undefined,
 772 |           autoInfer: schemaFields.filter(f => f.name).length === 0, // Auto-infer if no manual schema
 773 |           limit: selectedUrls.length,
 774 |           includeRaw: saveRawResults,
 775 |           strategy: 'mapCrawl',
 776 |           selectedUrls: selectedUrls
 777 |         }),
 778 |         signal: controller.signal
 779 |       })
 780 |       
 781 |       clearTimeout(timeoutId)
 782 | 
 783 |       const result = await response.json()
 784 | 
 785 |       if (result.success) {
 786 |         setCrawlData(result.data)
 787 |         if (loadingInterval) {
 788 |           clearInterval(loadingInterval)
 789 |         }
 790 |         setLoading(false)
 791 |         moveToStep(3)
 792 |       } else {
 793 |         throw new Error(result.error || 'Failed to crawl')
 794 |       }
 795 |     } catch (error) {
 796 |       if (loadingInterval) {
 797 |         clearInterval(loadingInterval)
 798 |       }
 799 |       setLoading(false)
 800 |       if (error instanceof Error && error.name === 'AbortError') {
 801 |         alert('Crawl is taking longer than expected. Please try with fewer pages or check the URL.')
 802 |       } else {
 803 |         alert(error instanceof Error ? error.message : 'Failed to crawl website')
 804 |       }
 805 |     }
 806 |   }
 807 | 
 808 |   const startExport = async () => {
 809 |     if (crawlData.length === 0) {
 810 |       alert('Please crawl a website first')
 811 |       return
 812 |     }
 813 | 
 814 |     setLoading(true)
 815 |     setLoadingText('Formatting data for export...')
 816 |     
 817 |     setTimeout(async () => {
 818 |       // Check if we need to create multiple files
 819 |       const fileCount = Math.ceil(crawlData.length / batchSize)
 820 |       
 821 |       if (fileCount === 1) {
 822 |         // Single file export
 823 |         const exportData = formatExportData(crawlData, exportFormat)
 824 |         downloadFile(exportData, exportFormat)
 825 |       } else {
 826 |         // Multiple files - create a ZIP
 827 |         await downloadBatchedFiles(crawlData, batchSize, exportFormat)
 828 |       }
 829 |       
 830 |       setLoading(false)
 831 |       setShowSuccess(true)
 832 |     }, 1500)
 833 |   }
 834 | 
 835 |   const getExportPreview = (data: Record<string, unknown>[], format: string) => {
 836 |     const previewData = data // Show all items in preview
 837 |     
 838 |     switch (format) {
 839 |       case 'json':
 840 |       case 'webflow':
 841 |         const jsonData = format === 'json' ? previewData : { items: previewData }
 842 |         
 843 |         return (
 844 |           <div className="text-zinc-300 overflow-y-auto">
 845 |             <CollapsibleJSON data={jsonData} />
 846 |           </div>
 847 |         )
 848 |       case 'csv':
 849 |       case 'woocommerce':
 850 |       case 'shopify':
 851 |       case 'drupal':
 852 |       case 'wix':
 853 |         // For CSV preview, work directly with the data instead of parsing CSV string
 854 |         const headers = Object.keys(previewData[0] || {})
 855 |         
 856 |         return (
 857 |           <div className="overflow-x-hidden overflow-y-hidden">
 858 |             <table className="w-full font-mono text-xs table-fixed">
 859 |               <thead>
 860 |                 <tr className="border-b border-zinc-700">
 861 |                   {headers.map((header, i) => (
 862 |                     <th key={i} className={`text-left px-3 py-2 text-orange-400 font-medium whitespace-nowrap ${
 863 |                       header === 'content' ? 'w-1/2' : 'w-1/6'
 864 |                     }`}>
 865 |                       {header}
 866 |                     </th>
 867 |                   ))}
 868 |                 </tr>
 869 |               </thead>
 870 |               <tbody>
 871 |                 {previewData.map((item, i) => (
 872 |                   <tr key={i} className="border-b border-zinc-800 hover:bg-zinc-900/50">
 873 |                     {headers.map((header, j) => {
 874 |                       const value = item[header]
 875 |                       let displayValue = String(value || '-')
 876 |                       
 877 |                       if (typeof value === 'string') {
 878 |                         // Clean up the content: remove newlines, excessive spaces, and truncate
 879 |                         displayValue = value
 880 |                           .replace(/\r?\n/g, ' ')  // Replace newlines with spaces
 881 |                           .replace(/\s+/g, ' ')     // Replace multiple spaces with single space
 882 |                           .trim()                   // Remove leading/trailing spaces
 883 |                         
 884 |                         // Truncate long content
 885 |                         if (displayValue.length > 50) {
 886 |                           displayValue = displayValue.substring(0, 47) + '...'
 887 |                         }
 888 |                       }
 889 |                       
 890 |                       return (
 891 |                         <td key={j} className="px-3 py-2 text-zinc-300">
 892 |                           <div className="max-w-[250px] truncate whitespace-nowrap" title={String(value || '')}>
 893 |                             {displayValue}
 894 |                           </div>
 895 |                         </td>
 896 |                       )
 897 |                     })}
 898 |                   </tr>
 899 |                 ))}
 900 |               </tbody>
 901 |             </table>
 902 |           </div>
 903 |         )
 904 |       case 'wordpress':
 905 |       case 'squarespace':
 906 |         const xml = generateWordPressXML(previewData)
 907 |         return (
 908 |           <pre className="text-white font-mono text-xs overflow-x-hidden">
 909 |             <code>{xml}</code>
 910 |           </pre>
 911 |         )
 912 |       default:
 913 |         return (
 914 |           <div className="text-zinc-300 overflow-y-auto">
 915 |             <CollapsibleJSON data={previewData} />
 916 |           </div>
 917 |         )
 918 |     }
 919 |   }
 920 | 
 921 |   const formatExportData = (data: Record<string, unknown>[], format: string) => {
 922 |     switch (format) {
 923 |       case 'json':
 924 |         return JSON.stringify(data, null, 2)
 925 |       case 'shopify':
 926 |         return formatShopifyCSV(data)
 927 |       case 'csv':
 928 |       case 'woocommerce':
 929 |       case 'drupal':
 930 |       case 'wix':
 931 |         return convertToCSV(data)
 932 |       case 'wordpress':
 933 |       case 'squarespace':
 934 |         return generateWordPressXML(data)
 935 |       case 'webflow':
 936 |         return JSON.stringify({ items: data }, null, 2)
 937 |       default:
 938 |         return JSON.stringify(data, null, 2)
 939 |     }
 940 |   }
 941 | 
 942 |   const convertToCSV = (data: Record<string, unknown>[]) => {
 943 |     if (data.length === 0) return ''
 944 |     
 945 |     const headers = Object.keys(data[0]).join(',')
 946 |     const rows = data.map(item => 
 947 |       Object.values(item).map(value => {
 948 |         if (typeof value === 'string') {
 949 |           // Replace newlines with spaces and escape quotes
 950 |           const cleaned = value.replace(/\r?\n/g, ' ').replace(/"/g, '""')
 951 |           return `"${cleaned}"`
 952 |         }
 953 |         return value
 954 |       }).join(',')
 955 |     )
 956 |     
 957 |     return [headers, ...rows].join('\n')
 958 |   }
 959 | 
 960 |   const formatShopifyCSV = (data: Record<string, unknown>[]) => {
 961 |     if (data.length === 0) return ''
 962 |     
 963 |     // Shopify required columns in specific order
 964 |     const headers = [
 965 |       'Handle', 'Title', 'Body (HTML)', 'Vendor', 'Type', 'Tags', 'Published',
 966 |       'Option1 Name', 'Option1 Value', 'Variant SKU', 'Variant Grams',
 967 |       'Variant Inventory Tracker', 'Variant Inventory Qty', 'Variant Inventory Policy',
 968 |       'Variant Fulfillment Service', 'Variant Price', 'Variant Compare At Price',
 969 |       'Variant Requires Shipping', 'Variant Taxable', 'Variant Barcode',
 970 |       'Image Src', 'Image Position', 'Image Alt Text', 'Gift Card',
 971 |       'SEO Title', 'SEO Description', 'Variant Weight Unit', 'Status'
 972 |     ]
 973 |     
 974 |     const rows = data.map((item, index) => {
 975 |       // Generate handle from title
 976 |       const title = String(item.title || `Product ${index + 1}`)
 977 |       const handle = title.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '')
 978 |       
 979 |       // Map scraped data to Shopify fields
 980 |       const row: Record<string, string> = {
 981 |         'Handle': handle,
 982 |         'Title': title,
 983 |         'Body (HTML)': String(item.description || item.content || ''),
 984 |         'Vendor': String(item.vendor || 'Default Vendor'),
 985 |         'Type': String(item.product_type || item.type || ''),
 986 |         'Tags': String(item.tags || ''),
 987 |         'Published': 'TRUE',
 988 |         'Option1 Name': 'Title',
 989 |         'Option1 Value': 'Default Title',
 990 |         'Variant SKU': String(item.sku || ''),
 991 |         'Variant Grams': String(item.weight || '0'),
 992 |         'Variant Inventory Tracker': 'shopify',
 993 |         'Variant Inventory Qty': String(item.inventory_quantity || item.stock || '0'),
 994 |         'Variant Inventory Policy': 'deny',
 995 |         'Variant Fulfillment Service': 'manual',
 996 |         'Variant Price': String(item.price || '0'),
 997 |         'Variant Compare At Price': String(item.compare_at_price || ''),
 998 |         'Variant Requires Shipping': 'TRUE',
 999 |         'Variant Taxable': 'TRUE',
1000 |         'Variant Barcode': String(item.barcode || ''),
1001 |         'Image Src': String(item.image_url || item.image || ''),
1002 |         'Image Position': item.image_url || item.image ? '1' : '',
1003 |         'Image Alt Text': item.image_url || item.image ? title : '',
1004 |         'Gift Card': 'FALSE',
1005 |         'SEO Title': title.substring(0, 70),
1006 |         'SEO Description': String(item.description || item.content || '').substring(0, 320),
1007 |         'Variant Weight Unit': 'g',
1008 |         'Status': 'active'
1009 |       }
1010 |       
1011 |       // Return values in correct order
1012 |       return headers.map(header => {
1013 |         const value = row[header]
1014 |         if (value.includes('"') || value.includes(',') || value.includes('\n')) {
1015 |           return `"${value.replace(/"/g, '""').replace(/\r?\n/g, ' ')}"`
1016 |         }
1017 |         return value
1018 |       }).join(',')
1019 |     })
1020 |     
1021 |     return [headers.join(','), ...rows].join('\n')
1022 |   }
1023 | 
1024 |   const generateWordPressXML = (data: Record<string, unknown>[]) => {
1025 |     // Format current date in WordPress format (YYYY-MM-DD HH:MM:SS)
1026 |     const now = new Date()
1027 |     const formatWPDate = (date: Date) => {
1028 |       const year = date.getFullYear()
1029 |       const month = String(date.getMonth() + 1).padStart(2, '0')
1030 |       const day = String(date.getDate()).padStart(2, '0')
1031 |       const hours = String(date.getHours()).padStart(2, '0')
1032 |       const minutes = String(date.getMinutes()).padStart(2, '0')
1033 |       const seconds = String(date.getSeconds()).padStart(2, '0')
1034 |       return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
1035 |     }
1036 |     
1037 |     const currentDate = formatWPDate(now)
1038 |     
1039 |     const items = data.map((item, index) => {
1040 |       // Extract content, fallback to description if content not available
1041 |       const content = item.content || item.description || ''
1042 |       const title = item.title || `Post ${index + 1}`
1043 |       
1044 |       // Use current date/time for all posts since the scraped dates are in various formats
1045 |       const postDate = currentDate
1046 |       const postDateGMT = currentDate // For simplicity, using same as local time
1047 |       
1048 |       return `
1049 |     <item>
1050 |       <title><![CDATA[${title}]]></title>
1051 |       <link>https://example.com/?p=${index + 1}</link>
1052 |       <pubDate>${now.toUTCString()}</pubDate>
1053 |       <dc:creator><![CDATA[admin]]></dc:creator>
1054 |       <guid isPermaLink="false">https://example.com/?p=${index + 1}</guid>
1055 |       <description></description>
1056 |       <content:encoded><![CDATA[${content}]]></content:encoded>
1057 |       <excerpt:encoded><![CDATA[]]></excerpt:encoded>
1058 |       <wp:post_id>${index + 1}</wp:post_id>
1059 |       <wp:post_date><![CDATA[${postDate}]]></wp:post_date>
1060 |       <wp:post_date_gmt><![CDATA[${postDateGMT}]]></wp:post_date_gmt>
1061 |       <wp:post_modified><![CDATA[${postDate}]]></wp:post_modified>
1062 |       <wp:post_modified_gmt><![CDATA[${postDateGMT}]]></wp:post_modified_gmt>
1063 |       <wp:comment_status><![CDATA[closed]]></wp:comment_status>
1064 |       <wp:ping_status><![CDATA[closed]]></wp:ping_status>
1065 |       <wp:post_name><![CDATA[${(title as string).toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '')}]]></wp:post_name>
1066 |       <wp:status><![CDATA[publish]]></wp:status>
1067 |       <wp:post_parent>0</wp:post_parent>
1068 |       <wp:menu_order>0</wp:menu_order>
1069 |       <wp:post_type><![CDATA[post]]></wp:post_type>
1070 |       <wp:post_password><![CDATA[]]></wp:post_password>
1071 |       <wp:is_sticky>0</wp:is_sticky>
1072 |       ${Object.entries(item).filter(([key]) => !['title', 'content', 'description', 'date'].includes(key)).map(([key, value]) => `
1073 |       <wp:postmeta>
1074 |         <wp:meta_key><![CDATA[${key}]]></wp:meta_key>
1075 |         <wp:meta_value><![CDATA[${value}]]></wp:meta_value>
1076 |       </wp:postmeta>`).join('')}
1077 |       ${item.date ? `
1078 |       <wp:postmeta>
1079 |         <wp:meta_key><![CDATA[original_date]]></wp:meta_key>
1080 |         <wp:meta_value><![CDATA[${item.date}]]></wp:meta_value>
1081 |       </wp:postmeta>` : ''}
1082 |     </item>`
1083 |     }).join('')
1084 | 
1085 |     return `<?xml version="1.0" encoding="UTF-8"?>
1086 | <!-- This is a WordPress eXtended RSS file generated by Firecrawl Content Migrator -->
1087 | <!-- It contains information about your site's posts, pages, comments, categories, and other content -->
1088 | <!-- You may use this file to transfer that content from one site to another -->
1089 | <!-- This file is not intended to serve as a complete backup of your site -->
1090 | 
1091 | <!-- generator="Firecrawl Content Migrator" created="${currentDate}" -->
1092 | <rss version="2.0"
1093 |   xmlns:excerpt="http://wordpress.org/export/1.2/excerpt/"
1094 |   xmlns:content="http://purl.org/rss/1.0/modules/content/"
1095 |   xmlns:wfw="http://wellformedweb.org/CommentAPI/"
1096 |   xmlns:dc="http://purl.org/dc/elements/1.1/"
1097 |   xmlns:wp="http://wordpress.org/export/1.2/"
1098 | >
1099 |   <channel>
1100 |     <title>Imported Content</title>
1101 |     <link>https://example.com</link>
1102 |     <description>Content imported from Firecrawl</description>
1103 |     <pubDate>${new Date().toUTCString()}</pubDate>
1104 |     <language>en-US</language>
1105 |     <wp:wxr_version>1.2</wp:wxr_version>
1106 |     <wp:base_site_url>https://example.com</wp:base_site_url>
1107 |     <wp:base_blog_url>https://example.com</wp:base_blog_url>
1108 |     
1109 |     <wp:author>
1110 |       <wp:author_id>1</wp:author_id>
1111 |       <wp:author_login><![CDATA[admin]]></wp:author_login>
1112 |       <wp:author_email><![CDATA[admin@example.com]]></wp:author_email>
1113 |       <wp:author_display_name><![CDATA[Admin]]></wp:author_display_name>
1114 |       <wp:author_first_name><![CDATA[]]></wp:author_first_name>
1115 |       <wp:author_last_name><![CDATA[]]></wp:author_last_name>
1116 |     </wp:author>
1117 |     
1118 |     <generator>https://firecrawl.dev/?v=1.0</generator>
1119 | ${items}
1120 |   </channel>
1121 | </rss>`
1122 |   }
1123 | 
1124 |   const downloadFile = (content: string, format: string, filename?: string) => {
1125 |     const blob = new Blob([content], { type: 'text/plain' })
1126 |     const url = URL.createObjectURL(blob)
1127 |     const a = document.createElement('a')
1128 |     a.href = url
1129 |     
1130 |     const extensions: Record<string, string> = {
1131 |       json: 'json',
1132 |       csv: 'csv',
1133 |       wordpress: 'xml',
1134 |       woocommerce: 'csv',
1135 |       shopify: 'csv',
1136 |       webflow: 'json',
1137 |       drupal: 'csv',
1138 |       bigcommerce: 'csv',
1139 |       squarespace: 'xml',
1140 |       wix: 'csv'
1141 |     }
1142 |     
1143 |     a.download = filename || `export-${Date.now()}.${extensions[format] || 'txt'}`
1144 |     document.body.appendChild(a)
1145 |     a.click()
1146 |     document.body.removeChild(a)
1147 |     URL.revokeObjectURL(url)
1148 |   }
1149 | 
1150 |   const downloadBatchedFiles = async (data: Record<string, unknown>[], size: number, format: string) => {
1151 |     const JSZip = (await import('jszip')).default
1152 |     const zip = new JSZip()
1153 |     
1154 |     const batches = []
1155 |     for (let i = 0; i < data.length; i += size) {
1156 |       batches.push(data.slice(i, i + size))
1157 |     }
1158 | 
1159 |     const extensions: Record<string, string> = {
1160 |       json: 'json',
1161 |       csv: 'csv',
1162 |       wordpress: 'xml',
1163 |       woocommerce: 'csv',
1164 |       shopify: 'csv',
1165 |       webflow: 'json',
1166 |       drupal: 'csv',
1167 |       squarespace: 'xml',
1168 |       wix: 'csv'
1169 |     }
1170 | 
1171 |     const timestamp = Date.now()
1172 |     const ext = extensions[format] || 'txt'
1173 | 
1174 |     // Add each batch to the ZIP file
1175 |     for (let i = 0; i < batches.length; i++) {
1176 |       const batch = batches[i]
1177 |       const exportData = formatExportData(batch, format)
1178 |       const filename = `export-part${i + 1}.${ext}`
1179 |       
1180 |       zip.file(filename, exportData)
1181 |     }
1182 |     
1183 |     // Generate and download the ZIP file
1184 |     const zipContent = await zip.generateAsync({ type: 'blob' })
1185 |     const zipUrl = URL.createObjectURL(zipContent)
1186 |     const a = document.createElement('a')
1187 |     a.href = zipUrl
1188 |     a.download = `export-${timestamp}.zip`
1189 |     document.body.appendChild(a)
1190 |     a.click()
1191 |     document.body.removeChild(a)
1192 |     URL.revokeObjectURL(zipUrl)
1193 |   }
1194 | 
1195 | 
1196 |   const getSchema = () => {
1197 |     const properties: Record<string, { type: string }> = {}
1198 |     schemaFields.forEach(field => {
1199 |       if (field.name) {
1200 |         // Convert spaces to underscores in field names for JSON compatibility
1201 |         const safeName = field.name.replace(/\s+/g, '_')
1202 |         properties[safeName] = { type: field.type }
1203 |       }
1204 |     })
1205 |     return {
1206 |       type: 'object',
1207 |       properties
1208 |     }
1209 |   }
1210 | 
1211 |   return (
1212 |     <Layout>
1213 |       <Header ctaHref="https://github.com/new?template_name=firecrawl-content-migrator&template_owner=mendableai" />
1214 |       
1215 |       <Hero 
1216 |         title="Firecrawl Content Migrator"
1217 |         subtitle="Turn any website into structured CMS-ready data in seconds"
1218 |       />
1219 |       
1220 |       {/* Animated Transformation Visualization */}
1221 |       <div className={`pb-6 px-4 transition-opacity duration-500 ${currentStep >= 2 || isTransitioning ? 'opacity-0' : 'opacity-100'} ${currentStep >= 2 ? 'hidden' : ''}`}>
1222 |         <div className="max-w-7xl mx-auto">
1223 |           <div className="bg-zinc-900 rounded-2xl p-8 shadow-2xl">
1224 |             <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
1225 |               {/* Crawling Stage */}
1226 |               <div className="animate-fade-in">
1227 |                 <div className="text-xs text-zinc-400 mb-4 font-semibold uppercase tracking-wider">Step 1: Map & Select Pages</div>
1228 |                 <div className="bg-black rounded-xl p-4 border border-zinc-800">
1229 |                   <div className="h-48 relative overflow-hidden">
1230 |                     <div className="absolute inset-0 animate-crawl-urls">
1231 |                       <div className="space-y-2 font-mono text-xs">
1232 |                         <div className="text-orange-600 font-bold mb-1">Mapping site structure...</div>
1233 |                         <div className="text-zinc-500">► https://firecrawl.dev</div>
1234 |                         <div className="text-zinc-400 ml-4">├─ /blog</div>
1235 |                         <div className="text-orange-500 ml-8">├─ /2025/openai-launches-gpt5</div>
1236 |                         <div className="text-orange-500 ml-8">├─ /2025/apple-vision-pro-2</div>
1237 |                         <div className="text-orange-500 ml-8">├─ /2025/tesla-robotaxi-fleet</div>
1238 |                         <div className="text-zinc-400 ml-4">├─ /docs</div>
1239 |                         <div className="text-zinc-400 ml-4">├─ /pricing</div>
1240 |                         <div className="text-zinc-400 ml-4">└─ /api</div>
1241 |                         <div className="text-orange-600 font-bold mt-2">5 pages selected</div>
1242 |                       </div>
1243 |                     </div>
1244 |                   </div>
1245 |                   <div className="mt-4 flex items-center justify-between">
1246 |                     <span className="text-sm font-bold text-white">Selected Pages: <span className="text-orange-500">5</span></span>
1247 |                     <div className="flex items-center gap-2">
1248 |                       <div className="w-2 h-2 bg-orange-500 rounded-full animate-pulse"></div>
1249 |                       <span className="text-xs text-zinc-500">Mapping</span>
1250 |                     </div>
1251 |                   </div>
1252 |                 </div>
1253 |               </div>
1254 |               
1255 |               {/* Extract Stage */}
1256 |               <div className="animate-fade-in" style={{ animationDelay: '0.7s' }}>
1257 |                 <div className="text-xs text-zinc-400 mb-4 font-semibold uppercase tracking-wider">Step 2: Batch Scrape & Extract</div>
1258 |                 <div className="bg-black rounded-xl p-4 border border-zinc-800">
1259 |                   <div className="h-48 relative overflow-hidden">
1260 |                     <div className="absolute inset-0 animate-extract-data p-2">
1261 |                       <div className="relative h-full">
1262 |                         <div className="absolute inset-0 opacity-0 animate-fade-cycle-4">
1263 |                           <div className="font-mono text-sm space-y-2">
1264 |                             <div><span className="text-orange-500 font-bold">title:</span> <span className="text-white">&quot;OpenAI Launches GPT-5&quot;</span></div>
1265 |                             <div><span className="text-orange-500 font-bold">date:</span> <span className="text-white">&quot;2025-01-22&quot;</span></div>
1266 |                             <div><span className="text-orange-500 font-bold">content:</span> <span className="text-white">&quot;Major breakthrough in...&quot;</span></div>
1267 |                           </div>
1268 |                         </div>
1269 |                         <div className="absolute inset-0 opacity-0 animate-fade-cycle-4" style={{ animationDelay: '2s' }}>
1270 |                           <div className="font-mono text-sm space-y-2">
1271 |                             <div><span className="text-orange-500 font-bold">title:</span> <span className="text-white">&quot;Apple Vision Pro 2 Revealed&quot;</span></div>
1272 |                             <div><span className="text-orange-500 font-bold">date:</span> <span className="text-white">&quot;2025-01-21&quot;</span></div>
1273 |                             <div><span className="text-orange-500 font-bold">content:</span> <span className="text-white">&quot;Revolutionary AR headset...&quot;</span></div>
1274 |                           </div>
1275 |                         </div>
1276 |                       <div className="absolute inset-0 opacity-0 animate-fade-cycle-4" style={{ animationDelay: '4s' }}>
1277 |                         <div className="font-mono text-sm space-y-1">
1278 |                           <div className="text-orange-500">title: <span className="text-white">&quot;Tesla Robotaxi Fleet Live&quot;</span></div>
1279 |                           <div className="text-orange-500">date: <span className="text-white">&quot;2025-01-20&quot;</span></div>
1280 |                           <div className="text-orange-500">content: <span className="text-white">&quot;Autonomous vehicles hit...&quot;</span></div>
1281 |                         </div>
1282 |                       </div>
1283 |                       <div className="absolute inset-0 opacity-0 animate-fade-cycle-4" style={{ animationDelay: '6s' }}>
1284 |                         <div className="font-mono text-sm space-y-1">
1285 |                           <div className="text-orange-500">title: <span className="text-white">&quot;Meta AI Assistant Update&quot;</span></div>
1286 |                           <div className="text-orange-500">date: <span className="text-white">&quot;2025-01-19&quot;</span></div>
1287 |                           <div className="text-orange-500">content: <span className="text-white">&quot;New features include...&quot;</span></div>
1288 |                         </div>
1289 |                       </div>
1290 |                       </div>
1291 |                     </div>
1292 |                   </div>
1293 |                 </div>
1294 |                   <div className="mt-4 flex items-center justify-between">
1295 |                     <span className="text-sm font-bold text-white">Extracted: <span className="text-orange-500 tabular-nums">5</span> pages</span>
1296 |                     <div className="flex items-center gap-2">
1297 |                       <div className="w-2 h-2 bg-orange-500 rounded-full animate-pulse"></div>
1298 |                       <span className="text-xs text-zinc-500">Batch Processing</span>
1299 |                     </div>
1300 |                   </div>
1301 |                 </div>
1302 |               </div>
1303 |        
1304 |               <div className="flex items-center justify-between mb-4">
1305 |                 <div className="text-xs text-zinc-400 font-semibold uppercase tracking-wider">Step 3: Export</div>
1306 |                 <div className="flex items-center gap-2">
1307 |                   <span className="text-sm font-bold text-white">Exported: <span className="text-orange-500 tabular-nums">127</span></span>
1308 |                   <span className="text-xs text-zinc-500">• JSON • XML • CSV</span>
1309 |                 </div>
1310 |               </div>
1311 |                 <div className="bg-black rounded-xl p-4 border border-zinc-800">
1312 |                   <div className="h-32 relative overflow-hidden mb-2">
1313 |                   <div className="absolute inset-0 animate-rotate-formats">
1314 |                     <div className="relative h-full">
1315 |                       {/* JSON Structure */}
1316 |                       <div className="absolute inset-0 flex items-start gap-4 opacity-0">
1317 |                         <div className="flex-1 font-mono text-xs">
1318 |                           <div className="text-zinc-400">{'[{'}</div>
1319 |                           <div className="pl-2"><span className="text-orange-500 font-bold">&quot;title&quot;</span><span className="text-zinc-400">:</span> <span className="text-white">&quot;OpenAI Launches GPT-5&quot;</span><span className="text-zinc-400">,</span></div>
1320 |                           <div className="pl-2"><span className="text-orange-500 font-bold">&quot;date&quot;</span><span className="text-zinc-400">:</span> <span className="text-white">&quot;2025-01-22&quot;</span><span className="text-zinc-400">,</span></div>
1321 |                           <div className="pl-2"><span className="text-orange-500 font-bold">&quot;content&quot;</span><span className="text-zinc-400">:</span> <span className="text-white">&quot;Major breakthrough in...&quot;</span><span className="text-zinc-400">,</span></div>
1322 |                           <div className="pl-2"><span className="text-orange-500 font-bold">&quot;author&quot;</span><span className="text-zinc-400">:</span> <span className="text-white">&quot;Sarah Chen&quot;</span></div>
1323 |                           <div className="text-zinc-400">{'}'}{']'}</div>
1324 |                         </div>
1325 |                       </div>
1326 |                       
1327 |                       {/* WordPress XML */}
1328 |                       <div className="absolute inset-0 flex items-start gap-4 opacity-0">
1329 |                         <div className="flex-1 font-mono text-xs">
1330 |                           <div className="text-orange-600">&lt;rss version=&quot;2.0&quot;&gt;</div>
1331 |                           <div className="pl-2 text-orange-600">&lt;channel&gt;</div>
1332 |                           <div className="pl-4 text-orange-600">&lt;item&gt;</div>
1333 |                           <div className="pl-6 text-white">&lt;title&gt;OpenAI Launches GPT-5&lt;/title&gt;</div>
1334 |                           <div className="pl-6 text-white">&lt;wp:post_date&gt;2025-01-22&lt;/wp:post_date&gt;</div>
1335 |                           <div className="pl-6 text-white">&lt;content:encoded&gt;Major breakthrough...&lt;/content:encoded&gt;</div>
1336 |                           <div className="pl-4 text-orange-600">&lt;/item&gt;</div>
1337 |                         </div>
1338 |                       </div>
1339 |                       
1340 |                       {/* Shopify CSV */}
1341 |                       <div className="absolute inset-0 flex items-start gap-4 opacity-0">
1342 |                         <div className="flex-1 font-mono text-xs">
1343 |                           <div className="text-orange-500 font-bold text-xs">Title,Date,Content,Tags,Author</div>
1344 |                           <div className="text-white text-xs">&quot;OpenAI Launches GPT-5&quot;,&quot;2025-01-22&quot;,&quot;Major breakthrough...&quot;,&quot;AI|Technology&quot;,&quot;Sarah Chen&quot;</div>
1345 |                           <div className="text-white text-xs">&quot;Apple Vision Pro 2&quot;,&quot;2025-01-21&quot;,&quot;Revolutionary AR...&quot;,&quot;AR|Apple&quot;,&quot;John Doe&quot;</div>
1346 |                         </div>
1347 |                       </div>
1348 |                       
1349 |                       {/* Webflow JSON */}
1350 |                       <div className="absolute inset-0 flex items-start gap-4 opacity-0">
1351 |                         <div className="flex-1 font-mono text-xs">
1352 |                           <div className="text-orange-600">{'{'}</div>
1353 |                           <div className="pl-2 text-orange-600">&quot;items&quot;<span className="text-white">: {'[{'}</span></div>
1354 |                           <div className="pl-4 text-orange-600">&quot;name&quot;<span className="text-white">: &quot;OpenAI Launches GPT-5&quot;,</span></div>
1355 |                           <div className="pl-4 text-orange-600">&quot;slug&quot;<span className="text-white">: &quot;openai-launches-gpt-5&quot;,</span></div>
1356 |                           <div className="pl-4 text-orange-600">&quot;date&quot;<span className="text-white">: &quot;2025-01-22&quot;,</span></div>
1357 |                           <div className="pl-4 text-orange-600">&quot;content&quot;<span className="text-white">: &quot;Major breakthrough...&quot;</span></div>
1358 |                           <div className="pl-2">{'}'}{']'}</div>
1359 |                         </div>
1360 |                       </div>
1361 |                     </div>
1362 |                   </div>
1363 |                   
1364 |                 </div>
1365 |             </div>
1366 |           </div>
1367 |         </div>
1368 |       </div>
1369 |       
1370 |       <MainContent maxWidth="7xl" className="py-4">
1371 |         <div className="space-y-8">
1372 |           {/* Main Panel - Configuration */}
1373 |           <div className="">
1374 |             {/* Step 1: Analyze Website */}
1375 |             {currentStep === 1 && (
1376 |               <div className="max-w-2xl mx-auto">
1377 |                 <div className="flex justify-center">
1378 |                   <div className={`transition-all duration-500 ease-in-out ${!showUrlInput ? 'w-auto' : 'w-full max-w-2xl'}`}>
1379 |                     {!showUrlInput ? (
1380 |                       <Button
1381 |                         variant="code"
1382 |                         onClick={() => setShowUrlInput(true)}
1383 |                         className="px-8 animate-fade-in"
1384 |                       >
1385 |                         Get Started
1386 |                       </Button>
1387 |                     ) : (
1388 |                       <div className="bg-zinc-200 rounded-full p-0.5 animate-fade-in">
1389 |                         <div className="relative flex items-center">
1390 |                           <Input
1391 |                             id="sourceUrl"
1392 |                             type="url"
1393 |                             value={sourceUrl}
1394 |                             onChange={(e) => setSourceUrl(e.target.value)}
1395 |                             placeholder="https://example.com/blog"
1396 |                             className="flex-1 h-12 text-base px-6 pr-16 bg-white rounded-full border-0 focus:ring-2 focus:ring-orange-500"
1397 |                             onKeyPress={(e) => e.key === 'Enter' && analyzeWebsite()}
1398 |                             autoFocus
1399 |                           />
1400 |                           <button 
1401 |                             onClick={analyzeWebsite}
1402 |                             className="absolute right-1 w-11 h-11 flex items-center justify-center rounded-full bg-orange-500 text-white hover:bg-orange-600 transition-colors"
1403 |                           >
1404 |                             <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
1405 |                               <path d="M3 8h10m0 0l-3.5-3.5M13 8l-3.5 3.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
1406 |                             </svg>
1407 |                           </button>
1408 |                         </div>
1409 |                       </div>
1410 |                     )}
1411 |                   </div>
1412 |                 </div>
1413 |               </div>
1414 |             )}
1415 | 
1416 |             {/* Step 2: Customize Schema */}
1417 |             {currentStep === 2 && loading && (
1418 |               <div className="animate-fade-in">
1419 |                 
1420 |                 <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
1421 |                   {/* Skeleton for Select Target Platform */}
1422 |                   <div className="bg-zinc-50 rounded-xl p-6">
1423 |                     <h3 className="font-semibold mb-4">Select Target Platform</h3>
1424 |                   <div className="grid grid-cols-2 gap-3">
1425 |                     {[...Array(8)].map((_, i) => (
1426 |                       <div key={i} className="p-6 bg-white border border-zinc-200 rounded-lg relative overflow-hidden">
1427 |                         <div className="relative flex justify-center items-center h-16">
1428 |                           <div className="h-10 w-16 bg-zinc-200 rounded animate-pulse"></div>
1429 |                           <span className="absolute bottom-0 right-0 text-[10px] font-mono font-medium text-zinc-300">.---</span>
1430 |                         </div>
1431 |                       </div>
1432 |                     ))}
1433 |                   </div>
1434 |                   
1435 |                   <div className="mt-8 flex justify-center gap-3">
1436 |                     <div className="h-10 bg-zinc-200 rounded-lg w-32 animate-pulse"></div>
1437 |                     <div className="h-10 bg-orange-200 rounded-lg w-40 animate-pulse"></div>
1438 |                   </div>
1439 |                   </div>
1440 |                 
1441 |                 {/* Skeleton for Export Preview */}
1442 |                 <div className="bg-zinc-50 rounded-xl p-6 flex flex-col">
1443 |                   <div className="flex items-center justify-between mb-4">
1444 |                     <h3 className="font-semibold">Export Preview</h3>
1445 |                     <span className="text-sm font-medium text-zinc-600">Items: <span className="inline-block h-4 bg-zinc-200 rounded w-8 animate-pulse"></span></span>
1446 |                   </div>
1447 |                   
1448 |                   <div className="flex-1">
1449 |                     <div className="bg-zinc-950 rounded-lg border border-zinc-800 p-4 h-full overflow-hidden relative">
1450 |                       {/* Loading text overlay */}
1451 |                       <div className="absolute inset-0 flex items-center justify-center z-10">
1452 |                         <p className="text-zinc-400 text-sm font-medium animate-pulse">
1453 |                           {loadingText}
1454 |                         </p>
1455 |                       </div>
1456 |                       
1457 |                       {/* Skeleton lines */}
1458 |                       <div className="space-y-2 h-full">
1459 |                         <div className="h-2 bg-zinc-800 rounded w-full animate-pulse"></div>
1460 |                         <div className="h-2 bg-zinc-800 rounded w-4/5 animate-pulse" style={{animationDelay: '50ms'}}></div>
1461 |                         <div className="h-2 bg-zinc-800 rounded w-5/6 animate-pulse" style={{animationDelay: '100ms'}}></div>
1462 |                         <div className="h-2 bg-zinc-800 rounded w-3/4 animate-pulse" style={{animationDelay: '150ms'}}></div>
1463 |                         <div className="h-2 bg-zinc-800 rounded w-full animate-pulse" style={{animationDelay: '200ms'}}></div>
1464 |                         <div className="h-2 bg-zinc-800 rounded w-2/3 animate-pulse" style={{animationDelay: '250ms'}}></div>
1465 |                         <div className="h-2 bg-zinc-800 rounded w-5/6 animate-pulse" style={{animationDelay: '300ms'}}></div>
1466 |                         <div className="h-2 bg-zinc-800 rounded w-3/5 animate-pulse" style={{animationDelay: '350ms'}}></div>
1467 |                         <div className="h-2 bg-zinc-800 rounded w-full animate-pulse" style={{animationDelay: '650ms'}}></div>
1468 |                         <div className="h-2 bg-zinc-800 rounded w-4/5 animate-pulse" style={{animationDelay: '700ms'}}></div>
1469 |                         <div className="h-2 bg-zinc-800 rounded w-3/5 animate-pulse" style={{animationDelay: '750ms'}}></div>
1470 |                         <div className="h-2 bg-zinc-800 rounded w-5/6 animate-pulse" style={{animationDelay: '800ms'}}></div>
1471 |                         <div className="h-2 bg-zinc-800 rounded w-2/3 animate-pulse" style={{animationDelay: '850ms'}}></div>
1472 |                       </div>
1473 |                     </div>
1474 |                   </div>
1475 |                 </div>
1476 |               </div>
1477 |               </div>
1478 |             )}
1479 |             
1480 |             {/* Step 2: Customize Schema */}
1481 |             {currentStep === 2 && !loading && (
1482 |               <div className="space-y-8 animate-fade-in">
1483 |                 <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-stretch">
1484 |                   {/* Left Column - Data Fields */}
1485 |                   <div className="bg-zinc-50 rounded-xl p-6">
1486 |                     <div className="flex items-center justify-between mb-4">
1487 |                       <div>
1488 |                         <h3 className="font-semibold text-lg">Data Fields</h3>
1489 |                         <div className="mt-2">
1490 |                           <select
1491 |                             onChange={(e) => {
1492 |                               const templateName = e.target.value
1493 |                               if (templateName) {
1494 |                                 applyTemplate(templateName)
1495 |                                 e.target.value = '' // Reset select
1496 |                               }
1497 |                             }}
1498 |                             className="text-sm bg-white border border-zinc-300 rounded-lg px-3 py-1.5 text-zinc-700 hover:border-orange-400 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-20 cursor-pointer"
1499 |                           >
1500 |                             <option value="">Apply Template...</option>
1501 |                             <option value="shopify">Shopify Products</option>
1502 |                             <option value="wordpress">WordPress Posts</option>
1503 |                             <option value="woocommerce">WooCommerce Products</option>
1504 |                             <option value="blog">Blog Posts</option>
1505 |                             <option value="ecommerce">E-commerce Generic</option>
1506 |                           </select>
1507 |                         </div>
1508 |                       </div>
1509 |                       <span className="text-sm text-zinc-500">{schemaFields.length} fields</span>
1510 |                     </div>
1511 |                     
1512 |                     <div className="bg-white rounded-lg border border-zinc-300 overflow-hidden">
1513 |                       <table className="w-full border-collapse">
1514 |                         <thead>
1515 |                           <tr className="bg-zinc-100 border-b border-zinc-300">
1516 |                             <th className="text-left px-3 py-2 text-xs font-semibold text-zinc-600 uppercase tracking-wider">Field Name</th>
1517 |                             <th className="text-left px-3 py-2 text-xs font-semibold text-zinc-600 uppercase tracking-wider">Type</th>
1518 |                             <th className="w-8"></th>
1519 |                           </tr>
1520 |                         </thead>
1521 |                         <tbody>
1522 |                           {schemaFields
1523 |                             .slice(fieldPage * fieldsPerPage, (fieldPage + 1) * fieldsPerPage)
1524 |                             .map((field, index) => {
1525 |                               const actualIndex = fieldPage * fieldsPerPage + index
1526 |                               return (
1527 |                                 <tr key={actualIndex} className="border-b border-zinc-200 group">
1528 |                                   <td className="p-0 border-r border-zinc-200">
1529 |                                     <input
1530 |                                       type="text"
1531 |                                       placeholder="field_name"
1532 |                                       value={field.name}
1533 |                                       onChange={(e) => {
1534 |                                         updateSchemaField(actualIndex, { name: e.target.value })
1535 |                                         // Auto-add new field when typing in the last empty field
1536 |                                         if (actualIndex === schemaFields.length - 1 && e.target.value && !schemaFields[actualIndex].name) {
1537 |                                           addSchemaField()
1538 |                                         }
1539 |                                       }}
1540 |                                       onFocus={(e) => {
1541 |                                         // Ensure the input is properly focused
1542 |                                         e.target.select()
1543 |                                       }}
1544 |                                       className="w-full px-3 py-2 text-sm bg-transparent outline-none focus:bg-orange-50 transition-colors focus:ring-2 focus:ring-orange-500 focus:ring-opacity-20"
1545 |                                     />
1546 |                                   </td>
1547 |                                   <td className="p-0 border-r border-zinc-200">
1548 |                                     {field.name ? (
1549 |                                       <select
1550 |                                         value={field.type}
1551 |                                         onChange={(e) => updateSchemaField(actualIndex, { type: e.target.value as SchemaField['type'] })}
1552 |                                         className="w-full px-3 py-2 text-sm bg-transparent outline-none focus:bg-orange-50 transition-colors cursor-pointer"
1553 |                                       >
1554 |                                         <option value="string">Text</option>
1555 |                                         <option value="number">Number</option>
1556 |                                         <option value="boolean">True/False</option>
1557 |                                         <option value="array">List</option>
1558 |                                       </select>
1559 |                                     ) : (
1560 |                                       <div className="h-[38px]"></div>
1561 |                                     )}
1562 |                                   </td>
1563 |                                   <td className="p-0 text-center">
1564 |                                     {field.name ? (
1565 |                                       <button
1566 |                                         onClick={() => removeSchemaField(actualIndex)}
1567 |                                         className="text-zinc-400 hover:text-red-500 transition-colors text-xs px-2 py-2"
1568 |                                         title="Remove field"
1569 |                                       >
1570 |                                         ✕
1571 |                                       </button>
1572 |                                     ) : (
1573 |                                       <div className="h-[38px]"></div>
1574 |                                     )}
1575 |                                   </td>
1576 |                                 </tr>
1577 |                               )
1578 |                             })}
1579 |                           {/* Empty rows to maintain consistent height */}
1580 |                           {schemaFields.slice(fieldPage * fieldsPerPage, (fieldPage + 1) * fieldsPerPage).length < fieldsPerPage && 
1581 |                             Array.from({ length: fieldsPerPage - schemaFields.slice(fieldPage * fieldsPerPage, (fieldPage + 1) * fieldsPerPage).length }).map((_, idx) => (
1582 |                               <tr key={`empty-${idx}`} className="border-b border-zinc-200">
1583 |                                 <td className="p-0 border-r border-zinc-200 h-[38px]"></td>
1584 |                                 <td className="p-0 border-r border-zinc-200"></td>
1585 |                                 <td className="p-0"></td>
1586 |                               </tr>
1587 |                             ))}
1588 |                         </tbody>
1589 |                       </table>
1590 |                       
1591 |                       {schemaFields.length > fieldsPerPage && (
1592 |                         <div className="flex items-center justify-between px-4 py-3 bg-zinc-50 border-t border-zinc-200">
1593 |                           <span className="text-sm text-zinc-600">
1594 |                             Showing {fieldPage * fieldsPerPage + 1}-{Math.min((fieldPage + 1) * fieldsPerPage, schemaFields.length)} of {schemaFields.length}
1595 |                           </span>
1596 |                           <div className="flex gap-2">
1597 |                             <Button
1598 |                               variant="secondary"
1599 |                               size="default"
1600 |                               onClick={() => setFieldPage(Math.max(0, fieldPage - 1))}
1601 |                               disabled={fieldPage === 0}
1602 |                               className="bg-zinc-900 hover:bg-zinc-800 text-white"
1603 |                             >
1604 |                               Previous
1605 |                             </Button>
1606 |                             <Button
1607 |                               variant="secondary"
1608 |                               size="default"
1609 |                               onClick={() => setFieldPage(Math.min(Math.ceil(schemaFields.length / fieldsPerPage) - 1, fieldPage + 1))}
1610 |                               disabled={(fieldPage + 1) * fieldsPerPage >= schemaFields.length}
1611 |                               className="bg-zinc-900 hover:bg-zinc-800 text-white"
1612 |                             >
1613 |                               Next
1614 |                             </Button>
1615 |                           </div>
1616 |                         </div>
1617 |                       )}
1618 |                     </div>
1619 |                     
1620 |                   </div>
1621 |                   {/* Right Column - Page Selection */}
1622 |                   <div className="bg-zinc-50 rounded-xl p-6 flex flex-col h-full">
1623 |                     <div className="flex items-center gap-3 mb-4">
1624 |                       <h3 className="font-semibold text-lg">Page Selection</h3>
1625 |                       {isMapping && (
1626 |                         <div className="inline-flex items-center gap-2 text-orange-600">
1627 |                           <div className="w-1.5 h-1.5 bg-orange-600 rounded-full animate-pulse"></div>
1628 |                           <p className="text-sm font-medium">{mapProgress || 'Mapping site structure...'}</p>
1629 |                         </div>
1630 |                       )}
1631 |                     </div>
1632 |                     
1633 |                     {/* Map Results Table */}
1634 |                     {mapResults.length > 0 && (
1635 |                       <div className="mb-6">
1636 |                         <div className="flex items-center justify-between mb-4">
1637 |                           <h4 className="font-semibold">Select Pages</h4>
1638 |                           <div className="flex items-center gap-4">
1639 |                             <span className="text-sm text-zinc-500">Found {mapResults.length} pages</span>
1640 |                             <div className="flex bg-zinc-100 rounded-lg p-0.5">
1641 |                               <button
1642 |                                 onClick={() => setViewMode('list')}
1643 |                                 className={`px-3 py-1 text-xs font-medium rounded transition-all ${
1644 |                                   viewMode === 'list' 
1645 |                                     ? 'bg-white text-zinc-900 shadow-sm' 
1646 |                                     : 'text-zinc-600 hover:text-zinc-900'
1647 |                                 }`}
1648 |                               >
1649 |                                 List
1650 |                               </button>
1651 |                               <button
1652 |                                 onClick={() => setViewMode('tree')}
1653 |                                 className={`px-3 py-1 text-xs font-medium rounded transition-all ${
1654 |                                   viewMode === 'tree' 
1655 |                                     ? 'bg-white text-zinc-900 shadow-sm' 
1656 |                                     : 'text-zinc-600 hover:text-zinc-900'
1657 |                                 }`}
1658 |                               >
1659 |                                 Tree
1660 |                               </button>
1661 |                             </div>
1662 |                           </div>
1663 |                         </div>
1664 |                         
1665 |                         <div className="flex gap-2 mb-4">
1666 |                           <Button
1667 |                             variant="secondary"
1668 |                             onClick={() => setSelectedUrls(mapResults)}
1669 |                             className="bg-zinc-900 hover:bg-zinc-800 text-white text-sm px-3 py-1"
1670 |                           >
1671 |                             Select All
1672 |                           </Button>
1673 |                           <Button
1674 |                             variant="secondary"
1675 |                             onClick={() => setSelectedUrls([])}
1676 |                             className="bg-zinc-900 hover:bg-zinc-800 text-white text-sm px-3 py-1"
1677 |                           >
1678 |                             Clear All
1679 |                           </Button>
1680 |                         </div>
1681 |                         
1682 |                         <div className="bg-white rounded-lg border border-zinc-300 overflow-hidden mb-4">
1683 |                           <div className="max-h-64 overflow-y-auto">
1684 |                             {viewMode === 'list' ? (
1685 |                               // List View
1686 |                               mapResults.map((url, index) => (
1687 |                                 <label key={index} className="flex items-center gap-2 px-3 py-2 hover:bg-orange-50 cursor-pointer border-b border-zinc-200 last:border-b-0">
1688 |                                   <input
1689 |                                     type="checkbox"
1690 |                                     checked={selectedUrls.includes(url)}
1691 |                                     onChange={(e) => {
1692 |                                       if (e.target.checked) {
1693 |                                         setSelectedUrls([...selectedUrls, url])
1694 |                                       } else {
1695 |                                         setSelectedUrls(selectedUrls.filter(u => u !== url))
1696 |                                       }
1697 |                                     }}
1698 |                                     className="custom-checkbox"
1699 |                                   />
1700 |                                   <span className="text-sm text-zinc-700 truncate flex-1">{url}</span>
1701 |                                 </label>
1702 |                               ))
1703 |                             ) : (
1704 |                               // Tree View
1705 |                               <TreeView 
1706 |                                 tree={buildUrlTree(mapResults)}
1707 |                                 selectedUrls={selectedUrls}
1708 |                                 onSelectionChange={setSelectedUrls}
1709 |                                 onMapNode={handleMapNode}
1710 |                                 mappingNodes={mappingNodes}
1711 |                                 expandedNodes={expandedNodes}
1712 |                                 onToggleNode={toggleNode}
1713 |                               />
1714 |                             )}
1715 |                           </div>
1716 |                         </div>
1717 |                         
1718 |                         <div className="flex items-center justify-between">
1719 |                           <span className="text-sm text-zinc-600">
1720 |                             <strong>{selectedUrls.length}</strong> pages selected
1721 |                           </span>
1722 |                         </div>
1723 |                       </div>
1724 |                     )}
1725 |                     
1726 |                     {/* Show loading state while mapping */}
1727 |                     {isMapping && (
1728 |                       <div className="py-4">
1729 |                         {/* Tree skeleton loader */}
1730 |                         <div className="bg-white rounded-lg border border-zinc-300 overflow-hidden">
1731 |                           <div className="p-4 space-y-3">
1732 |                             {/* Root domain skeleton */}
1733 |                             <div className="flex items-center gap-2 py-1.5 px-2">
1734 |                               <div className="w-4 h-4 bg-zinc-200 rounded animate-pulse"></div>
1735 |                               <div className="w-4 h-4 bg-zinc-200 rounded animate-pulse"></div>
1736 |                               <div className="h-4 bg-zinc-200 rounded w-32 animate-pulse"></div>
1737 |                               <div className="h-4 bg-zinc-100 rounded-full w-16 animate-pulse ml-2"></div>
1738 |                             </div>
1739 |                             
1740 |                             {/* Child items skeleton */}
1741 |                             <div className="ml-6 space-y-3">
1742 |                               <div className="flex items-center gap-2 py-1.5 px-2">
1743 |                                 <div className="w-4 h-4 bg-zinc-200 rounded animate-pulse"></div>
1744 |                                 <div className="w-4 h-4 bg-zinc-200 rounded animate-pulse"></div>
1745 |                                 <div className="h-4 bg-zinc-200 rounded w-24 animate-pulse" style={{animationDelay: '100ms'}}></div>
1746 |                                 <div className="h-4 bg-zinc-100 rounded-full w-14 animate-pulse ml-2" style={{animationDelay: '100ms'}}></div>
1747 |                               </div>
1748 |                               
1749 |                               {/* Nested items skeleton */}
1750 |                               <div className="ml-6 space-y-3">
1751 |                                 <div className="flex items-center gap-2 py-1.5 px-2">
1752 |                                   <div className="w-4"></div>
1753 |                                   <div className="w-4 h-4 bg-zinc-200 rounded animate-pulse"></div>
1754 |                                   <div className="h-4 bg-zinc-200 rounded w-40 animate-pulse" style={{animationDelay: '200ms'}}></div>
1755 |                                 </div>
1756 |                                 <div className="flex items-center gap-2 py-1.5 px-2">
1757 |                                   <div className="w-4"></div>
1758 |                                   <div className="w-4 h-4 bg-zinc-200 rounded animate-pulse"></div>
1759 |                                   <div className="h-4 bg-zinc-200 rounded w-36 animate-pulse" style={{animationDelay: '300ms'}}></div>
1760 |                                 </div>
1761 |                                 <div className="flex items-center gap-2 py-1.5 px-2">
1762 |                                   <div className="w-4"></div>
1763 |                                   <div className="w-4 h-4 bg-zinc-200 rounded animate-pulse"></div>
1764 |                                   <div className="h-4 bg-zinc-200 rounded w-44 animate-pulse" style={{animationDelay: '400ms'}}></div>
1765 |                                 </div>
1766 |                               </div>
1767 |                               
1768 |                               <div className="flex items-center gap-2 py-1.5 px-2">
1769 |                                 <div className="w-4 h-4 bg-zinc-200 rounded animate-pulse"></div>
1770 |                                 <div className="w-4 h-4 bg-zinc-200 rounded animate-pulse"></div>
1771 |                                 <div className="h-4 bg-zinc-200 rounded w-20 animate-pulse" style={{animationDelay: '500ms'}}></div>
1772 |                                 <div className="h-4 bg-zinc-100 rounded-full w-14 animate-pulse ml-2" style={{animationDelay: '500ms'}}></div>
1773 |                               </div>
1774 |                               
1775 |                               <div className="flex items-center gap-2 py-1.5 px-2">
1776 |                                 <div className="w-4 h-4 bg-zinc-200 rounded animate-pulse"></div>
1777 |                                 <div className="w-4 h-4 bg-zinc-200 rounded animate-pulse"></div>
1778 |                                 <div className="h-4 bg-zinc-200 rounded w-28 animate-pulse" style={{animationDelay: '600ms'}}></div>
1779 |                                 <div className="h-4 bg-zinc-100 rounded-full w-14 animate-pulse ml-2" style={{animationDelay: '600ms'}}></div>
1780 |                               </div>
1781 |                               
1782 |                               <div className="flex items-center gap-2 py-1.5 px-2">
1783 |                                 <div className="w-4 h-4 bg-zinc-200 rounded animate-pulse"></div>
1784 |                                 <div className="w-4 h-4 bg-zinc-200 rounded animate-pulse"></div>
1785 |                                 <div className="h-4 bg-zinc-200 rounded w-16 animate-pulse" style={{animationDelay: '700ms'}}></div>
1786 |                                 <div className="h-4 bg-zinc-100 rounded-full w-14 animate-pulse ml-2" style={{animationDelay: '700ms'}}></div>
1787 |                               </div>
1788 |                             </div>
1789 |                           </div>
1790 |                         </div>
1791 |                       </div>
1792 |                     )}
1793 |                     
1794 |                     {/* Show message when no pages yet */}
1795 |                     {!isMapping && mapResults.length === 0 && (
1796 |                       <div className="text-center py-8">
1797 |                         <p className="text-sm text-zinc-500">Mapping will begin automatically...</p>
1798 |                       </div>
1799 |                     )}
1800 |                   </div>
1801 |                 </div>
1802 |                 
1803 |                 <div className="flex gap-3 pt-4 max-w-md mx-auto">
1804 |                   <Button
1805 |                     variant="default"
1806 |                     onClick={() => moveToStep(1)}
1807 |                     className="flex-1"
1808 |                   >
1809 |                     ← Back
1810 |                   </Button>
1811 |                   <Button
1812 |                     variant="orange"
1813 |                     onClick={startCrawl}
1814 |                     className="flex-1"
1815 |                     disabled={
1816 |                       schemaFields.filter(f => f.name).length === 0 || 
1817 |                       selectedUrls.length === 0
1818 |                     }
1819 |                   >
1820 |                     Start Scraping →
1821 |                   </Button>
1822 |                 </div>
1823 |               </div>
1824 |             )}
1825 | 
1826 |             {/* Step 3: Select Platform */}
1827 |             {currentStep === 3 && (
1828 |               <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
1829 |                 <div className="bg-zinc-50 rounded-xl p-6">
1830 |                   <h3 className="font-semibold mb-4">Select Target Platform</h3>
1831 |                   <div className="grid grid-cols-2 gap-3">
1832 |                     {[
1833 |                       { id: 'webflow', name: 'Webflow', icon: '/svg/webflow.svg', fileType: '.json' },
1834 |                       { id: 'wordpress', name: 'WordPress', icon: '/svg/wordpress.svg', fileType: '.xml' },
1835 |                       { id: 'shopify', name: 'Shopify', icon: '/svg/shopify.svg', fileType: '.csv' },
1836 |                       { id: 'drupal', name: 'Drupal', icon: '/drupal.png', fileType: '.csv' },
1837 |                       { id: 'squarespace', name: 'Squarespace', icon: '/squarespace.jpg', fileType: '.xml' },
1838 |                       { id: 'wix', name: 'Wix', icon: '/wix.png', fileType: '.csv' },
1839 |                       { id: 'csv', name: 'CSV', icon: '/csv-file-icon.svg', fileType: '.csv' },
1840 |                       { id: 'custom', name: 'JSON', icon: '/json-file-icon.svg', fileType: '.json' },
1841 |                     ].map((platform) => (
1842 |                       <button
1843 |                         key={platform.id}
1844 |                         onClick={() => selectPlatform(platform.id as Platform)}
1845 |                         className={`
1846 |                           p-6 bg-white border rounded-lg transition-all group relative overflow-hidden
1847 |                           ${selectedPlatform === platform.id 
1848 |                             ? 'border-orange-500 shadow-md ring-2 ring-orange-500/20' 
1849 |                             : 'border-zinc-300 hover:border-orange-300 hover:shadow-sm'
1850 |                           }
1851 |                         `}
1852 |                       >
1853 |                         <div className="relative flex justify-center items-center h-16">
1854 |                           {platform.icon ? (
1855 |                             <Image 
1856 |                               src={platform.icon} 
1857 |                               alt={`${platform.name} logo`}
1858 |                               width={platform.id === 'csv' || platform.id === 'custom' ? 64 : 40}
1859 |                               height={platform.id === 'csv' || platform.id === 'custom' ? 64 : 40}
1860 |                               className={`${
1861 |                                 platform.id === 'webflow' ? 'h-6 w-auto' : 
1862 |                                 platform.id === 'wix' ? 'h-8 w-auto' : 
1863 |                                 platform.id === 'csv' || platform.id === 'custom' ? 'h-16 w-auto' : 
1864 |                                 'h-10 w-auto'
1865 |                               } transition-transform group-hover:scale-105 ${
1866 |                                 selectedPlatform === platform.id ? 'scale-105' : ''
1867 |                               }`}
1868 |                             />
1869 |                           ) : (
1870 |                             <span className={`text-2xl font-semibold text-zinc-700 transition-transform group-hover:scale-105 ${
1871 |                               selectedPlatform === platform.id ? 'scale-105 text-orange-600' : ''
1872 |                             }`}>
1873 |                               {platform.name}
1874 |                             </span>
1875 |                           )}
1876 |                           <span className={`absolute bottom-0 right-0 text-[10px] font-mono font-medium transition-colors ${
1877 |                             selectedPlatform === platform.id ? 'text-orange-600' : 'text-zinc-500'
1878 |                           }`}>
1879 |                             {platform.fileType}
1880 |                           </span>
1881 |                         </div>
1882 |                       </button>
1883 |                     ))}
1884 |                   </div>
1885 |                   
1886 |                   <div className="mt-8 flex justify-center gap-3">
1887 |                     <Button
1888 |                       variant="code"
1889 |                       onClick={() => {
1890 |                         // Reset state for new export
1891 |                         setSourceUrl('https://firecrawl.dev')
1892 |                         setSelectedPlatform('webflow')
1893 |                         setExportFormat('webflow')
1894 |                         setCrawlData([])
1895 |                         setMapResults([])
1896 |                         setSelectedUrls([])
1897 |                         setSchemaFields([
1898 |                           { name: 'title', type: 'string' },
1899 |                           { name: 'date', type: 'string' },
1900 |                           { name: '', type: 'string' }
1901 |                         ])
1902 |                         setShowSuccess(false)
1903 |                         setShowExportOptions(false)
1904 |                         moveToStep(1)
1905 |                       }}
1906 |                       className="px-8"
1907 |                     >
1908 |                       Start New Export
1909 |                     </Button>
1910 |                     <Button
1911 |                       variant="orange"
1912 |                       onClick={() => {
1913 |                         setShowExportOptions(true)
1914 |                       }}
1915 |                       className="px-8"
1916 |                     >
1917 |                       Continue to Export →
1918 |                     </Button>
1919 |                   </div>
1920 |                 </div>
1921 |                 
1922 |                 {/* Right: Preview or Export Options */}
1923 |                 <div className="bg-zinc-50 rounded-xl p-6 flex flex-col">
1924 |                   {!showExportOptions ? (
1925 |                     <>
1926 |                       <div className="flex items-center justify-between mb-4">
1927 |                         <h3 className="font-semibold">Export Preview</h3>
1928 |                         <span className="text-sm font-medium text-zinc-600">Items: {crawlData.length}</span>
1929 |                       </div>
1930 |                       
1931 |                       {crawlData.length > 0 ? (
1932 |                         <div className="flex-1">
1933 |                           <div className="bg-zinc-950 rounded-lg border border-zinc-800 p-4 h-full overflow-hidden">
1934 |                             <div className="h-full overflow-y-auto text-xs">
1935 |                               {getExportPreview(crawlData, exportFormat)}
1936 |                             </div>
1937 |                           </div>
1938 |                         </div>
1939 |                       ) : (
1940 |                         <div className="flex-1 flex items-center justify-center">
1941 |                           <div className="text-center">
1942 |                             <div className="text-4xl mb-3">CSV</div>
1943 |                             <p className="text-sm text-zinc-500">No data scraped yet</p>
1944 |                             <p className="text-xs text-zinc-400 mt-1">Complete the scraping process to see a preview</p>
1945 |                           </div>
1946 |                         </div>
1947 |                       )}
1948 |                     </>
1949 |                   ) : (
1950 |                     <div className="flex flex-col h-full">
1951 |                       <div className="flex items-center justify-between mb-4">
1952 |                         <h3 className="font-semibold">Export Configuration</h3>
1953 |                         <Button
1954 |                           variant="code"
1955 |                           onClick={() => setShowExportOptions(false)}
1956 |                           className="h-8 px-3 text-xs"
1957 |                         >
1958 |                           ← Back to Preview
1959 |                         </Button>
1960 |                       </div>
1961 |                       
1962 |                       <div className="flex-1 flex items-center">
1963 |                         <div className="w-full space-y-6">
1964 |                           <div>
1965 |                             <Label htmlFor="exportFormat">Export Format</Label>
1966 |                             <Select
1967 |                               id="exportFormat"
1968 |                               value={exportFormat}
1969 |                               onChange={(e) => setExportFormat(e.target.value)}
1970 |                               className="mt-2"
1971 |                             >
1972 |                               <option value="wordpress">WordPress WXR (XML)</option>
1973 |                               <option value="woocommerce">WooCommerce CSV</option>
1974 |                               <option value="shopify">Shopify Products CSV</option>
1975 |                               <option value="webflow">Webflow CMS JSON</option>
1976 |                               <option value="drupal">Drupal CSV</option>
1977 |                               <option value="squarespace">Squarespace XML</option>
1978 |                               <option value="wix">Wix CSV</option>
1979 |                               <option value="csv">Generic CSV</option>
1980 |                               <option value="json">Generic JSON</option>
1981 |                             </Select>
1982 |                           </div>
1983 |                           
1984 |                           <div>
1985 |                             <Label htmlFor="batchSize">Items per file</Label>
1986 |                             <div className="flex items-center gap-2 mt-2">
1987 |                               <Input
1988 |                                 id="batchSize"
1989 |                                 type="number"
1990 |                                 value={batchSize}
1991 |                                 onChange={(e) => setBatchSize(Math.max(1, parseInt(e.target.value) || 50))}
1992 |                                 placeholder="Items per file"
1993 |                                 min="1"
1994 |                                 className="flex-1"
1995 |                               />
1996 |                               <span className="text-sm text-zinc-500">
1997 |                                 = {Math.ceil(crawlData.length / batchSize)} file{Math.ceil(crawlData.length / batchSize) !== 1 ? 's' : ''}
1998 |                               </span>
1999 |                             </div>
2000 |                             <p className="text-xs text-zinc-500 mt-1">
2001 |                               Will create a ZIP with multiple files if needed
2002 |                             </p>
2003 |                           </div>
2004 |                           
2005 |                           <div className="flex justify-center">
2006 |                             <Button 
2007 |                               variant="orange" 
2008 |                               onClick={startExport}
2009 |                               className="px-8"
2010 |                             >
2011 |                               Export Data
2012 |                             </Button>
2013 |                           </div>
2014 |                           
2015 |                           {showSuccess && (
2016 |                             <div className="bg-zinc-100 border border-zinc-300 rounded-xl p-4 mt-4">
2017 |                               <h3 className="text-zinc-900 font-semibold mb-1 text-sm">Export Complete!</h3>
2018 |                               <p className="text-zinc-700 text-sm">Successfully extracted {crawlData.length} items</p>
2019 |                               <p className="text-xs text-zinc-600 mt-1">Your download should start automatically</p>
2020 |                             </div>
2021 |                           )}
2022 |                         </div>
2023 |                       </div>
2024 |                     </div>
2025 |                   )}
2026 |                 </div>
2027 |               </div>
2028 |             )}
2029 | 
2030 |           </div>
2031 |           
2032 |           
2033 |         </div>
2034 |       </MainContent>
2035 |       
2036 |       
2037 |       <Footer />
2038 | 
2039 |     </Layout>
2040 |   )
2041 | }


--------------------------------------------------------------------------------