Initial commit from Create Next App

.cursorrules

@@ -0,0 +1,58 @@
+# Project: CreatorStudio
+# A Renderforest-style platform with Video Maker and Image Maker products.
+
+## Stack
+- Next.js 14 App Router (never use pages/ directory)
+- TypeScript (strict mode, no `any`)
+- Tailwind CSS for all styling (no inline styles, no CSS modules)
+- shadcn/ui for base components (import from @/components/ui)
+- Framer Motion for animations
+- Lucide React for icons
+- Supabase for auth + database
+- Zustand for client state
+- react-hook-form + zod for forms
+- Stripe for payments
+
+## Folder Structure
+- /app — Next.js routes only (page.tsx, layout.tsx, loading.tsx)
+- /components/layout — Navbar, Footer, Sidebar
+- /components/sections — Page sections (Hero, Pricing, FAQ, etc.)
+- /components/ui — shadcn/ui components (do not edit these)
+- /lib — supabase.ts, stripe.ts, utils.ts
+- /hooks — custom React hooks
+
+## Code Rules
+- Every component is a named export, never default export from a file with multiple exports
+- Use `cn()` from @/lib/utils for conditional Tailwind classes
+- Server Components by default; add "use client" only when needed (event handlers, hooks, animations)
+- All images use next/image with width/height or fill + sizes
+- No hardcoded colors — use Tailwind palette only
+- Primary brand color: blue-600 (#2563EB)
+- No useEffect for data fetching — use React Server Components or SWR
+- Zod schema defined before the form component, not inside it
+
+## Design System
+- Font: Plus Jakarta Sans (headings), Inter (body)
+- Border radius: rounded-xl for cards, rounded-lg for buttons
+- Shadows: shadow-sm default, shadow-xl for elevated cards
+- Spacing scale: follow Tailwind defaults (don't invent custom values)
+- Animations: max 400ms duration, ease-out easing, whileInView with viewport once:true
+
+## Component Patterns
+- Section components accept className prop for layout overrides
+- Cards use: bg-white rounded-xl border border-gray-100 shadow-sm
+- Primary button: bg-blue-600 hover:bg-blue-700 text-white rounded-lg px-6 py-2.5
+- All interactive elements have focus-visible ring for accessibility
+- Empty states include an illustration placeholder + CTA button
+
+## Products
+- Video Maker: route /video-maker, accent color blue-600
+- Image Maker: route /image-maker, accent color violet-600
+
+## What NOT to do
+- Never use <style> tags or styled-components
+- Never use the pages/ router
+- Never install axios — use native fetch
+- Never add console.log to committed code
+- Never create a component larger than 150 lines — split it
+- Never skip TypeScript types on props — always define an interface