Skip to content

Commit 6086496

Browse files
melvincarvalhomelvincarvalho
committed
Initial commit: Solid Chat landing page
0 parents  commit 6086496

File tree

4 files changed

+369
-0
lines changed

4 files changed

+369
-0
lines changed

‎CNAME‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
solid-chat.com

‎LICENSE‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
GNU AFFERO GENERAL PUBLIC LICENSE
2+
Version 3, 19 November 2007
3+
4+
Copyright (C) 2024 Solid Chat Contributors
5+
6+
This program is free software: you can redistribute it and/or modify
7+
it under the terms of the GNU Affero General Public License as published
8+
by the Free Software Foundation, either version 3 of the License, or
9+
(at your option) any later version.
10+
11+
This program is distributed in the hope that it will be useful,
12+
but WITHOUT ANY WARRANTY; without even the implied warranty of
13+
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
14+
GNU Affero General Public License for more details.
15+
16+
You should have received a copy of the GNU Affero General Public License
17+
along with this program. If not, see <https://www.gnu.org/licenses/>.

‎README.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# solid-chat.com
2+
3+
Landing page for [Solid Chat](https://solid-chat.com) - decentralized messaging for the web.
4+
5+
## Structure
6+
7+
```
8+
solid-chat.com/ → This repo (landing page)
9+
solid-chat.com/app → solid-chat/app repo (chat application)
10+
```
11+
12+
## Development
13+
14+
```bash
15+
# Clone
16+
git clone https://github.com/solid-chat/solid-chat.github.io.git
17+
cd solid-chat.github.io
18+
19+
# Serve locally
20+
npx serve .
21+
```
22+
23+
## Deployment
24+
25+
This repo is deployed via GitHub Pages with a custom domain (solid-chat.com).
26+
27+
The `CNAME` file points to `solid-chat.com`.
28+
29+
## License
30+
31+
AGPL-3.0 - See [LICENSE](LICENSE)

‎index.html‎

Lines changed: 320 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,320 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Solid Chat - Decentralized Messaging for the Web</title>
7+
<meta name="description" content="Modern, private chat built on the Solid protocol. Your messages, your pod, your control.">
8+
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>💬</text></svg>">
9+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
10+
<style>
11+
:root {
12+
--gradient-start: #667eea;
13+
--gradient-end: #9f7aea;
14+
--text: #2d3748;
15+
--text-muted: #718096;
16+
--bg: #f7f8fc;
17+
}
18+
19+
* { box-sizing: border-box; margin: 0; padding: 0; }
20+
21+
body {
22+
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
23+
background: var(--bg);
24+
color: var(--text);
25+
min-height: 100vh;
26+
}
27+
28+
/* Hero Section */
29+
.hero {
30+
background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
31+
color: white;
32+
padding: 60px 24px 80px;
33+
text-align: center;
34+
position: relative;
35+
overflow: hidden;
36+
}
37+
38+
.hero::before {
39+
content: '';
40+
position: absolute;
41+
top: 0;
42+
left: 0;
43+
right: 0;
44+
bottom: 0;
45+
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
46+
opacity: 0.5;
47+
}
48+
49+
.hero-content {
50+
position: relative;
51+
z-index: 1;
52+
max-width: 800px;
53+
margin: 0 auto;
54+
}
55+
56+
.logo {
57+
font-size: 48px;
58+
margin-bottom: 16px;
59+
}
60+
61+
.hero h1 {
62+
font-size: 3rem;
63+
font-weight: 800;
64+
margin-bottom: 16px;
65+
letter-spacing: -0.02em;
66+
}
67+
68+
.hero .tagline {
69+
font-size: 1.25rem;
70+
opacity: 0.9;
71+
margin-bottom: 32px;
72+
line-height: 1.6;
73+
}
74+
75+
.cta-buttons {
76+
display: flex;
77+
gap: 16px;
78+
justify-content: center;
79+
flex-wrap: wrap;
80+
}
81+
82+
.btn {
83+
display: inline-flex;
84+
align-items: center;
85+
gap: 8px;
86+
padding: 16px 32px;
87+
border-radius: 12px;
88+
font-size: 16px;
89+
font-weight: 600;
90+
text-decoration: none;
91+
transition: transform 0.2s, box-shadow 0.2s;
92+
}
93+
94+
.btn-primary {
95+
background: white;
96+
color: var(--gradient-start);
97+
box-shadow: 0 4px 14px rgba(0,0,0,0.15);
98+
}
99+
100+
.btn-primary:hover {
101+
transform: translateY(-2px);
102+
box-shadow: 0 6px 20px rgba(0,0,0,0.2);
103+
}
104+
105+
.btn-secondary {
106+
background: rgba(255,255,255,0.15);
107+
color: white;
108+
border: 2px solid rgba(255,255,255,0.3);
109+
}
110+
111+
.btn-secondary:hover {
112+
background: rgba(255,255,255,0.25);
113+
transform: translateY(-2px);
114+
}
115+
116+
/* Features Section */
117+
.features {
118+
padding: 80px 24px;
119+
max-width: 1100px;
120+
margin: 0 auto;
121+
}
122+
123+
.features h2 {
124+
text-align: center;
125+
font-size: 2rem;
126+
font-weight: 700;
127+
margin-bottom: 48px;
128+
color: var(--text);
129+
}
130+
131+
.features-grid {
132+
display: grid;
133+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
134+
gap: 32px;
135+
}
136+
137+
.feature-card {
138+
background: white;
139+
border-radius: 16px;
140+
padding: 32px;
141+
box-shadow: 0 4px 20px rgba(102, 126, 234, 0.1);
142+
transition: transform 0.2s, box-shadow 0.2s;
143+
}
144+
145+
.feature-card:hover {
146+
transform: translateY(-4px);
147+
box-shadow: 0 8px 30px rgba(102, 126, 234, 0.15);
148+
}
149+
150+
.feature-icon {
151+
font-size: 40px;
152+
margin-bottom: 16px;
153+
}
154+
155+
.feature-card h3 {
156+
font-size: 1.25rem;
157+
font-weight: 600;
158+
margin-bottom: 12px;
159+
color: var(--text);
160+
}
161+
162+
.feature-card p {
163+
color: var(--text-muted);
164+
line-height: 1.6;
165+
}
166+
167+
/* Spec Section */
168+
.spec-section {
169+
background: white;
170+
padding: 60px 24px;
171+
text-align: center;
172+
}
173+
174+
.spec-section h2 {
175+
font-size: 1.75rem;
176+
font-weight: 700;
177+
margin-bottom: 16px;
178+
}
179+
180+
.spec-section p {
181+
color: var(--text-muted);
182+
max-width: 600px;
183+
margin: 0 auto 24px;
184+
line-height: 1.6;
185+
}
186+
187+
.spec-link {
188+
display: inline-flex;
189+
align-items: center;
190+
gap: 8px;
191+
color: var(--gradient-start);
192+
font-weight: 600;
193+
text-decoration: none;
194+
}
195+
196+
.spec-link:hover {
197+
text-decoration: underline;
198+
}
199+
200+
/* Footer */
201+
footer {
202+
padding: 40px 24px;
203+
text-align: center;
204+
color: var(--text-muted);
205+
}
206+
207+
footer a {
208+
color: var(--gradient-start);
209+
text-decoration: none;
210+
}
211+
212+
footer a:hover {
213+
text-decoration: underline;
214+
}
215+
216+
.footer-links {
217+
display: flex;
218+
justify-content: center;
219+
gap: 24px;
220+
margin-bottom: 16px;
221+
}
222+
223+
/* Responsive */
224+
@media (max-width: 640px) {
225+
.hero h1 {
226+
font-size: 2rem;
227+
}
228+
229+
.hero .tagline {
230+
font-size: 1rem;
231+
}
232+
233+
.btn {
234+
padding: 14px 24px;
235+
font-size: 15px;
236+
}
237+
}
238+
</style>
239+
</head>
240+
<body>
241+
242+
<section class="hero">
243+
<div class="hero-content">
244+
<div class="logo">💬</div>
245+
<h1>Solid Chat</h1>
246+
<p class="tagline">
247+
Modern, private messaging built on the Solid protocol.<br>
248+
Your messages, your pod, your control.
249+
</p>
250+
<div class="cta-buttons">
251+
<a href="/app" class="btn btn-primary">
252+
<span>Launch App</span>
253+
<span>→</span>
254+
</a>
255+
<a href="https://github.com/solid-chat" class="btn btn-secondary">
256+
<span>GitHub</span>
257+
</a>
258+
</div>
259+
</div>
260+
</section>
261+
262+
<section class="features">
263+
<h2>Why Solid Chat?</h2>
264+
<div class="features-grid">
265+
<div class="feature-card">
266+
<div class="feature-icon">🔐</div>
267+
<h3>Own Your Data</h3>
268+
<p>Messages are stored in your Solid pod, not on corporate servers. You decide who sees what.</p>
269+
</div>
270+
<div class="feature-card">
271+
<div class="feature-icon">🌐</div>
272+
<h3>Decentralized</h3>
273+
<p>No central server required. Chat with anyone across any Solid pod provider.</p>
274+
</div>
275+
<div class="feature-card">
276+
<div class="feature-icon">⚡</div>
277+
<h3>Modern UI</h3>
278+
<p>Clean, fast interface inspired by the best messaging apps. No compromise on experience.</p>
279+
</div>
280+
<div class="feature-card">
281+
<div class="feature-icon">🔗</div>
282+
<h3>Interoperable</h3>
283+
<p>Built on the official Solid Chat specification. Works with other Solid apps.</p>
284+
</div>
285+
<div class="feature-card">
286+
<div class="feature-icon">🆓</div>
287+
<h3>Free & Open</h3>
288+
<p>Open source, free to use. Bring your own pod or use any provider.</p>
289+
</div>
290+
<div class="feature-card">
291+
<div class="feature-icon">🚀</div>
292+
<h3>No Lock-in</h3>
293+
<p>Switch apps anytime. Your data stays with you, in standard formats.</p>
294+
</div>
295+
</div>
296+
</section>
297+
298+
<section class="spec-section">
299+
<h2>Built on Open Standards</h2>
300+
<p>
301+
Solid Chat implements the official Solid Chat specification, ensuring
302+
interoperability with other Solid applications and long-term data portability.
303+
</p>
304+
<a href="https://solid.github.io/chat/" class="spec-link" target="_blank" rel="noopener">
305+
Read the Specification →
306+
</a>
307+
</section>
308+
309+
<footer>
310+
<div class="footer-links">
311+
<a href="/app">App</a>
312+
<a href="https://github.com/solid-chat">GitHub</a>
313+
<a href="https://solid.github.io/chat/">Spec</a>
314+
<a href="https://solidproject.org">Solid Project</a>
315+
</div>
316+
<p>Made with ♥ for the decentralized web</p>
317+
</footer>
318+
319+
</body>
320+
</html>

0 commit comments

Comments
 (0)