From 525bde7729868017b1deb994744700f7608ae007 Mon Sep 17 00:00:00 2001 From: tobias-tengler <45513122+tobias-tengler@users.noreply.github.com> Date: Sat, 30 May 2026 14:39:05 +0200 Subject: [PATCH 1/2] wip: Re-add existing pages --- website-next/app/(content)/help/page.tsx | 46 +++++- website-next/app/(content)/page.tsx | 3 +- .../app/(content)/platform/analytics/page.tsx | 64 +++++++- .../platform/continuous-integration/page.tsx | 59 ++++++- .../app/(content)/platform/ecosystem/page.tsx | 103 ++++++++++++- website-next/app/(content)/platform/page.tsx | 54 +++++++ website-next/app/(content)/pricing/page.tsx | 4 +- .../(content)/products/hotchocolate/page.tsx | 79 +++++++++- .../app/(content)/products/nitro/page.tsx | 93 ++++++++++- .../products/strawberryshake/page.tsx | 69 ++++++++- website-next/app/(content)/resources/page.tsx | 71 ++++++++- .../app/(content)/services/advisory/page.tsx | 77 +++++++++- website-next/app/(content)/services/page.tsx | 54 +++++++ .../services/support/contact/page.tsx | 101 +++++++++++- .../app/(content)/services/support/page.tsx | 144 +++++++++++++++++- .../services/support/thank-you/page.tsx | 20 ++- .../app/(content)/services/training/page.tsx | 80 +++++++++- website-next/app/globals.css | 26 +++- .../src/components/ContentSection.tsx | 95 ++++++++++++ .../src/components/NextStepsSection.tsx | 36 +++++ website-next/src/components/PageHero.tsx | 34 +++++ .../src/components/PlanGrid.stories.tsx | 89 +++++++++++ website-next/src/components/PlanGrid.tsx | 69 +++++++++ website-next/src/components/Section.tsx | 18 +++ .../src/components/pricing/CheckIcon.tsx | 14 ++ .../src/design-system/Button.stories.tsx | 27 ++++ website-next/src/design-system/Button.tsx | 72 +++++++++ website-next/src/design-system/Link.tsx | 6 +- 28 files changed, 1571 insertions(+), 36 deletions(-) create mode 100644 website-next/app/(content)/platform/page.tsx create mode 100644 website-next/app/(content)/services/page.tsx create mode 100644 website-next/src/components/ContentSection.tsx create mode 100644 website-next/src/components/NextStepsSection.tsx create mode 100644 website-next/src/components/PageHero.tsx create mode 100644 website-next/src/components/PlanGrid.stories.tsx create mode 100644 website-next/src/components/PlanGrid.tsx create mode 100644 website-next/src/components/Section.tsx create mode 100644 website-next/src/components/pricing/CheckIcon.tsx create mode 100644 website-next/src/design-system/Button.stories.tsx create mode 100644 website-next/src/design-system/Button.tsx diff --git a/website-next/app/(content)/help/page.tsx b/website-next/app/(content)/help/page.tsx index 9b329d26fda..94f8259fce9 100644 --- a/website-next/app/(content)/help/page.tsx +++ b/website-next/app/(content)/help/page.tsx @@ -1,3 +1,45 @@ -export default function Page() { - return

Help

; +import { type Plan, PlanGrid } from "@/src/components/PlanGrid"; +import { Section } from "@/src/components/Section"; + +const PLANS: Plan[] = [ + { + title: "Community", + price: 0, + period: "hour", + description: + "Be part of the Community, get help, and help others. Together we're strong.", + features: ["Public Slack Channel", "7000+ Individuals"], + ctaText: "Join Slack", + ctaLink: "https://slack.chillicream.com/", + }, + { + title: "Consultancy", + price: 300, + period: "hour", + description: "You need immediate help and want to talk to an Expert.", + features: ["Dedicated Session", "Dedicated Expert"], + ctaText: "Book a Session", + ctaLink: "https://calendly.com/chillicream/60min", + }, + { + title: "Support", + price: "custom", + description: "You need a Support Plan. Here you go.", + features: [ + "Dedicated Account Manager", + "Private Slack Channel", + "E-Mail Support", + "And More...", + ], + ctaText: "Check out Plans", + ctaLink: "/services/support", + }, +]; + +export default function HelpPage() { + return ( +
+ +
+ ); } diff --git a/website-next/app/(content)/page.tsx b/website-next/app/(content)/page.tsx index 8dfefcfebb9..08c09b2ae13 100644 --- a/website-next/app/(content)/page.tsx +++ b/website-next/app/(content)/page.tsx @@ -1,12 +1,13 @@ import Link from "next/link"; import { FromOurBlog } from "@/src/components/FromOurBlog"; +import { Typography } from "@/src/design-system/Typography"; export default function Home() { return (
- Docs + TODO: Landing page
diff --git a/website-next/app/(content)/platform/analytics/page.tsx b/website-next/app/(content)/platform/analytics/page.tsx index 7a86b63d088..f041fa97946 100644 --- a/website-next/app/(content)/platform/analytics/page.tsx +++ b/website-next/app/(content)/platform/analytics/page.tsx @@ -1,3 +1,63 @@ -export default function Page() { - return

Analytics

; +import Image from "next/image"; + +import { ContentSection } from "@/src/components/ContentSection"; +import { NextStepsSection } from "@/src/components/NextStepsSection"; +import { PageHero } from "@/src/components/PageHero"; +import { SolidButton } from "@/src/design-system/Button"; + +export default function AnalyticsPage() { + return ( + <> + +
+ + Get Started + +
+
+ Instant Insights. Enhanced Performance. +
+ + + + + + ); } diff --git a/website-next/app/(content)/platform/continuous-integration/page.tsx b/website-next/app/(content)/platform/continuous-integration/page.tsx index 103cc03a5ac..b65ad7051ea 100644 --- a/website-next/app/(content)/platform/continuous-integration/page.tsx +++ b/website-next/app/(content)/platform/continuous-integration/page.tsx @@ -1,3 +1,58 @@ -export default function Page() { - return

Continuous Integration

; +import { ContentSection } from "@/src/components/ContentSection"; +import { NextStepsSection } from "@/src/components/NextStepsSection"; +import { PageHero } from "@/src/components/PageHero"; +import { SolidButton } from "@/src/design-system/Button"; + +export default function ContinuousIntegrationPage() { + return ( + <> + +
+ Get Started +
+ + + + + + + + ); } diff --git a/website-next/app/(content)/platform/ecosystem/page.tsx b/website-next/app/(content)/platform/ecosystem/page.tsx index 5a794236c5d..b3b1db131aa 100644 --- a/website-next/app/(content)/platform/ecosystem/page.tsx +++ b/website-next/app/(content)/platform/ecosystem/page.tsx @@ -1,3 +1,102 @@ -export default function Page() { - return

Ecosystem

; +import { ContentSection } from "@/src/components/ContentSection"; +import { NextStepsSection } from "@/src/components/NextStepsSection"; +import { PageHero } from "@/src/components/PageHero"; +import { Section } from "@/src/components/Section"; + +interface FeatureCard { + title: string; + description: string; +} + +const FEATURES: FeatureCard[] = [ + { + title: "Authentication Flows", + description: + "Choose between various authentication flows like basic, bearer or OAuth 2.", + }, + { + title: "Organization Workspaces", + description: + "Organize your GraphQL APIs and collaborate with colleagues across your organization with ease.", + }, + { + title: "Document Synchronization", + description: + "Keep your documents safe across all your devices and your teams.", + }, + { + title: "PWA Support", + description: + "Use your favorite Browser to install Nitro as a PWA on your Device without requiring administrative privileges.", + }, + { + title: "Beautiful Themes", + description: + "Choose your single preferred theme or let the system automatically switch between dark and light theme.", + }, + { + title: "GraphQL File Upload", + description: + "Implements the latest version of the GraphQL multipart request spec.", + }, + { + title: "Subscriptions over SSE", + description: "Supports GraphQL subscriptions over Server-Sent Events.", + }, + { + title: "Performant GraphQL IDE", + description: + "Lagging apps can be frustrating. We do not accept that and keep always an eye on performance so that you can get your task done fast.", + }, + { + title: "Subscriptions over WS", + description: + "Supports GraphQL subscriptions over WebSocket as well as the Apollo subscription protocol.", + }, +]; + +export default function EcosystemPage() { + return ( + <> + + +
+

+ Everything you need to build great APIs — and more +

+
+ {FEATURES.map((feature) => ( +
+

+ {feature.title} +

+

+ {feature.description} +

+
+ ))} +
+
+ + + ); } diff --git a/website-next/app/(content)/platform/page.tsx b/website-next/app/(content)/platform/page.tsx new file mode 100644 index 00000000000..6903bc628e5 --- /dev/null +++ b/website-next/app/(content)/platform/page.tsx @@ -0,0 +1,54 @@ +import Link from "next/link"; + +import { PageHero } from "@/src/components/PageHero"; +import { Section } from "@/src/components/Section"; + +const PLATFORM_SECTIONS = [ + { + href: "/platform/analytics", + title: "Analytics", + description: "Instant Insights. Enhanced Performance.", + }, + { + href: "/platform/continuous-integration", + title: "Continuous Integration", + description: "Innovate with Confidence. Deliver with Quality.", + }, + { + href: "/platform/ecosystem", + title: "Ecosystem", + description: "An Ecosystem You Trust and Love.", + }, +]; + +export default function PlatformPage() { + return ( + <> + +
+
+ {PLATFORM_SECTIONS.map((section) => ( + +

+ {section.title} +

+

+ {section.description} +

+ + Learn more → + + + ))} +
+
+ + ); +} diff --git a/website-next/app/(content)/pricing/page.tsx b/website-next/app/(content)/pricing/page.tsx index e237c4eb630..05d7200be67 100644 --- a/website-next/app/(content)/pricing/page.tsx +++ b/website-next/app/(content)/pricing/page.tsx @@ -1,3 +1,5 @@ +import { Typography } from "@/src/design-system/Typography"; + export default function Page() { - return

Pricing

; + return TODO: Pricing page; } diff --git a/website-next/app/(content)/products/hotchocolate/page.tsx b/website-next/app/(content)/products/hotchocolate/page.tsx index 9483870d84c..e117811b563 100644 --- a/website-next/app/(content)/products/hotchocolate/page.tsx +++ b/website-next/app/(content)/products/hotchocolate/page.tsx @@ -1,3 +1,78 @@ -export default function Page() { - return

Hot Chocolate

; +import { ContentSection } from "@/src/components/ContentSection"; +import { PageHero } from "@/src/components/PageHero"; +import { Section } from "@/src/components/Section"; +import { OutlineButton, SolidButton } from "@/src/design-system/Button"; + +const FEATURES = [ + { + title: "Compile-time Composition", + description: + "Fusion composes subgraph schemas at planning time, not runtime. The gateway stays fast and queries stay typed end-to-end.", + }, + { + title: "Code-first or Schema-first", + description: + "Author your GraphQL schema however your team prefers. Hot Chocolate supports both styles with full type safety.", + }, + { + title: "DataLoader Batching", + description: + "Green Donut batches loads at the federation layer so cross-service N+1 disappears automatically.", + }, + { + title: "Realtime Subscriptions", + description: + "Server-sent events and WebSocket subscriptions are first-class — no extra wiring required.", + }, + { + title: "OpenTelemetry Built In", + description: + "Traces, errors, and per-resolver latency wire into your existing OTel backend (Jaeger, Tempo, Datadog, Honeycomb).", + }, + { + title: "Federation-ready", + description: + "Compose with other Hot Chocolate services via Fusion or with Apollo subgraphs via the Federation spec.", + }, +]; + +export default function HotChocolatePage() { + return ( + <> + +
+ Get Started + + View on GitHub + +
+ +
+
+ {FEATURES.map((feature) => ( +
+

+ {feature.title} +

+

+ {feature.description} +

+
+ ))} +
+
+ + + + ); } diff --git a/website-next/app/(content)/products/nitro/page.tsx b/website-next/app/(content)/products/nitro/page.tsx index 0cf12188c90..eab5ef37f2e 100644 --- a/website-next/app/(content)/products/nitro/page.tsx +++ b/website-next/app/(content)/products/nitro/page.tsx @@ -1,3 +1,92 @@ -export default function Page() { - return

Nitro

; +import { ContentSection } from "@/src/components/ContentSection"; +import { PageHero } from "@/src/components/PageHero"; +import { Section } from "@/src/components/Section"; +import { OutlineButton, SolidButton } from "@/src/design-system/Button"; + +const FEATURES: { title: string; description: string }[] = [ + { + title: "Authentication Flows", + description: + "Choose between various authentication flows like basic, bearer or OAuth 2.", + }, + { + title: "Organization Workspaces", + description: + "Organize your GraphQL APIs and collaborate with colleagues across your organization with ease.", + }, + { + title: "Document Synchronization", + description: + "Keep your documents safe across all your devices and your teams.", + }, + { + title: "PWA Support", + description: + "Install Nitro as a PWA on your device without administrative privileges.", + }, + { + title: "Beautiful Themes", + description: + "Choose your preferred theme or auto-switch between dark and light.", + }, + { + title: "GraphQL File Upload", + description: + "Implements the latest GraphQL multipart request spec for uploads.", + }, + { + title: "Subscriptions over SSE", + description: "Supports GraphQL subscriptions over Server-Sent Events.", + }, + { + title: "Performant GraphQL IDE", + description: + "Fast, snappy IDE — we keep an eye on performance so you get your work done fast.", + }, + { + title: "Subscriptions over WS", + description: + "Supports GraphQL subscriptions over WebSockets and the Apollo subscription protocol.", + }, +]; + +export default function NitroPage() { + return ( + <> + +
+ + Launch Web App + + Read the Docs +
+ +
+
+ {FEATURES.map((feature) => ( +
+

+ {feature.title} +

+

+ {feature.description} +

+
+ ))} +
+
+ + + + ); } diff --git a/website-next/app/(content)/products/strawberryshake/page.tsx b/website-next/app/(content)/products/strawberryshake/page.tsx index 7055bbe3d48..359a45ec5bd 100644 --- a/website-next/app/(content)/products/strawberryshake/page.tsx +++ b/website-next/app/(content)/products/strawberryshake/page.tsx @@ -1,3 +1,68 @@ -export default function Page() { - return

Strawberry Shake

; +import { ContentSection } from "@/src/components/ContentSection"; +import { PageHero } from "@/src/components/PageHero"; +import { Section } from "@/src/components/Section"; +import { OutlineButton, SolidButton } from "@/src/design-system/Button"; + +const FEATURES = [ + { + title: "Strongly-typed Client", + description: + "Generate strongly-typed .NET clients from your GraphQL schema and queries. No more runtime parsing surprises.", + }, + { + title: "Reactive Store", + description: + "Built-in reactive store with caching, optimistic updates, and offline support. Just wire it up.", + }, + { + title: "Subscriptions", + description: + "First-class GraphQL subscriptions over WebSockets or Server-Sent Events.", + }, + { + title: "Source Generators", + description: + "Roslyn source generators emit strongly-typed code at compile time — no IL weaving, no runtime cost.", + }, +]; + +export default function StrawberryShakePage() { + return ( + <> + +
+ Get Started + + View on GitHub + +
+ +
+
+ {FEATURES.map((feature) => ( +
+

+ {feature.title} +

+

+ {feature.description} +

+
+ ))} +
+
+ + + + ); } diff --git a/website-next/app/(content)/resources/page.tsx b/website-next/app/(content)/resources/page.tsx index c728fe1c3a2..4478bd41015 100644 --- a/website-next/app/(content)/resources/page.tsx +++ b/website-next/app/(content)/resources/page.tsx @@ -1,17 +1,78 @@ -import { Typography } from "@/src/design-system/Typography"; +import Link from "next/link"; + +import { PageHero } from "@/src/components/PageHero"; +import { Section } from "@/src/components/Section"; export const metadata = { title: "Resources", description: "ChilliCream brand resources and downloads.", }; +const COMPANY_LINKS = [ + { + href: "mailto:contact@chillicream.com", + title: "Contact", + description: "Get in touch with the team.", + }, + { + href: "https://store.chillicream.com", + title: "Shop", + description: "ChilliCream merch and goodies.", + external: true, + }, + { + href: "/legal/acceptable-use-policy", + title: "Acceptable Use Policy", + description: "Rules for using ChilliCream services.", + }, + { + href: "/legal/cookie-policy", + title: "Cookie Policy", + description: "How we use cookies.", + }, + { + href: "/legal/privacy-policy", + title: "Privacy Policy", + description: "How we handle your data.", + }, + { + href: "/legal/terms-of-service", + title: "Terms of Service", + description: "The agreement between you and us.", + }, + { + href: "/licensing/chillicream-license", + title: "ChilliCream License", + description: "Commercial license terms.", + }, +]; + export default function ResourcesPage() { return ( <> - Resources -

- Brand assets, banners, and other resources are coming soon. -

+ +
+
+ {COMPANY_LINKS.map((link) => ( + +

+ {link.title} +

+

{link.description}

+ + ))} +
+
); } diff --git a/website-next/app/(content)/services/advisory/page.tsx b/website-next/app/(content)/services/advisory/page.tsx index ae76a36b74a..57fa8b15926 100644 --- a/website-next/app/(content)/services/advisory/page.tsx +++ b/website-next/app/(content)/services/advisory/page.tsx @@ -1,3 +1,76 @@ -export default function Page() { - return

Advisory

; +import { PageHero } from "@/src/components/PageHero"; + +interface InquiryPlan { + title: string; + description: string; + features: string[]; + ctaText: string; + ctaLink: string; +} + +const PLANS: InquiryPlan[] = [ + { + title: "Consulting", + description: + "Hourly consulting services to get the help you need at any stage of your project. This is the best way to get started.", + features: [ + "Mentoring and guidance", + "Architecture", + "Troubleshooting", + "Code Review", + "Best practices education", + ], + ctaText: "Talk to an Expert", + ctaLink: "mailto:contact@chillicream.com?subject=Consulting", + }, + { + title: "Contracting", + description: + "Options for teams who don't have the time, bandwidth, and/or expertise to implement their own GraphQL solutions.", + features: ["Proof of concept", "Implementation"], + ctaText: "Talk to an Expert", + ctaLink: "mailto:contact@chillicream.com?subject=Contracting", + }, +]; + +export default function AdvisoryPage() { + return ( + <> + +
+
+ {PLANS.map((plan) => ( +
+

+ {plan.title} +

+

{plan.description}

+
    + {plan.features.map((feature) => ( +
  • + + ✓ + + {feature} +
    • + ))} +
+ + {plan.ctaText} + +
+ ))} +
+
+ + ); } diff --git a/website-next/app/(content)/services/page.tsx b/website-next/app/(content)/services/page.tsx new file mode 100644 index 00000000000..c92a9d6b4cb --- /dev/null +++ b/website-next/app/(content)/services/page.tsx @@ -0,0 +1,54 @@ +import Link from "next/link"; + +import { PageHero } from "@/src/components/PageHero"; +import { Section } from "@/src/components/Section"; + +const SERVICE_SECTIONS = [ + { + href: "/services/advisory", + title: "Advisory", + description: "Consulting & contracting from GraphQL experts.", + }, + { + href: "/services/support", + title: "Support", + description: "Get help from experts with SLAs you can rely on.", + }, + { + href: "/services/training", + title: "Training", + description: "Increase your team's productivity with focused training.", + }, +]; + +export default function ServicesPage() { + return ( + <> + +
+
+ {SERVICE_SECTIONS.map((section) => ( + +

+ {section.title} +

+

+ {section.description} +

+ + Learn more → + + + ))} +
+
+ + ); +} diff --git a/website-next/app/(content)/services/support/contact/page.tsx b/website-next/app/(content)/services/support/contact/page.tsx index 55a8db4fe87..326bcf51bdf 100644 --- a/website-next/app/(content)/services/support/contact/page.tsx +++ b/website-next/app/(content)/services/support/contact/page.tsx @@ -1,3 +1,100 @@ -export default function Page() { - return

Contact Support

; +import { PageHero } from "@/src/components/PageHero"; + +const SUBJECTS = [ + "Schedule a Demo", + "Pricing & Plans", + "Sales", + "Technical Support", + "Partnership", + "Other", +]; + +export default function ContactPage() { + return ( + <> + +
+
+ + + +
+ + +
+
+ +