Photo comparison

app/page.tsx

@@ -5,10 +5,57 @@ import { Header } from "@/components/ui/header";
 export default function Home() {
   return (
     <div>
-      <main className="p-4">
-        <h1 className="text-2xl font-bold">Welcome to the Test Page</h1>
-        <p className="mt-2">This is a test page to display the new header component.</p>
+      <main className="min-h-80" style={{ background: 'linear-gradient(180deg, #fff 10%, #eef0f7)' }}>
+        <section className="max-w-4xl mx-auto px-4 py-24">
+          <h1 className="text-5xl font-extrabold text-center text-gray-900">
+            Enhance Your Food Photos with Dishpix AI
+          </h1>
+          <p className="mt-6 text-xl text-center text-gray-600 max-w-2xl mx-auto">
+            Dishpix is the perfect website for people who want to take their food photography to the next level. Whether you're a professional chef, a food blogger, or just someone who loves capturing delicious moments, Dishpix offers tools and features to help you create stunning food photos.
+          </p>
+        </section>
       </main>
+
+      {/*
+        Add a section here to display before/after photo and demonstrate how the application works
+      */}
+
+      <div className="flex items-center w-full max-w-screen-xl mx-auto">
+        <div className="w-full p-4 bg-white rounded-lg shadow-lg">
+          <h2 className="text-2xl font-bold text-center text-gray-800 mb-4">
+            Before & After: See the Dishpix AI Magic
+          </h2>
+          <div className="flex justify-center space-x-4">
+            <div className="w-1/2">
+              <h3 className="text-lg font-semibold text-center text-gray-700 mb-2">
+                Before
+              </h3>
+              <Image
+                src="/before-photo.png"
+                alt="Before photo"
+                width={400}
+                height={300}
+                className="w-full h-auto rounded"
+              />
+            </div>
+            <div className="w-1/2">
+              <h3 className="text-lg font-semibold text-center text-gray-700 mb-2">
+                After
+              </h3>
+              <Image
+                src="/after-photo.png"
+                alt="After photo"
+                width={400}
+                height={300}
+                className="w-full h-auto rounded"
+              />
+            </div>
+          </div>
+          <p className="mt-4 text-center text-gray-600">
+            See how Dishpix AI transforms ordinary food photos into stunning, professional-quality images. Upload your photo and let the magic happen!
+          </p>
+        </div>
+      </div>
     </div>
   );
 }