Add existing pages to website-next

website-next/app/(content)/help/page.tsx

@@ -1,3 +1,45 @@
-export default function Page() {
-  return <h1>Help</h1>;
+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 (
+    <Section title="In Need of Urgent Help">
+      <PlanGrid plans={PLANS} />
+    </Section>
+  );
 }

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 (
     <div className="px-5 py-8 sm:px-12">
       <div className="mx-auto flex max-w-6xl flex-col gap-12">
         <section>
-          <Link href="/docs/hotchocolate/">Docs</Link>
+          <Typography variant="body">TODO: Landing page</Typography>
         </section>
 
         <FromOurBlog />

website-next/app/(content)/platform/analytics/page.tsx

@@ -1,3 +1,63 @@
-export default function Page() {
-  return <h1>Analytics</h1>;
+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 (
+    <>
+      <PageHero
+        title="Instant Insights."
+        subtitle="Enhanced Performance."
+        teaser="Unlock the hidden potential of your system with instant, real-time insights. Make informed decisions and gain a deeper understanding of your system, driving smarter and more effective outcomes."
+      />
+      <div className="flex justify-center">
+        <SolidButton href="/docs/nitro/open-telemetry/operation-monitoring">
+          Get Started
+        </SolidButton>
+      </div>
+      <div className="mt-20 flex justify-center">
+        <Image
+          src="/images/analytics/banner.png"
+          alt="Instant Insights. Enhanced Performance."
+          width={1200}
+          height={700}
+          sizes="(max-width: 1280px) 100vw, 1200px"
+          priority
+          className="h-auto w-full max-w-[1200px] rounded-2xl"
+        />
+      </div>
+      <ContentSection
+        title="Overview from Every Angle"
+        text="Experience your ecosystem like never before with a single, unified view of all your data. Gain a comprehensive understanding of your entire distributed system. Monitor the health of your complete application and assess the impact of client interactions and pressure on subgraphs and make informed decisions based on data."
+        imageSrc="/images/analytics/overview.png"
+        imageAlt="Overview from Every Angle"
+        imageMaxWidth={1200}
+      />
+      <ContentSection
+        title="APIs Under the Microscope"
+        text="Delve deep into your APIs with precision. Obtain detailed throughput, error analysis, and latency insights for your GraphQL queries. Beyond high-level system overviews, you can also monitor telemetry from individual services. Understand how operations impact your system and identify areas for performance improvement instantly."
+        imageSrc="/images/analytics/observability.png"
+        imageAlt="APIs Under the Microscope"
+        imageMaxWidth={1200}
+      />
+      <ContentSection
+        title="Trace, Detail, Insight."
+        text="Explore every trace in depth. With full open telemetry, gain performance insights for individual operations. Examine every detail of your requests, from traces to spans, attributes and properties. Drill into error traces and pinpoint exactly what went wrong, providing comprehensive visibility and actionable insights."
+        imageSrc="/images/analytics/insights.png"
+        imageAlt="Trace, Detail, Insight"
+        imageMaxWidth={1200}
+      />
+      <NextStepsSection
+        title="Begin Your Journey"
+        text="Discover a new way to see and manage your data. Start your journey now and transform your API experience."
+        primaryLink="/services/support/contact?subject=Schedule+a+Demo"
+        primaryLinkText="Book a Demo"
+        secondaryLink="https://nitro.chillicream.com"
+        secondaryLinkText="Launch"
+      />
+    </>
+  );
 }

website-next/app/(content)/platform/continuous-integration/page.tsx

@@ -1,3 +1,58 @@
-export default function Page() {
-  return <h1>Continuous Integration</h1>;
+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 (
+    <>
+      <PageHero
+        title="Innovate with Confidence"
+        teaser="Ensure stability by validating changes and preventing breaking changes. A centralized registry keeps teams aligned, managing clients and APIs in one place, and supports safe client development. Stay informed with auto-generated changelogs and standardized workflows for safe schema evolution."
+      />
+      <div className="flex justify-center">
+        <SolidButton href="/docs/nitro/apis/fusion">Get Started</SolidButton>
+      </div>
+      <ContentSection
+        title="Connect Your Ecosystem"
+        text="Easily integrate your CI/CD pipelines with our Nitro CLI. Whether you're using GitHub Actions, Azure DevOps, or other tools, Nitro CLI simplifies interactions with our service. This seamless integration fits into any deployment environment, allowing you to maintain your existing workflow without requiring significant changes."
+        imageSrc="/images/continuous-integration/connect.png"
+        imageAlt="Connect Your Ecosystem"
+        imageMaxWidth={1200}
+      />
+      <ContentSection
+        title="Adapt to Your Setup"
+        text="Align your deployment process with your specific needs by defining environments such as development, QA, and production. Each environment can have its own active clients, schema versions, and history, giving you full control over your workflow."
+        imageSrc="/images/continuous-integration/design.png"
+        imageAlt="Adapt to Your Setup"
+        imageMaxWidth={1200}
+      />
+      <ContentSection
+        title="Validate Early, Succeed Sooner"
+        text="Identify GraphQL schema issues right from the start. Early validation provides immediate feedback, ensuring your project stays on track from day one. This proactive approach allows you to catch and fix issues before deployment, preventing potential problems down the line."
+      />
+      <ContentSection
+        title="Deploy with Zero Disruption"
+        text="Deploy your updates with confidence, knowing that your changes won't break any client or schema. Our system ensures that once you merge your pull request, all changes are validated for compatibility. If any breaking changes are detected, the deployment is stopped to protect your production environment."
+        imageSrc="/images/continuous-integration/deploy.png"
+        imageAlt="Deploy with Zero Disruption"
+        imageMaxWidth={1200}
+      />
+      <ContentSection
+        title="Document, Track, and Review"
+        text="Monitoring and managing schema changes is key to maintaining your API's integrity and functionality. Our platform provides tools to track every change made, along with a detailed version history. You can easily see what was changed, when it was changed, and why."
+        imageSrc="/images/continuous-integration/track.png"
+        imageAlt="Document, Track, and Review"
+        imageMaxWidth={1200}
+      />
+      <NextStepsSection
+        title="Ready To Deploy?"
+        text="Prepare for deployment with a process optimized for efficiency and precision."
+        primaryLink="/services/support/contact?subject=Schedule+a+Demo"
+        primaryLinkText="Book a Demo"
+        secondaryLink="https://nitro.chillicream.com"
+        secondaryLinkText="Launch"
+      />
+    </>
+  );
 }

website-next/app/(content)/platform/ecosystem/page.tsx

@@ -1,3 +1,102 @@
-export default function Page() {
-  return <h1>Ecosystem</h1>;
+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 (
+    <>
+      <PageHero
+        title="An Ecosystem You Love"
+        teaser="A harmonious blend of tools and community, dedicated to enhancing your API journey. Experience simplicity, efficiency, and collaborative innovation."
+      />
+      <NextStepsSection
+        title="Lead by Intuition"
+        text="A framework built by developers for developers. Combining ease of use with high-speed performance, it's designed to elevate your projects effortlessly."
+        primaryLink="/docs/hotchocolate"
+        primaryLinkText="Get Started"
+        secondaryLink="https://nitro.chillicream.com"
+        secondaryLinkText="Launch"
+      />
+      <Section title="Batteries Included">
+        <p className="-mt-4 mb-8 text-center text-base text-cc-ink-dim sm:text-lg">
+          Everything you need to build great APIs &mdash; and more
+        </p>
+        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          {FEATURES.map((feature) => (
+            <div
+              key={feature.title}
+              className="rounded-xl border border-cc-card-border bg-cc-card-bg backdrop-blur-sm p-6 "
+            >
+              <h3 className="text-lg font-semibold text-cc-ink">
+                {feature.title}
+              </h3>
+              <p className="mt-2 text-sm text-cc-ink-dim">
+                {feature.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </Section>
+      <ContentSection
+        title="Continuous Evolution"
+        text="Embracing the latest GraphQL specification drafts and future updates, this platform ensures users are always at the cutting edge. Experience an evolving GraphQL journey, where innovation and up-to-date features converge seamlessly."
+        imageSrc="/images/ecosystem/continuous-evolution.png"
+        imageAlt="Continuous Evolution"
+        imageMaxWidth={1200}
+      />
+    </>
+  );
 }

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 (
+    <>
+      <PageHero
+        title="The Platform"
+        teaser="One platform for every API across your organization — from authoring and composition to operations and telemetry."
+      />
+      <Section title="Explore the Platform">
+        <div className="grid gap-6 md:grid-cols-3">
+          {PLATFORM_SECTIONS.map((section) => (
+            <Link
+              key={section.href}
+              href={section.href}
+              className="group flex flex-col rounded-xl border border-cc-card-border bg-cc-card-bg backdrop-blur-sm p-8 no-underline  transition-colors hover:border-fuchsia-400"
+            >
+              <h2 className="text-xl font-semibold text-cc-ink group-hover:text-fuchsia-400">
+                {section.title}
+              </h2>
+              <p className="mt-3 text-sm text-cc-ink-dim">
+                {section.description}
+              </p>
+              <span className="mt-6 text-sm font-medium text-fuchsia-400">
+                Learn more →
+              </span>
+            </Link>
+          ))}
+        </div>
+      </Section>
+    </>
+  );
+}

website-next/app/(content)/pricing/page.tsx

@@ -1,3 +1,5 @@
+import { Typography } from "@/src/design-system/Typography";
+
 export default function Page() {
-  return <h1>Pricing</h1>;
+  return <Typography variant="body">TODO: Pricing page</Typography>;
 }