@lukoweb/apitogo-module-landing 0.1.56 → 0.1.58
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +2 -2
- package/src/DefaultLandingPage.tsx +8 -32
- package/src/LandingShell.tsx +58 -0
- package/src/index.tsx +14 -0
- package/src/landing.css +0 -23
- package/src/sections/ApiShowcaseSection.tsx +1 -1
- package/src/sections/FeaturesSection.tsx +1 -2
- package/src/sections/HeroSection.tsx +4 -6
- package/src/sections/LandingButtons.tsx +1 -1
- package/src/sections/TickerBar.tsx +0 -45
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lukoweb/apitogo-module-landing",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.58",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": "./src/index.tsx"
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"devDependencies": {
|
|
15
15
|
"@types/react": "19.2.14",
|
|
16
16
|
"@types/react-dom": "19.2.3",
|
|
17
|
-
"@lukoweb/apitogo": "0.1.
|
|
17
|
+
"@lukoweb/apitogo": "0.1.58",
|
|
18
18
|
"react": "19.2.4",
|
|
19
19
|
"react-dom": "19.2.4",
|
|
20
20
|
"typescript": "5.9.3"
|
|
@@ -1,12 +1,11 @@
|
|
|
1
|
-
import { cn } from "@lukoweb/apitogo";
|
|
2
1
|
import type { ResolvedLandingContent } from "@lukoweb/apitogo";
|
|
3
|
-
import {
|
|
2
|
+
import { useZudoku } from "@lukoweb/apitogo/components";
|
|
3
|
+
import { LandingShell } from "./LandingShell.js";
|
|
4
4
|
import { ApiShowcaseSection } from "./sections/ApiShowcaseSection.js";
|
|
5
5
|
import { FeaturesSection } from "./sections/FeaturesSection.js";
|
|
6
6
|
import { HeroSection } from "./sections/HeroSection.js";
|
|
7
7
|
import { PricingCtaSection } from "./sections/PricingCtaSection.js";
|
|
8
8
|
import { TrustSection } from "./sections/TrustSection.js";
|
|
9
|
-
import "./landing.css";
|
|
10
9
|
|
|
11
10
|
export type DefaultLandingPageProps = {
|
|
12
11
|
content: ResolvedLandingContent;
|
|
@@ -22,27 +21,15 @@ export const DefaultLandingPage = ({ content }: DefaultLandingPageProps) => {
|
|
|
22
21
|
const description = hero.description;
|
|
23
22
|
|
|
24
23
|
return (
|
|
25
|
-
<
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
href="https://fonts.gstatic.com"
|
|
31
|
-
crossOrigin=""
|
|
32
|
-
/>
|
|
33
|
-
<link
|
|
34
|
-
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"
|
|
35
|
-
rel="stylesheet"
|
|
36
|
-
/>
|
|
37
|
-
<title>{title}</title>
|
|
38
|
-
{description ? <meta name="description" content={description} /> : null}
|
|
39
|
-
</Head>
|
|
40
|
-
|
|
24
|
+
<LandingShell
|
|
25
|
+
title={title}
|
|
26
|
+
description={description}
|
|
27
|
+
showPoweredBy={content.showPoweredBy !== false}
|
|
28
|
+
>
|
|
41
29
|
<HeroSection
|
|
42
30
|
hero={{ ...hero, title }}
|
|
43
31
|
primaryAction={content.primaryAction}
|
|
44
32
|
secondaryAction={content.secondaryAction}
|
|
45
|
-
ticker={content.ticker}
|
|
46
33
|
/>
|
|
47
34
|
|
|
48
35
|
{content.trust ? <TrustSection trust={content.trust} /> : null}
|
|
@@ -58,17 +45,6 @@ export const DefaultLandingPage = ({ content }: DefaultLandingPageProps) => {
|
|
|
58
45
|
{content.pricingCta ? (
|
|
59
46
|
<PricingCtaSection pricingCta={content.pricingCta} />
|
|
60
47
|
) : null}
|
|
61
|
-
|
|
62
|
-
{content.showPoweredBy !== false ? (
|
|
63
|
-
<div
|
|
64
|
-
className={cn(
|
|
65
|
-
"landing-powered-by py-6 text-center text-xs",
|
|
66
|
-
!options.site?.footer && "mb-8",
|
|
67
|
-
)}
|
|
68
|
-
>
|
|
69
|
-
Built with APIToGo
|
|
70
|
-
</div>
|
|
71
|
-
) : null}
|
|
72
|
-
</div>
|
|
48
|
+
</LandingShell>
|
|
73
49
|
);
|
|
74
50
|
};
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { cn } from "@lukoweb/apitogo";
|
|
2
|
+
import { Head, useZudoku } from "@lukoweb/apitogo/components";
|
|
3
|
+
import type { ReactNode } from "react";
|
|
4
|
+
import "./landing.css";
|
|
5
|
+
|
|
6
|
+
export type LandingShellProps = {
|
|
7
|
+
children: ReactNode;
|
|
8
|
+
/** Page title for `<Head>`. Defaults to site title from config. */
|
|
9
|
+
title?: string;
|
|
10
|
+
/** Meta description for `<Head>`. */
|
|
11
|
+
description?: string;
|
|
12
|
+
/** Show "Built with APIToGo" footer. Defaults to true. */
|
|
13
|
+
showPoweredBy?: boolean;
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
export const LandingShell = ({
|
|
17
|
+
children,
|
|
18
|
+
title,
|
|
19
|
+
description,
|
|
20
|
+
showPoweredBy = true,
|
|
21
|
+
}: LandingShellProps) => {
|
|
22
|
+
const { options } = useZudoku();
|
|
23
|
+
const siteTitle =
|
|
24
|
+
options.metadata?.applicationName ?? options.site?.title ?? "APIToGo";
|
|
25
|
+
const pageTitle = title ?? siteTitle;
|
|
26
|
+
|
|
27
|
+
return (
|
|
28
|
+
<div className="apitogo-landing relative overflow-hidden">
|
|
29
|
+
<Head>
|
|
30
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
31
|
+
<link
|
|
32
|
+
rel="preconnect"
|
|
33
|
+
href="https://fonts.gstatic.com"
|
|
34
|
+
crossOrigin=""
|
|
35
|
+
/>
|
|
36
|
+
<link
|
|
37
|
+
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"
|
|
38
|
+
rel="stylesheet"
|
|
39
|
+
/>
|
|
40
|
+
<title>{pageTitle}</title>
|
|
41
|
+
{description ? <meta name="description" content={description} /> : null}
|
|
42
|
+
</Head>
|
|
43
|
+
|
|
44
|
+
{children}
|
|
45
|
+
|
|
46
|
+
{showPoweredBy ? (
|
|
47
|
+
<div
|
|
48
|
+
className={cn(
|
|
49
|
+
"landing-powered-by py-6 text-center text-xs",
|
|
50
|
+
!options.site?.footer && "mb-8",
|
|
51
|
+
)}
|
|
52
|
+
>
|
|
53
|
+
Built with APIToGo
|
|
54
|
+
</div>
|
|
55
|
+
) : null}
|
|
56
|
+
</div>
|
|
57
|
+
);
|
|
58
|
+
};
|
package/src/index.tsx
CHANGED
|
@@ -1,4 +1,18 @@
|
|
|
1
1
|
export { DefaultLandingPage } from "./DefaultLandingPage.js";
|
|
2
2
|
export type { DefaultLandingPageProps } from "./DefaultLandingPage.js";
|
|
3
|
+
export { LandingShell } from "./LandingShell.js";
|
|
4
|
+
export type { LandingShellProps } from "./LandingShell.js";
|
|
3
5
|
export { landingModule } from "./landingModule.js";
|
|
4
6
|
export type { LandingModuleOptions } from "./landingModule.js";
|
|
7
|
+
export { HeroSection } from "./sections/HeroSection.js";
|
|
8
|
+
export type { HeroSectionProps } from "./sections/HeroSection.js";
|
|
9
|
+
export { TrustSection } from "./sections/TrustSection.js";
|
|
10
|
+
export type { TrustSectionProps } from "./sections/TrustSection.js";
|
|
11
|
+
export { FeaturesSection } from "./sections/FeaturesSection.js";
|
|
12
|
+
export type { FeaturesSectionProps } from "./sections/FeaturesSection.js";
|
|
13
|
+
export { ApiShowcaseSection } from "./sections/ApiShowcaseSection.js";
|
|
14
|
+
export type { ApiShowcaseSectionProps } from "./sections/ApiShowcaseSection.js";
|
|
15
|
+
export { PricingCtaSection } from "./sections/PricingCtaSection.js";
|
|
16
|
+
export type { PricingCtaSectionProps } from "./sections/PricingCtaSection.js";
|
|
17
|
+
export { CodeExampleCard } from "./sections/CodeExampleCard.js";
|
|
18
|
+
export type { CodeExampleCardProps } from "./sections/CodeExampleCard.js";
|
package/src/landing.css
CHANGED
|
@@ -58,15 +58,6 @@
|
|
|
58
58
|
}
|
|
59
59
|
}
|
|
60
60
|
|
|
61
|
-
@keyframes landing-ticker {
|
|
62
|
-
from {
|
|
63
|
-
transform: translateX(0);
|
|
64
|
-
}
|
|
65
|
-
to {
|
|
66
|
-
transform: translateX(-50%);
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
|
|
70
61
|
.apitogo-landing .landing-display {
|
|
71
62
|
font-family: var(--landing-display);
|
|
72
63
|
}
|
|
@@ -201,7 +192,6 @@
|
|
|
201
192
|
}
|
|
202
193
|
|
|
203
194
|
.apitogo-landing .landing-feature-icon {
|
|
204
|
-
align-items: center;
|
|
205
195
|
background: var(--landing-accent-soft);
|
|
206
196
|
border-radius: 11px;
|
|
207
197
|
color: var(--landing-accent);
|
|
@@ -231,7 +221,6 @@
|
|
|
231
221
|
}
|
|
232
222
|
|
|
233
223
|
.apitogo-landing .landing-api-icon {
|
|
234
|
-
align-items: center;
|
|
235
224
|
background: var(--landing-surface-2);
|
|
236
225
|
border: 1px solid var(--landing-border);
|
|
237
226
|
border-radius: 9px;
|
|
@@ -252,18 +241,6 @@
|
|
|
252
241
|
padding: 0.1875rem 0.4375rem;
|
|
253
242
|
}
|
|
254
243
|
|
|
255
|
-
.apitogo-landing .landing-ticker-track {
|
|
256
|
-
animation: landing-ticker 34s linear infinite;
|
|
257
|
-
display: flex;
|
|
258
|
-
width: max-content;
|
|
259
|
-
}
|
|
260
|
-
|
|
261
|
-
.apitogo-landing .landing-ticker-shell {
|
|
262
|
-
background: var(--landing-bg-2);
|
|
263
|
-
border-top: 1px solid var(--landing-border);
|
|
264
|
-
overflow: hidden;
|
|
265
|
-
}
|
|
266
|
-
|
|
267
244
|
.apitogo-landing .landing-trust-logo {
|
|
268
245
|
color: var(--landing-text-2);
|
|
269
246
|
font-family: var(--landing-display);
|
|
@@ -23,7 +23,7 @@ export const ApiShowcaseSection = ({
|
|
|
23
23
|
<div className="mx-auto max-w-[1200px] px-6 py-[3.75rem]">
|
|
24
24
|
<div className="mb-8 flex flex-wrap items-end justify-between gap-5">
|
|
25
25
|
<div>
|
|
26
|
-
<p className="landing-section-label"
|
|
26
|
+
<p className="landing-section-label">{"// the catalog"}</p>
|
|
27
27
|
<h2 className="landing-display text-[2.125rem] leading-tight font-bold tracking-[-0.025em]">
|
|
28
28
|
{apiShowcase.title ?? "Production APIs. One key."}
|
|
29
29
|
</h2>
|
|
@@ -15,8 +15,7 @@ export const FeaturesSection = ({
|
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
const label = section?.label ?? "// why us";
|
|
18
|
-
const title =
|
|
19
|
-
section?.title ?? "Everything you need to build on your API";
|
|
18
|
+
const title = section?.title ?? "Everything you need to build on your API";
|
|
20
19
|
const description =
|
|
21
20
|
section?.description ??
|
|
22
21
|
"Skip the infra. Focus on your product while your developer portal handles docs, auth, and billing.";
|
|
@@ -3,20 +3,17 @@ import { cn } from "@lukoweb/apitogo";
|
|
|
3
3
|
import { ArrowRightIcon, BookOpenIcon, CheckIcon } from "lucide-react";
|
|
4
4
|
import { CodeExampleCard } from "./CodeExampleCard.js";
|
|
5
5
|
import { LandingButton } from "./LandingButtons.js";
|
|
6
|
-
import { TickerBar } from "./TickerBar.js";
|
|
7
6
|
|
|
8
7
|
export type HeroSectionProps = {
|
|
9
8
|
hero: NonNullable<ResolvedLandingContent["hero"]>;
|
|
10
9
|
primaryAction?: ResolvedLandingContent["primaryAction"];
|
|
11
10
|
secondaryAction?: ResolvedLandingContent["secondaryAction"];
|
|
12
|
-
ticker?: ResolvedLandingContent["ticker"];
|
|
13
11
|
};
|
|
14
12
|
|
|
15
13
|
export const HeroSection = ({
|
|
16
14
|
hero,
|
|
17
15
|
primaryAction,
|
|
18
16
|
secondaryAction,
|
|
19
|
-
ticker,
|
|
20
17
|
}: HeroSectionProps) => {
|
|
21
18
|
const hasCodeExample = Boolean(hero.codeExample?.code);
|
|
22
19
|
const highlights = hero.highlights ?? [];
|
|
@@ -96,7 +93,10 @@ export const HeroSection = ({
|
|
|
96
93
|
{highlights.length > 0 ? (
|
|
97
94
|
<ul className="landing-muted-3 mt-[1.875rem] flex flex-wrap items-center gap-x-[1.375rem] gap-y-2 text-[0.8125rem]">
|
|
98
95
|
{highlights.map((item) => (
|
|
99
|
-
<li
|
|
96
|
+
<li
|
|
97
|
+
key={item}
|
|
98
|
+
className="inline-flex items-center gap-[0.4375rem]"
|
|
99
|
+
>
|
|
100
100
|
<CheckIcon
|
|
101
101
|
size={15}
|
|
102
102
|
className="text-[var(--landing-green)]"
|
|
@@ -115,8 +115,6 @@ export const HeroSection = ({
|
|
|
115
115
|
</div>
|
|
116
116
|
) : null}
|
|
117
117
|
</div>
|
|
118
|
-
|
|
119
|
-
{ticker ? <TickerBar ticker={ticker} embedded /> : null}
|
|
120
118
|
</section>
|
|
121
119
|
);
|
|
122
120
|
};
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import type { ResolvedLandingContent } from "@lukoweb/apitogo";
|
|
2
|
-
|
|
3
|
-
export type TickerBarProps = {
|
|
4
|
-
ticker: NonNullable<ResolvedLandingContent["ticker"]>;
|
|
5
|
-
embedded?: boolean;
|
|
6
|
-
};
|
|
7
|
-
|
|
8
|
-
export const TickerBar = ({ ticker, embedded = false }: TickerBarProps) => {
|
|
9
|
-
const items = ticker.items ?? [];
|
|
10
|
-
if (items.length === 0) {
|
|
11
|
-
return null;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
const loop = [...items, ...items];
|
|
15
|
-
|
|
16
|
-
return (
|
|
17
|
-
<div className={embedded ? "landing-ticker-shell" : "landing-ticker-shell border-t-0"}>
|
|
18
|
-
<div className="landing-ticker-track">
|
|
19
|
-
{loop.map((item, index) => (
|
|
20
|
-
<div
|
|
21
|
-
key={`${item.label}-${index}`}
|
|
22
|
-
className="landing-mono flex items-center gap-2.5 border-r border-[var(--landing-border)] px-[1.625rem] py-[0.8125rem] text-[0.8125rem] whitespace-nowrap"
|
|
23
|
-
>
|
|
24
|
-
<span className="landing-muted-3 font-semibold">{item.label}</span>
|
|
25
|
-
<span className="font-semibold text-[var(--landing-text)]">
|
|
26
|
-
{item.value}
|
|
27
|
-
</span>
|
|
28
|
-
{item.change ? (
|
|
29
|
-
<span
|
|
30
|
-
className="font-semibold"
|
|
31
|
-
style={{
|
|
32
|
-
color: item.change.trim().startsWith("-")
|
|
33
|
-
? "var(--landing-accent)"
|
|
34
|
-
: "var(--landing-green)",
|
|
35
|
-
}}
|
|
36
|
-
>
|
|
37
|
-
{item.change}
|
|
38
|
-
</span>
|
|
39
|
-
) : null}
|
|
40
|
-
</div>
|
|
41
|
-
))}
|
|
42
|
-
</div>
|
|
43
|
-
</div>
|
|
44
|
-
);
|
|
45
|
-
};
|