first commit

components/banner.tsx

@@ -0,0 +1,62 @@
+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>
+  );
+}