openstatus.dev
Openstatus
www.openstatus.dev
refactor: marketing page structure (#1295)
* refactor: marketing page structure
* ci: apply automated fixes
---------
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
authored by
Maximilian Kaske
autofix-ci[bot]
and committed by
GitHub
d46ccbde
5ad34ff1
+110
-113
+29
-1
apps/web/src/app/(content)/layout.tsx
+29
-1
apps/web/src/app/(content)/layout.tsx
···
1
1
import { MarketingLayout } from "@/components/layout/marketing-layout";
2
+
import { ArrowRight, ChevronRight } from "lucide-react";
3
+
import Link from "next/link";
2
4
import type { ReactNode } from "react";
5
+
6
+
const FLAG = false;
3
7
4
8
export default function ContentLayout({ children }: { children: ReactNode }) {
5
-
return <MarketingLayout>{children}</MarketingLayout>;
9
+
return (
10
+
<>
11
+
{FLAG ? <Banner /> : null}
12
+
<MarketingLayout>{children}</MarketingLayout>
13
+
</>
14
+
);
15
+
}
16
+
17
+
function Banner() {
18
+
return (
19
+
<div className="border-b bg-muted/50 p-2 backdrop-blur-3xl">
20
+
<Link href="/blog">
21
+
<div className="group mx-auto flex w-full max-w-4xl flex-row items-center justify-between">
22
+
<p>
23
+
New Dashboard. New Pricing. We are reworking the whole experience.
24
+
</p>
25
+
<div>
26
+
<span className="mr-1">Read more</span>
27
+
<ArrowRight className="relative mb-px inline h-4 w-0 transition-all group-hover:w-4" />
28
+
<ChevronRight className="relative mb-px inline h-4 w-4 transition-all group-hover:w-0" />
29
+
</div>
30
+
</div>
31
+
</Link>
32
+
</div>
33
+
);
6
34
}
+28
apps/web/src/app/(content)/page.tsx
+28
apps/web/src/app/(content)/page.tsx
···
1
+
import { AlertCard } from "@/components/marketing/alert/card";
2
+
import { CLICard } from "@/components/marketing/cli/card";
3
+
import { Hero } from "@/components/marketing/hero";
4
+
import { BottomCTA, MiddleCTA } from "@/components/marketing/in-between-cta";
5
+
import { LatestChangelogs } from "@/components/marketing/lastest-changelogs";
6
+
import { MonitoringCard } from "@/components/marketing/monitor/card";
7
+
import { Partners } from "@/components/marketing/partners";
8
+
import { Stats } from "@/components/marketing/stats";
9
+
import { StatusPageCard } from "@/components/marketing/status-page/card";
10
+
11
+
export const revalidate = 600;
12
+
13
+
export default async function LandingPage() {
14
+
return (
15
+
<div className="grid gap-12">
16
+
<Hero />
17
+
<Partners />
18
+
<MonitoringCard />
19
+
<Stats />
20
+
<MiddleCTA />
21
+
<StatusPageCard />
22
+
<AlertCard />
23
+
<CLICard />
24
+
<BottomCTA />
25
+
<LatestChangelogs />
26
+
</div>
27
+
);
28
+
}
+49
apps/web/src/app/(content)/pricing/page.tsx
+49
apps/web/src/app/(content)/pricing/page.tsx
···
1
+
import type { Metadata } from "next";
2
+
3
+
import {
4
+
defaultMetadata,
5
+
ogMetadata,
6
+
twitterMetadata,
7
+
} from "@/app/shared-metadata";
8
+
import { Shell } from "@/components/dashboard/shell";
9
+
import { FAQs } from "@/components/marketing/faqs";
10
+
import { EnterpricePlan } from "@/components/marketing/pricing/enterprice-plan";
11
+
import { PricingSlider } from "@/components/marketing/pricing/pricing-slider";
12
+
import { PricingWrapperSuspense } from "@/components/marketing/pricing/pricing-wrapper";
13
+
import { Separator } from "@openstatus/ui";
14
+
15
+
export const metadata: Metadata = {
16
+
...defaultMetadata,
17
+
title: "Pricing",
18
+
openGraph: {
19
+
...ogMetadata,
20
+
title: "Pricing",
21
+
url: "https://www.openstatus.dev/pricing",
22
+
},
23
+
twitter: {
24
+
...twitterMetadata,
25
+
title: "Pricing",
26
+
},
27
+
};
28
+
29
+
export default function PricingPage() {
30
+
return (
31
+
<div className="grid w-full gap-6">
32
+
<Shell className="grid w-full gap-12">
33
+
<div className="grid gap-3 text-center">
34
+
<h1 className="font-cal text-4xl text-foreground">Pricing</h1>
35
+
<p className="text-muted-foreground">
36
+
All plans. Start free today, upgrade later.
37
+
</p>
38
+
</div>
39
+
<PricingWrapperSuspense />
40
+
<Separator />
41
+
<PricingSlider />
42
+
</Shell>
43
+
<Shell>
44
+
<EnterpricePlan />
45
+
</Shell>
46
+
<FAQs />
47
+
</div>
48
+
);
49
+
}
+2
-4
apps/web/src/app/oss-friends/page.tsx
apps/web/src/app/(content)/oss-friends/page.tsx
+2
-4
apps/web/src/app/oss-friends/page.tsx
apps/web/src/app/(content)/oss-friends/page.tsx
···
4
4
5
5
import { Card, CardDescription, CardHeader, CardTitle } from "@openstatus/ui";
6
6
7
-
import { MarketingLayout } from "@/components/layout/marketing-layout";
8
-
9
7
const OSSFriendSchema = z.object({
10
8
href: z.string(),
11
9
name: z.string(),
···
17
15
const data = await res.json();
18
16
const openSourceFriends = z.array(OSSFriendSchema).parse(data.data);
19
17
return (
20
-
<MarketingLayout>
18
+
<>
21
19
<h1 className="mb-5 font-cal text-4xl text-foreground">
22
20
Our OpenSource Friends
23
21
</h1>
···
41
39
</Link>
42
40
))}
43
41
</div>
44
-
</MarketingLayout>
42
+
</>
45
43
);
46
44
};
47
45
-31
apps/web/src/app/page.tsx
-31
apps/web/src/app/page.tsx
···
1
-
import { MarketingLayout } from "@/components/layout/marketing-layout";
2
-
import { AlertCard } from "@/components/marketing/alert/card";
3
-
import { CLICard } from "@/components/marketing/cli/card";
4
-
import { Hero } from "@/components/marketing/hero";
5
-
import { BottomCTA, MiddleCTA } from "@/components/marketing/in-between-cta";
6
-
import { LatestChangelogs } from "@/components/marketing/lastest-changelogs";
7
-
import { MonitoringCard } from "@/components/marketing/monitor/card";
8
-
import { Partners } from "@/components/marketing/partners";
9
-
import { Stats } from "@/components/marketing/stats";
10
-
import { StatusPageCard } from "@/components/marketing/status-page/card";
11
-
12
-
export const revalidate = 600;
13
-
14
-
export default async function Page() {
15
-
return (
16
-
<MarketingLayout>
17
-
<div className="grid gap-12">
18
-
<Hero />
19
-
<Partners />
20
-
<MonitoringCard />
21
-
<Stats />
22
-
<MiddleCTA />
23
-
<StatusPageCard />
24
-
<AlertCard />
25
-
<CLICard />
26
-
<BottomCTA />
27
-
<LatestChangelogs />
28
-
</div>
29
-
</MarketingLayout>
30
-
);
31
-
}
apps/web/src/app/play/checker/[id]/page.tsx
apps/web/src/app/(content)/play/checker/[id]/page.tsx
apps/web/src/app/play/checker/[id]/page.tsx
apps/web/src/app/(content)/play/checker/[id]/page.tsx
apps/web/src/app/play/checker/[id]/search-params.ts
apps/web/src/app/(content)/play/checker/[id]/search-params.ts
apps/web/src/app/play/checker/[id]/search-params.ts
apps/web/src/app/(content)/play/checker/[id]/search-params.ts
+1
-2
apps/web/src/app/play/checker/_components/checker-form.tsx
apps/web/src/app/(content)/play/checker/_components/checker-form.tsx
+1
-2
apps/web/src/app/play/checker/_components/checker-form.tsx
apps/web/src/app/(content)/play/checker/_components/checker-form.tsx
···
53
53
import { searchParamsParsers } from "../search-params";
54
54
55
55
const FloatingActionNoSSR = dynamic(
56
-
() =>
57
-
import("../_components/floating-action").then((mod) => mod.FloatingAction),
56
+
() => import("./floating-action").then((mod) => mod.FloatingAction),
58
57
{
59
58
ssr: false,
60
59
loading: () => <></>,
apps/web/src/app/play/checker/_components/checker-play.tsx
apps/web/src/app/(content)/play/checker/_components/checker-play.tsx
apps/web/src/app/play/checker/_components/checker-play.tsx
apps/web/src/app/(content)/play/checker/_components/checker-play.tsx
apps/web/src/app/play/checker/_components/floating-action.tsx
apps/web/src/app/(content)/play/checker/_components/floating-action.tsx
apps/web/src/app/play/checker/_components/floating-action.tsx
apps/web/src/app/(content)/play/checker/_components/floating-action.tsx
apps/web/src/app/play/checker/_components/global-monitoring.tsx
apps/web/src/app/(content)/play/checker/_components/global-monitoring.tsx
apps/web/src/app/play/checker/_components/global-monitoring.tsx
apps/web/src/app/(content)/play/checker/_components/global-monitoring.tsx
apps/web/src/app/play/checker/_components/testimonial.tsx
apps/web/src/app/(content)/play/checker/_components/testimonial.tsx
apps/web/src/app/play/checker/_components/testimonial.tsx
apps/web/src/app/(content)/play/checker/_components/testimonial.tsx
apps/web/src/app/play/checker/api/mock.ts
apps/web/src/app/(content)/play/checker/api/mock.ts
apps/web/src/app/play/checker/api/mock.ts
apps/web/src/app/(content)/play/checker/api/mock.ts
apps/web/src/app/play/checker/api/route.ts
apps/web/src/app/(content)/play/checker/api/route.ts
apps/web/src/app/play/checker/api/route.ts
apps/web/src/app/(content)/play/checker/api/route.ts
apps/web/src/app/play/checker/layout.tsx
apps/web/src/app/(content)/play/checker/layout.tsx
apps/web/src/app/play/checker/layout.tsx
apps/web/src/app/(content)/play/checker/layout.tsx
apps/web/src/app/play/checker/page.tsx
apps/web/src/app/(content)/play/checker/page.tsx
apps/web/src/app/play/checker/page.tsx
apps/web/src/app/(content)/play/checker/page.tsx
apps/web/src/app/play/checker/search-params.ts
apps/web/src/app/(content)/play/checker/search-params.ts
apps/web/src/app/play/checker/search-params.ts
apps/web/src/app/(content)/play/checker/search-params.ts
apps/web/src/app/play/curl/_components/curl-form.tsx
apps/web/src/app/(content)/play/curl/_components/curl-form.tsx
apps/web/src/app/play/curl/_components/curl-form.tsx
apps/web/src/app/(content)/play/curl/_components/curl-form.tsx
apps/web/src/app/play/curl/layout.tsx
apps/web/src/app/(content)/play/curl/layout.tsx
apps/web/src/app/play/curl/layout.tsx
apps/web/src/app/(content)/play/curl/layout.tsx
apps/web/src/app/play/curl/page.tsx
apps/web/src/app/(content)/play/curl/page.tsx
apps/web/src/app/play/curl/page.tsx
apps/web/src/app/(content)/play/curl/page.tsx
apps/web/src/app/play/curl/search-params.ts
apps/web/src/app/(content)/play/curl/search-params.ts
apps/web/src/app/play/curl/search-params.ts
apps/web/src/app/(content)/play/curl/search-params.ts
apps/web/src/app/play/default.tsx
apps/web/src/app/(content)/play/default.tsx
apps/web/src/app/play/default.tsx
apps/web/src/app/(content)/play/default.tsx
-22
apps/web/src/app/play/layout.tsx
-22
apps/web/src/app/play/layout.tsx
···
1
-
import {
2
-
defaultMetadata,
3
-
ogMetadata,
4
-
twitterMetadata,
5
-
} from "@/app/shared-metadata";
6
-
import { MarketingLayout } from "@/components/layout/marketing-layout";
7
-
import type { Metadata } from "next";
8
-
import type { ReactNode } from "react";
9
-
10
-
export const metadata: Metadata = {
11
-
...defaultMetadata,
12
-
twitter: {
13
-
...twitterMetadata,
14
-
},
15
-
openGraph: {
16
-
...ogMetadata,
17
-
},
18
-
};
19
-
20
-
export default function PlayLayout({ children }: { children: ReactNode }) {
21
-
return <MarketingLayout>{children}</MarketingLayout>;
22
-
}
+1
-1
apps/web/src/app/play/page.tsx
apps/web/src/app/(content)/play/page.tsx
+1
-1
apps/web/src/app/play/page.tsx
apps/web/src/app/(content)/play/page.tsx
apps/web/src/app/play/status/_components/status-play.tsx
apps/web/src/app/(content)/play/status/_components/status-play.tsx
apps/web/src/app/play/status/_components/status-play.tsx
apps/web/src/app/(content)/play/status/_components/status-play.tsx
apps/web/src/app/play/status/layout.tsx
apps/web/src/app/(content)/play/status/layout.tsx
apps/web/src/app/play/status/layout.tsx
apps/web/src/app/(content)/play/status/layout.tsx
apps/web/src/app/play/status/page.tsx
apps/web/src/app/(content)/play/status/page.tsx
apps/web/src/app/play/status/page.tsx
apps/web/src/app/(content)/play/status/page.tsx
-52
apps/web/src/app/pricing/page.tsx
-52
apps/web/src/app/pricing/page.tsx
···
1
-
import type { Metadata } from "next";
2
-
3
-
import { Shell } from "@/components/dashboard/shell";
4
-
import { MarketingLayout } from "@/components/layout/marketing-layout";
5
-
import { FAQs } from "@/components/marketing/faqs";
6
-
import { EnterpricePlan } from "@/components/marketing/pricing/enterprice-plan";
7
-
import { PricingSlider } from "@/components/marketing/pricing/pricing-slider";
8
-
import { PricingWrapperSuspense } from "@/components/marketing/pricing/pricing-wrapper";
9
-
import { Separator } from "@openstatus/ui";
10
-
import {
11
-
defaultMetadata,
12
-
ogMetadata,
13
-
twitterMetadata,
14
-
} from "../shared-metadata";
15
-
16
-
export const metadata: Metadata = {
17
-
...defaultMetadata,
18
-
title: "Pricing",
19
-
openGraph: {
20
-
...ogMetadata,
21
-
title: "Pricing",
22
-
url: "https://www.openstatus.dev/pricing",
23
-
},
24
-
twitter: {
25
-
...twitterMetadata,
26
-
title: "Pricing",
27
-
},
28
-
};
29
-
30
-
export default function PricingPage() {
31
-
return (
32
-
<MarketingLayout>
33
-
<div className="grid w-full gap-6">
34
-
<Shell className="grid w-full gap-12">
35
-
<div className="grid gap-3 text-center">
36
-
<h1 className="font-cal text-4xl text-foreground">Pricing</h1>
37
-
<p className="text-muted-foreground">
38
-
All plans. Start free today, upgrade later.
39
-
</p>
40
-
</div>
41
-
<PricingWrapperSuspense />
42
-
<Separator />
43
-
<PricingSlider />
44
-
</Shell>
45
-
<Shell>
46
-
<EnterpricePlan />
47
-
</Shell>
48
-
<FAQs />
49
-
</div>
50
-
</MarketingLayout>
51
-
);
52
-
}