Skip to content

Commit e328466

Browse files
bermantobermanto
committed
Add legal policy pages
1 parent 8671493 commit e328466

4 files changed

Lines changed: 981 additions & 4 deletions

File tree

‎apps/site/src/components/Footer.astro‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -120,16 +120,16 @@ const footerGroups = [
120120
class="flex flex-wrap items-center justify-center gap-x-5 gap-y-3 sm:justify-end sm:gap-x-7"
121121
>
122122
<a
123-
href="mailto:privacy@chartkit.io"
123+
href="/privacy"
124124
class="font-medium transition-colors hover:text-white [html[data-theme='light']_&]:hover:text-black"
125125
>
126-
Privacy Policy
126+
Privacy policy
127127
</a>
128128
<a
129-
href="mailto:legal@chartkit.io"
129+
href="/terms"
130130
class="font-medium transition-colors hover:text-white [html[data-theme='light']_&]:hover:text-black"
131131
>
132-
Terms of Service
132+
Terms of service
133133
</a>
134134
<button
135135
type="button"

‎apps/site/src/layouts/LegalLayout.astro‎

Lines changed: 246 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,246 @@
1+
---
2+
import "../styles/global.css";
3+
import FaviconLinks from "../components/FaviconLinks.astro";
4+
import Footer from "../components/Footer.astro";
5+
import GoogleAnalytics from "../components/GoogleAnalytics.astro";
6+
import Header from "../components/Header.astro";
7+
import SocialImageMeta from "../components/SocialImageMeta.astro";
8+
import ThemeInit from "../components/ThemeInit.astro";
9+
10+
type Props = {
11+
canonicalPath: string;
12+
description: string;
13+
title: string;
14+
updated: string;
15+
};
16+
17+
const { canonicalPath, description, title, updated } = Astro.props;
18+
const pageUrl = `https://chartkit.io${canonicalPath}`;
19+
---
20+
21+
<html lang="en">
22+
<head>
23+
<meta charset="UTF-8" />
24+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
25+
<meta name="theme-color" content="#06070a" />
26+
<title>{title} - Chart Kit</title>
27+
<meta name="description" content={description} />
28+
<link rel="canonical" href={pageUrl} />
29+
<meta property="og:type" content="website" />
30+
<meta property="og:title" content={`${title} - Chart Kit`} />
31+
<meta property="og:description" content={description} />
32+
<meta property="og:url" content={pageUrl} />
33+
<meta property="og:site_name" content="React Native Chart Kit" />
34+
<meta name="twitter:title" content={`${title} - Chart Kit`} />
35+
<meta name="twitter:description" content={description} />
36+
<SocialImageMeta />
37+
<FaviconLinks />
38+
<ThemeInit />
39+
<GoogleAnalytics />
40+
</head>
41+
<body class="landing-page">
42+
<Header homeHrefPrefix="/" />
43+
<main
44+
class="min-h-screen bg-black text-white transition-colors duration-300 [html[data-theme='light']_&]:bg-white [html[data-theme='light']_&]:text-black"
45+
>
46+
<section
47+
class="border-b border-white/[0.08] pt-22 pb-8 transition-colors duration-300 [html[data-theme='light']_&]:border-black/[0.08] sm:pt-24 sm:pb-10"
48+
>
49+
<div
50+
class="mx-auto max-w-[900px] px-6 sm:px-8 md:px-10 lg:px-12 xl:px-16"
51+
>
52+
<h1
53+
class="max-w-3xl text-[clamp(32px,5vw,48px)] font-semibold leading-[1.06] text-white transition-colors duration-300 [html[data-theme='light']_&]:text-black"
54+
>
55+
{title}
56+
</h1>
57+
<p
58+
class="mt-4 max-w-3xl text-[15px] leading-7 text-white/58 transition-colors duration-300 sm:text-base [html[data-theme='light']_&]:text-black/58"
59+
>
60+
{description}
61+
</p>
62+
<p
63+
class="mt-5 text-xs font-semibold text-white/42 transition-colors duration-300 [html[data-theme='light']_&]:text-black/42"
64+
>
65+
Last updated: {updated}
66+
</p>
67+
</div>
68+
</section>
69+
70+
<section
71+
class="mx-auto max-w-[900px] px-6 py-10 sm:px-8 sm:py-12 md:px-10 lg:px-12 xl:px-16"
72+
>
73+
<article class="legal-content">
74+
<slot />
75+
</article>
76+
</section>
77+
</main>
78+
<Footer homeHrefPrefix="/" />
79+
</body>
80+
</html>
81+
82+
<style is:global>
83+
.legal-content {
84+
color: rgb(255 255 255 / 0.66);
85+
font-size: 0.98rem;
86+
line-height: 1.78;
87+
}
88+
89+
html[data-theme="light"] .legal-content {
90+
color: rgb(0 0 0 / 0.66);
91+
}
92+
93+
.legal-content > * + * {
94+
margin-top: 1.2rem;
95+
}
96+
97+
.legal-content section {
98+
padding-top: 0;
99+
}
100+
101+
.legal-content section + section {
102+
margin-top: 3.1rem;
103+
}
104+
105+
.legal-content h2 {
106+
color: #fff;
107+
font-family:
108+
"Satoshi",
109+
"SF Pro Display",
110+
"SF Pro Text",
111+
-apple-system,
112+
BlinkMacSystemFont,
113+
"Helvetica Neue",
114+
Arial,
115+
sans-serif;
116+
font-size: clamp(1.55rem, 3vw, 2rem);
117+
font-weight: 700;
118+
letter-spacing: 0.005em;
119+
line-height: 1.12;
120+
margin: 0 0 1rem;
121+
}
122+
123+
html[data-theme="light"] .legal-content h2 {
124+
color: #000;
125+
}
126+
127+
.legal-content h3 {
128+
color: rgb(255 255 255 / 0.88);
129+
font-size: 1rem;
130+
font-weight: 700;
131+
line-height: 1.4;
132+
margin: 1.35rem 0 0.45rem;
133+
}
134+
135+
html[data-theme="light"] .legal-content h3 {
136+
color: rgb(0 0 0 / 0.86);
137+
}
138+
139+
.legal-content p {
140+
margin: 0;
141+
}
142+
143+
.legal-content ul,
144+
.legal-content ol {
145+
margin: 0.9rem 0 0;
146+
padding-left: 1.25rem;
147+
}
148+
149+
.legal-content ul {
150+
list-style: disc;
151+
}
152+
153+
.legal-content ol {
154+
list-style: decimal;
155+
}
156+
157+
.legal-content li::marker {
158+
color: rgb(255 255 255 / 0.46);
159+
}
160+
161+
html[data-theme="light"] .legal-content li::marker {
162+
color: rgb(0 0 0 / 0.42);
163+
}
164+
165+
.legal-content li + li {
166+
margin-top: 0.55rem;
167+
}
168+
169+
.legal-content strong {
170+
color: rgb(255 255 255 / 0.86);
171+
font-weight: 700;
172+
}
173+
174+
html[data-theme="light"] .legal-content strong {
175+
color: rgb(0 0 0 / 0.84);
176+
}
177+
178+
.legal-content a {
179+
color: rgb(255 255 255 / 0.9);
180+
font-weight: 650;
181+
text-decoration: underline;
182+
text-decoration-color: rgb(255 255 255 / 0.26);
183+
text-underline-offset: 0.18em;
184+
transition:
185+
color 180ms ease,
186+
text-decoration-color 180ms ease;
187+
}
188+
189+
.legal-content a:hover {
190+
color: #fff;
191+
text-decoration-color: rgb(255 255 255 / 0.72);
192+
}
193+
194+
html[data-theme="light"] .legal-content a {
195+
color: rgb(0 0 0 / 0.86);
196+
text-decoration-color: rgb(0 0 0 / 0.24);
197+
}
198+
199+
html[data-theme="light"] .legal-content a:hover {
200+
color: #000;
201+
text-decoration-color: rgb(0 0 0 / 0.68);
202+
}
203+
204+
.legal-content table {
205+
border-collapse: collapse;
206+
display: block;
207+
margin-top: 1rem;
208+
margin-bottom: 1.35rem;
209+
overflow-x: auto;
210+
width: 100%;
211+
}
212+
213+
.legal-content th,
214+
.legal-content td {
215+
border-bottom: 1px solid rgb(255 255 255 / 0.1);
216+
min-width: 12rem;
217+
padding: 0.85rem 1rem 0.85rem 0;
218+
text-align: left;
219+
vertical-align: top;
220+
}
221+
222+
.landing-page .legal-content table th {
223+
letter-spacing: 0;
224+
text-transform: none !important;
225+
}
226+
227+
html[data-theme="light"] .legal-content th,
228+
html[data-theme="light"] .legal-content td {
229+
border-bottom-color: rgb(0 0 0 / 0.1);
230+
}
231+
232+
.landing-page .legal-content table tbody tr:last-child > td,
233+
.landing-page .legal-content table tbody tr:last-of-type > td {
234+
border-bottom: 0 !important;
235+
}
236+
237+
.legal-content th {
238+
color: rgb(255 255 255 / 0.86);
239+
font-size: 0.88rem;
240+
font-weight: 800;
241+
}
242+
243+
html[data-theme="light"] .legal-content th {
244+
color: rgb(0 0 0 / 0.8);
245+
}
246+
</style>

0 commit comments

Comments
 (0)