refactor: restore project from v6 to v10
Update project files and assets to match v6 state. #VERCEL_SKIP Co-authored-by: Jeff Emmett <46964190+Jeff-Emmett@users.noreply.github.com>
This commit is contained in:
v0
parent
485eb909c1
commit
f50d24732a
185
app/globals.css
185
app/globals.css
|
|
@ -4,109 +4,65 @@
|
|||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
:root {
|
||||
/* Earthy warm cream background */
|
||||
--background: oklch(0.95 0.02 70);
|
||||
--foreground: oklch(0.25 0.03 60);
|
||||
/* Deep space cosmic color palette */
|
||||
--background: oklch(0.12 0.03 270);
|
||||
--foreground: oklch(0.95 0.02 180);
|
||||
|
||||
/* Card colors - slightly lighter cream */
|
||||
--card: oklch(0.98 0.015 70);
|
||||
--card-foreground: oklch(0.25 0.03 60);
|
||||
--card: oklch(0.18 0.04 260);
|
||||
--card-foreground: oklch(0.95 0.02 180);
|
||||
|
||||
/* Popover */
|
||||
--popover: oklch(0.98 0.015 70);
|
||||
--popover-foreground: oklch(0.25 0.03 60);
|
||||
--popover: oklch(0.18 0.04 260);
|
||||
--popover-foreground: oklch(0.95 0.02 180);
|
||||
|
||||
/* Deep forest green as primary */
|
||||
--primary: oklch(0.35 0.08 155);
|
||||
--primary-foreground: oklch(0.98 0.015 70);
|
||||
/* Vibrant cyan-blue for space-time portals */
|
||||
--primary: oklch(0.65 0.25 240);
|
||||
--primary-foreground: oklch(0.98 0.01 180);
|
||||
|
||||
/* Soft sage secondary */
|
||||
--secondary: oklch(0.75 0.05 130);
|
||||
--secondary-foreground: oklch(0.25 0.03 60);
|
||||
/* Purple-pink for dimensional shifts */
|
||||
--secondary: oklch(0.55 0.22 310);
|
||||
--secondary-foreground: oklch(0.98 0.01 180);
|
||||
|
||||
/* Muted earth tones */
|
||||
--muted: oklch(0.88 0.02 70);
|
||||
--muted-foreground: oklch(0.5 0.02 60);
|
||||
--muted: oklch(0.25 0.04 270);
|
||||
--muted-foreground: oklch(0.65 0.02 180);
|
||||
|
||||
/* Warm terracotta accent */
|
||||
--accent: oklch(0.65 0.15 35);
|
||||
--accent-foreground: oklch(0.98 0.015 70);
|
||||
/* Electric magenta accent for singularities */
|
||||
--accent: oklch(0.7 0.28 330);
|
||||
--accent-foreground: oklch(0.98 0.01 180);
|
||||
|
||||
--destructive: oklch(0.55 0.2 25);
|
||||
--destructive-foreground: oklch(0.98 0.015 70);
|
||||
--destructive: oklch(0.55 0.25 25);
|
||||
--destructive-foreground: oklch(0.98 0.01 180);
|
||||
|
||||
--border: oklch(0.85 0.02 70);
|
||||
--input: oklch(0.85 0.02 70);
|
||||
--ring: oklch(0.35 0.08 155);
|
||||
--border: oklch(0.35 0.05 260);
|
||||
--input: oklch(0.25 0.04 270);
|
||||
--ring: oklch(0.65 0.25 240);
|
||||
|
||||
/* Chart colors - earthy palette */
|
||||
--chart-1: oklch(0.5 0.12 155);
|
||||
--chart-2: oklch(0.65 0.15 35);
|
||||
--chart-3: oklch(0.6 0.1 120);
|
||||
--chart-4: oklch(0.55 0.12 80);
|
||||
--chart-5: oklch(0.45 0.1 180);
|
||||
/* Chart colors - cosmic palette */
|
||||
--chart-1: oklch(0.65 0.25 240);
|
||||
--chart-2: oklch(0.7 0.28 330);
|
||||
--chart-3: oklch(0.6 0.22 280);
|
||||
--chart-4: oklch(0.7 0.2 200);
|
||||
--chart-5: oklch(0.65 0.24 350);
|
||||
|
||||
--radius: 0.5rem;
|
||||
--radius: 1rem;
|
||||
|
||||
/* Sidebar */
|
||||
--sidebar: oklch(0.98 0.015 70);
|
||||
--sidebar-foreground: oklch(0.25 0.03 60);
|
||||
--sidebar-primary: oklch(0.35 0.08 155);
|
||||
--sidebar-primary-foreground: oklch(0.98 0.015 70);
|
||||
--sidebar-accent: oklch(0.88 0.02 70);
|
||||
--sidebar-accent-foreground: oklch(0.25 0.03 60);
|
||||
--sidebar-border: oklch(0.85 0.02 70);
|
||||
--sidebar-ring: oklch(0.35 0.08 155);
|
||||
--sidebar: oklch(0.18 0.04 260);
|
||||
--sidebar-foreground: oklch(0.95 0.02 180);
|
||||
--sidebar-primary: oklch(0.65 0.25 240);
|
||||
--sidebar-primary-foreground: oklch(0.98 0.01 180);
|
||||
--sidebar-accent: oklch(0.25 0.04 270);
|
||||
--sidebar-accent-foreground: oklch(0.95 0.02 180);
|
||||
--sidebar-border: oklch(0.35 0.05 260);
|
||||
--sidebar-ring: oklch(0.65 0.25 240);
|
||||
}
|
||||
|
||||
.dark {
|
||||
/* Deep night background */
|
||||
--background: oklch(0.18 0.02 240);
|
||||
--foreground: oklch(0.95 0.015 70);
|
||||
/* Already dark - enhanced with more vibrant accents */
|
||||
--background: oklch(0.08 0.04 270);
|
||||
--foreground: oklch(0.98 0.01 180);
|
||||
|
||||
--card: oklch(0.22 0.02 240);
|
||||
--card-foreground: oklch(0.95 0.015 70);
|
||||
|
||||
--popover: oklch(0.22 0.02 240);
|
||||
--popover-foreground: oklch(0.95 0.015 70);
|
||||
|
||||
/* Lighter forest green for dark mode */
|
||||
--primary: oklch(0.6 0.12 155);
|
||||
--primary-foreground: oklch(0.18 0.02 240);
|
||||
|
||||
--secondary: oklch(0.35 0.04 155);
|
||||
--secondary-foreground: oklch(0.95 0.015 70);
|
||||
|
||||
--muted: oklch(0.28 0.02 240);
|
||||
--muted-foreground: oklch(0.65 0.02 70);
|
||||
|
||||
/* Warm glow accent */
|
||||
--accent: oklch(0.7 0.15 45);
|
||||
--accent-foreground: oklch(0.18 0.02 240);
|
||||
|
||||
--destructive: oklch(0.6 0.22 25);
|
||||
--destructive-foreground: oklch(0.95 0.015 70);
|
||||
|
||||
--border: oklch(0.32 0.02 240);
|
||||
--input: oklch(0.32 0.02 240);
|
||||
--ring: oklch(0.6 0.12 155);
|
||||
|
||||
/* Chart colors - dark mode */
|
||||
--chart-1: oklch(0.6 0.15 155);
|
||||
--chart-2: oklch(0.7 0.18 40);
|
||||
--chart-3: oklch(0.65 0.12 130);
|
||||
--chart-4: oklch(0.62 0.14 90);
|
||||
--chart-5: oklch(0.55 0.12 190);
|
||||
|
||||
/* Sidebar dark */
|
||||
--sidebar: oklch(0.22 0.02 240);
|
||||
--sidebar-foreground: oklch(0.95 0.015 70);
|
||||
--sidebar-primary: oklch(0.6 0.12 155);
|
||||
--sidebar-primary-foreground: oklch(0.18 0.02 240);
|
||||
--sidebar-accent: oklch(0.28 0.02 240);
|
||||
--sidebar-accent-foreground: oklch(0.95 0.015 70);
|
||||
--sidebar-border: oklch(0.32 0.02 240);
|
||||
--sidebar-ring: oklch(0.6 0.12 155);
|
||||
--primary: oklch(0.7 0.28 240);
|
||||
--accent: oklch(0.75 0.3 330);
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
|
|
@ -156,6 +112,8 @@
|
|||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
/* Add cursor for space-time distortion tracking */
|
||||
cursor: none;
|
||||
}
|
||||
|
||||
h1,
|
||||
|
|
@ -171,3 +129,56 @@
|
|||
@apply text-pretty;
|
||||
}
|
||||
}
|
||||
|
||||
/* Space-time warp animations */
|
||||
@keyframes warp-pulse {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.2);
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate-3d {
|
||||
0% {
|
||||
transform: rotateX(0deg) rotateY(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotateX(360deg) rotateY(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float-drift {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0px) translateX(0px);
|
||||
}
|
||||
25% {
|
||||
transform: translateY(-20px) translateX(10px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(0px) translateX(20px);
|
||||
}
|
||||
75% {
|
||||
transform: translateY(20px) translateX(10px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ripple {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: scale(4);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.warp-element {
|
||||
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,10 +6,16 @@ import { IndigenousWisdomSection } from "@/components/indigenous-wisdom-section"
|
|||
import { CalendarTranslator } from "@/components/calendar-translator"
|
||||
import { AlternativeTimekeeping } from "@/components/alternative-timekeeping"
|
||||
import { Footer } from "@/components/footer"
|
||||
import { SpaceTimeBackground } from "@/components/space-time-background"
|
||||
import { CursorWarp } from "@/components/cursor-warp"
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<main className="min-h-screen">
|
||||
<main className="min-h-screen relative">
|
||||
<SpaceTimeBackground />
|
||||
<CursorWarp />
|
||||
|
||||
<div className="relative z-10">
|
||||
<Navigation />
|
||||
<Hero />
|
||||
<TimeSystemsSection />
|
||||
|
|
@ -18,6 +24,7 @@ export default function Page() {
|
|||
<CalendarTranslator />
|
||||
<AlternativeTimekeeping />
|
||||
<Footer />
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,33 @@
|
|||
"use client"
|
||||
|
||||
import { Card } from "@/components/ui/card"
|
||||
import { Sunrise, Wind, Leaf, Waves } from "lucide-react"
|
||||
import { useRef, useEffect } from "react"
|
||||
|
||||
export function AlternativeTimekeeping() {
|
||||
const methodRefs = useRef<(HTMLDivElement | null)[]>([])
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry, index) => {
|
||||
if (entry.isIntersecting) {
|
||||
setTimeout(() => {
|
||||
entry.target.classList.add("animate-fade-in")
|
||||
}, index * 150)
|
||||
}
|
||||
})
|
||||
},
|
||||
{ threshold: 0.1 },
|
||||
)
|
||||
|
||||
methodRefs.current.forEach((ref) => {
|
||||
if (ref) observer.observe(ref)
|
||||
})
|
||||
|
||||
return () => observer.disconnect()
|
||||
}, [])
|
||||
|
||||
const methods = [
|
||||
{
|
||||
icon: Sunrise,
|
||||
|
|
@ -51,9 +77,24 @@ export function AlternativeTimekeeping() {
|
|||
]
|
||||
|
||||
return (
|
||||
<section id="alternatives" className="py-20 lg:py-32">
|
||||
<div className="container px-4 lg:px-8">
|
||||
<div className="max-w-3xl mx-auto text-center mb-16">
|
||||
<section id="alternatives" className="py-20 lg:py-32 relative overflow-hidden">
|
||||
<div className="absolute inset-0 pointer-events-none opacity-5">
|
||||
<svg className="w-full h-full" viewBox="0 0 1000 1000" preserveAspectRatio="none">
|
||||
<path
|
||||
d="M0,500 Q250,400 500,500 T1000,500 L1000,1000 L0,1000 Z"
|
||||
fill="currentColor"
|
||||
className="text-primary"
|
||||
/>
|
||||
<path
|
||||
d="M0,600 Q250,500 500,600 T1000,600 L1000,1000 L0,1000 Z"
|
||||
fill="currentColor"
|
||||
className="text-accent"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="container px-4 lg:px-8 relative z-10">
|
||||
<div className="max-w-3xl mx-auto text-center mb-16 warp-element">
|
||||
<h2 className="font-serif text-4xl lg:text-5xl font-bold mb-6 text-foreground">
|
||||
Natural Time-Keeping Methods
|
||||
</h2>
|
||||
|
|
@ -66,9 +107,13 @@ export function AlternativeTimekeeping() {
|
|||
{methods.map((method, index) => {
|
||||
const Icon = method.icon
|
||||
return (
|
||||
<Card key={index} className="p-8">
|
||||
<Card
|
||||
key={index}
|
||||
ref={(el) => (methodRefs.current[index] = el)}
|
||||
className="p-8 opacity-0 warp-element hover:shadow-xl hover:shadow-primary/20 transition-all duration-300 border-primary/10"
|
||||
>
|
||||
<div className="flex items-start gap-4 mb-6">
|
||||
<div className="p-3 rounded-lg bg-primary/10 shrink-0">
|
||||
<div className="p-3 rounded-lg bg-gradient-to-br from-primary/10 to-accent/10 shrink-0">
|
||||
<Icon className="h-7 w-7 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -89,7 +134,7 @@ export function AlternativeTimekeeping() {
|
|||
})}
|
||||
</div>
|
||||
|
||||
<Card className="p-8 lg:p-12 bg-gradient-to-br from-primary/10 to-accent/10 max-w-4xl mx-auto">
|
||||
<Card className="p-8 lg:p-12 bg-gradient-to-br from-primary/10 via-card to-accent/10 max-w-4xl mx-auto warp-element hover:shadow-2xl hover:shadow-primary/30 transition-all duration-500 border-2 border-primary/20">
|
||||
<h3 className="font-serif text-3xl font-bold mb-6 text-center text-foreground">
|
||||
The Future: Less Clock, More Life
|
||||
</h3>
|
||||
|
|
@ -104,7 +149,7 @@ export function AlternativeTimekeeping() {
|
|||
of years. Modern neuroscience confirms what they always knew: our bodies thrive on natural rhythms, not
|
||||
rigid schedules.
|
||||
</p>
|
||||
<p className="text-lg font-semibold text-primary">
|
||||
<p className="text-lg font-semibold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
|
||||
The path forward isn't to reject all structure, but to choose structure that serves life rather than
|
||||
productivity. To use less Chronos and more Kairos. To decolonize time itself.
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -86,16 +86,20 @@ export function CalendarTranslator() {
|
|||
}
|
||||
|
||||
return (
|
||||
<section id="translator" className="py-20 lg:py-32 bg-muted/30">
|
||||
<div className="container px-4 lg:px-8">
|
||||
<div className="max-w-3xl mx-auto text-center mb-12">
|
||||
<section id="translator" className="py-20 lg:py-32 bg-muted/30 relative overflow-hidden">
|
||||
<div className="absolute inset-0 pointer-events-none opacity-20">
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-gradient-radial from-primary/30 via-accent/20 to-transparent rounded-full blur-3xl animate-[warp-pulse_4s_ease-in-out_infinite]" />
|
||||
</div>
|
||||
|
||||
<div className="container px-4 lg:px-8 relative z-10">
|
||||
<div className="max-w-3xl mx-auto text-center mb-12 warp-element">
|
||||
<h2 className="font-serif text-4xl lg:text-5xl font-bold mb-6 text-foreground">Calendar Translator</h2>
|
||||
<p className="text-lg text-muted-foreground leading-relaxed">
|
||||
Convert any Gregorian calendar date to the 13-moon lunar calendar.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card className="max-w-2xl mx-auto p-8 lg:p-12">
|
||||
<Card className="max-w-2xl mx-auto p-8 lg:p-12 warp-element hover:shadow-2xl hover:shadow-primary/30 transition-all duration-500 border-2 border-primary/20 bg-gradient-to-br from-card via-primary/5 to-card">
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="gregorian-date" className="text-base">
|
||||
|
|
@ -109,7 +113,7 @@ export function CalendarTranslator() {
|
|||
onChange={(e) => setGregorianDate(e.target.value)}
|
||||
className="flex-1"
|
||||
/>
|
||||
<Button onClick={handleTodayClick} variant="outline">
|
||||
<Button onClick={handleTodayClick} variant="outline" className="warp-element bg-transparent">
|
||||
Today
|
||||
</Button>
|
||||
</div>
|
||||
|
|
@ -117,7 +121,7 @@ export function CalendarTranslator() {
|
|||
|
||||
<Button
|
||||
onClick={handleConvert}
|
||||
className="w-full bg-primary text-primary-foreground hover:bg-primary/90"
|
||||
className="w-full bg-gradient-to-r from-primary to-accent hover:shadow-lg hover:shadow-primary/50 transition-all warp-element"
|
||||
size="lg"
|
||||
disabled={!gregorianDate}
|
||||
>
|
||||
|
|
@ -127,13 +131,15 @@ export function CalendarTranslator() {
|
|||
{lunarDate && (
|
||||
<div className="pt-6 border-t border-border">
|
||||
<div className="flex items-center justify-center gap-3 mb-6">
|
||||
<Moon className="h-8 w-8 text-primary" />
|
||||
<Moon className="h-8 w-8 text-primary animate-pulse" />
|
||||
<h3 className="font-serif text-2xl font-bold text-foreground">13-Moon Date</h3>
|
||||
</div>
|
||||
|
||||
{lunarDate.moonName === "Day Out of Time" ? (
|
||||
<div className="text-center space-y-4 p-8 bg-accent/10 rounded-lg">
|
||||
<p className="text-3xl font-bold text-accent">Day Out of Time</p>
|
||||
<div className="text-center space-y-4 p-8 bg-gradient-to-br from-accent/20 to-primary/20 rounded-lg border-2 border-accent/30 warp-element">
|
||||
<p className="text-3xl font-bold bg-gradient-to-r from-accent to-primary bg-clip-text text-transparent">
|
||||
Day Out of Time
|
||||
</p>
|
||||
<p className="text-foreground/80">
|
||||
A day for forgiveness, celebration, and preparation for the new year. This day (July 25) exists
|
||||
outside the normal calendar cycle.
|
||||
|
|
@ -141,13 +147,13 @@ export function CalendarTranslator() {
|
|||
</div>
|
||||
) : (
|
||||
<div className="grid sm:grid-cols-2 gap-6">
|
||||
<div className="space-y-2 p-6 bg-primary/5 rounded-lg">
|
||||
<div className="space-y-2 p-6 bg-gradient-to-br from-primary/10 to-primary/5 rounded-lg warp-element hover:shadow-lg hover:shadow-primary/20 transition-all">
|
||||
<p className="text-sm text-muted-foreground uppercase tracking-wide">Moon</p>
|
||||
<p className="text-3xl font-bold text-primary">{lunarDate.moon}</p>
|
||||
<p className="text-lg text-foreground font-serif">{lunarDate.moonName}</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 p-6 bg-secondary/20 rounded-lg">
|
||||
<div className="space-y-2 p-6 bg-gradient-to-br from-secondary/20 to-accent/10 rounded-lg warp-element hover:shadow-lg hover:shadow-accent/20 transition-all">
|
||||
<p className="text-sm text-muted-foreground uppercase tracking-wide">Day</p>
|
||||
<p className="text-3xl font-bold text-primary">{lunarDate.day}</p>
|
||||
<p className="text-lg text-foreground font-serif">{lunarDate.dayOfWeek}</p>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,142 @@
|
|||
"use client"
|
||||
|
||||
import { useEffect, useRef, useState } from "react"
|
||||
|
||||
export function CursorWarp() {
|
||||
const cursorRef = useRef<HTMLDivElement>(null)
|
||||
const trailRef = useRef<HTMLDivElement>(null)
|
||||
const [mousePos, setMousePos] = useState({ x: 0, y: 0 })
|
||||
const [isMoving, setIsMoving] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
let timeout: NodeJS.Timeout
|
||||
|
||||
const handleMouseMove = (e: MouseEvent) => {
|
||||
setMousePos({ x: e.clientX, y: e.clientY })
|
||||
setIsMoving(true)
|
||||
|
||||
const elements = document.querySelectorAll(".warp-element")
|
||||
elements.forEach((el) => {
|
||||
const rect = el.getBoundingClientRect()
|
||||
const centerX = rect.left + rect.width / 2
|
||||
const centerY = rect.top + rect.height / 2
|
||||
|
||||
const dx = e.clientX - centerX
|
||||
const dy = e.clientY - centerY
|
||||
const distance = Math.sqrt(dx * dx + dy * dy)
|
||||
|
||||
// Black hole effect with stronger pull and rotation
|
||||
if (distance < 300) {
|
||||
const strength = Math.pow((300 - distance) / 300, 2) // Quadratic falloff for stronger pull
|
||||
|
||||
// Pull toward cursor (negative direction)
|
||||
const pullX = -(dx / distance) * strength * 40
|
||||
const pullY = -(dy / distance) * strength * 40
|
||||
|
||||
// Calculate angle for rotation around cursor
|
||||
const angle = Math.atan2(dy, dx)
|
||||
const rotationStrength = strength * 15 // Degrees of twist
|
||||
|
||||
// Perpendicular vector for tangential twist
|
||||
const twistX = -Math.sin(angle) * strength * 15
|
||||
const twistY = Math.cos(angle) * strength * 15
|
||||
|
||||
// Combine pull + twist + rotation
|
||||
const totalX = pullX + twistX
|
||||
const totalY = pullY + twistY
|
||||
|
||||
// Scale down as it gets pulled in (singularity effect)
|
||||
const scale = 1 - strength * 0.3
|
||||
;(el as HTMLElement).style.transform =
|
||||
`translate(${totalX}px, ${totalY}px) scale(${scale}) rotate(${rotationStrength}deg)`
|
||||
;(el as HTMLElement).style.filter = `blur(${strength * 2}px) brightness(${1 - strength * 0.3})`
|
||||
} else {
|
||||
;(el as HTMLElement).style.transform = ""
|
||||
;(el as HTMLElement).style.filter = ""
|
||||
}
|
||||
})
|
||||
|
||||
clearTimeout(timeout)
|
||||
timeout = setTimeout(() => setIsMoving(false), 100)
|
||||
}
|
||||
|
||||
window.addEventListener("mousemove", handleMouseMove)
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("mousemove", handleMouseMove)
|
||||
clearTimeout(timeout)
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Custom cursor - black hole singularity */}
|
||||
<div
|
||||
ref={cursorRef}
|
||||
className="fixed pointer-events-none z-50 mix-blend-difference"
|
||||
style={{
|
||||
left: `${mousePos.x}px`,
|
||||
top: `${mousePos.y}px`,
|
||||
transform: "translate(-50%, -50%)",
|
||||
}}
|
||||
>
|
||||
<div className="relative">
|
||||
<div className="w-3 h-3 bg-black border-2 border-white rounded-full animate-pulse" />
|
||||
|
||||
{/* Accretion disk effect */}
|
||||
<div className="absolute inset-0 -translate-x-1/2 -translate-y-1/2">
|
||||
<div
|
||||
className="w-16 h-16 border border-white/30 rounded-full animate-spin"
|
||||
style={{ animationDuration: "1s" }}
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute inset-0 -translate-x-1/2 -translate-y-1/2">
|
||||
<div
|
||||
className="w-24 h-24 border border-cyan-400/20 rounded-full animate-spin"
|
||||
style={{ animationDuration: "1.5s", animationDirection: "reverse" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Orbiting matter being pulled in */}
|
||||
<div className="absolute inset-0 animate-spin" style={{ animationDuration: "0.8s" }}>
|
||||
<div className="absolute top-1/2 left-1/2 w-1.5 h-1.5 bg-cyan-400 rounded-full -translate-x-1/2 -translate-y-10 blur-sm" />
|
||||
</div>
|
||||
<div
|
||||
className="absolute inset-0 animate-spin"
|
||||
style={{ animationDuration: "1.2s", animationDirection: "reverse" }}
|
||||
>
|
||||
<div className="absolute top-1/2 left-1/2 w-1 h-1 bg-magenta-400 rounded-full -translate-x-1/2 -translate-y-14 blur-sm" />
|
||||
</div>
|
||||
|
||||
{/* Gravitational wave ripples on movement */}
|
||||
{isMoving && (
|
||||
<>
|
||||
<div className="absolute inset-0 -translate-x-1/2 -translate-y-1/2">
|
||||
<div className="w-32 h-32 border-2 border-primary/40 rounded-full animate-[ripple_0.8s_ease-out]" />
|
||||
</div>
|
||||
<div className="absolute inset-0 -translate-x-1/2 -translate-y-1/2">
|
||||
<div
|
||||
className="w-40 h-40 border border-accent/30 rounded-full animate-[ripple_1s_ease-out]"
|
||||
style={{ animationDelay: "0.1s" }}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
ref={trailRef}
|
||||
className="fixed pointer-events-none z-40"
|
||||
style={{
|
||||
left: `${mousePos.x}px`,
|
||||
top: `${mousePos.y}px`,
|
||||
transform: "translate(-50%, -50%)",
|
||||
transition: "all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)",
|
||||
}}
|
||||
>
|
||||
<div className="w-12 h-12 bg-gradient-radial from-primary/30 via-accent/20 to-transparent rounded-full blur-2xl animate-pulse" />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -17,7 +17,7 @@ export function Footer() {
|
|||
</div>
|
||||
<div className="pt-6 border-t border-border">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{new Date().getFullYear()} • Time is not linear, it is cyclical and sacred
|
||||
{new Date().getFullYear()} • Time is not linear, it is fractal and sacred
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,36 +1,84 @@
|
|||
"use client"
|
||||
|
||||
import { ArrowDown } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { useEffect, useRef } from "react"
|
||||
|
||||
export function Hero() {
|
||||
const titleRef = useRef<HTMLHeadingElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const handleMouseMove = (e: MouseEvent) => {
|
||||
if (!titleRef.current) return
|
||||
|
||||
const rect = titleRef.current.getBoundingClientRect()
|
||||
const x = (e.clientX - rect.left - rect.width / 2) / rect.width
|
||||
const y = (e.clientY - rect.top - rect.height / 2) / rect.height
|
||||
|
||||
titleRef.current.style.transform = `
|
||||
perspective(1000px)
|
||||
rotateY(${x * 10}deg)
|
||||
rotateX(${-y * 10}deg)
|
||||
`
|
||||
}
|
||||
|
||||
window.addEventListener("mousemove", handleMouseMove)
|
||||
return () => window.removeEventListener("mousemove", handleMouseMove)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<section className="relative min-h-screen flex items-center justify-center overflow-hidden">
|
||||
{/* Background Image */}
|
||||
<div className="absolute inset-0 z-0">
|
||||
<img src="/moon-phases-over-natural-landscape-with-stars.jpg" alt="Moon phases" className="w-full h-full object-cover opacity-20" />
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-background/50 via-background/80 to-background" />
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-primary/20 via-background to-accent/20" />
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(120,119,198,0.1),transparent_50%)]" />
|
||||
|
||||
{/* Floating infinity symbols */}
|
||||
<div className="absolute top-1/4 left-1/4 text-9xl text-primary/10 animate-[float-drift_8s_ease-in-out_infinite]">
|
||||
∞
|
||||
</div>
|
||||
<div className="absolute bottom-1/4 right-1/4 text-9xl text-accent/10 animate-[float-drift_10s_ease-in-out_infinite] animation-delay-2000">
|
||||
∞
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container relative z-10 px-4 lg:px-8 text-center">
|
||||
<div className="max-w-4xl mx-auto space-y-8">
|
||||
<h1 className="font-serif text-5xl md:text-6xl lg:text-7xl font-bold text-foreground leading-tight">
|
||||
<h1
|
||||
ref={titleRef}
|
||||
className="font-serif text-5xl md:text-6xl lg:text-7xl font-bold text-foreground leading-tight transition-transform duration-200 ease-out"
|
||||
style={{ transformStyle: "preserve-3d" }}
|
||||
>
|
||||
<span className="inline-block bg-gradient-to-r from-primary via-accent to-secondary bg-clip-text text-transparent">
|
||||
Decolonize Time
|
||||
</span>
|
||||
</h1>
|
||||
<p className="text-xl md:text-2xl text-muted-foreground max-w-2xl mx-auto leading-relaxed">
|
||||
Reclaiming natural rhythms beyond the imposed 12-60 frequency. Reconnect with the 13-20 lunar cycles that
|
||||
align body and mind with Earth's flow.
|
||||
|
||||
<p className="text-xl md:text-2xl text-muted-foreground max-w-2xl mx-auto leading-relaxed warp-element">
|
||||
Breaking free from the imposed 12-60 frequency. Reconnecting with the 13-20 lunar cycles through the
|
||||
spiraling dance of space-time.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 pt-4">
|
||||
<Button asChild size="lg" className="bg-primary text-primary-foreground hover:bg-primary/90">
|
||||
<a href="#systems">Explore Time Systems</a>
|
||||
<Button
|
||||
asChild
|
||||
size="lg"
|
||||
className="warp-element bg-gradient-to-r from-primary to-accent hover:shadow-lg hover:shadow-primary/50 transition-all"
|
||||
>
|
||||
<a href="#systems">Enter the Vortex</a>
|
||||
</Button>
|
||||
<Button asChild variant="outline" size="lg">
|
||||
<a href="#translator">Try Calendar Translator</a>
|
||||
<Button
|
||||
asChild
|
||||
variant="outline"
|
||||
size="lg"
|
||||
className="warp-element border-primary/50 hover:border-accent hover:shadow-lg hover:shadow-accent/50 bg-transparent"
|
||||
>
|
||||
<a href="#translator">Translate Time</a>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
|
||||
<ArrowDown className="h-6 w-6 text-muted-foreground" />
|
||||
<div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce warp-element">
|
||||
<ArrowDown className="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,25 +1,56 @@
|
|||
"use client"
|
||||
|
||||
import { Card } from "@/components/ui/card"
|
||||
import { useEffect, useRef } from "react"
|
||||
|
||||
export function IndigenousWisdomSection() {
|
||||
const cardsRef = useRef<(HTMLDivElement | null)[]>([])
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry, index) => {
|
||||
if (entry.isIntersecting) {
|
||||
setTimeout(() => {
|
||||
entry.target.classList.add("animate-fade-in")
|
||||
}, index * 100)
|
||||
}
|
||||
})
|
||||
},
|
||||
{ threshold: 0.1 },
|
||||
)
|
||||
|
||||
cardsRef.current.forEach((card) => {
|
||||
if (card) observer.observe(card)
|
||||
})
|
||||
|
||||
return () => observer.disconnect()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<section id="indigenous" className="py-20 lg:py-32">
|
||||
<div className="container px-4 lg:px-8">
|
||||
<div className="max-w-3xl mx-auto text-center mb-16">
|
||||
<section id="indigenous" className="py-20 lg:py-32 relative">
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none opacity-10">
|
||||
<div className="absolute top-40 right-20 w-64 h-64 rounded-full border-4 border-primary blur-sm animate-[float-drift_20s_ease-in-out_infinite]" />
|
||||
<div className="absolute bottom-40 left-20 w-48 h-48 rounded-full border-4 border-accent blur-sm animate-[float-drift_18s_ease-in-out_infinite]" />
|
||||
</div>
|
||||
|
||||
<div className="container px-4 lg:px-8 relative z-10">
|
||||
<div className="max-w-3xl mx-auto text-center mb-16 warp-element">
|
||||
<h2 className="font-serif text-4xl lg:text-5xl font-bold mb-6 text-foreground">Indigenous Time Wisdom</h2>
|
||||
<p className="text-lg text-muted-foreground leading-relaxed">
|
||||
Ancient cultures across the globe developed sophisticated time-keeping systems aligned with natural cycles.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Turtle Shell */}
|
||||
<div className="max-w-5xl mx-auto mb-16">
|
||||
<Card className="p-8 lg:p-12 bg-gradient-to-br from-primary/5 to-accent/5">
|
||||
<Card className="p-8 lg:p-12 bg-gradient-to-br from-primary/5 via-card to-accent/5 warp-element hover:shadow-2xl hover:shadow-primary/20 transition-all duration-500 border-2 border-primary/20">
|
||||
<div className="grid lg:grid-cols-2 gap-8 items-center">
|
||||
<div>
|
||||
<div className="relative group">
|
||||
<div className="absolute -inset-1 bg-gradient-to-r from-primary to-accent rounded-lg blur opacity-25 group-hover:opacity-50 transition duration-500" />
|
||||
<img
|
||||
src="/turtle-shell-pattern-showing-13-segments.jpg"
|
||||
alt="Turtle shell with 13 segments"
|
||||
className="w-full h-auto rounded-lg"
|
||||
className="relative w-full h-auto rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
|
|
@ -42,9 +73,11 @@ export function IndigenousWisdomSection() {
|
|||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Indigenous Calendars */}
|
||||
<div className="grid md:grid-cols-3 gap-6 max-w-6xl mx-auto">
|
||||
<Card className="p-6">
|
||||
<Card
|
||||
ref={(el) => (cardsRef.current[0] = el)}
|
||||
className="p-6 warp-element opacity-0 hover:shadow-lg hover:shadow-primary/20 transition-all duration-300"
|
||||
>
|
||||
<h4 className="font-serif text-xl font-bold mb-3 text-foreground">Maya Tzolk'in</h4>
|
||||
<p className="text-sm text-muted-foreground mb-3">Sacred 260-day Calendar</p>
|
||||
<p className="text-foreground/80 text-sm leading-relaxed">
|
||||
|
|
@ -53,7 +86,10 @@ export function IndigenousWisdomSection() {
|
|||
</p>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6">
|
||||
<Card
|
||||
ref={(el) => (cardsRef.current[1] = el)}
|
||||
className="p-6 warp-element opacity-0 hover:shadow-lg hover:shadow-primary/20 transition-all duration-300"
|
||||
>
|
||||
<h4 className="font-serif text-xl font-bold mb-3 text-foreground">Māori Maramataka</h4>
|
||||
<p className="text-sm text-muted-foreground mb-3">Lunar Planting Calendar</p>
|
||||
<p className="text-foreground/80 text-sm leading-relaxed">
|
||||
|
|
@ -62,7 +98,10 @@ export function IndigenousWisdomSection() {
|
|||
</p>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6">
|
||||
<Card
|
||||
ref={(el) => (cardsRef.current[2] = el)}
|
||||
className="p-6 warp-element opacity-0 hover:shadow-lg hover:shadow-primary/20 transition-all duration-300"
|
||||
>
|
||||
<h4 className="font-serif text-xl font-bold mb-3 text-foreground">Lakota Winter Count</h4>
|
||||
<p className="text-sm text-muted-foreground mb-3">Pictorial Year Tracking</p>
|
||||
<p className="text-foreground/80 text-sm leading-relaxed">
|
||||
|
|
|
|||
|
|
@ -1,11 +1,71 @@
|
|||
"use client"
|
||||
|
||||
import { Card } from "@/components/ui/card"
|
||||
import { Timer, Heart } from "lucide-react"
|
||||
import { useRef, useEffect } from "react"
|
||||
|
||||
export function KairosChronosSection() {
|
||||
const chronosRef = useRef<HTMLDivElement>(null)
|
||||
const kairosRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const addTiltEffect = (element: HTMLElement) => {
|
||||
const handleMouseMove = (e: MouseEvent) => {
|
||||
const rect = element.getBoundingClientRect()
|
||||
const x = (e.clientX - rect.left) / rect.width - 0.5
|
||||
const y = (e.clientY - rect.top) / rect.height - 0.5
|
||||
|
||||
element.style.transform = `
|
||||
perspective(1000px)
|
||||
rotateY(${x * 15}deg)
|
||||
rotateX(${-y * 15}deg)
|
||||
translateZ(20px)
|
||||
`
|
||||
}
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
element.style.transform = ""
|
||||
}
|
||||
|
||||
element.addEventListener("mousemove", handleMouseMove)
|
||||
element.addEventListener("mouseleave", handleMouseLeave)
|
||||
|
||||
return () => {
|
||||
element.removeEventListener("mousemove", handleMouseMove)
|
||||
element.removeEventListener("mouseleave", handleMouseLeave)
|
||||
}
|
||||
}
|
||||
|
||||
const cleanups: (() => void)[] = []
|
||||
if (chronosRef.current) cleanups.push(addTiltEffect(chronosRef.current))
|
||||
if (kairosRef.current) cleanups.push(addTiltEffect(kairosRef.current))
|
||||
|
||||
return () => cleanups.forEach((cleanup) => cleanup())
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<section id="kairos" className="py-20 lg:py-32 bg-muted/30">
|
||||
<div className="container px-4 lg:px-8">
|
||||
<div className="max-w-3xl mx-auto text-center mb-16">
|
||||
<section id="kairos" className="py-20 lg:py-32 bg-muted/30 relative overflow-hidden">
|
||||
<div className="absolute inset-0 opacity-10 pointer-events-none">
|
||||
<svg className="w-full h-full" viewBox="0 0 1000 1000">
|
||||
<path
|
||||
d="M 500,500 m -200,0 a 200,200 0 1,0 400,0 a 200,200 0 1,0 -400,0"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
className="text-primary"
|
||||
/>
|
||||
<path
|
||||
d="M 500,500 m -300,0 a 300,300 0 1,0 600,0 a 300,300 0 1,0 -600,0"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
className="text-accent"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="container px-4 lg:px-8 relative z-10">
|
||||
<div className="max-w-3xl mx-auto text-center mb-16 warp-element">
|
||||
<h2 className="font-serif text-4xl lg:text-5xl font-bold mb-6 text-foreground">Kairos vs Chronos</h2>
|
||||
<p className="text-lg text-muted-foreground leading-relaxed">
|
||||
Ancient Greeks understood two fundamentally different types of time. Modern society has forgotten one of
|
||||
|
|
@ -15,7 +75,11 @@ export function KairosChronosSection() {
|
|||
|
||||
<div className="grid lg:grid-cols-2 gap-8 max-w-6xl mx-auto mb-16">
|
||||
{/* Chronos */}
|
||||
<Card className="p-8 lg:p-10">
|
||||
<Card
|
||||
ref={chronosRef}
|
||||
className="p-8 lg:p-10 transition-all duration-200 ease-out"
|
||||
style={{ transformStyle: "preserve-3d" }}
|
||||
>
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<div className="p-3 rounded-full bg-muted">
|
||||
<Timer className="h-8 w-8 text-muted-foreground" />
|
||||
|
|
@ -48,7 +112,11 @@ export function KairosChronosSection() {
|
|||
</Card>
|
||||
|
||||
{/* Kairos */}
|
||||
<Card className="p-8 lg:p-10 bg-primary/5 border-primary/20">
|
||||
<Card
|
||||
ref={kairosRef}
|
||||
className="p-8 lg:p-10 bg-gradient-to-br from-primary/5 via-card to-accent/5 border-primary/20 transition-all duration-200 ease-out hover:shadow-2xl hover:shadow-primary/20"
|
||||
style={{ transformStyle: "preserve-3d" }}
|
||||
>
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<div className="p-3 rounded-full bg-primary/10">
|
||||
<Heart className="h-8 w-8 text-primary" />
|
||||
|
|
@ -81,7 +149,7 @@ export function KairosChronosSection() {
|
|||
</Card>
|
||||
</div>
|
||||
|
||||
<Card className="p-8 lg:p-12 bg-card max-w-4xl mx-auto">
|
||||
<Card className="p-8 lg:p-12 bg-card max-w-4xl mx-auto warp-element hover:shadow-xl transition-all duration-300">
|
||||
<h3 className="font-serif text-2xl font-bold mb-6 text-foreground">Moving Toward Kairos</h3>
|
||||
<div className="space-y-4 text-foreground/80 leading-relaxed">
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,134 @@
|
|||
"use client"
|
||||
|
||||
import { useEffect, useRef } from "react"
|
||||
|
||||
export function SpaceTimeBackground() {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const canvas = canvasRef.current
|
||||
if (!canvas) return
|
||||
|
||||
const ctx = canvas.getContext("2d")
|
||||
if (!ctx) return
|
||||
|
||||
canvas.width = window.innerWidth
|
||||
canvas.height = window.innerHeight
|
||||
|
||||
// Torus particles
|
||||
const particles: Array<{
|
||||
x: number
|
||||
y: number
|
||||
z: number
|
||||
angle: number
|
||||
speed: number
|
||||
radius: number
|
||||
}> = []
|
||||
|
||||
// Create torus particles
|
||||
for (let i = 0; i < 150; i++) {
|
||||
particles.push({
|
||||
x: Math.random() * canvas.width,
|
||||
y: Math.random() * canvas.height,
|
||||
z: Math.random() * 1000,
|
||||
angle: Math.random() * Math.PI * 2,
|
||||
speed: Math.random() * 0.002 + 0.001,
|
||||
radius: Math.random() * 200 + 100,
|
||||
})
|
||||
}
|
||||
|
||||
let time = 0
|
||||
|
||||
function animate() {
|
||||
if (!canvas || !ctx) return
|
||||
|
||||
ctx.fillStyle = "rgba(18, 18, 30, 0.1)"
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height)
|
||||
|
||||
time += 0.01
|
||||
|
||||
// Draw infinity symbols and toruses
|
||||
particles.forEach((p, i) => {
|
||||
p.angle += p.speed
|
||||
|
||||
// Torus path (parametric equations)
|
||||
const R = p.radius // Major radius
|
||||
const r = R * 0.3 // Minor radius
|
||||
|
||||
const torusX = (R + r * Math.cos(p.angle)) * Math.cos(p.angle * 2)
|
||||
const torusY = (R + r * Math.cos(p.angle)) * Math.sin(p.angle * 2)
|
||||
|
||||
p.x = canvas.width / 2 + torusX + Math.sin(time + i * 0.1) * 50
|
||||
p.y = canvas.height / 2 + torusY + Math.cos(time + i * 0.1) * 50
|
||||
|
||||
// Depth effect
|
||||
const scale = 1000 / (1000 + p.z)
|
||||
const size = 2 * scale
|
||||
|
||||
// Color based on position and depth
|
||||
const hue = ((p.angle * 180) / Math.PI + time * 50) % 360
|
||||
const alpha = Math.max(0.3, scale)
|
||||
|
||||
ctx.beginPath()
|
||||
ctx.arc(p.x, p.y, size, 0, Math.PI * 2)
|
||||
ctx.fillStyle = `hsla(${hue}, 80%, 60%, ${alpha})`
|
||||
ctx.fill()
|
||||
|
||||
// Connect nearby particles for web effect
|
||||
particles.forEach((p2, j) => {
|
||||
if (j <= i) return
|
||||
const dx = p.x - p2.x
|
||||
const dy = p.y - p2.y
|
||||
const distance = Math.sqrt(dx * dx + dy * dy)
|
||||
|
||||
if (distance < 100) {
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(p.x, p.y)
|
||||
ctx.lineTo(p2.x, p2.y)
|
||||
ctx.strokeStyle = `hsla(${hue}, 70%, 50%, ${0.1 * (1 - distance / 100)})`
|
||||
ctx.lineWidth = 0.5
|
||||
ctx.stroke()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// Draw infinity symbols
|
||||
for (let i = 0; i < 3; i++) {
|
||||
const centerX = canvas.width / 2 + Math.sin(time * 0.5 + i * 2) * 200
|
||||
const centerY = canvas.height / 3 + Math.cos(time * 0.3 + i * 1.5) * 150
|
||||
const scale = 30 + Math.sin(time + i) * 10
|
||||
|
||||
ctx.beginPath()
|
||||
for (let t = 0; t < Math.PI * 2; t += 0.01) {
|
||||
const x = centerX + (scale * Math.cos(t)) / (1 + Math.sin(t) * Math.sin(t))
|
||||
const y = centerY + (scale * Math.cos(t) * Math.sin(t)) / (1 + Math.sin(t) * Math.sin(t))
|
||||
if (t === 0) {
|
||||
ctx.moveTo(x, y)
|
||||
} else {
|
||||
ctx.lineTo(x, y)
|
||||
}
|
||||
}
|
||||
ctx.strokeStyle = `hsla(${(time * 50 + i * 60) % 360}, 80%, 60%, 0.3)`
|
||||
ctx.lineWidth = 2
|
||||
ctx.stroke()
|
||||
}
|
||||
|
||||
requestAnimationFrame(animate)
|
||||
}
|
||||
|
||||
animate()
|
||||
|
||||
const handleResize = () => {
|
||||
canvas.width = window.innerWidth
|
||||
canvas.height = window.innerHeight
|
||||
}
|
||||
|
||||
window.addEventListener("resize", handleResize)
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("resize", handleResize)
|
||||
}
|
||||
}, [])
|
||||
|
||||
return <canvas ref={canvasRef} className="fixed inset-0 z-0 pointer-events-none" style={{ mixBlendMode: "screen" }} />
|
||||
}
|
||||
|
|
@ -1,11 +1,40 @@
|
|||
"use client"
|
||||
|
||||
import { Card } from "@/components/ui/card"
|
||||
import { Clock, Moon, Calendar } from "lucide-react"
|
||||
import { useEffect, useRef } from "react"
|
||||
|
||||
export function TimeSystemsSection() {
|
||||
const card1Ref = useRef<HTMLDivElement>(null)
|
||||
const card2Ref = useRef<HTMLDivElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add("animate-fade-in")
|
||||
}
|
||||
})
|
||||
},
|
||||
{ threshold: 0.2 },
|
||||
)
|
||||
|
||||
if (card1Ref.current) observer.observe(card1Ref.current)
|
||||
if (card2Ref.current) observer.observe(card2Ref.current)
|
||||
|
||||
return () => observer.disconnect()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<section id="systems" className="py-20 lg:py-32">
|
||||
<div className="container px-4 lg:px-8">
|
||||
<div className="max-w-3xl mx-auto text-center mb-16">
|
||||
<section id="systems" className="py-20 lg:py-32 relative">
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none opacity-20">
|
||||
<div className="absolute top-20 left-10 w-32 h-32 border-2 border-primary rounded-full animate-[float-drift_15s_ease-in-out_infinite]" />
|
||||
<div className="absolute bottom-20 right-10 w-24 h-24 border-2 border-accent animate-[float-drift_12s_ease-in-out_infinite]" />
|
||||
</div>
|
||||
|
||||
<div className="container px-4 lg:px-8 relative z-10">
|
||||
<div className="max-w-3xl mx-auto text-center mb-16 warp-element">
|
||||
<h2 className="font-serif text-4xl lg:text-5xl font-bold mb-6 text-foreground">
|
||||
The System Construct of Time
|
||||
</h2>
|
||||
|
|
@ -16,8 +45,10 @@ export function TimeSystemsSection() {
|
|||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto mb-16">
|
||||
{/* 12-60 System */}
|
||||
<Card className="p-8 bg-card border-2 border-destructive/20">
|
||||
<Card
|
||||
ref={card1Ref}
|
||||
className="p-8 bg-card border-2 border-destructive/20 warp-element hover:shadow-2xl hover:shadow-destructive/20 transition-all duration-300"
|
||||
>
|
||||
<div className="flex items-start gap-4 mb-6">
|
||||
<div className="p-3 rounded-lg bg-destructive/10">
|
||||
<Clock className="h-8 w-8 text-destructive" />
|
||||
|
|
@ -51,8 +82,10 @@ export function TimeSystemsSection() {
|
|||
</ul>
|
||||
</Card>
|
||||
|
||||
{/* 13-20 System */}
|
||||
<Card className="p-8 bg-card border-2 border-primary/30">
|
||||
<Card
|
||||
ref={card2Ref}
|
||||
className="p-8 bg-gradient-to-br from-card via-primary/5 to-card border-2 border-primary/30 warp-element hover:shadow-2xl hover:shadow-primary/30 transition-all duration-300"
|
||||
>
|
||||
<div className="flex items-start gap-4 mb-6">
|
||||
<div className="p-3 rounded-lg bg-primary/10">
|
||||
<Moon className="h-8 w-8 text-primary" />
|
||||
|
|
@ -87,7 +120,7 @@ export function TimeSystemsSection() {
|
|||
</Card>
|
||||
</div>
|
||||
|
||||
<Card className="p-8 lg:p-12 bg-secondary/20 max-w-4xl mx-auto">
|
||||
<Card className="p-8 lg:p-12 bg-secondary/20 max-w-4xl mx-auto warp-element hover:shadow-xl transition-all duration-300">
|
||||
<div className="flex items-start gap-6">
|
||||
<div className="p-4 rounded-lg bg-accent/20 shrink-0">
|
||||
<Calendar className="h-10 w-10 text-accent" />
|
||||
|
|
|
|||
Loading…
Reference in New Issue