Skip to content

Commit 2f0e6cc

Browse files
LGLabGregLGLabGreg
committed
feat: improve homepage
1 parent 6eafe5c commit 2f0e6cc

3 files changed

Lines changed: 114 additions & 74 deletions

File tree

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

Lines changed: 77 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,87 @@
1-
import { type PropsWithChildren } from 'react'
2-
import { FaCheckSquare } from 'react-icons/fa'
1+
import { Code, Layers, Sparkles, Zap } from 'lucide-react'
2+
import Link from 'next/link'
33

4-
import { PageHeading } from '@/components/page-heading'
4+
import { Hero } from '@/components/hero'
55
import {
6-
TypographyBold,
7-
TypographyH2,
8-
TypographyList,
9-
TypographyP,
10-
} from '@/components/ui/typography'
6+
Card,
7+
CardContent,
8+
CardDescription,
9+
CardHeader,
10+
CardTitle,
11+
} from '@/components/ui/card'
12+
import { TypographyBold } from '@/components/ui/typography'
1113

1214
export default function Page() {
13-
const Check = () => <FaCheckSquare color='#1dc355' size={24} />
14-
const ListItem = ({ children }: PropsWithChildren) => (
15-
<div className='flex items-center gap-2'>
16-
<Check />
17-
{children}
18-
</div>
19-
)
15+
const features = [
16+
{
17+
title: 'Highly Customizable',
18+
description:
19+
'Style finder patterns, modules, and colors exactly how you want with advanced configuration.',
20+
icon: <Sparkles className='h-5 w-5 text-primary' />,
21+
},
22+
{
23+
title: 'Performance Optimized',
24+
description:
25+
'Generates QR codes efficiently without sacrificing quality or bundle size.',
26+
icon: <Zap className='h-5 w-5 text-primary' />,
27+
},
28+
{
29+
title: 'SVG-Based Rendering',
30+
description: 'Crisp and scalable output for web and print, powered by SVG.',
31+
icon: <Layers className='h-5 w-5 text-primary' />,
32+
},
33+
{
34+
title: 'Developer-Friendly',
35+
description:
36+
'Built with TypeScript, easy to use, and focused on a great developer experience.',
37+
icon: <Code className='h-5 w-5 text-primary' />,
38+
},
39+
]
40+
2041
return (
2142
<>
22-
<PageHeading heading='Overview' />
23-
<TypographyH2>The Ultimate Customizable QR Code Generator for React</TypographyH2>
24-
<TypographyP>
25-
Welcome to <TypographyBold>@lglab/react-qr-code</TypographyBold>, the modern,
26-
high-performance QR code generator built for React developers. Designed for
27-
flexibility, this library lets you create highly customizable QR codes with
28-
advanced styling options.
29-
</TypographyP>
43+
<Hero />
44+
<div className='mb-12 grid grid-cols-1 gap-4 md:grid-cols-2'>
45+
{features.map((feature) => (
46+
<Card key={feature.title}>
47+
<CardHeader className='flex-row items-start gap-4 space-y-0'>
48+
<div className='mb-2 inline-flex h-9 w-9 items-center justify-center rounded-lg bg-background shadow-sm'>
49+
{feature.icon}
50+
</div>
51+
<div>
52+
<CardTitle className='text-lg'>{feature.title}</CardTitle>
53+
<CardDescription className='text-sm leading-relaxed'>
54+
{feature.description}
55+
</CardDescription>
56+
</div>
57+
</CardHeader>
58+
</Card>
59+
))}
60+
</div>
3061

31-
<TypographyList
32-
className='p-0 list-none'
33-
items={[
34-
{
35-
key: 'Customizable',
36-
content: (
37-
<ListItem>
38-
<div>
39-
<span className='font-semibold'>Highly Customizable</span> - Style the
40-
finder patterns, modules, and colors exactly how you want.
41-
</div>
42-
</ListItem>
43-
),
44-
},
45-
{
46-
key: 'Performance',
47-
content: (
48-
<ListItem>
49-
<div>
50-
<span className='font-semibold'>Performance Optimized</span> - Generates
51-
QR codes efficiently without sacrificing quality.
52-
</div>
53-
</ListItem>
54-
),
55-
},
56-
{
57-
key: 'SVG',
58-
content: (
59-
<ListItem>
60-
<div>
61-
<span className='font-semibold'>SVG-Based Rendering</span> - Crisp and
62-
scalable output for web and print
63-
</div>
64-
</ListItem>
65-
),
66-
},
67-
{
68-
key: 'Developer-Friendly',
69-
content: (
70-
<ListItem>
71-
<div>
72-
<span className='font-semibold'>Developer-Friendly</span> - Built with
73-
TypeScript, easy to use, and well-documented
74-
</div>
75-
</ListItem>
76-
),
77-
},
78-
]}
79-
></TypographyList>
62+
<Card>
63+
<CardHeader className='flex-row items-start gap-4 space-y-0'>
64+
<div className='mt-1 shrink-0 rounded-lg bg-background p-2 shadow-sm'>
65+
<Sparkles className='h-6 w-6 text-primary' />
66+
</div>
67+
<div>
68+
<CardTitle className='mb-1 text-xl'>Optimized for AI</CardTitle>
69+
<CardDescription className='text-base text-foreground/80'>
70+
We provide <TypographyBold>llms.txt</TypographyBold> and{' '}
71+
<TypographyBold>llms-full.txt</TypographyBold> files to help tools like
72+
Cursor and Windsurf understand the library documentation instantly.
73+
</CardDescription>
74+
</div>
75+
</CardHeader>
76+
<CardContent className='pt-0'>
77+
<Link
78+
href='/llms-txt'
79+
className='ml-14 inline-flex items-center gap-1 font-medium text-primary hover:underline'
80+
>
81+
Learn how to use with AI tools →
82+
</Link>
83+
</CardContent>
84+
</Card>
8085
</>
8186
)
8287
}

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

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { ArrowRight } from 'lucide-react'
2+
import Link from 'next/link'
3+
4+
import { Button } from '@/components/ui/button'
5+
6+
import { TypographyLead } from './ui/typography'
7+
8+
export const Hero = () => {
9+
return (
10+
<section className='py-8 mb-5'>
11+
<div className='container text-center'>
12+
<div className='mx-auto flex max-w-5xl flex-col gap-6'>
13+
<h1 className='text-3xl font-semibold lg:text-6xl'>
14+
The ultimate customizable QR code generator for React
15+
</h1>
16+
<TypographyLead>
17+
Create high-performance, stylized QR codes with a library designed for the
18+
modern web.
19+
</TypographyLead>
20+
</div>
21+
<div className='flex items-center gap-4 justify-center mt-6'>
22+
<Button asChild size='lg'>
23+
<Link href='/installation'>
24+
Get started
25+
<ArrowRight />
26+
</Link>
27+
</Button>
28+
<Button asChild size='lg' variant='outline'>
29+
<Link href='/demo'>Demo</Link>
30+
</Button>
31+
</div>
32+
</div>
33+
</section>
34+
)
35+
}

‎apps/docs/src/components/ui/typography.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ export function TypographyTable({
139139
{headers.map((header) => (
140140
<th
141141
key={header}
142-
className='border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right'
142+
className='border px-4 py-2 text-left font-bold [[align=center]]:text-center [[align=right]]:text-right'
143143
>
144144
{header}
145145
</th>
@@ -152,7 +152,7 @@ export function TypographyTable({
152152
{items.map((item) => (
153153
<td
154154
key={item}
155-
className='border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right'
155+
className='border px-4 py-2 text-left [[align=center]]:text-center [[align=right]]:text-right'
156156
>
157157
{item}
158158
</td>

0 commit comments

Comments
 (0)