Components

// This button has creative-fill hover animation

<Button
  hoverEffect="creative-fill"
  class="effect-color-accent"
  label="Creative Fill"
  url="/"
/>

// This button has magnetic hover animation

<Button hoverEffect="magnetic" label="Magnetic" url="/" />

// This button has text-flip hover animation

<Button hoverEffect="text-flip" label="Text Flip" url="/" />

// This button combines the magnetic and text-flip hover animations

<Button
  hoverEffect="magnetic-text-flip"
  label="Magnetic With Text Flip"
  url="/"
/>
<Button
  variant="circle"
  hoverEffect="magnetic-text-flip"
  label="Magnetic With Text Flip"
  url="/"
/>

<Button variant="circle" label="Example Button" url="/" />
<Button label="Example Button" url="/" />
<Button class="btn-accent" label="Example Button" url="/" />
<Button
  variant="outline"
  label="With External Link"
  url="https://astro.build"
/>
<Button variant="text" label="Example Button" url="/" />

<Accordion label="Example Accordion Label 01" group="accordion-01" expanded="true">

Every service gets its own build pipeline, environment variables, and scaling rules. Pick the plan that fits your traffic.

- **Starter**: Deploy from Git with a preview environment for every pull request.
- **Team**: A shared workspace with role-based access and audit logs.
- **Enterprise**: Dedicated regions, SSO, and a support SLA.

</Accordion>

<Accordion label="Example Accordion Label 02" group="accordion-01" expanded="false">

Every service gets its own build pipeline, environment variables, and scaling rules. Pick the plan that fits your traffic.

- **Starter**: Deploy from Git with a preview environment for every pull request.
- **Team**: A shared workspace with role-based access and audit logs.
- **Enterprise**: Dedicated regions, SSO, and a support SLA.

</Accordion>

---

<Accordion label="Example Accordion Label 03" group="accordion-01" expanded="false">

Every service gets its own build pipeline, environment variables, and scaling rules. Pick the plan that fits your traffic.

- **Starter**: Deploy from Git with a preview environment for every pull request.
- **Team**: A shared workspace with role-based access and audit logs.
- **Enterprise**: Dedicated regions, SSO, and a support SLA.

</Accordion>

<Tabs>
  <Tab name="Overview">
    **What can you run?** Web services, workers, cron jobs, and databases from
    one dashboard. Pick a tab to see how each part works. - Deploys -
    Autoscaling - Observability
  </Tab>

  <Tab name="Deploy">
    **Deploys: Ship on every push** Connect a repository and every push to main
    starts a build. You get: - Automatic builds - Preview environments -
    Zero-downtime deploys
  </Tab>
</Tabs>

<VideoInline src="rFVpSwgCkCo" provider="youtube" />

<VideoInline
  src="/videos/test-video.mp4"
  provider="html5"
  poster="/images/video-thumbnail.jpg"
/>

<Callout type="note">
  Preview environments use the `preview` environment variables, not production ones.
</Callout>

<Callout type="tip" title="Pin the CLI version">
  Install the CLI as a dev dependency so CI and every teammate run the same version.
</Callout>

<Callout type="warning">
  Deleting a project also deletes its preview environments and database branches.
</Callout>

<Callout type="danger" title="Rotating the root key">
  Every token signed with the old key stops working at once. Plan a maintenance window.
</Callout>

<Steps>

### Install the CLI

```bash
npm install -g @cloud/cli
```

### Link the project

Run `cloud link` in the root of your repository.

### Deploy

Push to `main`, or run `cloud deploy` to ship from your machine.

</Steps>

<FileTree>

- src/
  - pages/
    - **index.astro** the home page
  - content/
- cloud.config.ts
- package.json

</FileTree>

Press <Kbd>⌘</Kbd> <Kbd>K</Kbd> to open search, or <Kbd keys={["Ctrl", "Shift", "P"]} /> for the command palette.

---
import type { z } from "astro/zod";
import config from ".astro/config.generated.json";
import SectionIntro from "@/components/widgets/SectionIntro.astro";
import SubscriptionForm from "@/components/widgets/SubscriptionForm.astro";
import { getEntryCTM } from "@/lib/contentParser.astro";
import overrideObjects from "@/lib/utils/overrideObjects.ts";
import type { newsletterSectionSchema } from "@/sections.schema";

export type NewsletterSection = z.infer<typeof newsletterSectionSchema>;

type Props = {
  content?: Partial<NewsletterSection>;
};

const defaultContent = (
  await getEntryCTM("sections", "newsletter-section", Astro.currentLocale)
)?.data as NewsletterSection;

const {
  enable = true,
  eyebrow,
  title,
  description,
  note,
} = overrideObjects(
  { ...defaultContent },
  Astro.props.content,
) as NewsletterSection;

// The form posts to `[settings.subscription]` in config.toml
const { subscription } = config.settings;

if (!enable || !subscription?.enable) return;
---

<section class="newsletter-section">
  <div class="container">
    <div
      class="flex flex-col gap-8 lg:flex-row lg:items-end lg:justify-between">
      <SectionIntro eyebrow={eyebrow} title={title} description={description} />
      <div class="w-full lg:max-w-md" data-scroll-reveal="fade-up">
        <SubscriptionForm
          id="newsletter"
          enable={true}
          layout="inline"
          formAction={subscription.formAction}
          mailchimpTagValue={subscription.mailchimpTagValue}
          note={note}
        />
      </div>
    </div>
  </div>
</section>

import { defineConfig } from "@cloud/cli";

export default defineConfig({
  service: "web-frontend",
  region: "eu-west",
  instances: { min: 2, max: 10 },
});

<CodeTabs>

```bash title="npm"
npm install @cloud/sdk
```

```bash title="pnpm"
pnpm add @cloud/sdk
```

</CodeTabs>

# Heading 1 [.custom-class .mt-0! .another-class]
## Heading 2 [.custom-class .mt-0! .another-class4]
### Heading 3 [.custom-class .mt-0! .another-class]
#### Heading 4 [.custom-class .mt-0! .another-class]
##### Heading 5 [.custom-class .mt-0! .another-class]
###### Heading 6 [.custom-class .mt-0! .another-class]

<ListCheck>

- **Slow releases**: Manual deploy steps turned every release into a half-day task.
- **Late reviews**: Changes reached staging only after merge, so reviewers missed real issues.
- **Scattered signals**: Logs and metrics lived in separate tools, so incidents took longer to trace.

</ListCheck>

<CardWrapper>
  <Card
    title="Managed databases"
    description="Postgres and Redis with automated backups and point-in-time recovery."
    icon="/images/icons/services/web.svg"
    buttonLabel="Contact us"
    buttonUrl="/contact/"
  />
  <Card
    title="Private networking"
    description="Services talk over an internal network that is never exposed to the internet."
    icon="/images/icons/services/web.svg"
    buttonLabel="Contact us"
    buttonUrl="/contact/"
  />
</CardWrapper>

<ImageList>
  <ImageItem
    imageSrc="/images/gallery/1.jpg"
    imageAlt="Team reviewing a digital product roadmap"
    videoSrc="rFVpSwgCkCo"
  />
  <ImageItem
    imageSrc="/images/gallery/2.jpg"
    imageAlt="Engineer working on a secure application release"
    videoSrc="/videos/test-video.mp4"
    videoProvider="html5"
  />
  <ImageItem
    width="1/2"
    imageSrc="/images/gallery/3.jpg"
    imageAlt="Analytics dashboard displayed during a strategy review"
  />
  <ImageItem
    width="1/2"
    imageSrc="/images/gallery/4.jpg"
    imageAlt="Modern workspace for product collaboration"
  />
</ImageList>

<Testimonial
  customerImage="/images/customers/avatar/1.jpg"
  customerName="Sarah Jones"
  customerRole="CEO, Founder"
  customerCompanyLogo="/images/customers/company-logo/acme.png"
  customerCompanyName="Acme Inc."
>
  We moved our services over in a week. Deploys that used to need a release
  manager now run on every merge, and rolling back takes one click.
</Testimonial>