Default Component - Copy this React, Mui Component to your project

Hãy thiết kế 1 website dựa trên code này : import React from "react"; import { motion } from "framer-motion"; import Image from "next/image"; import Link from "next/link"; export default function OishiiWebsite() { const processSteps = [ "Vertically Farmed", "Pesticide-Free", "Nutrient-Rich", "Hyper-Local", "Perfectly Ripe", "Non-GMO Verified", "Always In Season" ]; const products = ["Omakase Berries", "Strawberry Mochi", "Artisanal Strawberry Jam"]; return ( <div className="min-h-screen font-sans text-gray-900 bg-white"> {/* Navigation Bar */} <header className="fixed top-0 w-full p-6 flex justify-between items-center bg-white shadow-md z-50"> <Image src="/logo.png" alt="Oishii Logo" width={150} height={50} priority /> <nav> <ul className="flex space-x-6 text-lg font-medium"> <li><Link href="#about"><a>About</a></Link></li> <li><Link href="#process"><a>Our Farm</a></Link></li> <li><Link href="#products"><a>Products</a></Link></li> <li><Link href="#contact"><a>Contact</a></Link></li> </ul> </nav> </header> {/* Hero Section */} <section className="relative h-screen flex items-center justify-center bg-cover bg-center" style={{ backgroundImage: "url('/hero.jpg')" }}> <div className="text-center text-white bg-black bg-opacity-50 p-10 rounded-lg"> <h1 className="text-6xl font-bold tracking-wide">The Ultimate Strawberry Experience</h1> <p className="mt-4 text-xl">Grown with Innovation, Enjoyed with Perfection</p> </div> </section> {/* About Hiroki Koga */} <section id="about" className="py-24 px-6 text-center bg-gray-50"> <h2 className="text-5xl font-semibold">Meet Hiroki Koga</h2> <p className="text-lg mt-6 max-w-3xl mx-auto"> A visionary in vertical farming, Hiroki Koga brings the most advanced Japanese techniques to redefine strawberry cultivation. </p> </section> {/* Production Process */} <section id="process" className="py-24 px-6 bg-white"> <h2 className="text-5xl font-semibold text-center">How We Grow</h2> <div className="grid grid-cols-1 md:grid-cols-3 gap-10 mt-12 max-w-6xl mx-auto"> {processSteps.map((item, index) => ( <motion.div key={index} whileHover={{ scale: 1.05 }} className="p-8 bg-red-200 shadow-md text-center rounded-lg"> <h3 className="text-2xl font-medium">{item}</h3> </motion.div> ))} </div> </section> {/* Products Section */} <section id="products" className="py-24 px-6 bg-gray-100 text-center"> <h2 className="text-5xl font-semibold">Our Signature Products</h2> <div className="grid grid-cols-1 md:grid-cols-3 gap-10 mt-12 max-w-6xl mx-auto"> {products.map((product, index) => ( <motion.div key={index} whileHover={{ scale: 1.05 }} className="p-8 bg-white shadow-md rounded-lg"> <h3 className="text-2xl font-medium">{product}</h3> </motion.div> ))} </div> </section> {/* Contact Section */} <section id="contact" className="py-24 px-6 text-center bg-red-50"> <h2 className="text-5xl font-semibold">Get in Touch</h2> <p className="text-lg mt-4">Experience the excellence of Oishii strawberries. Contact us for more details.</p> <button className="mt-6 px-6 py-3 bg-red-600 text-white rounded-lg text-lg font-semibold">Contact Us</button> </section> {/* Footer */} <footer className="py-10 text-center bg-gray-900 text-white"> <p className="text-lg">© 2025 Oishii | Elevating Nature’s Sweetest Fruit</p> </footer> </div> ); }