create-rayso 1.0.0

package/README.md

@@ -0,0 +1,78 @@
+# create-rayso
+
+Official CLI scaffolder for RAYSO.STUDIO templates.
+
+## Usage
+
+```bash
+npm create rayso@latest
+```
+
+Or with a project name:
+
+```bash
+npm create rayso@latest my-template
+```
+
+## What it does
+
+1. Asks for project name, description, and author
+2. Scaffolds the full folder structure
+3. Injects your project name into all `package.json` files
+4. Copies `.env.example` → `.env.local` in both frontend and studio
+5. Runs `npm install` automatically
+
+## After scaffolding
+
+```bash
+cd my-template
+
+# Fill in your keys
+nano frontend/.env.local
+
+# Start both servers
+npm run dev
+```
+
+- Frontend → http://localhost:3000
+- Studio   → http://localhost:3333
+
+## Publishing to npm
+
+```bash
+npm login
+npm publish --access public
+```
+
+## Template structure
+
+```
+my-template/
+├── frontend/
+│   ├── app/
+│   │   ├── globals.css       ← Full Tailwind v4 design system
+│   │   ├── layout.tsx
+│   │   └── page.tsx
+│   ├── components/
+│   │   ├── sections/         ← Page sections
+│   │   ├── ui/               ← Reusable UI components
+│   │   ├── icons/            ← Icon components
+│   │   ├── animation/        ← GSAP / AnimatedHeading etc
+│   │   └── layout/           ← Navbar, Footer
+│   ├── (core)/
+│   │   ├── fetch/            ← Data fetching functions
+│   │   ├── sanity/lib/       ← Sanity client + image builder
+│   │   └── lib/              ← Email, utilities
+│   ├── types/index.ts
+│   ├── next.config.ts
+│   ├── postcss.config.mjs
+│   └── tsconfig.json
+│
+├── studio/
+│   ├── schemaTypes/index.ts  ← Register your schemas here
+│   ├── sanity.config.ts
+│   └── tsconfig.json
+│
+├── .gitignore
+├── zip.sh                    ← npm run zip → clean dist zip
+└── package.json

package/bin/index.js

@@ -0,0 +1,115 @@
+#!/usr/bin/env node
+
+import chalk from 'chalk';
+import { execa } from 'execa';
+import fs from 'fs-extra';
+import inquirer from 'inquirer';
+import ora from 'ora';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const TEMPLATE_DIR = path.join(__dirname, '..', 'template');
+
+// ── Banner ────────────────────────────────────────────────────────────────────
+console.log('\n' + chalk.bold.white('RAYSO.STUDIO') + chalk.gray(' — Template Scaffolder'));
+console.log(chalk.gray('─'.repeat(42)) + '\n');
+
+// ── Questions ─────────────────────────────────────────────────────────────────
+const answers = await inquirer.prompt([
+  {
+    type: 'input',
+    name: 'projectName',
+    message: 'Project name:',
+    default: 'my-template',
+    validate: (v) =>
+      /^[a-z0-9-_]+$/.test(v) || 'Use lowercase letters, numbers, hyphens only',
+  },
+  {
+    type: 'input',
+    name: 'description',
+    message: 'Description:',
+    default: 'A premium Next.js template by RAYSO.STUDIO',
+  },
+  {
+    type: 'input',
+    name: 'author',
+    message: 'Author:',
+    default: 'RAYSO.STUDIO',
+  },
+]);
+
+const { projectName, description, author } = answers;
+const targetDir = path.resolve(process.cwd(), projectName);
+
+// ── Check target dir ──────────────────────────────────────────────────────────
+if (fs.existsSync(targetDir)) {
+  console.log(chalk.red(`\n✖ Directory "${projectName}" already exists.\n`));
+  process.exit(1);
+}
+
+// ── Copy template ─────────────────────────────────────────────────────────────
+const copySpinner = ora('Scaffolding project...').start();
+
+try {
+  await fs.copy(TEMPLATE_DIR, targetDir);
+
+  // Inject project name + description into root package.json
+  const rootPkg = await fs.readJson(path.join(targetDir, 'package.json'));
+  rootPkg.name = projectName;
+  rootPkg.description = description;
+  rootPkg.author = author;
+  await fs.writeJson(path.join(targetDir, 'package.json'), rootPkg, { spaces: 2 });
+
+  // Inject into frontend/package.json
+  const frontendPkg = await fs.readJson(path.join(targetDir, 'frontend', 'package.json'));
+  frontendPkg.name = `${projectName}-frontend`;
+  frontendPkg.description = description;
+  await fs.writeJson(path.join(targetDir, 'frontend', 'package.json'), frontendPkg, { spaces: 2 });
+
+  // Inject into studio/package.json
+  const studioPkg = await fs.readJson(path.join(targetDir, 'studio', 'package.json'));
+  studioPkg.name = `${projectName}-studio`;
+  await fs.writeJson(path.join(targetDir, 'studio', 'package.json'), studioPkg, { spaces: 2 });
+
+  // Create .env.local files from examples
+  const frontendEnvExample = path.join(targetDir, 'frontend', '.env.example');
+  const frontendEnvLocal   = path.join(targetDir, 'frontend', '.env.local');
+  if (fs.existsSync(frontendEnvExample) && !fs.existsSync(frontendEnvLocal)) {
+    await fs.copy(frontendEnvExample, frontendEnvLocal);
+  }
+
+  const studioEnvExample = path.join(targetDir, 'studio', '.env.example');
+  const studioEnvLocal   = path.join(targetDir, 'studio', '.env.local');
+  if (fs.existsSync(studioEnvExample) && !fs.existsSync(studioEnvLocal)) {
+    await fs.copy(studioEnvExample, studioEnvLocal);
+  }
+
+  copySpinner.succeed('Project scaffolded');
+} catch (err) {
+  copySpinner.fail('Scaffolding failed');
+  console.error(err);
+  process.exit(1);
+}
+
+// ── Install dependencies ──────────────────────────────────────────────────────
+const installSpinner = ora('Installing dependencies...').start();
+
+try {
+  await execa('npm', ['install'], { cwd: targetDir, stdio: 'pipe' });
+  installSpinner.succeed('Dependencies installed');
+} catch (err) {
+  installSpinner.fail('npm install failed — run it manually');
+  console.warn(chalk.yellow('\n  cd ' + projectName + ' && npm install\n'));
+}
+
+// ── Done ──────────────────────────────────────────────────────────────────────
+console.log('\n' + chalk.green('✔ Ready!') + '\n');
+console.log(chalk.white('  Next steps:\n'));
+console.log(chalk.gray('  1.') + '  cd ' + chalk.cyan(projectName));
+console.log(chalk.gray('  2.') + '  Fill in ' + chalk.cyan('frontend/.env.local') + ' with your Sanity + Resend keys');
+console.log(chalk.gray('  3.') + '  ' + chalk.cyan('npm run dev'));
+console.log('\n' + chalk.gray('  Frontend →') + ' http://localhost:3000');
+console.log(chalk.gray('  Studio   →') + ' http://localhost:3333\n');
+console.log(chalk.gray('─'.repeat(42)));
+console.log(chalk.gray('  Built by ') + chalk.white('RAYSO.STUDIO') + '\n');

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "create-rayso",
+  "version": "1.0.0",
+  "description": "CLI scaffolder for RAYSO.STUDIO Next.js + Sanity + Tailwind v4 templates",
+  "main": "bin/index.js",
+  "bin": {
+    "create-rayso": "bin/index.js"
+  },
+  "keywords": [
+    "create",
+    "nextjs",
+    "sanity",
+    "tailwind",
+    "template",
+    "rayso"
+  ],
+  "author": "RAYSO.STUDIO",
+  "license": "MIT",
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "execa": "^8.0.1",
+    "fs-extra": "^11.2.0",
+    "inquirer": "^9.2.15",
+    "ora": "^8.0.1"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "type": "module"
+}

package/template/frontend/(core)/sanity/lib/client.ts

@@ -0,0 +1,8 @@
+import { createClient } from "next-sanity";
+
+export const client = createClient({
+  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID!,
+  dataset:   process.env.NEXT_PUBLIC_SANITY_DATASET ?? "production",
+  apiVersion: "2024-01-01",
+  useCdn: false,
+});

package/template/frontend/(core)/sanity/lib/image.ts

@@ -0,0 +1,8 @@
+import createImageUrlBuilder from "@sanity/image-url";
+import { client } from "./client";
+
+const builder = createImageUrlBuilder(client);
+
+export function urlFor(source: any) {
+  return builder.image(source);
+}

package/template/frontend/.env.example

@@ -0,0 +1,5 @@
+NEXT_PUBLIC_SANITY_PROJECT_ID=your_project_id
+NEXT_PUBLIC_SANITY_DATASET=production
+SANITY_API_TOKEN=your_read_token
+RESEND_API_KEY=your_resend_api_key
+CONTACT_EMAIL=hello@yoursite.com

package/template/frontend/app/globals.css

@@ -0,0 +1,80 @@
+@import 'tailwindcss';
+
+@theme {
+  --font-display: "Playfair Display", serif;
+  --font-body:    "Inter", sans-serif;
+  --color-primary:       #99023C;
+  --color-primary-light: #C9034F;
+  --color-primary-dark:  #49031E;
+  --color-cream:         #F4E9EE;
+  --color-off-white:     #F2F2F2;
+  --color-neutral-50:  #ffffff;
+  --color-neutral-100: #F2F2F2;
+  --color-neutral-200: #F4E9EE;
+  --color-neutral-300: #D6C2CA;
+  --color-neutral-400: #C1A4B0;
+  --color-neutral-500: #AD8595;
+  --color-neutral-600: #98677B;
+  --color-neutral-700: #7A5262;
+  --color-neutral-800: #5B3E4A;
+  --color-neutral-900: #3D2931;
+  --color-neutral-950: #49031E;
+  --color-success: #2d7a4f;
+  --color-warning: #c8761a;
+  --color-error:   #b33030;
+  --spacing-navbar: 90px;
+  --spacing-18: 4.5rem;
+  --spacing-34: 8.5rem;
+  --shadow-card:  0 2px 8px rgba(26,46,68,.06), 0 8px 32px rgba(26,46,68,.08);
+  --shadow-hover: 0 8px 32px rgba(26,46,68,.14), 0 2px 8px rgba(26,46,68,.08);
+  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
+}
+
+@layer base {
+  *, *::before, *::after { box-sizing: border-box; }
+  html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
+  body { font-family: var(--font-body); background-color: var(--color-cream); color: var(--color-neutral-700); }
+}
+
+@utility container-site { @apply w-full mx-auto px-6 md:px-0; max-width: 1280px; }
+@utility heading-1 { font-family: var(--font-display); font-size: clamp(2.5rem,6vw,3.5rem); font-weight: 500; line-height: 1; letter-spacing: -0.03em; text-transform: uppercase; padding: 10px 0; }
+@utility heading-2 { font-family: var(--font-display); font-size: 2rem; font-weight: 500; line-height: 1.4; letter-spacing: -0.03em; text-transform: uppercase; padding: 20px 0; color: var(--color-neutral-950); }
+@utility heading-3 { font-family: var(--font-display); font-size: clamp(1.5rem,3vw,1.875rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; color: var(--color-neutral-950); }
+@utility heading-4 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; line-height: 1.2; padding: 10px 0; color: var(--color-neutral-950); }
+@utility heading-5 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 400; line-height: 1.3; color: var(--color-neutral-950); }
+@utility eyebrow { @apply text-xs font-semibold tracking-[0.2em] uppercase; color: var(--color-primary-light); }
+@utility btn { @apply inline-flex rounded-lg mt-4 items-center justify-center gap-2 font-body text-xs font-semibold tracking-wider uppercase border-2 border-transparent transition-all duration-250 cursor-pointer select-none whitespace-nowrap outline-hidden no-underline px-8 py-3; }
+@utility btn-lg { @apply text-sm px-10 py-4; }
+@utility btn-sm { @apply text-[0.65rem] px-5 py-2; }
+@utility btn-primary { @apply bg-(--color-primary-light) text-white; &:hover { @apply -translate-y-0.5; background: var(--color-primary); } }
+@utility btn-static  { @apply bg-(--color-primary-light) text-white; &:hover { @apply bg-(--color-primary); } }
+@utility btn-white   { @apply bg-white text-(--color-primary) border-white; &:hover { @apply -translate-y-0.5 bg-(--color-off-white); } }
+@utility btn-secondary-outlined { @apply bg-transparent text-neutral-50 border border-neutral-50; &:hover { @apply -translate-y-0.5 bg-(--color-primary) text-white; } }
+@utility input { @apply w-full border border-neutral-300 rounded-lg bg-white px-4 py-3 text-base text-neutral-900 font-body outline-hidden transition-all duration-250 placeholder:text-neutral-400; &:focus { @apply border-(--color-primary); } }
+@utility label-text { @apply block text-sm font-medium text-neutral-950 mb-1.5; }
+@utility section       { @apply py-20 md:py-34; }
+@utility section-dark  { @apply py-20 md:py-34 bg-(--color-primary); }
+@utility section-cream { @apply py-20 md:py-34 bg-(--color-cream); }
+@utility page-header   { @apply bg-(--color-primary) relative overflow-hidden; padding-top: calc(var(--spacing-navbar) + 4rem); padding-bottom: 4rem; }
+@utility property-card { @apply block overflow-hidden no-underline text-neutral-900 bg-white transition-all duration-400 cursor-pointer; &:hover { @apply -translate-y-1.5; } &:hover .card-img { @apply scale-105; } }
+@utility card-img      { @apply absolute inset-0 w-full h-full object-cover transition-transform duration-600; }
+@utility badge         { @apply inline-flex items-center text-[0.65rem] font-semibold tracking-[0.15em] uppercase px-3 py-2; }
+@utility overlay-dark  { background: linear-gradient(to top, rgba(15,29,43,.85) 0%, rgba(15,29,43,.4) 50%, transparent 100%); }
+@utility font-display  { font-family: var(--font-display); }
+@utility font-body     { font-family: var(--font-body); }
+@utility animate-fade-in-up { animation: fadeInUp 600ms var(--ease-out) forwards; }
+@utility animate-fade-in    { animation: fadeIn   600ms var(--ease-out) forwards; }
+@utility delay-100 { animation-delay: 100ms; }
+@utility delay-200 { animation-delay: 200ms; }
+@utility delay-300 { animation-delay: 300ms; }
+
+@keyframes fadeInUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
+@keyframes fadeIn   { from { opacity:0; } to { opacity:1; } }
+@keyframes marquee  { from { transform:translateX(0); } to { transform:translateX(-50%); } }
+
+.embla { overflow:hidden; }
+.embla__viewport { overflow:hidden; }
+.embla__container { display:flex; }
+.embla__slide { flex:0 0 100%; min-width:0; }

package/template/frontend/app/layout.tsx

@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import { Inter, Playfair_Display } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
+const playfair = Playfair_Display({ subsets: ["latin"], variable: "--font-playfair" });
+
+export const metadata: Metadata = {
+  title: "Template — RAYSO.STUDIO",
+  description: "A premium Next.js template",
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body className={`${inter.variable} ${playfair.variable}`}>
+        {children}
+      </body>
+    </html>
+  );
+}

package/template/frontend/app/page.tsx

@@ -0,0 +1,7 @@
+export default function Home() {
+  return (
+    <main>
+      <h1 className="heading-1">Your template starts here.</h1>
+    </main>
+  );
+}

package/template/frontend/next.config.ts

@@ -0,0 +1,15 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  reactStrictMode: false,
+  images: {
+    remotePatterns: [
+      { protocol: "https", hostname: "cdn.sanity.io" },
+      { protocol: "https", hostname: "assets.lummi.ai" },
+      { protocol: "https", hostname: "res.cloudinary.com" },
+      { protocol: "https", hostname: "images.unsplash.com" },
+    ],
+  },
+};
+
+export default nextConfig;

package/template/frontend/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "rayso-template-frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint ."
+  },
+  "dependencies": {
+    "@portabletext/react": "^6.0.3",
+    "@sanity/image-url": "^2.1.1",
+    "embla-carousel-autoplay": "^8.6.0",
+    "embla-carousel-react": "^8.6.0",
+    "gsap": "^3.15.0",
+    "lenis": "^1.3.23",
+    "lucide-react": "^1.11.0",
+    "next": "16.2.4",
+    "next-sanity": "^12.3.1",
+    "react": "19.2.5",
+    "react-dom": "19.2.5",
+    "react-hook-form": "^7.74.0",
+    "resend": "^6.12.2"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.2.4",
+    "@types/node": "^20",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "eslint": "^9",
+    "eslint-config-next": "16.2.4",
+    "postcss": "^8",
+    "tailwindcss": "^4.2.4",
+    "typescript": "^5"
+  }
+}

package/template/frontend/postcss.config.mjs

@@ -0,0 +1,6 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+export default config;

package/template/frontend/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": { "@/*": ["./*"] }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/template/frontend/types/index.ts

@@ -0,0 +1,22 @@
+import { StaticImport } from "next/dist/shared/lib/get-img-props";
+
+export type SliderImage = {
+  label?: string;
+  url: string;
+};
+
+export interface BookingFormValues {
+  adults: number;
+  children: number;
+  checkIn: string;
+  checkOut: string;
+  promoCode: string;
+}
+
+export interface SearchParams {
+  checkIn?:  string;
+  checkOut?: string;
+  adults?:   string;
+  children?: string;
+  promo?:    string;
+}

package/template/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "rayso-template",
+  "version": "1.0.0",
+  "description": "A premium Next.js template by RAYSO.STUDIO",
+  "author": "RAYSO.STUDIO",
+  "scripts": {
+    "dev": "npm-run-all --parallel dev:*",
+    "dev:frontend": "cd frontend && npm run dev",
+    "dev:studio": "cd studio && npm run dev",
+    "deploy:studio": "cd studio && sanity deploy",
+    "zip": "bash zip.sh"
+  },
+  "workspaces": ["frontend", "studio"],
+  "private": true,
+  "license": "MIT",
+  "devDependencies": {
+    "npm-run-all": "^4.1.5"
+  }
+}

package/template/studio/.env.example

@@ -0,0 +1,2 @@
+SANITY_STUDIO_PROJECT_ID=your_project_id
+SANITY_STUDIO_DATASET=production

package/template/studio/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "rayso-template-studio",
+  "private": true,
+  "version": "1.0.0",
+  "license": "MIT",
+  "scripts": {
+    "dev": "sanity dev",
+    "build": "sanity build",
+    "deploy": "sanity deploy"
+  },
+  "dependencies": {
+    "@sanity/vision": "^4.22.0",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "sanity": "^4.22.0",
+    "styled-components": "^6.1.15"
+  },
+  "devDependencies": {
+    "@sanity/eslint-config-studio": "^5.0.1",
+    "@types/react": "^19",
+    "typescript": "^5"
+  }
+}

package/template/studio/sanity.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "sanity";
+import { structureTool } from "sanity/structure";
+import { schemaTypes } from "./schemaTypes";
+
+export default defineConfig({
+  name: "default",
+  title: "Studio",
+  projectId: process.env.SANITY_STUDIO_PROJECT_ID!,
+  dataset: process.env.SANITY_STUDIO_DATASET ?? "production",
+  plugins: [structureTool()],
+  schema: { types: schemaTypes },
+});

package/template/studio/schemaTypes/index.ts

@@ -0,0 +1,6 @@
+// Import and register your schemas here
+// import { mySchema } from "./mySchema";
+
+export const schemaTypes = [
+  // mySchema,
+];

package/template/studio/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}

package/template/zip.sh

@@ -0,0 +1,12 @@
+#!/bin/bash
+set -e
+TEMPLATE_NAME=$(node -p "require('./package.json').name")
+OUTPUT_DIR="./dist"
+ZIP_NAME="${TEMPLATE_NAME}-$(date +%Y%m%d).zip"
+rm -rf "$OUTPUT_DIR" && mkdir -p "$OUTPUT_DIR"
+zip -r "$OUTPUT_DIR/$ZIP_NAME" . \
+  --exclude "*/node_modules/*" --exclude "*/.next/*" --exclude "*/.sanity/*" \
+  --exclude "*/dist/*" --exclude "*/.git/*" --exclude "*/.env.local" \
+  --exclude "*/.env.*.local" --exclude "*/.DS_Store" --exclude "*.log" \
+  --exclude "*/zip.sh"
+echo "✅ $OUTPUT_DIR/$ZIP_NAME ($(du -sh "$OUTPUT_DIR/$ZIP_NAME" | cut -f1))"