92 lines
4.6 KiB
TypeScript
92 lines
4.6 KiB
TypeScript
import React from 'react';
|
|
import Link from 'next/link';
|
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Badge } from "@/components/ui/badge";
|
|
|
|
// This would typically come from an API or database
|
|
const livestreams = [
|
|
{ id: 1, name: "Cape Coral Burrowing Owl", location: "Cape Coral, FL", status: "Live" },
|
|
{ id: 2, name: "Sanibel Island Osprey", location: "Sanibel Island, FL", status: "Live" },
|
|
{ id: 3, name: "Everglades Alligator", location: "Everglades National Park, FL", status: "Offline" },
|
|
// ... add more livestreams as needed
|
|
];
|
|
|
|
export default function Home() {
|
|
return (
|
|
<div className="min-h-screen bg-background text-foreground">
|
|
<header className="bg-black/50 backdrop-blur-sm sticky top-0 z-10">
|
|
<div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
|
|
<h1 className="text-3xl font-bold text-accent">Florida Wildlife Livestreams</h1>
|
|
</div>
|
|
</header>
|
|
<main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
|
|
<div className="px-4 py-6 sm:px-0 space-y-12">
|
|
<section>
|
|
<Card className="bg-black/30 border-accent/50 backdrop-blur-sm">
|
|
<CardHeader>
|
|
<CardTitle className="text-2xl text-accent">Welcome to Florida's Wild Side</CardTitle>
|
|
<CardDescription className="text-foreground/80">
|
|
Explore the diverse ecosystems of Florida through our live cameras.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-foreground/80 mb-4">
|
|
From the unique burrowing owls of Cape Coral to the majestic ospreys of Sanibel Island and the iconic alligators of the Everglades, witness the beauty of Florida's wildlife in real-time.
|
|
</p>
|
|
<p className="text-foreground/80">
|
|
Our livestreams offer a window into the natural world, promoting conservation awareness and providing valuable data for researchers and wildlife enthusiasts alike.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</section>
|
|
|
|
<section>
|
|
<h2 className="text-2xl font-semibold text-accent mb-4">Featured Ecosystems</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
{['Cape Coral', 'Sanibel Island', 'Everglades'].map((ecosystem) => (
|
|
<Card key={ecosystem} className="bg-black/30 border-accent/50 backdrop-blur-sm">
|
|
<CardHeader>
|
|
<CardTitle className="text-accent">{ecosystem}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-foreground/80">
|
|
{ecosystem === 'Cape Coral' && "Home to the largest population of burrowing owls in Florida, supporting these ground-dwelling birds."}
|
|
{ecosystem === 'Sanibel Island' && "A barrier island known for its shell beaches and wildlife refuges, crucial for ospreys and coastal birds."}
|
|
{ecosystem === 'Everglades' && "The largest subtropical wilderness in the US, home to diverse species including the American alligator."}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2 className="text-2xl font-semibold text-accent mb-4">Live Cameras</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{livestreams.map((stream) => (
|
|
<Card key={stream.id} className="bg-black/30 border-accent/50 backdrop-blur-sm hover:bg-black/50 transition-colors">
|
|
<CardHeader>
|
|
<div className="flex justify-between items-center">
|
|
<CardTitle className="text-accent">{stream.name}</CardTitle>
|
|
<Badge variant={stream.status === 'Live' ? 'default' : 'secondary'}>
|
|
{stream.status}
|
|
</Badge>
|
|
</div>
|
|
<CardDescription className="text-foreground/80">{stream.location}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Button asChild className="w-full">
|
|
<Link href={`/livestream/${stream.id}`}>Watch Now</Link>
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|