Photo comparison

app/layout.tsx

@@ -32,6 +32,7 @@ export default function RootLayout({
         <Header/>
 
         {children}
+
       </body>
     </html>
   );

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>
   );
 }

components/ui/header.tsx

@@ -10,17 +10,17 @@ export function Header({ className }: HeaderProps) {
   return (
     <header
       className={cn(
-        "flex items-center justify-between p-4 border-b border-border",
+        "flex items-center justify-center p-4 border-b border-border w-full",
         className
       )}
     >
+      <div className="flex items-center w-full max-w-screen-xl mx-auto">
         <div className="flex items-center gap-4">
-        <img
-          src="/logo.svg"
-          alt="Logo"
-          className="h-8 w-8"
-        />
-        <nav className="flex items-center gap-6">
+          <Link href="/">
+            <img src="/logo.svg" alt="Logo" className="h-8 w-8" />
+          </Link>
+        </div>
+        <nav className="flex items-center gap-6 ml-auto">
           <Link
             href="/login"
             className="text-sm font-medium text-foreground hover:underline"