forked from
joebasser.com/atmosphere-account
this repo has no description
1import { useT } from "../i18n/mod.ts";
2
3export default function YourChoice() {
4 const t = useT();
5 const cards = [
6 {
7 icon: (
8 <svg
9 width="28"
10 height="28"
11 viewBox="0 0 24 24"
12 fill="none"
13 stroke="currentColor"
14 stroke-width="1.5"
15 stroke-linecap="round"
16 stroke-linejoin="round"
17 >
18 <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
19 </svg>
20 ),
21 ...t.yourChoice.cards.moderation,
22 },
23 {
24 icon: (
25 <svg
26 width="28"
27 height="28"
28 viewBox="0 0 24 24"
29 fill="none"
30 stroke="currentColor"
31 stroke-width="1.5"
32 stroke-linecap="round"
33 stroke-linejoin="round"
34 >
35 <line x1="4" y1="21" x2="4" y2="14" />
36 <line x1="4" y1="10" x2="4" y2="3" />
37 <line x1="12" y1="21" x2="12" y2="12" />
38 <line x1="12" y1="8" x2="12" y2="3" />
39 <line x1="20" y1="21" x2="20" y2="16" />
40 <line x1="20" y1="12" x2="20" y2="3" />
41 <circle cx="4" cy="12" r="2" />
42 <circle cx="12" cy="10" r="2" />
43 <circle cx="20" cy="14" r="2" />
44 </svg>
45 ),
46 ...t.yourChoice.cards.algorithms,
47 },
48 {
49 icon: (
50 <svg
51 width="28"
52 height="28"
53 viewBox="0 0 24 24"
54 fill="none"
55 stroke="currentColor"
56 stroke-width="1.5"
57 stroke-linecap="round"
58 stroke-linejoin="round"
59 >
60 <path d="M6 12h12M6 7L3 12L6 17M18 7L21 12L18 17" />
61 </svg>
62 ),
63 ...t.yourChoice.cards.portability,
64 },
65 ];
66
67 return (
68 <section class="section reveal">
69 <div class="container">
70 <div class="text-center">
71 <h2 class="text-section">{t.yourChoice.heading}</h2>
72 <div class="divider" />
73 <p
74 class="text-body mt-2"
75 style={{ maxWidth: "640px", margin: "1rem auto 0" }}
76 >
77 {t.yourChoice.intro}
78 </p>
79 </div>
80
81 <div class="your-choice-grid">
82 {cards.map((c) => (
83 <div key={c.title} class="glass feature-card">
84 <div class="feature-card-title-row">
85 <span
86 class="mod-algo-icon mod-algo-icon--inline"
87 aria-hidden="true"
88 >
89 {c.icon}
90 </span>
91 <h3 class="text-subsection">{c.title}</h3>
92 </div>
93 <p class="text-body-sm">{c.body}</p>
94 </div>
95 ))}
96 </div>
97
98 <p
99 class="text-body-sm text-center mt-3"
100 style={{
101 maxWidth: "560px",
102 margin: "1.5rem auto 0",
103 fontStyle: "italic",
104 }}
105 >
106 {t.yourChoice.footnote}
107 </p>
108 </div>
109 </section>
110 );
111}