first commit

components/blog-content.tsx

@@ -0,0 +1,133 @@
+import React from "react";
+import Link from "next/link";
+import {
+  Search,
+  FileText,
+  User,
+  MessageCircle,
+  Calendar,
+  ArrowRight,
+} from "lucide-react";
+
+const popularPosts = [
+  {
+    title: "How Wireless Technology is Changing Business",
+    date: "May 15, 2020",
+    image:
+      "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=80&h=80&q=60&auto=format&fit=crop",
+  },
+  {
+    title: "How Wireless Technology is Changing Business",
+    date: "May 15, 2020",
+    image:
+      "https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?w=80&h=80&q=60&auto=format&fit=crop",
+  },
+  {
+    title: "How Wireless Technology is Changing Business",
+    date: "May 15, 2020",
+    image:
+      "https://images.unsplash.com/photo-1503342452485-86f7f3f45e2b?w=80&h=80&q=60&auto=format&fit=crop",
+  },
+];
+
+export default function BlogContent() {
+  return (
+    <section className="container mx-auto px-4 py-10 lg:py-12">
+      <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
+        {/* Main: Featured article */}
+        <article className="lg:col-span-2">
+          <div className="overflow-hidden rounded-xl bg-white shadow-sm dark:bg-neutral-900 dark:shadow-none">
+            <div className="relative aspect-[2/1] w-full overflow-hidden bg-neutral-100 dark:bg-neutral-800">
+              <img
+                src="https://images.unsplash.com/photo-1557804506-669a67965ba0?w=800&h=400&q=80&auto=format&fit=crop"
+                alt="How to become a successful businessman"
+                className="h-full w-full object-cover"
+                width={800}
+                height={400}
+              />
+              <div className="absolute left-4 top-4 rounded-md bg-violet-600/90 px-3 py-1.5 text-sm font-medium text-white">
+                08 Aug
+              </div>
+            </div>
+            <div className="p-6">
+              <div className="mb-3 flex flex-wrap items-center gap-x-5 gap-y-1 text-sm text-neutral-500 dark:text-neutral-400">
+                <span className="flex items-center gap-1.5">
+                  <FileText className="size-4" />
+                  Technology / Business
+                </span>
+                <span className="flex items-center gap-1.5">
+                  <User className="size-4" />
+                  Andrew Paker
+                </span>
+                <span className="flex items-center gap-1.5">
+                  <MessageCircle className="size-4" />
+                  0 Comments
+                </span>
+              </div>
+              <h2 className="mb-3 text-2xl font-bold text-neutral-900 dark:text-white lg:text-3xl">
+                How to become a successful businessman
+              </h2>
+              <p className="mb-4 text-neutral-600 dark:text-neutral-300">
+                Accelerate innovation with world-class tech teams We'll match
+                you to an entire remote team of incredible freelance talent for
+                all your software development needs.
+              </p>
+              <Link
+                href="#"
+                className="inline-flex items-center gap-1.5 text-sm font-semibold text-neutral-900 hover:text-violet-600 dark:text-white dark:hover:text-violet-400"
+              >
+                READ FULL
+                <ArrowRight className="size-4" />
+              </Link>
+            </div>
+          </div>
+        </article>
+
+        {/* Sidebar */}
+        <aside className="space-y-6">
+          <div className="rounded-xl bg-white p-4 shadow-sm dark:bg-neutral-900 dark:shadow-none">
+            <div className="flex items-center gap-2 rounded-lg border border-neutral-200 bg-neutral-50 px-3 py-2.5 dark:border-neutral-700 dark:bg-neutral-800">
+              <Search className="size-4 shrink-0 text-neutral-500" />
+              <input
+                type="search"
+                placeholder="Write your keyword..."
+                className="w-full bg-transparent text-sm outline-none placeholder:text-neutral-500 dark:placeholder:text-neutral-400"
+              />
+            </div>
+          </div>
+
+          <div className="rounded-xl bg-white p-5 shadow-sm dark:bg-neutral-900 dark:shadow-none">
+            <h3 className="mb-4 font-bold text-neutral-900 dark:text-white">
+              Popular Posts
+            </h3>
+            <ul className="space-y-4">
+              {popularPosts.map((post, i) => (
+                <li key={i}>
+                  <Link
+                    href="#"
+                    className="flex gap-3 transition-opacity hover:opacity-80"
+                  >
+                    <img
+                      src={post.image}
+                      alt=""
+                      className="h-14 w-14 shrink-0 rounded-full object-cover"
+                    />
+                    <div className="min-w-0 flex-1">
+                      <p className="text-sm font-medium leading-snug text-neutral-900 dark:text-white">
+                        {post.title}
+                      </p>
+                      <p className="mt-1 flex items-center gap-1.5 text-xs text-neutral-500 dark:text-neutral-400">
+                        <Calendar className="size-3.5" />
+                        {post.date}
+                      </p>
+                    </div>
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </aside>
+      </div>
+    </section>
+  );
+}