├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── index.html └── manifest.json └── src ├── App.css ├── App.js ├── Assets ├── Logo.svg ├── about-background-image.png ├── about-background.png ├── choose-image.png ├── delivery-image.png ├── home-banner-background.png ├── home-banner-image.png ├── john-doe-image.png └── pick-meals-image.png ├── Components ├── About.js ├── Contact.js ├── Footer.js ├── Home.js ├── Navbar.js ├── Testimonial.js └── Work.js └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | A simple landing page - first designed in figma and then coded in React. Hope you like it. -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "landing-page-tutorial", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^18.2.0", 10 | "react-dom": "^18.2.0", 11 | "react-scripts": "5.0.1", 12 | "web-vitals": "^2.1.4", 13 | "@emotion/react": "^11.10.5", 14 | "@emotion/styled": "^11.10.5", 15 | "@mui/icons-material": "^5.11.0", 16 | "@mui/material": "^5.11.0", 17 | "react-icons": "^4.7.1" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.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/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 18 | 19 | 20 | Restaurant Landing Page 21 | 22 | 23 | 24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: "Reem Kufi", sans-serif !important; 6 | } 7 | img { 8 | max-width: 100%; 9 | height: auto; 10 | } 11 | .App { 12 | min-height: 100vh; 13 | width: 85vw; 14 | max-width: 1900px; 15 | margin: 0rem auto; 16 | } 17 | body { 18 | max-width: 100%; 19 | overflow-x: hidden; 20 | } 21 | 22 | body { 23 | background-color: #f6f6f6; 24 | } 25 | 26 | nav { 27 | display: flex; 28 | align-items: center; 29 | justify-content: space-between; 30 | min-height: 90px; 31 | } 32 | .navbar-menu-container { 33 | display: none; 34 | } 35 | .navbar-links-container a { 36 | margin-right: 3rem; 37 | text-decoration: none; 38 | color: black; 39 | font-size: 1.1rem; 40 | font-weight: 600; 41 | } 42 | .primary-button { 43 | padding: 0.9rem 1.75rem; 44 | background-color: white; 45 | outline: none; 46 | border: none; 47 | border-radius: 5rem; 48 | font-size: 1.1rem; 49 | cursor: pointer; 50 | font-weight: 600; 51 | transition: 0.2s; 52 | } 53 | .navbar-cart-icon { 54 | font-size: 1.15rem; 55 | } 56 | .primary-button:hover { 57 | background-color: rgb(234, 234, 234); 58 | } 59 | .navbar-menu-container svg { 60 | font-size: 1.5rem; 61 | cursor: pointer; 62 | } 63 | .home-banner-container { 64 | position: relative; 65 | display: flex; 66 | padding-top: 3rem; 67 | } 68 | .home-bannerImage-container { 69 | position: absolute; 70 | top: -100px; 71 | right: -170px; 72 | z-index: -2; 73 | max-width: 700px; 74 | } 75 | .home-image-section { 76 | max-width: 600px; 77 | flex: 1; 78 | } 79 | .home-text-section { 80 | flex: 1; 81 | display: flex; 82 | flex-direction: column; 83 | justify-content: center; 84 | align-items: flex-start; 85 | } 86 | .primary-heading { 87 | font-size: clamp(2rem, 5vw, 4rem); 88 | color: #4c4c4c; 89 | /* line-height: 5rem; */ 90 | max-width: 600px; 91 | } 92 | .primary-text { 93 | font-size: clamp(1rem, 3vw, 1.5rem); 94 | max-width: 500px; 95 | color: #6a6a6a; 96 | margin: 1.5rem 0rem; 97 | } 98 | .secondary-button { 99 | padding: 1rem 2.5rem; 100 | background-color: #fe9e0d; 101 | outline: none; 102 | border: none; 103 | border-radius: 5rem; 104 | font-size: 1.1rem; 105 | cursor: pointer; 106 | font-weight: 600; 107 | color: white; 108 | transition: 0.2s; 109 | display: flex; 110 | align-items: center; 111 | justify-content: center; 112 | } 113 | .secondary-button svg { 114 | margin-left: 0.75rem; 115 | font-size: 1.5rem; 116 | } 117 | .secondary-button:hover { 118 | background-color: #e48f0f; 119 | } 120 | .about-section-container { 121 | margin-top: 20rem; 122 | position: relative; 123 | display: flex; 124 | align-items: center; 125 | justify-content: space-between; 126 | } 127 | .about-background-image-container { 128 | position: absolute; 129 | left: -150px; 130 | z-index: -2; 131 | } 132 | .about-section-image-container { 133 | flex: 0.9; 134 | margin-right: 1rem; 135 | } 136 | .about-section-text-container { 137 | flex: 1; 138 | justify-content: center; 139 | display: flex; 140 | flex-direction: column; 141 | } 142 | .primary-subheading { 143 | font-weight: 700; 144 | color: #fe9e0d; 145 | font-size: 1.15rem; 146 | } 147 | .about-buttons-container { 148 | margin-top: 2rem; 149 | display: flex; 150 | } 151 | .watch-video-button { 152 | margin-left: 2rem; 153 | background-color: transparent; 154 | outline: none; 155 | border: none; 156 | border-radius: 5rem; 157 | font-size: 1.1rem; 158 | cursor: pointer; 159 | font-weight: 600; 160 | color: #484848; 161 | transition: 0.2s; 162 | display: flex; 163 | align-items: center; 164 | justify-content: center; 165 | } 166 | .watch-video-button svg { 167 | font-size: 3rem; 168 | margin-right: 1rem; 169 | } 170 | .contact-page-wrapper h1 { 171 | max-width: 900px !important; 172 | } 173 | .contact-page-wrapper { 174 | display: flex; 175 | align-items: center; 176 | justify-content: center; 177 | flex-direction: column; 178 | margin: 6rem 0rem; 179 | } 180 | .contact-form-container { 181 | background-color: white; 182 | max-width: 700px; 183 | width: 100%; 184 | margin-top: 3rem; 185 | display: flex; 186 | align-items: center; 187 | padding: 1rem; 188 | border-radius: 5rem; 189 | } 190 | .contact-form-container input { 191 | flex: 1; 192 | height: 100%; 193 | border: none; 194 | outline: none; 195 | font-size: 1.3rem; 196 | padding: 0.5rem 1rem; 197 | } 198 | .footer-wrapper { 199 | margin: 6rem 0rem; 200 | display: flex; 201 | margin-top: 10rem; 202 | } 203 | .footer-logo-container { 204 | max-width: 110px; 205 | } 206 | .footer-icons { 207 | margin-top: 2.5rem; 208 | } 209 | .footer-icons svg { 210 | font-size: 1.5rem; 211 | margin-right: 1.25rem; 212 | color: #585858; 213 | } 214 | /* .footer-section-one { 215 | border: 2px solid blue; 216 | } */ 217 | .footer-section-two { 218 | flex: 1; 219 | display: flex; 220 | justify-content: flex-end; 221 | } 222 | .footer-section-columns { 223 | display: flex; 224 | flex-direction: column; 225 | min-width: 190px; 226 | } 227 | .footer-section-columns span { 228 | margin: 0.25rem 0rem; 229 | font-weight: 600; 230 | color: #4c4c4c; 231 | cursor: pointer; 232 | } 233 | .testimonial-section-bottom { 234 | margin-top: 2rem; 235 | background-color: white; 236 | padding: 1.5rem 2rem; 237 | display: flex; 238 | align-items: center; 239 | justify-content: center; 240 | max-width: 750px; 241 | border-radius: 2rem; 242 | flex-direction: column; 243 | text-align: center; 244 | } 245 | .testimonial-section-bottom { 246 | margin: 2rem auto; 247 | } 248 | .testimonial-section-bottom p { 249 | font-weight: 700; 250 | color: #515151; 251 | max-width: 500px; 252 | font-size: 1.1rem; 253 | margin: 2rem 0rem; 254 | } 255 | .testimonials-stars-container svg { 256 | margin: 0rem 0.25rem; 257 | font-size: 1.5rem; 258 | color: #fe9e0d; 259 | } 260 | .testimonial-section-bottom h2 { 261 | margin-top: 1.5rem; 262 | } 263 | .work-section-wrapper { 264 | margin-top: 15rem; 265 | } 266 | .work-section-top p { 267 | text-align: center; 268 | max-width: 600px !important; 269 | } 270 | .work-section-top h1 { 271 | max-width: 700px !important; 272 | } 273 | .work-section-top { 274 | display: flex; 275 | justify-content: center; 276 | align-items: center; 277 | flex-direction: column; 278 | } 279 | .work-section-info { 280 | width: 290px; 281 | min-height: 350px; 282 | background-color: white; 283 | padding: 1rem 2rem; 284 | display: flex; 285 | flex-direction: column; 286 | justify-content: center; 287 | align-items: center; 288 | text-align: center; 289 | border-radius: 1rem; 290 | color: #505050; 291 | margin: 1rem 2rem; 292 | } 293 | .work-section-info h2 { 294 | margin: 1rem 0rem; 295 | } 296 | .work-section-bottom { 297 | margin-top: 5rem; 298 | display: flex; 299 | justify-content: center; 300 | align-items: center; 301 | flex-wrap: wrap; 302 | } 303 | .work-section-info p { 304 | flex: 1; 305 | display: flex; 306 | align-items: center; 307 | font-weight: 600; 308 | } 309 | 310 | @media (max-width: 1000px) { 311 | .navbar-links-container a { 312 | margin-right: 1rem; 313 | font-size: 1rem; 314 | } 315 | .primary-button { 316 | font-size: 1rem; 317 | } 318 | .home-bannerImage-container { 319 | max-width: 600px; 320 | } 321 | } 322 | @media (max-width: 800px) { 323 | .nav-logo-container { 324 | max-width: 140px; 325 | } 326 | .navbar-links-container { 327 | display: none; 328 | } 329 | .navbar-menu-container { 330 | display: flex; 331 | } 332 | .home-bannerImage-container { 333 | max-width: 450px; 334 | } 335 | .home-banner-container, 336 | .about-section-container { 337 | flex-direction: column-reverse; 338 | align-items: center; 339 | justify-content: center; 340 | } 341 | .about-section-container { 342 | flex-direction: column; 343 | } 344 | .home-image-section, 345 | .about-section-image-container { 346 | width: 100%; 347 | max-width: 400px; 348 | } 349 | .primary-heading { 350 | text-align: center; 351 | max-width: 90%; 352 | } 353 | .primary-text { 354 | text-align: center; 355 | max-width: 80%; 356 | } 357 | .home-text-section, 358 | .about-section-text-container { 359 | justify-content: center; 360 | align-items: center; 361 | margin-top: 4rem; 362 | } 363 | .secondary-button { 364 | font-size: 1rem; 365 | padding: 0.8rem 2rem; 366 | cursor: pointer; 367 | } 368 | .about-section-container { 369 | margin-top: 5rem !important; 370 | } 371 | .about-buttons-container { 372 | justify-content: center; 373 | flex-direction: column; 374 | } 375 | .primary-subheading { 376 | text-align: center; 377 | } 378 | .watch-video-button { 379 | margin-left: 0rem !important; 380 | margin-top: 1rem; 381 | font-size: 1rem !important; 382 | } 383 | .watch-video-button svg { 384 | margin-right: 0.5rem !important; 385 | } 386 | .about-section-image-container { 387 | margin-right: 0rem !important; 388 | } 389 | .work-section-wrapper { 390 | margin-top: 5rem !important; 391 | } 392 | .work-section-bottom { 393 | margin-top: 1rem !important; 394 | } 395 | .contact-form-container { 396 | padding: 0.5rem !important; 397 | flex-direction: column; 398 | justify-content: center; 399 | align-items: center; 400 | border-radius: 1rem !important; 401 | } 402 | .contact-form-container input { 403 | font-size: 1rem !important; 404 | max-width: 100%; 405 | padding: 0.5rem 1rem !important; 406 | margin-bottom: 0.8rem !important; 407 | text-align: center; 408 | } 409 | .footer-wrapper { 410 | flex-direction: column; 411 | } 412 | .footer-section-two { 413 | flex-direction: column; 414 | margin-top: 2rem; 415 | } 416 | .footer-section-columns { 417 | margin: 1rem 0rem; 418 | } 419 | .App { 420 | max-width: 95vw; 421 | } 422 | } 423 | @media (max-width: 600px) { 424 | .home-bannerImage-container, 425 | .about-background-image-container { 426 | display: none; 427 | } 428 | } 429 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import Home from "./Components/Home"; 3 | import About from "./Components/About"; 4 | import Work from "./Components/Work"; 5 | import Testimonial from "./Components/Testimonial"; 6 | import Contact from "./Components/Contact"; 7 | import Footer from "./Components/Footer"; 8 | 9 | function App() { 10 | return ( 11 |
12 | 13 | 14 | 15 | 16 | 17 |
19 | ); 20 | } 21 | 22 | export default App; 23 | -------------------------------------------------------------------------------- /src/Assets/Logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/Assets/about-background-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abishek-raghavan/CVIP-WEBDEVELOPMENT-Normal-task/bead4794225c454df661364e1ae350acaf70c760/src/Assets/about-background-image.png -------------------------------------------------------------------------------- /src/Assets/about-background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abishek-raghavan/CVIP-WEBDEVELOPMENT-Normal-task/bead4794225c454df661364e1ae350acaf70c760/src/Assets/about-background.png -------------------------------------------------------------------------------- /src/Assets/choose-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abishek-raghavan/CVIP-WEBDEVELOPMENT-Normal-task/bead4794225c454df661364e1ae350acaf70c760/src/Assets/choose-image.png -------------------------------------------------------------------------------- /src/Assets/delivery-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abishek-raghavan/CVIP-WEBDEVELOPMENT-Normal-task/bead4794225c454df661364e1ae350acaf70c760/src/Assets/delivery-image.png -------------------------------------------------------------------------------- /src/Assets/home-banner-background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abishek-raghavan/CVIP-WEBDEVELOPMENT-Normal-task/bead4794225c454df661364e1ae350acaf70c760/src/Assets/home-banner-background.png -------------------------------------------------------------------------------- /src/Assets/home-banner-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abishek-raghavan/CVIP-WEBDEVELOPMENT-Normal-task/bead4794225c454df661364e1ae350acaf70c760/src/Assets/home-banner-image.png -------------------------------------------------------------------------------- /src/Assets/john-doe-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abishek-raghavan/CVIP-WEBDEVELOPMENT-Normal-task/bead4794225c454df661364e1ae350acaf70c760/src/Assets/john-doe-image.png -------------------------------------------------------------------------------- /src/Assets/pick-meals-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abishek-raghavan/CVIP-WEBDEVELOPMENT-Normal-task/bead4794225c454df661364e1ae350acaf70c760/src/Assets/pick-meals-image.png -------------------------------------------------------------------------------- /src/Components/About.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import AboutBackground from "../Assets/about-background.png"; 3 | import AboutBackgroundImage from "../Assets/about-background-image.png"; 4 | import { BsFillPlayCircleFill } from "react-icons/bs"; 5 | 6 | const About = () => { 7 | return ( 8 |
9 |
10 | 11 |
12 |
13 | 14 |
15 |
16 |

About

17 |

18 | Food Is An Important Part Of A Balanced Diet 19 |

20 |

21 | Lorem ipsum dolor sit amet consectetur. Non tincidunt magna non et 22 | elit. Dolor turpis molestie dui magnis facilisis at fringilla quam. 23 |

24 |

25 | Non tincidunt magna non et elit. Dolor turpis molestie dui magnis 26 | facilisis at fringilla quam. 27 |

28 |
29 | 30 | 33 |
34 |
35 |
36 | ); 37 | }; 38 | 39 | export default About; 40 | -------------------------------------------------------------------------------- /src/Components/Contact.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const Contact = () => { 4 | return ( 5 |
6 |

Have Question In Mind?

7 |

Let Us Help You

8 |
9 | 10 | 11 |
12 |
13 | ); 14 | }; 15 | 16 | export default Contact; 17 | -------------------------------------------------------------------------------- /src/Components/Footer.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Logo from "../Assets/Logo.svg"; 3 | import { BsTwitter } from "react-icons/bs"; 4 | import { SiLinkedin } from "react-icons/si"; 5 | import { BsYoutube } from "react-icons/bs"; 6 | import { FaFacebookF } from "react-icons/fa"; 7 | 8 | const Footer = () => { 9 | return ( 10 |
11 |
12 |
13 | 14 |
15 |
16 | 17 | 18 | 19 | 20 |
21 |
22 |
23 |
24 | Qualtiy 25 | Help 26 | Share 27 | Carrers 28 | Testimonials 29 | Work 30 |
31 |
32 | 244-5333-7783 33 | hello@food.com 34 | press@food.com 35 | contact@food.com 36 |
37 |
38 | Terms & Conditions 39 | Privacy Policy 40 |
41 |
42 |
43 | ); 44 | }; 45 | 46 | export default Footer; 47 | -------------------------------------------------------------------------------- /src/Components/Home.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import BannerBackground from "../Assets/home-banner-background.png"; 3 | import BannerImage from "../Assets/home-banner-image.png"; 4 | import Navbar from "./Navbar"; 5 | import { FiArrowRight } from "react-icons/fi"; 6 | 7 | const Home = () => { 8 | return ( 9 |
10 | 11 |
12 |
13 | 14 |
15 |
16 |

17 | Your Favourite Food Delivered Hot & Fresh 18 |

19 |

20 | Healthy switcher chefs do all the prep work, like peeding, chopping 21 | & marinating, so you can cook a fresh food. 22 |

23 | 26 |
27 |
28 | 29 |
30 |
31 |
32 | ); 33 | }; 34 | 35 | export default Home; 36 | -------------------------------------------------------------------------------- /src/Components/Navbar.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable jsx-a11y/anchor-is-valid */ 2 | import React, { useState } from "react"; 3 | import Logo from "../Assets/Logo.svg"; 4 | import { BsCart2 } from "react-icons/bs"; 5 | import { HiOutlineBars3 } from "react-icons/hi2"; 6 | import Box from "@mui/material/Box"; 7 | import Drawer from "@mui/material/Drawer"; 8 | import List from "@mui/material/List"; 9 | import Divider from "@mui/material/Divider"; 10 | import ListItem from "@mui/material/ListItem"; 11 | import ListItemButton from "@mui/material/ListItemButton"; 12 | import ListItemIcon from "@mui/material/ListItemIcon"; 13 | import ListItemText from "@mui/material/ListItemText"; 14 | import HomeIcon from "@mui/icons-material/Home"; 15 | import InfoIcon from "@mui/icons-material/Info"; 16 | import CommentRoundedIcon from "@mui/icons-material/CommentRounded"; 17 | import PhoneRoundedIcon from "@mui/icons-material/PhoneRounded"; 18 | import ShoppingCartRoundedIcon from "@mui/icons-material/ShoppingCartRounded"; 19 | 20 | const Navbar = () => { 21 | const [openMenu, setOpenMenu] = useState(false); 22 | const menuOptions = [ 23 | { 24 | text: "Home", 25 | icon: , 26 | }, 27 | { 28 | text: "About", 29 | icon: , 30 | }, 31 | { 32 | text: "Testimonials", 33 | icon: , 34 | }, 35 | { 36 | text: "Contact", 37 | icon: , 38 | }, 39 | { 40 | text: "Cart", 41 | icon: , 42 | }, 43 | ]; 44 | return ( 45 | 83 | ); 84 | }; 85 | 86 | export default Navbar; 87 | -------------------------------------------------------------------------------- /src/Components/Testimonial.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ProfilePic from "../Assets/john-doe-image.png"; 3 | import { AiFillStar } from "react-icons/ai"; 4 | 5 | const Testimonial = () => { 6 | return ( 7 |
8 |
9 |

Testimonial

10 |

What They Are Saying

11 |

12 | Lorem ipsum dolor sit amet consectetur. Non tincidunt magna non et 13 | elit. Dolor turpis molestie dui magnis facilisis at fringilla quam. 14 |

15 |
16 |
17 | 18 |

19 | Lorem ipsum dolor sit amet consectetur. Non tincidunt magna non et 20 | elit. Dolor turpis molestie dui magnis facilisis at fringilla quam. 21 |

22 |
23 | 24 | 25 | 26 | 27 | 28 |
29 |

John Doe

30 |
31 |
32 | ); 33 | }; 34 | 35 | export default Testimonial; 36 | -------------------------------------------------------------------------------- /src/Components/Work.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PickMeals from "../Assets/pick-meals-image.png"; 3 | import ChooseMeals from "../Assets/choose-image.png"; 4 | import DeliveryMeals from "../Assets/delivery-image.png"; 5 | 6 | const Work = () => { 7 | const workInfoData = [ 8 | { 9 | image: PickMeals, 10 | title: "Pick Meals", 11 | text: "Lorem ipsum dolor sit amet consectetur. Maecenas orci et sagittis duis elementum interdum facilisi bibendum.", 12 | }, 13 | { 14 | image: ChooseMeals, 15 | title: "Choose How Often", 16 | text: "Lorem ipsum dolor sit amet consectetur. Maecenas orci et ", 17 | }, 18 | { 19 | image: DeliveryMeals, 20 | title: "Fast Deliveries", 21 | text: "Lorem ipsum dolor sit amet consectetur. Maecenas orci et lorem ipsum", 22 | }, 23 | ]; 24 | return ( 25 |
26 |
27 |

Work

28 |

How It Works

29 |

30 | Lorem ipsum dolor sit amet consectetur. Non tincidunt magna non et 31 | elit. Dolor turpis molestie dui magnis facilisis at fringilla quam. 32 |

33 |
34 |
35 | {workInfoData.map((data) => ( 36 |
37 |
38 | 39 |
40 |

{data.title}

41 |

{data.text}

42 |
43 | ))} 44 |
45 |
46 | ); 47 | }; 48 | 49 | export default Work; 50 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import App from "./App"; 4 | 5 | const root = ReactDOM.createRoot(document.getElementById("root")); 6 | root.render( 7 | 8 | 9 | 10 | ); 11 | --------------------------------------------------------------------------------