Improve default page

app/page.tsx

@@ -20,42 +20,50 @@ export default function Home() {
         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"
-              />
+      <section className="w-full" style={{ backgroundColor: 'rgb(248, 249, 254)' }}>
+        <div className="max-w-screen-xl mx-auto py-24">
+          <h2 className="text-3xl font-bold text-center text-gray-800 mb-4">See how Dishpix can help you improve your content online.</h2>
+          <div className="flex flex-col items-center">
+            <h3 className="text-lg font-semibold text-center text-gray-700 mb-2">
+              Photo Comparison
+            </h3>
+            <div className="flex justify-center space-x-4 w-full">
+              <div className="w-1/4 p-4 bg-gray-100 rounded-lg shadow-md border-2 border-solid border-color-indigo-500">
+                <h4 className="text-sm font-semibold text-center text-gray-700 mb-1">
+                  Before
+                </h4>
+                <Image
+                  src="/before-photo.png"
+                  alt="Before photo"
+                  width={150}
+                  height={113}
+                  className="w-full h-auto rounded"
+                />
+              </div>
+              <div className="w-1/4 p-4 bg-gray-100 rounded-lg shadow-md border-2 border-solid border-color-indigo-500">
+                <h4 className="text-sm font-semibold text-center text-gray-700 mb-1">
+                  After
+                </h4>
+                <Image
+                  src="/after-photo.png"
+                  alt="After photo"
+                  width={150}
+                  height={113}
+                  className="w-full h-auto rounded"
+                />
+              </div>
             </div>
-            <div className="w-1/2">
-              <h3 className="text-lg font-semibold text-center text-gray-700 mb-2">
-                After
+            <div className="mt-8 text-center">
+              <h3 className="text-lg font-semibold text-gray-700 mb-2">
+                What Happened?
               </h3>
-              <Image
-                src="/after-photo.png"
-                alt="After photo"
-                width={400}
-                height={300}
-                className="w-full h-auto rounded"
-              />
+              <p className="text-gray-600">
+                Dishpix AI transforms ordinary food photos into stunning, professional-quality images. Our advanced algorithms enhance colors, adjust lighting, and add artistic touches to make your food photos look incredible. Simply upload your photo and let the magic happen!
+              </p>
             </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>
+      </section>
     </div>
   );
 }