Spire Business
Brand & Style Guide

/* Spire Brand Colors — CSS Custom Properties */
/* Use these in Tailwind via: text-navy, bg-gold, etc. */

:root {
  /* Core Brand */
  --color-navy:       oklch(0.28 0.09 264);  /* #293980 */
  --color-navy-dark:  oklch(0.18 0.07 264);  /* #1a2456 */
  --color-navy-light: oklch(0.38 0.08 264);  /* #3d4f8a */
  --color-gold:       oklch(0.72 0.12 75);   /* #C9A84C */
  --color-gold-light: oklch(0.88 0.08 75);   /* #e8d5a0 */

  /* Backgrounds */
  --color-sky-light:  oklch(0.95 0.02 220);  /* #eef3f8 */
  --color-sky-pale:   oklch(0.97 0.01 220);  /* #f5f8fa */
  --background:       oklch(0.99 0.002 220); /* Near-white with cool tint */
}

{/* Section Eyebrow Pattern — use at the start of every section */}
<div className="flex items-center gap-3 mb-3">
  <div className="h-px w-6 bg-gold" />
  <span className="font-body text-gold text-[11px] font-bold uppercase tracking-[0.2em]">
    Section Label Here
  </span>
</div>
<h2 className="font-display text-navy-dark" style={{ fontSize: "clamp(1.8rem, 3vw, 2.6rem)" }}>
  Section Headline Goes Here
</h2>

// Standard scroll-triggered entrance animation
// Used on every major section across the site

function useInView(threshold = 0.15) {
  const ref = useRef<HTMLDivElement>(null);
  const [inView, setInView] = useState(false);
  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting) setInView(true); },
      { threshold }
    );
    if (ref.current) observer.observe(ref.current);
    return () => observer.disconnect();
  }, [threshold]);
  return { ref, inView };
}

// Usage:
const { ref, inView } = useInView(0.1);

<div
  ref={ref}
  className={`transition-all duration-700 ${
    inView ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6"
  }`}
  style={{ transitionDelay: "100ms" }} // stagger with index * 80ms
>
  Content here
</div>

client/
  src/
    pages/           ← Page-level components (one per route)
    components/
      Navigation.tsx ← Sticky nav — import on every page
      Footer.tsx     ← Site footer — import on every page
      ui/            ← shadcn/ui primitives
    index.css        ← Global styles + Spire design tokens
  index.html         ← Google Fonts loaded here

Key files:
  client/src/App.tsx        ← Route definitions
  client/src/index.css      ← ALL design tokens live here
  client/src/pages/*.tsx    ← Individual page components

/*
 * SPIRE BUSINESS — [Page Name] Page
 * Design: Corporate Modernism meets Editorial Finance
 * Colors: Navy (#293980), Gold (#C9A84C), White, Sky-light
 * Typography: Playfair Display headlines + DM Sans body
 */

import { useEffect, useRef, useState } from "react";
import { Link } from "wouter";
import Navigation from "@/components/Navigation";
import Footer from "@/components/Footer";

// Standard scroll animation hook — copy this into every page
function useInView(threshold = 0.15) {
  const ref = useRef<HTMLDivElement>(null);
  const [inView, setInView] = useState(false);
  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting) setInView(true); },
      { threshold }
    );
    if (ref.current) observer.observe(ref.current);
    return () => observer.disconnect();
  }, [threshold]);
  return { ref, inView };
}

export default function PageName() {
  const heroSection = useInView(0.1);

  return (
    <div className="min-h-screen bg-white overflow-x-hidden">
      <Navigation />

      {/* ── Hero Section ── */}
      <section className="pt-28 pb-0 md:pt-36 bg-navy overflow-hidden">
        <div className="container">
          <div ref={heroSection.ref} className={`max-w-3xl transition-all duration-700 ${
            heroSection.inView ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8"
          }`}>
            {/* Eyebrow */}
            <div className="flex items-center gap-3 mb-4">
              <div className="h-px w-8 bg-gold" />
              <span className="font-body text-gold text-xs font-semibold uppercase tracking-widest">
                Eyebrow Label
              </span>
            </div>
            {/* Headline */}
            <h1 className="font-display text-white mb-5" style={{ fontSize: "clamp(2rem, 4vw, 3.2rem)" }}>
              Primary Headline<br />
              <span className="text-gold italic">Gold Italic Accent</span>
            </h1>
            {/* Subheadline */}
            <p className="font-body text-white/75 text-lg leading-relaxed max-w-2xl mb-8">
              Supporting description text goes here.
            </p>
            {/* CTA */}
            <Link href="/contact">
              <button className="group flex items-center gap-2 bg-gold text-navy-dark font-body font-semibold text-sm px-6 py-3 rounded transition-all hover:bg-yellow-500 hover:shadow-lg hover:-translate-y-0.5">
                Primary CTA
              </button>
            </Link>
          </div>
        </div>
        {/* Wave divider — always end navy hero sections with this */}
        <div className="mt-14">
          <svg viewBox="0 0 1440 48" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" className="w-full block">
            <path d="M0 48L1440 48L1440 12C1200 48 720 0 0 36L0 48Z" fill="white" />
          </svg>
        </div>
      </section>

      {/* ── Content Section ── */}
      <section className="py-16 md:py-24 bg-white">
        <div className="container">
          {/* Section header */}
          <div className="text-center mb-12">
            <div className="flex items-center justify-center gap-3 mb-4">
              <div className="h-px w-8 bg-gold" />
              <span className="font-body text-gold text-xs font-semibold uppercase tracking-widest">
                Section Label
              </span>
              <div className="h-px w-8 bg-gold" />
            </div>
            <h2 className="font-display text-navy-dark mb-4" style={{ fontSize: "clamp(1.8rem, 3vw, 2.6rem)" }}>
              Section Headline
            </h2>
            <p className="font-body text-slate-500 text-base max-w-2xl mx-auto">
              Section description text.
            </p>
          </div>
          {/* Content here */}
        </div>
      </section>

      <Footer />
    </div>
  );
}

// In client/src/App.tsx:

// 1. Import the page component
import NewPage from "./pages/NewPage";

// 2. Add the route inside <Switch>
<Route path="/new-page" component={NewPage} />

// 3. To add to navigation, edit client/src/components/Navigation.tsx:
const navLinks = [
  { label: "Services", href: "/services" },
  { label: "Why Fractional CPO", href: "/why-fractional" },
  { label: "About", href: "/about" },
  { label: "Testimonials", href: "/testimonials" },
  { label: "Contact", href: "/contact" },
  // Add new link here:
  { label: "New Page", href: "/new-page" },
];

# NEVER store images in client/public/ or client/src/assets/
# This causes deployment timeouts.

# CORRECT workflow:
# 1. Store originals in /home/ubuntu/webdev-static-assets/
# 2. Upload to CDN:
manus-upload-file --webdev /home/ubuntu/webdev-static-assets/image.jpg

# 3. Use the returned CDN URL in code:
# <img src="https://cdn.manus.im/..." alt="..." />

# Current CDN images in use:
# Hero portrait (Linda, nano banana style): CDN URL in Home.tsx
# About portrait (Linda, warm library): CDN URL in About.tsx