62 lines
2.1 KiB
TypeScript
62 lines
2.1 KiB
TypeScript
'use client'
|
|
|
|
import { SpaceNav } from "@/components/space-nav"
|
|
import { QuoteCard } from "@/components/quote-card"
|
|
import { Messages } from "@/components/messages"
|
|
import { Podcast } from "@/components/podcast"
|
|
import { CalendarWidget } from "@/components/calendar-widget"
|
|
import { News } from "@/components/news"
|
|
import { Todo } from "@/components/todo"
|
|
import { useEffect, useState } from "react"
|
|
|
|
const backgroundImages = [
|
|
'https://images.pexels.com/photos/1169754/pexels-photo-1169754.jpeg',
|
|
'https://images.pexels.com/photos/1252890/pexels-photo-1252890.jpeg',
|
|
'https://images.pexels.com/photos/1167355/pexels-photo-1167355.jpeg',
|
|
'https://images.pexels.com/photos/816608/pexels-photo-816608.jpeg',
|
|
'https://images.pexels.com/photos/1146134/pexels-photo-1146134.jpeg'
|
|
]
|
|
|
|
export default function Page() {
|
|
const [currentBgIndex, setCurrentBgIndex] = useState(0)
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setCurrentBgIndex((prevIndex) =>
|
|
prevIndex === backgroundImages.length - 1 ? 0 : prevIndex + 1
|
|
)
|
|
}, 120000) // 2 minutes in milliseconds
|
|
|
|
return () => clearInterval(interval)
|
|
}, [])
|
|
|
|
return (
|
|
<div
|
|
className="min-h-screen bg-cover bg-center bg-no-repeat transition-all duration-1000"
|
|
style={{ backgroundImage: `url(${backgroundImages[currentBgIndex]})` }}
|
|
>
|
|
<div className="min-h-screen bg-black/50"> {/* Dark overlay for better readability */}
|
|
<SpaceNav />
|
|
<div className="container mx-auto p-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-6 lg:grid-cols-12 gap-4">
|
|
<div className="col-span-1 md:col-span-2 lg:col-span-3">
|
|
<QuoteCard />
|
|
<div className="mt-4">
|
|
<News />
|
|
</div>
|
|
</div>
|
|
<div className="col-span-1 md:col-span-4 lg:col-span-6">
|
|
<Messages />
|
|
</div>
|
|
<div className="col-span-1 md:col-span-2 lg:col-span-3 space-y-4">
|
|
<Podcast />
|
|
<CalendarWidget />
|
|
<Todo />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|