diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..fd3dbb5
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/LICENSE.md b/LICENSE.md
new file mode 100644
index 0000000..7aa22a2
--- /dev/null
+++ b/LICENSE.md
@@ -0,0 +1,7 @@
+Copyright 2024 Arthur Bonfim
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..2e7854f
--- /dev/null
+++ b/README.md
@@ -0,0 +1,45 @@
+<p align="center">
+  <img src="./public/assets/page.gif.gif">
+</p>
+
+<h1 align='center'>
+    <p>Restaurant menu🍲</p>
+</h1>
+
+
+<h2 align="center">
+  <p>From classic dishes to surprising creations, our menu is a refinement of refined flavors!</p>
+  <a href="https://restaurant-menu-ten-bice.vercel.app/"'>
+    See the page!
+  </a>
+</h2>
+
+## 🥘 About 
+Welcome to the Restaurant Menu repository! This project is a web application designed to manage and display a restaurant's menu in an intuitive and interactive way. Here, you will find all the information needed to understand, set up, and contribute to the development of this application.
+
+## 🦐 Features
+- **Menu Viewing**: Displays dishes organized by categories, with detailed descriptions, prices, and images.
+- **Search and Filters**: Tools for searching and filtering to easily find specific dishes.
+
+## 🔨 Tools
+- [Next.js](https://nextjs.org/)
+- [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML)
+- [CSS](https://developer.mozilla.org/pt-BR/docs/Web/CSS)
+- [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
+
+## 🔴 How to Contribute
+```bash
+    #Clone the project
+    $ git clone https://github.com/arthurbonfim/restaurant-menu
+```
+```bash
+    #Enter the directory
+    $ cd restaurant-menu
+```
+```bash
+    #Install the dependencies
+    $ npm install
+```
+## 📜 License
+This project is under the MIT license. See the file [LICENSE](LICENSE.md) for more details.
+
diff --git a/jsconfig.json b/jsconfig.json
new file mode 100644
index 0000000..b8d6842
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
diff --git a/next.config.mjs b/next.config.mjs
new file mode 100644
index 0000000..4678774
--- /dev/null
+++ b/next.config.mjs
@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..8dba5f2
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,399 @@
+{
+  "name": "restaurant-menu",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "restaurant-menu",
+      "version": "0.1.0",
+      "dependencies": {
+        "next": "14.2.3",
+        "react": "^18",
+        "react-dom": "^18"
+      }
+    },
+    "node_modules/@next/env": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.3.tgz",
+      "integrity": "sha512-W7fd7IbkfmeeY2gXrzJYDx8D2lWKbVoTIj1o1ScPHNzvp30s1AuoEFSdr39bC5sjxJaxTtq3OTCZboNp0lNWHA=="
+    },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.3.tgz",
+      "integrity": "sha512-3pEYo/RaGqPP0YzwnlmPN2puaF2WMLM3apt5jLW2fFdXD9+pqcoTzRk+iZsf8ta7+quAe4Q6Ms0nR0SFGFdS1A==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.3.tgz",
+      "integrity": "sha512-6adp7waE6P1TYFSXpY366xwsOnEXM+y1kgRpjSRVI2CBDOcbRjsJ67Z6EgKIqWIue52d2q/Mx8g9MszARj8IEA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.3.tgz",
+      "integrity": "sha512-cuzCE/1G0ZSnTAHJPUT1rPgQx1w5tzSX7POXSLaS7w2nIUJUD+e25QoXD/hMfxbsT9rslEXugWypJMILBj/QsA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.3.tgz",
+      "integrity": "sha512-0D4/oMM2Y9Ta3nGuCcQN8jjJjmDPYpHX9OJzqk42NZGJocU2MqhBq5tWkJrUQOQY9N+In9xOdymzapM09GeiZw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.3.tgz",
+      "integrity": "sha512-ENPiNnBNDInBLyUU5ii8PMQh+4XLr4pG51tOp6aJ9xqFQ2iRI6IH0Ds2yJkAzNV1CfyagcyzPfROMViS2wOZ9w==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.3.tgz",
+      "integrity": "sha512-BTAbq0LnCbF5MtoM7I/9UeUu/8ZBY0i8SFjUMCbPDOLv+un67e2JgyN4pmgfXBwy/I+RHu8q+k+MCkDN6P9ViQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.3.tgz",
+      "integrity": "sha512-AEHIw/dhAMLNFJFJIJIyOFDzrzI5bAjI9J26gbO5xhAKHYTZ9Or04BesFPXiAYXDNdrwTP2dQceYA4dL1geu8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.3.tgz",
+      "integrity": "sha512-vga40n1q6aYb0CLrM+eEmisfKCR45ixQYXuBXxOOmmoV8sYST9k7E3US32FsY+CkkF7NtzdcebiFT4CHuMSyZw==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.3.tgz",
+      "integrity": "sha512-Q1/zm43RWynxrO7lW4ehciQVj+5ePBhOK+/K2P7pLFX3JaJ/IZVC69SHidrmZSOkqz7ECIOhhy7XhAFG4JYyHA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@swc/counter": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
+      "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ=="
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.5.tgz",
+      "integrity": "sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==",
+      "dependencies": {
+        "@swc/counter": "^0.1.3",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/busboy": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
+      "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
+      "dependencies": {
+        "streamsearch": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=10.16.0"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001621",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001621.tgz",
+      "integrity": "sha512-+NLXZiviFFKX0fk8Piwv3PfLPGtRqJeq2TiNoUff/qB5KJgwecJTvCXDpmlyP/eCI/GUEmp/h/y5j0yckiiZrA==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ]
+    },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/next": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/next/-/next-14.2.3.tgz",
+      "integrity": "sha512-dowFkFTR8v79NPJO4QsBUtxv0g9BrS/phluVpMAt2ku7H+cbcBJlopXjkWlwxrk/xGqMemr7JkGPGemPrLLX7A==",
+      "dependencies": {
+        "@next/env": "14.2.3",
+        "@swc/helpers": "0.5.5",
+        "busboy": "1.6.0",
+        "caniuse-lite": "^1.0.30001579",
+        "graceful-fs": "^4.2.11",
+        "postcss": "8.4.31",
+        "styled-jsx": "5.1.1"
+      },
+      "bin": {
+        "next": "dist/bin/next"
+      },
+      "engines": {
+        "node": ">=18.17.0"
+      },
+      "optionalDependencies": {
+        "@next/swc-darwin-arm64": "14.2.3",
+        "@next/swc-darwin-x64": "14.2.3",
+        "@next/swc-linux-arm64-gnu": "14.2.3",
+        "@next/swc-linux-arm64-musl": "14.2.3",
+        "@next/swc-linux-x64-gnu": "14.2.3",
+        "@next/swc-linux-x64-musl": "14.2.3",
+        "@next/swc-win32-arm64-msvc": "14.2.3",
+        "@next/swc-win32-ia32-msvc": "14.2.3",
+        "@next/swc-win32-x64-msvc": "14.2.3"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.1.0",
+        "@playwright/test": "^1.41.2",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "sass": "^1.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@playwright/test": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
+      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew=="
+    },
+    "node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/streamsearch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
+      "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/styled-jsx": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
+      "integrity": "sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==",
+      "dependencies": {
+        "client-only": "0.0.1"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "babel-plugin-macros": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..cd6b78f
--- /dev/null
+++ b/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "restaurant-menu",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "react": "^18",
+    "react-dom": "^18",
+    "next": "14.2.3"
+  }
+}
diff --git a/public/assets/banner.png b/public/assets/banner.png
new file mode 100644
index 0000000..7038cc3
Binary files /dev/null and b/public/assets/banner.png differ
diff --git a/public/assets/bebidas.png b/public/assets/bebidas.png
new file mode 100644
index 0000000..a910880
Binary files /dev/null and b/public/assets/bebidas.png differ
diff --git a/public/assets/carne.png b/public/assets/carne.png
new file mode 100644
index 0000000..8cde198
Binary files /dev/null and b/public/assets/carne.png differ
diff --git a/public/assets/entrada.png b/public/assets/entrada.png
new file mode 100644
index 0000000..7fca302
Binary files /dev/null and b/public/assets/entrada.png differ
diff --git a/public/assets/favicon.ico b/public/assets/favicon.ico
new file mode 100644
index 0000000..ffe6b02
Binary files /dev/null and b/public/assets/favicon.ico differ
diff --git a/public/assets/img/agua.jpg b/public/assets/img/agua.jpg
new file mode 100644
index 0000000..b799f39
Binary files /dev/null and b/public/assets/img/agua.jpg differ
diff --git a/public/assets/img/aligot.jpg b/public/assets/img/aligot.jpg
new file mode 100644
index 0000000..8224c4a
Binary files /dev/null and b/public/assets/img/aligot.jpg differ
diff --git a/public/assets/img/banoffee.png b/public/assets/img/banoffee.png
new file mode 100644
index 0000000..2a7f2b5
Binary files /dev/null and b/public/assets/img/banoffee.png differ
diff --git a/public/assets/img/bife-ancho.jpg b/public/assets/img/bife-ancho.jpg
new file mode 100644
index 0000000..18d8237
Binary files /dev/null and b/public/assets/img/bife-ancho.jpg differ
diff --git a/public/assets/img/bruschetta.jpg b/public/assets/img/bruschetta.jpg
new file mode 100644
index 0000000..d2e58c8
Binary files /dev/null and b/public/assets/img/bruschetta.jpg differ
diff --git a/public/assets/img/capeletti.jpg b/public/assets/img/capeletti.jpg
new file mode 100644
index 0000000..582b94f
Binary files /dev/null and b/public/assets/img/capeletti.jpg differ
diff --git a/public/assets/img/carpaccio.jpg b/public/assets/img/carpaccio.jpg
new file mode 100644
index 0000000..d8277ca
Binary files /dev/null and b/public/assets/img/carpaccio.jpg differ
diff --git a/public/assets/img/cerveja.jpg b/public/assets/img/cerveja.jpg
new file mode 100644
index 0000000..d3affda
Binary files /dev/null and b/public/assets/img/cerveja.jpg differ
diff --git a/public/assets/img/cheesecake.jpg b/public/assets/img/cheesecake.jpg
new file mode 100644
index 0000000..ed17429
Binary files /dev/null and b/public/assets/img/cheesecake.jpg differ
diff --git a/public/assets/img/ebi-spicy.jpg b/public/assets/img/ebi-spicy.jpg
new file mode 100644
index 0000000..3c17cb8
Binary files /dev/null and b/public/assets/img/ebi-spicy.jpg differ
diff --git a/public/assets/img/espaguete.jpg b/public/assets/img/espaguete.jpg
new file mode 100644
index 0000000..8b70717
Binary files /dev/null and b/public/assets/img/espaguete.jpg differ
diff --git a/public/assets/img/file-mignon.jpg b/public/assets/img/file-mignon.jpg
new file mode 100644
index 0000000..6f82479
Binary files /dev/null and b/public/assets/img/file-mignon.jpg differ
diff --git a/public/assets/img/lasanha.jpg b/public/assets/img/lasanha.jpg
new file mode 100644
index 0000000..7746750
Binary files /dev/null and b/public/assets/img/lasanha.jpg differ
diff --git a/public/assets/img/mil-folhas.jpg b/public/assets/img/mil-folhas.jpg
new file mode 100644
index 0000000..e777b99
Binary files /dev/null and b/public/assets/img/mil-folhas.jpg differ
diff --git a/public/assets/img/nhoque.jpg b/public/assets/img/nhoque.jpg
new file mode 100644
index 0000000..dc8c201
Binary files /dev/null and b/public/assets/img/nhoque.jpg differ
diff --git a/public/assets/img/paella.jpg b/public/assets/img/paella.jpg
new file mode 100644
index 0000000..8467e29
Binary files /dev/null and b/public/assets/img/paella.jpg differ
diff --git a/public/assets/img/picanha.png b/public/assets/img/picanha.png
new file mode 100644
index 0000000..9c255e1
Binary files /dev/null and b/public/assets/img/picanha.png differ
diff --git a/public/assets/img/prime-rib.jpg b/public/assets/img/prime-rib.jpg
new file mode 100644
index 0000000..d0d8a62
Binary files /dev/null and b/public/assets/img/prime-rib.jpg differ
diff --git a/public/assets/img/pudim.jpg b/public/assets/img/pudim.jpg
new file mode 100644
index 0000000..a47e0a4
Binary files /dev/null and b/public/assets/img/pudim.jpg differ
diff --git a/public/assets/img/ravioli.jpg b/public/assets/img/ravioli.jpg
new file mode 100644
index 0000000..1c8a96f
Binary files /dev/null and b/public/assets/img/ravioli.jpg differ
diff --git a/public/assets/img/refrigerante.jpg b/public/assets/img/refrigerante.jpg
new file mode 100644
index 0000000..592cf3d
Binary files /dev/null and b/public/assets/img/refrigerante.jpg differ
diff --git a/public/assets/img/salada-caprese.jpg b/public/assets/img/salada-caprese.jpg
new file mode 100644
index 0000000..8f123c7
Binary files /dev/null and b/public/assets/img/salada-caprese.jpg differ
diff --git a/public/assets/img/salada-ceasar.jpg b/public/assets/img/salada-ceasar.jpg
new file mode 100644
index 0000000..5b3c97a
Binary files /dev/null and b/public/assets/img/salada-ceasar.jpg differ
diff --git a/public/assets/img/salada-grega.jpg b/public/assets/img/salada-grega.jpg
new file mode 100644
index 0000000..0fc56eb
Binary files /dev/null and b/public/assets/img/salada-grega.jpg differ
diff --git a/public/assets/img/salada-nicoise.jpg b/public/assets/img/salada-nicoise.jpg
new file mode 100644
index 0000000..c82aecb
Binary files /dev/null and b/public/assets/img/salada-nicoise.jpg differ
diff --git a/public/assets/img/salada-waldorf.jpg b/public/assets/img/salada-waldorf.jpg
new file mode 100644
index 0000000..bf99817
Binary files /dev/null and b/public/assets/img/salada-waldorf.jpg differ
diff --git a/public/assets/img/suco.jpg b/public/assets/img/suco.jpg
new file mode 100644
index 0000000..175b8df
Binary files /dev/null and b/public/assets/img/suco.jpg differ
diff --git a/public/assets/img/tiramisu.jpg b/public/assets/img/tiramisu.jpg
new file mode 100644
index 0000000..ef499d6
Binary files /dev/null and b/public/assets/img/tiramisu.jpg differ
diff --git a/public/assets/img/tomahawk-steak.jpg b/public/assets/img/tomahawk-steak.jpg
new file mode 100644
index 0000000..f43e40c
Binary files /dev/null and b/public/assets/img/tomahawk-steak.jpg differ
diff --git a/public/assets/img/whiskey.jpg b/public/assets/img/whiskey.jpg
new file mode 100644
index 0000000..7d9ba54
Binary files /dev/null and b/public/assets/img/whiskey.jpg differ
diff --git a/public/assets/lupa.png b/public/assets/lupa.png
new file mode 100644
index 0000000..251911b
Binary files /dev/null and b/public/assets/lupa.png differ
diff --git a/public/assets/massa.png b/public/assets/massa.png
new file mode 100644
index 0000000..0315c04
Binary files /dev/null and b/public/assets/massa.png differ
diff --git a/public/assets/page.gif.gif b/public/assets/page.gif.gif
new file mode 100644
index 0000000..3e7526b
Binary files /dev/null and b/public/assets/page.gif.gif differ
diff --git a/public/assets/salada.png b/public/assets/salada.png
new file mode 100644
index 0000000..c4f4d07
Binary files /dev/null and b/public/assets/salada.png differ
diff --git a/public/assets/sobremesa.png b/public/assets/sobremesa.png
new file mode 100644
index 0000000..6d4abef
Binary files /dev/null and b/public/assets/sobremesa.png differ
diff --git a/src/app/globals.css b/src/app/globals.css
new file mode 100644
index 0000000..70ddb41
--- /dev/null
+++ b/src/app/globals.css
@@ -0,0 +1,61 @@
+@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+@import url("https://fonts.googleapis.com/css?family=Sofia&effect=fire");
+
+@layer base {
+    html, body, div, span, applet, object, iframe,
+    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+    a, abbr, acronym, address, big, cite, code,
+    del, dfn, em, img, ins, kbd, q, s, samp,
+    small, strike, strong, sub, sup, tt, var,
+    b, u, i, center,
+    dl, dt, dd, ol, ul, li,
+    fieldset, form, label, legend,
+    table, caption, tbody, tfoot, thead, tr, th, td,
+    article, aside, canvas, details, embed, 
+    figure, figcaption, footer, header, hgroup, 
+    menu, nav, output, ruby, section, summary,
+    time, mark, audio, video {
+        margin: 0;
+        padding: 0;
+        border: 0;
+        font-size: 100%;
+        font: inherit;
+        vertical-align: baseline;
+    }
+    /* HTML5 display-role reset for older browsers */
+    article, aside, details, figcaption, figure, 
+    footer, header, hgroup, menu, nav, section {
+        display: block;
+    }
+    body {
+        line-height: 1;
+    }
+    ol, ul {
+        list-style: none;
+    }
+    blockquote, q {
+        quotes: none;
+    }
+    blockquote:before, blockquote:after,
+    q:before, q:after {
+        content: '';
+        content: none;
+    }
+    table {
+        border-collapse: collapse;
+        border-spacing: 0;
+    }
+    * {
+        font-family: "Poppins", sans-serif;
+        box-sizing: border-box;
+    }
+}
+
+@layer utilities {
+    .container-1024 {
+        width: 100%;
+        max-width: 1024px;
+        margin: 0 auto;
+    }
+}
+
diff --git a/src/app/layout.js b/src/app/layout.js
new file mode 100644
index 0000000..449f906
--- /dev/null
+++ b/src/app/layout.js
@@ -0,0 +1,23 @@
+import Head from 'next/head';
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata = {
+  title: "Restaurant Menu",
+  description: "Generated by create next app",
+  icons: {
+    icon: 'assets/favicon.ico',},
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="pt-br">
+      <head>
+        <link rel="icon" href="/favicon.ico" sizes="any" />
+      </head>
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}
diff --git a/src/app/page.js b/src/app/page.js
new file mode 100644
index 0000000..7b0433e
--- /dev/null
+++ b/src/app/page.js
@@ -0,0 +1,78 @@
+"use client";
+import Head from "next/head";
+import styles from "@/app/page.module.css";
+import { useState } from "react";
+import {filterProducts , searchProducts} from "@/service";
+import Categories from "@/components/Categories";
+import SearchBox from "@/components/SearchBox";
+import Card from "@/components/Card";
+
+export default function Home() {
+
+  const [list, setList] = useState(filterProducts('Entradas'));
+  const [srchdTxt, setSrcdTxt] = useState('');
+  const [btnClicked, setBtnClicked] = useState('Entradas');
+
+  const handleFilter = (category) => {
+    setList(filterProducts(category));
+    setBtnClicked(category);
+    setSrcdTxt('');
+  } 
+
+  const handleSearch = (typedText) => {
+    setSrcdTxt(typedText);
+    if(typedText.length > 2){
+      setList(searchProducts(typedText))
+    }
+  }
+
+  return (
+    <>
+      <Head>
+        <title>Cardápio dgital</title>
+        <meta name="description" content="Cardapio dgital" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+      </Head>
+
+      <div className='container-1024'>
+
+        <section className={styles.banner}>
+          <h1 className="font-effect-fire">Restaurant</h1>
+          <p>De pratos clássicos a criações surpreendentes,<br/>
+          nosso cardápio é um requinte de sabores<br/>refinados.</p>
+        </section>
+
+        <main className={styles.mainCont}>
+          <Categories
+          onClickEntradas={()=> handleFilter('Entradas')}
+          onClickMassas={()=> handleFilter('Massas')}
+          onClickCarnes={()=> handleFilter('Carnes')}
+          onClickBebidas={()=> handleFilter('Bebidas')}
+          onClickSaladas={()=> handleFilter('Saladas')}
+          onClickSobremesas={()=> handleFilter('Sobremesas')} 
+          selectedBtn={btnClicked} />
+
+          <SearchBox
+          onChange={(event)=> handleSearch(event.target.value)}
+          value={srchdTxt} />
+
+          <section className={styles.foodMenu}>
+            <h2>Cardápio</h2>
+            <div className={styles.cards}>           
+              {list.map((product) =>
+                <Card
+                key={product.id}
+                name={product.name}
+                image={product.image}
+                category={product.category}
+                description={product.description}
+                price={product.price}
+                length={list.length} />
+              )}
+            </div>
+          </section>
+        </main>
+      </div>
+    </>
+  );
+}
diff --git a/src/app/page.module.css b/src/app/page.module.css
new file mode 100644
index 0000000..0ee7844
--- /dev/null
+++ b/src/app/page.module.css
@@ -0,0 +1,47 @@
+.banner {
+  width: 100%;
+  height: 500px;
+  background-image: url('../../public/assets/banner.png');
+  background-size: cover;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+.banner h1 {
+  font-family: "Poppins", sans-serif;
+  font-size: 3rem;
+  letter-spacing: 4px;
+  text-transform: uppercase;
+  font-weight: 500;
+  margin-bottom: 10px;
+}
+.banner p {
+  font-family: "Dancing Script", cursive;
+  font-size: 2rem;
+  color: #daa520;
+}
+
+.mainCont {
+  padding: 50px 20px;
+}
+
+.foodMenu {
+  margin-top: 30px;
+}
+.foodMenu h2 {
+  font-family: "Dancing Script", cursive;
+  font-size: 2rem;
+  font-weight: bold;
+  text-align: center;
+  color: #daa520;
+  margin-bottom: 15px;
+}
+
+.cards {
+  display: flex;
+  flex-flow: row wrap;
+  background-color: #f3f3f3;
+  border-radius: 5px;
+}
diff --git a/src/components/Card/Card.module.css b/src/components/Card/Card.module.css
new file mode 100644
index 0000000..f7cda7c
--- /dev/null
+++ b/src/components/Card/Card.module.css
@@ -0,0 +1,45 @@
+.card {
+    min-width: 250px;
+    width: calc(100% / 3 - 40px);
+    margin: 20px;
+    border: 2px solid #daa520;
+    border-radius: 5px;
+    box-shadow: 0 0 10px 5px #dddddd;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    flex-grow: 1;
+}
+.card__img {
+    width: 100%;
+    height: 250px;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+}
+.card__img img {
+    width: 100%;
+    min-height: 250px;
+    height: auto;
+}
+.card__info {
+    min-height: 150px;
+    padding: 10px;
+    margin-bottom: 20px;
+}
+.card__info h3 {
+    font-size: 1.5rem;
+    margin-bottom: 10px;
+    font-weight: 500;
+}
+.card__category{
+    color: #daa520;
+    margin-bottom: 10px;
+}
+.card__price {
+    text-align: right;
+    font-weight: bold;
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+}
diff --git a/src/components/Card/index.jsx b/src/components/Card/index.jsx
new file mode 100644
index 0000000..a8fb846
--- /dev/null
+++ b/src/components/Card/index.jsx
@@ -0,0 +1,20 @@
+import styles from './Card.module.css';
+import Image from 'next/image';
+
+export default function Card ({name, image, category, description, price}) {
+    return(
+        <div className={styles.card}>
+            <div className={styles.card__img}>
+                <Image src={image} alt={name}/>
+            </div>
+            <div className={styles.card__info}>
+                <h3>{name}</h3>
+                <p className={styles.card__category}>{category}</p>
+                <p className={styles.card__desc}>{description}</p>
+                <p className={styles.card__price}>R$ {price.toFixed(2)
+                .replace('.',',')}</p>
+            </div>
+
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/components/Categories/Categories.module.css b/src/components/Categories/Categories.module.css
new file mode 100644
index 0000000..dd219cb
--- /dev/null
+++ b/src/components/Categories/Categories.module.css
@@ -0,0 +1,34 @@
+.categories {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-between;
+    margin-bottom: 15px;
+}
+
+.btn {
+    width:  150px;
+    height: 40px;
+    padding: 10px;
+    margin: 5px 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: unset;
+    border-radius: 3px;
+    background-color: #f3f3f3;
+    flex-grow: 1;
+}
+.btn img {
+    width: 25px;
+    height: auto;
+    margin-right: 5px;
+}
+.btn span {
+    font-weight: bold;
+    font-size: 14px;
+}
+
+/*btn when is  on hover or selected*/
+.btn:hover , .selectedBtn {
+    background-color: #daa520;
+}
\ No newline at end of file
diff --git a/src/components/Categories/index.jsx b/src/components/Categories/index.jsx
new file mode 100644
index 0000000..1190b9e
--- /dev/null
+++ b/src/components/Categories/index.jsx
@@ -0,0 +1,49 @@
+import styles from './Categories.module.css';
+import Image from 'next/image';
+import Entrada from '../../../public/assets/entrada.png';
+import Massa from '../../../public/assets/massa.png';
+import Carne from '../../../public/assets/carne.png';
+import Bebidas from '../../../public/assets/bebidas.png';
+import Salada from '../../../public/assets/salada.png';
+import Sobremesa from '../../../public/assets/sobremesa.png';
+
+
+export default function Categories (props) {
+    const handleSelectedBtn = (category) => props.selectedBtn == category && 
+    styles.selectedBtn;
+
+    return(
+        <section className={styles.categories}>
+            <button onClick={props.onClickEntradas} 
+            className={`${styles.btn} ${handleSelectedBtn('Entradas')}`}>
+                <Image src={Entrada} alt='prato-de-entrada'/>
+                <span>Entradas</span>
+            </button>
+            <button onClick={props.onClickMassas}
+            className={`${styles.btn} ${handleSelectedBtn('Massas')}`}>
+                <Image src={Massa} alt='prato-de-macarrao'/>
+                <span>Massas</span>
+            </button>
+            <button onClick={props.onClickCarnes}
+            className={`${styles.btn} ${handleSelectedBtn('Carnes')}`}>
+                <Image src={Carne} alt='bife'/>
+                <span>Carnes</span>
+            </button>
+            <button onClick={props.onClickBebidas}
+            className={`${styles.btn} ${handleSelectedBtn('Bebidas')}`}>
+                <Image src={Bebidas} alt='copos-de-cerveja'/>
+                <span>Bebidas</span>
+            </button>
+            <button onClick={props.onClickSaladas}
+            className={`${styles.btn} ${handleSelectedBtn('Saladas')}`}>
+                <Image src={Salada} alt='prato-de-salada'/>
+                <span>Saladas</span>
+            </button>
+            <button onClick={props.onClickSobremesas}
+            className={`${styles.btn} ${handleSelectedBtn('Sobremesas')}`}>
+                <Image src={Sobremesa} alt='taca-de-sorvete'/>
+                <span>Sobremesas</span>
+            </button>
+        </section>
+    )
+}
\ No newline at end of file
diff --git a/src/components/SearchBox/SearchBox.module.css b/src/components/SearchBox/SearchBox.module.css
new file mode 100644
index 0000000..2128a82
--- /dev/null
+++ b/src/components/SearchBox/SearchBox.module.css
@@ -0,0 +1,29 @@
+.searchBox {
+    width: 100%;
+    height: 40px;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    border: 1px solid #a3a3a3;
+    border-radius: 200px;
+}
+.searchBox img {
+    width: 25px;
+    height: auto;
+    margin: 0 10px
+}
+.searchBox__field {
+    width: calc(100% - 45px);
+    height: 100%;
+    border: unset;
+    border-radius: 200px;
+}
+
+/*styles when the user click the search field*/
+.searchBox__field:focus {
+    outline: unset;
+    color: #daa520;;
+}
+.searchBox:focus-within {
+    border: 1px solid #daa520;
+}
\ No newline at end of file
diff --git a/src/components/SearchBox/index.jsx b/src/components/SearchBox/index.jsx
new file mode 100644
index 0000000..b82dbeb
--- /dev/null
+++ b/src/components/SearchBox/index.jsx
@@ -0,0 +1,17 @@
+import styles from './SearchBox.module.css';
+import Image from 'next/image';
+import Lupa from '../../../public/assets/lupa.png';
+
+export default function SearchBox (props) {
+    return(
+        <form className={styles.searchBox}>
+            <Image src={Lupa} alt='lupa'/>
+            <input className={styles.searchBox__field}
+            type='text'
+            placeholder='Pesquise aqui um de nossos pratos do nosso cardápio'
+            value={props.value}
+            onChange={props.onChange}
+            />
+        </form>
+    )
+}
\ No newline at end of file
diff --git a/src/data/index.js b/src/data/index.js
new file mode 100644
index 0000000..3782803
--- /dev/null
+++ b/src/data/index.js
@@ -0,0 +1,302 @@
+import espaguete from "../../public/assets/img/espaguete.jpg";
+import lasanha from "../../public/assets/img/lasanha.jpg";
+import ravioli from "../../public/assets/img/ravioli.jpg";
+import capeletti from "../../public/assets/img/capeletti.jpg";
+import nhoque from "../../public/assets/img/nhoque.jpg";
+import bruschetta from "../../public/assets/img/bruschetta.jpg";
+import carpaccio from "../../public/assets/img/carpaccio.jpg";
+import paella from "../../public/assets/img/paella.jpg";
+import ebiSpicy from "../../public/assets/img/ebi-spicy.jpg";
+import aligot from "../../public/assets/img/aligot.jpg";
+import fileMignon from "../../public/assets/img/file-mignon.jpg";
+import picanha from "../../public/assets/img/picanha.png";
+import bifeAncho from "../../public/assets/img/bife-ancho.jpg";
+import tomahwankSteak from "../../public/assets/img/tomahawk-steak.jpg";
+import primeRib from "../../public/assets/img/prime-rib.jpg";
+import banoffee from "../../public/assets/img/banoffee.png";
+import tiramisu from "../../public/assets/img/tiramisu.jpg";
+import cheesecake from "../../public/assets/img/cheesecake.jpg";
+import milFolhas from "../../public/assets/img/mil-folhas.jpg";
+import pudim from "../../public/assets/img/pudim.jpg";
+import cerveja from "../../public/assets/img/cerveja.jpg";
+import refrigerante from "../../public/assets/img/refrigerante.jpg";
+import suco from "../../public/assets/img/suco.jpg";
+import whiskey from "../../public/assets/img/whiskey.jpg";
+import agua from "../../public/assets/img/agua.jpg";
+import saladaCeasar from "../../public/assets/img/salada-ceasar.jpg";
+import saladaCaprese from "../../public/assets/img/salada-caprese.jpg";
+import saladaWaldorf from "../../public/assets/img/salada-waldorf.jpg";
+import saladaGrega from "../../public/assets/img/salada-grega.jpg";
+import saladaNicoise from "../../public/assets/img/salada-nicoise.jpg";
+
+export const products = [
+  {
+    id: 1,
+    name: "Espaguete",
+    category: "Massas",
+    price: 20.0,
+    description:
+      "Um delicioso espaguete que pode ser combinado com diversos molhos, como bolonhesa, carbonara, alho e oleo e pesto",
+    image: espaguete,
+  },
+  {
+    id: 2,
+    name: "Lasanha",
+    category: "Massas",
+    price: 25.0,
+    description:
+      "Uma maravilhosa lasanha com recheios variados como carne moída, frango, presunto e queijo, legumos e molho branco ou vermelho",
+    image: lasanha,
+  },
+  {
+    id: 3,
+    name: "Ravioli",
+    category: "Massas",
+    price: 24.25,
+    description:
+      "Uma massa recheada com diferentes ingredientes como queijo, carne, espinafre ou cogumelos",
+    image: ravioli,
+  },
+  {
+    id: 4,
+    name: "Capeletti",
+    category: "Massas",
+    price: 25.5,
+    description:
+      "Uma massa simples servida com diversos tipos de molhos como bolonhesa, carbonara, alfredo, pesto ou manteiga e sálvia",
+    image: capeletti,
+  },
+  {
+    id: 5,
+    name: "Nhoque",
+    category: "Massas",
+    price: 8.99,
+    description:
+      "Massa feita de farinha de trigo e ovos, servida com molhos simples ou elaborados como, manteiga e parmesão, frango ao creme ou camarão alho e oleo",
+    image: nhoque,
+  },
+  {
+    id: 6,
+    name: "Bruschetta",
+    category: "Entradas",
+    price: 9.2,
+    description:
+      "Prato original da Itália, que leva fatias de pão italiano torrado, tomate picado, alho, manjericão e azeite",
+    image: bruschetta,
+  },
+  {
+    id: 7,
+    name: "Carpaccio",
+    category: "Entradas",
+    price: 32.0,
+    description:
+      "Prato de origem francesa, que leva fatias finas de salmão cru, alcaparras, queijo parmesão ralado e molho mostarda",
+    image: carpaccio,
+  },
+  {
+    id: 8,
+    name: "Paella",
+    category: "Entradas",
+    price: 65.0,
+    description:
+      "Um prato tipico do leste da Espanha, que leva arroz e frutos do mar como mariscos, polvo, camarões, mexilhões e lulas",
+    image: paella,
+  },
+  {
+    id: 9,
+    name: "Ebi Spicy",
+    category: "Entradas",
+    price: 62.0,
+    description:
+      "Prato tipico do Japão, que leva camarões empanados em massa tempurá, maionese e molho picante",
+    image: ebiSpicy,
+  },
+  {
+    id: 10,
+    name: "Aligot",
+    category: "Entradas",
+    price: 18.99,
+    description:
+      "Um irrestivel purê de batata francês com queijo gruyere e meia cura",
+    image: aligot,
+  },
+  {
+    id: 11,
+    name: "Filé Mignon",
+    category: "Carnes",
+    price: 41.99,
+    description:
+      "Com pouca gordura e fibras, além de muito macia, essa carne vai bem com diversos tipos de molhos",
+    image: fileMignon,
+  },
+  {
+    id: 12,
+    name: "Picanha",
+    category: "Carnes",
+    price: 35.99,
+    description:
+      "Uma execelente carne que tem uma capa de gordura e fibras generosas que acentuam o sabor e a maciez do corte",
+    image: picanha,
+  },
+  {
+    id: 13,
+    name: "Bife Ancho",
+    category: "Carnes",
+    price: 39.99,
+    description:
+      "Uma carne que tem um ótimo nível de marmoreio e um sabor delicado, podendendo ser feita tanto na grelha ou na frigideira",
+    image: bifeAncho,
+  },
+  {
+    id: 14,
+    name: "Tomahawk Steak",
+    category: "Carnes",
+    price: 159.99,
+    description:
+      "É uma carne que combina duas texturas e sabores diferentes em uma só peça, e pode ser feita na grelha ou no forno",
+    image: tomahwankSteak,
+  },
+  {
+    id: 15,
+    name: "Prime Rib",
+    category: "Carnes",
+    price: 59.99,
+    description:
+      "Parte dianteira da costela bovina, muito suculenta e saborosa, que pode ser feita na grelha ou no forno",
+    image: primeRib,
+  },
+  {
+    id: 16,
+    name: "Tiramisu",
+    category: "Sobremesas",
+    price: 15.99,
+    description:
+      "Sobremesa italiana que leva pão de ló, café, queijo mascarpone, ovos, açucar e cacau em pó",
+    image: tiramisu,
+  },
+  {
+    id: 17,
+    name: "Cheesecake",
+    category: "Sobremesas",
+    price: 8.99,
+    description:
+      "Típica sobremesa dos Estados Unidos, que leva bolo, cream cheese e calda de frutas",
+    image: cheesecake,
+  },
+  {
+    id: 18,
+    name: "Banoffee",
+    category: "Sobremesas",
+    price: 9.99,
+    description:
+      "Uma sobremesa inglesa, feita a base de biscoito triturado com manteiga, uma camada de doce de leite, banana fatiada e chantilly",
+    image: banoffee,
+  },
+  {
+    id: 19,
+    name: "Mil-folhas",
+    category: "Sobremesas",
+    price: 9.99,
+    description:
+      "Sobremesa de origem francesa, feita com massa folhada crocante e recheio cremoso de baunilha, chocolate ou frutas e açucar de confeiteiro",
+    image: milFolhas,
+  },
+  {
+    id: 20,
+    name: "Pudim",
+    category: "Sobremesas",
+    price: 5.99,
+    description:
+      "Sobremesa cremosa e gelada muito popular no Brasil, feita com leite condesado, leite e ovos",
+    image: pudim,
+  },
+  {
+    id: 21,
+    name: "Cerveja Artesanal",
+    category: "Bebidas",
+    price: 12.99,
+    description:
+      "Cerveja artesanal de produção alemã que leva ingredientes nobres como malte, lúpulu, água e levedura ",
+    image: cerveja,
+  },
+  {
+    id: 22,
+    name: "Refrigerante",
+    category: "Bebidas",
+    price: 7.99,
+    description:
+      "Um refrescante refrigerante de cola com pequenos pedaços de limão e raspas de hortelã",
+    image: refrigerante,
+  },
+  {
+    id: 23,
+    name: "Suco",
+    category: "Bebidas",
+    price: 6.99,
+    description:
+      "Mais puro suco de laranjas holandesas frescas e levemente adocicada",
+    image: suco,
+  },
+  {
+    id: 24,
+    name: "Whiskey",
+    category: "Bebidas",
+    price: 17.99,
+    description:
+      "Um poderoso whiskey sabor bourbon, envelhecido em barris de carvalho branco carbonizado",
+    image: whiskey,
+  },
+  {
+    id: 25,
+    name: "Água",
+    category: "Bebidas",
+    price: 4.99,
+    description: "Água mineral saborizada com limão siciliano",
+    image: agua,
+  },
+  {
+    id: 26,
+    name: "Salada Ceasar",
+    category: "Saladas",
+    price: 19.8,
+    description:
+      "Salada preparada com alface-romana, torrada, queijo parmesão e molho Ceasar",
+    image: saladaCeasar,
+  },
+  {
+    id: 27,
+    name: "Salada Caprese",
+    category: "Saladas",
+    price: 22.0,
+    description:
+      "Uma salada italiana, feita com mussarela fresca, tomate e manjericão, temperada com sal e azeite",
+    image: saladaCaprese,
+  },
+  {
+    id: 28,
+    name: "Salada Waldorf",
+    category: "Saladas",
+    price: 40.0,
+    description:
+      "Criada em 1893 no Waldorf Hotel, essa salada leva uma fatia de maça e aipo, nozes cortadas, maionese",
+    image: saladaWaldorf,
+  },
+  {
+    id: 29,
+    name: "Salada Grega",
+    category: "Saladas",
+    price: 13.99,
+    description:
+      "Versão original da salada que leva tomate, pepino, pimentão, cebola roxa, pimenta-do-reino, orégano, azeite e queijo feta",
+    image: saladaGrega,
+  },
+  {
+    id: 30,
+    name: "Salada Niçoise",
+    category: "Saladas",
+    price: 22.99,
+    description:
+      "Salada tradicional da cidade de Nice, feita com tomate, ovos cozidos, azeitona niçoise, azeite e atum",
+    image: saladaNicoise,
+  }
+];
\ No newline at end of file
diff --git a/src/service/index.js b/src/service/index.js
new file mode 100644
index 0000000..52ef853
--- /dev/null
+++ b/src/service/index.js
@@ -0,0 +1,17 @@
+import { products } from "@/data";
+
+const filterProducts = (category) => products.filter(product => 
+product.category == category);
+
+const searchProducts = (typedText) => {
+    return(
+        products.filter((product) => 
+            product.name.toLocaleLowerCase().includes(typedText
+            .toLocaleLowerCase()) ||
+            product.description.toLocaleLowerCase().includes(typedText
+            .toLocaleLowerCase())
+        )
+    )
+}
+
+export {filterProducts , searchProducts};
\ No newline at end of file