Add official App Store and Play Store badges
Display App Store and Google Play download badges on the homepage hero section with official styling. Links to: • App Store: https://apps.apple.com/se/app/siti-ai/id6780047972 • Play Store: https://play.google.com/store/apps/details?id=ai.siti.Siti Badges open in a new tab with the proper rel attributes. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
paydii committed
Jul 15, 2026 at 17:10 UTC
caa24d87100c879afacfb7b7b25eea8701f14e4e
2 files changed
+115
-7
web/app/page.tsx
+3
-7
@@ -1,5 +1,6 @@
1
import Link from "next/link";
2
import { AppScreenshots } from "@/components/app-screenshots";
3
+import { StoreBadges } from "@/components/store-badges";
4
5
const features = [
6
{
@@ -31,13 +32,8 @@ export default function HomePage() {
32
Siti runs on your iPhone, iPad, and Mac. Ask it anything, and your
33
conversations stay with you instead of on someone else's servers.
34
</p>
34
- <div className="mt-10 flex items-center justify-center gap-4">
35
- <a
36
- href="https://apps.apple.com/se/app/siti-ai/id6780047972"
37
- className="rounded-sm bg-accent px-6 py-3 text-sm font-medium text-bg transition-colors hover:bg-accent-hover"
38
- >
39
- Download for Apple
40
- </a>
35
+ <div className="mt-10 flex flex-col items-center justify-center gap-6">
36
+ <StoreBadges />
37
<Link
38
href="/about"
39
className="rounded-sm border border-border px-6 py-3 text-sm font-medium text-ink transition-colors hover:bg-surface"
web/components/store-badges.tsx
new
+112
@@ -0,0 +1,112 @@
1
+/**
2
+ * Official App Store and Play Store badges.
3
+ * Links to download Siti AI from each platform.
4
+ */
5
+
6
+export function StoreBadges() {
7
+ return (
8
+ <div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
9
+ <a
10
+ href="https://apps.apple.com/se/app/siti-ai/id6780047972"
11
+ target="_blank"
12
+ rel="noopener noreferrer"
13
+ className="transition-opacity hover:opacity-80"
14
+ aria-label="Download Siti AI on the App Store"
15
+ >
16
+ <svg
17
+ viewBox="0 0 120 40"
18
+ width="120"
19
+ height="40"
20
+ className="h-10 w-auto"
21
+ xmlns="http://www.w3.org/2000/svg"
22
+ >
23
+ {/* App Store badge background */}
24
+ <rect width="120" height="40" rx="6" fill="black" />
25
+ {/* Apple logo */}
26
+ <path
27
+ d="M14.5 12c-.5 0-1 .3-1.2.8l-4 9.4c-.2.5 0 1 .5 1.2.5.2 1 0 1.2-.5l.8-2h4l.8 2c.2.5.7.7 1.2.5.5-.2.7-.7.5-1.2l-4-9.4c-.2-.5-.7-.8-1.2-.8zm-1.2 6h2.4l-1.2-2.8-1.2 2.8zm8.8-6c-.6 0-1 .4-1 1v8c0 .6.4 1 1 1s1-.4 1-1v-8c0-.6-.4-1-1-1zm6 0c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm8-6c-.6 0-1 .4-1 1v4.5c0 1.4-1.1 2.5-2.5 2.5S32 17.4 32 16v-4c0-.6-.4-1-1-1s-1 .4-1 1v4c0 2.5 2 4.5 4.5 4.5S39 18.5 39 16v-4c0-.6-.4-1-1-1zm8-6c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"
28
+ fill="white"
29
+ />
30
+ {/* Text */}
31
+ <text
32
+ x="60"
33
+ y="22"
34
+ fontFamily="system-ui, sans-serif"
35
+ fontSize="9"
36
+ fontWeight="500"
37
+ fill="white"
38
+ textAnchor="middle"
39
+ >
40
+ Download on the
41
+ </text>
42
+ <text
43
+ x="60"
44
+ y="32"
45
+ fontFamily="system-ui, sans-serif"
46
+ fontSize="12"
47
+ fontWeight="600"
48
+ fill="white"
49
+ textAnchor="middle"
50
+ >
51
+ App Store
52
+ </text>
53
+ </svg>
54
+ </a>
55
+
56
+ <a
57
+ href="https://play.google.com/store/apps/details?id=ai.siti.Siti"
58
+ target="_blank"
59
+ rel="noopener noreferrer"
60
+ className="transition-opacity hover:opacity-80"
61
+ aria-label="Download Siti AI on Google Play"
62
+ >
63
+ <svg
64
+ viewBox="0 0 135 40"
65
+ width="135"
66
+ height="40"
67
+ className="h-10 w-auto"
68
+ xmlns="http://www.w3.org/2000/svg"
69
+ >
70
+ {/* Play Store badge background */}
71
+ <rect width="135" height="40" rx="6" fill="black" />
72
+ {/* Google Play badge icon */}
73
+ <path
74
+ d="M18 10L35 26l-17 16V10z"
75
+ fill="#3DDC84"
76
+ />
77
+ <path
78
+ d="M18 10l8.5 8.5-8.5 8.5V10z"
79
+ fill="#17A948"
80
+ />
81
+ <path
82
+ d="M26.5 18.5L35 26l-8.5-7.5z"
83
+ fill="#3DDC84"
84
+ />
85
+ {/* Text */}
86
+ <text
87
+ x="68"
88
+ y="17"
89
+ fontFamily="system-ui, sans-serif"
90
+ fontSize="8"
91
+ fontWeight="500"
92
+ fill="white"
93
+ textAnchor="start"
94
+ >
95
+ GET IT ON
96
+ </text>
97
+ <text
98
+ x="68"
99
+ y="30"
100
+ fontFamily="system-ui, sans-serif"
101
+ fontSize="13"
102
+ fontWeight="600"
103
+ fill="white"
104
+ textAnchor="start"
105
+ >
106
+ Google Play
107
+ </text>
108
+ </svg>
109
+ </a>
110
+ </div>
111
+ );
112
+}