diff --git a/apps/cockpit/src/app/layout.tsx b/apps/cockpit/src/app/layout.tsx index 95cf9d5e9..58ed30a43 100644 --- a/apps/cockpit/src/app/layout.tsx +++ b/apps/cockpit/src/app/layout.tsx @@ -17,7 +17,7 @@ export default function RootLayout({ children }: RootLayoutProps) { diff --git a/apps/cockpit/src/components/cockpit-shell.tsx b/apps/cockpit/src/components/cockpit-shell.tsx index 270b4e330..a0cfcde54 100644 --- a/apps/cockpit/src/components/cockpit-shell.tsx +++ b/apps/cockpit/src/components/cockpit-shell.tsx @@ -79,8 +79,11 @@ export function CockpitShell({ onClose={() => setIsSidebarOpen(false)} /> -
-
+
+
+ +
+
+ MIT + Angular 20+ + Zoneless ready + LangGraph + AG-UI +
+ + +
+ + + 
+{`import { provideAgent } from '@ngaf/langgraph';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideAgent({
+      apiUrl: '/agent',
+      assistantId: 'my-agent',
+    }),
+  ],
+};
+
+// any component
+export class ChatComponent {
+  agent = agent();
+  messages = this.agent.messages;
+  status = this.agent.status;
+}`}
+
+ + } + /> + + } + /> + + + + ); } diff --git a/apps/website/src/app/chat/page.tsx b/apps/website/src/app/chat/page.tsx index bbe3eec4b..87bba00e2 100644 --- a/apps/website/src/app/chat/page.tsx +++ b/apps/website/src/app/chat/page.tsx @@ -1,33 +1,140 @@ -// apps/website/src/app/chat/page.tsx -import { ChatLandingHero } from '../../components/landing/chat-landing/ChatLandingHero'; -import { ChatLandingProblemSolution } from '../../components/landing/chat-landing/ChatLandingProblemSolution'; -import { ChatLandingFeaturesGrid } from '../../components/landing/chat-landing/ChatLandingFeaturesGrid'; -import { ChatLandingCodeShowcase } from '../../components/landing/chat-landing/ChatLandingCodeShowcase'; -import { ChatLandingComparison } from '../../components/landing/chat-landing/ChatLandingComparison'; -import { ChatLandingWhitePaperGate } from '../../components/landing/chat-landing/ChatLandingWhitePaperGate'; -import { ChatLandingStackSiblings } from '../../components/landing/chat-landing/ChatLandingStackSiblings'; -import { ChatLandingFooterCTA } from '../../components/landing/chat-landing/ChatLandingFooterCTA'; import { tokens } from '@ngaf/design-tokens'; +import { Container } from '../../components/ui/Container'; +import { Section } from '../../components/ui/Section'; +import { Eyebrow } from '../../components/ui/Eyebrow'; +import { Button } from '../../components/ui/Button'; +import { Pill } from '../../components/ui/Pill'; +import { BrowserFrame } from '../../components/ui/BrowserFrame'; +import { FeatureBlock } from '../../components/landing/FeatureBlock'; +import { WhitePaperBlock } from '../../components/landing/WhitePaperBlock'; +import { FinalCTA } from '../../components/landing/FinalCTA'; +import { ChatLandingCodeShowcase } from '../../components/landing/chat-landing/ChatLandingCodeShowcase'; export const metadata = { title: '@ngaf/chat — Batteries-Included Agent Chat for Angular', description: 'Production agent chat UI in days, not sprints. Built on Vercel json-render and Google A2UI specs.', }; -export default function ChatPage() { +export default async function ChatPage() { return ( -
-
+ + {/* Search prompt */} +
+ +
+

+ Looking for something specific? +

+

-

- {lib.title} -

-

- {lib.description} -

-
- Get started → -
- - ))} -
- - + Press ⌘K to search the docs. +

+ + +
+ ); } diff --git a/apps/website/src/app/global.css b/apps/website/src/app/global.css index ad8b77ecd..e48f647af 100644 --- a/apps/website/src/app/global.css +++ b/apps/website/src/app/global.css @@ -17,6 +17,29 @@ --font-garamond: "EB Garamond", Georgia, serif; --font-inter: Inter, system-ui, sans-serif; --font-mono: "JetBrains Mono", monospace; + + /* New surfaces — Phase 1 of Statusbrew refactor */ + --color-canvas: #fafbfc; + --color-surface: #ffffff; + --color-surface-tinted: #f4f6fb; + --color-surface-dim: #eef1f7; + --color-border: #e6e8ee; + --color-border-strong: #d2d6e0; + --color-text-inverted: #ffffff; + --color-accent-hover: #003070; + + /* Radii */ + --radius-sm: 6px; + --radius-md: 10px; + --radius-lg: 14px; + --radius-xl: 20px; + --radius-full: 999px; + + /* Shadows */ + --shadow-sm: 0 1px 2px rgba(15, 23, 41, 0.04), 0 1px 1px rgba(15, 23, 41, 0.03); + --shadow-md: 0 4px 12px rgba(15, 23, 41, 0.06), 0 2px 4px rgba(15, 23, 41, 0.04); + --shadow-lg: 0 12px 32px rgba(15, 23, 41, 0.08), 0 4px 8px rgba(15, 23, 41, 0.05); + --shadow-focus: 0 0 0 3px rgba(0, 64, 144, 0.25); } :root { @@ -33,13 +56,6 @@ --color-sidebar-bg: rgba(255, 255, 255, 0.45); --color-angular-red: #DD0031; - --glass-bg: rgba(255, 255, 255, 0.45); - --glass-bg-hover: rgba(255, 255, 255, 0.55); - --glass-blur: 16px; - --glass-border: rgba(255, 255, 255, 0.6); - --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.06); - - --gradient-bg-flow: linear-gradient(135deg, #fef0f3 0%, #f4f0ff 45%, #eaf3ff 70%, #e6f4ff 100%); } * { @@ -150,3 +166,79 @@ html { .docs-prose th { text-align: left; padding: 0.5rem 0.75rem; font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; color: #8b8fa3; border-bottom: 1px solid rgba(0, 64, 144, 0.15); } .docs-prose td { padding: 0.5rem 0.75rem; border-bottom: 1px solid rgba(0, 64, 144, 0.08); color: #555770; } .docs-prose td code { font-size: 0.8em; } + +/* UI primitive — Card hover */ +[data-ui="card"][data-hoverable] { + cursor: default; +} +[data-ui="card"][data-hoverable]:hover { + box-shadow: var(--shadow-md); + border-color: var(--color-border-strong); + transform: translateY(-1px); +} +@media (prefers-reduced-motion: reduce) { + [data-ui="card"][data-hoverable]:hover { + transform: none; + } +} + +/* UI primitive — FAQ */ +[data-ui="faq-item"] > summary::-webkit-details-marker { + display: none; +} +[data-ui="faq-item"][open] [data-ui="faq-chevron"] { + transform: rotate(180deg); +} +[data-ui="faq-item"] > summary:focus-visible { + outline: none; + box-shadow: var(--shadow-focus); + border-radius: var(--radius-sm); +} + +/* Docs — readable column max-width */ +.docs-prose { + max-width: 70ch; +} +@media (max-width: 768px) { + .docs-prose { + max-width: 100%; + } +} + +/* Docs — hash-anchor affordance on H2/H3 */ +.docs-prose h2, +.docs-prose h3 { + position: relative; +} +.docs-prose h2 .heading-anchor, +.docs-prose h3 .heading-anchor { + position: absolute; + left: -1.25em; + top: 0; + font-family: var(--font-mono); + font-weight: 400; + color: var(--color-text-muted); + opacity: 0; + text-decoration: none; + transition: opacity 120ms ease; +} +.docs-prose h2:hover .heading-anchor, +.docs-prose h3:hover .heading-anchor, +.docs-prose h2 .heading-anchor:focus-visible, +.docs-prose h3 .heading-anchor:focus-visible { + opacity: 0.6; +} +.docs-prose h2 .heading-anchor:hover, +.docs-prose h3 .heading-anchor:hover { + opacity: 1; + color: var(--color-accent); +} +@media (max-width: 768px) { + /* On narrow viewports, drop the absolute positioning so the hash doesn't overlap the page edge. */ + .docs-prose h2 .heading-anchor, + .docs-prose h3 .heading-anchor { + position: static; + margin-right: 6px; + display: none; + } +} diff --git a/apps/website/src/app/page.tsx b/apps/website/src/app/page.tsx index 5681b4628..6a64a4c2c 100644 --- a/apps/website/src/app/page.tsx +++ b/apps/website/src/app/page.tsx @@ -1,35 +1,215 @@ -import { HeroTwoCol } from '../components/landing/HeroTwoCol'; -import { PositioningStrip } from '../components/landing/PositioningStrip'; -import { ProblemSection } from '../components/landing/ProblemSection'; -import { PilotSolution } from '../components/landing/PilotSolution'; -import { TheStack } from '../components/landing/TheStack'; -import { WhitePaperSection } from '../components/landing/WhitePaperSection'; -import { PilotFooterCTA } from '../components/landing/PilotFooterCTA'; -import { tokens } from '../../lib/design-tokens'; +import { Hero } from '../components/landing/Hero'; +import { ProofStrip } from '../components/landing/ProofStrip'; +import { Differentiator } from '../components/landing/Differentiator'; +import { FeatureBlock } from '../components/landing/FeatureBlock'; +import { BrowserFrame } from '../components/ui/BrowserFrame'; +import { LiveCockpitFrame } from '../components/landing/LiveCockpitFrame'; +import { PilotBlock } from '../components/landing/PilotBlock'; +import { WhitePaperBlock } from '../components/landing/WhitePaperBlock'; +import { Promises } from '../components/landing/Promises'; +import { HomeFAQ } from '../components/landing/HomeFAQ'; +import { FinalCTA } from '../components/landing/FinalCTA'; +import { tokens } from '@ngaf/design-tokens'; export default async function HomePage() { return ( -
- {/* Ambient gradient blobs */} -