commit d962483359d5f2a0c98e6fc447cc67b5b51b647b Author: Soroush.Asadi Date: Thu May 21 12:17:29 2026 +0330 Initial commit from Create Next App diff --git a/.cursorrules b/.cursorrules new file mode 100644 index 0000000..175e522 --- /dev/null +++ b/.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