Add tailwind navbar
This commit is contained in:
84
app/page.tsx
84
app/page.tsx
@@ -21,49 +21,49 @@ export default function Home() {
|
||||
*/}
|
||||
|
||||
<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 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 flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-4 w-full">
|
||||
<div className="w-full md:w-1/2 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-full md:w-1/2 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="max-w-4xl mx-auto mt-8 text-center">
|
||||
<h3 className="text-lg font-semibold text-gray-700 mb-2">
|
||||
What Happened?
|
||||
</h3>
|
||||
<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>
|
||||
</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="mt-8 text-center">
|
||||
<h3 className="text-lg font-semibold text-gray-700 mb-2">
|
||||
What Happened?
|
||||
</h3>
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user