create-rayso 1.0.1 → 1.0.3

package/bin/index.js

@@ -54,6 +54,9 @@ const copySpinner = ora('Scaffolding project...').start();
 try {
   await fs.copy(TEMPLATE_DIR, targetDir);
 
+  const gitkeeps = await fs.glob('**/.gitkeep', { cwd: targetDir });
+  await Promise.all(gitkeeps.map(f => fs.remove(path.join(targetDir, f))));
+
   // Inject project name + description into root package.json
   const rootPkg = await fs.readJson(path.join(targetDir, 'package.json'));
   rootPkg.name = projectName;

package/package.json

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

package/template/frontend/app/layout.tsx

@@ -1,13 +1,25 @@
+// ── app/layout.tsx ────────────────────────────────────────────────────────────
+// app/layout.tsx  — make sure you have both fonts loaded
+
 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" });
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+  display: "swap",
+});
+
+const playfair = Playfair_Display({
+  subsets: ["latin"],
+  variable: "--font-playfair",
+  display: "swap",
+});
 
 export const metadata: Metadata = {
-  title: "Template — RAYSO.STUDIO",
-  description: "A premium Next.js template",
+  title: "Meridian — Luxury Resort",
+  description: "A premium resort experience.",
 };
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
@@ -18,4 +30,4 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       </body>
     </html>
   );
-}
+}

package/template/frontend/app/page.tsx

@@ -1,7 +1,14 @@
+// ── app/page.tsx ──────────────────────────────────────────────────────────────
+// app/page.tsx
+
+import { Navbar } from "@/components/layout/Navbar";
+import { HeroSection } from "@/components/sections/HeroSection";
+
 export default function Home() {
   return (
-    <main>
-      <h1 className="heading-1">Your template starts here.</h1>
-    </main>
+    <>
+      <Navbar />
+      <HeroSection />
+    </>
   );
 }

package/template/frontend/components/layout/Navbar.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import Link from "next/link";
+import { useState } from "react";
+
+const NAV_LINKS = [
+  { label: "Accommodations", href: "/accommodations" },
+  { label: "Experiences",    href: "/experiences"    },
+  { label: "Gallery",        href: "/gallery"        },
+  { label: "About",          href: "/about"          },
+];
+
+export function Navbar() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <header
+      className="fixed top-0 left-0 right-0 z-50"
+      style={{ height: "var(--spacing-navbar)" }}
+    >
+      {/* Glass bar */}
+      <div
+        className="h-full flex items-center justify-between px-6 md:px-12"
+        style={{
+          background: "rgba(255,255,255,0.06)",
+          backdropFilter: "blur(12px)",
+          borderBottom: "1px solid rgba(255,255,255,0.08)",
+        }}
+      >
+        {/* Logo */}
+        <Link
+          href="/"
+          className="font-display text-white text-xl tracking-tight"
+          style={{ letterSpacing: "-0.03em" }}
+        >
+          MERIDIAN
+        </Link>
+
+        {/* Desktop nav */}
+        <nav className="hidden md:flex items-center gap-8">
+          {NAV_LINKS.map((l) => (
+            <Link
+              key={l.href}
+              href={l.href}
+              className="font-body text-xs tracking-widest uppercase text-white/70 hover:text-white transition-colors duration-200"
+            >
+              {l.label}
+            </Link>
+          ))}
+        </nav>
+
+        {/* CTA */}
+        <Link
+          href="/accommodations"
+          className="hidden md:inline-flex btn btn-white btn-sm"
+          style={{ marginTop: 0 }}
+        >
+          Book a Stay
+        </Link>
+
+        {/* Mobile hamburger */}
+        <button
+          className="md:hidden flex flex-col gap-1.5 p-2"
+          onClick={() => setOpen((o) => !o)}
+          aria-label="Toggle menu"
+        >
+          <span
+            className="block w-6 h-px bg-white transition-all duration-300"
+            style={{ transform: open ? "translateY(4px) rotate(45deg)" : "none" }}
+          />
+          <span
+            className="block w-6 h-px bg-white transition-all duration-300"
+            style={{ transform: open ? "translateY(-4px) rotate(-45deg)" : "none" }}
+          />
+        </button>
+      </div>
+
+      {/* Mobile menu */}
+      {open && (
+        <div
+          className="md:hidden flex flex-col px-6 py-6 gap-5"
+          style={{ background: "rgba(20,8,12,0.97)", backdropFilter: "blur(12px)" }}
+        >
+          {NAV_LINKS.map((l) => (
+            <Link
+              key={l.href}
+              href={l.href}
+              onClick={() => setOpen(false)}
+              className="font-body text-sm tracking-widest uppercase text-white/80 hover:text-white transition-colors"
+            >
+              {l.label}
+            </Link>
+          ))}
+          <Link
+            href="/accommodations"
+            className="btn btn-primary btn-sm w-fit"
+            style={{ marginTop: "0.5rem" }}
+          >
+            Book a Stay
+          </Link>
+        </div>
+      )}
+    </header>
+  );
+}

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

@@ -0,0 +1,97 @@
+// ── Hero Section ──────────────────────────────────────────────────────────────
+// components/sections/HeroSection.tsx
+
+import Image from "next/image";
+
+export default function HeroSection() {
+  return (
+    <section className="relative w-full h-screen overflow-hidden">
+      {/* Background image — swap src for your hero image or video */}
+      <Image
+        src="/img/hero.jpg"
+        alt="Resort hero"
+        fill
+        priority
+        className="object-cover"
+        sizes="100vw"
+      />
+
+      {/* Gradient overlay */}
+      <div
+        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%)",
+        }}
+      />
+
+      {/* Content */}
+      <div className="absolute inset-0 flex flex-col justify-end pb-20 px-6 md:px-12 lg:px-20">
+        <div className="max-w-2xl">
+          {/* Location tag */}
+          <p className="font-body text-white/60 text-xs tracking-[0.3em] uppercase mb-6">
+            Maldives, Indian Ocean
+          </p>
+
+          {/* Headline */}
+          <h1
+            className="font-display text-white mb-8"
+            style={{
+              fontSize: "clamp(2.8rem, 7vw, 5.5rem)",
+              fontWeight: 400,
+              lineHeight: 0.95,
+              letterSpacing: "-0.03em",
+              textTransform: "uppercase",
+            }}
+          >
+            Where stillness
+            <br />
+            meets the sea.
+          </h1>
+
+          {/* Sub + CTA row */}
+          <div className="flex flex-col sm:flex-row sm:items-end gap-6">
+            <p className="font-body text-white/60 text-sm leading-relaxed max-w-sm">
+              Private villas, overwater bungalows, and curated experiences for
+              those who seek something beyond ordinary.
+            </p>
+
+            <Link
+              href="/accommodations"
+              className="btn btn-white shrink-0"
+              style={{ marginTop: 0 }}
+            >
+              Explore Rooms
+            </Link>
+          </div>
+        </div>
+      </div>
+
+      {/* Scroll indicator */}
+      <div className="absolute bottom-8 right-8 flex flex-col items-center gap-2">
+        <span
+          className="font-body text-white/40 text-[10px] tracking-[0.25em] uppercase"
+          style={{ writingMode: "vertical-rl" }}
+        >
+          Scroll
+        </span>
+        <div className="w-px h-12 bg-white/20 relative overflow-hidden">
+          <div
+            className="absolute top-0 left-0 w-full bg-white/60"
+            style={{
+              height: "40%",
+              animation: "scrollLine 1.8s ease-in-out infinite",
+            }}
+          />
+        </div>
+      </div>
+
+      <style>{`
+        @keyframes scrollLine {
+          0%   { transform: translateY(-100%); }
+          100% { transform: translateY(350%); }
+        }
+      `}</style>
+    </section>
+  );
+}

package/template/package.json

@@ -10,12 +10,15 @@
     "deploy:studio": "cd studio && sanity deploy",
     "zip": "bash zip.sh"
   },
-  "workspaces": ["frontend", "studio"],
+  "workspaces": [
+    "frontend",
+    "studio"
+  ],
   "overrides": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
-  "private": true,
+  "private": "false",
   "license": "MIT",
   "devDependencies": {
     "npm-run-all": "^4.1.5"