@deneb-ui/create-template 2.0.0

package/template/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "fivora-template-starter",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "lint": "eslint",
+    "lab": "fivora lab .",
+    "validate": "fivora validate .",
+    "package:template": "fivora package .",
+    "zip": "fivora zip .",
+    "update:fivora": "fivora update"
+  },
+  "dependencies": {
+    "next": "15.5.23",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "@deneb-ui/ui": "^2.0.0"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "3.3.6",
+    "@types/node": "22.15.3",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "eslint": "9.39.5",
+    "eslint-config-next": "15.5.23",
+    "typescript": "5.8.3",
+    "@fivora/cli": "^1.0.0"
+  },
+  "overrides": {
+    "postcss": "8.5.26",
+    "sharp": "0.35.3"
+  }
+}

package/template/public/fivora-icon.svg

@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 240" fill="none">
+  <defs>
+    <linearGradient id="fivora-navy" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#0a1931" />
+      <stop offset="100%" stop-color="#001858" />
+    </linearGradient>
+    <linearGradient id="fivora-teal" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#00adb5" />
+      <stop offset="100%" stop-color="#016a7e" />
+    </linearGradient>
+    <filter id="fivora-glow" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="8" stdDeviation="12" flood-color="#00adb5" flood-opacity="0.35"/>
+    </filter>
+  </defs>
+
+  <g filter="url(#fivora-glow)">
+    <!-- Left Navy F-Shield Segment -->
+    <path
+      d="M20 20 H125 L115 50 H55 V95 H115 L95 125 H55 V165 L100 220 L75 220 L20 160 Z"
+      fill="url(#fivora-navy)"
+    />
+
+    <!-- Right Teal Accent Segment -->
+    <path
+      d="M135 35 L175 75 V145 L125 210 L105 185 L145 135 V85 L120 60 Z"
+      fill="url(#fivora-teal)"
+    />
+  </g>
+</svg>

package/template/public/placeholder.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800" role="img" aria-labelledby="title description">
+  <title id="title">Neutral image placeholder</title>
+  <description id="description">A neutral gradient placeholder for an editable image field.</description>
+  <defs>
+    <linearGradient id="background" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#dbeafe"/>
+      <stop offset="1" stop-color="#ccfbf1"/>
+    </linearGradient>
+  </defs>
+  <rect width="1200" height="800" fill="url(#background)"/>
+  <circle cx="600" cy="400" r="120" fill="#2563eb" opacity=".16"/>
+</svg>

package/template/src/app/about_us/page.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { contentObject, contentText, useSiteData } from '@/lib/siteDataContext';
+import { withBasePath } from '@/lib/utils';
+
+export default function AboutPage() {
+  const siteData = useSiteData();
+  const about = contentObject(contentObject(siteData.content).about);
+
+  return (
+    <div data-preview-page-key="about_us">
+      <section className="page-section split" data-design-section="about">
+        <div className="split-copy">
+          <h1 className="section-title" data-preview-field-path="about.heading">{contentText(about.heading)}</h1>
+          <p data-preview-field-path="about.body">{contentText(about.body)}</p>
+        </div>
+        <img
+          className="split-image"
+          src={withBasePath(contentText(about.imageUrl) || '/placeholder.svg')}
+          alt=""
+          data-preview-field-path="about.imageUrl"
+        />
+      </section>
+    </div>
+  );
+}

package/template/src/app/contact/page.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import { useState, type FormEvent } from 'react';
+import { contentObject, contentText, useSiteData } from '@/lib/siteDataContext';
+
+export default function ContactPage() {
+  const siteData = useSiteData();
+  const contact = contentObject(contentObject(siteData.content).contact);
+  const [status, setStatus] = useState('');
+
+  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const form = event.currentTarget;
+    const projectId = siteData.project?.id?.trim();
+    if (!projectId) {
+      setStatus('This website is not connected to a published project yet.');
+      return;
+    }
+
+    const formData = new FormData(form);
+    setStatus('Sending your message...');
+    try {
+      const response = await fetch('/site-contact', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          projectId,
+          name: String(formData.get('name') ?? ''),
+          email: String(formData.get('email') ?? ''),
+          message: String(formData.get('message') ?? ''),
+        }),
+      });
+      if (!response.ok) throw new Error('Unable to send message.');
+      form.reset();
+      setStatus('Thanks — your message has been sent successfully.');
+    } catch {
+      setStatus('We could not send your message right now. Please try again later.');
+    }
+  }
+
+  return (
+    <div data-preview-page-key="contact">
+      <section className="page-section page-heading" data-design-section="contact-heading">
+        <h1 data-preview-field-path="contact.heading">{contentText(contact.heading)}</h1>
+        <p data-preview-field-path="contact.intro">{contentText(contact.intro)}</p>
+      </section>
+      <section className="page-section contact-grid" data-design-section="contact-details">
+        <div className="contact-details">
+          <a href={`tel:${contentText(contact.phone)}`} data-preview-field-path="contact.phone">{contentText(contact.phone)}</a>
+          <a href={`mailto:${contentText(contact.email)}`} data-preview-field-path="contact.email">{contentText(contact.email)}</a>
+          <p data-preview-field-path="contact.address">{contentText(contact.address)}</p>
+        </div>
+        <form
+          className="contact-form"
+          onSubmit={handleSubmit}
+          data-fivora-contact-disabled
+        >
+          <h2 data-preview-field-path="contact.formTitle">{contentText(contact.formTitle)}</h2>
+          <label data-preview-static>
+            Name
+            <input type="text" name="name" autoComplete="name" />
+          </label>
+          <label data-preview-static>
+            Email
+            <input type="email" name="email" autoComplete="email" />
+          </label>
+          <label data-preview-static>
+            Message
+            <textarea name="message" rows={5} />
+          </label>
+          <button type="submit" className="button-primary">
+            <span data-preview-field-path="contact.submitLabel">{contentText(contact.submitLabel)}</span>
+          </button>
+          <p role="status" aria-live="polite">{status}</p>
+        </form>
+      </section>
+    </div>
+  );
+}

package/template/src/app/globals.css

@@ -0,0 +1,487 @@
+:root {
+  color-scheme: light;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  background: var(--page-background, #ffffff);
+  color: var(--page-text, #0f172a);
+}
+
+button,
+input,
+textarea {
+  font: inherit;
+}
+
+button {
+  cursor: pointer;
+}
+
+img {
+  display: block;
+  max-width: 100%;
+}
+
+h1,
+h2,
+h3,
+p {
+  margin-top: 0;
+}
+
+h1,
+h2,
+h3 {
+  font-family: var(--heading-font, Inter, sans-serif);
+  line-height: 1.08;
+}
+
+.site-shell {
+  min-height: 100vh;
+  background: var(--page-background);
+  color: var(--page-text);
+  font-size: var(--base-size);
+}
+
+.site-header,
+.site-footer,
+.page-section,
+.hero {
+  padding-left: max(1.5rem, calc((100vw - 76rem) / 2));
+  padding-right: max(1.5rem, calc((100vw - 76rem) / 2));
+  box-sizing: border-box;
+}
+
+.site-header {
+  position: sticky;
+  z-index: 10;
+  top: 0;
+  display: flex;
+  min-height: 4.5rem;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  border-bottom: 1px solid color-mix(in srgb, var(--page-text) 12%, transparent);
+  background: color-mix(in srgb, var(--page-background) 92%, transparent);
+  backdrop-filter: blur(14px);
+}
+
+.brand,
+.site-nav a,
+.site-nav button,
+.footer-nav a,
+.footer-nav button {
+  border: 0;
+  background: transparent;
+  color: inherit;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+  font-weight: 800;
+}
+
+.brand img {
+  width: 2rem;
+  height: 2rem;
+  border-radius: 0.55rem;
+  object-fit: cover;
+}
+
+.site-nav,
+.footer-nav,
+.cta-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.site-nav a,
+.site-nav button,
+.footer-nav a,
+.footer-nav button {
+  padding: 0.55rem 0.25rem;
+}
+
+.site-nav a.active,
+.site-nav button.active {
+  color: var(--brand-color);
+  font-weight: 800;
+}
+
+.header-cta,
+.button-primary,
+.button-secondary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2.75rem;
+  padding: 0.7rem 1rem;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  text-decoration: none;
+}
+
+.header-cta,
+.button-primary {
+  background: var(--brand-color);
+  color: #ffffff;
+  border: 0;
+}
+
+.button-secondary {
+  border-color: color-mix(in srgb, var(--page-text) 22%, transparent);
+  background: var(--page-background);
+  color: var(--page-text);
+}
+
+.unavailable {
+  opacity: 0.62;
+}
+
+.hero {
+  min-height: var(--hero-min-height);
+  display: grid;
+  grid-template-columns: 1.05fr 0.95fr;
+  align-items: center;
+  gap: 3rem;
+  padding-top: var(--section-padding);
+  padding-bottom: var(--section-padding);
+  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-color) 11%, var(--page-background)), var(--page-background));
+}
+
+.hero-copy h1,
+.page-heading h1 {
+  max-width: 26ch;
+  margin-bottom: 1.25rem;
+  font-size: clamp(2.2rem, 5vw, 4rem);
+  line-height: 1.15;
+}
+
+.hero-copy > p,
+.page-heading > p,
+.split-copy > p {
+  max-width: 52rem;
+  font-size: 1.15rem;
+  line-height: 1.75;
+  color: color-mix(in srgb, var(--page-text) 75%, transparent);
+}
+
+.eyebrow {
+  color: var(--brand-color);
+  font-size: 0.78rem;
+  font-weight: 900;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+
+.hero-image,
+.split-image,
+.card-image {
+  width: 100%;
+  border-radius: 1.5rem;
+  background: color-mix(in srgb, var(--brand-color) 12%, var(--page-background));
+  object-fit: cover;
+}
+
+.hero-image {
+  min-height: 24rem;
+  max-height: 36rem;
+}
+
+.page-section {
+  padding-top: var(--section-padding);
+  padding-bottom: var(--section-padding);
+}
+
+.page-section.alt {
+  background: color-mix(in srgb, var(--brand-secondary) 5%, var(--page-background));
+}
+
+.page-heading {
+  margin-bottom: 1rem;
+}
+
+.page-heading h1 {
+  font-size: clamp(2.2rem, 5vw, 3.8rem);
+  line-height: 1.15;
+  margin-bottom: 1rem;
+}
+
+.split {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  align-items: center;
+  gap: 3.5rem;
+}
+
+.split h2,
+.section-title {
+  font-size: clamp(2rem, 4vw, 3.2rem);
+  line-height: 1.2;
+}
+
+.split-image {
+  min-height: 24rem;
+}
+
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1.75rem;
+  width: 100%;
+}
+
+.card {
+  padding: 1.4rem;
+  border: 1px solid color-mix(in srgb, var(--page-text) 12%, transparent);
+  border-radius: 1.35rem;
+  background: var(--page-background);
+  box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--brand-secondary) 8%, transparent);
+}
+
+.card h3 {
+  margin-top: 1.2rem;
+  font-size: 1.35rem;
+}
+
+.card p,
+.card li {
+  line-height: 1.65;
+  color: color-mix(in srgb, var(--page-text) 72%, transparent);
+}
+
+.card-image {
+  aspect-ratio: 16 / 10;
+}
+
+.contact-grid {
+  display: grid;
+  grid-template-columns: 1fr 1.35fr;
+  gap: 4rem;
+  align-items: start;
+}
+
+.contact-details {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  font-size: 1.1rem;
+}
+
+.contact-details a {
+  color: var(--brand-color);
+  text-decoration: none;
+  font-weight: 600;
+  word-break: break-all;
+}
+
+.contact-details p {
+  margin: 0;
+  line-height: 1.6;
+}
+
+.contact-form {
+  display: grid;
+  gap: 1rem;
+  padding: 1.5rem;
+  border: 1px solid color-mix(in srgb, var(--page-text) 12%, transparent);
+  border-radius: 1.35rem;
+}
+
+.contact-form label {
+  display: grid;
+  gap: 0.45rem;
+}
+
+.contact-form input,
+.contact-form textarea {
+  width: 100%;
+  padding: 0.85rem 1rem;
+  border: 1px solid color-mix(in srgb, var(--page-text) 20%, transparent);
+  border-radius: 0.8rem;
+  background: var(--page-background);
+  color: var(--page-text);
+}
+
+.site-footer {
+  display: grid;
+  grid-template-columns: 1.2fr 1fr;
+  gap: 2rem;
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+  background: var(--brand-secondary);
+  color: #ffffff;
+}
+
+.site-footer > p {
+  grid-column: 1 / -1;
+  margin-bottom: 0;
+}
+
+@media (max-width: 800px) {
+  .site-header {
+    position: static;
+    flex-wrap: wrap;
+    padding-top: 0.85rem;
+    padding-bottom: 0.85rem;
+  }
+
+  .site-nav {
+    order: 3;
+    width: 100%;
+  }
+
+  .hero,
+  .split,
+  .contact-grid,
+  .site-footer {
+    grid-template-columns: 1fr;
+  }
+
+  .card-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .hero-image {
+    min-height: 18rem;
+  }
+}
+
+/* Fivora Hero Logo & Glow (Vite-style) */
+.hero-fivora-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 3.5rem 2rem;
+  border-radius: 2rem;
+  background: radial-gradient(circle at center, color-mix(in srgb, var(--brand-accent, #00adb5) 18%, transparent), color-mix(in srgb, var(--brand-color, #016a7e) 12%, transparent) 70%, transparent);
+  border: 1px solid color-mix(in srgb, var(--brand-accent, #00adb5) 25%, transparent);
+  box-shadow: 0 20px 40px -15px color-mix(in srgb, var(--brand-accent, #00adb5) 20%, transparent);
+}
+
+.hero-fivora-wrap::before {
+  content: '';
+  position: absolute;
+  inset: -8px;
+  border-radius: 2.5rem;
+  background: radial-gradient(circle, color-mix(in srgb, var(--brand-accent, #00adb5) 35%, transparent) 0%, transparent 70%);
+  filter: blur(25px);
+  z-index: 0;
+  opacity: 0.6;
+  animation: pulseGlow 4s ease-in-out infinite alternate;
+}
+
+@keyframes pulseGlow {
+  0% { opacity: 0.35; transform: scale(0.96); }
+  100% { opacity: 0.75; transform: scale(1.04); }
+}
+
+.hero-fivora-wrap .hero-image {
+  position: relative;
+  z-index: 1;
+  max-width: 220px;
+  max-height: 260px;
+  min-height: auto;
+  background: transparent;
+  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.18));
+  transition: transform 0.4s ease;
+}
+
+.hero-fivora-wrap:hover .hero-image {
+  transform: scale(1.06) translateY(-4px);
+}
+
+/* Developer Quickstart Guide Section */
+.dev-guide-section {
+  border-top: 1px solid color-mix(in srgb, var(--page-text) 10%, transparent);
+  border-bottom: 1px solid color-mix(in srgb, var(--page-text) 10%, transparent);
+  background: color-mix(in srgb, var(--brand-color) 4%, var(--page-background));
+}
+
+.dev-guide-header {
+  text-align: center;
+  max-width: 44rem;
+  margin: 0 auto 2.5rem;
+}
+
+.dev-badge {
+  display: inline-block;
+  padding: 0.35rem 0.9rem;
+  border-radius: 999px;
+  font-size: 0.8rem;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  background: color-mix(in srgb, var(--brand-color) 15%, transparent);
+  color: var(--brand-color);
+  margin-bottom: 0.85rem;
+}
+
+.dev-command-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 1.5rem;
+}
+
+.dev-cmd-card {
+  padding: 1.5rem;
+  border-radius: 1rem;
+  background: var(--page-background);
+  border: 1px solid color-mix(in srgb, var(--page-text) 12%, transparent);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
+  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+}
+
+.dev-cmd-card:hover {
+  transform: translateY(-3px);
+  border-color: var(--brand-accent);
+  box-shadow: 0 8px 24px color-mix(in srgb, var(--brand-color) 15%, transparent);
+}
+
+.dev-cmd-card .cmd-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.75rem;
+  gap: 0.5rem;
+}
+
+.dev-cmd-card .cmd-tag {
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--brand-color);
+}
+
+.dev-cmd-card code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.85rem;
+  font-weight: 700;
+  padding: 0.2rem 0.5rem;
+  border-radius: 0.35rem;
+  background: color-mix(in srgb, var(--page-text) 8%, transparent);
+  color: var(--page-text);
+}
+
+.dev-cmd-card p {
+  margin: 0;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  color: color-mix(in srgb, var(--page-text) 70%, transparent);
+}

package/template/src/app/layout.tsx

@@ -0,0 +1,26 @@
+import type { Metadata } from 'next';
+import type { ReactNode } from 'react';
+import siteData from '@/data/site-data.json';
+import { SiteDataProvider } from '@/lib/siteDataContext';
+import SiteChrome from '@/components/SiteChrome';
+import './globals.css';
+
+export const metadata: Metadata = {
+  title: siteData.content.common.websiteTitle,
+  description: siteData.content.common.shortDescription,
+  icons: {
+    icon: '/fivora-icon.svg',
+  },
+};
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <SiteDataProvider>
+          <SiteChrome>{children}</SiteChrome>
+        </SiteDataProvider>
+      </body>
+    </html>
+  );
+}