147 lines
6.6 KiB
TypeScript
147 lines
6.6 KiB
TypeScript
"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 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>
|
||
<p className="text-lg text-muted-foreground leading-relaxed">
|
||
Our modern calendar is not natural law—it's a colonial construct designed to disconnect us from Earth's
|
||
rhythms.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto mb-16">
|
||
<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" />
|
||
</div>
|
||
<div>
|
||
<h3 className="font-serif text-2xl font-bold mb-2 text-foreground">12-60 Frequency</h3>
|
||
<p className="text-sm text-muted-foreground">The Imposed System</p>
|
||
</div>
|
||
</div>
|
||
<ul className="space-y-3 text-foreground/80">
|
||
<li className="flex items-start gap-2">
|
||
<span className="text-destructive mt-1">•</span>
|
||
<span>12 irregular months (28-31 days)</span>
|
||
</li>
|
||
<li className="flex items-start gap-2">
|
||
<span className="text-destructive mt-1">•</span>
|
||
<span>60-second minutes, 60-minute hours</span>
|
||
</li>
|
||
<li className="flex items-start gap-2">
|
||
<span className="text-destructive mt-1">•</span>
|
||
<span>Disconnected from lunar cycles</span>
|
||
</li>
|
||
<li className="flex items-start gap-2">
|
||
<span className="text-destructive mt-1">•</span>
|
||
<span>Created for taxation & control</span>
|
||
</li>
|
||
<li className="flex items-start gap-2">
|
||
<span className="text-destructive mt-1">•</span>
|
||
<span>Promotes linear, mechanical thinking</span>
|
||
</li>
|
||
</ul>
|
||
</Card>
|
||
|
||
<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" />
|
||
</div>
|
||
<div>
|
||
<h3 className="font-serif text-2xl font-bold mb-2 text-foreground">13-20 Frequency</h3>
|
||
<p className="text-sm text-muted-foreground">The Natural Rhythm</p>
|
||
</div>
|
||
</div>
|
||
<ul className="space-y-3 text-foreground/80">
|
||
<li className="flex items-start gap-2">
|
||
<span className="text-primary mt-1">•</span>
|
||
<span>13 perfect 28-day lunar months</span>
|
||
</li>
|
||
<li className="flex items-start gap-2">
|
||
<span className="text-primary mt-1">•</span>
|
||
<span>20 solar seals (fingers + toes)</span>
|
||
</li>
|
||
<li className="flex items-start gap-2">
|
||
<span className="text-primary mt-1">•</span>
|
||
<span>Aligned with moon phases & menstruation</span>
|
||
</li>
|
||
<li className="flex items-start gap-2">
|
||
<span className="text-primary mt-1">•</span>
|
||
<span>Honors cyclical, fractal nature</span>
|
||
</li>
|
||
<li className="flex items-start gap-2">
|
||
<span className="text-primary mt-1">•</span>
|
||
<span>365 days (13 × 28 + 1 day out of time)</span>
|
||
</li>
|
||
</ul>
|
||
</Card>
|
||
</div>
|
||
|
||
<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" />
|
||
</div>
|
||
<div className="space-y-4">
|
||
<h3 className="font-serif text-2xl font-bold text-foreground">Why This Matters</h3>
|
||
<p className="text-foreground/80 leading-relaxed">
|
||
The Gregorian calendar was imposed globally through colonization, severing indigenous peoples from their
|
||
ancestral time-keeping systems. By adopting the 12-60 frequency, we've internalized a mechanical,
|
||
productivity-focused relationship with time that disconnects us from natural cycles, our bodies, and the
|
||
Earth.
|
||
</p>
|
||
<p className="text-foreground/80 leading-relaxed">
|
||
The 13-moon calendar reflects the actual lunar cycles we observe in nature. Thirteen moons of 28 days
|
||
each creates a perfect, fractal harmony that resonates with human biology and Earth's rhythms.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
</section>
|
||
)
|
||
}
|