This React app uses Tailwind CSS & DaisyUI. You can keep using daisyui or you can remove it if you want and give the pure tailwind css code.

Prompt: Generate The New Code for all above components. The end goal is to make the user interface look so good. It should be attractive. Mobile responsive and must look premium. Use any style gradient or normal. It should also have the dark mode.

This website is for product page.

I will provide the components one by one. Because I cannot provide the entire code at once. So, You just think as a complete app. And generate the design properly.

The design should be consistent accross all the components. in terms of Spacing, Padding, Margin, Colour Combinations, Sizing, Responsiveness.

Generate Wisely.

CODE PART 1

Package.json

{
  "name": "ngel-product-page",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "daisyui": "^2.51.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "set PORT=5000 && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "tailwindcss": "^3.2.7"
  }
}

App.js

import { useState } from "react";
import Footer from "./components/footer/Footer";
import Home from "./components/menu/home/Home";
import Navbar from "./components/navbar/Navbar";

function App() {

  const [theme, setTheme] = useState("lofi")

  // useEffect(() => {
  //   if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
  //     setTheme("business")
  //   }
  // }, [])

  return (
    <div data-theme={theme}>
      <Navbar setTheme={setTheme} theme={theme} />
      <Home />
      <Footer />
    </div>
  );
}

export default App;

Navbar.jsx