Skip to content

Commit 7afe912

Browse files
Leo5661Leo5661
committed
feat: added Faq section.
1 parent 08a427c commit 7afe912

File tree

8 files changed

+198
-83
lines changed

8 files changed

+198
-83
lines changed

‎apps/docs/src/app/page.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import Footer from "../components/footer";
22
import { Header } from "../components/header";
33
import CATSection from "../components/sections/cat";
4+
import FaqSection from "../components/sections/faq";
45
import FeatureSection from "../components/sections/feature";
56
import HeroSection from "../components/sections/hero";
67
import InstallationSection from "../components/sections/installation";
@@ -18,6 +19,8 @@ export default function Page(): JSX.Element {
1819
<hr className="m-0 h-px w-full border-none bg-gradient-to-r from-neutral-200/0 via-foreground/20 to-neutral-200/0 my-10" />
1920
<CATSection />
2021
<hr className="m-0 h-px w-full border-none bg-gradient-to-r from-neutral-200/0 via-foreground/20 to-neutral-200/0 my-10" />
22+
<FaqSection />
23+
<hr className="m-0 h-px w-full border-none bg-gradient-to-r from-neutral-200/0 via-foreground/20 to-neutral-200/0 my-10" />
2124
<Footer />
2225
</main>
2326
);

‎apps/docs/src/components/FaqItem.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { Minus, Plus } from "lucide-react";
2+
import { FAQ_Item } from "../lib/lists";
3+
import { cn } from "../lib/utils";
4+
5+
export function FAQItem({
6+
item,
7+
isOpen,
8+
toggleOpen,
9+
}: {
10+
item: FAQ_Item;
11+
isOpen: boolean;
12+
toggleOpen: () => void;
13+
}) {
14+
return (
15+
<div className="border-b border-foreground/10 w-full px-10 md:px-0">
16+
<div
17+
className="flex justify-between items-center w-full py-4 text-left cursor-pointer"
18+
onClick={toggleOpen}
19+
>
20+
<span className="text-sm font-medium">{item.question}</span>
21+
{isOpen ? (
22+
<Minus className="h-5 w-5 text-primary" />
23+
) : (
24+
<Plus className="h-5 w-5 text-primary" />
25+
)}
26+
</div>
27+
<div
28+
className={cn(
29+
"overflow-hidden transition-all duration-300 ease-in-out",
30+
isOpen ? "max-h-96 opacity-100" : "max-h-0 opacity-0",
31+
)}
32+
>
33+
<p className="pb-4 text-muted-foreground text-sm">{item.answer}</p>
34+
</div>
35+
</div>
36+
);
37+
}

‎apps/docs/src/components/sections/cat.tsx‎

Lines changed: 29 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -5,94 +5,45 @@ import Link from "next/link";
55
import { DiscordLogoIcon, GitHubLogoIcon } from "@radix-ui/react-icons";
66
import { ShineBorder } from "../ui/shine-border";
77
import { BorderBeam } from "../ui/border-beam";
8+
import { CAT_LIST } from "@/src/lib/lists";
89

910
function CATSection() {
1011
return (
11-
<div className="flex flex-col items-center justify-center w-full py-10 md:py-20 overflow-hidden relative">
12-
<div className="absolute inset-0 bg-grid-white/[0.02]" />
12+
<div className="flex flex-col items-center justify-center w-full py-10 md:py-20 overflow-hidden">
1313
<div className="text-xl sm:text-3xl font-bold tracking-tighter text-center md:text-4xl/tight">
1414
Be a Pioneer in the CodeGen Community
1515
</div>
16-
<div className="mt-4 text-sm sm:text-base max-w-[320px] text-muted-foreground md:text-lg lg:text-xl sm:max-w-[600px] text-center mb-8 sm:mb-12 md:mb-24">
16+
<div className="mt-4 text-sm sm:text-base max-w-[320px] text-muted-foreground font-light lg:text-lg sm:max-w-[600px] md:max-w-[800px] text-center mb-8 sm:mb-12 md:mb-24">
1717
Join us at the ground level and help shape the future of CodeGen. Your
1818
early contributions can make a significant impact.
1919
</div>
2020

21-
<div className="flex sm:flex-row flex-col gap-4 sm:gap-0 items-center mt-8 justify-evenly w-full px-20">
22-
<Card className="relative rounded border sm:px-10 sm:py-8 p-4 min-w-[300px] min-h-[300px]">
23-
<CardContent className="p-4 flex flex-col items-center text-center space-y-4">
24-
<Rocket
25-
className="h-8 w-8 text-muted-foreground"
26-
strokeWidth="1.5"
27-
/>
28-
<h3 className="text-lg font-semibold">Early Adopter</h3>
29-
<p className="text-muted-foreground text-sm max-w-80">
30-
Be among the first to use and provide feedback on CodeGen. Your
31-
input will directly influence its development.
32-
</p>
33-
<Button
34-
asChild
35-
variant={"outline"}
36-
className="inline-flex items-center justify-center"
37-
>
38-
<Link href="/docs/introduction">
39-
Get Started
40-
<ArrowRight className="ml-2 h-4 w-4" />
41-
</Link>
42-
</Button>
43-
</CardContent>
44-
<BorderBeam />
45-
</Card>
46-
47-
<Card className="relative rounded border sm:px-10 sm:py-8 p-4 min-w-[300px] min-h-[300px]">
48-
<CardContent className="p-4 flex flex-col items-center text-center space-y-4">
49-
<GitHubLogoIcon
50-
className="h-8 w-8 text-muted-foreground"
51-
strokeWidth={1.5}
52-
/>
53-
<div className="text-lg font-semibold">Contribute on GitHub</div>
54-
<p className="text-muted-foreground text-sm max-w-80">
55-
Help build CodeGen from the ground up. Your contributions, big or
56-
small, will be foundational to the project.
57-
</p>
58-
<Button
59-
asChild
60-
variant={"outline"}
61-
className="inline-flex items-center justify-center"
62-
>
63-
<Link href="https://github.com/Leo5661/codegen">
64-
View Repository
65-
<ArrowRight className="ml-2 h-4 w-4" />
66-
</Link>
67-
</Button>
68-
</CardContent>
69-
<BorderBeam />
70-
</Card>
71-
72-
<Card className="relative rounded border sm:px-10 sm:py-8 p-4 min-w-[300px] min-h-[300px]">
73-
<CardContent className="p-4 flex flex-col items-center text-center space-y-4">
74-
<Lightbulb
75-
className="h-8 w-8 text-muted-foreground"
76-
strokeWidth={1.5}
77-
/>
78-
<div className="text-lg font-semibold">Shape the Future</div>
79-
<p className="text-muted-foreground text-sm max-w-80">
80-
Share your ideas and help define the roadmap for CodeGen. Your
81-
vision can become a core feature.
82-
</p>
83-
<Button
84-
asChild
85-
variant={"outline"}
86-
className="inline-flex items-center justify-center"
87-
>
88-
<Link href="https://github.com/Leo5661/codegen">
89-
View Roadmap
90-
<ArrowRight className="ml-2 h-4 w-4" />
91-
</Link>
92-
</Button>
93-
</CardContent>
94-
<BorderBeam />
95-
</Card>
21+
<div className="flex flex-col md:flex-wrap lg:flex-row gap-4 items-center mt-8 justify-evenly w-full px-4 sm:px-20">
22+
{CAT_LIST.map((card, index) => (
23+
<Card
24+
key={index}
25+
className="relative rounded border px-4 py-8 sm:px-10 sm:py-8 w-full md:w-[calc(50%-1rem)] lg:w-[calc(33%-1rem)] min-w-[300px] min-h-[300px]"
26+
>
27+
<CardContent className="p-4 flex flex-col items-center text-center space-y-4">
28+
{card.icon}
29+
<h3 className="text-lg font-semibold">{card.title}</h3>
30+
<p className="text-muted-foreground text-sm max-w-80">
31+
{card.description}
32+
</p>
33+
<Button
34+
asChild
35+
variant={"outline"}
36+
className="inline-flex items-center justify-center"
37+
>
38+
<Link href={card.link}>
39+
{card.linkText}
40+
<ArrowRight className="ml-2 h-4 w-4" />
41+
</Link>
42+
</Button>
43+
</CardContent>
44+
<BorderBeam />
45+
</Card>
46+
))}
9647
</div>
9748

9849
<div className="flex flex-col items-center mt-10 sm:mt-20 z-10">

‎apps/docs/src/components/sections/faq.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
"use client";
2+
3+
import { FAQ_LIST } from "@/src/lib/lists";
4+
import { useState } from "react";
5+
import { FAQItem } from "../FaqItem";
6+
7+
function FaqSection() {
8+
const [openIndex, setOpenIndex] = useState<number | null>(null);
9+
10+
return (
11+
<div className="flex flex-col items-center justify-center w-full py-10 md:py-20 overflow-hidden relative">
12+
<div className="text-xl sm:text-3xl font-bold tracking-tighter text-center md:text-4xl/tight">
13+
Frequently Asked Questions
14+
</div>
15+
<div className="mt-4 text-sm sm:text-base max-w-[320px] text-muted-foreground font-light lg:text-lg sm:max-w-[600px] md:max-w-[800px] text-center mb-8 sm:mb-12 md:mb-24">
16+
Got questions? We've got answers. If you can't find what you're looking
17+
for, feel free to contact us.
18+
</div>
19+
20+
<div className="flex flex-col gap-4 items-center mt-8 max-w-3xl mx-auto">
21+
{FAQ_LIST.map((faq, index) => (
22+
<FAQItem
23+
key={index}
24+
item={faq}
25+
isOpen={openIndex === index}
26+
toggleOpen={() => setOpenIndex(openIndex === index ? null : index)}
27+
/>
28+
))}
29+
</div>
30+
</div>
31+
);
32+
}
33+
34+
export default FaqSection;

‎apps/docs/src/components/sections/feature.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ function FeatureSection() {
66
<div className="text-2xl sm:text-3xl font-bold tracking-tighter md:text-4xl/tight">
77
Everything You Need
88
</div>
9-
<div className="mt-4 text-sm sm:text-base max-w-[320px] text-muted-foreground md:text-lg lg:text-xl sm:max-w-[600px] text-center mb-8 sm:mb-12 md:mb-24">
9+
<div className="mt-4 text-sm sm:text-base max-w-[320px] text-muted-foreground font-light lg:text-lg sm:max-w-[600px] md:max-w-[800px] text-center mb-8 sm:mb-12 md:mb-24">
1010
CodeGen provides a comprehensive set of tools for modern development
1111
workflows.
1212
</div>

‎apps/docs/src/components/sections/hero.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ function HeroSection() {
5151
<div className="text-3xl font-bold tracking-tighter text-center sm:text-5xl md:text-6xl lg:text-7xl sm:max-w-3xl max-w-xs to-muted-foreground mt-4">
5252
Build Faster with Automated Workflows
5353
</div>
54-
<p className="sm:max-w-[700px] max-w-[300px] text-muted-foreground text-xs sm:text-base md:text-lg text-center mt-4">
54+
<p className="sm:max-w-[600px] max-w-[320px] mt-4 text-sm sm:text-base text-muted-foreground font-light lg:text-lg md:max-w-[800px] text-center">
5555
Generate tailored templates for TypeScript and JavaScript frameworks.
5656
Boost your productivity with customizable scaffolding.
5757
</p>

‎apps/docs/src/components/sections/installation.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,11 @@ function InstallationSection() {
1717
];
1818

1919
return (
20-
<div className="flex flex-col items-center justify-center w-full py-10 md:py-20 overflow-hidden relative">
21-
<div className="absolute inset-0 bg-grid-white/[0.02]" />
20+
<div className="flex flex-col items-center justify-center w-full py-10 md:py-20 overflow-hidden">
2221
<div className="text-2xl sm:text-3xl font-bold tracking-tighter md:text-4xl/tight">
2322
Get Started in Minutes
2423
</div>
25-
<div className="mt-4 text-sm sm:text-base max-w-[320px] text-muted-foreground md:text-lg lg:text-xl sm:max-w-[600px] text-center mb-8 sm:mb-12 md:mb-24">
24+
<div className="mt-4 text-sm sm:text-base max-w-[320px] text-muted-foreground font-light lg:text-lg sm:max-w-[600px] md:max-w-[800px] text-center mb-8 sm:mb-12 md:mb-24">
2625
Quick installation process with npm or yarn. Start code instantly.
2726
</div>
2827
<div className="flex flex-col items-center gap-8 max-w-3xl">

‎apps/docs/src/lib/lists.tsx‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import { GitHubLogoIcon } from "@radix-ui/react-icons";
2+
import { Lightbulb, Rocket } from "lucide-react";
3+
import { syncBuiltinESMExports } from "node:module";
4+
import { ReactElement } from "react";
5+
6+
export interface CAT_ITEM {
7+
icon: ReactElement;
8+
title: string;
9+
description: string;
10+
link: string;
11+
linkText: string;
12+
}
13+
14+
export const CAT_LIST: CAT_ITEM[] = [
15+
{
16+
icon: (
17+
<Rocket className="h-8 w-8 text-muted-foreground" strokeWidth="1.5" />
18+
),
19+
title: "Early Adopter",
20+
description:
21+
"Be among the first to use and provide feedback on CodeGen. Your input will directly influence its development.",
22+
link: "/docs/introduction",
23+
linkText: "Get Started",
24+
},
25+
{
26+
icon: (
27+
<GitHubLogoIcon
28+
className="h-8 w-8 text-muted-foreground"
29+
strokeWidth="1.5"
30+
/>
31+
),
32+
title: "Contribute on GitHub",
33+
description:
34+
"Help build CodeGen from the ground up. Your contributions, big or small, will be foundational to the project.",
35+
link: "https://github.com/Leo5661/codegen",
36+
linkText: "View Repository",
37+
},
38+
{
39+
icon: (
40+
<Lightbulb className="h-8 w-8 text-muted-foreground" strokeWidth="1.5" />
41+
),
42+
title: "Shape the Future",
43+
description:
44+
"Share your ideas and help define the roadmap for CodeGen. Your vision can become a core feature.",
45+
link: "https://github.com/Leo5661/codegen",
46+
linkText: "View Roadmap",
47+
},
48+
];
49+
50+
export interface FAQ_Item {
51+
question: string;
52+
answer: string;
53+
}
54+
55+
export const FAQ_LIST: FAQ_Item[] = [
56+
{
57+
question: "How many frameworks does CodeGen support?",
58+
answer:
59+
"CodeGen currently supports major JavaScript frameworks including React, Vue, Angular, and Node.js. We're continuously working on expanding our framework support based on community feedback and needs.",
60+
},
61+
// {
62+
// question: "Will it auto-generate components?",
63+
// answer:
64+
// "Yes, CodeGen can auto-generate components based on your specifications. This includes both basic structure and styling, saving you time in the initial setup phase of your projects.",
65+
// },
66+
{
67+
question: "Is CodeGen an AI?",
68+
answer:
69+
"Currently, CodeGen is not an AI. It uses predefined templates and user inputs to generate code. However, we are exploring AI integration for future versions to provide more intelligent and context-aware code generation.",
70+
},
71+
{
72+
question: "Is CodeGen free to use?",
73+
answer:
74+
"CodeGen is free to use without AI features. In the future, if AI capabilities are introduced, there may be paid tiers for those advanced features. We're committed to maintaining a free tier for basic functionality.",
75+
},
76+
{
77+
question: "Is CodeGen only available as a CLI?",
78+
answer:
79+
"No, CodeGen is not limited to CLI. We are actively developing a browser-based lab that will allow you to generate packages directly in your browser with all CLI features and more. This will provide a more interactive and visual experience for package generation.",
80+
},
81+
{
82+
question: "Can I contribute to CodeGen's development?",
83+
answer:
84+
"We welcome contributions from the community. You can contribute by submitting pull requests, reporting bugs, or suggesting new features on our GitHub repository.",
85+
},
86+
{
87+
question: "How often is CodeGen updated?",
88+
answer:
89+
"We strive to keep CodeGen up-to-date with the latest web development trends and framework updates. Major updates are typically released quarterly, with minor updates and bug fixes rolled out more frequently.",
90+
},
91+
];

0 commit comments

Comments
 (0)