164 lines
8.0 KiB
TypeScript
164 lines
8.0 KiB
TypeScript
import { Header } from "@/components/ui/header";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Play, Image, Folder, Settings, ArrowRight } from "lucide-react";
|
|
import Link from "next/link";
|
|
|
|
export default function Home() {
|
|
return (
|
|
<div className="min-h-screen p-6">
|
|
<div className="max-w-6xl mx-auto">
|
|
{/* Hero Section */}
|
|
<div className="text-center mb-12">
|
|
<div className="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-primary to-primary/80 rounded-2xl mb-6 shadow-lg">
|
|
<Play className="h-8 w-8 text-primary-foreground" />
|
|
</div>
|
|
<h1 className="text-4xl md:text-5xl font-bold text-foreground mb-4 tracking-tight">
|
|
Welcome to NextAV
|
|
</h1>
|
|
<p className="text-xl text-muted-foreground max-w-2xl mx-auto leading-relaxed">
|
|
Your modern media library for organizing and enjoying videos and photos with a beautiful, intuitive interface.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Quick Actions Grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
|
|
<Link href="/videos">
|
|
<Card className="group hover:shadow-lg transition-all duration-300 hover:-translate-y-1 cursor-pointer border-border">
|
|
<CardHeader className="pb-3">
|
|
<div className="w-12 h-12 bg-gradient-to-br from-red-500 to-red-600 rounded-xl flex items-center justify-center mb-2 group-hover:scale-110 transition-transform">
|
|
<Play className="h-6 w-6 text-white" />
|
|
</div>
|
|
<CardTitle className="text-lg">Videos</CardTitle>
|
|
<CardDescription>
|
|
Browse and play your video collection
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex items-center text-sm text-muted-foreground group-hover:text-primary transition-colors">
|
|
<span>View videos</span>
|
|
<ArrowRight className="h-4 w-4 ml-2 group-hover:translate-x-1 transition-transform" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
|
|
<Link href="/photos">
|
|
<Card className="group hover:shadow-lg transition-all duration-300 hover:-translate-y-1 cursor-pointer border-border">
|
|
<CardHeader className="pb-3">
|
|
<div className="w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center mb-2 group-hover:scale-110 transition-transform">
|
|
<Image className="h-6 w-6 text-white" />
|
|
</div>
|
|
<CardTitle className="text-lg">Photos</CardTitle>
|
|
<CardDescription>
|
|
Explore your photo gallery
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex items-center text-sm text-muted-foreground group-hover:text-primary transition-colors">
|
|
<span>View photos</span>
|
|
<ArrowRight className="h-4 w-4 ml-2 group-hover:translate-x-1 transition-transform" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
|
|
<Link href="/folder-viewer">
|
|
<Card className="group hover:shadow-lg transition-all duration-300 hover:-translate-y-1 cursor-pointer border-border">
|
|
<CardHeader className="pb-3">
|
|
<div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center mb-2 group-hover:scale-110 transition-transform">
|
|
<Folder className="h-6 w-6 text-white" />
|
|
</div>
|
|
<CardTitle className="text-lg">Folder Viewer</CardTitle>
|
|
<CardDescription>
|
|
Browse your media libraries
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex items-center text-sm text-muted-foreground group-hover:text-primary transition-colors">
|
|
<span>Browse files</span>
|
|
<ArrowRight className="h-4 w-4 ml-2 group-hover:translate-x-1 transition-transform" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
|
|
<Link href="/settings">
|
|
<Card className="group hover:shadow-lg transition-all duration-300 hover:-translate-y-1 cursor-pointer border-border">
|
|
<CardHeader className="pb-3">
|
|
<div className="w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl flex items-center justify-center mb-2 group-hover:scale-110 transition-transform">
|
|
<Settings className="h-6 w-6 text-white" />
|
|
</div>
|
|
<CardTitle className="text-lg">Settings</CardTitle>
|
|
<CardDescription>
|
|
Manage your media libraries
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex items-center text-sm text-muted-foreground group-hover:text-primary transition-colors">
|
|
<span>Configure</span>
|
|
<ArrowRight className="h-4 w-4 ml-2 group-hover:translate-x-1 transition-transform" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Getting Started Section */}
|
|
<Card className="border-border bg-gradient-to-br from-muted to-muted">
|
|
<CardHeader>
|
|
<CardTitle className="text-xl">Getting Started</CardTitle>
|
|
<CardDescription>
|
|
Set up your media library to start organizing your content
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
<div className="flex items-start gap-4">
|
|
<div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
|
|
<span className="text-sm font-semibold text-primary">1</span>
|
|
</div>
|
|
<div>
|
|
<h3 className="font-medium text-foreground mb-1">Add Media Libraries</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
Go to Settings and add the paths to your media folders (e.g., /mnt/media)
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start gap-4">
|
|
<div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
|
|
<span className="text-sm font-semibold text-primary">2</span>
|
|
</div>
|
|
<div>
|
|
<h3 className="font-medium text-foreground mb-1">Scan for Media</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
Use the scanner to discover videos and photos in your libraries
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start gap-4">
|
|
<div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
|
|
<span className="text-sm font-semibold text-primary">3</span>
|
|
</div>
|
|
<div>
|
|
<h3 className="font-medium text-foreground mb-1">Start Browsing</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
Explore your media through the Videos, Photos, or Folder Viewer sections
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-6">
|
|
<Link href="/settings">
|
|
<Button className="w-full sm:w-auto">
|
|
<Settings className="h-4 w-4 mr-2" />
|
|
Go to Settings
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |