Skip to content

Commit 807a307

Browse files
idusparaiduspara
committed
feat: Added new page for template
1 parent 6ed8890 commit 807a307

6 files changed

Lines changed: 323 additions & 131 deletions

File tree

‎src/app/about/page.tsx‎

Lines changed: 122 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -193,9 +193,6 @@ export default function AboutPage() {
193193
</Link>
194194
<div className="space-y-6">
195195
<div className="flex items-center gap-3">
196-
<div className="p-3 rounded-xl bg-primary/10 text-primary">
197-
<BlocksIcon className="h-8 w-8" strokeWidth={2} />
198-
</div>
199196
<div>
200197
<h1 className="text-4xl font-bold tracking-tight">
201198
About shadcn/ui Builder
@@ -241,7 +238,7 @@ export default function AboutPage() {
241238

242239
<div className="space-y-4">
243240
<p className="text-muted-foreground leading-relaxed">
244-
It was a typical Tuesday morning when the idea for shadcn/ui
241+
It was a typical Saturday morning when the idea for shadcn/ui
245242
Builder was born. As a developer, I found myself repeatedly
246243
building the same form components, styling them with Tailwind
247244
CSS, and ensuring they worked perfectly with React Hook Form
@@ -265,7 +262,7 @@ export default function AboutPage() {
265262
</p>
266263

267264
<p className="text-muted-foreground leading-relaxed">
268-
What started as a late-night side project quickly evolved into
265+
What started as a late-night weekend side project quickly evolved into
269266
something much bigger. I envisioned a tool that would make
270267
form building as simple as drag-and-drop, while still
271268
generating clean, production-ready React code that developers
@@ -275,90 +272,63 @@ export default function AboutPage() {
275272
</div>
276273
</section>
277274

278-
{/* Mission & Vision */}
279-
<section className="grid md:grid-cols-2 gap-8">
280-
<Card className="border-primary/20">
281-
<CardHeader>
282-
<div className="flex items-center gap-3">
283-
<Target className="h-6 w-6 text-primary" />
284-
<CardTitle>My Mission</CardTitle>
285-
</div>
286-
</CardHeader>
287-
<CardContent>
288-
<p className="text-muted-foreground leading-relaxed">
289-
To democratize form building by providing a powerful,
290-
intuitive visual builder that generates clean, maintainable
291-
React code using the best practices and modern web standards.
292-
</p>
293-
</CardContent>
294-
</Card>
275+
{/* Development Journey */}
276+
<section className="space-y-6">
277+
<h2 className="text-3xl font-bold">My Journey So Far</h2>
295278

296-
<Card className="border-blue-200 dark:border-blue-800">
297-
<CardHeader>
298-
<div className="flex items-center gap-3">
299-
<Lightbulb className="h-6 w-6 text-blue-600" />
300-
<CardTitle>My Vision</CardTitle>
279+
<div className="space-y-4">
280+
<div className="flex gap-4">
281+
<div className="flex-shrink-0 w-12 h-12 rounded-full ring ring-primary flex items-center justify-center">
282+
<Coffee className="h-5 w-5 text-primary" />
301283
</div>
302-
</CardHeader>
303-
<CardContent>
304-
<p className="text-muted-foreground leading-relaxed">
305-
A world where creating beautiful, accessible, and functional
306-
forms takes minutes, not hours, and where both developers and
307-
non-developers can build professional web forms effortlessly.
308-
</p>
309-
</CardContent>
310-
</Card>
311-
</section>
312-
313-
{/* Core Values */}
314-
<section className="space-y-6">
315-
<h2 className="text-3xl font-bold">What Drives Me</h2>
284+
<div className="space-y-2">
285+
<h3 className="font-semibold">The Idea Phase</h3>
286+
<p className="text-sm text-muted-foreground">
287+
Late nights and countless coffee sessions figuring out the
288+
perfect form builder that developers would actually want to
289+
use.
290+
</p>
291+
</div>
292+
</div>
316293

317-
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
318-
<Card className="text-center">
319-
<CardHeader>
320-
<div className="mx-auto p-3 rounded-full border border-primary w-fit">
321-
<CheckCircle className="h-6 w-6" />
322-
</div>
323-
<CardTitle className="text-lg">Simplicity First</CardTitle>
324-
</CardHeader>
325-
<CardContent>
294+
<div className="flex gap-4">
295+
<div className="flex-shrink-0 w-12 h-12 rounded-full border border-primary flex items-center justify-center">
296+
<Code2 className="h-5 w-5" />
297+
</div>
298+
<div className="space-y-2">
299+
<h3 className="font-semibold">First Prototype</h3>
326300
<p className="text-sm text-muted-foreground">
327-
Complex problems deserve simple solutions. We believe
328-
powerful tools don&apos;t have to be complicated.
301+
Built the initial drag-and-drop interface and component
302+
system. The magic moment when I saw components come to life!
329303
</p>
330-
</CardContent>
331-
</Card>
304+
</div>
305+
</div>
332306

333-
<Card className="text-center">
334-
<CardHeader>
335-
<div className="mx-auto p-3 rounded-full border border-primary w-fit">
336-
<Code2 className="h-6 w-6" />
337-
</div>
338-
<CardTitle className="text-lg">Code Quality</CardTitle>
339-
</CardHeader>
340-
<CardContent>
307+
<div className="flex gap-4">
308+
<div className="flex-shrink-0 w-12 h-12 rounded-full border border-primary flex items-center justify-center">
309+
<Zap className="h-5 w-5" />
310+
</div>
311+
<div className="space-y-2">
312+
<h3 className="font-semibold">Beta Launch</h3>
341313
<p className="text-sm text-muted-foreground">
342-
Generated code should be clean, readable, and maintainable -
343-
code you&apos;d be proud to write yourself.
314+
Released my first public beta with core form components and
315+
code generation capabilities.
344316
</p>
345-
</CardContent>
346-
</Card>
317+
</div>
318+
</div>
347319

348-
<Card className="text-center">
349-
<CardHeader>
350-
<div className="mx-auto p-3 rounded-full border border-primary w-fit">
351-
<Users className="h-6 w-6" />
352-
</div>
353-
<CardTitle className="text-lg">Community Driven</CardTitle>
354-
</CardHeader>
355-
<CardContent>
320+
<div className="flex gap-4">
321+
<div className="flex-shrink-0 w-12 h-12 rounded-full border border-primary flex items-center justify-center">
322+
<Users className="h-5 w-5" />
323+
</div>
324+
<div className="space-y-2">
325+
<h3 className="font-semibold">Community Growth</h3>
356326
<p className="text-sm text-muted-foreground">
357-
Built by developers, for developers, with feedback and
358-
contributions from the community.
327+
Amazing feedback from early adopters helping me shape the
328+
roadmap and improve the user experience.
359329
</p>
360-
</CardContent>
361-
</Card>
330+
</div>
331+
</div>
362332
</div>
363333
</section>
364334

@@ -435,63 +405,92 @@ export default function AboutPage() {
435405
</div>
436406
</section>
437407

438-
{/* Development Journey */}
439-
<section className="space-y-6">
440-
<h2 className="text-3xl font-bold">My Journey So Far</h2>
441408

442-
<div className="space-y-4">
443-
<div className="flex gap-4">
444-
<div className="flex-shrink-0 w-12 h-12 rounded-full ring ring-primary flex items-center justify-center">
445-
<Coffee className="h-5 w-5 text-primary" />
446-
</div>
447-
<div className="space-y-2">
448-
<h3 className="font-semibold">The Idea Phase</h3>
449-
<p className="text-sm text-muted-foreground">
450-
Late nights and countless coffee sessions figuring out the
451-
perfect form builder that developers would actually want to
452-
use.
453-
</p>
409+
410+
{/* Mission & Vision */}
411+
<section className="grid md:grid-cols-2 gap-8">
412+
<Card className="border-primary/20">
413+
<CardHeader>
414+
<div className="flex items-center gap-3">
415+
<Target className="h-6 w-6 text-primary" />
416+
<CardTitle>My Mission</CardTitle>
454417
</div>
455-
</div>
418+
</CardHeader>
419+
<CardContent>
420+
<p className="text-muted-foreground leading-relaxed">
421+
To democratize form building by providing a powerful,
422+
intuitive visual builder that generates clean, maintainable
423+
React code using the best practices and modern web standards.
424+
</p>
425+
</CardContent>
426+
</Card>
456427

457-
<div className="flex gap-4">
458-
<div className="flex-shrink-0 w-12 h-12 rounded-full border border-primary flex items-center justify-center">
459-
<Code2 className="h-5 w-5" />
428+
<Card className="border-blue-200 dark:border-blue-800">
429+
<CardHeader>
430+
<div className="flex items-center gap-3">
431+
<Lightbulb className="h-6 w-6 " />
432+
<CardTitle>My Vision</CardTitle>
460433
</div>
461-
<div className="space-y-2">
462-
<h3 className="font-semibold">First Prototype</h3>
434+
</CardHeader>
435+
<CardContent>
436+
<p className="text-muted-foreground leading-relaxed">
437+
A world where creating beautiful, accessible, and functional
438+
forms takes minutes, not hours, and where both developers and
439+
non-developers can build professional web forms effortlessly.
440+
</p>
441+
</CardContent>
442+
</Card>
443+
</section>
444+
445+
{/* Core Values */}
446+
<section className="space-y-6">
447+
<h2 className="text-3xl font-bold">What Drives Me</h2>
448+
449+
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
450+
<Card className="text-center">
451+
<CardHeader>
452+
<div className="mx-auto p-3 rounded-full border border-primary w-fit">
453+
<CheckCircle className="h-6 w-6" />
454+
</div>
455+
<CardTitle className="text-lg">Simplicity First</CardTitle>
456+
</CardHeader>
457+
<CardContent>
463458
<p className="text-sm text-muted-foreground">
464-
Built the initial drag-and-drop interface and component
465-
system. The magic moment when I saw components come to life!
459+
Complex problems deserve simple solutions. We believe
460+
powerful tools don&apos;t have to be complicated.
466461
</p>
467-
</div>
468-
</div>
462+
</CardContent>
463+
</Card>
469464

470-
<div className="flex gap-4">
471-
<div className="flex-shrink-0 w-12 h-12 rounded-full border border-primary flex items-center justify-center">
472-
<Zap className="h-5 w-5" />
473-
</div>
474-
<div className="space-y-2">
475-
<h3 className="font-semibold">Beta Launch</h3>
465+
<Card className="text-center">
466+
<CardHeader>
467+
<div className="mx-auto p-3 rounded-full border border-primary w-fit">
468+
<Code2 className="h-6 w-6" />
469+
</div>
470+
<CardTitle className="text-lg">Code Quality</CardTitle>
471+
</CardHeader>
472+
<CardContent>
476473
<p className="text-sm text-muted-foreground">
477-
Released my first public beta with core form components and
478-
code generation capabilities.
474+
Generated code should be clean, readable, and maintainable -
475+
code you&apos;d be proud to write yourself.
479476
</p>
480-
</div>
481-
</div>
477+
</CardContent>
478+
</Card>
482479

483-
<div className="flex gap-4">
484-
<div className="flex-shrink-0 w-12 h-12 rounded-full border border-primary flex items-center justify-center">
485-
<Users className="h-5 w-5" />
486-
</div>
487-
<div className="space-y-2">
488-
<h3 className="font-semibold">Community Growth</h3>
480+
<Card className="text-center">
481+
<CardHeader>
482+
<div className="mx-auto p-3 rounded-full border border-primary w-fit">
483+
<Users className="h-6 w-6" />
484+
</div>
485+
<CardTitle className="text-lg">Community Driven</CardTitle>
486+
</CardHeader>
487+
<CardContent>
489488
<p className="text-sm text-muted-foreground">
490-
Amazing feedback from early adopters helping me shape the
491-
roadmap and improve the user experience.
489+
Built by developers, for developers, with feedback and
490+
contributions from the community.
492491
</p>
493-
</div>
494-
</div>
492+
</CardContent>
493+
</Card>
495494
</div>
496495
</section>
497496

0 commit comments

Comments
 (0)