@lukoweb/apitogo-module-landing 0.1.57 → 0.1.59
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 +9 -32
- package/src/LandingFooterSlot.tsx +26 -0
- package/src/LandingShell.tsx +81 -0
- package/src/index.tsx +18 -0
- package/src/landing.css +4 -23
- package/src/sections/ApiShowcaseSection.tsx +1 -1
- package/src/sections/FeaturesSection.tsx +1 -2
- package/src/sections/FooterSection.tsx +152 -0
- 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.59",
|
|
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.59",
|
|
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,7 @@ export const DefaultLandingPage = ({ content }: DefaultLandingPageProps) => {
|
|
|
58
45
|
{content.pricingCta ? (
|
|
59
46
|
<PricingCtaSection pricingCta={content.pricingCta} />
|
|
60
47
|
) : null}
|
|
61
|
-
|
|
62
|
-
|
|
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
|
+
{/* content.footer renders portal-wide via the layout "footer" slot. */}
|
|
49
|
+
</LandingShell>
|
|
73
50
|
);
|
|
74
51
|
};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import type { ResolvedLandingContent } from "@lukoweb/apitogo";
|
|
2
|
+
import type { ComponentType } from "react";
|
|
3
|
+
import { FooterSection } from "./sections/FooterSection.js";
|
|
4
|
+
import "./landing.css";
|
|
5
|
+
|
|
6
|
+
export type LandingFooterSlotConfig = ResolvedLandingContent["footer"];
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Builds a component for the layout "footer" slot so the landing footer
|
|
10
|
+
* renders on every page (home, docs, API reference, pricing, auth).
|
|
11
|
+
*/
|
|
12
|
+
export const createLandingFooterSlot = (
|
|
13
|
+
footer: LandingFooterSlotConfig,
|
|
14
|
+
): ComponentType | undefined => {
|
|
15
|
+
if (!footer || footer.enabled === false) {
|
|
16
|
+
return undefined;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
const LandingFooterSlot = () => (
|
|
20
|
+
<div className="apitogo-landing">
|
|
21
|
+
<FooterSection footer={footer} />
|
|
22
|
+
</div>
|
|
23
|
+
);
|
|
24
|
+
|
|
25
|
+
return LandingFooterSlot;
|
|
26
|
+
};
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import { cn } from "@lukoweb/apitogo";
|
|
2
|
+
import { Head, useZudoku } from "@lukoweb/apitogo/components";
|
|
3
|
+
import { Children, isValidElement, type ReactNode } from "react";
|
|
4
|
+
import { FooterSection } from "./sections/FooterSection.js";
|
|
5
|
+
import "./landing.css";
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Detects a composed `FooterSection` in the element tree so the
|
|
9
|
+
* "Built with APIToGo" line can be replaced by the real footer.
|
|
10
|
+
*/
|
|
11
|
+
const containsFooterSection = (node: ReactNode): boolean =>
|
|
12
|
+
Children.toArray(node).some((child) => {
|
|
13
|
+
if (!isValidElement(child)) {
|
|
14
|
+
return false;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
if (child.type === FooterSection) {
|
|
18
|
+
return true;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
const { children } = child.props as { children?: ReactNode };
|
|
22
|
+
return children ? containsFooterSection(children) : false;
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
export type LandingShellProps = {
|
|
26
|
+
children: ReactNode;
|
|
27
|
+
/** Page title for `<Head>`. Defaults to site title from config. */
|
|
28
|
+
title?: string;
|
|
29
|
+
/** Meta description for `<Head>`. */
|
|
30
|
+
description?: string;
|
|
31
|
+
/**
|
|
32
|
+
* Show the "Built with APIToGo" line. Defaults to true.
|
|
33
|
+
* Automatically hidden when a `FooterSection` is composed as a child.
|
|
34
|
+
*/
|
|
35
|
+
showPoweredBy?: boolean;
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
export const LandingShell = ({
|
|
39
|
+
children,
|
|
40
|
+
title,
|
|
41
|
+
description,
|
|
42
|
+
showPoweredBy = true,
|
|
43
|
+
}: LandingShellProps) => {
|
|
44
|
+
const { options } = useZudoku();
|
|
45
|
+
const siteTitle =
|
|
46
|
+
options.metadata?.applicationName ?? options.site?.title ?? "APIToGo";
|
|
47
|
+
const pageTitle = title ?? siteTitle;
|
|
48
|
+
const hasFooter = containsFooterSection(children);
|
|
49
|
+
|
|
50
|
+
return (
|
|
51
|
+
<div className="apitogo-landing relative overflow-hidden">
|
|
52
|
+
<Head>
|
|
53
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
54
|
+
<link
|
|
55
|
+
rel="preconnect"
|
|
56
|
+
href="https://fonts.gstatic.com"
|
|
57
|
+
crossOrigin=""
|
|
58
|
+
/>
|
|
59
|
+
<link
|
|
60
|
+
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"
|
|
61
|
+
rel="stylesheet"
|
|
62
|
+
/>
|
|
63
|
+
<title>{pageTitle}</title>
|
|
64
|
+
{description ? <meta name="description" content={description} /> : null}
|
|
65
|
+
</Head>
|
|
66
|
+
|
|
67
|
+
{children}
|
|
68
|
+
|
|
69
|
+
{showPoweredBy && !hasFooter ? (
|
|
70
|
+
<div
|
|
71
|
+
className={cn(
|
|
72
|
+
"landing-powered-by py-6 text-center text-xs",
|
|
73
|
+
!options.site?.footer && "mb-8",
|
|
74
|
+
)}
|
|
75
|
+
>
|
|
76
|
+
Built with APIToGo
|
|
77
|
+
</div>
|
|
78
|
+
) : null}
|
|
79
|
+
</div>
|
|
80
|
+
);
|
|
81
|
+
};
|
package/src/index.tsx
CHANGED
|
@@ -1,4 +1,22 @@
|
|
|
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 { createLandingFooterSlot } from "./LandingFooterSlot.js";
|
|
8
|
+
export type { LandingFooterSlotConfig } from "./LandingFooterSlot.js";
|
|
9
|
+
export { HeroSection } from "./sections/HeroSection.js";
|
|
10
|
+
export type { HeroSectionProps } from "./sections/HeroSection.js";
|
|
11
|
+
export { TrustSection } from "./sections/TrustSection.js";
|
|
12
|
+
export type { TrustSectionProps } from "./sections/TrustSection.js";
|
|
13
|
+
export { FeaturesSection } from "./sections/FeaturesSection.js";
|
|
14
|
+
export type { FeaturesSectionProps } from "./sections/FeaturesSection.js";
|
|
15
|
+
export { ApiShowcaseSection } from "./sections/ApiShowcaseSection.js";
|
|
16
|
+
export type { ApiShowcaseSectionProps } from "./sections/ApiShowcaseSection.js";
|
|
17
|
+
export { PricingCtaSection } from "./sections/PricingCtaSection.js";
|
|
18
|
+
export type { PricingCtaSectionProps } from "./sections/PricingCtaSection.js";
|
|
19
|
+
export { FooterSection } from "./sections/FooterSection.js";
|
|
20
|
+
export type { FooterSectionProps } from "./sections/FooterSection.js";
|
|
21
|
+
export { CodeExampleCard } from "./sections/CodeExampleCard.js";
|
|
22
|
+
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);
|
|
@@ -286,3 +263,7 @@
|
|
|
286
263
|
border-top: 1px solid var(--landing-border);
|
|
287
264
|
color: var(--landing-text-3);
|
|
288
265
|
}
|
|
266
|
+
|
|
267
|
+
.apitogo-landing .landing-footer-social-link {
|
|
268
|
+
color: var(--landing-text-3);
|
|
269
|
+
}
|
|
@@ -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.";
|
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
import type { ResolvedLandingContent } from "@lukoweb/apitogo";
|
|
2
|
+
import { useZudoku } from "@lukoweb/apitogo/components";
|
|
3
|
+
import type { ReactElement } from "react";
|
|
4
|
+
|
|
5
|
+
export type FooterSectionProps = {
|
|
6
|
+
footer: NonNullable<ResolvedLandingContent["footer"]>;
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
const GitHubIcon = ({ className }: { className?: string }) => (
|
|
10
|
+
<svg
|
|
11
|
+
viewBox="0 0 24 24"
|
|
12
|
+
fill="currentColor"
|
|
13
|
+
className={className}
|
|
14
|
+
aria-hidden
|
|
15
|
+
>
|
|
16
|
+
<path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12Z" />
|
|
17
|
+
</svg>
|
|
18
|
+
);
|
|
19
|
+
|
|
20
|
+
const XIcon = ({ className }: { className?: string }) => (
|
|
21
|
+
<svg
|
|
22
|
+
viewBox="0 0 24 24"
|
|
23
|
+
fill="currentColor"
|
|
24
|
+
className={className}
|
|
25
|
+
aria-hidden
|
|
26
|
+
>
|
|
27
|
+
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
|
|
28
|
+
</svg>
|
|
29
|
+
);
|
|
30
|
+
|
|
31
|
+
const SOCIAL_ICONS: Record<
|
|
32
|
+
string,
|
|
33
|
+
(props: { className?: string }) => ReactElement
|
|
34
|
+
> = {
|
|
35
|
+
github: GitHubIcon,
|
|
36
|
+
x: XIcon,
|
|
37
|
+
twitter: XIcon,
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
const FooterSocialLink = ({
|
|
41
|
+
icon,
|
|
42
|
+
href,
|
|
43
|
+
label,
|
|
44
|
+
}: {
|
|
45
|
+
icon: string;
|
|
46
|
+
href: string;
|
|
47
|
+
label?: string;
|
|
48
|
+
}) => {
|
|
49
|
+
const Icon = SOCIAL_ICONS[icon.toLowerCase()];
|
|
50
|
+
const accessibleLabel = label ?? icon;
|
|
51
|
+
|
|
52
|
+
return (
|
|
53
|
+
<a
|
|
54
|
+
href={href}
|
|
55
|
+
target="_blank"
|
|
56
|
+
rel="noopener noreferrer"
|
|
57
|
+
aria-label={accessibleLabel}
|
|
58
|
+
className="landing-footer-social-link landing-muted-3 inline-flex items-center justify-center transition-colors hover:text-[var(--landing-text)]"
|
|
59
|
+
>
|
|
60
|
+
{Icon ? (
|
|
61
|
+
<Icon className="h-[1.125rem] w-[1.125rem]" />
|
|
62
|
+
) : (
|
|
63
|
+
<span className="text-xs font-medium">{accessibleLabel}</span>
|
|
64
|
+
)}
|
|
65
|
+
</a>
|
|
66
|
+
);
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
export const FooterSection = ({ footer }: FooterSectionProps) => {
|
|
70
|
+
const { options } = useZudoku();
|
|
71
|
+
const siteTitle =
|
|
72
|
+
options.metadata?.applicationName ?? options.site?.title ?? "APIToGo";
|
|
73
|
+
|
|
74
|
+
const brandName = footer.brand?.name ?? siteTitle;
|
|
75
|
+
const tagline = footer.brand?.tagline;
|
|
76
|
+
const logoSrc = footer.brand?.logoSrc;
|
|
77
|
+
const columns = footer.columns ?? [];
|
|
78
|
+
const social = footer.social ?? [];
|
|
79
|
+
const year = new Date().getFullYear();
|
|
80
|
+
const copyright =
|
|
81
|
+
footer.copyright ?? `© ${year} ${brandName}. All rights reserved.`;
|
|
82
|
+
|
|
83
|
+
if (columns.length === 0 && !tagline && !logoSrc && social.length === 0) {
|
|
84
|
+
return null;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
return (
|
|
88
|
+
<footer className="landing-footer border-t border-[var(--landing-border)] bg-[var(--landing-bg-2)]">
|
|
89
|
+
<div className="mx-auto max-w-[1200px] px-6 py-12">
|
|
90
|
+
<div className="grid gap-10 sm:grid-cols-2 lg:grid-cols-[1.4fr_repeat(3,minmax(0,1fr))]">
|
|
91
|
+
<div className="sm:col-span-2 lg:col-span-1">
|
|
92
|
+
<div className="mb-3 flex items-center gap-2.5">
|
|
93
|
+
{logoSrc ? (
|
|
94
|
+
<img
|
|
95
|
+
src={logoSrc}
|
|
96
|
+
alt={brandName}
|
|
97
|
+
className="h-7 w-auto object-contain"
|
|
98
|
+
/>
|
|
99
|
+
) : (
|
|
100
|
+
<span className="landing-display text-[1.125rem] font-bold tracking-[-0.02em]">
|
|
101
|
+
<span className="text-[var(--landing-peri)]">API</span>
|
|
102
|
+
<span>ToGo</span>
|
|
103
|
+
</span>
|
|
104
|
+
)}
|
|
105
|
+
</div>
|
|
106
|
+
{tagline ? (
|
|
107
|
+
<p className="landing-muted max-w-[280px] text-[0.875rem] leading-relaxed">
|
|
108
|
+
{tagline}
|
|
109
|
+
</p>
|
|
110
|
+
) : null}
|
|
111
|
+
</div>
|
|
112
|
+
|
|
113
|
+
{columns.map((column) => (
|
|
114
|
+
<div key={column.title}>
|
|
115
|
+
<h3 className="mb-4 text-[0.875rem] font-semibold text-[var(--landing-text)]">
|
|
116
|
+
{column.title}
|
|
117
|
+
</h3>
|
|
118
|
+
<ul className="space-y-2.5">
|
|
119
|
+
{column.links.map((link) => (
|
|
120
|
+
<li key={`${column.title}-${link.label}`}>
|
|
121
|
+
<a
|
|
122
|
+
href={link.href}
|
|
123
|
+
className="landing-muted text-[0.875rem] transition-colors hover:text-[var(--landing-text)]"
|
|
124
|
+
>
|
|
125
|
+
{link.label}
|
|
126
|
+
</a>
|
|
127
|
+
</li>
|
|
128
|
+
))}
|
|
129
|
+
</ul>
|
|
130
|
+
</div>
|
|
131
|
+
))}
|
|
132
|
+
</div>
|
|
133
|
+
|
|
134
|
+
<div className="landing-footer-bar mt-10 flex flex-col items-center justify-between gap-4 border-t border-[var(--landing-border)] pt-6 sm:flex-row">
|
|
135
|
+
<p className="landing-muted-3 text-[0.8125rem]">{copyright}</p>
|
|
136
|
+
{social.length > 0 ? (
|
|
137
|
+
<div className="flex items-center gap-4">
|
|
138
|
+
{social.map((item) => (
|
|
139
|
+
<FooterSocialLink
|
|
140
|
+
key={`${item.icon}-${item.href}`}
|
|
141
|
+
icon={item.icon}
|
|
142
|
+
href={item.href}
|
|
143
|
+
label={item.label}
|
|
144
|
+
/>
|
|
145
|
+
))}
|
|
146
|
+
</div>
|
|
147
|
+
) : null}
|
|
148
|
+
</div>
|
|
149
|
+
</div>
|
|
150
|
+
</footer>
|
|
151
|
+
);
|
|
152
|
+
};
|
|
@@ -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
|
-
};
|