Skip to content

Commit 10cf072

Browse files
mu29mu29
committed
docs: provide faq for composify cloud
1 parent 278c732 commit 10cf072

File tree

12 files changed

+120
-88
lines changed

12 files changed

+120
-88
lines changed

‎packages/docs/src/page-cloud/CloudFeatureGroup/CloudFeatureGroup.tsx‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,15 @@ import type { FC } from 'react';
33
import { CloudFeatureItem } from '../CloudFeatureItem';
44

55
export const CloudFeatureGroup: FC<unknown> = () => (
6-
<VStack
7-
id="features"
8-
className={['px-24', 'pt-64', 'pb-24', 'gap-0', 'bg-background', 'max-md:px-16', 'max-md:pt-48']}
9-
>
10-
<Heading level={2} size="4xl" className={['tracking-tight']}>
11-
Supercharge your editor.
12-
</Heading>
13-
<Body size="xl" className={['text-foreground', 'mt-8', 'mb-48']}>
14-
Start building in seconds. Get features that make your team faster.
15-
</Body>
6+
<VStack id="features" className={['p-24', 'pt-64', 'gap-48', 'bg-background', 'max-md:p-16', 'max-md:pt-48']}>
7+
<VStack className={['gap-8']}>
8+
<Heading level={2} size="4xl">
9+
Supercharge your editor.
10+
</Heading>
11+
<Body size="xl" className={['text-foreground']}>
12+
Start building in seconds. Get features that make your team faster.
13+
</Body>
14+
</VStack>
1615
<Grid columns={2} className={['gap-24', 'max-md:grid-cols-1']}>
1716
<CloudFeatureItem
1817
emoji="🌐"

‎packages/docs/src/page-cloud/FAQSection/FAQSection.tsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { Accordion, Body, Heading, VStack } from '@app/ui-system';
2+
import type { FC } from 'react';
3+
4+
export const FAQSection: FC<unknown> = () => (
5+
<VStack id="faq" className={['p-24', 'pt-88', 'gap-48', 'bg-background', 'max-md:p-16', 'max-md:pt-64']}>
6+
<VStack className={['gap-8']}>
7+
<Heading level={2} size="4xl">
8+
FAQ
9+
</Heading>
10+
<Body size="xl" className={['text-foreground']}>
11+
Commonly asked questions about Composify Cloud.
12+
</Body>
13+
</VStack>
14+
<VStack className={['border', 'px-24', 'py-4', 'rounded-sm']}>
15+
<Accordion summary="How is Composify Cloud different from the open-source version?">
16+
The core editor and renderer are identical. Cloud adds managed hosting, real-time collaboration, and version
17+
history, so you don't have to build that infrastructure yourself.
18+
</Accordion>
19+
<Accordion summary="Can I start for free?">
20+
Yes. The free tier includes 1 page and 1 member with unlimited bandwidth. No credit card required.
21+
</Accordion>
22+
<Accordion summary="What happens if I exceed my plan limits?">
23+
You can add more pages ($1 per page) or members ($5 per member) anytime.
24+
</Accordion>
25+
<Accordion summary="Do I need to rewrite my existing components?">
26+
No. Composify works with your components as they are. You register them in a separate catalog file, and they
27+
become instantly editable. Your original code stays untouched.
28+
</Accordion>
29+
<Accordion summary="Where is my data stored?">
30+
Pages are stored in our managed cloud infrastructure. We handle storage, backups, and delivery. Your content is
31+
served via CDN with unlimited bandwidth, so traffic spikes won't slow you down.
32+
</Accordion>
33+
<Accordion summary="Can I export my data?">
34+
Everything is stored as standard JSX strings. You can fetch your content anytime via our API and migrate to
35+
self-hosted if you ever want to leave.
36+
</Accordion>
37+
<Accordion summary="What frameworks are supported?">
38+
Anything that runs React. Next.js, Remix, React Router, Expo — if it renders React components, Composify works.
39+
Vue support is on the roadmap.
40+
</Accordion>
41+
<Accordion summary="Can non-developers use it?">
42+
That's the point. Engineers build and register components. Everyone else (marketers, designers, content editors)
43+
uses the visual editor to build pages without touching code.
44+
</Accordion>
45+
<Accordion summary="How does this compare to Builder.io or Puck?">
46+
Most visual editors store data as JSON and require you to adapt your components. Composify stores JSX directly
47+
and works with your existing code without rewrites.
48+
</Accordion>
49+
<Accordion summary="What's coming next?">
50+
Real-time collaboration and version history with time-travel are on the roadmap. Both will be included in Pro
51+
and Business plans at no extra cost.
52+
</Accordion>
53+
</VStack>
54+
</VStack>
55+
);

‎packages/docs/src/page-cloud/FAQSection/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { FAQSection } from './FAQSection';

‎packages/docs/src/page-cloud/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { VStack } from '@app/ui-system';
22
import { CloudFeatureGroup } from './CloudFeatureGroup';
33
import { CloudHeroBanner } from './CloudHeroBanner';
4+
import { FAQSection } from './FAQSection';
45
import { PlanGroup } from './PlanGroup';
56
import { PriceCalculator } from './PriceCalculator';
67

@@ -10,5 +11,6 @@ export const CloudPage = () => (
1011
<PriceCalculator />
1112
<PlanGroup />
1213
<CloudFeatureGroup />
14+
<FAQSection />
1315
</VStack>
1416
);

‎packages/docs/src/page-demo/index.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const INITIAL_SOURCE = `
3030
Perfect for Server Driven UI, no-code website builders, and design tools.
3131
</Body>
3232
<Grid columns={1} className={['gap-24', 'md:grid-cols-2']}>
33-
<VStack className={['rounded-sm', 'border']}>
33+
<VStack className={['rounded-sm', 'border']}>
3434
<VStack className={['flex-1', 'p-32', 'gap-6']}>
3535
<Heading level={3} size="2xl" weight="semibold">
3636
Drop-in Integration
@@ -43,7 +43,7 @@ const INITIAL_SOURCE = `
4343
<CodeSnippet language="tsx" content="dropInIntegration" />
4444
</FeaturePreview>
4545
</VStack>
46-
<VStack className={['rounded-sm', 'border']}>
46+
<VStack className={['rounded-sm', 'border']}>
4747
<VStack className={['flex-1', 'p-32', 'gap-6']}>
4848
<Heading level={3} size="2xl" weight="semibold">
4949
JSX Everywhere
@@ -56,7 +56,7 @@ const INITIAL_SOURCE = `
5656
<CodeSnippet language="tsx" content="jsxEverywhere" />
5757
</FeaturePreview>
5858
</VStack>
59-
<VStack className={['rounded-sm', 'border']}>
59+
<VStack className={['rounded-sm', 'border']}>
6060
<VStack className={['flex-1', 'p-32', 'gap-6']}>
6161
<Heading level={3} size="2xl" weight="semibold">
6262
Visual + Code Editing
@@ -69,7 +69,7 @@ const INITIAL_SOURCE = `
6969
<EditorControl />
7070
</FeaturePreview>
7171
</VStack>
72-
<VStack className={['rounded-sm', 'border']}>
72+
<VStack className={['rounded-sm', 'border']}>
7373
<VStack className={['flex-1', 'p-32', 'gap-6']}>
7474
<Heading level={3} size="2xl" weight="semibold">
7575
Multi-viewport Preview
@@ -82,7 +82,7 @@ const INITIAL_SOURCE = `
8282
<ViewportControl />
8383
</FeaturePreview>
8484
</VStack>
85-
<VStack className={['rounded-sm', 'border']}>
85+
<VStack className={['rounded-sm', 'border']}>
8686
<VStack className={['flex-1', 'p-32', 'gap-6']}>
8787
<Heading level={3} size="2xl" weight="semibold">
8888
Full TypeScript Support
@@ -103,7 +103,7 @@ const INITIAL_SOURCE = `
103103
/>
104104
</FeaturePreview>
105105
</VStack>
106-
<VStack className={['rounded-sm', 'border']}>
106+
<VStack className={['rounded-sm', 'border']}>
107107
<VStack className={['flex-1', 'p-32', 'gap-6']}>
108108
<Heading level={3} size="2xl" weight="semibold">
109109
Framework Agnostic

‎packages/docs/src/page-home/index.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const INITIAL_SOURCE = `
3030
Perfect for Server Driven UI, no-code website builders, and design tools.
3131
</Body>
3232
<Grid columns={1} className={['gap-24', 'md:grid-cols-2']}>
33-
<VStack className={['rounded-sm', 'border']}>
33+
<VStack className={['rounded-sm', 'border']}>
3434
<VStack className={['flex-1', 'p-32', 'gap-6']}>
3535
<Heading level={3} size="2xl" weight="semibold">
3636
Drop-in Integration
@@ -43,7 +43,7 @@ const INITIAL_SOURCE = `
4343
<CodeSnippet language="tsx" content="dropInIntegration" />
4444
</FeaturePreview>
4545
</VStack>
46-
<VStack className={['rounded-sm', 'border']}>
46+
<VStack className={['rounded-sm', 'border']}>
4747
<VStack className={['flex-1', 'p-32', 'gap-6']}>
4848
<Heading level={3} size="2xl" weight="semibold">
4949
JSX Everywhere
@@ -56,7 +56,7 @@ const INITIAL_SOURCE = `
5656
<CodeSnippet language="tsx" content="jsxEverywhere" />
5757
</FeaturePreview>
5858
</VStack>
59-
<VStack className={['rounded-sm', 'border']}>
59+
<VStack className={['rounded-sm', 'border']}>
6060
<VStack className={['flex-1', 'p-32', 'gap-6']}>
6161
<Heading level={3} size="2xl" weight="semibold">
6262
Visual + Code Editing
@@ -69,7 +69,7 @@ const INITIAL_SOURCE = `
6969
<EditorControl />
7070
</FeaturePreview>
7171
</VStack>
72-
<VStack className={['rounded-sm', 'border']}>
72+
<VStack className={['rounded-sm', 'border']}>
7373
<VStack className={['flex-1', 'p-32', 'gap-6']}>
7474
<Heading level={3} size="2xl" weight="semibold">
7575
Multi-viewport Preview
@@ -82,7 +82,7 @@ const INITIAL_SOURCE = `
8282
<ViewportControl />
8383
</FeaturePreview>
8484
</VStack>
85-
<VStack className={['rounded-sm', 'border']}>
85+
<VStack className={['rounded-sm', 'border']}>
8686
<VStack className={['flex-1', 'p-32', 'gap-6']}>
8787
<Heading level={3} size="2xl" weight="semibold">
8888
Full TypeScript Support
@@ -103,7 +103,7 @@ const INITIAL_SOURCE = `
103103
/>
104104
</FeaturePreview>
105105
</VStack>
106-
<VStack className={['rounded-sm', 'border']}>
106+
<VStack className={['rounded-sm', 'border']}>
107107
<VStack className={['flex-1', 'p-32', 'gap-6']}>
108108
<Heading level={3} size="2xl" weight="semibold">
109109
Framework Agnostic

‎packages/docs/src/ui-system/Accordion/Accordion.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { ChevronDown } from 'lucide-react';
2+
import type { FC, PropsWithChildren } from 'react';
3+
import type { VariantProps } from 'tailwind-variants';
4+
import { variants } from './AccordionVariants';
5+
6+
type Props = VariantProps<typeof variants> &
7+
PropsWithChildren<{
8+
className?: string[];
9+
summary: string;
10+
}>;
11+
12+
export const Accordion: FC<Props> = ({ className, summary, children }) => (
13+
<details className={variants().container({ className })}>
14+
<summary className={variants().header()}>
15+
<h3 className={variants().summary()}>{summary}</h3>
16+
<ChevronDown className={variants().chevron()} />
17+
</summary>
18+
<p className={variants().content()}>{children}</p>
19+
</details>
20+
);

‎packages/docs/src/ui-system/Accordion/AccordionVariants.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { tv } from 'tailwind-variants';
2+
3+
export const variants = tv({
4+
slots: {
5+
container: ['group', 'py-24', 'border-b', '[&:last-child]:border-0'],
6+
header: [
7+
'flex',
8+
'flex-row',
9+
'justify-between',
10+
'items-center',
11+
'cursor-pointer',
12+
'list-none',
13+
'[&::marker]:hidden',
14+
],
15+
summary: ['flex-1', 'text-xl', 'max-md:text-lg', 'text-foreground', 'font-semibold'],
16+
chevron: ['text-foreground-variant', 'group-open:-rotate-180'],
17+
content: ['text-lg', 'max-md:text-md', 'text-foreground-variant', 'mt-16', 'pr-24'],
18+
},
19+
});

‎packages/docs/src/ui-system/Accordion/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { Accordion } from './Accordion';

‎packages/docs/src/ui-system/Slider/Slider.tsx‎

Lines changed: 0 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,3 @@
1-
// import type { FC } from 'react';
2-
// import { variants } from './SliderVariants';
3-
4-
// type Props = {
5-
// className?: string[];
6-
// min: number;
7-
// max: number;
8-
// step?: number;
9-
// value: number;
10-
// onChange: (value: number) => void;
11-
// };
12-
13-
// export const Slider: FC<Props> = ({ className, min, max, step = 1, value, onChange }) => {
14-
// const styles = variants();
15-
// const progress = ((value - min) / (max - min)) * 100;
16-
17-
// return (
18-
// <div className={styles.root({ className })}>
19-
// <div className={styles.track()}>
20-
// <div className={styles.fill()} style={{ width: `${progress}%` }} />
21-
// <div className={styles.thumb()} style={{ left: `${progress}%` }} />
22-
// <input
23-
// type="range"
24-
// className={styles.input()}
25-
// min={min}
26-
// max={max}
27-
// step={step}
28-
// value={value}
29-
// onChange={(e) => onChange(Number(e.target.value))}
30-
// />
31-
// </div>
32-
// </div>
33-
// );
34-
// };
351
import type { FC } from 'react';
362
import { variants } from './SliderVariants';
373

0 commit comments

Comments
 (0)