Skip to content

Commit 8aed2c0

Browse files
michael-mcroskeymichael-mcroskey
committed
✨ Styling update
1 parent 9c4b17a commit 8aed2c0

File tree

2 files changed

+210
-98
lines changed

2 files changed

+210
-98
lines changed

‎docs/accounts-billing/plan-pricing.md

Lines changed: 102 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,12 @@ sidebar_position: 2
77
hide_table_of_contents: true
88
---
99

10+
import Head from '@docusaurus/Head';
11+
12+
<Head>
13+
<link rel="stylesheet" href="/css/table_style.css" />
14+
</Head>
15+
1016
# Plans & Pricing
1117
:::info
1218
For our most up-to-date information, please visit **[FlutterFlow pricing](https://flutterflow.io/pricing)**.
@@ -36,104 +42,102 @@ The prices listed below are base rates. Regional pricing will continue to apply
3642

3743
Below are the details on all the changes, so you’ll know exactly what to expect:
3844

39-
<table border="1" cellpadding="0" cellspacing="0" style={{ tableLayout: 'fixed', width: '100%' }}>
40-
<thead>
41-
<tr>
42-
<th>Current Plan</th>
43-
<th style={{ width: '140px' }}>Team Size</th>
44-
<th style={{ width: '120px' }}>Current Price (USD per month)</th>
45-
<th>New Plan</th>
46-
<th style={{ width: '120px' }}>New Price (USD per month)</th>
47-
<th>What’s Changing?</th>
48-
</tr>
49-
</thead>
50-
<tbody>
51-
<tr>
52-
<td>Free</td>
53-
<td>1</td>
54-
<td>$0</td>
55-
<td>Free</td>
56-
<td>$0</td>
57-
<td>
58-
<ul>
59-
<li>2 count project limit</li>
60-
<li>Swagger/OpenAPI imports not available</li>
61-
<li>No debug panel, payments/ads integrations, or snapshots available</li>
62-
<li>No access to technical support</li>
63-
<li>Can now import libraries</li>
64-
</ul>
65-
</td>
66-
</tr>
67-
<tr>
68-
<td>Standard</td>
69-
<td>1</td>
70-
<td>$30</td>
71-
<td>Individual</td>
72-
<td>$39 ⇧</td>
73-
<td>
74-
<ul>
75-
<li>Unlimited API endpoints</li>
76-
<li>One-click app store deployment available</li>
77-
<li>Snapshotting not available</li>
78-
<li>1 Test and 1 Development Environment per project</li>
79-
<li>Email access only to technical support</li>
80-
</ul>
81-
</td>
82-
</tr>
83-
<tr>
84-
<td>Pro</td>
85-
<td>1</td>
86-
<td>$70</td>
87-
<td>Individual</td>
88-
<td>$39 ⇩</td>
89-
<td>
90-
<ul>
91-
<li>GitHub integration, one-click localization, commenting, and snapshotting not available</li>
92-
</ul>
93-
</td>
94-
</tr>
95-
<tr>
96-
<td>Teams</td>
97-
<td>2 users</td>
98-
<td>$140</td>
99-
<td>Growth</td>
100-
<td>$135 ⇩</td>
101-
<td>
102-
<ul>
103-
<li>Branching and audit logs not available</li>
104-
<li>Snapshotting limited to 1 day</li>
105-
</ul>
106-
</td>
107-
</tr>
108-
<tr>
109-
<td>Teams</td>
110-
<td>3–5 users</td>
111-
<td>$210–$350</td>
112-
<td>Business</td>
113-
<td>$495 ⇧</td>
114-
<td>
115-
<ul>
116-
<li>Branching capped at 5 open branches</li>
117-
<li>Audit logs not available</li>
118-
<li>Snapshotting limited to 5 days</li>
119-
</ul>
120-
</td>
121-
</tr>
122-
<tr>
123-
<td>Teams</td>
124-
<td>6+ users</td>
125-
<td>$420+</td>
126-
<td>Business</td>
127-
<td>$1,000+ ⇧</td>
128-
<td>
129-
<ul>
130-
<li><em>Same as above</em></li>
131-
<li>Enterprise plan required for existing users to scale beyond 5 users or 5 open branches 12-months after cutover</li>
132-
</ul>
133-
</td>
134-
</tr>
135-
</tbody>
136-
</table>
45+
<div class="pricing-table-container">
46+
<div class="mobile-scroll-hint">Scroll to see all plan details →</div>
47+
48+
<table class="simplified-pricing-table">
49+
<thead>
50+
<tr>
51+
<th>Current Plan</th>
52+
<th>New Plan</th>
53+
<th class="whats-changing-col">What's Changing?</th>
54+
</tr>
55+
</thead>
56+
<tbody>
57+
<!-- Solo Section Header -->
58+
<tr class="section-header">
59+
<td colspan="3"><strong>Solo Plans</strong></td>
60+
</tr>
61+
62+
<tr>
63+
<td><strong>Free</strong> ($0)</td>
64+
<td>Free ($0)</td>
65+
<td class="whats-changing-col">
66+
<ul class="feature-list">
67+
<li>2 count project limit</li>
68+
<li>Swagger/OpenAPI imports not available</li>
69+
<li>No debug panel, payments/ads integrations, or snapshot backups</li>
70+
<li>No access to technical support</li>
71+
<li>Can now import libraries</li>
72+
</ul>
73+
</td>
74+
</tr>
75+
76+
<tr>
77+
<td><strong>Standard</strong> ($30)</td>
78+
<td>Individual ($39) <span class="price-up">⇧</span></td>
79+
<td class="whats-changing-col">
80+
<ul class="feature-list">
81+
<li>Unlimited API endpoints</li>
82+
<li>One-click app store deployment available</li>
83+
<li>Snapshot backups not available</li>
84+
<li>1 Test and 1 Development Environment per project</li>
85+
<li>Email access only to technical support</li>
86+
</ul>
87+
</td>
88+
</tr>
89+
90+
<tr>
91+
<td><strong>Pro</strong> ($70)</td>
92+
<td>Individual ($39) <span class="price-down">⇩</span></td>
93+
<td class="whats-changing-col">
94+
<ul class="feature-list">
95+
<li>GitHub sync, one-click localization, commenting, and backup snapshots not available</li>
96+
</ul>
97+
</td>
98+
</tr>
99+
100+
<!-- Teams Section Header -->
101+
<tr class="section-header">
102+
<td colspan="3"><strong>Collaboration Plans</strong></td>
103+
</tr>
104+
105+
<tr>
106+
<td><strong>Teams</strong> ($140)<br />2 users</td>
107+
<td>Growth ($135) <span class="price-down">⇩</span></td>
108+
<td class="whats-changing-col">
109+
<ul class="feature-list">
110+
<li>Branching and audit logs not available</li>
111+
<li>Automated backup snapshots limited to 1 day</li>
112+
</ul>
113+
</td>
114+
</tr>
115+
116+
<tr>
117+
<td><strong>Teams</strong> ($210–$350)<br />3–5 users</td>
118+
<td>Business ($495) <span class="price-up">⇧</span></td>
119+
<td class="whats-changing-col">
120+
<ul class="feature-list">
121+
<li>Branching capped at 5 open branches</li>
122+
<li>Audit logs not available</li>
123+
<li>Automated backup snapshots limited to 5 days</li>
124+
</ul>
125+
</td>
126+
</tr>
127+
128+
<tr>
129+
<td><strong>Teams</strong> ($420+)<br />6+ users</td>
130+
<td>Business ($1,000+) <span class="price-up">⇧</span></td>
131+
<td class="whats-changing-col">
132+
<ul class="feature-list">
133+
<li><em>Same as above</em></li>
134+
<li>Enterprise plan required for existing users to scale beyond 5 users or 5 open branches 12-months after cutover</li>
135+
</ul>
136+
</td>
137+
</tr>
138+
</tbody>
139+
</table>
140+
</div>
137141

138142

139143
## FAQS

‎static/css/table_style.css

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
/*
2+
* Pricing table styles for plan-pricing.md
3+
*/
4+
5+
.pricing-table-container {
6+
max-width: 1200px;
7+
margin: 0 auto;
8+
overflow: hidden;
9+
}
10+
11+
.mobile-scroll-hint {
12+
display: none;
13+
text-align: center;
14+
margin: 15px 0;
15+
color: #666;
16+
font-size: 14px;
17+
}
18+
19+
/* Simplified pricing table styles */
20+
.simplified-pricing-table {
21+
width: 100%;
22+
border-collapse: collapse;
23+
border-spacing: 0;
24+
margin: 1rem 0;
25+
table-layout: fixed;
26+
}
27+
28+
.simplified-pricing-table th,
29+
.simplified-pricing-table td {
30+
padding: 1rem;
31+
text-align: left;
32+
border-bottom: 1px solid #ebeaf0;
33+
border-left: 0;
34+
border-right: 0;
35+
vertical-align: top;
36+
}
37+
38+
.simplified-pricing-table th {
39+
background-color: #f5f5f5;
40+
font-weight: 600;
41+
}
42+
43+
.whats-changing-col {
44+
width: 50%;
45+
}
46+
47+
.section-header {
48+
background-color: #e8e8ff !important;
49+
font-weight: 600;
50+
}
51+
52+
.section-header td {
53+
padding: 0.75rem 1rem;
54+
text-align: left;
55+
}
56+
57+
.simplified-pricing-table tbody tr:not(.section-header) {
58+
background-color: #ffffff;
59+
}
60+
61+
.feature-list {
62+
padding-left: 1.5rem;
63+
margin: 0;
64+
list-style-type: disc;
65+
}
66+
67+
.feature-list li {
68+
margin-bottom: 0.5rem;
69+
}
70+
71+
.feature-list li:last-child {
72+
margin-bottom: 0;
73+
}
74+
75+
.price-up {
76+
color: #e03131;
77+
font-weight: bold;
78+
margin-left: 0.3rem;
79+
white-space: nowrap;
80+
display: inline-block;
81+
}
82+
83+
.price-down {
84+
color: #2b8a3e;
85+
font-weight: bold;
86+
margin-left: 0.3rem;
87+
white-space: nowrap;
88+
display: inline-block;
89+
}
90+
91+
@media (max-width: 768px) {
92+
.pricing-table-container {
93+
margin: 0 -20px;
94+
}
95+
96+
.mobile-scroll-hint {
97+
display: block;
98+
}
99+
100+
.simplified-pricing-table th,
101+
.simplified-pricing-table td {
102+
padding: 0.75rem 0.5rem;
103+
}
104+
105+
.whats-changing-col {
106+
width: 50%;
107+
}
108+
}

0 commit comments

Comments
 (0)