Skip to content

Commit 63eb9b6

Browse files
mythzmythz
committed
website updates
1 parent 599f1d1 commit 63eb9b6

File tree

4 files changed

+683
-7
lines changed

4 files changed

+683
-7
lines changed

‎app/(home)/page.tsx‎

Lines changed: 162 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,13 @@ import Link from 'next/link';
44
import Image from 'next/image';
55
import { useState } from 'react';
66
import { CopyBlock } from '@/app/components/copy-block';
7+
import ComponentGallery from '@/app/components/component-gallery';
78

89
export default function HomePage() {
910
const [diagramMode, setDiagramMode] = useState<'Production' | 'Development'>('Production');
1011

1112
return (
1213
<main className="flex flex-col min-h-[calc(100vh-4rem)]">
13-
14-
15-
1614
{/* Hero Section - Dark Theme */}
1715
<section className="relative w-full bg-slate-950 border-b border-white/10 overflow-hidden">
1816

@@ -322,16 +320,176 @@ export default function HomePage() {
322320
/>
323321
</div>
324322

323+
</div>
324+
</div>
325+
326+
{/* React Component Gallery Divider - Full Width Dark Section */}
327+
<section className="relative w-full bg-slate-950 border-y border-white/10 overflow-hidden">
328+
{/* Background Effects */}
329+
<div className="absolute inset-0 opacity-20 pointer-events-none">
330+
<svg className="h-full w-full" aria-hidden="true">
331+
<defs>
332+
<pattern id="featured-grid" width="40" height="40" patternUnits="userSpaceOnUse">
333+
<path d="M0 40L40 0H20L0 20M40 40V20L20 40" stroke="#0ea5e9" strokeWidth="1" fill="none" opacity="0.1" />
334+
</pattern>
335+
</defs>
336+
<rect width="100%" height="100%" fill="url(#featured-grid)" />
337+
</svg>
338+
</div>
339+
340+
<div className="absolute top-0 left-1/4 h-64 w-64 rounded-full bg-blue-600/20 blur-[80px] pointer-events-none"></div>
341+
<div className="absolute bottom-0 right-1/4 h-64 w-64 rounded-full bg-cyan-500/10 blur-[80px] pointer-events-none"></div>
342+
343+
<div className="relative z-10 max-w-4xl mx-auto px-4 py-16 text-center">
344+
<div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full border border-cyan-500/30 bg-cyan-500/10 text-sm font-medium text-cyan-300 mb-6">
345+
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
346+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
347+
</svg>
348+
@servicestack/react
349+
</div>
350+
351+
<h2 className="text-4xl md:text-5xl font-bold text-white tracking-tight mb-6">
352+
React Component Gallery
353+
</h2>
354+
355+
<p className="text-lg text-slate-300 max-w-3xl mx-auto leading-relaxed">
356+
@servicestack/react bridges the gap between your backend and frontend, delivering
357+
production-grade React applications with minimal code and maximum capability.
358+
With API-enabled validation bound forms you can focus on building features, not wiring forms.
359+
</p>
360+
</div>
361+
</section>
362+
363+
<div className="flex-1 w-full bg-background text-foreground">
364+
<div className="max-w-6xl mx-auto px-4 space-y-24">
365+
366+
<ReactComponentGallery />
367+
325368
<PricingCallout />
326369
</div>
327370
</div>
371+
328372
</main>
329373
);
330374
}
331375

376+
function ReactComponentGallery() {
377+
return (
378+
<div className="mt-8 prose dark:prose-invert max-w-none">
379+
380+
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 not-prose mb-12">
381+
<Link href="https://react.servicestack.net/gallery/autoquerygrid" className="block p-6 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg hover:border-indigo-500 dark:hover:border-indigo-500 transition-colors">
382+
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">AutoQueryGrid</h3>
383+
<p className="text-gray-600 dark:text-gray-400">
384+
Powerful data grid with built-in querying, filtering, and sorting capabilities.
385+
</p>
386+
</Link>
387+
388+
<Link href="https://react.servicestack.net/gallery/datagrid" className="block p-6 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg hover:border-indigo-500 dark:hover:border-indigo-500 transition-colors">
389+
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">DataGrid</h3>
390+
<p className="text-gray-600 dark:text-gray-400">
391+
Flexible data grid component for displaying collections with custom rendering.
392+
</p>
393+
</Link>
394+
395+
<Link href="https://react.servicestack.net/gallery/autoform" className="block p-6 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg hover:border-indigo-500 dark:hover:border-indigo-500 transition-colors">
396+
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">Auto Forms</h3>
397+
<p className="text-gray-600 dark:text-gray-400">
398+
Automatically generated forms from your ServiceStack DTOs with validation.
399+
</p>
400+
</Link>
401+
402+
<Link href="https://react.servicestack.net/gallery/form-inputs" className="block p-6 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg hover:border-indigo-500 dark:hover:border-indigo-500 transition-colors">
403+
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">Form Inputs</h3>
404+
<p className="text-gray-600 dark:text-gray-400">
405+
Rich collection of form input components with built-in validation and styling.
406+
</p>
407+
</Link>
408+
409+
<Link href="https://react.servicestack.net/gallery/alerts" className="block p-6 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg hover:border-indigo-500 dark:hover:border-indigo-500 transition-colors">
410+
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">Alerts</h3>
411+
<p className="text-gray-600 dark:text-gray-400">
412+
Alert and notification components for displaying messages to users.
413+
</p>
414+
</Link>
415+
416+
<Link href="https://react.servicestack.net/gallery/modals" className="block p-6 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg hover:border-indigo-500 dark:hover:border-indigo-500 transition-colors">
417+
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">Modals</h3>
418+
<p className="text-gray-600 dark:text-gray-400">
419+
Modal dialogs and slide-over panels for focused user interactions.
420+
</p>
421+
</Link>
422+
423+
<Link href="https://react.servicestack.net/gallery/navigation" className="block p-6 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg hover:border-indigo-500 dark:hover:border-indigo-500 transition-colors">
424+
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">Navigation</h3>
425+
<p className="text-gray-600 dark:text-gray-400">
426+
Navigation components including Tabs, Breadcrumbs, NavList, and Buttons.
427+
</p>
428+
</Link>
429+
430+
<Link href="https://react.servicestack.net/gallery/formats" className="block p-6 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg hover:border-indigo-500 dark:hover:border-indigo-500 transition-colors">
431+
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">Formats</h3>
432+
<p className="text-gray-600 dark:text-gray-400">
433+
PreviewFormat component for rendering data in different formats like currency, bytes, icons, and links.
434+
</p>
435+
</Link>
436+
437+
<Link href="https://react.servicestack.net/gallery/fileinput" className="block p-6 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg hover:border-indigo-500 dark:hover:border-indigo-500 transition-colors">
438+
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">FileInput</h3>
439+
<p className="text-gray-600 dark:text-gray-400">
440+
File upload component with support for single and multiple files, drag & drop, and managed uploads.
441+
</p>
442+
</Link>
443+
444+
<Link href="https://react.servicestack.net/gallery/taginput" className="block p-6 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg hover:border-indigo-500 dark:hover:border-indigo-500 transition-colors">
445+
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">TagInput</h3>
446+
<p className="text-gray-600 dark:text-gray-400">
447+
Tag input component for managing multiple values with autocomplete and validation.
448+
</p>
449+
</Link>
450+
451+
<Link href="https://react.servicestack.net/gallery/combobox" className="block p-6 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg hover:border-indigo-500 dark:hover:border-indigo-500 transition-colors">
452+
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">Combobox</h3>
453+
<p className="text-gray-600 dark:text-gray-400">
454+
Searchable dropdown component with support for objects, key-value pairs, and custom rendering.
455+
</p>
456+
</Link>
457+
458+
<Link href="https://react.servicestack.net/gallery/autocomplete" className="block p-6 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg hover:border-indigo-500 dark:hover:border-indigo-500 transition-colors">
459+
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">Autocomplete</h3>
460+
<p className="text-gray-600 dark:text-gray-400">
461+
Autocomplete input with single/multiple selection and custom item rendering.
462+
</p>
463+
</Link>
464+
465+
<Link href="https://react.servicestack.net/gallery/custom-autoforms" className="block p-6 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg hover:border-indigo-500 dark:hover:border-indigo-500 transition-colors">
466+
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">Custom Auto Forms</h3>
467+
<p className="text-gray-600 dark:text-gray-400">
468+
Learn how to create custom AutoQuery implementations for complex scenarios.
469+
</p>
470+
</Link>
471+
472+
<Link href="https://react.servicestack.net/gallery/markdown" className="block p-6 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg hover:border-indigo-500 dark:hover:border-indigo-500 transition-colors">
473+
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">Markdown Editor</h3>
474+
<p className="text-gray-600 dark:text-gray-400">
475+
Rich markdown editor with toolbar, keyboard shortcuts, and GitHub Flavored Markdown support.
476+
</p>
477+
</Link>
478+
479+
<Link href="https://react.servicestack.net/gallery/custom-inputs" className="block p-6 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg hover:border-indigo-500 dark:hover:border-indigo-500 transition-colors">
480+
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">Custom Inputs</h3>
481+
<p className="text-gray-600 dark:text-gray-400">
482+
Create custom input components that integrate seamlessly with AutoForm.
483+
</p>
484+
</Link>
485+
</div>
486+
</div>
487+
)
488+
}
489+
332490
function PricingCallout() {
333491
return (
334-
<div className="relative max-w-4xl mx-auto mt-60 rounded-3xl overflow-hidden bg-slate-950 border border-white/10 shadow-2xl">
492+
<div className="relative max-w-4xl mx-auto mt-60 mb-32 rounded-3xl overflow-hidden bg-slate-950 border border-white/10 shadow-2xl">
335493
{/* Background Effects */}
336494
<div className="absolute inset-0 opacity-20 pointer-events-none">
337495
<svg className="h-full w-full" aria-hidden="true">

0 commit comments

Comments
 (0)