feat: create basic homepage structure with mock data

src/components/podcast-preview-card.tsx

@@ -0,0 +1,15 @@
+type Props = {
+  title: string;
+  author: string;
+  imageUrl: string;
+};
+
+export function PodcastPreviewCard({ title, author, imageUrl }: Props) {
+  return (
+    <div>
+      <img src={imageUrl} alt={title} />
+      <h3>{title}</h3>
+      <h4>{author}</h4>
+    </div>
+  );
+}

src/pages/home.tsx

@@ -1,3 +1,30 @@
+import { PodcastPreviewCard } from "../components/podcast-preview-card";
+
 export function Home() {
-  return <h1>Home page</h1>;
+  return (
+    <main>
+      <div className={"grid grid-cols-4"}>
+        {podcasts.map((podcast) => (
+          <PodcastPreviewCard
+            title={podcast.title}
+            author={podcast.author}
+            imageUrl={podcast.imageSrc}
+          />
+        ))}
+      </div>
+    </main>
+  );
 }
+
+const podcasts = [
+  {
+    imageSrc: "https://picsum.photos/200/200",
+    title: "Podcast 1",
+    author: "Author 1",
+  },
+  {
+    imageSrc: "https://picsum.photos/200/200",
+    title: "Podcast 2",
+    author: "Author 2",
+  },
+];