// Pillars Scaling Systems — solar landing page // (CSS fade-up reveals via IntersectionObserver, gradient gold/silver headers, // conic Button1, GlareCard, starBG background, Inter font @600). // Drop into vite-source/src/components/Landing.jsx and render from App.jsx. const { useState, useRef, useEffect, useCallback, memo } = React; // CSS-driven fade-up reveal — observes when an element scrolls in, then adds .is-revealed. // Replaces motion/react usage to avoid the React-version split with esm.sh. function Reveal({ as: Tag = "div", delay = 0, className = "", children, ...rest }) { const ref = useRef(null); const [shown, setShown] = useState(false); useEffect(() => { if (!ref.current) return; const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setShown(true); obs.disconnect(); } }, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" }); obs.observe(ref.current); return () => obs.disconnect(); }, []); return ( {children} ); } window.Reveal = Reveal; // ------- Button1 (gold gradient + shimmer sweep + pulse glow) ------- function Button1({ children = "Claim My Metro", icon = true, size = "md", onClick }) { const sizeClass = size === "lg" ? "h-16 px-12 text-lg rounded-xl gap-3" : "h-12 px-6 text-sm rounded-lg gap-2"; return ( ); } window.Button1 = Button1; // ------- GlareCard (3D tilt + foil) — port of vite glare-card.jsx ------- function GlareCard({ children, className = "" }) { const ref = useRef(null); const stateRef = useRef({ glare: { x: 50, y: 50 }, bg: { x: 50, y: 50 }, rot: { x: 0, y: 0 } }); const inside = useRef(false); const cs = { "--m-x": "50%", "--m-y": "50%", "--r-x": "0deg", "--r-y": "0deg", "--bg-x": "50%", "--bg-y": "50%", "--duration": "300ms", "--foil-size": "100%", "--opacity": "0", "--radius": "20px", "--easing": "ease", }; const bgs = { "--step": "5%", "--foil-svg": `url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.99994 3.419C2.99994 3.419 21.6142 7.43646 22.7921 12.153C23.97 16.8695 3.41838 23.0306 3.41838 23.0306' stroke='white' stroke-width='5' stroke-miterlimit='3.86874' stroke-linecap='round'/%3E%3C/svg%3E")`, "--rainbow": "repeating-linear-gradient(0deg,#FFD86B calc(var(--step)*1),#E8C76A calc(var(--step)*2),#D4AF37 calc(var(--step)*3),#A88323 calc(var(--step)*4),#D4AF37 calc(var(--step)*5),#E8C76A calc(var(--step)*6),#FFD86B calc(var(--step)*7)) 0% var(--bg-y)/200% 700% no-repeat", "--diagonal": "repeating-linear-gradient(128deg,#0e152e 0%,hsl(220,30%,40%) 3.8%,hsl(220,30%,40%) 4.5%,hsl(220,30%,40%) 5.2%,#0e152e 10%,#0e152e 12%) var(--bg-x) var(--bg-y)/300% no-repeat", "--shade": "radial-gradient(farthest-corner circle at var(--m-x) var(--m-y),rgba(255,255,255,0.1) 12%,rgba(255,255,255,0.15) 20%,rgba(255,255,255,0.25) 120%) var(--bg-x) var(--bg-y)/300% no-repeat", backgroundBlendMode: "hue, hue, hue, overlay", }; const apply = () => { if (!ref.current) return; const { glare, bg, rot } = stateRef.current; ref.current.style.setProperty("--m-x", glare.x + "%"); ref.current.style.setProperty("--m-y", glare.y + "%"); ref.current.style.setProperty("--r-x", rot.x + "deg"); ref.current.style.setProperty("--r-y", rot.y + "deg"); ref.current.style.setProperty("--bg-x", bg.x + "%"); ref.current.style.setProperty("--bg-y", bg.y + "%"); }; return (
{ const rect = e.currentTarget.getBoundingClientRect(); const px = ((e.clientX - rect.left) / rect.width) * 100; const py = ((e.clientY - rect.top) / rect.height) * 100; const dx = px - 50, dy = py - 50; const s = stateRef.current; s.bg.x = 50 + px / 4 - 12.5; s.bg.y = 50 + py / 3 - 16.67; s.rot.x = -(dx / 3.5) * 0.4; s.rot.y = (dy / 2) * 0.4; s.glare.x = px; s.glare.y = py; apply(); }} onPointerEnter={() => { inside.current = true; setTimeout(() => { if (inside.current && ref.current) ref.current.style.setProperty("--duration", "0s"); }, 300); }} onPointerLeave={() => { inside.current = false; if (ref.current) { ref.current.style.removeProperty("--duration"); ref.current.style.setProperty("--r-x", "0deg"); ref.current.style.setProperty("--r-y", "0deg"); } }} >
{children}
); } window.GlareCard = GlareCard; // ------- FocusCards (sibling-blur on hover) — port of focus-cards.jsx ------- function FocusCards({ items }) { const [hovered, setHovered] = useState(null); return (
{items.map((c, i) => (
setHovered(i)} onMouseLeave={() => setHovered(null)} onClick={() => c.onClick && c.onClick(i)} className={ "rounded-xl relative bg-neutral-900 overflow-hidden h-56 md:h-72 w-full transition-all duration-300 ease-out cursor-pointer border border-amber-400/10 " + (hovered !== null && hovered !== i ? "blur-sm scale-[0.98]" : "") } > {c.src ? {c.title} : (
)}

{c.desc}

{c.title}
))}
); } window.FocusCards = FocusCards; const HSilver = ({ children }) => ( {children} ); const HGold = ({ children }) => ( {children} ); // Highlights mandated by PRD const Hi = { accent: ({ children }) => ( {children} ), proof: ({ children }) => ( {children} ), risk: ({ children }) => ( {children} ), urgency: ({ children }) => ( {children} ), }; // ------- Wordmark (logo mark + PILLARS SCALING SYSTEMS) ------- function Wordmark({ size = "text-sm sm:text-lg" }) { return ( Pillars Scaling Systems PILLARS SCALING SYSTEMS ); } // ------- Survey Modal ------- function SurveyModal() { const [open, setOpen] = useState(false); useEffect(() => { const handler = () => setOpen(true); window.addEventListener("stellmaris:opensurvey", handler); return () => window.removeEventListener("stellmaris:opensurvey", handler); }, []); useEffect(() => { const k = (e) => { if (e.key === "Escape") setOpen(false); }; document.addEventListener("keydown", k); return () => document.removeEventListener("keydown", k); }, []); useEffect(() => { document.body.style.overflow = open ? "hidden" : ""; return () => { document.body.style.overflow = ""; }; }, [open]); if (!open) return null; return (
setOpen(false)} >
e.stopPropagation()} className="relative w-full max-w-xl bg-slate-900 rounded-2xl border border-amber-400/20 overflow-hidden shadow-[0_30px_80px_rgba(0,0,0,0.7)]" >