77 lines
3.3 KiB
TypeScript
77 lines
3.3 KiB
TypeScript
import { BookList } from "@/components/book-list"
|
||
import { MainNav } from "@/components/main-nav"
|
||
import { SearchBar } from "@/components/search-bar"
|
||
import { ThemeToggle } from "@/components/theme-toggle"
|
||
import { Button } from "@/components/ui/button"
|
||
import { ShoppingCart } from "@/components/shopping-cart"
|
||
import { UserNav } from "@/components/user-nav"
|
||
import { BookOpen } from "lucide-react"
|
||
import Link from "next/link"
|
||
|
||
export default function Home() {
|
||
return (
|
||
<div className="flex min-h-screen flex-col">
|
||
<header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
||
<div className="container flex h-16 items-center justify-between">
|
||
<MainNav />
|
||
<div className="flex items-center gap-4">
|
||
<SearchBar />
|
||
<ShoppingCart />
|
||
<ThemeToggle />
|
||
<UserNav />
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<main className="flex-1">
|
||
<section className="w-full py-12 md:py-24 lg:py-32 bg-muted/50">
|
||
<div className="container px-4 md:px-6">
|
||
<div className="grid gap-6 lg:grid-cols-2 lg:gap-12 items-center">
|
||
<div className="space-y-4">
|
||
<h1 className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none">探索知识的海洋</h1>
|
||
<p className="max-w-[600px] text-muted-foreground md:text-xl">
|
||
欢迎来到我们的图书管理系统，这里有丰富的图书资源等待您的探索。
|
||
</p>
|
||
<div className="flex flex-col gap-2 min-[400px]:flex-row">
|
||
<Link href="/books">
|
||
<Button size="lg" className="gap-1.5">
|
||
<BookOpen className="h-5 w-5" />
|
||
浏览图书
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
<div className="flex justify-center">
|
||
<img
|
||
src="/placeholder.svg?height=550&width=450"
|
||
alt="图书馆"
|
||
className="aspect-[4/5] overflow-hidden rounded-xl object-cover"
|
||
width={450}
|
||
height={550}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section className="container py-8 md:py-12">
|
||
<div className="flex flex-col items-center justify-center space-y-4 text-center">
|
||
<div className="space-y-2">
|
||
<h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">精选图书</h2>
|
||
<p className="max-w-[900px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
|
||
发现我们最新和最受欢迎的图书
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<BookList />
|
||
</section>
|
||
</main>
|
||
<footer className="border-t py-6 md:py-0">
|
||
<div className="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
|
||
<p className="text-center text-sm leading-loose text-muted-foreground md:text-left">
|
||
© {new Date().getFullYear()} 图书管理系统. 保留所有权利.
|
||
</p>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
)
|
||
}
|