Skip to content

Commit 07b5425

Browse files
mattbornmattborn
committed
The Superworker Revolution
0 parents  commit 07b5425

14 files changed

Lines changed: 466 additions & 0 deletions

File tree

‎.github/workflows/deploy.yml‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
name: Deploy to GitHub Pages
2+
3+
on:
4+
push:
5+
branches: [main]
6+
7+
jobs:
8+
build-and-deploy:
9+
runs-on: ubuntu-latest
10+
permissions:
11+
pages: write
12+
id-token: write
13+
environment:
14+
name: github-pages
15+
url: ${{ steps.deployment.outputs.page_url }}
16+
steps:
17+
- name: Checkout
18+
uses: actions/checkout@v4
19+
20+
- name: Build site
21+
run: node build.js
22+
23+
- name: Setup Pages
24+
uses: actions/configure-pages@v5
25+
26+
- name: Upload artifact
27+
uses: actions/upload-pages-artifact@v3
28+
with:
29+
path: './build'
30+
31+
- name: Deploy to GitHub Pages
32+
id: deployment
33+
uses: actions/deploy-pages@v4

‎.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
build
2+
node_modules
3+
4+
.DS_Store
5+
.env

‎.prettierrc‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"arrowParens": "avoid",
3+
"bracketSpacing": true,
4+
"semi": false,
5+
"singleQuote": true,
6+
"tabWidth": 2,
7+
"trailingComma": "all"
8+
}

‎build.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
#!/usr/bin/env node
2+
3+
const fs = require('fs')
4+
const path = require('path')
5+
6+
const srcDir = 'src'
7+
const buildDir = 'build'
8+
9+
// Create build directory
10+
fs.rmSync(buildDir, { recursive: true, force: true })
11+
fs.mkdirSync(buildDir, { recursive: true })
12+
13+
// Read layout template
14+
const layout = fs.readFileSync(path.join(srcDir, 'layout.html'), 'utf8')
15+
16+
// Process all files
17+
fs.readdirSync(srcDir).forEach(file => {
18+
const srcPath = path.join(srcDir, file)
19+
const destPath = path.join(buildDir, file)
20+
21+
if (file === 'layout.html') return
22+
23+
if (file.endsWith('.html')) {
24+
const content = fs.readFileSync(srcPath, 'utf8')
25+
const html = layout.replace('{content}', content)
26+
fs.writeFileSync(destPath, html)
27+
console.log(`Built ${file}`)
28+
} else {
29+
fs.cpSync(srcPath, destPath, { recursive: true })
30+
console.log(`Copied ${file}`)
31+
}
32+
})
33+
34+
console.log('Build complete!')

‎readme.md‎

Whitespace-only changes.

‎src/global.css‎

Lines changed: 243 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,243 @@
1+
:root {
2+
--color-brand-1: #113;
3+
--color-brand-2: #fcd;
4+
--color-darkest: #fff;
5+
--color-darker: rgba(255, 255, 255, 0.7);
6+
--color-half: rgba(255, 255, 255, 0.5);
7+
--color-light: rgba(255, 255, 255, 0.1);
8+
--color-lighter: rgba(255, 255, 255, 0.05);
9+
--color-lightest: #002;
10+
--color-invisible: rgba(255, 255, 255, 0.001);
11+
--radius: 0.5rem;
12+
--space-gap: 1rem;
13+
--space-clamp: clamp(1.5rem, 5vw, 4rem);
14+
}
15+
16+
* {
17+
box-sizing: border-box;
18+
}
19+
20+
/* Typography */
21+
22+
body {
23+
background: var(--color-lightest);
24+
color: var(--color-darkest);
25+
font: 100%/1.5 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
26+
margin: 0;
27+
letter-spacing: 0.02em;
28+
}
29+
30+
h1,
31+
p {
32+
margin: 0;
33+
text-wrap: balance;
34+
}
35+
36+
h1 {
37+
font-size: clamp(3rem, 10vw, 8rem);
38+
letter-spacing: -0.03em;
39+
line-height: 1.2;
40+
}
41+
42+
h1 + p,
43+
h2 + p,
44+
.lede {
45+
color: var(--color-half);
46+
font-size: 1.25rem;
47+
line-height: 1.5;
48+
max-width: 60rem;
49+
text-wrap: balance;
50+
}
51+
52+
a {
53+
color: inherit;
54+
text-decoration: none;
55+
white-space: nowrap;
56+
}
57+
58+
/* Layout */
59+
header {
60+
align-items: baseline;
61+
display: flex;
62+
gap: 2rem;
63+
justify-content: space-between;
64+
padding: clamp(1rem, 3vw, 2rem);
65+
}
66+
67+
footer {
68+
align-items: center;
69+
display: flex;
70+
gap: 2rem;
71+
padding: clamp(1rem, 3vw, 2rem);
72+
}
73+
74+
nav {
75+
display: flex;
76+
flex-direction: column;
77+
gap: 0.5rem;
78+
}
79+
nav a {
80+
color: var(--color-half);
81+
text-decoration: none;
82+
}
83+
nav a:hover {
84+
color: var(--color-darkest);
85+
}
86+
87+
section {
88+
padding: var(--space-clamp);
89+
}
90+
91+
button {
92+
appearance: none;
93+
background: none;
94+
border: 0;
95+
color: inherit;
96+
cursor: pointer;
97+
}
98+
99+
/* Header */
100+
header nav:last-child {
101+
justify-content: flex-end;
102+
flex-direction: column-reverse;
103+
flex: 1;
104+
}
105+
106+
@media (min-width: 40rem) {
107+
header {
108+
align-items: center;
109+
}
110+
nav {
111+
align-items: center;
112+
flex-direction: unset;
113+
gap: 1.5rem;
114+
}
115+
header nav:last-child {
116+
flex-direction: unset;
117+
}
118+
}
119+
120+
/* Footer */
121+
footer {
122+
color: var(--color-half);
123+
}
124+
125+
/* Brand */
126+
127+
.mask-brand {
128+
align-items: center;
129+
display: flex;
130+
gap: 0.5rem;
131+
}
132+
.mask-logo {
133+
align-items: center;
134+
background: var(--color-darkest);
135+
border-radius: 1rem;
136+
color: #113;
137+
display: flex;
138+
font-size: 1.25rem;
139+
height: 1.5rem;
140+
justify-content: center;
141+
line-height: 1;
142+
width: 2.5rem;
143+
}
144+
.mask-diamond:last-child {
145+
color: #fcd;
146+
margin: 0 0 0 -0.5em;
147+
}
148+
.mask-word {
149+
color: var(--color-darkest);
150+
font-size: 1.5rem;
151+
font-weight: 600;
152+
text-transform: uppercase;
153+
}
154+
155+
/* Components */
156+
157+
.button {
158+
background: var(--color-darkest);
159+
border-radius: var(--radius);
160+
border: 0;
161+
color: var(--color-lightest);
162+
cursor: pointer;
163+
font-weight: 600;
164+
padding: 1rem 1.5rem;
165+
text-align: center;
166+
text-decoration: none;
167+
transition: background 0.3s;
168+
white-space: no-wrap;
169+
}
170+
171+
.button:hover {
172+
background: var(--color-brand-2);
173+
color: var(--color-lightest);
174+
}
175+
176+
/* == Home == */
177+
178+
/* Hero */
179+
#hero {
180+
display: flex;
181+
padding: var(--space-clamp);
182+
}
183+
#hero .inset {
184+
align-items: center;
185+
background-position: center;
186+
background-size: cover;
187+
border-radius: 2rem;
188+
display: flex;
189+
flex-direction: column;
190+
flex: 1;
191+
gap: 1.5rem;
192+
justify-content: center;
193+
margin: 0 auto;
194+
overflow: hidden;
195+
padding: var(--space-clamp);
196+
position: relative;
197+
text-align: center;
198+
}
199+
#hero .inset > *:not(.overlay) {
200+
position: relative;
201+
}
202+
203+
.overlay {
204+
background: #113b; /* linear-gradient(to bottom, #113, #fcd); */
205+
/* mix-blend-mode: screen; */
206+
position: absolute;
207+
inset: 0;
208+
pointer-events: none;
209+
}
210+
.badge {
211+
background: var(--color-light);
212+
border-radius: 2rem;
213+
font-size: 14px;
214+
line-height: 1.25rem;
215+
padding: 0.5rem 1rem;
216+
}
217+
218+
/* Applit */
219+
220+
.browser {
221+
border-radius: 12px;
222+
display: flex;
223+
flex-direction: column;
224+
overflow: hidden;
225+
margin: var(--space-clamp) 0 0;
226+
width: 100%;
227+
}
228+
229+
.bar-address {
230+
align-items: center;
231+
backdrop-filter: blur(8px);
232+
background: var(--color-light);
233+
display: flex;
234+
gap: 12px;
235+
padding: 12px;
236+
}
237+
238+
.viewport {
239+
aspect-ratio: 16 / 9;
240+
background: var(--color-lightest);
241+
}
242+
243+
/* == Investors == */

‎src/global.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// ScrollReveal animations
2+
const scrollConfig = {
3+
cleanup: true,
4+
distance: '20%',
5+
interval: 100,
6+
origin: 'bottom',
7+
}
8+
ScrollReveal().reveal('.mask-brand, nav a, .badge, .browser', scrollConfig)
9+
ScrollReveal().reveal('h1, h2, p, section', {
10+
...scrollConfig,
11+
viewOffset: { top: -500 },
12+
})

‎src/index.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!-- Hero -->
2+
<section id="hero">
3+
<!-- prettier-ignore -->
4+
<div class="inset" style="background-image: url(https://res.cloudinary.com/moona/image/upload/q_auto/v1757618708/Mask/bg-impression-hidden-eye-mask-dark-flat-material_fr0kaz.png);">
5+
<div class="overlay"></div>
6+
<div class="badge">Mask for Enterprise</div>
7+
<h1>
8+
The Superworker<br />
9+
Revolution
10+
</h1>
11+
<p>We’ve made AI tools safe and easy to use for any kind of work.</p>
12+
<a class="button" href="https://outlook.office.com/book/investorinterestcall@llmmask.com" target="_blank">Book a demo</a>
13+
<div class="browser">
14+
<div class="bar-address"></div>
15+
<div class="viewport"></div>
16+
</div>
17+
</div>
18+
</section>

‎src/investors.html‎

Whitespace-only changes.

0 commit comments

Comments
 (0)