Skip to content

Commit 70f2116

Browse files
bizarrebizarre
committed
changes
1 parent 123dadf commit 70f2116

4 files changed

Lines changed: 1359 additions & 59 deletions

File tree

‎landing/pages/index/+Page.tsx‎

Lines changed: 190 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ import {
1010
ChevronDown,
1111
ArrowLeftRight,
1212
ExternalLink,
13-
CornerDownRight
13+
CornerDownRight,
14+
TextCursorInput
1415
} from 'lucide-react'
1516
import { ClientOnly } from 'vike-react/ClientOnly'
1617
import packageJson from '../../../package.json'
@@ -128,7 +129,185 @@ export default function Page() {
128129

129130
{/* Component Accordion */}
130131
<div className="space-y-6">
131-
{/* TimeSlice Component Accordion */}
132+
<Collapsible.Root className="w-full" defaultOpen>
133+
<Collapsible.Trigger className="w-full group">
134+
<div className="flex items-center justify-between py-3 px-4 bg-black/40 border border-zinc-800/80 rounded-lg hover:border-zinc-700/80 transition-colors">
135+
<div className="flex items-center gap-3 sm:gap-5">
136+
<div className="p-2 sm:p-2.5 rounded-lg bg-gradient-to-br from-emerald-500/20 to-teal-500/10 border border-emerald-500/20 shadow-sm">
137+
<TextCursorInput className="h-5 w-5 sm:h-5 sm:w-5 text-emerald-400" />
138+
</div>
139+
<div className="flex flex-col items-start text-left flex-1">
140+
<h3 className="text-lg sm:text-xl font-semibold text-white group-hover:text-white/90 transition-colors">
141+
Inlay
142+
</h3>
143+
<p className="text-zinc-400 text-sm sm:text-base leading-relaxed group-hover:text-zinc-300 transition-colors">
144+
A composable input for structured text
145+
</p>
146+
</div>
147+
</div>
148+
<div className="h-8 w-8 rounded-full bg-zinc-900/70 border border-zinc-800 flex items-center justify-center group-data-[state=open]:rotate-180 transition-transform duration-300">
149+
<ChevronDown className="h-4 w-4 text-zinc-400 group-hover:text-zinc-300 transition-colors" />
150+
</div>
151+
</div>
152+
</Collapsible.Trigger>
153+
<Collapsible.Content className="overflow-hidden data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up">
154+
<div className="pt-6 pl-5 pr-3">
155+
<div className="relative">
156+
{/* Subtle component divider */}
157+
<div className="absolute -left-5 top-0 w-px h-full bg-gradient-to-b from-emerald-500/30 via-cyan-500/20 to-transparent"></div>
158+
159+
{/* Compact Features and Use Cases - Above Example */}
160+
<div className="mb-8 sm:mb-10 bg-black/20 rounded-lg border border-zinc-800/50 p-4">
161+
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
162+
{/* Features Section */}
163+
<div>
164+
<div className="flex items-center mb-3">
165+
<div className="h-6 w-6 rounded-full bg-gradient-to-br from-emerald-500/20 to-green-500/10 flex items-center justify-center mr-2 border border-emerald-500/20">
166+
<Sparkles className="h-3.5 w-3.5 text-emerald-400" />
167+
</div>
168+
<h4 className="text-sm font-medium text-white">
169+
Features
170+
</h4>
171+
</div>
172+
173+
<div className="flex flex-wrap gap-2">
174+
<div className="flex items-center rounded-full bg-zinc-900/70 px-2.5 py-1 border border-zinc-800 hover:border-emerald-500/30 transition-colors">
175+
<span className="text-zinc-300 text-xs">
176+
Component-driven tokens
177+
</span>
178+
</div>
179+
<div className="flex items-center rounded-full bg-zinc-900/70 px-2.5 py-1 border border-zinc-800 hover:border-emerald-500/30 transition-colors">
180+
<span className="text-zinc-300 text-xs">
181+
Custom parsing
182+
</span>
183+
</div>
184+
<div className="flex items-center rounded-full bg-zinc-900/70 px-2.5 py-1 border border-zinc-800 hover:border-emerald-500/30 transition-colors">
185+
<span className="text-zinc-300 text-xs">
186+
Native-like UX
187+
</span>
188+
</div>
189+
</div>
190+
</div>
191+
192+
{/* Perfect For Section */}
193+
<div>
194+
<div className="flex items-center mb-3">
195+
<div className="h-6 w-6 rounded-full bg-gradient-to-br from-blue-500/20 to-violet-500/10 flex items-center justify-center mr-2 border border-blue-500/20">
196+
<Calendar className="h-3.5 w-3.5 text-blue-400" />
197+
</div>
198+
<h4 className="text-sm font-medium text-white">
199+
Perfect For
200+
</h4>
201+
</div>
202+
203+
<div className="flex flex-wrap gap-2">
204+
<div className="flex items-center rounded-full bg-zinc-900/70 px-2.5 py-1 border border-zinc-800 hover:border-blue-500/30 transition-colors">
205+
<span className="text-zinc-300 text-xs">
206+
Mentions
207+
</span>
208+
</div>
209+
<div className="flex items-center rounded-full bg-zinc-900/70 px-2.5 py-1 border border-zinc-800 hover:border-blue-500/30 transition-colors">
210+
<span className="text-zinc-300 text-xs">
211+
Search filters
212+
</span>
213+
</div>
214+
<div className="flex items-center rounded-full bg-zinc-900/70 px-2.5 py-1 border border-zinc-800 hover:border-blue-500/30 transition-colors">
215+
<span className="text-zinc-300 text-xs">
216+
AI inputs
217+
</span>
218+
</div>
219+
</div>
220+
</div>
221+
</div>
222+
</div>
223+
224+
{/* Clean, flat demo card */}
225+
<div className="w-full mb-10 sm:mb-12">
226+
<div className="bg-black/30 border border-zinc-800/80 rounded-lg overflow-visible">
227+
{/* Top bar */}
228+
<div className="border-b border-zinc-800/50 px-3 sm:px-5 py-2 sm:py-3 flex justify-between items-center bg-black/20">
229+
<div className="flex items-center gap-2">
230+
<div className="h-2 w-2 rounded-full bg-emerald-500/70"></div>
231+
<span className="text-xs font-medium text-zinc-400">
232+
DEMO
233+
</span>
234+
</div>
235+
236+
<ClientOnly
237+
load={() =>
238+
import(
239+
'../../components/component-showcase-dialog'
240+
)
241+
}
242+
fallback={
243+
<div className="animate-pulse h-8 w-24 bg-zinc-900/50 rounded-md"></div>
244+
}
245+
>
246+
{(ComponentShowcaseDialog) => (
247+
<ClientOnly
248+
load={() =>
249+
import('../../components/time-slice-example')
250+
}
251+
fallback={<div />}
252+
>
253+
{(ChronoExample) => (
254+
<ComponentShowcaseDialog
255+
title="Chrono Component"
256+
description="Chrono is a flexible time range picker with natural language support, relative time handling, and keyboard navigation."
257+
demoComponent={ChronoExample}
258+
codeTabs={[
259+
{
260+
label: 'Basic',
261+
value: 'basic',
262+
code: timeSliceBasicExample,
263+
language: 'tsx'
264+
},
265+
{
266+
label: 'Demo',
267+
value: 'implementation',
268+
code: timeSliceImplementationExample,
269+
language: 'tsx'
270+
}
271+
]}
272+
docsLink="/storybook/?path=/story/chrono"
273+
trigger={
274+
<button className="text-xs flex items-center gap-1.5 bg-zinc-900 hover:bg-zinc-800 border border-zinc-800/80 px-2.5 py-1.5 rounded text-zinc-400 hover:text-zinc-300 transition-colors focus:outline-none focus:ring-2 focus:ring-violet-500/30">
275+
<Code className="h-3.5 w-3.5" />
276+
<span>View code</span>
277+
</button>
278+
}
279+
/>
280+
)}
281+
</ClientOnly>
282+
)}
283+
</ClientOnly>
284+
</div>
285+
286+
{/* Demo container with ample space for dropdown visibility */}
287+
<div className="px-3 sm:px-4 py-4 sm:py-6 flex flex-col items-center justify-center">
288+
<div className="w-full max-w-md relative">
289+
<ClientOnly
290+
load={() =>
291+
import('../../components/time-slice-example')
292+
}
293+
fallback={
294+
<div className="animate-pulse flex items-center justify-center h-12 w-full">
295+
<div className="h-2 bg-zinc-700 rounded w-32"></div>
296+
</div>
297+
}
298+
>
299+
{(ChronoExample) => <ChronoExample />}
300+
</ClientOnly>
301+
</div>
302+
</div>
303+
</div>
304+
</div>
305+
</div>
306+
</div>
307+
</Collapsible.Content>
308+
</Collapsible.Root>
309+
310+
{/* Chrono Component Accordion */}
132311
<Collapsible.Root defaultOpen className="w-full">
133312
<Collapsible.Trigger className="w-full group">
134313
<div className="flex items-center justify-between py-3 px-4 bg-black/40 border border-zinc-800/80 rounded-lg hover:border-zinc-700/80 transition-colors">
@@ -138,10 +317,10 @@ export default function Page() {
138317
</div>
139318
<div className="flex flex-col items-start text-left flex-1">
140319
<h3 className="text-lg sm:text-xl font-semibold text-white group-hover:text-white/90 transition-colors">
141-
TimeSlice
320+
Chrono
142321
</h3>
143322
<p className="text-zinc-400 text-sm sm:text-base leading-relaxed group-hover:text-zinc-300 transition-colors">
144-
A flexible time range picker with built-in intelligence
323+
A time range picker with built-in intelligence
145324
</p>
146325
</div>
147326
</div>
@@ -261,11 +440,11 @@ export default function Page() {
261440
}
262441
fallback={<div />}
263442
>
264-
{(TimeSliceExample) => (
443+
{(ChronoExample) => (
265444
<ComponentShowcaseDialog
266-
title="TimeSlice Component"
267-
description="TimeSlice is a flexible time range picker with natural language support, relative time handling, and keyboard navigation."
268-
demoComponent={TimeSliceExample}
445+
title="Chrono Component"
446+
description="Chrono is a flexible time range picker with natural language support, relative time handling, and keyboard navigation."
447+
demoComponent={ChronoExample}
269448
codeTabs={[
270449
{
271450
label: 'Basic',
@@ -274,13 +453,13 @@ export default function Page() {
274453
language: 'tsx'
275454
},
276455
{
277-
label: 'Implementation',
456+
label: 'Demo',
278457
value: 'implementation',
279458
code: timeSliceImplementationExample,
280459
language: 'tsx'
281460
}
282461
]}
283-
docsLink="/storybook/?path=/story/timeslice"
462+
docsLink="/storybook/?path=/story/chrono"
284463
trigger={
285464
<button className="text-xs flex items-center gap-1.5 bg-zinc-900 hover:bg-zinc-800 border border-zinc-800/80 px-2.5 py-1.5 rounded text-zinc-400 hover:text-zinc-300 transition-colors focus:outline-none focus:ring-2 focus:ring-violet-500/30">
286465
<Code className="h-3.5 w-3.5" />
@@ -307,7 +486,7 @@ export default function Page() {
307486
</div>
308487
}
309488
>
310-
{(TimeSliceExample) => <TimeSliceExample />}
489+
{(ChronoExample) => <ChronoExample />}
311490
</ClientOnly>
312491
</div>
313492
</div>
@@ -489,43 +668,6 @@ export default function Page() {
489668
</div>
490669
</Collapsible.Content>
491670
</Collapsible.Root>
492-
493-
{/* <Collapsible.Root className="w-full">
494-
<Collapsible.Trigger className="w-full group">
495-
<div className="flex items-center justify-between py-3 px-4 bg-black/40 border border-zinc-800/80 rounded-lg hover:border-zinc-700/80 transition-colors">
496-
<div className="flex items-center gap-3 sm:gap-5">
497-
<div className="p-2 sm:p-2.5 rounded-lg bg-gradient-to-br from-emerald-500/20 to-teal-500/10 border border-emerald-500/20 shadow-sm">
498-
<MessageSquare className="h-5 w-5 sm:h-5 sm:w-5 text-emerald-400" />
499-
</div>
500-
<div>
501-
<h3 className="text-lg sm:text-xl font-semibold text-white group-hover:text-white/90 transition-colors">
502-
Future Component
503-
</h3>
504-
<p className="text-zinc-400 text-sm sm:text-base leading-relaxed group-hover:text-zinc-300 transition-colors">
505-
Description of the future component goes here
506-
</p>
507-
</div>
508-
</div>
509-
<div className="h-8 w-8 rounded-full bg-zinc-900/70 border border-zinc-800 flex items-center justify-center group-data-[state=open]:rotate-180 transition-transform duration-300">
510-
<ChevronDown className="h-4 w-4 text-zinc-400 group-hover:text-zinc-300 transition-colors" />
511-
</div>
512-
</div>
513-
</Collapsible.Trigger>
514-
<Collapsible.Content className="overflow-hidden data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up">
515-
<div className="pt-6 pl-5 pr-3">
516-
<div className="py-12 px-8 bg-black/20 rounded-lg border border-zinc-800/50 flex items-center justify-center">
517-
<div className="text-center">
518-
<div className="inline-flex items-center justify-center h-12 w-12 rounded-full bg-emerald-500/10 border border-emerald-500/20 mb-4">
519-
<Sparkles className="h-5 w-5 text-emerald-400" />
520-
</div>
521-
<p className="text-zinc-400 text-sm">
522-
More components coming soon
523-
</p>
524-
</div>
525-
</div>
526-
</div>
527-
</Collapsible.Content>
528-
</Collapsible.Root> */}
529671
</div>
530672
</section>
531673

0 commit comments

Comments
 (0)