where the content\n * is wrapped by a div with box-sizing set to `content-box`.\n *\n * https://github.com/mozdevs/cssremedy/issues/4\n *\n *\n * 2. Allow adding a border to an element by just adding a border-width.\n *\n * By default, the way the browser specifies that an element should have no\n * border is by setting it's border-style to `none` in the user-agent\n * stylesheet.\n *\n * In order to easily add borders to elements by just setting the `border-width`\n * property, we change the default border-style for all elements to `solid`, and\n * use border-width to hide them instead. This way our `border` utilities only\n * need to set the `border-width` property instead of the entire `border`\n * shorthand, making our border utilities much more straightforward to compose.\n *\n * https://github.com/tailwindcss/tailwindcss/pull/116\n */\n\n*,\n::before,\n::after {\n box-sizing: border-box; /* 1 */\n border-width: 0; /* 2 */\n border-style: solid; /* 2 */\n border-color: #e4e4e7; /* 2 */\n}\n\n/*\n * Ensure horizontal rules are visible by default\n */\n\nhr {\n border-top-width: 1px;\n}\n\n/**\n * Undo the `border-style: none` reset that Normalize applies to images so that\n * our `border-{width}` utilities have the expected effect.\n *\n * The Normalize reset is unnecessary for us since we default the border-width\n * to 0 on all elements.\n *\n * https://github.com/tailwindcss/tailwindcss/issues/362\n */\n\nimg {\n border-style: solid;\n}\n\ntextarea {\n resize: vertical;\n}\n\ninput::-webkit-input-placeholder, textarea::-webkit-input-placeholder {\n color: #a1a1aa;\n}\n\ninput:-ms-input-placeholder, textarea:-ms-input-placeholder {\n color: #a1a1aa;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n color: #a1a1aa;\n}\n\nbutton {\n cursor: pointer;\n}\n\ntable {\n border-collapse: collapse;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-size: inherit;\n font-weight: inherit;\n}\n\n/**\n * Reset links to optimize for opt-in styling instead of\n * opt-out.\n */\n\na {\n color: inherit;\n text-decoration: inherit;\n}\n\n/**\n * Reset form element properties that are easy to forget to\n * style explicitly so you don't inadvertently introduce\n * styles that deviate from your design system. These styles\n * supplement a partial reset that is already applied by\n * normalize.css.\n */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n padding: 0;\n line-height: inherit;\n color: inherit;\n}\n\n/**\n * Use the configured 'mono' font family for elements that\n * are expected to be rendered with a monospace font, falling\n * back to the system monospace stack if there is no configured\n * 'mono' font family.\n */\n\npre,\ncode,\nkbd,\nsamp {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n}\n\n/**\n * Make replaced elements `display: block` by default as that's\n * the behavior you want almost all of the time. Inspired by\n * CSS Remedy, with `svg` added as well.\n *\n * https://github.com/mozdevs/cssremedy/issues/14\n */\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n display: block;\n vertical-align: middle;\n}\n\n/**\n * Constrain images and videos to the parent width and preserve\n * their instrinsic aspect ratio.\n *\n * https://github.com/mozdevs/cssremedy/issues/14\n */\n\nimg,\nvideo {\n max-width: 100%;\n height: auto;\n}\n\n.bg-orange-600 {\n --tw-bg-opacity: 1;\n background-color: rgba(234, 88, 12, var(--tw-bg-opacity));\n}\n\n.bg-gray-50 {\n --tw-bg-opacity: 1;\n background-color: rgba(250, 250, 250, var(--tw-bg-opacity));\n}\n\n.bg-blue-800 {\n --tw-bg-opacity: 1;\n background-color: rgba(30, 41, 59, var(--tw-bg-opacity));\n}\n\n.hover\\:bg-orange-700:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(194, 65, 12, var(--tw-bg-opacity));\n}\n\n.hover\\:bg-gray-50:hover {\n --tw-bg-opacity: 1;\n background-color: rgba(250, 250, 250, var(--tw-bg-opacity));\n}\n\n.rounded-xl {\n border-radius: 0.75rem;\n}\n\n.rounded-full {\n border-radius: 9999px;\n}\n\n.box-border {\n box-sizing: border-box;\n}\n\n.flex {\n display: flex;\n}\n\n.table {\n display: table;\n}\n\n.flex-row {\n flex-direction: row;\n}\n\n.flex-col {\n flex-direction: column;\n}\n\n.flex-wrap {\n flex-wrap: wrap;\n}\n\n.items-start {\n align-items: flex-start;\n}\n\n.items-center {\n align-items: center;\n}\n\n.justify-start {\n justify-content: flex-start;\n}\n\n.justify-center {\n justify-content: center;\n}\n\n.justify-between {\n justify-content: space-between;\n}\n\n.justify-around {\n justify-content: space-around;\n}\n\n.font-sans {\n font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\n.font-semibold {\n font-weight: 600;\n}\n\n.font-bold {\n font-weight: 700;\n}\n\n.h-28 {\n height: 7rem;\n}\n\n.h-48 {\n height: 12rem;\n}\n\n.h-screen {\n height: 100vh;\n}\n\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n\n.text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n\n.text-3xl {\n font-size: 1.875rem;\n line-height: 2.25rem;\n}\n\n.text-4xl {\n font-size: 2.25rem;\n line-height: 2.5rem;\n}\n\n.text-5xl {\n font-size: 3rem;\n line-height: 1;\n}\n\n.leading-8 {\n line-height: 2rem;\n}\n\n.leading-10 {\n line-height: 2.5rem;\n}\n\n.leading-normal {\n line-height: 1.5;\n}\n\n.leading-relaxed {\n line-height: 1.625;\n}\n\n.mb-2 {\n margin-bottom: 0.5rem;\n}\n\n.mt-3 {\n margin-top: 0.75rem;\n}\n\n.mt-8 {\n margin-top: 2rem;\n}\n\n.mt-10 {\n margin-top: 2.5rem;\n}\n\n.ml-10 {\n margin-left: 2.5rem;\n}\n\n.mr-12 {\n margin-right: 3rem;\n}\n\n.mb-20 {\n margin-bottom: 5rem;\n}\n\n.-mb-16 {\n margin-bottom: -4rem;\n}\n\n.focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n\n.p-2 {\n padding: 0.5rem;\n}\n\n.p-3 {\n padding: 0.75rem;\n}\n\n.p-4 {\n padding: 1rem;\n}\n\n.p-5 {\n padding: 1.25rem;\n}\n\n.p-10 {\n padding: 2.5rem;\n}\n\n.pb-0 {\n padding-bottom: 0px;\n}\n\n.pt-3 {\n padding-top: 0.75rem;\n}\n\n.pb-3 {\n padding-bottom: 0.75rem;\n}\n\n.pt-5 {\n padding-top: 1.25rem;\n}\n\n.pb-5 {\n padding-bottom: 1.25rem;\n}\n\n.pl-5 {\n padding-left: 1.25rem;\n}\n\n.pt-6 {\n padding-top: 1.5rem;\n}\n\n.pt-7 {\n padding-top: 1.75rem;\n}\n\n.pr-7 {\n padding-right: 1.75rem;\n}\n\n.pl-7 {\n padding-left: 1.75rem;\n}\n\n.pr-8 {\n padding-right: 2rem;\n}\n\n.pl-8 {\n padding-left: 2rem;\n}\n\n.pr-10 {\n padding-right: 2.5rem;\n}\n\n.pl-10 {\n padding-left: 2.5rem;\n}\n\n.pr-11 {\n padding-right: 2.75rem;\n}\n\n.pl-11 {\n padding-left: 2.75rem;\n}\n\n.pt-12 {\n padding-top: 3rem;\n}\n\n.pr-12 {\n padding-right: 3rem;\n}\n\n.pl-12 {\n padding-left: 3rem;\n}\n\n.pt-20 {\n padding-top: 5rem;\n}\n\n.absolute {\n position: absolute;\n}\n\n.relative {\n position: relative;\n}\n\n.right-0 {\n right: 0px;\n}\n\n.left-0 {\n left: 0px;\n}\n\n* {\n --tw-shadow: 0 0 #0000;\n}\n\n.shadow-2xl {\n --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n* {\n --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgba(100, 116, 139, 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n}\n\n.ring-2 {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.ring-4 {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.ring-orange-500 {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgba(249, 115, 22, var(--tw-ring-opacity));\n}\n\n.ring-orange-600 {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgba(234, 88, 12, var(--tw-ring-opacity));\n}\n\n.ring-gray-200 {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgba(228, 228, 231, var(--tw-ring-opacity));\n}\n\n.ring-gray-300 {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgba(212, 212, 216, var(--tw-ring-opacity));\n}\n\n.text-center {\n text-align: center;\n}\n\n.text-orange-400 {\n --tw-text-opacity: 1;\n color: rgba(251, 146, 60, var(--tw-text-opacity));\n}\n\n.text-orange-500 {\n --tw-text-opacity: 1;\n color: rgba(249, 115, 22, var(--tw-text-opacity));\n}\n\n.text-orange-600 {\n --tw-text-opacity: 1;\n color: rgba(234, 88, 12, var(--tw-text-opacity));\n}\n\n.text-gray-300 {\n --tw-text-opacity: 1;\n color: rgba(212, 212, 216, var(--tw-text-opacity));\n}\n\n.text-gray-400 {\n --tw-text-opacity: 1;\n color: rgba(161, 161, 170, var(--tw-text-opacity));\n}\n\n.text-gray-500 {\n --tw-text-opacity: 1;\n color: rgba(113, 113, 122, var(--tw-text-opacity));\n}\n\n.text-blue-800 {\n --tw-text-opacity: 1;\n color: rgba(30, 41, 59, var(--tw-text-opacity));\n}\n\n.text-white {\n --tw-text-opacity: 1;\n color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n\n.hover\\:text-orange-500:hover {\n --tw-text-opacity: 1;\n color: rgba(249, 115, 22, var(--tw-text-opacity));\n}\n\n.hover\\:text-orange-700:hover {\n --tw-text-opacity: 1;\n color: rgba(194, 65, 12, var(--tw-text-opacity));\n}\n\n.w-1\\/2 {\n width: 50%;\n}\n\n.w-2\\/3 {\n width: 66.666667%;\n}\n\n.w-2\\/5 {\n width: 40%;\n}\n\n.w-full {\n width: 100%;\n}\n\n.w-screen {\n width: 100vw;\n}\n\n.z-0 {\n z-index: 0;\n}\n\n.z-50 {\n z-index: 50;\n}\n\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes ping {\n 75%, 100% {\n transform: scale(2);\n opacity: 0;\n }\n}\n\n@keyframes pulse {\n 50% {\n opacity: .5;\n }\n}\n\n@keyframes bounce {\n 0%, 100% {\n transform: translateY(-25%);\n animation-timing-function: cubic-bezier(0.8,0,1,1);\n }\n\n 50% {\n transform: none;\n animation-timing-function: cubic-bezier(0,0,0.2,1);\n }\n}\n\n@media (min-width: 640px) {\n}\n\n@media (min-width: 768px) {\n}\n\n@media (min-width: 1024px) {\n .lg\\:bg-white {\n --tw-bg-opacity: 1;\n background-color: rgba(255, 255, 255, var(--tw-bg-opacity));\n }\n\n .lg\\:bg-hero {\n background-image: url(/static/media/hero.755f8265.png);\n }\n\n .lg\\:bg-action {\n background-image: url(/static/media/action.ccacbdf5.png);\n }\n\n .lg\\:bg-opacity-0 {\n --tw-bg-opacity: 0;\n }\n\n .lg\\:bg-cover {\n background-size: cover;\n }\n\n .lg\\:flex {\n display: flex;\n }\n\n .lg\\:flex-row {\n flex-direction: row;\n }\n\n .lg\\:flex-row-reverse {\n flex-direction: row-reverse;\n }\n\n .lg\\:flex-col {\n flex-direction: column;\n }\n\n .lg\\:items-start {\n align-items: flex-start;\n }\n\n .lg\\:items-center {\n align-items: center;\n }\n\n .lg\\:justify-end {\n justify-content: flex-end;\n }\n\n .lg\\:justify-center {\n justify-content: center;\n }\n\n .lg\\:justify-around {\n justify-content: space-around;\n }\n\n .lg\\:font-medium {\n font-weight: 500;\n }\n\n .lg\\:font-bold {\n font-weight: 700;\n }\n\n .lg\\:h-96 {\n height: 24rem;\n }\n\n .lg\\:h-full {\n height: 100%;\n }\n\n .lg\\:text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n }\n\n .lg\\:text-3xl {\n font-size: 1.875rem;\n line-height: 2.25rem;\n }\n\n .lg\\:text-4xl {\n font-size: 2.25rem;\n line-height: 2.5rem;\n }\n\n .lg\\:text-5xl {\n font-size: 3rem;\n line-height: 1;\n }\n\n .lg\\:mx-auto {\n margin-left: auto;\n margin-right: auto;\n }\n\n .lg\\:mt-0 {\n margin-top: 0px;\n }\n\n .lg\\:mb-0 {\n margin-bottom: 0px;\n }\n\n .lg\\:ml-0 {\n margin-left: 0px;\n }\n\n .lg\\:mr-5 {\n margin-right: 1.25rem;\n }\n\n .lg\\:ml-5 {\n margin-left: 1.25rem;\n }\n\n .lg\\:ml-10 {\n margin-left: 2.5rem;\n }\n\n .lg\\:mb-20 {\n margin-bottom: 5rem;\n }\n\n .lg\\:ml-24 {\n margin-left: 6rem;\n }\n\n .lg\\:-mb-3 {\n margin-bottom: -0.75rem;\n }\n\n .lg\\:-mt-10 {\n margin-top: -2.5rem;\n }\n\n .lg\\:-mt-16 {\n margin-top: -4rem;\n }\n\n .lg\\:-mb-20 {\n margin-bottom: -5rem;\n }\n\n .lg\\:-ml-20 {\n margin-left: -5rem;\n }\n\n .lg\\:-mt-24 {\n margin-top: -6rem;\n }\n\n .lg\\:-mt-64 {\n margin-top: -16rem;\n }\n\n .lg\\:p-0 {\n padding: 0px;\n }\n\n .lg\\:pt-0 {\n padding-top: 0px;\n }\n\n .lg\\:pr-0 {\n padding-right: 0px;\n }\n\n .lg\\:pb-0 {\n padding-bottom: 0px;\n }\n\n .lg\\:pl-0 {\n padding-left: 0px;\n }\n\n .lg\\:pt-1 {\n padding-top: 0.25rem;\n }\n\n .lg\\:pb-4 {\n padding-bottom: 1rem;\n }\n\n .lg\\:pt-10 {\n padding-top: 2.5rem;\n }\n\n .lg\\:pb-14 {\n padding-bottom: 3.5rem;\n }\n\n .lg\\:pb-20 {\n padding-bottom: 5rem;\n }\n\n .lg\\:pt-24 {\n padding-top: 6rem;\n }\n\n .lg\\:right-auto {\n right: auto;\n }\n\n .lg\\:left-auto {\n left: auto;\n }\n\n .lg\\:ring-2 {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n }\n\n .lg\\:ring-white {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgba(255, 255, 255, var(--tw-ring-opacity));\n }\n\n .lg\\:text-left {\n text-align: left;\n }\n\n .lg\\:text-gray-50 {\n --tw-text-opacity: 1;\n color: rgba(250, 250, 250, var(--tw-text-opacity));\n }\n\n .lg\\:text-gray-100 {\n --tw-text-opacity: 1;\n color: rgba(244, 244, 245, var(--tw-text-opacity));\n }\n\n .lg\\:text-gray-200 {\n --tw-text-opacity: 1;\n color: rgba(228, 228, 231, var(--tw-text-opacity));\n }\n\n .lg\\:text-gray-300 {\n --tw-text-opacity: 1;\n color: rgba(212, 212, 216, var(--tw-text-opacity));\n }\n\n .lg\\:visible {\n visibility: visible;\n }\n\n .lg\\:w-auto {\n width: auto;\n }\n\n .lg\\:w-1\\/2 {\n width: 50%;\n }\n\n .lg\\:w-1\\/3 {\n width: 33.333333%;\n }\n\n .lg\\:w-2\\/6 {\n width: 33.333333%;\n }\n\n .lg\\:w-3\\/6 {\n width: 50%;\n }\n\n .lg\\:w-4\\/6 {\n width: 66.666667%;\n }\n\n .lg\\:w-5\\/6 {\n width: 83.333333%;\n }\n\n .lg\\:w-5\\/12 {\n width: 41.666667%;\n }\n\n .lg\\:w-full {\n width: 100%;\n }\n}\n\n@media (min-width: 1280px) {\n}\n\n@media (min-width: 1536px) {\n}\r\n\r\n\n\n"]}
--------------------------------------------------------------------------------
/build/static/js/2.94dfffaf.chunk.js.LICENSE.txt:
--------------------------------------------------------------------------------
1 | /*
2 | object-assign
3 | (c) Sindre Sorhus
4 | @license MIT
5 | */
6 |
7 | /** @license React v0.20.1
8 | * scheduler.production.min.js
9 | *
10 | * Copyright (c) Facebook, Inc. and its affiliates.
11 | *
12 | * This source code is licensed under the MIT license found in the
13 | * LICENSE file in the root directory of this source tree.
14 | */
15 |
16 | /** @license React v17.0.1
17 | * react-dom.production.min.js
18 | *
19 | * Copyright (c) Facebook, Inc. and its affiliates.
20 | *
21 | * This source code is licensed under the MIT license found in the
22 | * LICENSE file in the root directory of this source tree.
23 | */
24 |
25 | /** @license React v17.0.1
26 | * react-jsx-runtime.production.min.js
27 | *
28 | * Copyright (c) Facebook, Inc. and its affiliates.
29 | *
30 | * This source code is licensed under the MIT license found in the
31 | * LICENSE file in the root directory of this source tree.
32 | */
33 |
34 | /** @license React v17.0.1
35 | * react.production.min.js
36 | *
37 | * Copyright (c) Facebook, Inc. and its affiliates.
38 | *
39 | * This source code is licensed under the MIT license found in the
40 | * LICENSE file in the root directory of this source tree.
41 | */
42 |
--------------------------------------------------------------------------------
/build/static/js/3.f8093fbf.chunk.js:
--------------------------------------------------------------------------------
1 | (this["webpackJsonptalha-food-app"]=this["webpackJsonptalha-food-app"]||[]).push([[3],{12:function(t,n,e){"use strict";e.r(n),e.d(n,"getCLS",(function(){return v})),e.d(n,"getFCP",(function(){return y})),e.d(n,"getFID",(function(){return k})),e.d(n,"getLCP",(function(){return C})),e.d(n,"getTTFB",(function(){return P}));var i,a,r,o,u=function(t,n){return{name:t,value:void 0===n?-1:n,delta:0,entries:[],id:"v1-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12)}},c=function(t,n){try{if(PerformanceObserver.supportedEntryTypes.includes(t)){var e=new PerformanceObserver((function(t){return t.getEntries().map(n)}));return e.observe({type:t,buffered:!0}),e}}catch(t){}},f=!1,s=function(t,n){f||"undefined"!=typeof InstallTrigger||(addEventListener("beforeunload",(function(){})),f=!0),addEventListener("visibilitychange",(function e(i){"hidden"===document.visibilityState&&(t(i),n&&removeEventListener("visibilitychange",e,!0))}),!0)},d=function(t){addEventListener("pageshow",(function(n){n.persisted&&t(n)}),!0)},p="function"==typeof WeakSet?new WeakSet:new Set,m=function(t,n,e){var i;return function(){n.value>=0&&(e||p.has(n)||"hidden"===document.visibilityState)&&(n.delta=n.value-(i||0),(n.delta||void 0===i)&&(i=n.value,t(n)))}},v=function(t,n){var e,i=u("CLS",0),a=function(t){t.hadRecentInput||(i.value+=t.value,i.entries.push(t),e())},r=c("layout-shift",a);r&&(e=m(t,i,n),s((function(){r.takeRecords().map(a),e()})),d((function(){i=u("CLS",0),e=m(t,i,n)})))},l=-1,h=function(){return"hidden"===document.visibilityState?0:1/0},S=function(){s((function(t){var n=t.timeStamp;l=n}),!0)},g=function(){return l<0&&(l=h(),S(),d((function(){setTimeout((function(){l=h(),S()}),0)}))),{get timeStamp(){return l}}},y=function(t,n){var e,i=g(),a=u("FCP"),r=c("paint",(function(t){"first-contentful-paint"===t.name&&(r&&r.disconnect(),t.startTime=0&&a1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,n){var e=function(){L(t,n),a()},i=function(){a()},a=function(){removeEventListener("pointerup",e,w),removeEventListener("pointercancel",i,w)};addEventListener("pointerup",e,w),addEventListener("pointercancel",i,w)}(n,t):L(n,t)}},F=function(t){["mousedown","keydown","touchstart","pointerdown"].forEach((function(n){return t(n,b,w)}))},k=function(t,n){var e,r=g(),f=u("FID"),v=function(t){t.startTime=0&&(n||f.has(e)||\"hidden\"===document.visibilityState)&&(e.delta=e.value-(i||0),(e.delta||void 0===i)&&(i=e.value,t(e)))}},m=function(t,e){var n,i=a(\"CLS\",0),o=function(t){t.hadRecentInput||(i.value+=t.value,i.entries.push(t),n())},f=r(\"layout-shift\",o);f&&(n=s(t,i,e),c((function(){f.takeRecords().map(o),n()})),u((function(){i=a(\"CLS\",0),n=s(t,i,e)})))},d=-1,v=function(){return\"hidden\"===document.visibilityState?0:1/0},p=function(){c((function(t){var e=t.timeStamp;d=e}),!0)},l=function(){return d<0&&(d=v(),p(),u((function(){setTimeout((function(){d=v(),p()}),0)}))),{get timeStamp(){return d}}},S=function(t,e){var n,i=l(),o=a(\"FCP\"),c=r(\"paint\",(function(t){\"first-contentful-paint\"===t.name&&(c&&c.disconnect(),t.startTime=0&&e1e12?new Date:performance.now())-t.timeStamp;\"pointerdown\"==t.type?function(t,e){var n=function(){g(t,e),a()},i=function(){a()},a=function(){removeEventListener(\"pointerup\",n,h),removeEventListener(\"pointercancel\",i,h)};addEventListener(\"pointerup\",n,h),addEventListener(\"pointercancel\",i,h)}(e,t):g(e,t)}},L=function(t){[\"mousedown\",\"keydown\",\"touchstart\",\"pointerdown\"].forEach((function(e){return t(e,w,h)}))},T=function(n,o){var m,d=l(),v=a(\"FID\"),p=function(t){t.startTime500?{textShadow:"0px 1px 5px black"}:null,className:"flex flex-col items-center justify-start font-sans min-h-96 bg-gray-50 lg:pt-10 lg:pb-20 lg:bg-hero lg:bg-cover",children:[Object(o.jsx)("div",{children:Object(o.jsx)("p",{className:"p-3 pt-12 text-lg font-bold text-gray-500 lg:text-gray-300",children:t})}),Object(o.jsx)("div",{children:Object(o.jsx)("p",{className:"p-2 text-4xl font-bold text-center text-blue-800 lg:mx-auto lg:w-4/6 lg:text-5xl lg:text-gray-100",children:l})}),Object(o.jsx)("div",{children:Object(o.jsx)("p",{className:"p-4 pt-6 font-sans text-2xl leading-10 text-center text-gray-500 lg:text-gray-200",children:n})}),Object(o.jsxs)("div",{className:"relative z-50 flex flex-col items-center justify-between h-48 pt-7 lg:pt-0 lg:flex-row lg:justify-around lg:w-5/12",children:[Object(o.jsx)("button",{className:"pt-3 pb-3 pl-12 pr-12 text-2xl font-semibold text-center text-white transition-all bg-orange-600 rounded-full shadow-2xl lg:ml-5 hover:bg-orange-700 focus:outline-none ring-4 ring-orange-600 lg:ring-2 lg:font-medium ",children:i}),Object(o.jsx)("button",{className:"pt-3 pb-3 text-2xl font-semibold text-center text-orange-500 transition-all rounded-full shadow-2xl lg:mr-5 hover:text-orange-500 hover:bg-gray-50 pl-11 pr-11 bg-gray-50 focus:outline-none ring-4 ring-orange-500 lg:font-medium lg:text-gray-50 lg:bg-opacity-0 lg:ring-2 lg:ring-white",children:a})]})]}),Object(o.jsxs)("div",{className:"z-0 flex flex-row items-start justify-center w-screen h-screen pt-20 -mb-16 bg-gray-50 lg:bg-white lg:mb-20 lg:w-full lg:h-96 lg:pt-0",children:[Object(o.jsx)("img",{className:"absolute left-0 lg:left-auto lg:-mt-64",src:c,alt:""}),Object(o.jsx)("img",{className:"absolute right-0 lg:right-auto lg:ml-24 lg:-mt-16",src:g,alt:""})]})]})},d=function(e){var t=e.title,l=e.heading,n=e.description,i=e.img,a=e.alternate;return Object(o.jsxs)("div",{className:a?"lg:items-center lg:flex lg:flex-row lg:justify-end":"lg:items-center lg:flex lg:flex-row-reverse lg:justify-center",children:[Object(o.jsxs)("div",{className:"lg:w-2/6 lg:-ml-20 lg:-mt-10 lg:flex lg:flex-col lg:justify-center lg:items-start",children:[Object(o.jsx)("p",{className:"pb-5 text-2xl font-semibold text-center text-orange-400 lg:pb-0 lg:-mb-3 lg:text-lg lg:font-bold lg:text-left",children:t}),Object(o.jsx)("p",{className:"p-5 text-4xl font-semibold leading-relaxed text-center text-blue-800 lg:pb-4 lg:text-3xl lg:pl-0 lg:font-bold lg:text-left",children:l}),Object(o.jsx)("p",{className:"p-5 pb-0 pl-10 pr-10 text-2xl leading-10 text-center text-gray-400 lg:w-5/6 lg:pb-0 lg:text-lg lg:text-left lg:p-0 lg:pl-0 lg:pr-0",children:n})]}),Object(o.jsx)("div",{className:"ml-10 lg:ml-0 lg:w-3/6",children:Object(o.jsx)("img",{className:" lg:-mt-24 lg:-mb-20",src:i,alt:""})})]})},p=function(e){var t=e.actionText,l=e.description,n=e.mainActionText,i=e.extraActionText;return Object(o.jsxs)("div",{className:"flex flex-col justify-center h-screen bg-blue-800 lg:pt-24 lg:pb-14 lg:bg-cover lg:h-full lg:bg-action",children:[Object(o.jsx)("p",{className:"p-5 text-5xl font-bold leading-normal text-center text-white lg:text-4xl lg:pt-10",children:t}),Object(o.jsx)("p",{className:"pl-12 pr-12 text-xl leading-8 text-center text-gray-300 lg:text-gray-200 lg:font-medium",children:l}),Object(o.jsxs)("div",{className:"flex flex-col flex-wrap items-center justify-center w-full h-48 pt-5 lg:flex-row lg:pt-1",children:[Object(o.jsx)("button",{className:"pt-3 pb-3 pl-8 pr-8 mt-3 text-2xl font-semibold text-center text-white transition-all bg-orange-600 shadow-2xl lg:mt-0 rounded-xl hover:bg-orange-700 focus:outline-none ring-2 ring-orange-600 ",children:n}),Object(o.jsx)("button",{className:"pt-3 pb-3 pl-8 pr-8 mt-8 text-2xl font-semibold text-center text-white transition-all shadow-2xl lg:ml-5 lg:mt-0 rounded-xl hover:text-orange-500 hover:bg-gray-50 focus:outline-none ring-2 ring-gray-300 ",children:i})]})]})},h=function(e){var t=e.logo;return Object(o.jsxs)("div",{className:"flex flex-row flex-wrap items-center justify-around p-10",children:[Object(o.jsx)("a",{href:"/",className:"w-1/2 pl-5 mb-2 lg:visible lg:w-auto lg:pl-0 lg:mb-0",children:Object(o.jsx)("img",{width:"70%",src:t,alt:"logo"})}),Object(o.jsxs)("div",{className:"flex items-center justify-around w-2/3 pt-5 lg:pt-0 lg:w-1/3 ",children:[Object(o.jsx)("a",{href:"#",children:Object(o.jsx)("svg",{className:"text-orange-600 hover:text-orange-700",width:"30",height:"30",viewBox:"0 0 35 29",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:Object(o.jsx)("path",{d:"M34.145 4.1787C32.9202 4.70704 31.5873 5.08729 30.2144 5.23539C31.6398 4.38858 32.7072 3.05077 33.2164 1.47295C31.8788 2.26862 30.4136 2.82656 28.8855 3.12202C28.2469 2.43928 27.4745 1.89538 26.6165 1.52421C25.7585 1.15304 24.8332 0.962551 23.8983 0.964616C20.1159 0.964616 17.0739 4.03061 17.0739 7.79305C17.0739 8.32139 17.1379 8.84973 17.242 9.35806C11.5783 9.06187 6.52705 6.35611 3.16887 2.21343C2.55697 3.25857 2.23632 4.44858 2.24026 5.65966C2.24026 8.0292 3.44505 10.1186 5.28224 11.3474C4.19955 11.3047 3.14222 11.0071 2.19624 10.4788V10.5628C2.19624 13.881 4.54176 16.6308 7.66779 17.2632C7.08084 17.4157 6.47704 17.4936 5.87062 17.4953C5.42633 17.4953 5.00606 17.4513 4.58178 17.3913C5.44634 20.097 7.96398 22.0623 10.9619 22.1263C8.6164 23.9635 5.67849 25.0442 2.48843 25.0442C1.91605 25.0442 1.38771 25.0242 0.839355 24.9602C3.86532 26.9014 7.45565 28.0222 11.3222 28.0222C23.8743 28.0222 30.7428 17.6234 30.7428 8.59757C30.7428 8.30138 30.7428 8.00518 30.7227 7.70899C32.0516 6.73636 33.2164 5.53158 34.145 4.1787Z",fill:"currentColor"})})}),Object(o.jsx)("a",{href:"#",children:Object(o.jsx)("svg",{className:"text-orange-600 hover:text-orange-700",width:"30",height:"30",viewBox:"0 0 33 33",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:Object(o.jsx)("path",{d:"M31.2106 0.48291H1.75153C1.04307 0.48291 0.470703 1.05528 0.470703 1.76374V31.2229C0.470703 31.9313 1.04307 32.5037 1.75153 32.5037H31.2106C31.9191 32.5037 32.4915 31.9313 32.4915 31.2229V1.76374C32.4915 1.05528 31.9191 0.48291 31.2106 0.48291ZM27.5122 9.82897H24.9546C22.9493 9.82897 22.561 10.7816 22.561 12.1825V15.2685H27.3481L26.7237 20.0996H22.561V32.5037H17.5698V20.1036H13.3951V15.2685H17.5698V11.7062C17.5698 7.57151 20.0954 5.31805 23.7858 5.31805C25.555 5.31805 27.072 5.45013 27.5163 5.51017V9.82897H27.5122Z",fill:"currentColor"})})}),Object(o.jsx)("a",{href:"#",children:Object(o.jsx)("svg",{className:"text-orange-600 hover:text-orange-700",width:"30",height:"30",viewBox:"0 0 33 33",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:Object(o.jsx)("path",{d:"M31.198 0.48291H1.73884C1.03038 0.48291 0.458008 1.05528 0.458008 1.76374V31.2229C0.458008 31.9313 1.03038 32.5037 1.73884 32.5037H31.198C31.9064 32.5037 32.4788 31.9313 32.4788 31.2229V1.76374C32.4788 1.05528 31.9064 0.48291 31.198 0.48291ZM9.95617 27.7686H5.20509V12.4867H9.95617V27.7686ZM7.58263 10.3973C7.03798 10.3973 6.50557 10.2358 6.05271 9.93325C5.59985 9.63066 5.24689 9.20057 5.03846 8.69738C4.83004 8.1942 4.7755 7.6405 4.88176 7.10632C4.98801 6.57214 5.25029 6.08146 5.63541 5.69634C6.02053 5.31121 6.51121 5.04894 7.04539 4.94268C7.57958 4.83643 8.13327 4.89096 8.63646 5.09939C9.13965 5.30782 9.56973 5.66078 9.87232 6.11363C10.1749 6.56649 10.3364 7.09891 10.3364 7.64356C10.3324 9.16454 9.09962 10.3973 7.58263 10.3973ZM27.7437 27.7686H22.9966V20.3358C22.9966 18.5626 22.9646 16.2852 20.527 16.2852C18.0574 16.2852 17.6772 18.2144 17.6772 20.2077V27.7686H12.9341V12.4867H17.4891V14.5761H17.5531C18.1855 13.3753 19.7345 12.1065 22.048 12.1065C26.8591 12.1065 27.7437 15.2725 27.7437 19.3872V27.7686Z",fill:"currentColor"})})})]}),Object(o.jsx)("div",{className:"mt-10 text-lg text-blue-800 lg:mt-0",children:"Copyright 2021 Bella Onojie"})]})},b=l.p+"static/media/logo.186a9f64.png",m=l.p+"static/media/Rectangle_3.0c97c345.png",j=l.p+"static/media/Rectangle_4.4f8a5bef.png",f=l.p+"static/media/Rectangle_5.c2ad11fe.png";var u=function(){var e={hero:{appType:"Food app",tagLine:"Why stay hungry when you can order from Bella Onojie",description:"Download the bella onoje\u2019s food app now on",mainActionText:"Playstore",extraActionText:"App Store"},step1:{title:"Create an account",heading:"Create/login to an existing account to get started",description:"An account is created with your email and a desired password",img:m,alternate:!1},step2:{title:"Explore while shopping",heading:"Shop for your favorites meal as e dey hot.",description:"Shop for your favorite meals or drinks and enjoy while doing it.",img:j,alternate:!0},step3:{title:"Checkout",heading:"When you're done, check out and get it delivered.",description:"When you're done, check out and get it delivered with ease.",img:f,alternate:!1},bottomLead:{actionText:"Download the app now.",description:"Available on your favourite store. Start your premium experience now.",mainActionText:"Playstore",extraActionText:"App Store"}};return Object(o.jsx)("div",{className:"box-border",children:Object(o.jsxs)("div",{className:"flex flex-col",children:[Object(o.jsx)(s,{logo:b}),Object(o.jsx)(x,{appType:e.hero.appType,tagLine:e.hero.tagLine,description:e.hero.description,mainActionText:e.hero.mainActionText,extraActionText:e.hero.extraActionText}),Object(o.jsx)("div",{id:"divider",className:"rounded-full ring-2 ring-gray-200 lg:w-1/2 lg:mx-auto "}),Object(o.jsx)("div",{className:"pt-20 mb-20 text-3xl font-semibold text-center text-blue-800 lg:font-bold",children:"How the app works "}),Object(o.jsx)(d,{title:e.step1.title,heading:e.step1.heading,description:e.step1.description,img:e.step1.img,alternate:e.step1.alternate}),Object(o.jsx)(d,{title:e.step2.title,heading:e.step2.heading,description:e.step2.description,img:e.step2.img,alternate:e.step2.alternate}),Object(o.jsx)(d,{title:e.step3.title,heading:e.step3.heading,description:e.step3.description,img:e.step3.img,alternate:e.step3.alternate}),Object(o.jsx)(p,{actionText:e.bottomLead.actionText,description:e.bottomLead.description,mainActionText:e.bottomLead.mainActionText,extraActionText:e.bottomLead.extraActionText}),Object(o.jsx)(h,{logo:b})]})})},w=function(e){e&&e instanceof Function&&l.e(3).then(l.bind(null,12)).then((function(t){var l=t.getCLS,n=t.getFID,i=t.getFCP,a=t.getLCP,r=t.getTTFB;l(e),n(e),i(e),a(e),r(e)}))};r.a.render(Object(o.jsx)(i.a.StrictMode,{children:Object(o.jsx)(u,{})}),document.getElementById("root")),w()},8:function(e,t,l){},9:function(e,t,l){}},[[11,1,2]]]);
2 | //# sourceMappingURL=main.cd364f57.chunk.js.map
--------------------------------------------------------------------------------
/build/static/js/main.cd364f57.chunk.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["components/Navbar.js","assets/Rectangle_1.png","assets/Rectangle_2.png","components/Hero.js","components/Step.js","components/BottomLead.js","components/Footer.js","assets/logo.png","assets/Rectangle_3.png","assets/Rectangle_4.png","assets/Rectangle_5.png","App.js","reportWebVitals.js","index.js"],"names":["Navbar","logo","className","href","height","width","src","alt","window","screen","availWidth","viewBox","fill","xmlns","opacity","d","Hero","appType","tagLine","description","mainActionText","extraActionText","style","textShadow","rectangle_1","rectangle_2","Step","title","heading","img","alternate","BottomLead","actionText","Footer","App","data","hero","step1","Rectangle_3","step2","Rectangle_4","step3","Rectangle_5","bottomLead","id","reportWebVitals","onPerfEntry","Function","then","getCLS","getFID","getFCP","getLCP","getTTFB","ReactDOM","render","StrictMode","document","getElementById"],"mappings":"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","file":"static/js/main.cd364f57.chunk.js","sourcesContent":["import React from \"react\";\r\n\r\nconst Navbar = ({logo}) => {\r\n return (\r\n \n ,\n document.getElementById('root')\n);\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n"],"sourceRoot":""}
--------------------------------------------------------------------------------
/build/static/js/runtime-main.8be81743.js:
--------------------------------------------------------------------------------
1 | !function(e){function t(t){for(var n,a,i=t[0],c=t[1],f=t[2],p=0,s=[];p0.2%",
34 | "not dead",
35 | "not op_mini all"
36 | ],
37 | "development": [
38 | "last 1 chrome version",
39 | "last 1 firefox version",
40 | "last 1 safari version"
41 | ]
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jbdotjs/react-tailwind-food-app/cac8a0e23c3d38c17b3300a99b76fdc10b95f945/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | Food Delivery App Landing Page
28 |
29 |
30 |
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jbdotjs/react-tailwind-food-app/cac8a0e23c3d38c17b3300a99b76fdc10b95f945/public/logo192.png
--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jbdotjs/react-tailwind-food-app/cac8a0e23c3d38c17b3300a99b76fdc10b95f945/public/logo512.png
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jbdotjs/react-tailwind-food-app/cac8a0e23c3d38c17b3300a99b76fdc10b95f945/src/App.css
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import './App.css';
2 |
3 | import Navbar from './components/Navbar';
4 | import Hero from './components/Hero';
5 | import Step from './components/Step';
6 | import BottomLead from './components/BottomLead';
7 | import Footer from './components/Footer';
8 |
9 | import logo from "./assets/logo.png";
10 | import Rectangle_3 from './assets/Rectangle_3.png';
11 | import Rectangle_4 from './assets/Rectangle_4.png';
12 | import Rectangle_5 from './assets/Rectangle_5.png';
13 |
14 |
15 | function App() {
16 | const data = {
17 | hero:{
18 | appType: 'Food app',
19 | tagLine: 'Why stay hungry when you can order from Bella Onojie',
20 | description: 'Download the bella onoje’s food app now on',
21 | mainActionText: 'Playstore',
22 | extraActionText: 'App Store',
23 | },
24 | step1: {
25 | title: 'Create an account',
26 | heading: 'Create/login to an existing account to get started',
27 | description: 'An account is created with your email and a desired password',
28 | img: Rectangle_3,
29 | alternate: false,
30 | },
31 | step2: {
32 | title: 'Explore while shopping',
33 | heading: 'Shop for your favorites meal as e dey hot.',
34 | description: 'Shop for your favorite meals or drinks and enjoy while doing it.',
35 | img: Rectangle_4,
36 | alternate: true,
37 | },
38 | step3: {
39 | title: 'Checkout',
40 | heading: "When you're done, check out and get it delivered.",
41 | description: "When you're done, check out and get it delivered with ease.",
42 | img: Rectangle_5,
43 | alternate: false,
44 | },
45 | bottomLead: {
46 | actionText: 'Download the app now.',
47 | description: 'Available on your favourite store. Start your premium experience now.',
48 | mainActionText: 'Playstore',
49 | extraActionText: 'App Store',
50 | },
51 | }
52 | return (
53 | // __________________________TODO: ____________________
54 | // Add Montserrat font to everything (body)
55 |
56 |
9 | ,
11 | document.getElementById('root')
12 | );
13 |
14 | // If you want to start measuring performance in your app, pass a function
15 | // to log results (for example: reportWebVitals(console.log))
16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17 | reportWebVitals();
18 |
--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
1 | const reportWebVitals = onPerfEntry => {
2 | if (onPerfEntry && onPerfEntry instanceof Function) {
3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
4 | getCLS(onPerfEntry);
5 | getFID(onPerfEntry);
6 | getFCP(onPerfEntry);
7 | getLCP(onPerfEntry);
8 | getTTFB(onPerfEntry);
9 | });
10 | }
11 | };
12 |
13 | export default reportWebVitals;
14 |
--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | const colors = require('tailwindcss/colors');
2 |
3 | module.exports = {
4 | purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
5 | darkMode: false, // or 'media' or 'class'
6 | theme: {
7 | colors: {
8 | orange: colors.orange,
9 | gray: colors.gray,
10 | blue: colors.blueGray,
11 | white: colors.white,
12 | },
13 | screens: {
14 | 'sm': '300px',
15 | 'lg': '700px'
16 | },
17 | // fontFamily: {
18 | // 'sans': ['ui-sans-serif', 'system-ui'],
19 | // 'serif': ['ui-serif', 'Georgia'],
20 | // 'mono': ['ui-monospace', 'SFMono-Regular'],
21 | // 'montserrat': ['Montserrat'],
22 | // },
23 | extend: {
24 | backgroundImage: theme => ({
25 | 'hero': "url('/src/assets/hero.png')",
26 | 'action': "url('/src/assets/action.png')",
27 | })
28 | },
29 | },
30 | variants: {
31 | extend: {
32 | translate: ['hover'],
33 | },
34 | },
35 | plugins: [],
36 | }
37 |
--------------------------------------------------------------------------------
\r\n \r\n 
\r\n \r\n {\r\n window.screen.availWidth<500 ?\r\n
\r\n );\r\n};\r\n\r\nexport default Navbar;\r\n","export default __webpack_public_path__ + \"static/media/Rectangle_1.461c72a9.png\";","export default __webpack_public_path__ + \"static/media/Rectangle_2.70fd208a.png\";","import React from \"react\";\r\n\r\nimport rectangle_1 from '../assets/Rectangle_1.png';\r\nimport rectangle_2 from '../assets/Rectangle_2.png'; \r\n\r\n\r\nconst Hero = ({appType, tagLine, description, mainActionText, extraActionText}) => {\r\n return (\r\n \r\n \r\n
\r\n \r\n :\r\n\r\n \r\n\r\n }\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Hero;\r\n","import React from 'react'\r\n\r\nconst Step = ({title, heading, description, img, alternate}) => {\r\n const row = \"lg:items-center lg:flex lg:flex-row lg:justify-end\";\r\n const rowReverse = \"lg:items-center lg:flex lg:flex-row-reverse lg:justify-center\";\r\n\r\n return (\r\n 500 ? {textShadow:'0px 1px 5px black'} : null} className=\"flex flex-col items-center justify-start font-sans min-h-96 bg-gray-50 lg:pt-10 lg:pb-20 lg:bg-hero lg:bg-cover\">\r\n
\r\n \r\n
\r\n {appType}
\r\n\r\n
\r\n \r\n {tagLine}\r\n
\r\n\r\n
\r\n \r\n {description}\r\n
\r\n\r\n \r\n {mainActionText}\r\n \r\n \r\n {extraActionText}\r\n \r\n
\r\n \r\n \r\n 
\r\n
\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default Step\r\n","import React from \"react\";\r\n\r\nconst BottomLead = ({actionText, description, mainActionText, extraActionText}) => {\r\n return (\r\n \r\n
\r\n {title}
\r\n{heading}
\r\n{description}
\r\n\r\n 
\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default BottomLead;\r\n","import React from \"react\";\r\n\r\nconst Footer = ({logo}) => {\r\n return (\r\n {actionText}
\r\n{description}
\r\n\r\n \r\n {mainActionText}\r\n \r\n \r\n {extraActionText}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Footer;\r\n","export default __webpack_public_path__ + \"static/media/logo.186a9f64.png\";","export default __webpack_public_path__ + \"static/media/Rectangle_3.0c97c345.png\";","export default __webpack_public_path__ + \"static/media/Rectangle_4.4f8a5bef.png\";","export default __webpack_public_path__ + \"static/media/Rectangle_5.c2ad11fe.png\";","import './App.css';\n\nimport Navbar from './components/Navbar';\nimport Hero from './components/Hero';\nimport Step from './components/Step';\nimport BottomLead from './components/BottomLead';\nimport Footer from './components/Footer';\n\nimport logo from \"./assets/logo.png\";\nimport Rectangle_3 from './assets/Rectangle_3.png';\nimport Rectangle_4 from './assets/Rectangle_4.png';\nimport Rectangle_5 from './assets/Rectangle_5.png';\n\n\nfunction App() {\n const data = {\n hero:{\n appType: 'Food app',\n tagLine: 'Why stay hungry when you can order from Bella Onojie',\n description: 'Download the bella onoje’s food app now on',\n mainActionText: 'Playstore',\n extraActionText: 'App Store',\n },\n step1: {\n title: 'Create an account',\n heading: 'Create/login to an existing account to get started',\n description: 'An account is created with your email and a desired password',\n img: Rectangle_3,\n alternate: false,\n },\n step2: {\n title: 'Explore while shopping',\n heading: 'Shop for your favorites meal as e dey hot.',\n description: 'Shop for your favorite meals or drinks and enjoy while doing it.',\n img: Rectangle_4,\n alternate: true,\n },\n step3: {\n title: 'Checkout',\n heading: \"When you're done, check out and get it delivered.\",\n description: \"When you're done, check out and get it delivered with ease.\",\n img: Rectangle_5,\n alternate: false,\n },\n bottomLead: {\n actionText: 'Download the app now.',\n description: 'Available on your favourite store. Start your premium experience now.',\n mainActionText: 'Playstore',\n extraActionText: 'App Store',\n },\n }\n return (\n // __________________________TODO: ____________________\n // Add Montserrat font to everything (body)\n \n \r\n Copyright 2021 Bella Onojie\r\n
\r\n \n
\n );\n}\n\nexport default App;\n","const reportWebVitals = onPerfEntry => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n getCLS(onPerfEntry);\n getFID(onPerfEntry);\n getFCP(onPerfEntry);\n getLCP(onPerfEntry);\n getTTFB(onPerfEntry);\n });\n }\n};\n\nexport default reportWebVitals;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport reportWebVitals from './reportWebVitals';\n\nReactDOM.render(\n \n \n \n
\n How the app works
\n \n
57 |
104 | );
105 | }
106 |
107 | export default App;
108 |
--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import App from './App';
3 |
4 | test('renders learn react link', () => {
5 | render(
58 |
59 |
60 |
103 | How the app works
71 |
72 |
6 |
21 | );
22 | };
23 |
24 | export default BottomLead;
25 |
--------------------------------------------------------------------------------
/src/components/Footer.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const Footer = ({logo}) => {
4 | return (
5 | {actionText}
7 |{description}
8 |
9 |
14 |
19 |
20 |
6 |
7 |
8 |
9 |
20 |
24 | );
25 | };
26 |
27 | export default Footer;
28 |
--------------------------------------------------------------------------------
/src/components/Hero.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import rectangle_1 from '../assets/Rectangle_1.png';
4 | import rectangle_2 from '../assets/Rectangle_2.png';
5 |
6 |
7 | const Hero = ({appType, tagLine, description, mainActionText, extraActionText}) => {
8 | return (
9 |
21 | Copyright 2021 Bella Onojie
22 |
23 |
10 |
42 | );
43 | };
44 |
45 | export default Hero;
46 |
--------------------------------------------------------------------------------
/src/components/Navbar.js:
--------------------------------------------------------------------------------
1 | import React, {useState, useEffect, useRef} from "react";
2 |
3 | import close_icon from '../assets/close_icon.svg';
4 |
5 | function useOutsideAlerter(ref, setOpenNav) {
6 | useEffect(() => {
7 |
8 | function handleClickOutside(event) {
9 | if (ref.current && !ref.current.contains(event.target)) {
10 | setOpenNav(false);
11 | }
12 | }
13 |
14 | // Bind the event listener
15 | document.addEventListener("mousedown", handleClickOutside);
16 | return () => {
17 | // Unbind the event listener on clean up
18 | document.removeEventListener("mousedown", handleClickOutside);
19 | };
20 | }, [ref]);
21 | }
22 |
23 | const Navbar = ({logo}) => {
24 |
25 | const [openNav, setOpenNav] = useState(false);
26 |
27 | const wrapperRef = useRef(null);
28 | useOutsideAlerter(wrapperRef, setOpenNav);
29 |
30 | return (
31 |
11 |
38 |
12 |
14 | {appType}
13 |
15 |
19 | 16 | {tagLine} 17 |
18 |
20 |
24 | 21 | {description} 22 |
23 |
25 |
30 |
35 |
36 |
37 |
39 |
40 |
41 |
32 |
33 |
34 |
35 |
36 | {/* Mobile Nav */}
37 |
38 | setOpenNav(true)} className="sm:absolute sm:right-14 hamburger lg:invisible">
39 |
40 |
41 |
42 | {
43 | openNav &&
44 |
66 | );
67 | };
68 |
69 | export default Navbar;
70 |
--------------------------------------------------------------------------------
/src/components/Step.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const Step = ({title, heading, description, img, alternate}) => {
4 | const row = "lg:items-center lg:flex lg:flex-row lg:justify-end";
5 | const rowReverse = "lg:items-center lg:flex lg:flex-row-reverse lg:justify-center";
6 |
7 | return (
8 |
45 |
53 | }
54 |
55 |
56 | {/* Desktop Nav */}
57 |
58 |
64 |
65 | setOpenNav(false)} className="absolute right-12 top-9">
46 |
47 | setOpenNav(false)} href="/" className="text-lg font-semibold text-blue-800 transition-all hover:text-orange-500">Home
48 | setOpenNav(false)} href="#product" className="text-lg font-semibold text-blue-800 transition-all hover:text-orange-500">Product
49 | setOpenNav(false)} href="#faq" className="text-lg font-semibold text-blue-800 transition-all hover:text-orange-500">Faq
50 | setOpenNav(false)} href="#contact" className="text-lg font-semibold text-blue-800 transition-all hover:text-orange-500">Contact
51 |
52 |
9 |
18 | )
19 | }
20 |
21 | export default Step
22 |
--------------------------------------------------------------------------------
/src/data.json:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jbdotjs/react-tailwind-food-app/cac8a0e23c3d38c17b3300a99b76fdc10b95f945/src/data.json
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 | import reportWebVitals from './reportWebVitals';
6 |
7 | ReactDOM.render(
8 |
10 |
14 | {title}
11 |{heading}
12 |{description}
13 |
15 |
16 |
17 |