├── src
    ├── App.css
    ├── index.css
    ├── components
    │   ├── Logo
    │   │   └── index.jsx
    │   ├── HeroImage
    │   │   └── index.jsx
    │   ├── HeroButtons
    │   │   ├── Bg.jsx
    │   │   └── outline.jsx
    │   ├── HeroTitle
    │   │   └── index.jsx
    │   ├── HeroContent
    │   │   └── index.jsx
    │   ├── HeroInfo
    │   │   └── index.jsx
    │   ├── Nav
    │   │   └── index.jsx
    │   ├── Button
    │   │   └── index.jsx
    │   ├── Btns
    │   │   └── index.jsx
    │   ├── icons
    │   │   ├── Menu.jsx
    │   │   ├── Call.jsx
    │   │   └── Basket.jsx
    │   ├── Hero
    │   │   └── index.jsx
    │   └── Navigation
    │   │   └── index.jsx
    ├── App.jsx
    └── main.jsx
├── public
    └── images
    │   ├── hero-img.webp
    │   └── logo
    │       └── logo.webp
├── postcss.config.js
├── vite.config.js
├── .gitignore
├── index.html
├── .eslintrc.cjs
├── tailwind.config.js
└── package.json


/src/App.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/public/images/hero-img.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/isopouya1/React-food/HEAD/public/images/hero-img.webp


--------------------------------------------------------------------------------
/public/images/logo/logo.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/isopouya1/React-food/HEAD/public/images/logo/logo.webp


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 
5 | body{
6 |     background-color: #FFF4F5;
7 | }


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [react()],
7 | })
8 | 


--------------------------------------------------------------------------------
/src/components/Logo/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | 
3 | function Logo() {
4 |   return (
5 |     <img className='w-24' src="/images/logo/logo.webp"  alt="" />
6 |   )
7 | }
8 | 
9 | export default Logo


--------------------------------------------------------------------------------
/src/components/HeroImage/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | 
3 | function HeroImage() {
4 |   return (
5 |     <img src="/images/hero-img.webp" className='w-96 lg:w-[500px]' alt="" />
6 |   )
7 | }
8 | 
9 | export default HeroImage


--------------------------------------------------------------------------------
/src/components/HeroButtons/Bg.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | 
3 | function Bg() {
4 |   return (
5 |     <a href="#" className='bg-primary text-white font-medium py-4 px-7 rounded-full'>Order Now</a>
6 |   )
7 | }
8 | 
9 | export default Bg


--------------------------------------------------------------------------------
/src/components/HeroTitle/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | 
3 | function HeroTitle() {
4 |   return (
5 |     <h1 className='text-primary font-semibold text-2xl lg:font-black lg:text-3xl'>Welcome to Fofood</h1>
6 |   )
7 | }
8 | 
9 | export default HeroTitle


--------------------------------------------------------------------------------
/src/components/HeroButtons/outline.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | 
3 | function Outline() {
4 |   return (
5 |     <a href="#" className='border-2 border-primary text-primary font-medium py-4 px-7 rounded-full'>Learn More</a>
6 |   )
7 | }
8 | 
9 | export default Outline


--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Navigation from './components/Navigation'
 3 | import Hero from './components/Hero'
 4 | 
 5 | function App() {
 6 |   return (
 7 |     <>
 8 |     <Navigation />
 9 |     <Hero />
10 |     </>
11 |   )
12 | }
13 | 
14 | export default App


--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom/client'
 3 | import App from './App.jsx'
 4 | import './index.css'
 5 | 
 6 | ReactDOM.createRoot(document.getElementById('root')).render(
 7 |   <React.StrictMode>
 8 |     <App />
 9 |   </React.StrictMode>,
10 | )
11 | 


--------------------------------------------------------------------------------
/src/components/HeroContent/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function HeroContent() {
 4 |   return (
 5 |     <h1 className='text-secondary text-4xl lg:text-6xl font-bold'>
 6 |         Super Delicious Food Special for You
 7 |     </h1>
 8 |   )
 9 | }
10 | 
11 | export default HeroContent


--------------------------------------------------------------------------------
/src/components/HeroInfo/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Info() {
 4 |   return (
 5 |     <p className='text-gray/75  font-medium text-lg text-justify lg:max-w-sm'>
 6 |         Order your favorites food from anywhere and get delivery at your door 
 7 |     </p>
 8 |   )
 9 | }
10 | 
11 | export default Info


--------------------------------------------------------------------------------
/src/components/Nav/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Nav() {
 4 |   return (
 5 |     <ul className='hidden font-medium lg:flex gap-x-8'>
 6 |         <li>Home</li>
 7 |         <li>About</li>
 8 |         <li>Shop</li>
 9 |         <li>Comunity</li>
10 |     </ul>
11 |   )
12 | }
13 | 
14 | export default Nav


--------------------------------------------------------------------------------
/src/components/Button/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Button(props) {
 4 |   return (
 5 |     <a href="#" className='border-gray flex items-center gap-x-1 font-medium rounded-md border-[1.5px] p-2'>
 6 |         {props.icon}
 7 |         {props.content}
 8 |     </a>
 9 |   )
10 | }
11 | 
12 | export default Button


--------------------------------------------------------------------------------
/src/components/Btns/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Bg from '../HeroButtons/Bg'
 3 | import Outline from '../HeroButtons/outline'
 4 | 
 5 | function Btns() {
 6 |   return (
 7 |    <div className='flex py-2 gap-x-5 items-center'>
 8 |      <Bg />
 9 |     <Outline />
10 |    </div>
11 |   )
12 | }
13 | 
14 | export default Btns


--------------------------------------------------------------------------------
/src/components/icons/Menu.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | function Menu() {
 4 |   return (
 5 |     <div className="flex rounded-md flex-col gap-y-[3px]">
 6 |       <hr className="w-6 h-1 bg-gray" />
 7 |       <hr className="w-6  h-1 bg-gray" />
 8 |       <hr className="w-6  h-1 bg-gray" />
 9 |     </div>
10 |   );
11 | }
12 | 
13 | export default Menu;
14 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Food</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="root"></div>
11 |     <script type="module" src="/src/main.jsx"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   env: { browser: true, es2020: true },
 3 |   extends: [
 4 |     'eslint:recommended',
 5 |     'plugin:react/recommended',
 6 |     'plugin:react/jsx-runtime',
 7 |     'plugin:react-hooks/recommended',
 8 |   ],
 9 |   parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
10 |   settings: { react: { version: '18.2' } },
11 |   plugins: ['react-refresh'],
12 |   rules: {
13 |     'react-refresh/only-export-components': 'warn',
14 |   },
15 | }
16 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | export default {
 3 |   content: [
 4 |     "./index.html",
 5 |     "./src/**/*.{js,ts,jsx,tsx}",
 6 |   ],
 7 |   theme: {
 8 |     colors :{
 9 |       "primary" : "#DB6885",
10 |       "secondary" : "#2F3137",
11 |       "white" : "#ffffff",
12 |       "gray" : "#2F3137"
13 |     },
14 |     container:{
15 |       center :true,
16 |       padding:{
17 |         DEFAULT : '1rem',
18 |         sm : "2rem",
19 |         lg : "4rem",
20 |         xl: "5rem",
21 |       }
22 |     },
23 |     extend: {},
24 |   },
25 |   plugins: [],
26 | }
27 | 
28 | 


--------------------------------------------------------------------------------
/src/components/Hero/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import HeroImage from '../HeroImage'
 3 | import HeroTitle from '../HeroTitle'
 4 | import HeroContent from '../HeroContent'
 5 | import Info from '../HeroInfo'
 6 | 
 7 | import Btns from '../Btns'
 8 | 
 9 | function Hero() {
10 |   return (
11 |     <section className='container flex flex-col-reverse gap-7 lg:flex-row items-center'>
12 |             <div className='flex flex-col gap-y-3'>
13 |             <HeroTitle />
14 |             <HeroContent />
15 |             <Info />
16 |             <Btns />
17 |         </div>
18 |         <HeroImage />
19 |     </section>
20 |   )
21 | }
22 | 
23 | export default Hero


--------------------------------------------------------------------------------
/src/components/Navigation/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Logo from '../Logo'
 3 | import Button from '../Button'
 4 | import Menu from '../icons/Menu'
 5 | import Basket from '../icons/Basket'
 6 | import Nav from '../Nav'
 7 | import Call from '../icons/Call'
 8 | 
 9 | function Navigation() {
10 |   return (
11 |     <section className='container py-5 items-center flex justify-between'>
12 |         <Logo />
13 |         <div className='flex gap-x-2 items-center lg:hidden'>
14 |         <Button icon={<Basket />}/>
15 |         <Button icon={<Menu />}/>
16 |         </div>
17 |         <Nav />
18 |         <div className='hidden lg:inline'>
19 |         <Button icon={<Call />} content="Contact Us"/>
20 |         </div>
21 |     </section>
22 |   )
23 | }
24 | 
25 | export default Navigation


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "learn-react",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 |     "preview": "vite preview"
11 |   },
12 |   "dependencies": {
13 |     "react": "^18.2.0",
14 |     "react-dom": "^18.2.0"
15 |   },
16 |   "devDependencies": {
17 |     "@types/react": "^18.0.37",
18 |     "@types/react-dom": "^18.0.11",
19 |     "@vitejs/plugin-react": "^4.0.0",
20 |     "autoprefixer": "^10.4.14",
21 |     "eslint": "^8.38.0",
22 |     "eslint-plugin-react": "^7.32.2",
23 |     "eslint-plugin-react-hooks": "^4.6.0",
24 |     "eslint-plugin-react-refresh": "^0.3.4",
25 |     "postcss": "^8.4.24",
26 |     "tailwindcss": "^3.3.2",
27 |     "vite": "^4.3.9"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/src/components/icons/Call.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function Call() {
 4 |   return (
 5 | <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
 6 | <path fill-rule="evenodd" clip-rule="evenodd" d="M2.62955 3.2171C2.63121 3.2171 2.58955 3.26043 2.53705 3.3121C2.33538 3.50793 1.91788 3.91543 1.91367 4.76793C1.90705 5.96043 2.69121 8.1746 6.46705 11.9496C10.2254 15.7063 12.4362 16.4996 13.6312 16.4996H13.6487C14.5012 16.4954 14.9079 16.0771 15.1045 15.8763C15.1645 15.8146 15.2129 15.7696 15.247 15.7413C16.077 14.9063 16.502 14.2846 16.4979 13.8863C16.492 13.4796 15.9862 12.9988 15.287 12.3338C15.0645 12.1221 14.8229 11.8921 14.5679 11.6371C13.907 10.9779 13.5795 11.0904 12.8595 11.3438C11.8637 11.6929 10.497 12.1679 8.37371 10.0438C6.24705 7.91877 6.72288 6.55377 7.07121 5.55793C7.32288 4.83793 7.43788 4.5096 6.77621 3.84793C6.51705 3.5896 6.28455 3.3446 6.07038 3.1196C5.40955 2.4246 4.93288 1.9221 4.52871 1.91627H4.52205C4.12288 1.91627 3.50288 2.34293 2.62538 3.22043C2.62788 3.21793 2.62871 3.2171 2.62955 3.2171ZM13.632 17.7496C11.5554 17.7496 8.84788 16.0963 5.58371 12.8338C2.30705 9.55793 0.651214 6.8421 0.663644 4.76127C0.671214 3.38627 1.39205 2.6821 1.66288 2.41793C1.67705 2.40043 1.72538 2.35293 1.74205 2.33627C2.93705 1.14043 3.74288 0.657101 4.54455 0.66614C5.47538 0.678768 6.13788 1.37543 6.97621 2.25793C7.18371 2.47627 7.40871 2.71377 7.65955 2.96377C8.87621 4.18043 8.52955 5.17293 8.25121 5.9696C7.94788 6.83877 7.68538 7.58877 9.25705 9.16043C10.8304 10.7321 11.5804 10.4696 12.4462 10.1638C13.2437 9.88543 14.2337 9.5371 15.452 10.7538C15.6987 11.0004 15.9329 11.2229 16.1487 11.4288C17.0354 12.2713 17.7354 12.9371 17.7472 13.8704C17.757 14.6663 17.2737 15.4771 16.0804 16.6713L15.552 16.3129L15.9987 16.7496C15.7345 17.0204 15.0312 17.7421 13.6554 17.7496H13.632Z" fill="#2F3137"/>
 7 | </svg>
 8 | 
 9 |   )
10 | }
11 | 
12 | export default Call


--------------------------------------------------------------------------------
/src/components/icons/Basket.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | function Basket() {
 4 |   return (
 5 |     <svg 
 6 |       width="18"
 7 |       height="17"
 8 |       viewBox="0 0 18 17"
 9 |       fill="none"
10 |       xmlns="http://www.w3.org/2000/svg"
11 |     >
12 |       <path
13 |         fill-rule="evenodd"
14 |         clip-rule="evenodd"
15 |         d="M5.28649 14.6265C5.88149 14.6265 6.36565 15.1098 6.36565 15.7048C6.36565 16.2998 5.88149 16.784 5.28649 16.784C4.69149 16.784 4.20815 16.2998 4.20815 15.7048C4.20815 15.1098 4.69149 14.6265 5.28649 14.6265ZM14.6867 14.6265C15.2826 14.6265 15.7667 15.1098 15.7667 15.7048C15.7667 16.2998 15.2826 16.784 14.6867 16.784C14.0917 16.784 13.6084 16.2998 13.6084 15.7048C13.6084 15.1098 14.0917 14.6265 14.6867 14.6265ZM1.72332 0.50783L3.45665 0.80783C3.73582 0.856996 3.94832 1.08866 3.97249 1.372L4.16832 3.70616L4.89653 3.70648C5.01536 3.70653 5.13293 3.70658 5.24925 3.70663L6.58617 3.70727C6.69274 3.70732 6.79812 3.70738 6.90231 3.70743L8.37847 3.70824C8.47121 3.70829 8.56284 3.70835 8.65336 3.7084L9.68781 3.70906C9.76976 3.70912 9.85066 3.70917 9.93054 3.70923L10.8404 3.7099C10.9122 3.70996 10.9831 3.71001 11.053 3.71007L11.8463 3.71075C11.9087 3.71081 11.9701 3.71086 12.0307 3.71092L12.5521 3.71144C12.6074 3.7115 12.6619 3.71156 12.7155 3.71161L13.3193 3.71232C13.3664 3.71237 13.4127 3.71243 13.4582 3.71249L13.968 3.7132C14.0076 3.71326 14.0464 3.71332 14.0845 3.71338L14.4085 3.71392C14.4424 3.71398 14.4757 3.71405 14.5083 3.71411L14.8692 3.71484C14.8968 3.7149 14.9238 3.71496 14.9502 3.71502L15.1724 3.71558C15.1954 3.71564 15.2178 3.7157 15.2397 3.71576L15.4779 3.71651C15.4957 3.71658 15.5131 3.71664 15.53 3.7167L15.6698 3.71727C15.684 3.71734 15.6978 3.7174 15.7112 3.71747L15.8526 3.71824C15.8629 3.7183 15.8728 3.71836 15.8824 3.71843L15.9595 3.71901C15.9671 3.71908 15.9744 3.71915 15.9814 3.71921L16.0368 3.7198C16.0422 3.71987 16.0473 3.71993 16.0522 3.72L16.09 3.7206C16.0935 3.72067 16.0969 3.72073 16.1 3.7208L16.1239 3.7214C16.1261 3.72147 16.1282 3.72154 16.13 3.72161L16.1474 3.72242C16.1484 3.72249 16.1494 3.72256 16.1503 3.72263C16.1584 3.72339 16.1596 3.72352 16.1608 3.72366C16.625 3.79116 17.0333 4.03366 17.3117 4.407C17.59 4.7795 17.7067 5.23866 17.64 5.69866L16.8492 11.1637C16.7 12.2037 15.7967 12.9878 14.7467 12.9878H5.64582C4.54832 12.9878 3.61915 12.1312 3.52999 11.0353L2.76665 1.957L1.51082 1.74033C1.16999 1.68033 0.942487 1.35783 1.00082 1.017C1.06082 0.676163 1.38999 0.454496 1.72332 0.50783ZM4.72935 4.95645L4.27332 4.95616L4.77582 10.9328C4.81249 11.3928 5.18832 11.7378 5.64749 11.7378H14.745C15.1792 11.7378 15.55 11.4145 15.6117 10.9853L16.4033 5.5195C16.4217 5.3895 16.3892 5.2595 16.31 5.1545C16.2317 5.04866 16.1167 4.98033 15.9867 4.962C15.9806 4.96223 15.9663 4.96244 15.9439 4.96263L15.8532 4.96315C15.8343 4.96322 15.8134 4.9633 15.7907 4.96336L15.3186 4.96408C15.2788 4.96411 15.2374 4.96413 15.1945 4.96416L14.0845 4.96411C14.0225 4.96409 13.9594 4.96406 13.8952 4.96403L12.6285 4.96326C12.5526 4.96321 12.4758 4.96315 12.3983 4.96309L11.6815 4.96252C11.5999 4.96245 11.5177 4.96238 11.4348 4.96231L10.6756 4.96164C10.5899 4.96156 10.5037 4.96149 10.4172 4.96141L9.8942 4.96093C9.80645 4.96085 9.71845 4.96076 9.63024 4.96068L8.83215 4.95994C8.74316 4.95985 8.65412 4.95977 8.56508 4.95969L8.03121 4.95919C7.94236 4.95911 7.85362 4.95903 7.76502 4.95894L7.23568 4.95846C7.1479 4.95839 7.06037 4.95831 6.97314 4.95823L6.19772 4.95756C6.11278 4.95749 6.0283 4.95742 5.94433 4.95735L4.9644 4.95661C4.88532 4.95655 4.80695 4.9565 4.72935 4.95645ZM13.4066 6.78641C13.7516 6.78641 14.0316 7.06641 14.0316 7.41141C14.0316 7.75641 13.7516 8.03641 13.4066 8.03641H11.0966C10.7507 8.03641 10.4716 7.75641 10.4716 7.41141C10.4716 7.06641 10.7507 6.78641 11.0966 6.78641H13.4066Z"
16 |         fill="#2F3137"
17 |       />
18 |     </svg>
19 |   );
20 | }
21 | 
22 | export default Basket;
23 | 


--------------------------------------------------------------------------------