Skip to content

Commit b9f64af

Browse files
alexnmalexnm
authored
fix(website): alignments, colors, content (#7046)
* fix: content and links * fix: alignments
1 parent e1c161b commit b9f64af

File tree

4 files changed

+61
-55
lines changed

4 files changed

+61
-55
lines changed

‎packages/homepage/src/pages/pricing/_elements.js

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -64,9 +64,6 @@ export const BoxPlan = styled.a`
6464
text-align: center;
6565
color: #808080;
6666
67-
display: flex;
68-
flex-direction: column;
69-
justify-content: space-between;
7067
transition: transform 0.3s ease-in-out;
7168
7269
@media (min-width: 769px) {
@@ -97,7 +94,7 @@ export const BoxPlan = styled.a`
9794
margin-bottom: 0;
9895
9996
@media (min-width: 769px) {
100-
max-width: 220px;
97+
max-width: 225px;
10198
font-size: 16px;
10299
line-height: 24px;
103100
}
@@ -199,6 +196,7 @@ export const BoxPlanPrice = styled(({ plan, price, caption, className }) => {
199196
font-weight: 500;
200197
line-height: 1;
201198
font-size: 48px;
199+
height: 64px;
202200
margin-bottom: 8px;
203201
204202
@media (min-width: 769px) {
@@ -209,6 +207,7 @@ export const BoxPlanPrice = styled(({ plan, price, caption, className }) => {
209207
210208
.caption {
211209
font-size: 12px;
210+
height: 32px;
212211
line-height: 16px;
213212
max-width: 200px;
214213
@@ -222,17 +221,9 @@ export const BoxPlanPrice = styled(({ plan, price, caption, className }) => {
222221
return (
223222
customPrice &&
224223
css`
225-
margin-top: -24px; // Visually align with the other cards.
226-
227-
.plan {
228-
margin-bottom: 0;
229-
230-
@media (min-width: 769px) {
231-
margin-bottom: 0;
232-
}
233-
}
234-
235224
.price {
225+
max-width: 220px;
226+
236227
@media (min-width: 769px) {
237228
font-size: 48px;
238229
line-height: 68px;
@@ -243,6 +234,14 @@ export const BoxPlanPrice = styled(({ plan, price, caption, className }) => {
243234
}}
244235
`;
245236

237+
export const BoxPlanList = styled.ul`
238+
height: 210px;
239+
240+
@media (min-width: 769px) {
241+
height: 258px;
242+
}
243+
`;
244+
246245
export const ComparePlansLink = styled(({ scrollTo, ...props }) => {
247246
return (
248247
<a href="#plans" onClick={scrollTo} {...props}>

‎packages/homepage/src/pages/pricing/_intro.js

Lines changed: 45 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import usePrefersReducedMotion from '../../utils/isReducedMOtion';
66
import {
77
BoxPlan,
88
BoxPlanButton,
9+
BoxPlanList,
910
BoxPlanPrice,
1011
Caption,
1112
ComparePlansLink,
@@ -15,7 +16,30 @@ import { formatCurrency } from './_utils';
1516
/**
1617
* Main component
1718
*/
18-
export const Intro = ({ plans }) => {
19+
export const Intro = ({
20+
plans = {
21+
team_pro: {
22+
month: {
23+
currency: '$',
24+
unit_amount: 5,
25+
},
26+
year: {
27+
currency: '$',
28+
unit_amount: 5,
29+
},
30+
},
31+
pro: {
32+
month: {
33+
currency: '$',
34+
unit_amount: 5,
35+
},
36+
year: {
37+
currency: '$',
38+
unit_amount: 5,
39+
},
40+
},
41+
},
42+
}) => {
1943
// plans: {
2044
// pro | team_pro {
2145
// month | year {
@@ -24,6 +48,7 @@ export const Intro = ({ plans }) => {
2448
// }
2549
// }
2650
// }
51+
2752
const shouldReduceMotion = usePrefersReducedMotion();
2853

2954
const [teamHover, setTeamHover] = useState(false);
@@ -145,18 +170,16 @@ const Title = styled.h1`
145170
146171
letter-spacing: -0.025em;
147172
font-size: 40px;
148-
line-height: 48px;
173+
line-height: 1.1;
149174
150175
@media (min-width: 769px) {
151176
font-size: 48px;
152-
line-height: 56px;
153177
}
154178
155179
@media (min-width: 1025px) {
156180
letter-spacing: -0.03em;
157181
font-weight: 500;
158182
font-size: 64px;
159-
line-height: 1.45;
160183
}
161184
`;
162185

@@ -192,7 +215,7 @@ const Gradient = styled.div`
192215
css`
193216
background: radial-gradient(
194217
61.76% 61.76% at 50% 38.24%,
195-
#ac9cff 0%,
218+
#edffa5 0%,
196219
#000000 60.35%
197220
);
198221
`
@@ -204,23 +227,9 @@ const Gradient = styled.div`
204227
personalSection &&
205228
css`
206229
background: radial-gradient(
207-
50% 50% at 50% 50%,
208-
hsl(72deg 100% 82%) 0%,
209-
hsl(72deg 69% 76%) 3%,
210-
hsl(72deg 50% 71%) 6%,
211-
hsl(72deg 38% 65%) 9%,
212-
hsl(72deg 30% 59%) 12%,
213-
hsl(72deg 23% 54%) 15%,
214-
hsl(72deg 20% 48%) 19%,
215-
hsl(72deg 19% 43%) 22%,
216-
hsl(71deg 19% 38%) 26%,
217-
hsl(71deg 18% 32%) 30%,
218-
hsl(71deg 17% 27%) 34%,
219-
hsl(71deg 16% 23%) 39%,
220-
hsl(71deg 15% 18%) 44%,
221-
hsl(70deg 13% 13%) 51%,
222-
hsl(69deg 9% 9%) 59%,
223-
hsl(0deg 0% 4%) 77%
230+
61.76% 61.76% at 50% 38.24%,
231+
#ac9cff 0%,
232+
#000000 60.35%
224233
);
225234
`
226235
);
@@ -305,7 +314,7 @@ const TeamFree = () => {
305314

306315
<BoxPlanPrice plan="Free" price="$0" caption="forever" />
307316

308-
<ul>
317+
<BoxPlanList>
309318
<li>5 editors</li>
310319
<li>20 public sandboxes</li>
311320
<li>3 public repositories</li>
@@ -319,7 +328,7 @@ const TeamFree = () => {
319328
<li>4GB RAM</li>
320329
<li>2vCPUs</li>
321330
<li>4GB Disk</li>
322-
</ul>
331+
</BoxPlanList>
323332

324333
<BoxPlanButton href="/s">Start coding now</BoxPlanButton>
325334
</BoxPlan>
@@ -345,7 +354,7 @@ const TeamPro = ({ plan, ...props }) => {
345354
per month.`}
346355
/>
347356

348-
<ul>
357+
<BoxPlanList>
349358
<li>20 editors</li>
350359
<li>Unlimited sandboxes</li>
351360
<li>Unlimited repositories</li>
@@ -359,7 +368,7 @@ const TeamPro = ({ plan, ...props }) => {
359368
<li>6GB RAM</li>
360369
<li>4vCPUs</li>
361370
<li>12GB Disk</li>
362-
</ul>
371+
</BoxPlanList>
363372

364373
<BoxPlanButton>Upgrade to Team Pro</BoxPlanButton>
365374
</BoxPlan>
@@ -369,7 +378,7 @@ const TeamPro = ({ plan, ...props }) => {
369378
const OrgCustom = props => {
370379
return (
371380
<BoxPlan
372-
href="mailto:support@codesandbox.io?subject=Organization plan"
381+
href="https://codesandbox.typeform.com/organization"
373382
target="_blank"
374383
rel="noopener noreferrer"
375384
orgCustom
@@ -384,19 +393,15 @@ const OrgCustom = props => {
384393
customPrice
385394
/>
386395

387-
<ul>
396+
<BoxPlanList>
388397
<li>All Team Pro features, plus:</li>
389-
<li>Unlimited editors</li>
398+
<li>20+ editors (no limit)</li>
390399
<li>Bulk pricing for seats</li>
391400
<li>Custom VM Specs</li>
392401
<li>Custom support</li>
393402
<li>Shared Slack channel</li>
394403
<li>Customer success manager </li>
395-
396-
{/* Visually aligned */}
397-
<br />
398-
<br />
399-
</ul>
404+
</BoxPlanList>
400405

401406
<BoxPlanButton>Contact us</BoxPlanButton>
402407
</BoxPlan>
@@ -410,7 +415,7 @@ const PersonalFree = () => {
410415

411416
<BoxPlanPrice plan="Free" price="$0" caption="forever" />
412417

413-
<ul>
418+
<BoxPlanList>
414419
<li>Free for individuals</li>
415420
<li>All platform features</li>
416421
<li>Unlimited public sandboxes</li>
@@ -424,7 +429,7 @@ const PersonalFree = () => {
424429
<li>4GB RAM</li>
425430
<li>2vCPUs</li>
426431
<li>4GB Disk</li>
427-
</ul>
432+
</BoxPlanList>
428433

429434
<BoxPlanButton href="/s">Start coding now</BoxPlanButton>
430435
</BoxPlan>
@@ -446,7 +451,7 @@ const PersonalPro = ({ plan, ...props }) => {
446451
per month.`}
447452
/>
448453

449-
<ul>
454+
<BoxPlanList>
450455
<li>All Free features, plus:</li>
451456
<li>Unlimited private sandboxes</li>
452457
<li>Unlimited private repositories</li>
@@ -455,11 +460,13 @@ const PersonalPro = ({ plan, ...props }) => {
455460
{/* Visually aligned */}
456461
<br />
457462
<br />
463+
<br />
464+
<br />
458465

459466
<li>6GB RAM</li>
460467
<li>4vCPUs</li>
461468
<li>12GB Disk</li>
462-
</ul>
469+
</BoxPlanList>
463470

464471
<BoxPlanButton>Upgrade to Personal Pro</BoxPlanButton>
465472
</BoxPlan>

‎packages/homepage/src/pages/pricing/_plans.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const team_plans = [
1414
caption: 'Maximum number of editors in a team.',
1515
team_free: '5',
1616
team_pro: '20',
17-
org_custom: 'Unlimited',
17+
org_custom: '20+ (no limit)',
1818
},
1919
{
2020
title: 'Sandboxes',
@@ -296,7 +296,7 @@ export const Plans = () => {
296296
<th className="column__desktop plan__org-custom">
297297
<p>Organization</p>
298298
<a
299-
href="mailto:support@codesandbox.io?subject=Organization plan"
299+
href="https://codesandbox.typeform.com/organization"
300300
target="_blank"
301301
rel="noopener noreferrer"
302302
>

‎packages/homepage/src/pages/pricing/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ const Pricing = () => {
130130
</FAQLabel>
131131
<FAQLink
132132
as="a"
133-
href="mailto:[email protected]?subject=Education and Open Source plan&body=Hi,%0D%0A%0D%0AI'm using CodeSandbox for [describe usage] but I'm running into some limits. [Describe limits]. My username is [username]. Can you update my plan?%0D%0A%0D%0AThanks!"
133+
href="mailto:[email protected]?subject=Open source and education plans"
134134
target="_blank"
135135
>
136136
Request access

0 commit comments

Comments
 (0)