From fa987bac7d199a2e549d680cf75cc75c325cf6d2 Mon Sep 17 00:00:00 2001 From: Travis Fischer Date: Mon, 30 Jun 2025 01:34:30 -0500 Subject: [PATCH] feat(web): improve header and footer --- CLAUDE.md | 5 +- apps/web/src/app/about/page.tsx | 15 +- apps/web/src/app/page.tsx | 11 +- apps/web/src/app/publishing/page.tsx | 8 +- apps/web/src/components/app-projects-list.tsx | 6 +- apps/web/src/components/demand-side-cta.tsx | 3 +- apps/web/src/components/footer.tsx | 104 --------- apps/web/src/components/footer/dynamic.tsx | 42 ++++ apps/web/src/components/footer/index.tsx | 198 ++++++++++++++++++ apps/web/src/components/header/dynamic.tsx | 34 +++ apps/web/src/components/header/index.tsx | 53 ++--- .../src/components/header/styles.module.css | 4 - .../src/components/mcp-gateway-features.tsx | 4 +- apps/web/src/components/supply-side-cta.tsx | 15 +- apps/web/src/lib/config.ts | 9 +- 15 files changed, 325 insertions(+), 186 deletions(-) delete mode 100644 apps/web/src/components/footer.tsx create mode 100644 apps/web/src/components/footer/dynamic.tsx create mode 100644 apps/web/src/components/footer/index.tsx create mode 100644 apps/web/src/components/header/dynamic.tsx diff --git a/CLAUDE.md b/CLAUDE.md index 7b8988c0..64920efd 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -14,9 +14,10 @@ The platform consists of: - **Gateway Service** (`apps/gateway/`) - Cloudflare Worker that proxies requests to origin MCP/OpenAPI services - **Website** (`apps/web/`) - Next.js site for both the marketing site and authenticated webapp - **E2E Tests** (`apps/e2e/`) - End-to-end test suite for HTTP and MCP gateway requests -- **Shared Packages** (`packages/`) - Common utilities, types, validators, and configuration +- **Shared Packages** (`packages/`) - Common utilities, types, validators, and config +- **StdLib Packages** (`stdlib/`) - TS AI SDK adapters -The gateway accepts requests at `https://gateway.agentic.so/deploymentIdentifier/toolName` for HTTP requests or `https://gateway.agentic.so/deploymentIdentifier/mcp` for MCP. +The gateway accepts requests at `https://gateway.agentic.so/deploymentIdentifier/tool-ame` for HTTP requests or `https://gateway.agentic.so/deploymentIdentifier/mcp` for MCP. ### Development Commands diff --git a/apps/web/src/app/about/page.tsx b/apps/web/src/app/about/page.tsx index f863600b..e5b9706d 100644 --- a/apps/web/src/app/about/page.tsx +++ b/apps/web/src/app/about/page.tsx @@ -1,5 +1,6 @@ import Link from 'next/link' +import { DotsSection } from '@/components/dots-section' import { PageContainer } from '@/components/page-container' import { SupplySideCTA } from '@/components/supply-side-cta' import { githubUrl, twitterUrl } from '@/lib/config' @@ -179,13 +180,15 @@ export default function AboutPage() { {/* CTA section */} -
-

- Don't miss out on this AI wave -

+ +
+

+ Don't miss out on the AI wave +

- -
+ + + ) } diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx index 0f3f8065..51c330c3 100644 --- a/apps/web/src/app/page.tsx +++ b/apps/web/src/app/page.tsx @@ -9,11 +9,7 @@ import { HeroSimulation2 } from '@/components/hero-simulation-2' import { MCPMarketplaceFeatures } from '@/components/mcp-marketplace-features' import { PageContainer } from '@/components/page-container' import { SupplySideCTA } from '@/components/supply-side-cta' -import { - docsPublishingQuickStartUrl, - githubUrl, - twitterUrl -} from '@/lib/config' +import { githubUrl, twitterUrl } from '@/lib/config' import { defaultConfig, getCodeForDeveloperConfig @@ -117,7 +113,10 @@ export default async function TheBestDamnLandingPageEver() {

- + And of course, MCP is an integral part of that mission. We're working on a bunch of features designed to simplify advanced MCP use cases like bundling multiple diff --git a/apps/web/src/app/publishing/page.tsx b/apps/web/src/app/publishing/page.tsx index a14d4190..01add8b8 100644 --- a/apps/web/src/app/publishing/page.tsx +++ b/apps/web/src/app/publishing/page.tsx @@ -8,7 +8,7 @@ import { GitHubStarCounter } from '@/components/github-star-counter' import { MCPGatewayFeatures } from '@/components/mcp-gateway-features' import { PageContainer } from '@/components/page-container' import { SupplySideCTA } from '@/components/supply-side-cta' -import { docsPublishingUrl, githubUrl, twitterUrl } from '@/lib/config' +import { githubUrl, twitterUrl } from '@/lib/config' export default function PublishingMCPsPage() { return ( @@ -47,7 +47,7 @@ export default function PublishingMCPsPage() {

- + Deploy any MCP server or OpenAPI service to Agentic's MCP Gateway, which handles auth, billing, rate-limiting, caching, etc. And instantly turn your API into a paid MCP product that supports every @@ -65,7 +65,7 @@ export default function PublishingMCPsPage() {

- + Configuring your Agentic project {' '} is straightforward , regardless of whether your origin is an MCP @@ -74,7 +74,7 @@ export default function PublishingMCPsPage() { file, or fall back to using an{' '} agentic.config.json file to configure your project.{' '} - + Learn more . diff --git a/apps/web/src/components/app-projects-list.tsx b/apps/web/src/components/app-projects-list.tsx index bad77898..ce3bca6f 100644 --- a/apps/web/src/components/app-projects-list.tsx +++ b/apps/web/src/components/app-projects-list.tsx @@ -5,7 +5,6 @@ import useInfiniteScroll from 'react-infinite-scroll-hook' import { useAuthenticatedAgentic } from '@/components/agentic-provider' import { LoadingIndicator } from '@/components/loading-indicator' -import { docsPublishingQuickStartUrl } from '@/lib/config' import { useInfiniteQuery } from '@/lib/query-client' export function AppProjectsList() { @@ -64,7 +63,10 @@ export function AppProjectsList() { ) : !projects.length ? (

No projects found.{' '} - + Create your first project to get started.

diff --git a/apps/web/src/components/demand-side-cta.tsx b/apps/web/src/components/demand-side-cta.tsx index 0d6bce26..293c8652 100644 --- a/apps/web/src/components/demand-side-cta.tsx +++ b/apps/web/src/components/demand-side-cta.tsx @@ -2,7 +2,6 @@ import Link from 'next/link' import { HeroButton } from '@/components/hero-button' import { Button } from '@/components/ui/button' -import { docsUrl } from '@/lib/config' export function DemandSideCTA() { return ( @@ -14,7 +13,7 @@ export function DemandSideCTA() { diff --git a/apps/web/src/components/footer.tsx b/apps/web/src/components/footer.tsx deleted file mode 100644 index 9dd96d45..00000000 --- a/apps/web/src/components/footer.tsx +++ /dev/null @@ -1,104 +0,0 @@ -import Link from 'next/link' - -import { ActiveLink } from '@/components/active-link' -import { GitHubIcon } from '@/icons/github' -import { TwitterIcon } from '@/icons/twitter' -import { copyright, docsUrl, githubUrl, twitterUrl } from '@/lib/config' - -export function Footer() { - return ( -
-
-
-
-
-

Site

- - -
-
- -
-
-

TODO

- -
-
TODO
-
-
-
- -
-
-

Social

- - -
-
-
- -
- {copyright} -
-
-
- ) -} diff --git a/apps/web/src/components/footer/dynamic.tsx b/apps/web/src/components/footer/dynamic.tsx new file mode 100644 index 00000000..4f61c30e --- /dev/null +++ b/apps/web/src/components/footer/dynamic.tsx @@ -0,0 +1,42 @@ +'use client' + +import { ActiveLink } from '@/components/active-link' +import { useAgentic } from '@/components/agentic-provider' + +export function DynamicFooter() { + const ctx = useAgentic() + + return ( + <> + {ctx?.isAuthenticated ? ( + <> +
+ + Dashboard + +
+ +
+ + Logout + +
+ + ) : ( + <> +
+ + Log in + +
+ +
+ + Sign up + +
+ + )} + + ) +} diff --git a/apps/web/src/components/footer/index.tsx b/apps/web/src/components/footer/index.tsx new file mode 100644 index 00000000..cc8eab0c --- /dev/null +++ b/apps/web/src/components/footer/index.tsx @@ -0,0 +1,198 @@ +import Link from 'next/link' + +import { ActiveLink } from '@/components/active-link' +import { GitHubIcon } from '@/icons/github' +import { TwitterIcon } from '@/icons/twitter' +import { copyright, githubUrl, twitterUrl } from '@/lib/config' + +import { DynamicFooter } from './dynamic' + +export function Footer() { + return ( +
+
+
+
+
+

Platform

+ + +
+
+ +
+
+

Resources

+ + +
+
+ +
+
+

Company

+ + +
+
+ +
+
+

Social

+ + +
+
+
+ +
+ {copyright} +
+
+
+ ) +} diff --git a/apps/web/src/components/header/dynamic.tsx b/apps/web/src/components/header/dynamic.tsx new file mode 100644 index 00000000..ce5a5e14 --- /dev/null +++ b/apps/web/src/components/header/dynamic.tsx @@ -0,0 +1,34 @@ +'use client' + +import { ActiveLink } from '@/components/active-link' +import { useAgentic } from '@/components/agentic-provider' + +export function DynamicHeader() { + const ctx = useAgentic() + + return ( + <> + {ctx?.isAuthenticated ? ( + <> + + Dashboard + + + + Logout + + + ) : ( + <> + + Log in + + + + Sign up + + + )} + + ) +} diff --git a/apps/web/src/components/header/index.tsx b/apps/web/src/components/header/index.tsx index 125bf814..3a75f39d 100644 --- a/apps/web/src/components/header/index.tsx +++ b/apps/web/src/components/header/index.tsx @@ -1,32 +1,24 @@ -'use client' - -import { useTheme } from 'next-themes' - import { ActiveLink } from '@/components/active-link' -import { useAgentic } from '@/components/agentic-provider' import { DarkModeToggle } from '@/components/dark-mode-toggle' -import { docsUrl } from '@/lib/config' import { cn } from '@/lib/utils' +import { DynamicHeader } from './dynamic' import styles from './styles.module.css' export function Header() { - // TODO: use CSS for this instead of a hook - const { resolvedTheme } = useTheme() - const ctx = useAgentic() - return (
- + AGENTIC + AGENTIC @@ -38,31 +30,14 @@ export function Header() { MCP Marketplace - + Docs - {ctx?.isAuthenticated ? ( - <> - - Dashboard - - - - Logout - - - ) : ( - <> - - Login - - - - Sign up - - - )} +
diff --git a/apps/web/src/components/header/styles.module.css b/apps/web/src/components/header/styles.module.css index 86c6a2ba..bb5f97a3 100644 --- a/apps/web/src/components/header/styles.module.css +++ b/apps/web/src/components/header/styles.module.css @@ -38,10 +38,6 @@ min-height: 32px; } -.logo { - user-select: none; -} - .navHeader { display: flex; flex-direction: row; diff --git a/apps/web/src/components/mcp-gateway-features.tsx b/apps/web/src/components/mcp-gateway-features.tsx index 5ad5b593..9c457b69 100644 --- a/apps/web/src/components/mcp-gateway-features.tsx +++ b/apps/web/src/components/mcp-gateway-features.tsx @@ -12,10 +12,10 @@ import { UserIcon } from 'lucide-react' -import { docsPublishingUrl } from '@/lib/config' - import { Feature, type FeatureData } from './feature' +const docsPublishingUrl = 'https://docs.agentic.so/publishing' + const mcpGatewayFeatures: FeatureData[] = [ { name: 'Auth', diff --git a/apps/web/src/components/supply-side-cta.tsx b/apps/web/src/components/supply-side-cta.tsx index ceebbac3..6e21fe58 100644 --- a/apps/web/src/components/supply-side-cta.tsx +++ b/apps/web/src/components/supply-side-cta.tsx @@ -6,12 +6,7 @@ import Link from 'next/link' import { HeroButton, type HeroButtonVariant } from '@/components/hero-button' import { Button } from '@/components/ui/button' import { GitHubIcon } from '@/icons/github' -import { - calendarBookingUrl, - docsPublishingQuickStartUrl, - docsPublishingUrl, - githubUrl -} from '@/lib/config' +import { calendarBookingUrl, githubUrl } from '@/lib/config' import { useAgentic } from './agentic-provider' import { GitHubStarCounter } from './github-star-counter' @@ -31,8 +26,10 @@ export function SupplySideCTA({ Quick Start @@ -50,7 +47,7 @@ export function SupplySideCTA({ ) : variant === 'docs' ? ( ) : (