#30 Adding some spacing to the home page.

src/app/page.tsx

@@ -28,39 +28,41 @@ export default function Home() {
 
   return (
     <Main>
-      <div className="w-full flex justify-center mt-15">
+      <div className='min-h-[65vh]'>
-        <div className="w-[100px] h-[100px] flex items-center justify-center">
+        <div className="w-full flex justify-center mt-15">
-          <Image
+          <div className="w-[100px] h-[100px] flex items-center justify-center">
-            src={`${process.env.NEXT_PUBLIC_API_BASE_URL}/site-icon.svg`}
-            alt="Site Icon"
-            width={100}
-            height={100}
-            className="object-contain"
-            priority
-          />
-        </div>
-      </div>
-      <div className="w-full flex justify-center mt-15 mb-25">
-        <div className="relative w-[320px]">
-          <input
-            ref={inputRef}
-            type='text'
-            placeholder='Search…'
-            className='w-full pr-12 pl-4 py-4 rounded-lg bg-purple-200 text-base outline-none border border-purple-200'
-          />
-          <button
-            type="button"
-            onClick={handleSearchClick}
-            className="absolute right-2 top-1/2 -translate-y-1/2 p-2 rounded hover:bg-purple-100 transition"
-            tabIndex={0}
-          >
             <Image
-              src={`${process.env.NEXT_PUBLIC_API_BASE_URL}/icons/search.svg`}
+              src={`${process.env.NEXT_PUBLIC_API_BASE_URL}/site-icon.svg`}
-              alt="Search"
+              alt="Site Icon"
-              width={24}
+              width={100}
-              height={24}
+              height={100}
+              className="object-contain"
+              priority
             />
-          </button>
+          </div>
+        </div>
+        <div className="w-full flex justify-center mt-15 mb-25">
+          <div className="relative w-[320px]">
+            <input
+              ref={inputRef}
+              type='text'
+              placeholder='Search…'
+              className='w-full pr-12 pl-4 py-4 rounded-lg bg-purple-200 text-base outline-none border border-purple-200'
+            />
+            <button
+              type="button"
+              onClick={handleSearchClick}
+              className="absolute right-2 top-1/2 -translate-y-1/2 p-2 rounded hover:bg-purple-100 transition"
+              tabIndex={0}
+            >
+              <Image
+                src={`${process.env.NEXT_PUBLIC_API_BASE_URL}/icons/search.svg`}
+                alt="Search"
+                width={24}
+                height={24}
+              />
+            </button>
+          </div>
         </div>
       </div>
 
@@ -75,7 +77,7 @@ export default function Home() {
         </div>
       </div>
 
-      <div className="w-full px-8 mt-8">
+      <div className="w-full max-w-[1200px] px-8 mt-8 mx-auto">
         <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6">
           {podcasts.map(podcast => (
             <button