create-rayso 1.0.3 → 1.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-rayso",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "CLI scaffolder for RAYSO.STUDIO Next.js + Sanity + Tailwind v4 templates",
   "main": "bin/index.js",
   "bin": {

package/template/.claude/commands/build-section.md

@@ -0,0 +1,9 @@
+Build the Figma section at: $ARGUMENTS
+
+1. Fetch the design context and screenshot from Figma via the MCP server.
+2. Read CLAUDE.md and the reference section before writing code.
+3. List which existing components in components/ui you'll reuse.
+4. Create the component, Sanity schema, registration, GROQ query, and type.
+5. Make it fully responsive (mobile-first).
+6. Run lint and typecheck, fix errors.
+7. Summarize what you built, any tokens that didn't match, and TODO(dev) items.

package/template/.mcp.json

@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "figma": {
+      "type": "http",
+      "url": "https://mcp.figma.com/mcp"
+    }
+  }
+}

package/template/CLAUDE.MD

@@ -0,0 +1,42 @@
+# RAYSO Template – Claude Instructions
+
+Monorepo: `frontend/` (Next.js App Router, Tailwind v4, GSAP) and `studio/` (Sanity).
+
+## Your job
+Build front-end UI from Figma designs: markup, styling, responsiveness,
+and the Sanity wiring for content. Do NOT write business logic, form
+submission, email, auth, or integrations. Leave `// TODO(dev):` markers there.
+
+## Design system
+- All tokens live in `frontend/app/globals.css` (Tailwind v4 theme).
+- Never hardcode colors, font sizes, radii, or spacing. If a Figma value
+  has no matching token, use the closest one and list it in your summary.
+- Do not add new tokens without asking.
+
+## Where things go
+- Page sections → `frontend/components/sections/<Name>.tsx`
+- Reusable UI (buttons, cards, inputs) → `components/ui/`
+- SVG icons → `components/icons/` (never inline in sections)
+- Animations → `components/animation/` (use existing GSAP helpers)
+- Navbar/Footer → `components/layout/`
+- Data fetching → `(core)/fetch/` ; Sanity client → `(core)/sanity/lib/`
+- Types → `types/index.ts`
+- Sanity schemas → `studio/schemaTypes/`, registered in `schemaTypes/index.ts`
+
+## Rules for every section
+1. Check `components/ui/` first and reuse before creating anything.
+2. Server component by default; add "use client" only when needed (GSAP, state).
+3. Mobile-first. Implement all breakpoints, even if Figma only shows desktop:
+   stack on mobile, sensible tablet layout.
+4. Content comes from Sanity via props. Nothing editable is hardcoded.
+5. Use next/image with the image builder for Sanity images.
+6. Semantic HTML, one h1 per page, alt text from Sanity.
+7. Every section needs: component, Sanity schema, schema registration,
+   GROQ query in `(core)/fetch/`, and a type in `types/index.ts`.
+
+## Reference implementation
+Follow `components/sections/<ExampleSection>.tsx` and its schema as the pattern.
+
+## Done means
+- `npm run lint` and typecheck pass in `frontend/`
+- Summary lists: files created, tokens with no match, TODOs left for the dev

package/template/frontend/components/sections/HeroSection.tsx

@@ -2,13 +2,14 @@
 // components/sections/HeroSection.tsx
 
 import Image from "next/image";
+import Link from "next/link";
 
-export default function HeroSection() {
+export function HeroSection() {
   return (
-    <section className="relative w-full h-screen overflow-hidden">
+    <section className="relative w-full h-screen overflow-hidden bg-black">
       {/* Background image — swap src for your hero image or video */}
       <Image
-        src="/img/hero.jpg"
+        src="https://assets.lummi.ai/assets/QmVYR4iGjd71gxXKjJUFbD54ZuzEjyRYg4NUmyQnz7rQgU?auto=format&w=1500"
         alt="Resort hero"
         fill
         priority
@@ -21,7 +22,7 @@ export default function HeroSection() {
         className="absolute inset-0"
         style={{
           background:
-            "linear-gradient(to bottom, rgba(10,4,6,0.3) 0%, rgba(10,4,6,0.15) 40%, rgba(10,4,6,0.6) 100%)",
+            "linear-gradient(to bottom, rgba(6, 4, 10, 0.3) 0%, rgba(10,4,6,0.15) 40%, rgba(10,4,6,0.6) 100%)",
         }}
       />