├── .gitattributes ├── .gitignore ├── README.md ├── imac-me.zip ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── .htaccess ├── _redirects ├── asset-manifest.json ├── favicon.ico ├── index.html ├── jpg │ ├── favicon.jpeg │ ├── roadmap1.jpg │ ├── roadmap2.jpg │ ├── services.jpg │ ├── services1.jpg │ ├── services2.jpg │ └── services3.jpg ├── mp4 │ ├── video1.mp4 │ ├── video2.mp4 │ └── video3.mp4 ├── png │ ├── about-us.png │ ├── audio1.png │ ├── audio2.png │ ├── audio3.png │ ├── audio4.png │ ├── audio5.png │ ├── audio6.png │ ├── c1.png │ ├── c2.png │ ├── c3.png │ ├── c4.png │ ├── c5.png │ ├── client1.png │ ├── client2.png │ ├── client3.png │ ├── client5.png │ ├── client6.png │ ├── client7.png │ ├── client8.png │ ├── client9.png │ ├── example-client.png │ ├── example-partner.png │ ├── logo.png │ ├── network1.png │ ├── network2.png │ ├── network3.png │ ├── network4.png │ ├── network5.png │ ├── partner3.png │ ├── radio1.png │ ├── radio2.png │ ├── radio3.png │ ├── radio4.png │ ├── roadmap1.png │ ├── roadmap2.png │ ├── security1.png │ ├── security2.png │ ├── security3.png │ ├── security4.png │ ├── security5.png │ ├── server1.png │ ├── server2.png │ ├── server3.png │ ├── server4.png │ ├── server5.png │ ├── server6.png │ ├── services.png │ ├── services1.png │ ├── services2.png │ ├── services3.png │ ├── solution1.png │ ├── solution10.png │ ├── solution11.png │ ├── solution12.png │ ├── solution2.png │ ├── solution3.png │ ├── solution4.png │ ├── solution5.png │ ├── solution6.png │ ├── solution7.png │ ├── solution8.png │ └── solution9.png ├── static │ ├── css │ │ ├── main.86ed5de1.css │ │ └── main.86ed5de1.css.map │ └── js │ │ ├── main.a5ec268a.js │ │ ├── main.a5ec268a.js.LICENSE.txt │ │ └── main.a5ec268a.js.map └── svg │ ├── about-bg.svg │ ├── audio.svg │ ├── client4.svg │ ├── client5.svg │ ├── contact-bg.svg │ ├── contact-bg3.svg │ ├── core1.svg │ ├── core2.svg │ ├── core3.svg │ ├── core4.svg │ ├── core5.svg │ ├── core6.svg │ ├── core7.svg │ ├── core8.svg │ ├── core9.svg │ ├── email.svg │ ├── facebook.svg │ ├── headerDivider.svg │ ├── headerDivider2.svg │ ├── instagram.svg │ ├── internation.svg │ ├── linkedin.svg │ ├── location.svg │ ├── network.svg │ ├── number1.svg │ ├── number2.svg │ ├── number3.svg │ ├── number4.svg │ ├── number5.svg │ ├── number6.svg │ ├── our-core-3.svg │ ├── our-core1.svg │ ├── our-core2.svg │ ├── our-mission.svg │ ├── our-vision.svg │ ├── partner1.svg │ ├── partner2.svg │ ├── partner4.svg │ ├── partner5.svg │ ├── partner6.svg │ ├── partner7.svg │ ├── phone.svg │ ├── question.svg │ ├── radio.svg │ ├── security.svg │ ├── server.svg │ ├── sub-header.svg │ └── sub-header2.svg ├── src ├── App.tsx ├── Components │ ├── BurgerMenu.tsx │ ├── ClientCard.tsx │ ├── CoreService.tsx │ ├── Footer.tsx │ ├── Header.tsx │ ├── Layout.tsx │ ├── RoadmapItem.tsx │ ├── ServiceItem.tsx │ ├── Solution.tsx │ ├── SolutionCategory.tsx │ └── SolutionItem.tsx ├── Pages │ ├── AboutUs.tsx │ ├── ContactUs.tsx │ ├── Home.tsx │ ├── OurClients.tsx │ ├── Solutions.tsx │ ├── Solutions │ │ ├── Audio.tsx │ │ ├── Centralized.tsx │ │ ├── DataCenter.tsx │ │ ├── Network.tsx │ │ ├── Radio.tsx │ │ └── Security.tsx │ └── Support.tsx ├── index.css └── index.tsx ├── tailwind.config.js └── tsconfig.json /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.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 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `npm start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 13 | 14 | The page will reload if you make edits.\ 15 | You will also see any lint errors in the console. 16 | 17 | ### `npm test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `npm run build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `npm run eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 35 | 36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 39 | 40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | -------------------------------------------------------------------------------- /imac-me.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/imac-me.zip -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "imac-me", 3 | "homepage": "http://www.lmac-me.com", 4 | "version": "0.1.0", 5 | "private": true, 6 | "dependencies": { 7 | "@testing-library/jest-dom": "^5.16.5", 8 | "@testing-library/react": "^13.4.0", 9 | "@testing-library/user-event": "^13.5.0", 10 | "@types/jest": "^27.5.2", 11 | "@types/node": "^16.11.62", 12 | "@types/react": "^18.0.21", 13 | "@types/react-burger-menu": "^2.8.3", 14 | "@types/react-dom": "^18.0.6", 15 | "react": "^18.2.0", 16 | "react-burger-menu": "^3.0.8", 17 | "react-dom": "^18.2.0", 18 | "react-icons": "^4.4.0", 19 | "react-scripts": "5.0.1", 20 | "react-toastify": "^9.0.8", 21 | "swiper": "^8.4.2", 22 | "typescript": "^4.8.3", 23 | "web-vitals": "^2.1.4" 24 | }, 25 | "scripts": { 26 | "start": "react-scripts start", 27 | "build": "react-scripts build", 28 | "test": "react-scripts test", 29 | "eject": "react-scripts eject" 30 | }, 31 | "eslintConfig": { 32 | "extends": [ 33 | "react-app", 34 | "react-app/jest" 35 | ] 36 | }, 37 | "browserslist": { 38 | "production": [ 39 | ">0.2%", 40 | "not dead", 41 | "not op_mini all" 42 | ], 43 | "development": [ 44 | "last 1 chrome version", 45 | "last 1 firefox version", 46 | "last 1 safari version" 47 | ] 48 | }, 49 | "devDependencies": { 50 | "autoprefixer": "^10.4.12", 51 | "postcss": "^8.4.16", 52 | "react-router-dom": "^6.4.1", 53 | "tailwindcss": "^3.1.8" 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/.htaccess: -------------------------------------------------------------------------------- 1 | RewriteBase / 2 | RewriteRule ^index\.html$ - [L] 3 | RewriteCond %{REQUEST_FILENAME} !-f 4 | RewriteCond %{REQUEST_FILENAME} !-d 5 | RewriteRule . /index.html [L] -------------------------------------------------------------------------------- /public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 -------------------------------------------------------------------------------- /public/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": { 3 | "main.css": "/static/css/main.86ed5de1.css", 4 | "main.js": "/static/js/main.a5ec268a.js", 5 | "index.html": "/index.html", 6 | "main.86ed5de1.css.map": "/static/css/main.86ed5de1.css.map", 7 | "main.a5ec268a.js.map": "/static/js/main.a5ec268a.js.map" 8 | }, 9 | "entrypoints": [ 10 | "static/css/main.86ed5de1.css", 11 | "static/js/main.a5ec268a.js" 12 | ] 13 | } -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Last Mile System Design | Bahrain 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /public/jpg/favicon.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/jpg/favicon.jpeg -------------------------------------------------------------------------------- /public/jpg/roadmap1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/jpg/roadmap1.jpg -------------------------------------------------------------------------------- /public/jpg/roadmap2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/jpg/roadmap2.jpg -------------------------------------------------------------------------------- /public/jpg/services.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/jpg/services.jpg -------------------------------------------------------------------------------- /public/jpg/services1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/jpg/services1.jpg -------------------------------------------------------------------------------- /public/jpg/services2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/jpg/services2.jpg -------------------------------------------------------------------------------- /public/jpg/services3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/jpg/services3.jpg -------------------------------------------------------------------------------- /public/mp4/video1.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/mp4/video1.mp4 -------------------------------------------------------------------------------- /public/mp4/video2.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/mp4/video2.mp4 -------------------------------------------------------------------------------- /public/mp4/video3.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/mp4/video3.mp4 -------------------------------------------------------------------------------- /public/png/about-us.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/about-us.png -------------------------------------------------------------------------------- /public/png/audio1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/audio1.png -------------------------------------------------------------------------------- /public/png/audio2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/audio2.png -------------------------------------------------------------------------------- /public/png/audio3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/audio3.png -------------------------------------------------------------------------------- /public/png/audio4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/audio4.png -------------------------------------------------------------------------------- /public/png/audio5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/audio5.png -------------------------------------------------------------------------------- /public/png/audio6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/audio6.png -------------------------------------------------------------------------------- /public/png/c1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/c1.png -------------------------------------------------------------------------------- /public/png/c2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/c2.png -------------------------------------------------------------------------------- /public/png/c3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/c3.png -------------------------------------------------------------------------------- /public/png/c4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/c4.png -------------------------------------------------------------------------------- /public/png/c5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/c5.png -------------------------------------------------------------------------------- /public/png/client1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/client1.png -------------------------------------------------------------------------------- /public/png/client2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/client2.png -------------------------------------------------------------------------------- /public/png/client3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/client3.png -------------------------------------------------------------------------------- /public/png/client5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/client5.png -------------------------------------------------------------------------------- /public/png/client6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/client6.png -------------------------------------------------------------------------------- /public/png/client7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/client7.png -------------------------------------------------------------------------------- /public/png/client8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/client8.png -------------------------------------------------------------------------------- /public/png/client9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/client9.png -------------------------------------------------------------------------------- /public/png/example-client.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/example-client.png -------------------------------------------------------------------------------- /public/png/example-partner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/example-partner.png -------------------------------------------------------------------------------- /public/png/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/logo.png -------------------------------------------------------------------------------- /public/png/network1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/network1.png -------------------------------------------------------------------------------- /public/png/network2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/network2.png -------------------------------------------------------------------------------- /public/png/network3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/network3.png -------------------------------------------------------------------------------- /public/png/network4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/network4.png -------------------------------------------------------------------------------- /public/png/network5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/network5.png -------------------------------------------------------------------------------- /public/png/partner3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/partner3.png -------------------------------------------------------------------------------- /public/png/radio1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/radio1.png -------------------------------------------------------------------------------- /public/png/radio2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/radio2.png -------------------------------------------------------------------------------- /public/png/radio3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/radio3.png -------------------------------------------------------------------------------- /public/png/radio4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/radio4.png -------------------------------------------------------------------------------- /public/png/roadmap1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/roadmap1.png -------------------------------------------------------------------------------- /public/png/roadmap2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/roadmap2.png -------------------------------------------------------------------------------- /public/png/security1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/security1.png -------------------------------------------------------------------------------- /public/png/security2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/security2.png -------------------------------------------------------------------------------- /public/png/security3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/security3.png -------------------------------------------------------------------------------- /public/png/security4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/security4.png -------------------------------------------------------------------------------- /public/png/security5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/security5.png -------------------------------------------------------------------------------- /public/png/server1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/server1.png -------------------------------------------------------------------------------- /public/png/server2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/server2.png -------------------------------------------------------------------------------- /public/png/server3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/server3.png -------------------------------------------------------------------------------- /public/png/server4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/server4.png -------------------------------------------------------------------------------- /public/png/server5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/server5.png -------------------------------------------------------------------------------- /public/png/server6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/server6.png -------------------------------------------------------------------------------- /public/png/services.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/services.png -------------------------------------------------------------------------------- /public/png/services1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/services1.png -------------------------------------------------------------------------------- /public/png/services2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/services2.png -------------------------------------------------------------------------------- /public/png/services3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/services3.png -------------------------------------------------------------------------------- /public/png/solution1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/solution1.png -------------------------------------------------------------------------------- /public/png/solution10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/solution10.png -------------------------------------------------------------------------------- /public/png/solution11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/solution11.png -------------------------------------------------------------------------------- /public/png/solution12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/solution12.png -------------------------------------------------------------------------------- /public/png/solution2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/solution2.png -------------------------------------------------------------------------------- /public/png/solution3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/solution3.png -------------------------------------------------------------------------------- /public/png/solution4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/solution4.png -------------------------------------------------------------------------------- /public/png/solution5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/solution5.png -------------------------------------------------------------------------------- /public/png/solution6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/solution6.png -------------------------------------------------------------------------------- /public/png/solution7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/solution7.png -------------------------------------------------------------------------------- /public/png/solution8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/solution8.png -------------------------------------------------------------------------------- /public/png/solution9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/png/solution9.png -------------------------------------------------------------------------------- /public/static/js/main.a5ec268a.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /** 2 | * @license React 3 | * react-dom.production.min.js 4 | * 5 | * Copyright (c) Facebook, Inc. and its affiliates. 6 | * 7 | * This source code is licensed under the MIT license found in the 8 | * LICENSE file in the root directory of this source tree. 9 | */ 10 | 11 | /** 12 | * @license React 13 | * react-jsx-runtime.production.min.js 14 | * 15 | * Copyright (c) Facebook, Inc. and its affiliates. 16 | * 17 | * This source code is licensed under the MIT license found in the 18 | * LICENSE file in the root directory of this source tree. 19 | */ 20 | 21 | /** 22 | * @license React 23 | * react.production.min.js 24 | * 25 | * Copyright (c) Facebook, Inc. and its affiliates. 26 | * 27 | * This source code is licensed under the MIT license found in the 28 | * LICENSE file in the root directory of this source tree. 29 | */ 30 | 31 | /** 32 | * @license React 33 | * scheduler.production.min.js 34 | * 35 | * Copyright (c) Facebook, Inc. and its affiliates. 36 | * 37 | * This source code is licensed under the MIT license found in the 38 | * LICENSE file in the root directory of this source tree. 39 | */ 40 | 41 | /** 42 | * @remix-run/router v1.0.1 43 | * 44 | * Copyright (c) Remix Software Inc. 45 | * 46 | * This source code is licensed under the MIT license found in the 47 | * LICENSE.md file in the root directory of this source tree. 48 | * 49 | * @license MIT 50 | */ 51 | 52 | /** 53 | * React Router v6.4.1 54 | * 55 | * Copyright (c) Remix Software Inc. 56 | * 57 | * This source code is licensed under the MIT license found in the 58 | * LICENSE.md file in the root directory of this source tree. 59 | * 60 | * @license MIT 61 | */ 62 | -------------------------------------------------------------------------------- /public/svg/about-bg.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/svg/audio.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/svg/client4.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 17 | 18 | 19 | 20 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /public/svg/client5.svg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prowebdev119/Last-Mile-System-Design-Bahrain/abafd80f1ad7ac60529e0a049afdcfd76128092e/public/svg/client5.svg -------------------------------------------------------------------------------- /public/svg/contact-bg.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/svg/contact-bg3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/svg/core1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /public/svg/core2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/svg/core3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/svg/core4.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/svg/core5.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /public/svg/core6.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/svg/core7.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /public/svg/core8.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/svg/core9.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /public/svg/email.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/svg/facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/svg/headerDivider.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /public/svg/headerDivider2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /public/svg/instagram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/svg/internation.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /public/svg/linkedin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/svg/location.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/svg/network.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/svg/number1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /public/svg/number2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /public/svg/number3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /public/svg/number4.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /public/svg/number5.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /public/svg/number6.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /public/svg/our-core-3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /public/svg/our-core1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /public/svg/our-core2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /public/svg/our-mission.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /public/svg/our-vision.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /public/svg/partner1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 9 | 10 | 134 | 159 | 160 | 161 | -------------------------------------------------------------------------------- /public/svg/partner2.svg: -------------------------------------------------------------------------------- 1 | Hewlett Packard Enterprise -------------------------------------------------------------------------------- /public/svg/partner4.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /public/svg/partner6.svg: -------------------------------------------------------------------------------- 1 | 2 | Cisco.com Worldwide 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /public/svg/partner7.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /public/svg/phone.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/svg/question.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/svg/radio.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/svg/security.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/svg/server.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /public/svg/sub-header.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/svg/sub-header2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | import { BrowserRouter, Routes, Route } from 'react-router-dom'; 2 | import AboutUs from './Pages/AboutUs'; 3 | import ContactUs from './Pages/ContactUs'; 4 | import Home from './Pages/Home'; 5 | import OurClients from './Pages/OurClients'; 6 | import Solutions from './Pages/Solutions'; 7 | import Audio from './Pages/Solutions/Audio'; 8 | import Centralized from './Pages/Solutions/Centralized'; 9 | import DataCenter from './Pages/Solutions/DataCenter'; 10 | import Network from './Pages/Solutions/Network'; 11 | import Radio from './Pages/Solutions/Radio'; 12 | import Security from './Pages/Solutions/Security'; 13 | import Support from './Pages/Support'; 14 | import 'react-toastify/dist/ReactToastify.css'; 15 | import { ToastContainer } from 'react-toastify'; 16 | 17 | function App() { 18 | return ( 19 | 20 | 21 | 22 | } /> 23 | } /> 24 | } /> 25 | } /> 26 | } /> 27 | } /> 28 | } /> 29 | 30 | } /> 31 | } /> 32 | } /> 33 | } /> 34 | } /> 35 | } /> 36 | 37 | 38 | ); 39 | } 40 | 41 | export default App; 42 | -------------------------------------------------------------------------------- /src/Components/BurgerMenu.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { slide as Menu } from 'react-burger-menu'; 3 | import { GiHamburgerMenu } from 'react-icons/gi'; 4 | import { HiOutlineX } from 'react-icons/hi'; 5 | const BurgerMenu: React.FC<{ selected: string }> = ({ selected }) => { 6 | return ( 7 | } 11 | customCrossIcon={} 12 | className="w-9 h-9" 13 | > 14 | 19 | Home 20 | 21 | 26 | About Us 27 | 28 | 33 | Our Solutions 34 | 35 | 40 | Support & Services 41 | 42 | 47 | Our Clients 48 | 49 | 54 | Contact Us 55 | 56 | 57 | ); 58 | }; 59 | 60 | export default BurgerMenu; 61 | -------------------------------------------------------------------------------- /src/Components/ClientCard.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const ClientCard: React.FC<{ 4 | companyName: string; 5 | description: string; 6 | imageUrl: string; 7 | }> = ({ companyName, description, imageUrl }) => { 8 | return ( 9 |
10 | {/* TEXTS */} 11 | 12 | 13 |
{`
14 |
{companyName}
15 |
{description}
16 | {/* SOCIALS */} 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |
`}
32 |
33 | ); 34 | }; 35 | 36 | export default ClientCard; 37 | -------------------------------------------------------------------------------- /src/Components/CoreService.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const CoreService: React.FC<{ imageUrl: string; title: string }> = ({ 4 | imageUrl, 5 | title, 6 | }) => { 7 | return ( 8 |
9 | {/* INNER */} 10 |
11 | 12 |
{title}
13 |
14 |
15 | ); 16 | }; 17 | 18 | export default CoreService; 19 | -------------------------------------------------------------------------------- /src/Components/Footer.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Footer: React.FC<{ selected?: string }> = ({ selected }) => { 4 | return ( 5 | 89 | ); 90 | }; 91 | 92 | export default Footer; 93 | -------------------------------------------------------------------------------- /src/Components/Header.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react'; 2 | import { MdOutlineKeyboardArrowDown, MdOutlineKeyboardArrowUp } from 'react-icons/md'; 3 | import BurgerMenu from './BurgerMenu'; 4 | import SolutionItem from './SolutionItem'; 5 | 6 | const Header: React.FC<{ selected: string; isHome?: boolean }> = ({ 7 | selected, 8 | isHome = false, 9 | }) => { 10 | const [menuActive, setMenuActive] = useState(false); 11 | return ( 12 |
13 | {/* HEADER */} 14 |
17 |
18 | {/* LOGO */} 19 |
20 | 21 | 22 | 23 |
24 | {/* NAVBAR */} 25 |
26 | 27 |
28 |
29 | 30 | Home 31 | 32 | 33 | About Us 34 | 35 | 36 | Our Solutions 37 | 38 | {/*
setMenuActive(menuActive => !menuActive)} 40 | className={`flex items-center cursor-pointer ${ 41 | selected === 'solutions' ? 'selected' : '' 42 | }`} 43 | > 44 | 45 | Our Solutions 46 | 47 | {menuActive ? ( 48 | 49 | ) : ( 50 | 51 | )} 52 |
*/} 53 | 54 | Support & Services 55 | 56 | 57 | Our Clients 58 | 59 | 60 | Contact Us 61 | 62 |
63 |
64 |
65 | 66 | {/* MENU 67 |
72 |
73 | 78 | 83 | 88 | 93 | 98 | 103 |
104 |
*/} 105 |
106 | ); 107 | }; 108 | 109 | export default Header; 110 | -------------------------------------------------------------------------------- /src/Components/Layout.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Footer from './Footer'; 3 | import Header from './Header'; 4 | 5 | const Layout: React.FC<{ 6 | children: React.ReactNode; 7 | title: string; 8 | description: string; 9 | selected: string; 10 | }> = ({ children, title = '', description = null, selected }) => { 11 | return ( 12 |
13 |
14 | 15 | {/* Main */} 16 |
17 | {/* Top Title */} 18 |
23 |
{title}
24 | {description && ( 25 |
26 | {description} 27 |
28 | )} 29 | 36 |
37 | 38 | {children} 39 |
40 |
42 | ); 43 | }; 44 | 45 | export default Layout; 46 | -------------------------------------------------------------------------------- /src/Components/RoadmapItem.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const RoadmapItem: React.FC<{ title: string; description: string; margin: string }> = ({ 4 | title, 5 | description, 6 | margin, 7 | }) => { 8 | return ( 9 |
12 |
{title}
13 |
{description}
14 |
15 | ); 16 | }; 17 | 18 | export default RoadmapItem; 19 | -------------------------------------------------------------------------------- /src/Components/ServiceItem.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const ServiceItem: React.FC<{ title: string; text: string; img: string }> = ({ 4 | title, 5 | text, 6 | img, 7 | }) => { 8 | return ( 9 |
10 |
11 |
12 | 13 |
14 |
{title}
15 |
16 | {text} 17 |
18 |
19 |
20 | ); 21 | }; 22 | 23 | export default ServiceItem; 24 | -------------------------------------------------------------------------------- /src/Components/Solution.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Solution: React.FC<{ solution: { img: string; title: string; text: string } }> = ({ 4 | solution, 5 | }) => { 6 | return ( 7 |
8 | {/* IMAGE */} 9 |
10 | 11 |
12 | {/* LEFT */} 13 |
14 |
{solution.title}
15 |
{solution.text}
16 |
17 |
18 | ); 19 | }; 20 | 21 | export default Solution; 22 | -------------------------------------------------------------------------------- /src/Components/SolutionCategory.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Layout from './Layout'; 3 | import Solution from './Solution'; 4 | 5 | const SOLUTIONS = [ 6 | [ 7 | { 8 | img: 'radio1', 9 | title: 'Microwave Radio (Smart Zone, Marine, TETRA, UHF/VHF)', 10 | text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', 11 | }, 12 | { 13 | img: 'radio2', 14 | title: 'Microwave Radio (Smart Zone, Marine, TETRA, UHF/VHF)', 15 | text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', 16 | }, 17 | { 18 | img: 'radio3', 19 | title: 'Microwave Radio (Smart Zone, Marine, TETRA, UHF/VHF)', 20 | text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', 21 | }, 22 | { 23 | img: 'radio4', 24 | title: 'Microwave Radio (Smart Zone, Marine, TETRA, UHF/VHF)', 25 | text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', 26 | }, 27 | ], 28 | [ 29 | { 30 | img: 'server1', 31 | title: 'Microwave Radio (Smart Zone, Marine, TETRA, UHF/VHF)', 32 | text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', 33 | }, 34 | { 35 | img: 'server2', 36 | title: 'Microwave Radio (Smart Zone, Marine, TETRA, UHF/VHF)', 37 | text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', 38 | }, 39 | { 40 | img: 'server3', 41 | title: 'Microwave Radio (Smart Zone, Marine, TETRA, UHF/VHF)', 42 | text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', 43 | }, 44 | { 45 | img: 'server4', 46 | title: 'Microwave Radio (Smart Zone, Marine, TETRA, UHF/VHF)', 47 | text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', 48 | }, 49 | { 50 | img: 'server5', 51 | title: 'Microwave Radio (Smart Zone, Marine, TETRA, UHF/VHF)', 52 | text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', 53 | }, 54 | { 55 | img: 'server6', 56 | title: 'Microwave Radio (Smart Zone, Marine, TETRA, UHF/VHF)', 57 | text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', 58 | }, 59 | ], 60 | [ 61 | { 62 | img: 'network1', 63 | title: 'Microwave Radio (Smart Zone, Marine, TETRA, UHF/VHF)', 64 | text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', 65 | }, 66 | { 67 | img: 'network2', 68 | title: 'Microwave Radio (Smart Zone, Marine, TETRA, UHF/VHF)', 69 | text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', 70 | }, 71 | { 72 | img: 'network3', 73 | title: 'Microwave Radio (Smart Zone, Marine, TETRA, UHF/VHF)', 74 | text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', 75 | }, 76 | { 77 | img: 'network4', 78 | title: 'Microwave Radio (Smart Zone, Marine, TETRA, UHF/VHF)', 79 | text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', 80 | }, 81 | { 82 | img: 'network5', 83 | title: 'Microwave Radio (Smart Zone, Marine, TETRA, UHF/VHF)', 84 | text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', 85 | }, 86 | ], 87 | [ 88 | { 89 | img: 'c1', 90 | title: 'Microwave Radio (Smart Zone, Marine, TETRA, UHF/VHF)', 91 | text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', 92 | }, 93 | { 94 | img: 'c2', 95 | title: 'Microwave Radio (Smart Zone, Marine, TETRA, UHF/VHF)', 96 | text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', 97 | }, 98 | { 99 | img: 'c3', 100 | title: 'Microwave Radio (Smart Zone, Marine, TETRA, UHF/VHF)', 101 | text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', 102 | }, 103 | { 104 | img: 'c4', 105 | title: 'Microwave Radio (Smart Zone, Marine, TETRA, UHF/VHF)', 106 | text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', 107 | }, 108 | { 109 | img: 'c5', 110 | title: 'Microwave Radio (Smart Zone, Marine, TETRA, UHF/VHF)', 111 | text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', 112 | }, 113 | ], 114 | [ 115 | { 116 | img: 'security1', 117 | title: 'Microwave Radio (Smart Zone, Marine, TETRA, UHF/VHF)', 118 | text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', 119 | }, 120 | { 121 | img: 'security2', 122 | title: 'Microwave Radio (Smart Zone, Marine, TETRA, UHF/VHF)', 123 | text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', 124 | }, 125 | { 126 | img: 'security3', 127 | title: 'Microwave Radio (Smart Zone, Marine, TETRA, UHF/VHF)', 128 | text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', 129 | }, 130 | { 131 | img: 'security4', 132 | title: 'Microwave Radio (Smart Zone, Marine, TETRA, UHF/VHF)', 133 | text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', 134 | }, 135 | { 136 | img: 'security5', 137 | title: 'Microwave Radio (Smart Zone, Marine, TETRA, UHF/VHF)', 138 | text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', 139 | }, 140 | ], 141 | [ 142 | { 143 | img: 'audio1', 144 | title: 'Microwave Radio (Smart Zone, Marine, TETRA, UHF/VHF)', 145 | text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', 146 | }, 147 | { 148 | img: 'audio2', 149 | title: 'Microwave Radio (Smart Zone, Marine, TETRA, UHF/VHF)', 150 | text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', 151 | }, 152 | { 153 | img: 'audio3', 154 | title: 'Microwave Radio (Smart Zone, Marine, TETRA, UHF/VHF)', 155 | text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', 156 | }, 157 | { 158 | img: 'audio4', 159 | title: 'Microwave Radio (Smart Zone, Marine, TETRA, UHF/VHF)', 160 | text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', 161 | }, 162 | { 163 | img: 'audio5', 164 | title: 'Microwave Radio (Smart Zone, Marine, TETRA, UHF/VHF)', 165 | text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', 166 | }, 167 | { 168 | img: 'audio6', 169 | title: 'Microwave Radio (Smart Zone, Marine, TETRA, UHF/VHF)', 170 | text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', 171 | }, 172 | ], 173 | ]; 174 | 175 | const SolutionCategory: React.FC<{ id: number; title: string; description: string }> = ({ 176 | id, 177 | title, 178 | description = '', 179 | }) => { 180 | return ( 181 | 182 |
183 | {SOLUTIONS[id].map(solution => ( 184 | 185 | ))} 186 |
187 | 188 | ); 189 | }; 190 | 191 | export default SolutionCategory; 192 | -------------------------------------------------------------------------------- /src/Components/SolutionItem.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { RiArrowRightLine } from 'react-icons/ri'; 3 | const SolutionItem: React.FC<{ imgName: string; text: string; path: string }> = ({ 4 | imgName, 5 | text, 6 | path, 7 | }) => { 8 | return ( 9 |
10 |
11 | {path} 12 |
13 | 14 | {text} 15 | 16 | 17 |
18 |
19 |
20 | ); 21 | }; 22 | 23 | export default SolutionItem; 24 | -------------------------------------------------------------------------------- /src/Pages/AboutUs.tsx: -------------------------------------------------------------------------------- 1 | import Layout from '../Components/Layout'; 2 | 3 | const AboutUs = () => { 4 | return ( 5 | 10 |
11 |
12 | {/* LEFT */} 13 |
14 |
15 | Our Skills & Expertise 16 |
17 |
18 | LMT has been in operation in the Saudi Arabia since 2007. In this time we 19 | have developed a deep understanding of the region and have witnessed many of 20 | the significant developments that have taken place within the communications 21 | and telecommunications sectors, indeed we have been a contributor to many of 22 | them. We now employ over 20 full time employees and have our main office in 23 | Eastern Province Al Khobar and have successfully delivered projects 24 | throughout the region including many of market sectors. 25 | 26 | LMT supplies a wide range of network infrastructure design and 27 | installation services to system integrator, telecommunications operators, 28 | as well as to large enterprises and government organizations. This also 29 | includes Fiber Transmission, GEPON, Ethernet Switches, Smart Wireless LAN 30 | systems, IP Telephony and converged solutions. 31 | 32 |
33 |
34 | 35 | {/* RIGHT */} 36 |
37 | 38 |
39 |
40 | 41 | {/* BOTTOM PART */} 42 |
43 | {/* TOP */} 44 |
45 | 50 |
51 |
52 | Our Mission 53 |
54 |
55 | Our mission is to provide solutions, the latest technologies and optimal 56 | services to our customers, while growing our business using direct and 57 | indirect distribution to sell our advanced security/IT solutions and other 58 | low current systems. 59 |
60 |
61 |
62 | 63 | {/* BOTTOM */} 64 |
65 |
66 |
67 | Our Vision 68 |
69 |
70 | Our vision is to pull the company into the future to take an advanced 71 | position among telecommunications solutions companies within the Arabian 72 | Gulf. 73 |
74 |
75 | 76 |
77 |
78 |
79 | 80 | ); 81 | }; 82 | 83 | export default AboutUs; 84 | -------------------------------------------------------------------------------- /src/Pages/ContactUs.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Layout from '../Components/Layout'; 3 | import { toast } from 'react-toastify'; 4 | 5 | const ContactUs = () => { 6 | const handleSubmit = (e: any) => { 7 | e.preventDefault(); 8 | toast.success('Thank you, we will contact you soon!', { 9 | position: 'top-right', 10 | autoClose: 5000, 11 | hideProgressBar: false, 12 | closeOnClick: true, 13 | pauseOnHover: true, 14 | draggable: false, 15 | progress: undefined, 16 | theme: 'light', 17 | }); 18 | }; 19 | 20 | return ( 21 | 22 | {/* MAIN */} 23 | 24 |
25 |
26 | {/* BG */} 27 | 32 | 33 | {/* CONTENT */} 34 |
35 | {/* FORM */} 36 |
37 |
{ 39 | e.preventDefault(); 40 | handleSubmit(e); 41 | }} 42 | className="flex flex-col mx-5 space-y-3 text-web-gray " 43 | > 44 |
45 | Contact Us & Let’s Collaborate! 46 |
47 | 48 |
49 |
50 |
51 | 54 | 61 |
62 |
63 | 66 | 72 |
73 |
74 | 75 |
76 | 79 | 80 |
81 | 82 |
83 | 86 | 87 |
88 | 89 |
90 | 93 | 102 |
103 |
104 | 107 |
108 |
109 |
110 |
111 | {/* INFO */} 112 |
113 |
114 | 115 |
116 |
Address
117 |
118 | 76H9+QF2, Prince Turkey Street, Alkurnaish, Al Khobar 34414, Saudi 119 | Arabia 120 |
121 |
122 |
123 | 124 |
125 | 126 |
127 |
Email
128 |
info@lmac-me.com
129 |
130 |
131 | 132 |
133 | 134 |
135 |
Phone
136 |
137 | Tel : +966 13 8999927 138 | Fax : +966 13 8974479 139 | Mobile : +966 505 842611 140 |
141 |
142 |
143 |
144 |
145 |
146 | 147 | ); 148 | }; 149 | 150 | export default ContactUs; 151 | -------------------------------------------------------------------------------- /src/Pages/Home.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import Header from '../Components/Header'; 3 | import { IoIosArrowForward, IoIosArrowBack } from 'react-icons/io'; 4 | import CoreService from '../Components/CoreService'; 5 | import Footer from '../Components/Footer'; 6 | import { AiOutlineArrowRight } from 'react-icons/ai'; 7 | import { Swiper, SwiperSlide } from 'swiper/react'; 8 | import { FreeMode } from 'swiper'; 9 | import 'swiper/css'; 10 | import 'swiper/css/autoplay'; 11 | import 'swiper/css/free-mode'; 12 | import SwiperCore, { Autoplay } from 'swiper'; 13 | const CONTENT = [ 14 | { 15 | title: 'Security Solutions', 16 | description: 'Cybersecurity services for enterprise', 17 | button: 'DISCOVER MORE', 18 | }, 19 | { 20 | title: 'Internet Connectivity', 21 | description: 'Cybersecurity services for enterprise 2', 22 | button: 'DISCOVER MORE', 23 | }, 24 | { 25 | title: 'Switching & Data Centers', 26 | description: 'Cybersecurity services for enterprise 3', 27 | button: 'DISCOVER MORE', 28 | }, 29 | ]; 30 | 31 | const Home = () => { 32 | SwiperCore.use([Autoplay]); 33 | 34 | const maxNumber = CONTENT.length - 1; 35 | const [currentText, setCurrentText] = useState(0); 36 | const [currentStyle, setCurrentStyle] = useState(''); 37 | 38 | const increaseText = (num: any) => { 39 | setCurrentStyle('slider-changes'); 40 | 41 | setTimeout(() => { 42 | setCurrentStyle('slider-changes2'); 43 | if (currentText >= maxNumber) { 44 | setCurrentText(0); 45 | } else { 46 | setCurrentText(currentText => currentText + num); 47 | } 48 | }, 1000); 49 | }; 50 | 51 | const decreaseText = (num: any) => { 52 | setCurrentStyle('slider-changes'); 53 | 54 | setTimeout(() => { 55 | setCurrentStyle('slider-changes2'); 56 | if (currentText == 0) { 57 | setCurrentText(maxNumber); 58 | } else { 59 | setCurrentText(currentText => currentText - num); 60 | } 61 | }, 1000); 62 | }; 63 | 64 | return ( 65 |
66 |
67 | {/* TOP SLIDER */} 68 | {/* */} 73 | {currentText === 0 && ( 74 | 87 | )} 88 | 89 | {currentText === 1 && ( 90 | 103 | )} 104 | 105 | {currentText === 2 && ( 106 | 119 | )} 120 | 121 |
122 | {/* VIDEO */} 123 |
124 | {/* SLIDER */} 125 |
126 |
127 | decreaseText(1)} /> 128 |
129 | {/* CONTENT */} 130 |
133 |
134 |
135 | {CONTENT[currentText].title} 136 |
137 |
138 | {CONTENT[currentText].description} 139 |
140 |
141 | 144 |
145 |
increaseText(1)}> 146 | 147 |
148 |
149 |
150 |
151 | {/* SERVICES */} 152 |
153 |
154 | Our Core Services 155 |
156 | 157 | {/* CARDS */} 158 | 159 |
160 | 165 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 |
182 |
183 | 184 | {/* OUR PARTNERS */} 185 |
186 | {/* TEXT */} 187 | 192 |
193 |
Our Partners
194 |
195 | Our Clients speaks better than words! 196 |
197 |
198 | {/* SLIDER */} 199 |
200 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 |
269 | {/* SHOW MORE */} 270 |
271 |
Show More
272 |
273 | 274 |
275 |
276 |
277 | 278 |
280 | ); 281 | }; 282 | 283 | export default Home; 284 | -------------------------------------------------------------------------------- /src/Pages/OurClients.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ClientCard from '../Components/ClientCard'; 3 | import Layout from '../Components/Layout'; 4 | import { AiOutlineArrowRight } from 'react-icons/ai'; 5 | const OurClients = () => { 6 | return ( 7 | 8 | {/* MAIN */} 9 |
10 | {/* TITLE */} 11 |
12 | Our Clients speaks better than words! 13 |
14 | {/* CARDS */} 15 |
16 | 21 | 26 | 31 | 36 | 41 | 46 | 51 | 56 |
57 | 58 |
59 |
Show More
60 |
61 | 62 |
63 |
64 |
65 | 66 | ); 67 | }; 68 | 69 | export default OurClients; 70 | -------------------------------------------------------------------------------- /src/Pages/Solutions.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Layout from '../Components/Layout'; 3 | 4 | const Solutions = () => { 5 | return ( 6 | 7 | {/* MAIN */} 8 |
9 | {/* CARDS */} 10 |
11 | {/* CARD-IMAGE */} 12 |
13 | 14 | 15 |
16 | {/* CARD-MENU */} 17 |
18 | {/* TITLE */} 19 |
Radio and Telecommunication
20 | {/* CARD-ITEMS */} 21 |
22 |
23 | Microwave Radio (Smart Zone, Marine, TETRA, UHF/VHF) 24 |
25 |
Telephone Switch (PABX)
26 |
Call Centers
27 |
Optical Transport Network
28 |
29 | {/* BUTTON */} 30 |
31 | Contact Us 32 |
33 |
34 |
35 | 36 | {/* 2 */} 37 |
38 | {/* CARD-MENU */} 39 |
40 | {/* TITLE */} 41 |
Switching and Data Center
42 | {/* CARD-ITEMS */} 43 |
44 |
Local Area Network (LAN)
45 |
Wide Area Network (WAN)
46 |
Wireless LAN – WiFi
47 |
Network and information Security
48 |
Cloud Security
49 |
FTTH Network Solutions
50 |
51 | {/* BUTTON */} 52 |
53 | Contact Us 54 |
55 |
56 | 57 | {/* CARD-IMAGE */} 58 |
59 | 60 | 61 |
62 |
63 | 64 | {/* 3 */} 65 | {/* CARDS */} 66 |
67 | {/* CARD-IMAGE */} 68 |
69 | 70 | 71 |
72 | {/* CARD-MENU */} 73 |
74 | {/* TITLE */} 75 |
Network Infrastructure Cabling
76 | {/* CARD-ITEMS */} 77 |
78 |
79 | Cable splicing, Cable termination and testing (copper and fiber) 80 |
81 |
Cableway and wire way construction
82 |
Conduit construction
83 |
84 | Horizontal & Backbone cable pulling (copper & fiber) 85 |
86 |
87 | Installation of grounding bars, equipment racks, cabinets, raised floor 88 | and patch panels 89 |
90 |
91 | {/* BUTTON */} 92 |
93 | Contact Us 94 |
95 |
96 |
97 | 98 | {/* 4 */} 99 |
100 | {/* CARD-MENU */} 101 |
102 | {/* TITLE */} 103 |
Centralized and IP TV
104 | {/* CARD-ITEMS */} 105 |
106 |
SMATV
107 |
IPTV
108 |
Broadcast TV
109 |
IP MPEG 4 IP Set Top box
110 |
Video on Demand Servers
111 |
112 | {/* BUTTON */} 113 |
114 | Contact Us 115 |
116 |
117 | 118 | {/* CARD-IMAGE */} 119 |
120 | 121 | 122 |
123 |
124 | 125 | {/* 5 */} 126 | {/* CARDS */} 127 |
128 | {/* CARD-IMAGE */} 129 |
130 | 131 | 132 |
133 | {/* CARD-MENU */} 134 |
135 | {/* TITLE */} 136 |
Security and Surveillance
137 | {/* CARD-ITEMS */} 138 |
139 |
Security Cameras
140 |
Recording Solutions
141 |
Software Solutions
142 |
Intercom Solutions
143 |
Access Doors Solutions
144 |
145 | {/* BUTTON */} 146 |
147 | Contact Us 148 |
149 |
150 |
151 | 152 | {/* 6 */} 153 | {/* CARDS */} 154 |
155 | {/* CARD-MENU */} 156 |
157 | {/* TITLE */} 158 |
Audio Visual and Sound Systems
159 | {/* CARD-ITEMS */} 160 |
161 |
Public Address
162 |
Sound Systems
163 |
Signage Systems
164 |
Interactive Boards
165 |
IP Clock Systems
166 |
Projectors and Screens
167 |
168 | {/* BUTTON */} 169 |
170 | Contact Us 171 |
172 |
173 | 174 | {/* CARD-IMAGE */} 175 |
176 | 177 | 178 |
179 |
180 |
181 | 182 | ); 183 | }; 184 | 185 | export default Solutions; 186 | -------------------------------------------------------------------------------- /src/Pages/Solutions/Audio.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import SolutionCategory from '../../Components/SolutionCategory'; 3 | 4 | const Audio = () => { 5 | return ( 6 | 7 | ); 8 | }; 9 | 10 | export default Audio; 11 | -------------------------------------------------------------------------------- /src/Pages/Solutions/Centralized.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import SolutionCategory from '../../Components/SolutionCategory'; 3 | 4 | const Centralized = () => { 5 | return ; 6 | }; 7 | 8 | export default Centralized; 9 | -------------------------------------------------------------------------------- /src/Pages/Solutions/DataCenter.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import SolutionCategory from '../../Components/SolutionCategory'; 3 | 4 | const DataCenter = () => { 5 | return ; 6 | }; 7 | 8 | export default DataCenter; 9 | -------------------------------------------------------------------------------- /src/Pages/Solutions/Network.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import SolutionCategory from '../../Components/SolutionCategory'; 3 | 4 | const Network = () => { 5 | return ( 6 | 7 | ); 8 | }; 9 | 10 | export default Network; 11 | -------------------------------------------------------------------------------- /src/Pages/Solutions/Radio.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import SolutionCategory from '../../Components/SolutionCategory'; 3 | 4 | const Radio = () => { 5 | return ; 6 | }; 7 | 8 | export default Radio; 9 | -------------------------------------------------------------------------------- /src/Pages/Solutions/Security.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import SolutionCategory from '../../Components/SolutionCategory'; 3 | 4 | const Security = () => { 5 | return ; 6 | }; 7 | 8 | export default Security; 9 | -------------------------------------------------------------------------------- /src/Pages/Support.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Layout from '../Components/Layout'; 3 | import RoadmapItem from '../Components/RoadmapItem'; 4 | import ServiceItem from '../Components/ServiceItem'; 5 | 6 | const Support = () => { 7 | return ( 8 | 13 |
14 | {/* LEFT */} 15 |
16 |
17 | LMT is keen to apply the highest quality standards in the provision of after-sales services, whether through partners or the provision of annual maintenance contracts with periodic visits to ensure the continuity of the efficiency of the devices with the submission of periodic reports to ensure customer satisfaction with the services and ensure the continuity of service without interruption. 18 |
19 |
20 | 21 | {/* RIGHT */} 22 |
23 | 28 |
29 |
30 |
31 | 36 | 41 | 46 |
47 | 48 | {/* ROADMAP */} 49 |
50 |
51 | Projects Roadmap 52 |
53 | 54 |
55 | {/* LEFT */} 56 |
57 | 62 | 67 | 72 | 77 |
78 | {/* MIDDLE */} 79 |
80 | {/* NUMBERS */} 81 | 86 | 91 | 96 | 101 | 106 | 111 |
112 | {/* RIGHT */} 113 |
114 | 119 | 124 | 129 | 134 |
135 |
136 |
137 | 138 | ); 139 | }; 140 | 141 | export default Support; 142 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap'); 6 | 7 | .roboto { 8 | font-family: 'Roboto', sans-serif; 9 | } 10 | 11 | .open-sans { 12 | font-family: 'Open Sans', sans-serif; 13 | } 14 | 15 | @layer components { 16 | .selected { 17 | @apply font-bold relative; 18 | } 19 | 20 | .bg-web-gray { 21 | @apply bg-[#343A40]; 22 | } 23 | 24 | .text-web-gray { 25 | @apply text-[#343A40]; 26 | } 27 | 28 | .footer-column { 29 | @apply flex flex-col w-full md:w-auto mb-4 md:mb-0 md:space-y-3; 30 | } 31 | 32 | .footer-title { 33 | @apply font-bold mb-3 inline md:mb-7 text-lg; 34 | } 35 | 36 | .footer-link { 37 | @apply font-thin flex space-x-3 items-center; 38 | } 39 | .footer-svg { 40 | @apply w-4 h-4; 41 | } 42 | .roadmap-number { 43 | @apply absolute hidden md:block h-[30px] md:h-[60px]; 44 | } 45 | 46 | .roadmap-line { 47 | @apply bg-[#dd9933] w-3 md:w-2 flex flex-col; 48 | } 49 | 50 | .client-social { 51 | @apply h-4 w-4 cursor-pointer; 52 | } 53 | 54 | /* Solutions */ 55 | 56 | .solution-card { 57 | @apply flex px-5 lg:px-10 xl:px-0 w-full items-center justify-between text-web-gray; 58 | } 59 | 60 | .solution-card-image { 61 | @apply flex flex-col w-[40%] mr-5 lg:flex-row lg:space-x-10 space-y-10 lg:w-[50%]; 62 | } 63 | 64 | .right { 65 | @apply justify-end ml-5 mr-0 lg:ml-0; 66 | } 67 | 68 | .solution-card-image img { 69 | @apply lg:w-auto lg:h-[300px] w-[100px]; 70 | } 71 | 72 | .solution-card-menu { 73 | @apply flex flex-col lg:px-10 flex-grow lg:flex-grow-0 lg:w-[50%] mb-auto; 74 | } 75 | 76 | .solution-card-title { 77 | @apply md:text-3xl text-center lg:text-left font-bold mb-10; 78 | } 79 | 80 | .solution-card-items { 81 | @apply flex flex-col space-y-6 pl-5 text-xs lg:text-lg font-semibold; 82 | } 83 | 84 | .solution-card-item { 85 | @apply relative pl-10; 86 | } 87 | 88 | .solution-card-button { 89 | @apply shadow-xl rounded-md bg-[#dd9933] text-center py-3 cursor-pointer lg:w-[50%] w-[95%] box-border border-2 border-[#dd9933] hover:bg-white hover:text-[#dd9933] transition-all duration-200 ml-5 mt-10 font-bold text-white; 90 | } 91 | 92 | .contact-form input { 93 | @apply focus:outline-none border w-full rounded-sm border-gray-300 text-xs md:text-base pl-1 md:pl-4 py-2 mt-2 mr-1 md:mr-2; 94 | } 95 | 96 | /* ABOUT */ 97 | .contact-info { 98 | @apply flex text-white; 99 | } 100 | 101 | .contact-info-text { 102 | @apply ml-5; 103 | } 104 | .contact-info-title { 105 | @apply font-bold text-xl md:text-2xl mb-3; 106 | } 107 | .contact-info-description { 108 | @apply flex flex-col space-y-2 font-thin; 109 | } 110 | 111 | .contact-label { 112 | @apply text-xs md:text-base; 113 | } 114 | 115 | .fade-text { 116 | @apply transition-all transform; 117 | } 118 | } 119 | 120 | .swiper-slide { 121 | margin: auto; 122 | } 123 | .swiper-slide img { 124 | width: 200px; 125 | } 126 | 127 | .core-services { 128 | position: relative; 129 | } 130 | 131 | .solution-card-item::before { 132 | position: absolute; 133 | left: 0; 134 | content: ' '; 135 | width: 14px; 136 | top: calc(50% - 7px); 137 | height: 14px; 138 | border-radius: 50%; 139 | background-color: #dd9933; 140 | } 141 | 142 | .bm-menu-wrap { 143 | background-color: #dd9933; 144 | height: 100vh; 145 | position: fixed; 146 | top: 0; 147 | display: flex; 148 | flex-direction: column; 149 | align-items: center; 150 | } 151 | 152 | .bm-cross-button { 153 | color: #2e2f30; 154 | margin-top: 20px; 155 | } 156 | 157 | .bm-item-list { 158 | padding-top: 80px; 159 | font-size: 20px; 160 | font-weight: bold; 161 | } 162 | 163 | .bm-menu-wrap a { 164 | margin-bottom: 20px; 165 | color: #2e2f30; 166 | } 167 | 168 | .bm-menu-wrap .menu-selected { 169 | color: #fff; 170 | } 171 | 172 | .selected::before { 173 | content: ''; 174 | position: absolute; 175 | bottom: -3px; 176 | left: 0; 177 | width: 100%; 178 | height: 2px; 179 | background-color: #dd9933; 180 | } 181 | .yellow-line { 182 | position: relative; 183 | } 184 | .yellow-line:after { 185 | z-index: -1; 186 | content: ''; 187 | display: block; 188 | position: absolute; 189 | width: 60vw; 190 | margin-top: 10px; 191 | bottom: 0; 192 | height: 3px; 193 | background-color: #dd9933; 194 | } 195 | 196 | .roadmap-item { 197 | box-shadow: 0px 0px 10px 3px rgba(151, 148, 148, 0.75); 198 | } 199 | 200 | div { 201 | animation: fadeIn 1s; 202 | -webkit-animation: fadeIn 1s; 203 | -moz-animation: fadeIn 1s; 204 | -o-animation: fadeIn 1s; 205 | -ms-animation: fadeIn 1s; 206 | } 207 | 208 | .slider-changes { 209 | transition: all 1s; 210 | opacity: 0; 211 | } 212 | .slider-changes2 { 213 | transition: all 1s; 214 | opacity: 1; 215 | } 216 | 217 | @keyframes fadeIn { 218 | 0% { 219 | opacity: 0; 220 | } 221 | 100% { 222 | opacity: 1; 223 | } 224 | } 225 | 226 | @-moz-keyframes fadeIn { 227 | 0% { 228 | opacity: 0; 229 | } 230 | 100% { 231 | opacity: 1; 232 | } 233 | } 234 | 235 | @-webkit-keyframes fadeIn { 236 | 0% { 237 | opacity: 0; 238 | } 239 | 100% { 240 | opacity: 1; 241 | } 242 | } 243 | 244 | @-o-keyframes fadeIn { 245 | 0% { 246 | opacity: 0; 247 | } 248 | 100% { 249 | opacity: 1; 250 | } 251 | } 252 | 253 | @-ms-keyframes fadeIn { 254 | 0% { 255 | opacity: 0; 256 | } 257 | 100% { 258 | opacity: 1; 259 | } 260 | } 261 | 262 | .core-service-card { 263 | perspective: 1000px; /* Remove this if you don't want the 3D effect */ 264 | } 265 | 266 | /* This container is needed to position the front and back side */ 267 | .core-service-inner { 268 | position: relative; 269 | transition: transform 0.8s; 270 | transform-style: preserve-3d; 271 | } 272 | 273 | .core-service-card:hover .core-service-inner { 274 | transform: rotateY(360deg); 275 | } 276 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | import './index.css'; 5 | const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement); 6 | root.render( 7 | 8 | 9 | 10 | ); 11 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | mode: 'jit', 4 | content: ['./src/**/*.{js,jsx,ts,tsx}'], 5 | theme: { 6 | extend: {}, 7 | }, 8 | plugins: [], 9 | }; 10 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | --------------------------------------------------------------------------------