Hero image tweaks

app/page.tsx

@@ -3,7 +3,7 @@ import HeroImage from '../components/HeroImage'
 
 export default function Home() {
   return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
+    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen pb-20 pt-[20%] gap-16 font-[family-name:var(--font-geist-sans)]">
       <HeroImage />
       <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
         <Image

components/HeroImage.tsx

@@ -5,15 +5,19 @@ export default function HeroImage() {
     <div className="relative w-full h-0 pb-[56.25%]">
       <Image
         className="absolute top-0 left-0 w-full h-full object-cover"
-        src="/hero.jpg"
+        src="/hero.png"
         alt="Hero Image"
         layout="fill"
         priority
       />
       <div className="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center bg-black bg-opacity-50 text-white">
         <h1 className="text-4xl font-bold">Welcome to Bear Creek Honey Farm</h1>
-        <p className="mt-4 text-lg">Experience the best honey in town</p>
-        <button className="mt-6 px-4 py-2 bg-yellow-500 text-black rounded">Learn More</button>
+        <p className="mt-4 text-lg">
+          The world's best AI-generated bed and breakfast
+        </p>
+        <button className="mt-6 px-4 py-2 bg-yellow-500 text-black rounded">
+          Reserve today!
+        </button>
       </div>
     </div>
   )

next.config.ts

@@ -1,7 +1,8 @@
 import type { NextConfig } from 'next'
 
 const nextConfig: NextConfig = {
-  output: 'export'
+  output: 'export',
+  images: { unoptimized: true }
 }
 
 export default nextConfig