feat: add landing page, move calendar app to /calendar route
Create marketing landing page at / with hero, features (spatial, zoom, lunar), how-it-works, ecosystem section, and r-suite footer. Move full calendar app to /calendar. Add rcal.online domain to Traefik labels. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett
parent
a722aa2fa4
commit
0c2e198f26
|
|
@ -18,7 +18,7 @@ services:
|
||||||
- /tmp
|
- /tmp
|
||||||
labels:
|
labels:
|
||||||
- "traefik.enable=true"
|
- "traefik.enable=true"
|
||||||
- "traefik.http.routers.rcal.rule=Host(`rcal.jeffemmett.com`)"
|
- "traefik.http.routers.rcal.rule=Host(`rcal.jeffemmett.com`) || Host(`rcal.online`) || Host(`www.rcal.online`)"
|
||||||
- "traefik.http.routers.rcal.entrypoints=web"
|
- "traefik.http.routers.rcal.entrypoints=web"
|
||||||
- "traefik.http.services.rcal.loadbalancer.server.port=3000"
|
- "traefik.http.services.rcal.loadbalancer.server.port=3000"
|
||||||
networks:
|
networks:
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,170 @@
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useState, useEffect, useCallback } from 'react'
|
||||||
|
import { Calendar as CalendarIcon, MapPin, Clock, ZoomIn, ZoomOut, Link2, Unlink2 } from 'lucide-react'
|
||||||
|
import { TemporalZoomController } from '@/components/calendar'
|
||||||
|
import { CalendarHeader } from '@/components/calendar/CalendarHeader'
|
||||||
|
import { CalendarSidebar } from '@/components/calendar/CalendarSidebar'
|
||||||
|
import { TabLayout } from '@/components/ui/TabLayout'
|
||||||
|
import { TemporalTab } from '@/components/tabs/TemporalTab'
|
||||||
|
import { SpatialTab } from '@/components/tabs/SpatialTab'
|
||||||
|
import { LunarTab } from '@/components/tabs/LunarTab'
|
||||||
|
import { ContextTab } from '@/components/tabs/ContextTab'
|
||||||
|
import { useCalendarStore, useEffectiveSpatialGranularity } from '@/lib/store'
|
||||||
|
import { TemporalGranularity, TEMPORAL_GRANULARITY_LABELS, GRANULARITY_LABELS } from '@/lib/types'
|
||||||
|
import type { TabView } from '@/lib/types'
|
||||||
|
|
||||||
|
export default function Home() {
|
||||||
|
const [sidebarOpen, setSidebarOpen] = useState(true)
|
||||||
|
const [zoomPanelOpen, setZoomPanelOpen] = useState(false)
|
||||||
|
const {
|
||||||
|
temporalGranularity,
|
||||||
|
activeTab,
|
||||||
|
setActiveTab,
|
||||||
|
zoomCoupled,
|
||||||
|
toggleZoomCoupled,
|
||||||
|
zoomIn,
|
||||||
|
zoomOut,
|
||||||
|
} = useCalendarStore()
|
||||||
|
const effectiveSpatial = useEffectiveSpatialGranularity()
|
||||||
|
|
||||||
|
// Keyboard shortcuts
|
||||||
|
const handleKeyDown = useCallback(
|
||||||
|
(e: KeyboardEvent) => {
|
||||||
|
if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return
|
||||||
|
if (e.ctrlKey || e.metaKey || e.altKey) return
|
||||||
|
|
||||||
|
switch (e.key) {
|
||||||
|
case 'l':
|
||||||
|
case 'L':
|
||||||
|
e.preventDefault()
|
||||||
|
toggleZoomCoupled()
|
||||||
|
break
|
||||||
|
// Tab switching: 1-4
|
||||||
|
case '1':
|
||||||
|
e.preventDefault()
|
||||||
|
setActiveTab('temporal')
|
||||||
|
break
|
||||||
|
case '2':
|
||||||
|
e.preventDefault()
|
||||||
|
setActiveTab('spatial')
|
||||||
|
break
|
||||||
|
case '3':
|
||||||
|
e.preventDefault()
|
||||||
|
setActiveTab('lunar')
|
||||||
|
break
|
||||||
|
case '4':
|
||||||
|
e.preventDefault()
|
||||||
|
setActiveTab('context')
|
||||||
|
break
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[toggleZoomCoupled, setActiveTab]
|
||||||
|
)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
window.addEventListener('keydown', handleKeyDown)
|
||||||
|
return () => window.removeEventListener('keydown', handleKeyDown)
|
||||||
|
}, [handleKeyDown])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex h-screen bg-gray-50 dark:bg-gray-900">
|
||||||
|
{/* Sidebar */}
|
||||||
|
{sidebarOpen && (
|
||||||
|
<CalendarSidebar onClose={() => setSidebarOpen(false)} />
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Main content */}
|
||||||
|
<div className="flex-1 flex flex-col overflow-hidden">
|
||||||
|
<CalendarHeader
|
||||||
|
onToggleSidebar={() => setSidebarOpen(!sidebarOpen)}
|
||||||
|
sidebarOpen={sidebarOpen}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Main area with optional zoom panel */}
|
||||||
|
<div className="flex-1 flex overflow-hidden">
|
||||||
|
{/* Tab layout */}
|
||||||
|
<div className="flex-1 overflow-hidden">
|
||||||
|
<TabLayout>
|
||||||
|
{{
|
||||||
|
temporal: <TemporalTab />,
|
||||||
|
spatial: <SpatialTab />,
|
||||||
|
lunar: <LunarTab />,
|
||||||
|
context: <ContextTab />,
|
||||||
|
}}
|
||||||
|
</TabLayout>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Zoom control panel (collapsible) */}
|
||||||
|
{zoomPanelOpen && (
|
||||||
|
<aside className="w-80 border-l border-gray-200 dark:border-gray-700 p-4 overflow-auto bg-white dark:bg-gray-800">
|
||||||
|
<TemporalZoomController showSpatial={true} />
|
||||||
|
</aside>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Footer with calendar info and quick zoom controls */}
|
||||||
|
<footer className="border-t border-gray-200 dark:border-gray-700 px-4 py-2 bg-white dark:bg-gray-800">
|
||||||
|
<div className="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<CalendarIcon className="w-4 h-4" />
|
||||||
|
Gregorian
|
||||||
|
</span>
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<Clock className="w-4 h-4" />
|
||||||
|
{TEMPORAL_GRANULARITY_LABELS[temporalGranularity]}
|
||||||
|
</span>
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<MapPin className="w-4 h-4" />
|
||||||
|
{GRANULARITY_LABELS[effectiveSpatial]}
|
||||||
|
</span>
|
||||||
|
{activeTab === 'spatial' && (
|
||||||
|
<button
|
||||||
|
onClick={toggleZoomCoupled}
|
||||||
|
className={`flex items-center gap-1 px-2 py-0.5 rounded text-xs transition-colors ${
|
||||||
|
zoomCoupled
|
||||||
|
? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30'
|
||||||
|
: 'text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700'
|
||||||
|
}`}
|
||||||
|
title={zoomCoupled ? 'Unlink spatial from temporal (L)' : 'Link spatial to temporal (L)'}
|
||||||
|
>
|
||||||
|
{zoomCoupled ? <Link2 className="w-3 h-3" /> : <Unlink2 className="w-3 h-3" />}
|
||||||
|
{zoomCoupled ? 'Coupled' : 'Independent'}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Quick controls */}
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<button
|
||||||
|
onClick={zoomIn}
|
||||||
|
className="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
|
||||||
|
title="Zoom in (+)"
|
||||||
|
>
|
||||||
|
<ZoomIn className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={zoomOut}
|
||||||
|
className="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
|
||||||
|
title="Zoom out (-)"
|
||||||
|
>
|
||||||
|
<ZoomOut className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setZoomPanelOpen(!zoomPanelOpen)}
|
||||||
|
className={`px-2 py-1 text-xs rounded transition-colors ${
|
||||||
|
zoomPanelOpen
|
||||||
|
? 'bg-blue-500 text-white'
|
||||||
|
: 'hover:bg-gray-100 dark:hover:bg-gray-700'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{zoomPanelOpen ? 'Hide' : 'Zoom Panel'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
342
src/app/page.tsx
342
src/app/page.tsx
|
|
@ -1,170 +1,194 @@
|
||||||
'use client'
|
import Link from 'next/link'
|
||||||
|
|
||||||
import { useState, useEffect, useCallback } from 'react'
|
|
||||||
import { Calendar as CalendarIcon, MapPin, Clock, ZoomIn, ZoomOut, Link2, Unlink2 } from 'lucide-react'
|
|
||||||
import { TemporalZoomController } from '@/components/calendar'
|
|
||||||
import { CalendarHeader } from '@/components/calendar/CalendarHeader'
|
|
||||||
import { CalendarSidebar } from '@/components/calendar/CalendarSidebar'
|
|
||||||
import { TabLayout } from '@/components/ui/TabLayout'
|
|
||||||
import { TemporalTab } from '@/components/tabs/TemporalTab'
|
|
||||||
import { SpatialTab } from '@/components/tabs/SpatialTab'
|
|
||||||
import { LunarTab } from '@/components/tabs/LunarTab'
|
|
||||||
import { ContextTab } from '@/components/tabs/ContextTab'
|
|
||||||
import { useCalendarStore, useEffectiveSpatialGranularity } from '@/lib/store'
|
|
||||||
import { TemporalGranularity, TEMPORAL_GRANULARITY_LABELS, GRANULARITY_LABELS } from '@/lib/types'
|
|
||||||
import type { TabView } from '@/lib/types'
|
|
||||||
|
|
||||||
export default function Home() {
|
|
||||||
const [sidebarOpen, setSidebarOpen] = useState(true)
|
|
||||||
const [zoomPanelOpen, setZoomPanelOpen] = useState(false)
|
|
||||||
const {
|
|
||||||
temporalGranularity,
|
|
||||||
activeTab,
|
|
||||||
setActiveTab,
|
|
||||||
zoomCoupled,
|
|
||||||
toggleZoomCoupled,
|
|
||||||
zoomIn,
|
|
||||||
zoomOut,
|
|
||||||
} = useCalendarStore()
|
|
||||||
const effectiveSpatial = useEffectiveSpatialGranularity()
|
|
||||||
|
|
||||||
// Keyboard shortcuts
|
|
||||||
const handleKeyDown = useCallback(
|
|
||||||
(e: KeyboardEvent) => {
|
|
||||||
if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return
|
|
||||||
if (e.ctrlKey || e.metaKey || e.altKey) return
|
|
||||||
|
|
||||||
switch (e.key) {
|
|
||||||
case 'l':
|
|
||||||
case 'L':
|
|
||||||
e.preventDefault()
|
|
||||||
toggleZoomCoupled()
|
|
||||||
break
|
|
||||||
// Tab switching: 1-4
|
|
||||||
case '1':
|
|
||||||
e.preventDefault()
|
|
||||||
setActiveTab('temporal')
|
|
||||||
break
|
|
||||||
case '2':
|
|
||||||
e.preventDefault()
|
|
||||||
setActiveTab('spatial')
|
|
||||||
break
|
|
||||||
case '3':
|
|
||||||
e.preventDefault()
|
|
||||||
setActiveTab('lunar')
|
|
||||||
break
|
|
||||||
case '4':
|
|
||||||
e.preventDefault()
|
|
||||||
setActiveTab('context')
|
|
||||||
break
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[toggleZoomCoupled, setActiveTab]
|
|
||||||
)
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
window.addEventListener('keydown', handleKeyDown)
|
|
||||||
return () => window.removeEventListener('keydown', handleKeyDown)
|
|
||||||
}, [handleKeyDown])
|
|
||||||
|
|
||||||
|
export default function LandingPage() {
|
||||||
return (
|
return (
|
||||||
<div className="flex h-screen bg-gray-50 dark:bg-gray-900">
|
<div className="min-h-screen bg-gray-950 text-gray-100">
|
||||||
{/* Sidebar */}
|
{/* Nav */}
|
||||||
{sidebarOpen && (
|
<nav className="sticky top-0 z-50 border-b border-gray-800 bg-gray-950/90 backdrop-blur">
|
||||||
<CalendarSidebar onClose={() => setSidebarOpen(false)} />
|
<div className="mx-auto max-w-5xl px-6 py-4 flex items-center justify-between">
|
||||||
)}
|
<Link href="/" className="flex items-center gap-2">
|
||||||
|
<div className="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center text-sm font-bold text-white">
|
||||||
{/* Main content */}
|
rC
|
||||||
<div className="flex-1 flex flex-col overflow-hidden">
|
</div>
|
||||||
<CalendarHeader
|
<span className="text-lg font-semibold">
|
||||||
onToggleSidebar={() => setSidebarOpen(!sidebarOpen)}
|
<span className="text-blue-400">r</span>Cal
|
||||||
sidebarOpen={sidebarOpen}
|
</span>
|
||||||
/>
|
</Link>
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
{/* Main area with optional zoom panel */}
|
<Link
|
||||||
<div className="flex-1 flex overflow-hidden">
|
href="/calendar"
|
||||||
{/* Tab layout */}
|
className="text-sm text-gray-400 hover:text-white transition-colors"
|
||||||
<div className="flex-1 overflow-hidden">
|
>
|
||||||
<TabLayout>
|
Demo
|
||||||
{{
|
</Link>
|
||||||
temporal: <TemporalTab />,
|
<Link
|
||||||
spatial: <SpatialTab />,
|
href="/calendar"
|
||||||
lunar: <LunarTab />,
|
className="text-sm px-4 py-2 bg-blue-600 hover:bg-blue-500 rounded-lg transition-colors font-medium text-white"
|
||||||
context: <ContextTab />,
|
>
|
||||||
}}
|
Create Calendar
|
||||||
</TabLayout>
|
</Link>
|
||||||
|
<a
|
||||||
|
href="https://encryptid.jeffemmett.com"
|
||||||
|
className="text-sm text-gray-400 hover:text-white transition-colors"
|
||||||
|
>
|
||||||
|
Sign In
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Zoom control panel (collapsible) */}
|
|
||||||
{zoomPanelOpen && (
|
|
||||||
<aside className="w-80 border-l border-gray-200 dark:border-gray-700 p-4 overflow-auto bg-white dark:bg-gray-800">
|
|
||||||
<TemporalZoomController showSpatial={true} />
|
|
||||||
</aside>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
{/* Footer with calendar info and quick zoom controls */}
|
{/* Hero */}
|
||||||
<footer className="border-t border-gray-200 dark:border-gray-700 px-4 py-2 bg-white dark:bg-gray-800">
|
<section className="px-6 py-20 text-center">
|
||||||
<div className="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
|
<div className="mx-auto max-w-3xl">
|
||||||
<div className="flex items-center gap-4">
|
<h1 className="text-4xl sm:text-5xl font-bold leading-tight mb-6">
|
||||||
<span className="flex items-center gap-1">
|
Group Calendars,{' '}
|
||||||
<CalendarIcon className="w-4 h-4" />
|
<span className="bg-gradient-to-r from-blue-400 to-blue-600 bg-clip-text text-transparent">
|
||||||
Gregorian
|
Simplified
|
||||||
</span>
|
</span>
|
||||||
<span className="flex items-center gap-1">
|
</h1>
|
||||||
<Clock className="w-4 h-4" />
|
<p className="text-lg text-gray-400 max-w-xl mx-auto mb-10">
|
||||||
{TEMPORAL_GRANULARITY_LABELS[temporalGranularity]}
|
One calendar your whole group can see. No more back-and-forth — just shared context for when and where to meet.
|
||||||
</span>
|
</p>
|
||||||
<span className="flex items-center gap-1">
|
<div className="flex gap-4 justify-center flex-wrap">
|
||||||
<MapPin className="w-4 h-4" />
|
<Link
|
||||||
{GRANULARITY_LABELS[effectiveSpatial]}
|
href="/calendar"
|
||||||
</span>
|
className="px-6 py-3 bg-blue-600 hover:bg-blue-500 rounded-lg font-semibold transition-colors text-white"
|
||||||
{activeTab === 'spatial' && (
|
>
|
||||||
<button
|
Try the Demo
|
||||||
onClick={toggleZoomCoupled}
|
</Link>
|
||||||
className={`flex items-center gap-1 px-2 py-0.5 rounded text-xs transition-colors ${
|
<a
|
||||||
zoomCoupled
|
href="#features"
|
||||||
? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30'
|
className="px-6 py-3 border border-gray-700 hover:border-gray-500 rounded-lg font-medium transition-colors"
|
||||||
: 'text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700'
|
>
|
||||||
}`}
|
Learn More
|
||||||
title={zoomCoupled ? 'Unlink spatial from temporal (L)' : 'Link spatial to temporal (L)'}
|
</a>
|
||||||
>
|
</div>
|
||||||
{zoomCoupled ? <Link2 className="w-3 h-3" /> : <Unlink2 className="w-3 h-3" />}
|
</div>
|
||||||
{zoomCoupled ? 'Coupled' : 'Independent'}
|
</section>
|
||||||
</button>
|
|
||||||
)}
|
{/* Features */}
|
||||||
|
<section id="features" className="px-6 py-16 border-t border-gray-800">
|
||||||
|
<div className="mx-auto max-w-5xl">
|
||||||
|
<h2 className="text-2xl font-bold text-center mb-12">
|
||||||
|
A calendar that thinks in space and time
|
||||||
|
</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
|
<div className="bg-gray-900 border border-gray-800 rounded-xl p-6">
|
||||||
|
<div className="w-10 h-10 rounded-lg bg-blue-600/10 border border-blue-600/20 flex items-center justify-center text-xl mb-4">
|
||||||
|
🗺
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-semibold mb-2">Where + When, Together</h3>
|
||||||
|
<p className="text-sm text-gray-400 leading-relaxed">
|
||||||
|
See events on a calendar and a map side by side. Plan meetups knowing where everyone is, not just when.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="bg-gray-900 border border-gray-800 rounded-xl p-6">
|
||||||
{/* Quick controls */}
|
<div className="w-10 h-10 rounded-lg bg-blue-600/10 border border-blue-600/20 flex items-center justify-center text-xl mb-4">
|
||||||
<div className="flex items-center gap-2">
|
🔭
|
||||||
<button
|
</div>
|
||||||
onClick={zoomIn}
|
<h3 className="text-lg font-semibold mb-2">Zoom From Hours to Eras</h3>
|
||||||
className="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
|
<p className="text-sm text-gray-400 leading-relaxed">
|
||||||
title="Zoom in (+)"
|
Ten levels of time. See today's meetings, zoom out to the whole season, or plan years ahead — all in one view.
|
||||||
>
|
</p>
|
||||||
<ZoomIn className="w-4 h-4" />
|
</div>
|
||||||
</button>
|
<div className="bg-gray-900 border border-gray-800 rounded-xl p-6">
|
||||||
<button
|
<div className="w-10 h-10 rounded-lg bg-blue-600/10 border border-blue-600/20 flex items-center justify-center text-xl mb-4">
|
||||||
onClick={zoomOut}
|
🌙
|
||||||
className="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
|
</div>
|
||||||
title="Zoom out (-)"
|
<h3 className="text-lg font-semibold mb-2">Moon & Natural Cycles</h3>
|
||||||
>
|
<p className="text-sm text-gray-400 leading-relaxed">
|
||||||
<ZoomOut className="w-4 h-4" />
|
Built-in lunar phase overlay with eclipse detection. Plan around full moons, new moons, and solstices.
|
||||||
</button>
|
</p>
|
||||||
<button
|
|
||||||
onClick={() => setZoomPanelOpen(!zoomPanelOpen)}
|
|
||||||
className={`px-2 py-1 text-xs rounded transition-colors ${
|
|
||||||
zoomPanelOpen
|
|
||||||
? 'bg-blue-500 text-white'
|
|
||||||
: 'hover:bg-gray-100 dark:hover:bg-gray-700'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{zoomPanelOpen ? 'Hide' : 'Zoom Panel'}
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
|
|
||||||
|
{/* How It Works */}
|
||||||
|
<section className="px-6 py-16 border-t border-gray-800">
|
||||||
|
<div className="mx-auto max-w-3xl">
|
||||||
|
<h2 className="text-2xl font-bold text-center mb-12">How It Works</h2>
|
||||||
|
<div className="space-y-8">
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center text-sm font-bold text-white">
|
||||||
|
1
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold mb-1">Add your events</h3>
|
||||||
|
<p className="text-sm text-gray-400">
|
||||||
|
Create events with a time and a place. Or import from an existing calendar source.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center text-sm font-bold text-white">
|
||||||
|
2
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold mb-1">Share with your group</h3>
|
||||||
|
<p className="text-sm text-gray-400">
|
||||||
|
Everyone sees the same calendar. Same context, same view.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center text-sm font-bold text-white">
|
||||||
|
3
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold mb-1">Find the right zoom level</h3>
|
||||||
|
<p className="text-sm text-gray-400">
|
||||||
|
From a single hour to a decade. The calendar adapts to the scale you need.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Ecosystem */}
|
||||||
|
<section className="px-6 py-16 border-t border-gray-800">
|
||||||
|
<div className="mx-auto max-w-3xl">
|
||||||
|
<div className="bg-gray-900 border border-gray-800 rounded-xl p-8 text-center">
|
||||||
|
<h2 className="text-xl font-bold mb-3">Works with the r* ecosystem</h2>
|
||||||
|
<p className="text-gray-400 mb-6 max-w-md mx-auto">
|
||||||
|
rCal embeds into rTrips, rMaps, rNetwork, and more. Any r-tool can display a calendar view through the context API.
|
||||||
|
</p>
|
||||||
|
<Link
|
||||||
|
href="/calendar"
|
||||||
|
className="inline-block px-6 py-3 bg-blue-600 hover:bg-blue-500 rounded-lg font-semibold transition-colors text-white"
|
||||||
|
>
|
||||||
|
Open rCal
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<footer className="border-t border-gray-800 px-6 py-10">
|
||||||
|
<div className="mx-auto max-w-5xl">
|
||||||
|
<div className="flex flex-wrap items-center justify-center gap-x-4 gap-y-2 mb-4">
|
||||||
|
<span className="text-sm text-gray-500 font-medium">r* Ecosystem</span>
|
||||||
|
<a href="https://rspace.online" className="text-sm text-gray-500 hover:text-gray-300 transition-colors">rSpace</a>
|
||||||
|
<a href="https://rmaps.online" className="text-sm text-gray-500 hover:text-gray-300 transition-colors">rMaps</a>
|
||||||
|
<a href="https://rnotes.online" className="text-sm text-gray-500 hover:text-gray-300 transition-colors">rNotes</a>
|
||||||
|
<a href="https://rvote.online" className="text-sm text-gray-500 hover:text-gray-300 transition-colors">rVote</a>
|
||||||
|
<a href="https://rfunds.online" className="text-sm text-gray-500 hover:text-gray-300 transition-colors">rFunds</a>
|
||||||
|
<a href="https://rtrips.online" className="text-sm text-gray-500 hover:text-gray-300 transition-colors">rTrips</a>
|
||||||
|
<a href="https://rcart.online" className="text-sm text-gray-500 hover:text-gray-300 transition-colors">rCart</a>
|
||||||
|
<a href="https://rwallet.online" className="text-sm text-gray-500 hover:text-gray-300 transition-colors">rWallet</a>
|
||||||
|
<a href="https://rfiles.online" className="text-sm text-gray-500 hover:text-gray-300 transition-colors">rFiles</a>
|
||||||
|
<a href="https://rtube.online" className="text-sm text-gray-500 hover:text-gray-300 transition-colors">rTube</a>
|
||||||
|
<a href="https://rcal.online" className="text-sm text-gray-500 hover:text-gray-300 transition-colors">rCal</a>
|
||||||
|
<a href="https://rnetwork.online" className="text-sm text-gray-500 hover:text-gray-300 transition-colors">rNetwork</a>
|
||||||
|
<a href="https://rinbox.online" className="text-sm text-gray-500 hover:text-gray-300 transition-colors">rInbox</a>
|
||||||
|
<a href="https://rstack.online" className="text-sm text-gray-500 hover:text-gray-300 transition-colors">rStack</a>
|
||||||
|
</div>
|
||||||
|
<p className="text-center text-xs text-gray-600">
|
||||||
|
Part of the r* ecosystem — collaborative tools for communities.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue