63 lines
3.0 KiB
TypeScript
63 lines
3.0 KiB
TypeScript
import React from "react";
|
|
import { Search } from "lucide-react";
|
|
|
|
export default function Banner() {
|
|
return (
|
|
<section className="relative">
|
|
{/* Full-bleed hero image */}
|
|
<div className="w-screen relative left-1/2 right-1/2 -translate-x-1/2">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=1920&h=750&q=80&auto=format&fit=crop"
|
|
alt="Hero"
|
|
className="h-[750px] w-full object-cover"
|
|
/>
|
|
</div>
|
|
|
|
{/* Content container below the hero (no login/register) */}
|
|
<div className="container mx-auto px-4 py-8">
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
<div className="lg:col-span-2">
|
|
<div className="rounded-2xl bg-white p-6 shadow-sm dark:bg-neutral-900">
|
|
<h2 className="text-3xl font-bold mb-2">Welcome to Next Fiber</h2>
|
|
<p className="text-sm text-muted-foreground">Discover articles, projects and updates from the team. Explore our latest posts and tutorials.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<aside className="space-y-6">
|
|
<div className="rounded-lg border bg-white p-4 shadow-sm dark:bg-neutral-900">
|
|
<div className="relative flex items-center gap-2 rounded-md bg-gray-100 px-3 py-2">
|
|
<Search className="size-4 text-gray-600" />
|
|
<input placeholder="Write your keyword..." className="w-full bg-transparent outline-none text-sm" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-lg border bg-white p-4 shadow-sm dark:bg-neutral-900">
|
|
<h3 className="mb-3 font-semibold">Popular Posts</h3>
|
|
<ul className="space-y-3">
|
|
<li className="flex items-start gap-3">
|
|
<img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=80&q=60&auto=format&fit=crop" className="h-12 w-12 rounded-full object-cover" />
|
|
<div>
|
|
<div className="text-sm font-medium">How Wireless Technology is Changing Business</div>
|
|
</div>
|
|
</li>
|
|
<li className="flex items-start gap-3">
|
|
<img src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?w=80&q=60&auto=format&fit=crop" className="h-12 w-12 rounded-full object-cover" />
|
|
<div>
|
|
<div className="text-sm font-medium">Designing Faster Interfaces</div>
|
|
</div>
|
|
</li>
|
|
<li className="flex items-start gap-3">
|
|
<img src="https://images.unsplash.com/photo-1503342452485-86f7f3f45e2b?w=80&q=60&auto=format&fit=crop" className="h-12 w-12 rounded-full object-cover" />
|
|
<div>
|
|
<div className="text-sm font-medium">Productivity Tips for Developers</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|