├── .env ├── src ├── components │ ├── VehicleCards │ │ ├── VehicleFixedCard │ │ │ └── index.js │ │ └── VehicleAuctionCard │ │ │ ├── AuctionCountdown.js │ │ │ └── index.js │ ├── MKAvatar │ │ ├── index.js │ │ └── MKAvatarRoot.js │ ├── MKBox │ │ ├── index.js │ │ └── MKBoxRoot.js │ ├── MKSocialButton │ │ ├── index.js │ │ └── MKSocialButtonRoot.js │ ├── MKButton │ │ └── index.js │ ├── MKBadge │ │ └── index.js │ └── MKTypography │ │ ├── MKTypographyRoot.js │ │ └── index.js ├── assets │ ├── images │ │ ├── iphones.png │ │ ├── team-2.jpg │ │ ├── team-3.jpg │ │ ├── team-4.jpg │ │ ├── team-5.jpg │ │ ├── apple-icon.png │ │ ├── logo-ct-dark.png │ │ ├── automotive │ │ │ ├── cls.png │ │ │ ├── glc.png │ │ │ ├── amg-gt.png │ │ │ ├── g-amg.png │ │ │ └── s-maybach.png │ │ ├── small-logos │ │ │ └── icon-sun-cloud.png │ │ ├── motors.stylemixthemes.com │ │ │ ├── slider2.jpg │ │ │ ├── 01-6-255x135.jpg │ │ │ ├── slider1-300x300.jpg │ │ │ └── slider2-300x300.jpg │ │ ├── down-arrow-white.svg │ │ ├── down-arrow.svg │ │ ├── down-arrow-dark.svg │ │ └── logos │ │ │ ├── small-logos │ │ │ ├── logo-zoom.svg │ │ │ ├── logo-youtube.svg │ │ │ ├── logo-apple.svg │ │ │ ├── logo-webdev.svg │ │ │ ├── logo-google-cloud.svg │ │ │ ├── logo-asana.svg │ │ │ ├── logo-atlassian.svg │ │ │ ├── logo-twitter.svg │ │ │ ├── logo-spotify.svg │ │ │ ├── logo-jira.svg │ │ │ ├── logo-invision.svg │ │ │ ├── logo-dribbble.svg │ │ │ ├── logo-xd.svg │ │ │ ├── logo-amazon.svg │ │ │ ├── logo-slack.svg │ │ │ ├── logo-shopify.svg │ │ │ └── logo-github.svg │ │ │ ├── gray-logos │ │ │ ├── logo-netflix.svg │ │ │ └── logo-nasa.svg │ │ │ ├── medium-logos │ │ │ ├── logo-netflix.svg │ │ │ └── logo-nasa.svg │ │ │ └── white-logos │ │ │ └── logo-nasa-white.svg │ └── theme │ │ ├── components │ │ ├── buttonBase.js │ │ ├── link.js │ │ ├── swiper.js │ │ ├── list │ │ │ ├── index.js │ │ │ ├── listItemText.js │ │ │ └── listItem.js │ │ ├── appBar.js │ │ ├── stepper │ │ │ ├── step.js │ │ │ ├── stepConnector.js │ │ │ ├── index.js │ │ │ ├── stepLabel.js │ │ │ └── stepIcon.js │ │ ├── iconButton.js │ │ ├── card │ │ │ ├── cardContent.js │ │ │ ├── cardMedia.js │ │ │ └── index.js │ │ ├── avatar.js │ │ ├── breadcrumbs.js │ │ ├── svgIcon.js │ │ ├── table │ │ │ ├── tableHead.js │ │ │ ├── tableContainer.js │ │ │ └── tableCell.js │ │ ├── icon.js │ │ ├── form │ │ │ ├── input.js │ │ │ ├── inputLabel.js │ │ │ └── inputOutlined.js │ │ ├── divider.js │ │ ├── menu │ │ │ ├── index.js │ │ │ └── menuItem.js │ │ ├── button │ │ │ ├── root.js │ │ │ ├── index.js │ │ │ ├── outlined.js │ │ │ ├── contained.js │ │ │ └── text.js │ │ ├── tooltip.js │ │ ├── flatpickr.js │ │ ├── tabs │ │ │ ├── index.js │ │ │ └── tab.js │ │ └── container.js │ │ ├── functions │ │ ├── pxToRem.js │ │ ├── linearGradient.js │ │ ├── hexToRgb.js │ │ ├── rgba.js │ │ ├── boxShadow.js │ │ └── gradientChartLine.js │ │ └── base │ │ ├── breakpoints.js │ │ ├── globals.js │ │ ├── borders.js │ │ └── boxShadows.js ├── layouts │ └── pages │ │ └── landing-pages │ │ └── rental │ │ └── index.js ├── index.js ├── pages │ └── LandingPages │ │ └── Rental │ │ ├── components │ │ ├── AboutUsOption │ │ │ └── index.js │ │ └── FaqCollapse │ │ │ └── index.js │ │ ├── sections │ │ ├── Search.js │ │ └── Testimonials.js │ │ └── index.js ├── App.js ├── examples │ ├── Cards │ │ ├── CounterCards │ │ │ └── DefaultCounterCard │ │ │ │ └── index.js │ │ ├── TeamCards │ │ │ ├── HorizontalTeamCard │ │ │ │ └── index.js │ │ │ └── TransparentTeamCard │ │ │ │ └── index.js │ │ └── ReviewCards │ │ │ └── MiniReviewCard │ │ │ └── index.js │ ├── Breadcrumbs │ │ └── index.js │ ├── Navbars │ │ └── DefaultNavbar │ │ │ └── DefaultNavbarDropdown.js │ └── Footers │ │ ├── SimpleFooter │ │ └── index.js │ │ └── DefaultFooter │ │ └── index.js ├── footer.routes.js └── routes.js ├── public ├── robots.txt ├── favicon.png ├── apple-icon.png ├── manifest.json └── index.html ├── docs ├── screen.JPG ├── screen.gif └── screen.webm ├── jsconfig.json ├── .prettierrc.json ├── README.md ├── .gitignore ├── .eslintrc.json ├── package.json └── .gitattributes /.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true -------------------------------------------------------------------------------- /src/components/VehicleCards/VehicleFixedCard/index.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /docs/screen.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prettyblueberry/car-auction-react/HEAD/docs/screen.JPG -------------------------------------------------------------------------------- /docs/screen.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prettyblueberry/car-auction-react/HEAD/docs/screen.gif -------------------------------------------------------------------------------- /docs/screen.webm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prettyblueberry/car-auction-react/HEAD/docs/screen.webm -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prettyblueberry/car-auction-react/HEAD/public/favicon.png -------------------------------------------------------------------------------- /public/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prettyblueberry/car-auction-react/HEAD/public/apple-icon.png -------------------------------------------------------------------------------- /src/assets/images/iphones.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prettyblueberry/car-auction-react/HEAD/src/assets/images/iphones.png -------------------------------------------------------------------------------- /src/assets/images/team-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prettyblueberry/car-auction-react/HEAD/src/assets/images/team-2.jpg -------------------------------------------------------------------------------- /src/assets/images/team-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prettyblueberry/car-auction-react/HEAD/src/assets/images/team-3.jpg -------------------------------------------------------------------------------- /src/assets/images/team-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prettyblueberry/car-auction-react/HEAD/src/assets/images/team-4.jpg -------------------------------------------------------------------------------- /src/assets/images/team-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prettyblueberry/car-auction-react/HEAD/src/assets/images/team-5.jpg -------------------------------------------------------------------------------- /src/assets/images/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prettyblueberry/car-auction-react/HEAD/src/assets/images/apple-icon.png -------------------------------------------------------------------------------- /src/assets/images/logo-ct-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prettyblueberry/car-auction-react/HEAD/src/assets/images/logo-ct-dark.png -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "src", 4 | "paths": { 5 | "*": ["src/*"] 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/assets/images/automotive/cls.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prettyblueberry/car-auction-react/HEAD/src/assets/images/automotive/cls.png -------------------------------------------------------------------------------- /src/assets/images/automotive/glc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prettyblueberry/car-auction-react/HEAD/src/assets/images/automotive/glc.png -------------------------------------------------------------------------------- /src/assets/images/automotive/amg-gt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prettyblueberry/car-auction-react/HEAD/src/assets/images/automotive/amg-gt.png -------------------------------------------------------------------------------- /src/assets/images/automotive/g-amg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prettyblueberry/car-auction-react/HEAD/src/assets/images/automotive/g-amg.png -------------------------------------------------------------------------------- /src/assets/images/automotive/s-maybach.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prettyblueberry/car-auction-react/HEAD/src/assets/images/automotive/s-maybach.png -------------------------------------------------------------------------------- /src/assets/images/small-logos/icon-sun-cloud.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prettyblueberry/car-auction-react/HEAD/src/assets/images/small-logos/icon-sun-cloud.png -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 100, 3 | "trailingComma": "es5", 4 | "tabWidth": 2, 5 | "semi": true, 6 | "singleQuote": false, 7 | "endOfLine": "auto" 8 | } 9 | -------------------------------------------------------------------------------- /src/assets/images/motors.stylemixthemes.com/slider2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prettyblueberry/car-auction-react/HEAD/src/assets/images/motors.stylemixthemes.com/slider2.jpg -------------------------------------------------------------------------------- /src/assets/images/motors.stylemixthemes.com/01-6-255x135.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prettyblueberry/car-auction-react/HEAD/src/assets/images/motors.stylemixthemes.com/01-6-255x135.jpg -------------------------------------------------------------------------------- /src/assets/images/motors.stylemixthemes.com/slider1-300x300.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prettyblueberry/car-auction-react/HEAD/src/assets/images/motors.stylemixthemes.com/slider1-300x300.jpg -------------------------------------------------------------------------------- /src/assets/images/motors.stylemixthemes.com/slider2-300x300.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prettyblueberry/car-auction-react/HEAD/src/assets/images/motors.stylemixthemes.com/slider2-300x300.jpg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Car Auction React 2 | 3 | ![screen.gif](./docs/screen.gif) 4 | Car Auction React is a simple landing page of car auction site. 5 | It is developed using React, Material Kit 2 Pro React. 6 | The landing page aims to show status of live auction using car-auction-card component. 7 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "Material Kit", 3 | "name": "Material Kit 2 PRO React", 4 | "icons": [ 5 | { 6 | "src": "favicon.png", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#1A73E8", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | .DS_Store 6 | 7 | # testing 8 | /coverage 9 | 10 | # production 11 | /build 12 | 13 | # misc 14 | .DS_Store 15 | .env.local 16 | .env.development.local 17 | .env.test.local 18 | .env.production.local 19 | 20 | npm-debug.log* 21 | yarn-debug.log* 22 | yarn-error.log* 23 | 24 | yarn.lock 25 | 26 | commit.sh 27 | /.idea 28 | -------------------------------------------------------------------------------- /src/assets/images/down-arrow-white.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/theme/components/buttonBase.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | export default { 17 | defaultProps: { 18 | disableRipple: false, 19 | }, 20 | }; 21 | -------------------------------------------------------------------------------- /src/assets/theme/components/link.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | export default { 17 | defaultProps: { 18 | underline: "none", 19 | color: "inherit", 20 | }, 21 | }; 22 | -------------------------------------------------------------------------------- /src/assets/theme/components/swiper.js: -------------------------------------------------------------------------------- 1 | // Material Kit 2 PRO React base styles 2 | import colors from "assets/theme/base/colors"; 3 | 4 | // Material Kit 2 PRO React helper functions 5 | import pxToRem from "assets/theme/functions/pxToRem"; 6 | 7 | const { white } = colors; 8 | 9 | export default { 10 | ".swiper-button-prev, .swiper-button-next": { 11 | position: "absolute", 12 | top: "50%", 13 | padding: `0 ${pxToRem(64)}`, 14 | color: white.main, 15 | opacity: 0.5, 16 | transform: "translateY(-250%)", 17 | transition: "opacity 0.15s ease", 18 | 19 | "&::after": { 20 | fontSize: pxToRem(28), 21 | }, 22 | 23 | "&:hover, &:focus": { 24 | opacity: 1, 25 | }, 26 | }, 27 | }; 28 | -------------------------------------------------------------------------------- /src/assets/theme/components/list/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | export default { 17 | styleOverrides: { 18 | padding: { 19 | paddingTop: 0, 20 | paddingBottom: 0, 21 | }, 22 | }, 23 | }; 24 | -------------------------------------------------------------------------------- /src/assets/theme/components/list/listItemText.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | export default { 17 | styleOverrides: { 18 | root: { 19 | marginTop: 0, 20 | marginBottom: 0, 21 | }, 22 | }, 23 | }; 24 | -------------------------------------------------------------------------------- /src/layouts/pages/landing-pages/rental/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 PRO React pages 17 | import Rental from "pages/LandingPages/Rental"; 18 | 19 | export default function RentalPage() { 20 | return ; 21 | } 22 | -------------------------------------------------------------------------------- /src/assets/theme/components/appBar.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | export default { 17 | defaultProps: { 18 | color: "transparent", 19 | }, 20 | 21 | styleOverrides: { 22 | root: { 23 | boxShadow: "none", 24 | }, 25 | }, 26 | }; 27 | -------------------------------------------------------------------------------- /src/assets/theme/components/list/listItem.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | export default { 17 | defaultProps: { 18 | disableGutters: true, 19 | }, 20 | 21 | styleOverrides: { 22 | root: { 23 | paddingTop: 0, 24 | paddingBottom: 0, 25 | }, 26 | }, 27 | }; 28 | -------------------------------------------------------------------------------- /src/assets/theme/functions/pxToRem.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | /** 17 | The pxToRem() function helps you to convert a px unit into a rem unit, 18 | */ 19 | 20 | function pxToRem(number, baseNumber = 16) { 21 | return `${number / baseNumber}rem`; 22 | } 23 | 24 | export default pxToRem; 25 | -------------------------------------------------------------------------------- /src/assets/theme/components/stepper/step.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 PRO React helper functions 17 | import pxToRem from "assets/theme/functions/pxToRem"; 18 | 19 | export default { 20 | styleOverrides: { 21 | root: { 22 | padding: `0 ${pxToRem(6)}`, 23 | }, 24 | }, 25 | }; 26 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | import React from "react"; 17 | import ReactDOM from "react-dom"; 18 | import {BrowserRouter} from "react-router-dom"; 19 | import App from "App"; 20 | 21 | ReactDOM.render( 22 | 23 | 24 | , 25 | document.getElementById("root") 26 | ); 27 | -------------------------------------------------------------------------------- /src/assets/theme/functions/linearGradient.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | /** 17 | The linearGradient() function helps you to create a linear gradient color background 18 | */ 19 | 20 | function linearGradient(color, colorState, angle = 195) { 21 | return `linear-gradient(${angle}deg, ${color}, ${colorState})`; 22 | } 23 | 24 | export default linearGradient; 25 | -------------------------------------------------------------------------------- /src/assets/theme/components/iconButton.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 PRO React Base Styles 17 | import colors from "assets/theme/base/colors"; 18 | 19 | const { transparent } = colors; 20 | 21 | export default { 22 | styleOverrides: { 23 | root: { 24 | "&:hover": { 25 | backgroundColor: transparent.main, 26 | }, 27 | }, 28 | }, 29 | }; 30 | -------------------------------------------------------------------------------- /src/assets/theme/components/card/cardContent.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 PRO React Helper Functions 17 | import pxToRem from "assets/theme/functions/pxToRem"; 18 | 19 | export default { 20 | styleOverrides: { 21 | root: { 22 | marginTop: 0, 23 | marginBottom: 0, 24 | padding: `${pxToRem(8)} ${pxToRem(24)} ${pxToRem(24)}`, 25 | }, 26 | }, 27 | }; 28 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es2021": true 5 | }, 6 | "extends": ["plugin:react/recommended", "airbnb", "prettier"], 7 | "parserOptions": { 8 | "ecmaFeatures": { 9 | "jsx": true 10 | }, 11 | "ecmaVersion": 12, 12 | "sourceType": "module" 13 | }, 14 | "plugins": ["react", "prettier"], 15 | "rules": { 16 | "prettier/prettier": 0, 17 | "react/forbid-prop-types": 0, 18 | "no-unused-vars": "off", 19 | "react/react-in-jsx-scope": "off", 20 | "react/default-props-match-prop-types": 0, 21 | "react/require-default-props": 0, 22 | "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], 23 | "react/jsx-props-no-spreading": [ 24 | 1, 25 | { 26 | "custom": "ignore" 27 | } 28 | ]//, 29 | // "react/jsx-curly-spacing": [2, "never"] 30 | }, 31 | "settings": { "import/resolver": { "node": { "paths": ["src"] } } } 32 | } 33 | -------------------------------------------------------------------------------- /src/assets/theme/functions/hexToRgb.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | /** 17 | The hexToRgb() function helps you to change the hex color code to rgb 18 | using chroma-js library. 19 | */ 20 | 21 | // chroma-js is a library for all kinds of color conversions and color scales. 22 | import chroma from "chroma-js"; 23 | 24 | function hexToRgb(color) { 25 | return chroma(color).rgb().join(", "); 26 | } 27 | 28 | export default hexToRgb; 29 | -------------------------------------------------------------------------------- /src/assets/theme/base/breakpoints.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | /** 17 | * The base breakpoints for the Material Kit 2 PRO React. 18 | * You can add new breakpoints using this file. 19 | * You can customized the breakpoints for the entire Material Kit 2 PRO React using thie file. 20 | */ 21 | 22 | export default { 23 | values: { 24 | xs: 0, 25 | sm: 576, 26 | md: 768, 27 | lg: 992, 28 | xl: 1200, 29 | xxl: 1400, 30 | }, 31 | }; 32 | -------------------------------------------------------------------------------- /src/assets/theme/components/avatar.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 PRO React base styles 17 | import borders from "assets/theme/base/borders"; 18 | 19 | const { borderRadius } = borders; 20 | 21 | export default { 22 | styleOverrides: { 23 | root: { 24 | transition: "all 200ms ease-in-out", 25 | }, 26 | 27 | rounded: { 28 | borderRadius: borderRadius.lg, 29 | }, 30 | 31 | img: { 32 | height: "auto", 33 | }, 34 | }, 35 | }; 36 | -------------------------------------------------------------------------------- /src/assets/theme/functions/rgba.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | /** 17 | The rgba() function helps you to create a rgba color code, it uses the hexToRgb() function 18 | to convert the hex code into rgb for using it inside the rgba color format. 19 | */ 20 | 21 | // Material Kit 2 PRO React helper functions 22 | import hexToRgb from "assets/theme/functions/hexToRgb"; 23 | 24 | function rgba(color, opacity) { 25 | return `rgba(${hexToRgb(color)}, ${opacity})`; 26 | } 27 | 28 | export default rgba; 29 | -------------------------------------------------------------------------------- /src/assets/theme/components/breadcrumbs.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 PRO React base styles 17 | import colors from "assets/theme/base/colors"; 18 | import typography from "assets/theme/base/typography"; 19 | 20 | const { grey } = colors; 21 | const { size } = typography; 22 | 23 | export default { 24 | styleOverrides: { 25 | li: { 26 | lineHeight: 0, 27 | }, 28 | 29 | separator: { 30 | fontSize: size.sm, 31 | color: grey[600], 32 | }, 33 | }, 34 | }; 35 | -------------------------------------------------------------------------------- /src/assets/images/down-arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | down-arrow 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/assets/images/down-arrow-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | down-arrow 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/assets/theme/components/card/cardMedia.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 PRO React Base Styles 17 | import borders from "assets/theme/base/borders"; 18 | 19 | // Material Kit 2 PRO React Helper Functions 20 | import pxToRem from "assets/theme/functions/pxToRem"; 21 | 22 | const { borderRadius } = borders; 23 | 24 | export default { 25 | styleOverrides: { 26 | root: { 27 | borderRadius: borderRadius.xl, 28 | margin: `${pxToRem(16)} ${pxToRem(16)} 0`, 29 | }, 30 | 31 | media: { 32 | width: "auto", 33 | }, 34 | }, 35 | }; 36 | -------------------------------------------------------------------------------- /src/assets/theme/components/svgIcon.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 PRO React helper functions 17 | import pxToRem from "assets/theme/functions/pxToRem"; 18 | 19 | export default { 20 | defaultProps: { 21 | fontSize: "inherit", 22 | }, 23 | 24 | styleOverrides: { 25 | fontSizeInherit: { 26 | fontSize: "inherit !important", 27 | }, 28 | 29 | fontSizeSmall: { 30 | fontSize: `${pxToRem(20)} !important`, 31 | }, 32 | 33 | fontSizeLarge: { 34 | fontSize: `${pxToRem(36)} !important`, 35 | }, 36 | }, 37 | }; 38 | -------------------------------------------------------------------------------- /src/assets/theme/components/table/tableHead.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 PRO React base styles 17 | import borders from "assets/theme/base/borders"; 18 | 19 | // Material Kit 2 PRO React helper functions 20 | import pxToRem from "assets/theme/functions/pxToRem"; 21 | 22 | const { borderRadius } = borders; 23 | 24 | export default { 25 | styleOverrides: { 26 | root: { 27 | display: "block", 28 | padding: `${pxToRem(16)} ${pxToRem(16)} 0 ${pxToRem(16)}`, 29 | borderRadius: `${borderRadius.xl} ${borderRadius.xl} 0 0`, 30 | }, 31 | }, 32 | }; 33 | -------------------------------------------------------------------------------- /src/assets/theme/components/table/tableContainer.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 PRO React base styles 17 | import colors from "assets/theme/base/colors"; 18 | import boxShadows from "assets/theme/base/boxShadows"; 19 | import borders from "assets/theme/base/borders"; 20 | 21 | const { white } = colors; 22 | const { md } = boxShadows; 23 | const { borderRadius } = borders; 24 | 25 | export default { 26 | styleOverrides: { 27 | root: { 28 | backgroundColor: white.main, 29 | boxShadow: md, 30 | borderRadius: borderRadius.xl, 31 | }, 32 | }, 33 | }; 34 | -------------------------------------------------------------------------------- /src/assets/theme/components/icon.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 PRO React helper functions 17 | import pxToRem from "assets/theme/functions/pxToRem"; 18 | 19 | export default { 20 | defaultProps: { 21 | baseClassName: "material-icons-round", 22 | fontSize: "inherit", 23 | }, 24 | 25 | styleOverrides: { 26 | fontSizeInherit: { 27 | fontSize: "inherit !important", 28 | }, 29 | 30 | fontSizeSmall: { 31 | fontSize: `${pxToRem(20)} !important`, 32 | }, 33 | 34 | fontSizeLarge: { 35 | fontSize: `${pxToRem(36)} !important`, 36 | }, 37 | }, 38 | }; 39 | -------------------------------------------------------------------------------- /src/assets/theme/components/table/tableCell.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 PRO React base styles 17 | import borders from "assets/theme/base/borders"; 18 | import colors from "assets/theme/base/colors"; 19 | 20 | // Material Kit 2 PRO React helper functions 21 | import pxToRem from "assets/theme/functions/pxToRem"; 22 | 23 | const { borderWidth } = borders; 24 | const { light } = colors; 25 | 26 | export default { 27 | styleOverrides: { 28 | root: { 29 | padding: `${pxToRem(12)} ${pxToRem(16)}`, 30 | borderBottom: `${borderWidth[1]} solid ${light.main}`, 31 | }, 32 | }, 33 | }; 34 | -------------------------------------------------------------------------------- /src/assets/theme/functions/boxShadow.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | /** 17 | The boxShadow() function helps you to create a box shadow for an element 18 | */ 19 | 20 | // Material Kit 2 PRO React helper functions 21 | import rgba from "assets/theme/functions/rgba"; 22 | import pxToRem from "assets/theme/functions/pxToRem"; 23 | 24 | function boxShadow(offset = [], radius = [], color, opacity, inset = "") { 25 | const [x, y] = offset; 26 | const [blur, spread] = radius; 27 | 28 | return `${inset} ${pxToRem(x)} ${pxToRem(y)} ${pxToRem(blur)} ${pxToRem(spread)} ${rgba( 29 | color, 30 | opacity 31 | )}`; 32 | } 33 | 34 | export default boxShadow; 35 | -------------------------------------------------------------------------------- /src/assets/images/logos/small-logos/logo-zoom.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | logo-zoom 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/assets/theme/base/globals.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 PRO React Base Styles 17 | import colors from "assets/theme/base/colors"; 18 | 19 | const { info, dark } = colors; 20 | 21 | export default { 22 | html: { 23 | scrollBehavior: "smooth", 24 | }, 25 | "*, *::before, *::after": { 26 | margin: 0, 27 | padding: 0, 28 | }, 29 | "a, a:link, a:visited": { 30 | textDecoration: "none !important", 31 | }, 32 | "a.link, .link, a.link:link, .link:link, a.link:visited, .link:visited": { 33 | color: `${dark.main} !important`, 34 | transition: "color 150ms ease-in !important", 35 | }, 36 | "a.link:hover, .link:hover, a.link:focus, .link:focus": { 37 | color: `${info.main} !important`, 38 | }, 39 | }; 40 | -------------------------------------------------------------------------------- /src/assets/theme/functions/gradientChartLine.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | /** 17 | The gradientChartLine() function helps you to create a gradient color for the chart line 18 | */ 19 | 20 | // Material Kit 2 PRO React helper functions 21 | import rgba from "assets/theme/functions/rgba"; 22 | 23 | function gradientChartLine(chart, color, opacity = 0.2) { 24 | const ctx = chart.getContext("2d"); 25 | const gradientStroke = ctx.createLinearGradient(0, 230, 0, 50); 26 | const primaryColor = rgba(color, opacity).toString(); 27 | 28 | gradientStroke.addColorStop(1, primaryColor); 29 | gradientStroke.addColorStop(0.2, "rgba(72, 72, 176, 0.0)"); 30 | gradientStroke.addColorStop(0, "rgba(203, 12, 159, 0)"); 31 | 32 | return gradientStroke; 33 | } 34 | 35 | export default gradientChartLine; 36 | -------------------------------------------------------------------------------- /src/assets/theme/components/form/input.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 PRO React Base Styles 17 | import colors from "assets/theme/base/colors"; 18 | import typography from "assets/theme/base/typography"; 19 | import borders from "assets/theme/base/borders"; 20 | 21 | const { info, inputBorderColor, dark } = colors; 22 | const { size } = typography; 23 | const { borderWidth } = borders; 24 | 25 | export default { 26 | styleOverrides: { 27 | root: { 28 | fontSize: size.sm, 29 | color: dark.main, 30 | 31 | "&:hover:not(.Mui-disabled):before": { 32 | borderBottom: `${borderWidth[1]} solid ${inputBorderColor}`, 33 | }, 34 | 35 | "&:before": { 36 | borderColor: inputBorderColor, 37 | }, 38 | 39 | "&:after": { 40 | borderColor: info.main, 41 | }, 42 | }, 43 | }, 44 | }; 45 | -------------------------------------------------------------------------------- /src/assets/theme/components/stepper/stepConnector.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 PRO React base styles 17 | import borders from "assets/theme/base/borders"; 18 | import colors from "assets/theme/base/colors"; 19 | 20 | const { white } = colors; 21 | const { borderWidth } = borders; 22 | 23 | export default { 24 | styleOverrides: { 25 | root: { 26 | color: "#9fc9ff", 27 | transition: "all 200ms linear", 28 | 29 | "&.Mui-active": { 30 | color: white.main, 31 | }, 32 | 33 | "&.Mui-completed": { 34 | color: white.main, 35 | }, 36 | }, 37 | 38 | alternativeLabel: { 39 | top: "14%", 40 | left: "-50%", 41 | right: "50%", 42 | }, 43 | 44 | line: { 45 | borderWidth: `${borderWidth[2]} !important`, 46 | borderColor: "currentColor", 47 | opacity: 0.5, 48 | }, 49 | }, 50 | }; 51 | -------------------------------------------------------------------------------- /src/components/VehicleCards/VehicleAuctionCard/AuctionCountdown.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Countdown from "react-countdown"; 3 | import PropTypes from "prop-types"; 4 | import MKBadge from "components/MKBadge"; 5 | import WatchLaterIcon from "@mui/icons-material/WatchLater"; 6 | 7 | // Random component 8 | const Completionist = () => ( 9 | 12 | 13 |  Closed 14 | 15 | } 16 | color="success" 17 | container 18 | /> 19 | ); 20 | 21 | // Renderer callback with condition 22 | const renderer = ({ hours, minutes, seconds, completed }) => { 23 | if (completed) { 24 | // Render a complete state 25 | return ; 26 | } 27 | const time = ( 28 | <> 29 | 30 |  {String(hours).padStart(2, "0")}:{String(minutes).padStart(2, "0")}: 31 | {String(seconds).padStart(2, "0")} 32 | 33 | ); 34 | let color; 35 | if (minutes * 1 === 0 && hours * 1 === 0) color = "error"; 36 | else color = `warning`; 37 | 38 | // Render a countdown 39 | return ; 40 | }; 41 | 42 | function AuctionCountdown({ timeEnd }) { 43 | return ; 44 | } 45 | 46 | AuctionCountdown.propTypes = { 47 | timeEnd: PropTypes.number.isRequired, 48 | }; 49 | 50 | export default AuctionCountdown; 51 | -------------------------------------------------------------------------------- /src/assets/images/logos/small-logos/logo-youtube.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | logo-youtube 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/assets/theme/components/stepper/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 PRO React base styles 17 | import colors from "assets/theme/base/colors"; 18 | import borders from "assets/theme/base/borders"; 19 | import boxShadows from "assets/theme/base/boxShadows"; 20 | 21 | // Material Kit 2 PRO React helper functions 22 | import pxToRem from "assets/theme/functions/pxToRem"; 23 | import linearGradient from "assets/theme/functions/linearGradient"; 24 | 25 | const { transparent, gradients } = colors; 26 | const { borderRadius } = borders; 27 | const { colored } = boxShadows; 28 | 29 | export default { 30 | styleOverrides: { 31 | root: { 32 | background: linearGradient(gradients.info.main, gradients.info.state), 33 | padding: `${pxToRem(24)} 0 ${pxToRem(16)}`, 34 | borderRadius: borderRadius.lg, 35 | boxShadow: colored.info, 36 | 37 | "&.MuiPaper-root": { 38 | backgroundColor: transparent.main, 39 | }, 40 | }, 41 | }, 42 | }; 43 | -------------------------------------------------------------------------------- /src/assets/theme/components/card/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 PRO React Base Styles 17 | import colors from "assets/theme/base/colors"; 18 | import borders from "assets/theme/base/borders"; 19 | import boxShadows from "assets/theme/base/boxShadows"; 20 | 21 | // Material Kit 2 PRO React Helper Function 22 | import rgba from "assets/theme/functions/rgba"; 23 | 24 | const { black, white } = colors; 25 | const { borderWidth, borderRadius } = borders; 26 | const { md } = boxShadows; 27 | 28 | export default { 29 | styleOverrides: { 30 | root: { 31 | display: "flex", 32 | flexDirection: "column", 33 | position: "relative", 34 | minWidth: 0, 35 | wordWrap: "break-word", 36 | backgroundColor: white.main, 37 | backgroundClip: "border-box", 38 | border: `${borderWidth[0]} solid ${rgba(black.main, 0.125)}`, 39 | borderRadius: borderRadius.xl, 40 | boxShadow: md, 41 | overflow: "visible", 42 | }, 43 | }, 44 | }; 45 | -------------------------------------------------------------------------------- /src/assets/images/logos/small-logos/logo-apple.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Artboard 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/assets/theme/base/borders.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | /** 17 | * The base border styles for the Material Kit 2 PRO React. 18 | * You can add new border width, border color or border radius using this file. 19 | * You can customized the borders value for the entire Material Kit 2 PRO React using thie file. 20 | */ 21 | 22 | // Material Kit 2 PRO React Base Styles 23 | import colors from "assets/theme/base/colors"; 24 | 25 | // Material Kit 2 PRO React Helper Functions 26 | import pxToRem from "assets/theme/functions/pxToRem"; 27 | 28 | const { grey } = colors; 29 | 30 | export default { 31 | borderColor: grey[300], 32 | 33 | borderWidth: { 34 | 0: 0, 35 | 1: pxToRem(1), 36 | 2: pxToRem(2), 37 | 3: pxToRem(3), 38 | 4: pxToRem(4), 39 | 5: pxToRem(5), 40 | }, 41 | 42 | borderRadius: { 43 | xs: pxToRem(1.6), 44 | sm: pxToRem(2), 45 | md: pxToRem(6), 46 | lg: pxToRem(8), 47 | xl: pxToRem(12), 48 | xxl: pxToRem(16), 49 | section: pxToRem(160), 50 | }, 51 | }; 52 | -------------------------------------------------------------------------------- /src/assets/theme/components/divider.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 PRO React base styles 17 | import colors from "assets/theme/base/colors"; 18 | 19 | // Material Kit 2 PRO React helper functions 20 | import rgba from "assets/theme/functions/rgba"; 21 | import pxToRem from "assets/theme/functions/pxToRem"; 22 | 23 | const { dark, white } = colors; 24 | 25 | export default { 26 | styleOverrides: { 27 | root: { 28 | background: rgba(dark.main, 0.2), 29 | height: pxToRem(1), 30 | margin: `${pxToRem(16)} 0`, 31 | borderBottom: "none", 32 | opacity: 0.25, 33 | }, 34 | 35 | vertical: { 36 | background: rgba(dark.main, 0.2), 37 | width: pxToRem(1), 38 | height: "100%", 39 | margin: `0 ${pxToRem(16)}`, 40 | borderRight: "none", 41 | }, 42 | 43 | light: { 44 | background: rgba(white.main, 0.2), 45 | 46 | "&.MuiDivider-vertical": { 47 | background: rgba(white.main, 0.2), 48 | }, 49 | }, 50 | }, 51 | }; 52 | -------------------------------------------------------------------------------- /src/assets/images/logos/small-logos/logo-webdev.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Logos 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/assets/theme/components/menu/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 PRO React base styles 17 | import boxShadows from "assets/theme/base/boxShadows"; 18 | import typography from "assets/theme/base/typography"; 19 | import colors from "assets/theme/base/colors"; 20 | import borders from "assets/theme/base/borders"; 21 | 22 | // Material Kit 2 PRO React helper functions 23 | import pxToRem from "assets/theme/functions/pxToRem"; 24 | 25 | const { lg } = boxShadows; 26 | const { size } = typography; 27 | const { text, white } = colors; 28 | const { borderRadius } = borders; 29 | 30 | export default { 31 | defaultProps: { 32 | disableAutoFocusItem: true, 33 | }, 34 | 35 | styleOverrides: { 36 | paper: { 37 | minWidth: pxToRem(160), 38 | boxShadow: lg, 39 | padding: `${pxToRem(16)} ${pxToRem(8)}`, 40 | fontSize: size.sm, 41 | color: text.main, 42 | textAlign: "left", 43 | backgroundColor: `${white.main} !important`, 44 | borderRadius: borderRadius.md, 45 | }, 46 | }, 47 | }; 48 | -------------------------------------------------------------------------------- /src/assets/theme/components/menu/menuItem.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 PRO React base styles 17 | import colors from "assets/theme/base/colors"; 18 | import borders from "assets/theme/base/borders"; 19 | import typography from "assets/theme/base/typography"; 20 | 21 | // Material Kit 2 PRO React helper functions 22 | import pxToRem from "assets/theme/functions/pxToRem"; 23 | 24 | const { light, text, dark } = colors; 25 | const { borderRadius } = borders; 26 | const { size } = typography; 27 | 28 | export default { 29 | styleOverrides: { 30 | root: { 31 | minWidth: pxToRem(160), 32 | minHeight: "unset", 33 | padding: `${pxToRem(4.8)} ${pxToRem(16)}`, 34 | borderRadius: borderRadius.md, 35 | fontSize: size.sm, 36 | color: text.main, 37 | transition: "background-color 300ms ease, color 300ms ease", 38 | 39 | "&:hover, &:focus, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus": { 40 | backgroundColor: light.main, 41 | color: dark.main, 42 | }, 43 | }, 44 | }, 45 | }; 46 | -------------------------------------------------------------------------------- /src/assets/theme/components/stepper/stepLabel.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 PRO React base styles 17 | import typography from "assets/theme/base/typography"; 18 | import colors from "assets/theme/base/colors"; 19 | 20 | // Material Kit 2 PRO React helper functions 21 | import pxToRem from "assets/theme/functions/pxToRem"; 22 | import rgba from "assets/theme/functions/rgba"; 23 | 24 | const { size, fontWeightRegular } = typography; 25 | const { white } = colors; 26 | 27 | export default { 28 | styleOverrides: { 29 | label: { 30 | marginTop: `${pxToRem(8)} !important`, 31 | fontWeight: fontWeightRegular, 32 | fontSize: size.xs, 33 | color: "#9fc9ff", 34 | textTransform: "uppercase", 35 | 36 | "&.Mui-active": { 37 | fontWeight: `${fontWeightRegular} !important`, 38 | color: `${rgba(white.main, 0.8)} !important`, 39 | }, 40 | 41 | "&.Mui-completed": { 42 | fontWeight: `${fontWeightRegular} !important`, 43 | color: `${rgba(white.main, 0.8)} !important`, 44 | }, 45 | }, 46 | }, 47 | }; 48 | -------------------------------------------------------------------------------- /src/components/MKAvatar/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | import {forwardRef} from "react"; 17 | 18 | // prop-types is a library for typechecking of props 19 | import PropTypes from "prop-types"; 20 | 21 | // Custom styles for MKAvatar 22 | import MKAvatarRoot from "components/MKAvatar/MKAvatarRoot"; 23 | 24 | const MKAvatar = forwardRef(({ bgColor, size, shadow, ...rest }, ref) => ( 25 | 26 | )); 27 | 28 | // Setting default values for the props of MKAvatar 29 | MKAvatar.defaultProps = { 30 | bgColor: "transparent", 31 | size: "md", 32 | shadow: "none", 33 | }; 34 | 35 | // Typechecking props for the MKAvatar 36 | MKAvatar.propTypes = { 37 | bgColor: PropTypes.oneOf([ 38 | "transparent", 39 | "primary", 40 | "secondary", 41 | "info", 42 | "success", 43 | "warning", 44 | "error", 45 | "light", 46 | "dark", 47 | ]), 48 | size: PropTypes.oneOf(["xs", "sm", "md", "lg", "xl", "xxl"]), 49 | shadow: PropTypes.oneOf(["none", "xs", "sm", "md", "lg", "xl", "xxl", "inset"]), 50 | }; 51 | 52 | export default MKAvatar; 53 | -------------------------------------------------------------------------------- /src/assets/theme/components/button/root.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 PRO React Base Styles 17 | import typography from "assets/theme/base/typography"; 18 | import borders from "assets/theme/base/borders"; 19 | 20 | // Material Kit 2 PRO React Helper Functions 21 | import pxToRem from "assets/theme/functions/pxToRem"; 22 | 23 | const { fontWeightBold, size } = typography; 24 | const { borderRadius } = borders; 25 | 26 | export default { 27 | display: "inline-flex", 28 | justifyContent: "center", 29 | alignItems: "center", 30 | fontSize: size.xs, 31 | fontWeight: fontWeightBold, 32 | borderRadius: borderRadius.lg, 33 | padding: `${pxToRem(6.302)} ${pxToRem(16.604)}`, 34 | lineHeight: 1.4, 35 | textAlign: "center", 36 | textTransform: "uppercase", 37 | userSelect: "none", 38 | backgroundSize: "150% !important", 39 | backgroundPositionX: "25% !important", 40 | transition: "all 150ms ease-in", 41 | 42 | "&:disabled": { 43 | pointerEvent: "none", 44 | opacity: 0.65, 45 | }, 46 | 47 | "& .material-icons": { 48 | fontSize: pxToRem(15), 49 | marginTop: pxToRem(-2), 50 | }, 51 | }; 52 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | iAuto 26 | 30 | 34 | 35 | 36 | 37 | 38 |
39 | 40 | 41 | -------------------------------------------------------------------------------- /src/assets/theme/components/form/inputLabel.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 PRO React Base Styles 17 | import colors from "assets/theme/base/colors"; 18 | import typography from "assets/theme/base/typography"; 19 | 20 | const { text, info } = colors; 21 | const { size } = typography; 22 | 23 | export default { 24 | styleOverrides: { 25 | root: { 26 | fontSize: size.sm, 27 | color: text.main, 28 | lineHeight: 0.9, 29 | 30 | "&.Mui-focused": { 31 | color: info.main, 32 | }, 33 | 34 | "&.MuiInputLabel-shrink": { 35 | lineHeight: 1.5, 36 | fontSize: size.md, 37 | 38 | "~ .MuiInputBase-root .MuiOutlinedInput-notchedOutline legend": { 39 | fontSize: "0.85em", 40 | }, 41 | }, 42 | }, 43 | 44 | sizeSmall: { 45 | fontSize: size.xs, 46 | lineHeight: 1.625, 47 | 48 | "&.MuiInputLabel-shrink": { 49 | lineHeight: 1.6, 50 | fontSize: size.sm, 51 | 52 | "~ .MuiInputBase-root .MuiOutlinedInput-notchedOutline legend": { 53 | fontSize: "0.72em", 54 | }, 55 | }, 56 | }, 57 | }, 58 | }; 59 | -------------------------------------------------------------------------------- /src/assets/theme/components/tooltip.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // @mui material components 17 | import Fade from "@mui/material/Fade"; 18 | 19 | // Material Kit 2 PRO React base styles 20 | import colors from "assets/theme/base/colors"; 21 | import typography from "assets/theme/base/typography"; 22 | import borders from "assets/theme/base/borders"; 23 | 24 | // Material Kit 2 PRO React helper functions 25 | import pxToRem from "assets/theme/functions/pxToRem"; 26 | 27 | const { black, light } = colors; 28 | const { size, fontWeightRegular } = typography; 29 | const { borderRadius } = borders; 30 | 31 | export default { 32 | defaultProps: { 33 | arrow: true, 34 | TransitionComponent: Fade, 35 | }, 36 | 37 | styleOverrides: { 38 | tooltip: { 39 | maxWidth: pxToRem(200), 40 | backgroundColor: black.main, 41 | color: light.main, 42 | fontSize: size.sm, 43 | fontWeight: fontWeightRegular, 44 | textAlign: "center", 45 | borderRadius: borderRadius.md, 46 | opacity: 0.7, 47 | padding: `${pxToRem(5)} ${pxToRem(8)} ${pxToRem(4)}`, 48 | }, 49 | 50 | arrow: { 51 | color: black.main, 52 | }, 53 | }, 54 | }; 55 | -------------------------------------------------------------------------------- /src/assets/images/logos/small-logos/logo-google-cloud.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/theme/components/button/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 PRO React Button Styles 17 | import root from "assets/theme/components/button/root"; 18 | import contained from "assets/theme/components/button/contained"; 19 | import outlined from "assets/theme/components/button/outlined"; 20 | import text from "assets/theme/components/button/text"; 21 | 22 | export default { 23 | defaultProps: { 24 | disableRipple: false, 25 | }, 26 | styleOverrides: { 27 | root: { ...root }, 28 | contained: { ...contained.base }, 29 | containedSizeSmall: { ...contained.small }, 30 | containedSizeLarge: { ...contained.large }, 31 | containedPrimary: { ...contained.primary }, 32 | containedSecondary: { ...contained.secondary }, 33 | outlined: { ...outlined.base }, 34 | outlinedSizeSmall: { ...outlined.small }, 35 | outlinedSizeLarge: { ...outlined.large }, 36 | outlinedPrimary: { ...outlined.primary }, 37 | outlinedSecondary: { ...outlined.secondary }, 38 | text: { ...text.base }, 39 | textSizeSmall: { ...text.small }, 40 | textSizeLarge: { ...text.large }, 41 | textPrimary: { ...text.primary }, 42 | textSecondary: { ...text.secondary }, 43 | }, 44 | }; 45 | -------------------------------------------------------------------------------- /src/assets/theme/components/stepper/stepIcon.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 PRO React base styles 17 | import colors from "assets/theme/base/colors"; 18 | 19 | // Material Kit 2 PRO React helper functions 20 | import pxToRem from "assets/theme/functions/pxToRem"; 21 | import boxShadow from "assets/theme/functions/boxShadow"; 22 | 23 | const { white } = colors; 24 | 25 | export default { 26 | styleOverrides: { 27 | root: { 28 | background: "#9fc9ff", 29 | fill: "#9fc9ff", 30 | stroke: "#9fc9ff", 31 | strokeWidth: pxToRem(10), 32 | width: pxToRem(13), 33 | height: pxToRem(13), 34 | borderRadius: "50%", 35 | zIndex: 99, 36 | transition: "all 200ms linear", 37 | 38 | "&.Mui-active": { 39 | background: white.main, 40 | fill: white.main, 41 | stroke: white.main, 42 | borderColor: white.main, 43 | boxShadow: boxShadow([0, 0], [0, 2], white.main, 1), 44 | }, 45 | 46 | "&.Mui-completed": { 47 | background: white.main, 48 | fill: white.main, 49 | stroke: white.main, 50 | borderColor: white.main, 51 | boxShadow: boxShadow([0, 0], [0, 2], white.main, 1), 52 | }, 53 | }, 54 | }, 55 | }; 56 | -------------------------------------------------------------------------------- /src/assets/images/logos/small-logos/logo-asana.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Logos 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | 16 | -------------------------------------------------------------------------------- /src/pages/LandingPages/Rental/components/AboutUsOption/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // prop-types is a library for type checking of props 17 | import PropTypes from "prop-types"; 18 | 19 | // @mui material components 20 | import Icon from "@mui/material/Icon"; 21 | 22 | // Material Kit 2 PRO React components 23 | import MKBox from "components/MKBox"; 24 | import MKTypography from "components/MKTypography"; 25 | 26 | function AboutUsOption({ icon, content }) { 27 | return ( 28 | 29 | 41 | {icon} 42 | 43 | 44 | {content} 45 | 46 | 47 | ); 48 | } 49 | 50 | // Typechecking props for the AboutUsOption 51 | AboutUsOption.propTypes = { 52 | icon: PropTypes.string.isRequired, 53 | content: PropTypes.node.isRequired, 54 | }; 55 | 56 | export default AboutUsOption; 57 | -------------------------------------------------------------------------------- /src/assets/images/logos/small-logos/logo-atlassian.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Logos 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/assets/images/logos/small-logos/logo-twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | logo-twitter 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/assets/theme/components/flatpickr.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 PRO React base styles 17 | import colors from "assets/theme/base/colors"; 18 | 19 | // Material Kit 2 PRO React helper functions 20 | import rgba from "assets/theme/functions/rgba"; 21 | 22 | const { info, white, gradients } = colors; 23 | 24 | export default { 25 | ".flatpickr-day:hover, .flatpickr-day:focus, .flatpickr-day.nextMonthDay:hover, .flatpickr-day.nextMonthDay:focus": 26 | { 27 | background: rgba(info.main, 0.28), 28 | border: "none", 29 | }, 30 | 31 | ".flatpickr-day.today": { 32 | background: info.main, 33 | color: white.main, 34 | border: "none", 35 | 36 | "&:hover, &:focus": { 37 | background: `${info.focus} !important`, 38 | }, 39 | }, 40 | 41 | ".flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.nextMonthDay.selected, .flatpickr-day.nextMonthDay.selected:hover, .flatpickr-day.nextMonthDay.selected:focus": 42 | { 43 | background: `${gradients.info.state} !important`, 44 | color: white.main, 45 | border: "none", 46 | }, 47 | 48 | ".flatpickr-months .flatpickr-next-month:hover svg, .flatpickr-months .flatpickr-prev-month:hover svg": 49 | { 50 | color: `${info.main} !important`, 51 | fill: `${info.main} !important`, 52 | }, 53 | }; 54 | -------------------------------------------------------------------------------- /src/assets/theme/components/tabs/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 PRO React base styles 17 | import colors from "assets/theme/base/colors"; 18 | import borders from "assets/theme/base/borders"; 19 | import boxShadows from "assets/theme/base/boxShadows"; 20 | 21 | // Material Kit 2 PRO React helper functions 22 | import pxToRem from "assets/theme/functions/pxToRem"; 23 | 24 | const { grey, white } = colors; 25 | const { borderRadius } = borders; 26 | const { tabsBoxShadow } = boxShadows; 27 | 28 | export default { 29 | styleOverrides: { 30 | root: { 31 | position: "relative", 32 | backgroundColor: grey[100], 33 | borderRadius: borderRadius.xl, 34 | minHeight: "unset", 35 | padding: pxToRem(4), 36 | }, 37 | 38 | flexContainer: { 39 | height: "100%", 40 | position: "relative", 41 | zIndex: 10, 42 | }, 43 | 44 | fixed: { 45 | overflow: "unset !important", 46 | overflowX: "unset !important", 47 | }, 48 | 49 | vertical: { 50 | "& .MuiTabs-indicator": { 51 | width: "100%", 52 | }, 53 | }, 54 | 55 | indicator: { 56 | height: "100%", 57 | borderRadius: borderRadius.lg, 58 | backgroundColor: white.main, 59 | boxShadow: tabsBoxShadow.indicator, 60 | transition: "all 500ms ease", 61 | }, 62 | }, 63 | }; 64 | -------------------------------------------------------------------------------- /src/assets/images/logos/small-logos/logo-spotify.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Logos 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/assets/images/logos/small-logos/logo-jira.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Logos 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src/components/MKBox/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | import {forwardRef} from "react"; 17 | 18 | // prop-types is a library for typechecking of props 19 | import PropTypes from "prop-types"; 20 | 21 | // Custom styles for MKBox 22 | import MKBoxRoot from "components/MKBox/MKBoxRoot"; 23 | 24 | const MKBox = forwardRef( 25 | ({ variant, bgColor, color, opacity, borderRadius, shadow, coloredShadow, ...rest }, ref) => ( 26 | 31 | ) 32 | ); 33 | 34 | // Setting default values for the props of MKBox 35 | MKBox.defaultProps = { 36 | variant: "contained", 37 | bgColor: "transparent", 38 | color: "dark", 39 | opacity: 1, 40 | borderRadius: "none", 41 | shadow: "none", 42 | coloredShadow: "none", 43 | }; 44 | 45 | // Typechecking props for the MKBox 46 | MKBox.propTypes = { 47 | variant: PropTypes.oneOf(["contained", "gradient"]), 48 | bgColor: PropTypes.string, 49 | color: PropTypes.string, 50 | opacity: PropTypes.number, 51 | borderRadius: PropTypes.string, 52 | shadow: PropTypes.string, 53 | coloredShadow: PropTypes.oneOf([ 54 | "primary", 55 | "secondary", 56 | "info", 57 | "success", 58 | "warning", 59 | "error", 60 | "light", 61 | "dark", 62 | "none", 63 | ]), 64 | }; 65 | 66 | export default MKBox; 67 | -------------------------------------------------------------------------------- /src/assets/theme/components/form/inputOutlined.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 PRO React Base Styles 17 | import colors from "assets/theme/base/colors"; 18 | import borders from "assets/theme/base/borders"; 19 | import typography from "assets/theme/base/typography"; 20 | 21 | // Material Kit 2 PRO React helper functions 22 | import pxToRem from "assets/theme/functions/pxToRem"; 23 | 24 | const { inputBorderColor, info, grey, transparent } = colors; 25 | const { borderRadius } = borders; 26 | const { size } = typography; 27 | 28 | export default { 29 | styleOverrides: { 30 | root: { 31 | backgroundColor: transparent.main, 32 | fontSize: size.sm, 33 | borderRadius: borderRadius.md, 34 | 35 | "&:hover .MuiOutlinedInput-notchedOutline": { 36 | borderColor: inputBorderColor, 37 | }, 38 | 39 | "&.Mui-focused": { 40 | "& .MuiOutlinedInput-notchedOutline": { 41 | borderColor: info.main, 42 | }, 43 | }, 44 | }, 45 | 46 | notchedOutline: { 47 | borderColor: inputBorderColor, 48 | }, 49 | 50 | input: { 51 | color: grey[700], 52 | padding: pxToRem(12), 53 | backgroundColor: transparent.main, 54 | }, 55 | 56 | inputSizeSmall: { 57 | fontSize: size.xs, 58 | padding: pxToRem(10), 59 | }, 60 | 61 | multiline: { 62 | color: grey[700], 63 | padding: 0, 64 | }, 65 | }, 66 | }; 67 | -------------------------------------------------------------------------------- /src/components/MKSocialButton/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | import {forwardRef} from "react"; 17 | 18 | // prop-types is a library for typechecking of props 19 | import PropTypes from "prop-types"; 20 | 21 | // Custom styles for MKSocialButton 22 | import MKSocialButtonRoot from "components/MKSocialButton/MKSocialButtonRoot"; 23 | 24 | const MKSocialButton = forwardRef(({ color, size, iconOnly, circular, children, ...rest }, ref) => ( 25 | 33 | {children} 34 | 35 | )); 36 | 37 | // Setting default values for the props of MKSocialButton 38 | MKSocialButton.defaultProps = { 39 | size: "medium", 40 | color: "facebook", 41 | iconOnly: false, 42 | circular: false, 43 | }; 44 | 45 | // Typechecking props for the MKSocialButton 46 | MKSocialButton.propTypes = { 47 | size: PropTypes.oneOf(["small", "medium", "large"]), 48 | color: PropTypes.oneOf([ 49 | "facebook", 50 | "twitter", 51 | "instagram", 52 | "linkedin", 53 | "pinterest", 54 | "youtube", 55 | "github", 56 | "vimeo", 57 | "slack", 58 | "dribbble", 59 | "reddit", 60 | "tumblr", 61 | ]), 62 | iconOnly: PropTypes.bool, 63 | circular: PropTypes.bool, 64 | children: PropTypes.node.isRequired, 65 | }; 66 | 67 | export default MKSocialButton; 68 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | import {useEffect} from "react"; 17 | 18 | // react-router components 19 | import {Navigate, Route, Routes, useLocation} from "react-router-dom"; 20 | 21 | // @mui material components 22 | import {ThemeProvider} from "@mui/material/styles"; 23 | import CssBaseline from "@mui/material/CssBaseline"; 24 | 25 | // Material Kit 2 PRO React themes 26 | import theme from "assets/theme"; 27 | import routes from "routes"; 28 | import Presentation from "./layouts/pages/landing-pages/rental"; 29 | 30 | // Material Kit 2 PRO React routes 31 | 32 | export default function App() { 33 | const { pathname } = useLocation(); 34 | 35 | // Setting page scroll to 0 when changing the route 36 | useEffect(() => { 37 | document.documentElement.scrollTop = 0; 38 | document.scrollingElement.scrollTop = 0; 39 | }, [pathname]); 40 | 41 | const getRoutes = (allRoutes) => 42 | allRoutes.map((route) => { 43 | if (route.collapse) { 44 | return getRoutes(route.collapse); 45 | } 46 | 47 | if (route.route) { 48 | return ; 49 | } 50 | 51 | return null; 52 | }); 53 | 54 | return ( 55 | 56 | 57 | 58 | {getRoutes(routes)} 59 | } /> 60 | } /> 61 | 62 | 63 | ); 64 | } 65 | -------------------------------------------------------------------------------- /src/components/MKButton/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React React - v1.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/soft-ui-dashboard-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | import {forwardRef} from "react"; 17 | 18 | // prop-types is a library for typechecking of props 19 | import PropTypes from "prop-types"; 20 | 21 | // Custom styles for MKButton 22 | import MKButtonRoot from "components/MKButton/MKButtonRoot"; 23 | 24 | const MKButton = forwardRef( 25 | ({ color, variant, size, circular, iconOnly, children, ...rest }, ref) => ( 26 | 34 | {children} 35 | 36 | ) 37 | ); 38 | 39 | // Setting default values for the props of MKButton 40 | MKButton.defaultProps = { 41 | size: "medium", 42 | variant: "contained", 43 | color: "white", 44 | circular: false, 45 | iconOnly: false, 46 | }; 47 | 48 | // Typechecking props for the MKButton 49 | MKButton.propTypes = { 50 | size: PropTypes.oneOf(["small", "medium", "large"]), 51 | variant: PropTypes.oneOf(["text", "contained", "outlined", "gradient"]), 52 | color: PropTypes.oneOf([ 53 | "default", 54 | "white", 55 | "primary", 56 | "secondary", 57 | "info", 58 | "success", 59 | "warning", 60 | "error", 61 | "light", 62 | "dark", 63 | ]), 64 | circular: PropTypes.bool, 65 | iconOnly: PropTypes.bool, 66 | children: PropTypes.node.isRequired, 67 | }; 68 | 69 | export default MKButton; 70 | -------------------------------------------------------------------------------- /src/components/MKBadge/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | import {forwardRef} from "react"; 17 | 18 | // prop-types is a library for typechecking of props 19 | import PropTypes from "prop-types"; 20 | 21 | // Custom styles for the MKBadge 22 | import MKBadgeRoot from "components/MKBadge/MKBadgeRoot"; 23 | 24 | const MKBadge = forwardRef( 25 | ({ color, variant, size, circular, indicator, border, container, children, ...rest }, ref) => ( 26 | 32 | {children} 33 | 34 | ) 35 | ); 36 | 37 | // Setting default values for the props of MKBadge 38 | MKBadge.defaultProps = { 39 | color: "info", 40 | variant: "gradient", 41 | size: "sm", 42 | circular: false, 43 | indicator: false, 44 | border: false, 45 | children: false, 46 | container: false, 47 | }; 48 | 49 | // Typechecking props of the MKBadge 50 | MKBadge.propTypes = { 51 | color: PropTypes.oneOf([ 52 | "white", 53 | "primary", 54 | "secondary", 55 | "info", 56 | "success", 57 | "warning", 58 | "error", 59 | "light", 60 | "dark", 61 | ]), 62 | variant: PropTypes.oneOf(["gradient", "contained"]), 63 | size: PropTypes.oneOf(["xs", "sm", "md", "lg"]), 64 | circular: PropTypes.bool, 65 | indicator: PropTypes.bool, 66 | border: PropTypes.bool, 67 | children: PropTypes.node, 68 | container: PropTypes.bool, 69 | }; 70 | 71 | export default MKBadge; 72 | -------------------------------------------------------------------------------- /src/assets/theme/components/container.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 PRO React base styles 17 | import breakpoints from "assets/theme/base/breakpoints"; 18 | 19 | // Material Kit 2 PRO React helper functions 20 | import pxToRem from "assets/theme/functions/pxToRem"; 21 | 22 | const { 23 | values: { sm, md, lg, xl, xxl }, 24 | } = breakpoints; 25 | 26 | const SM = `@media (min-width: ${sm}px)`; 27 | const MD = `@media (min-width: ${md}px)`; 28 | const LG = `@media (min-width: ${lg}px)`; 29 | const XL = `@media (min-width: ${xl}px)`; 30 | const XXL = `@media (min-width: ${xxl}px)`; 31 | 32 | const sharedClasses = { 33 | paddingRight: `${pxToRem(24)} !important`, 34 | paddingLeft: `${pxToRem(24)} !important`, 35 | marginRight: "auto !important", 36 | marginLeft: "auto !important", 37 | width: "100% !important", 38 | position: "relative", 39 | }; 40 | 41 | export default { 42 | [SM]: { 43 | ".MuiContainer-root": { 44 | ...sharedClasses, 45 | maxWidth: "540px !important", 46 | }, 47 | }, 48 | [MD]: { 49 | ".MuiContainer-root": { 50 | ...sharedClasses, 51 | maxWidth: "720px !important", 52 | }, 53 | }, 54 | [LG]: { 55 | ".MuiContainer-root": { 56 | ...sharedClasses, 57 | maxWidth: "960px !important", 58 | }, 59 | }, 60 | [XL]: { 61 | ".MuiContainer-root": { 62 | ...sharedClasses, 63 | maxWidth: "1140px !important", 64 | }, 65 | }, 66 | [XXL]: { 67 | ".MuiContainer-root": { 68 | ...sharedClasses, 69 | maxWidth: "1320px !important", 70 | }, 71 | }, 72 | }; 73 | -------------------------------------------------------------------------------- /src/assets/theme/components/tabs/tab.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 PRO React base styles 17 | import typography from "assets/theme/base/typography"; 18 | import borders from "assets/theme/base/borders"; 19 | import colors from "assets/theme/base/colors"; 20 | 21 | // Material Kit 2 PRO React helper functions 22 | import pxToRem from "assets/theme/functions/pxToRem"; 23 | 24 | const { size, fontWeightRegular } = typography; 25 | const { borderRadius } = borders; 26 | const { dark } = colors; 27 | 28 | export default { 29 | styleOverrides: { 30 | root: { 31 | display: "flex", 32 | alignItems: "center", 33 | flexDirection: "row", 34 | flex: "1 1 auto", 35 | textAlign: "center", 36 | maxWidth: "unset !important", 37 | minWidth: "unset !important", 38 | minHeight: "unset !important", 39 | fontSize: size.md, 40 | fontWeight: fontWeightRegular, 41 | textTransform: "none", 42 | lineHeight: "inherit", 43 | padding: pxToRem(4), 44 | borderRadius: borderRadius.lg, 45 | color: `${dark.main} !important`, 46 | opacity: "1 !important", 47 | 48 | "& .material-icons, .material-icons-round": { 49 | marginBottom: "0 !important", 50 | marginRight: pxToRem(6), 51 | }, 52 | 53 | "& svg": { 54 | marginBottom: "0 !important", 55 | marginRight: pxToRem(6), 56 | }, 57 | 58 | "& i.MuiTab-iconWrapper": { 59 | marginBottom: 0, 60 | }, 61 | }, 62 | 63 | labelIcon: { 64 | paddingTop: pxToRem(4), 65 | }, 66 | }, 67 | }; 68 | -------------------------------------------------------------------------------- /src/examples/Cards/CounterCards/DefaultCounterCard/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // prop-types is a library for typechecking of props. 17 | import PropTypes from "prop-types"; 18 | 19 | // react-countup component 20 | import CountUp from "react-countup"; 21 | 22 | // Material Kit 2 PRO React components 23 | import MKBox from "components/MKBox"; 24 | import MKTypography from "components/MKTypography"; 25 | 26 | function DefaultCounterCard({ color, count, title, description, ...rest }) { 27 | return ( 28 | 29 | 30 | 31 | 32 | {title && ( 33 | 34 | {title} 35 | 36 | )} 37 | {description && ( 38 | 39 | {description} 40 | 41 | )} 42 | 43 | ); 44 | } 45 | 46 | // Setting default props for the DefaultCounterCard 47 | DefaultCounterCard.defaultProps = { 48 | color: "info", 49 | description: "", 50 | title: "", 51 | }; 52 | 53 | // Typechecking props for the DefaultCounterCard 54 | DefaultCounterCard.propTypes = { 55 | color: PropTypes.oneOf([ 56 | "primary", 57 | "secondary", 58 | "info", 59 | "success", 60 | "warning", 61 | "error", 62 | "light", 63 | "dark", 64 | ]), 65 | count: PropTypes.number.isRequired, 66 | title: PropTypes.string, 67 | description: PropTypes.string, 68 | }; 69 | 70 | export default DefaultCounterCard; 71 | -------------------------------------------------------------------------------- /src/examples/Breadcrumbs/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // prop-types is a library for typechecking of props 17 | import PropTypes from "prop-types"; 18 | 19 | // react-router-dom components 20 | import {Link} from "react-router-dom"; 21 | 22 | // @mui material components 23 | import MuiBreadcrumbs from "@mui/material/Breadcrumbs"; 24 | 25 | // Material Kit 2 PRO React components 26 | import MKBox from "components/MKBox"; 27 | import MKTypography from "components/MKTypography"; 28 | 29 | function Breadcrumbs({ routes, ...rest }) { 30 | return ( 31 | 32 | 33 | {routes.map(({ label, route }) => 34 | route ? ( 35 | info.main, 46 | }, 47 | }} 48 | > 49 | {label} 50 | 51 | ) : ( 52 | 53 | {label} 54 | 55 | ) 56 | )} 57 | 58 | 59 | ); 60 | } 61 | 62 | // Typechecking props for the Breadcrumbs 63 | Breadcrumbs.propTypes = { 64 | routes: PropTypes.arrayOf(PropTypes.object).isRequired, 65 | }; 66 | 67 | export default Breadcrumbs; 68 | -------------------------------------------------------------------------------- /src/footer.routes.js: -------------------------------------------------------------------------------- 1 | // @mui icons 2 | import FacebookIcon from "@mui/icons-material/Facebook"; 3 | import TwitterIcon from "@mui/icons-material/Twitter"; 4 | import GitHubIcon from "@mui/icons-material/GitHub"; 5 | import YouTubeIcon from "@mui/icons-material/YouTube"; 6 | 7 | // Material Kit 2 PRO React components 8 | import MKTypography from "components/MKTypography"; 9 | 10 | // Images 11 | import logoCT from "assets/images/logo-ct-dark.png"; 12 | 13 | const date = new Date().getFullYear(); 14 | 15 | export default { 16 | brand: { 17 | name: "iAuto", 18 | image: logoCT, 19 | route: "/", 20 | }, 21 | socials: [ 22 | { 23 | icon: , 24 | link: "https://www.facebook.com/", 25 | }, 26 | { 27 | icon: , 28 | link: "https://twitter.com/", 29 | }, 30 | { 31 | icon: , 32 | link: "https://github.com/", 33 | }, 34 | { 35 | icon: , 36 | link: "https://www.youtube.com/", 37 | }, 38 | ], 39 | menus: [ 40 | { 41 | name: "company", 42 | items: [ 43 | { name: "about us", href: "/" }, 44 | { name: "freebies", href: "/" }, 45 | { name: "premium tools", href: "/" }, 46 | { name: "blog", href: "/" }, 47 | ], 48 | }, 49 | { 50 | name: "resources", 51 | items: [ 52 | { name: "illustrations", href: "/" }, 53 | { name: "bits & snippets", href: "/" }, 54 | { name: "affiliate program", href: "/" }, 55 | ], 56 | }, 57 | { 58 | name: "help & support", 59 | items: [ 60 | { name: "contact us", href: "/" }, 61 | { name: "knowledge center", href: "/" }, 62 | { name: "custom development", href: "/" }, 63 | { name: "sponsorships", href: "/" }, 64 | ], 65 | }, 66 | { 67 | name: "legal", 68 | items: [ 69 | { name: "terms & conditions", href: "/" }, 70 | { name: "privacy policy", href: "/" }, 71 | { name: "licenses (EULA)", href: "/" }, 72 | ], 73 | }, 74 | ], 75 | copyright: ( 76 | 77 | All rights reserved. Copyright © {date} iAuto. 78 | 79 | ), 80 | }; 81 | -------------------------------------------------------------------------------- /src/assets/theme/components/button/outlined.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 PRO React Base Styles 17 | import colors from "assets/theme/base/colors"; 18 | import typography from "assets/theme/base/typography"; 19 | 20 | // Material Kit 2 PRO React Helper Functions 21 | import pxToRem from "assets/theme/functions/pxToRem"; 22 | 23 | const { transparent, light, info, secondary } = colors; 24 | const { size } = typography; 25 | 26 | export default { 27 | base: { 28 | minHeight: pxToRem(40), 29 | color: light.main, 30 | borderColor: light.main, 31 | padding: `${pxToRem(10)} ${pxToRem(24)}`, 32 | 33 | "&:hover": { 34 | opacity: 0.75, 35 | backgroundColor: transparent.main, 36 | }, 37 | 38 | "& .material-icon, .material-icons-round, svg": { 39 | fontSize: `${pxToRem(16)} !important`, 40 | }, 41 | }, 42 | 43 | small: { 44 | minHeight: pxToRem(32), 45 | padding: `${pxToRem(6)} ${pxToRem(16)}`, 46 | fontSize: size.xs, 47 | 48 | "& .material-icon, .material-icons-round, svg": { 49 | fontSize: `${pxToRem(12)} !important`, 50 | }, 51 | }, 52 | 53 | large: { 54 | minHeight: pxToRem(47), 55 | padding: `${pxToRem(12)} ${pxToRem(28)}`, 56 | fontSize: size.sm, 57 | 58 | "& .material-icon, .material-icons-round, svg": { 59 | fontSize: `${pxToRem(22)} !important`, 60 | }, 61 | }, 62 | 63 | primary: { 64 | backgroundColor: transparent.main, 65 | borderColor: info.main, 66 | 67 | "&:hover": { 68 | backgroundColor: transparent.main, 69 | }, 70 | }, 71 | 72 | secondary: { 73 | backgroundColor: transparent.main, 74 | borderColor: secondary.main, 75 | 76 | "&:hover": { 77 | backgroundColor: transparent.main, 78 | }, 79 | }, 80 | }; 81 | -------------------------------------------------------------------------------- /src/components/MKTypography/MKTypographyRoot.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // @mui material components 17 | import Typography from "@mui/material/Typography"; 18 | import {styled} from "@mui/material/styles"; 19 | 20 | export default styled(Typography)(({ theme, ownerState }) => { 21 | const { palette, typography, functions } = theme; 22 | const { color, textTransform, verticalAlign, fontWeight, opacity, textGradient } = ownerState; 23 | 24 | const { gradients, transparent } = palette; 25 | const { fontWeightLight, fontWeightRegular, fontWeightMedium, fontWeightBold } = typography; 26 | const { linearGradient } = functions; 27 | 28 | // fontWeight styles 29 | const fontWeights = { 30 | light: fontWeightLight, 31 | regular: fontWeightRegular, 32 | medium: fontWeightMedium, 33 | bold: fontWeightBold, 34 | }; 35 | 36 | // styles for the typography with textGradient={true} 37 | const gradientStyles = () => ({ 38 | backgroundImage: 39 | color !== "inherit" && color !== "text" && color !== "white" && gradients[color] 40 | ? linearGradient(gradients[color].main, gradients[color].state) 41 | : linearGradient(gradients.dark.main, gradients.dark.state), 42 | display: "inline-block", 43 | WebkitBackgroundClip: "text", 44 | WebkitTextFillColor: transparent.main, 45 | position: "relative", 46 | zIndex: 1, 47 | }); 48 | 49 | // color value 50 | const colorValue = color === "inherit" || !palette[color] ? "inherit" : palette[color].main; 51 | 52 | return { 53 | opacity, 54 | textTransform, 55 | verticalAlign, 56 | textDecoration: "none", 57 | color: colorValue, 58 | letterSpacing: "-0.125px", 59 | fontWeight: fontWeights[fontWeight] && fontWeights[fontWeight], 60 | ...(textGradient && gradientStyles()), 61 | }; 62 | }); 63 | -------------------------------------------------------------------------------- /src/assets/images/logos/gray-logos/logo-netflix.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Logos 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/assets/images/logos/medium-logos/logo-netflix.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Logos 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/pages/LandingPages/Rental/components/FaqCollapse/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // prop-types is a library for typechecking of props 17 | import PropTypes from "prop-types"; 18 | 19 | // @mui material components 20 | import Icon from "@mui/material/Icon"; 21 | import Collapse from "@mui/material/Collapse"; 22 | 23 | // Material Kit 2 PRO React components 24 | import MKBox from "components/MKBox"; 25 | import MKTypography from "components/MKTypography"; 26 | 27 | function FaqCollapse({ title, open, children, ...rest }) { 28 | return ( 29 | 30 | 39 | `${borderWidth[1]} solid ${borderColor}`, 40 | }} 41 | > 42 | 43 | {title} 44 | 45 | 46 | 47 | {open ? "remove" : "add"} 48 | 49 | 50 | 51 | 52 | 53 | 54 | {children} 55 | 56 | 57 | 58 | 59 | ); 60 | } 61 | 62 | // Typechecking props for the FaqCollapse 63 | FaqCollapse.propTypes = { 64 | title: PropTypes.string.isRequired, 65 | open: PropTypes.bool.isRequired, 66 | children: PropTypes.node.isRequired, 67 | }; 68 | 69 | export default FaqCollapse; 70 | -------------------------------------------------------------------------------- /src/assets/theme/components/button/contained.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 PRO React Base Styles 17 | import colors from "assets/theme/base/colors"; 18 | import typography from "assets/theme/base/typography"; 19 | 20 | // Material Kit 2 PRO React Helper Functions 21 | import pxToRem from "assets/theme/functions/pxToRem"; 22 | 23 | const { white, text, info, secondary } = colors; 24 | const { size } = typography; 25 | 26 | export default { 27 | base: { 28 | backgroundColor: white.main, 29 | minHeight: pxToRem(40), 30 | color: text.main, 31 | padding: `${pxToRem(10)} ${pxToRem(24)}`, 32 | 33 | "&:hover": { 34 | backgroundColor: white.main, 35 | }, 36 | 37 | "&:active, &:active:focus, &:active:hover": { 38 | opacity: 0.85, 39 | }, 40 | 41 | "& .material-icon, .material-icons-round, svg": { 42 | fontSize: `${pxToRem(16)} !important`, 43 | }, 44 | }, 45 | 46 | small: { 47 | minHeight: pxToRem(32), 48 | padding: `${pxToRem(6)} ${pxToRem(16)}`, 49 | fontSize: size.xs, 50 | 51 | "& .material-icon, .material-icons-round, svg": { 52 | fontSize: `${pxToRem(12)} !important`, 53 | }, 54 | }, 55 | 56 | large: { 57 | minHeight: pxToRem(47), 58 | padding: `${pxToRem(12)} ${pxToRem(28)}`, 59 | fontSize: size.sm, 60 | 61 | "& .material-icon, .material-icons-round, svg": { 62 | fontSize: `${pxToRem(22)} !important`, 63 | }, 64 | }, 65 | 66 | primary: { 67 | backgroundColor: info.main, 68 | 69 | "&:hover": { 70 | backgroundColor: info.main, 71 | }, 72 | 73 | "&:focus:not(:hover)": { 74 | backgroundColor: info.focus, 75 | }, 76 | }, 77 | 78 | secondary: { 79 | backgroundColor: secondary.main, 80 | 81 | "&:hover": { 82 | backgroundColor: secondary.main, 83 | }, 84 | 85 | "&:focus:not(:hover)": { 86 | backgroundColor: secondary.focus, 87 | }, 88 | }, 89 | }; 90 | -------------------------------------------------------------------------------- /src/components/MKTypography/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | import {forwardRef} from "react"; 17 | 18 | // prop-types is a library for typechecking of props 19 | import PropTypes from "prop-types"; 20 | 21 | // Custom styles for MKTypography 22 | import MKTypographyRoot from "components/MKTypography/MKTypographyRoot"; 23 | 24 | const MKTypography = forwardRef( 25 | ( 26 | { color, fontWeight, textTransform, verticalAlign, textGradient, opacity, children, ...rest }, 27 | ref 28 | ) => ( 29 | 41 | {children} 42 | 43 | ) 44 | ); 45 | 46 | // Setting default values for the props of MKTypography 47 | MKTypography.defaultProps = { 48 | color: "dark", 49 | fontWeight: false, 50 | textTransform: "none", 51 | verticalAlign: "unset", 52 | textGradient: false, 53 | opacity: 1, 54 | }; 55 | 56 | // Typechecking props for the MKTypography 57 | MKTypography.propTypes = { 58 | color: PropTypes.oneOf([ 59 | "inherit", 60 | "primary", 61 | "secondary", 62 | "info", 63 | "success", 64 | "warning", 65 | "error", 66 | "light", 67 | "dark", 68 | "text", 69 | "white", 70 | ]), 71 | fontWeight: PropTypes.oneOf([false, "light", "regular", "medium", "bold"]), 72 | textTransform: PropTypes.oneOf(["none", "capitalize", "uppercase", "lowercase"]), 73 | verticalAlign: PropTypes.oneOf([ 74 | "unset", 75 | "baseline", 76 | "sub", 77 | "super", 78 | "text-top", 79 | "text-bottom", 80 | "middle", 81 | "top", 82 | "bottom", 83 | ]), 84 | textGradient: PropTypes.bool, 85 | children: PropTypes.node, 86 | opacity: PropTypes.number, 87 | }; 88 | 89 | export default MKTypography; 90 | -------------------------------------------------------------------------------- /src/components/VehicleCards/VehicleAuctionCard/index.js: -------------------------------------------------------------------------------- 1 | import PropTypes from "prop-types"; 2 | import PaidIcon from "@mui/icons-material/Paid"; 3 | import PeopleAltIcon from "@mui/icons-material/PeopleAlt"; 4 | import VehicleCard from "../VehicleCard"; 5 | import AuctionCountdown from "./AuctionCountdown"; 6 | import MKBadge from "../../MKBadge"; 7 | 8 | function VehicleAuctionCard({ 9 | image, 10 | title, 11 | timeData, 12 | topBidPrice, 13 | allBidCount, 14 | vehicleInfo, 15 | action, 16 | }) { 17 | const { timeStart, timeDuration } = timeData; 18 | const timeEnd = Date.parse(timeStart) + timeDuration; 19 | const description = ( 20 | <> 21 | 22 | 25 | 26 |  {topBidPrice} 27 | 28 | } 29 | color="light" 30 | container 31 | /> 32 | 35 | 36 |  {allBidCount} 37 | 38 | } 39 | color="light" 40 | container 41 | /> 42 | 43 | ); 44 | 45 | return ( 46 | 54 | ); 55 | } 56 | 57 | VehicleAuctionCard.defaultProps = { 58 | allBidCount: 0, 59 | topBidPrice: 0, 60 | }; 61 | 62 | VehicleAuctionCard.propTypes = { 63 | image: PropTypes.string.isRequired, 64 | title: PropTypes.string.isRequired, 65 | vehicleInfo: PropTypes.shape({ 66 | miles: PropTypes.number, 67 | fuel: PropTypes.string, 68 | transmission: PropTypes.oneOf(["Manual", "Automatic"]), 69 | }).isRequired, 70 | timeData: PropTypes.shape({ 71 | timeStart: PropTypes.instanceOf(Date), 72 | timeDuration: PropTypes.number, 73 | }).isRequired, 74 | topBidPrice: PropTypes.number, 75 | allBidCount: PropTypes.number, 76 | action: PropTypes.shape({ 77 | type: PropTypes.oneOf(["external", "internal"]).isRequired, 78 | route: PropTypes.string.isRequired, 79 | color: PropTypes.oneOf([ 80 | "primary", 81 | "secondary", 82 | "info", 83 | "success", 84 | "warning", 85 | "error", 86 | "dark", 87 | "light", 88 | ]), 89 | label: PropTypes.string.isRequired, 90 | }).isRequired, 91 | }; 92 | 93 | export default VehicleAuctionCard; 94 | -------------------------------------------------------------------------------- /src/assets/images/logos/small-logos/logo-invision.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Logos 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "car-auction-react", 3 | "version": "1.0.0", 4 | "private": true, 5 | "author": "prettyblueberry", 6 | "description": "A simple landing page of car auction site.(React, MUI)", 7 | "repository": { 8 | "type": "git", 9 | "url": "git+https://github.com/prettyblueberry/car-auction-react.git" 10 | }, 11 | "engines": { 12 | "node": "14 || 15 || 16", 13 | "npm": ">=6" 14 | }, 15 | "dependencies": { 16 | "@emotion/cache": "11.4.0", 17 | "@emotion/react": "11.4.1", 18 | "@emotion/styled": "11.3.0", 19 | "@mui/icons-material": "5.2.0", 20 | "@mui/material": "5.2.0", 21 | "@mui/styled-engine": "5.2.0", 22 | "@testing-library/jest-dom": "5.11.4", 23 | "@testing-library/react": "11.1.0", 24 | "@testing-library/user-event": "12.1.10", 25 | "chroma-js": "2.1.2", 26 | "flatpickr": "4.6.9", 27 | "prop-types": "15.7.2", 28 | "react": "17.0.2", 29 | "react-copy-to-clipboard": "5.0.4", 30 | "react-countdown": "^2.3.5", 31 | "react-countup": "6.1.0", 32 | "react-dom": "17.0.2", 33 | "react-flatpickr": "3.10.7", 34 | "react-router-dom": "6.0.2", 35 | "react-scripts": "4.0.3", 36 | "react-syntax-highlighter": "15.4.5", 37 | "rellax": "1.12.1", 38 | "swiper": "7.3.4", 39 | "typed.js": "2.0.12", 40 | "uuid": "8.3.2", 41 | "web-vitals": "1.0.1" 42 | }, 43 | "scripts": { 44 | "start": "react-scripts start", 45 | "build": "react-scripts build", 46 | "test": "react-scripts test", 47 | "eject": "react-scripts eject", 48 | "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start" 49 | }, 50 | "eslintConfig": { 51 | "extends": [ 52 | "react-app", 53 | "react-app/jest" 54 | ] 55 | }, 56 | "browserslist": { 57 | "production": [ 58 | ">0.2%", 59 | "not dead", 60 | "not op_mini all" 61 | ], 62 | "development": [ 63 | "last 1 chrome version", 64 | "last 1 firefox version", 65 | "last 1 safari version" 66 | ] 67 | }, 68 | "devDependencies": { 69 | "eslint": "7.30.0", 70 | "eslint-config-airbnb": "18.2.1", 71 | "eslint-config-prettier": "8.3.0", 72 | "eslint-plugin-import": "2.23.4", 73 | "eslint-plugin-jsx-a11y": "6.4.1", 74 | "eslint-plugin-prettier": "3.4.0", 75 | "eslint-plugin-react": "7.24.0", 76 | "eslint-plugin-react-hooks": "4.2.0", 77 | "prettier": "2.3.2", 78 | "react-error-overlay": "^6.0.9" 79 | }, 80 | "resolutions": { 81 | "react-error-overlay": "6.0.9" 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /src/components/MKAvatar/MKAvatarRoot.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // @mui material components 17 | import Avatar from "@mui/material/Avatar"; 18 | import {styled} from "@mui/material/styles"; 19 | 20 | export default styled(Avatar)(({ theme, ownerState }) => { 21 | const { palette, functions, typography, boxShadows } = theme; 22 | const { shadow, bgColor, size } = ownerState; 23 | 24 | const { gradients, transparent, white } = palette; 25 | const { pxToRem, linearGradient } = functions; 26 | const { size: fontSize, fontWeightRegular } = typography; 27 | 28 | // backgroundImage value 29 | const backgroundValue = 30 | bgColor === "transparent" 31 | ? transparent.main 32 | : linearGradient(gradients[bgColor].main, gradients[bgColor].state); 33 | 34 | // size value 35 | let sizeValue; 36 | 37 | switch (size) { 38 | case "xs": 39 | sizeValue = { 40 | width: pxToRem(24), 41 | height: pxToRem(24), 42 | fontSize: fontSize.xs, 43 | }; 44 | break; 45 | case "sm": 46 | sizeValue = { 47 | width: pxToRem(36), 48 | height: pxToRem(36), 49 | fontSize: fontSize.sm, 50 | }; 51 | break; 52 | case "lg": 53 | sizeValue = { 54 | width: pxToRem(58), 55 | height: pxToRem(58), 56 | fontSize: fontSize.sm, 57 | }; 58 | break; 59 | case "xl": 60 | sizeValue = { 61 | width: pxToRem(74), 62 | height: pxToRem(74), 63 | fontSize: fontSize.md, 64 | }; 65 | break; 66 | case "xxl": 67 | sizeValue = { 68 | width: pxToRem(110), 69 | height: pxToRem(110), 70 | fontSize: fontSize.md, 71 | }; 72 | break; 73 | default: { 74 | sizeValue = { 75 | width: pxToRem(48), 76 | height: pxToRem(48), 77 | fontSize: fontSize.md, 78 | }; 79 | } 80 | } 81 | 82 | return { 83 | background: backgroundValue, 84 | color: white.main, 85 | fontWeight: fontWeightRegular, 86 | boxShadow: boxShadows[shadow], 87 | ...sizeValue, 88 | }; 89 | }); 90 | -------------------------------------------------------------------------------- /src/routes.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | /** 17 | All of the routes for the Material Kit 2 PRO React React are added here, 18 | You can add a new route, customize the routes and delete the routes here. 19 | 20 | Once you add a new route on this file it will be visible automatically on 21 | the Navbar. 22 | 23 | For adding a new route you can follow the existing routes in the routes array. 24 | 1. The `name` key is used for the name of the route on the Navbar. 25 | 2. The `icon` key is used for the icon of the route on the Navbar. 26 | 3. The `collapse` key is used for making a collapsible item on the Navbar that contains other routes 27 | inside (nested routes), you need to pass the nested routes inside an array as a value for the `collapse` key. 28 | 4. The `route` key is used to store the route location which is used for the react router. 29 | 5. The `href` key is used to store the external links location. 30 | 6. The `component` key is used to store the component of its route. 31 | 7. The `dropdown` key is used to define that the item should open a dropdown for its collapse items . 32 | 8. The `description` key is used to define the description of 33 | a route under its name. 34 | 9. The `columns` key is used to define that how the content should look inside the dropdown menu as columns, 35 | you can set the columns amount based on this key. 36 | 10. The `rowsPerColumn` key is used to define that how many rows should be in a column. 37 | */ 38 | 39 | // @mui material components 40 | import Icon from "@mui/material/Icon"; 41 | 42 | // Pages 43 | import Rental from "layouts/pages/landing-pages/rental"; 44 | 45 | const routes = [ 46 | { 47 | name: "pages", 48 | icon: dashboard, 49 | columns: 3, 50 | rowsPerColumn: 2, 51 | collapse: [ 52 | { 53 | name: "landing pages", 54 | collapse: [ 55 | { 56 | name: "rental", 57 | route: "/pages/landing-pages/rental", 58 | component: , 59 | }, 60 | ], 61 | }, 62 | ], 63 | }, 64 | ]; 65 | 66 | export default routes; 67 | -------------------------------------------------------------------------------- /src/assets/images/logos/small-logos/logo-dribbble.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | logo-dribbble 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/examples/Cards/TeamCards/HorizontalTeamCard/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // prop-types is a library for typechecking of props 17 | import PropTypes from "prop-types"; 18 | 19 | // @mui material components 20 | import Card from "@mui/material/Card"; 21 | import Grid from "@mui/material/Grid"; 22 | 23 | // Material Kit 2 PRO React components 24 | import MKBox from "components/MKBox"; 25 | import MKTypography from "components/MKTypography"; 26 | 27 | function HorizontalTeamCard({ image, name, position, description }) { 28 | return ( 29 | 30 | 31 | 32 | 33 | 41 | 42 | 43 | 44 | 45 | {name} 46 | 47 | {position.label} 48 | 49 | 50 | {description} 51 | 52 | 53 | 54 | 55 | 56 | ); 57 | } 58 | 59 | // Typechecking props for the HorizontalTeamCard 60 | HorizontalTeamCard.propTypes = { 61 | image: PropTypes.string.isRequired, 62 | name: PropTypes.string.isRequired, 63 | position: PropTypes.shape({ 64 | color: PropTypes.oneOf([ 65 | "primary", 66 | "secondary", 67 | "info", 68 | "success", 69 | "warning", 70 | "error", 71 | "dark", 72 | "light", 73 | ]), 74 | label: PropTypes.string.isRequired, 75 | }).isRequired, 76 | description: PropTypes.string.isRequired, 77 | }; 78 | 79 | export default HorizontalTeamCard; 80 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | ############################################################################### 2 | # Set default behavior to automatically normalize line endings. 3 | ############################################################################### 4 | * text=auto 5 | 6 | ############################################################################### 7 | # Set default behavior for command prompt diff. 8 | # 9 | # This is need for earlier builds of msysgit that does not have it on by 10 | # default for csharp files. 11 | # Note: This is only used by command line 12 | ############################################################################### 13 | #*.cs diff=csharp 14 | 15 | ############################################################################### 16 | # Set the merge driver for project and solution files 17 | # 18 | # Merging from the command prompt will add diff markers to the files if there 19 | # are conflicts (Merging from VS is not affected by the settings below, in VS 20 | # the diff markers are never inserted). Diff markers may cause the following 21 | # file extensions to fail to load in VS. An alternative would be to treat 22 | # these files as binary and thus will always conflict and require user 23 | # intervention with every merge. To do so, just uncomment the entries below 24 | ############################################################################### 25 | #*.sln merge=binary 26 | #*.csproj merge=binary 27 | #*.vbproj merge=binary 28 | #*.vcxproj merge=binary 29 | #*.vcproj merge=binary 30 | #*.dbproj merge=binary 31 | #*.fsproj merge=binary 32 | #*.lsproj merge=binary 33 | #*.wixproj merge=binary 34 | #*.modelproj merge=binary 35 | #*.sqlproj merge=binary 36 | #*.wwaproj merge=binary 37 | 38 | ############################################################################### 39 | # behavior for image files 40 | # 41 | # image files are treated as binary by default. 42 | ############################################################################### 43 | #*.jpg binary 44 | #*.png binary 45 | #*.gif binary 46 | 47 | ############################################################################### 48 | # diff behavior for common document formats 49 | # 50 | # Convert binary document formats to text before diffing them. This feature 51 | # is only available from the command line. Turn it on by uncommenting the 52 | # entries below. 53 | ############################################################################### 54 | #*.doc diff=astextplain 55 | #*.DOC diff=astextplain 56 | #*.docx diff=astextplain 57 | #*.DOCX diff=astextplain 58 | #*.dot diff=astextplain 59 | #*.DOT diff=astextplain 60 | #*.pdf diff=astextplain 61 | #*.PDF diff=astextplain 62 | #*.rtf diff=astextplain 63 | #*.RTF diff=astextplain 64 | -------------------------------------------------------------------------------- /src/assets/theme/components/button/text.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // Material Kit 2 PRO React Base Styles 17 | import colors from "assets/theme/base/colors"; 18 | import typography from "assets/theme/base/typography"; 19 | 20 | // Material Kit 2 PRO React Helper Functions 21 | import pxToRem from "assets/theme/functions/pxToRem"; 22 | 23 | const { text, info, secondary, transparent } = colors; 24 | const { size } = typography; 25 | 26 | export default { 27 | base: { 28 | backgroundColor: transparent.main, 29 | minHeight: pxToRem(40), 30 | color: text.main, 31 | boxShadow: "none", 32 | padding: `${pxToRem(10)} ${pxToRem(24)}`, 33 | 34 | "&:hover": { 35 | backgroundColor: transparent.main, 36 | boxShadow: "none", 37 | }, 38 | 39 | "&:focus": { 40 | boxShadow: "none", 41 | }, 42 | 43 | "&:active, &:active:focus, &:active:hover": { 44 | opacity: 0.85, 45 | boxShadow: "none", 46 | }, 47 | 48 | "&:disabled": { 49 | boxShadow: "none", 50 | }, 51 | 52 | "& .material-icon, .material-icons-round, svg": { 53 | fontSize: `${pxToRem(16)} !important`, 54 | }, 55 | }, 56 | 57 | small: { 58 | minHeight: pxToRem(32), 59 | padding: `${pxToRem(6)} ${pxToRem(16)}`, 60 | fontSize: size.xs, 61 | 62 | "& .material-icon, .material-icons-round, svg": { 63 | fontSize: `${pxToRem(12)} !important`, 64 | }, 65 | }, 66 | 67 | large: { 68 | minHeight: pxToRem(47), 69 | padding: `${pxToRem(12)} ${pxToRem(28)}`, 70 | fontSize: size.sm, 71 | 72 | "& .material-icon, .material-icons-round, svg": { 73 | fontSize: `${pxToRem(22)} !important`, 74 | }, 75 | }, 76 | 77 | primary: { 78 | color: info.main, 79 | 80 | "&:hover": { 81 | color: info.main, 82 | }, 83 | 84 | "&:focus:not(:hover)": { 85 | color: info.focus, 86 | boxShadow: "none", 87 | }, 88 | }, 89 | 90 | secondary: { 91 | color: secondary.main, 92 | 93 | "&:hover": { 94 | color: secondary.main, 95 | }, 96 | 97 | "&:focus:not(:hover)": { 98 | color: secondary.focus, 99 | boxShadow: "none", 100 | }, 101 | }, 102 | }; 103 | -------------------------------------------------------------------------------- /src/pages/LandingPages/Rental/sections/Search.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // @mui material components 17 | import Container from "@mui/material/Container"; 18 | import Grid from "@mui/material/Grid"; 19 | import Autocomplete from "@mui/material/Autocomplete"; 20 | 21 | // Material Kit 2 PRO React components 22 | import MKBox from "components/MKBox"; 23 | import MKTypography from "components/MKTypography"; 24 | import MKInput from "components/MKInput"; 25 | // import MKDatePicker from "components/MKDatePicker"; 26 | import MKButton from "components/MKButton"; 27 | 28 | function Search() { 29 | return ( 30 | 31 | 32 | 33 | 34 | 35 | Leave From 36 | 37 | } 41 | /> 42 | 43 | 44 | 45 | To 46 | 47 | } 51 | /> 52 | 53 | 54 | 55 | Depart 56 | 57 | 58 | 59 | 60 | 61 | search 62 | 63 | 64 | 65 | 66 | 67 | ); 68 | } 69 | 70 | export default Search; 71 | -------------------------------------------------------------------------------- /src/examples/Cards/ReviewCards/MiniReviewCard/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // prop-types is library for typechecking of props 17 | import PropTypes from "prop-types"; 18 | 19 | // Material Kit 2 PRO React components 20 | import MKBox from "components/MKBox"; 21 | import MKAvatar from "components/MKAvatar"; 22 | import MKTypography from "components/MKTypography"; 23 | 24 | function MiniReviewCard({ color, review, author }) { 25 | return ( 26 | 33 | 38 | "{review}" 39 | 40 | 41 | 42 | 43 | 49 | {author.name} 50 | 51 | 56 | {author.date} 57 | 58 | 59 | 60 | 61 | ); 62 | } 63 | 64 | // Setting default values for the props of MiniReviewCard 65 | MiniReviewCard.defaultProps = { 66 | color: "transparent", 67 | }; 68 | 69 | // Typechecking props for the MiniReviewCard 70 | MiniReviewCard.propTypes = { 71 | color: PropTypes.oneOf([ 72 | "transparent", 73 | "primary", 74 | "secondary", 75 | "info", 76 | "success", 77 | "warning", 78 | "error", 79 | "dark", 80 | "light", 81 | ]), 82 | review: PropTypes.string.isRequired, 83 | author: PropTypes.shape({ 84 | image: PropTypes.string.isRequired, 85 | name: PropTypes.string.isRequired, 86 | date: PropTypes.string.isRequired, 87 | }).isRequired, 88 | }; 89 | 90 | export default MiniReviewCard; 91 | -------------------------------------------------------------------------------- /src/components/MKSocialButton/MKSocialButtonRoot.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // @mui material components 17 | import Button from "@mui/material/Button"; 18 | import {styled} from "@mui/material/styles"; 19 | 20 | export default styled(Button)(({ theme, ownerState }) => { 21 | const { palette, functions } = theme; 22 | const { color, size, iconOnly, circular } = ownerState; 23 | 24 | const { white, socialMediaColors } = palette; 25 | const { pxToRem } = functions; 26 | 27 | // backgroundColor value 28 | const backgroundColorValue = socialMediaColors[color] 29 | ? socialMediaColors[color].main 30 | : socialMediaColors.facebook.main; 31 | 32 | const focusedBackgroundColorValue = socialMediaColors[color] 33 | ? socialMediaColors[color].dark 34 | : socialMediaColors.facebook.dark; 35 | 36 | // styles for the button with circular={true} 37 | const circularStyles = () => ({ 38 | borderRadius: "50%", 39 | }); 40 | 41 | // styles for the button with iconOnly={true} 42 | const iconOnlyStyles = () => { 43 | // width, height, minWidth and minHeight values 44 | let sizeValue = pxToRem(38); 45 | 46 | if (size === "small") { 47 | sizeValue = pxToRem(25.4); 48 | } else if (size === "large") { 49 | sizeValue = pxToRem(52); 50 | } 51 | 52 | // padding value 53 | let paddingValue = `${pxToRem(11)} ${pxToRem(11)} ${pxToRem(10)}`; 54 | 55 | if (size === "small") { 56 | paddingValue = pxToRem(4.5); 57 | } else if (size === "large") { 58 | paddingValue = pxToRem(16); 59 | } 60 | 61 | return { 62 | width: sizeValue, 63 | minWidth: sizeValue, 64 | height: sizeValue, 65 | minHeight: sizeValue, 66 | padding: paddingValue, 67 | }; 68 | }; 69 | 70 | return { 71 | backgroundColor: backgroundColorValue, 72 | color: white.main, 73 | boxShadow: "none", 74 | 75 | "&:hover": { 76 | backgroundColor: focusedBackgroundColorValue, 77 | boxShadow: "none", 78 | }, 79 | 80 | "&:focus:not(:hover)": { 81 | backgroundColor: socialMediaColors[color] 82 | ? socialMediaColors[color].dark 83 | : socialMediaColors.facebook.dark, 84 | boxShadow: "none", 85 | }, 86 | 87 | "&:disabled": { 88 | backgroundColor: backgroundColorValue, 89 | color: white.main, 90 | }, 91 | 92 | ...(circular && circularStyles()), 93 | ...(iconOnly && iconOnlyStyles()), 94 | }; 95 | }); 96 | -------------------------------------------------------------------------------- /src/examples/Cards/TeamCards/TransparentTeamCard/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // prop-types is a library for typechecking of props 17 | import PropTypes from "prop-types"; 18 | 19 | // @mui material components 20 | import Stack from "@mui/material/Stack"; 21 | 22 | // Material Kit 2 PRO React components 23 | import MKBox from "components/MKBox"; 24 | import MKAvatar from "components/MKAvatar"; 25 | import MKTypography from "components/MKTypography"; 26 | 27 | function TransparentTeamCard({ image, name, position, description, socials }) { 28 | return ( 29 | 30 | 31 | borderRadius.xl, 38 | position: "relative", 39 | zIndex: 2, 40 | }} 41 | /> 42 | 58 | 59 | 60 | {name} 61 | 62 | {position} 63 | 64 | 65 | {description} 66 | 67 | 68 | {socials} 69 | 70 | 71 | 72 | ); 73 | } 74 | 75 | // Setting default props for the TransparentTeamCard 76 | TransparentTeamCard.defaultProps = { 77 | description: "", 78 | socials: "", 79 | }; 80 | 81 | // Typechecking props for the TransparentTeamCard 82 | TransparentTeamCard.propTypes = { 83 | image: PropTypes.string.isRequired, 84 | name: PropTypes.string.isRequired, 85 | position: PropTypes.string.isRequired, 86 | description: PropTypes.string, 87 | socials: PropTypes.node, 88 | }; 89 | 90 | export default TransparentTeamCard; 91 | -------------------------------------------------------------------------------- /src/assets/images/logos/small-logos/logo-xd.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Logos 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/assets/images/logos/small-logos/logo-amazon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | logo-amazon 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/assets/images/logos/small-logos/logo-slack.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Logos 4 | 5 | 11 | 12 | -------------------------------------------------------------------------------- /src/assets/images/logos/small-logos/logo-shopify.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Logos 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/pages/LandingPages/Rental/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // @mui material components 17 | import Container from "@mui/material/Container"; 18 | import Grid from "@mui/material/Grid"; 19 | import Card from "@mui/material/Card"; 20 | 21 | // Material Kit 2 PRO React components 22 | import MKBox from "components/MKBox"; 23 | 24 | // Material Kit 2 PRO React examples 25 | import DefaultNavbar from "examples/Navbars/DefaultNavbar"; 26 | import DefaultFooter from "examples/Footers/DefaultFooter"; 27 | 28 | // Rental page sections 29 | import Places from "pages/LandingPages/Rental/sections/Places"; 30 | import Testimonials from "pages/LandingPages/Rental/sections/Testimonials"; 31 | import Faq from "pages/LandingPages/Rental/sections/Faq"; 32 | 33 | // Routes 34 | import routes from "routes"; 35 | import footerRoutes from "footer.routes"; 36 | 37 | // Images 38 | import bgImage from "assets/images/motors.stylemixthemes.com/slider2.jpg"; 39 | 40 | function Rental() { 41 | const brand = iAuto; 42 | return ( 43 | <> 44 | 56 | 61 | `${linearGradient( 62 | rgba(gradients.dark.main, 0.5), 63 | rgba(gradients.dark.state, 0.5) 64 | )}, url(${bgImage})`, 65 | backgroundSize: "cover", 66 | backgroundPosition: "center", 67 | display: "grid", 68 | placeItems: "center", 69 | }} 70 | > 71 | 72 | 80 | 81 | 82 | rgba(white.main, 0.8), 89 | backdropFilter: "saturate(200%) blur(30px)", 90 | boxShadow: ({ boxShadows: { xxl } }) => xxl, 91 | overflow: "hidden", 92 | }} 93 | > 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | ); 103 | } 104 | 105 | export default Rental; 106 | -------------------------------------------------------------------------------- /src/examples/Navbars/DefaultNavbar/DefaultNavbarDropdown.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // prop-types is a library for typechecking of props 17 | import PropTypes from "prop-types"; 18 | 19 | // react-router-dom components 20 | import {Link} from "react-router-dom"; 21 | 22 | // @mui material components 23 | import Collapse from "@mui/material/Collapse"; 24 | import Icon from "@mui/material/Icon"; 25 | 26 | // Material Kit 2 PRO React components 27 | import MKBox from "components/MKBox"; 28 | import MKTypography from "components/MKTypography"; 29 | 30 | function DefaultNavbarDropdown({ 31 | name, 32 | icon, 33 | children, 34 | collapseStatus, 35 | light, 36 | href, 37 | route, 38 | collapse, 39 | ...rest 40 | }) { 41 | const linkComponent = { 42 | component: "a", 43 | href, 44 | target: "_blank", 45 | rel: "noreferrer", 46 | }; 47 | 48 | const routeComponent = { 49 | component: Link, 50 | to: route, 51 | }; 52 | 53 | return ( 54 | <> 55 | 67 | 73 | {icon} 74 | 75 | 82 | {name} 83 | 84 | 85 | 86 | {collapse && "keyboard_arrow_down"} 87 | 88 | 89 | 90 | {children && ( 91 | 92 | {children} 93 | 94 | )} 95 | 96 | ); 97 | } 98 | 99 | // Setting default values for the props of DefaultNavbarDropdown 100 | DefaultNavbarDropdown.defaultProps = { 101 | children: false, 102 | collapseStatus: false, 103 | light: false, 104 | href: "", 105 | route: "", 106 | }; 107 | 108 | // Typechecking props for the DefaultNavbarDropdown 109 | DefaultNavbarDropdown.propTypes = { 110 | name: PropTypes.string.isRequired, 111 | icon: PropTypes.node.isRequired, 112 | children: PropTypes.node, 113 | collapseStatus: PropTypes.bool, 114 | light: PropTypes.bool, 115 | href: PropTypes.string, 116 | route: PropTypes.string, 117 | collapse: PropTypes.bool.isRequired, 118 | }; 119 | 120 | export default DefaultNavbarDropdown; 121 | -------------------------------------------------------------------------------- /src/assets/theme/base/boxShadows.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | /** 17 | * The base box-shadow styles for the Material Kit 2 PRO React. 18 | * You can add new box-shadow using this file. 19 | * You can customized the box-shadow for the entire Material Kit 2 PRO React using thie file. 20 | */ 21 | 22 | // Material Kit 2 PRO React Base Styles 23 | import colors from "assets/theme/base/colors"; 24 | 25 | // Material Kit 2 PRO React Helper Functions 26 | import boxShadow from "assets/theme/functions/boxShadow"; 27 | 28 | const { black, white, tabs, coloredShadows } = colors; 29 | 30 | export default { 31 | xs: boxShadow([0, 2], [9, -5], black.main, 0.15), 32 | sm: boxShadow([0, 5], [10, 0], black.main, 0.12), 33 | md: `${boxShadow([0, 4], [6, -1], black.main, 0.1)}, ${boxShadow( 34 | [0, 2], 35 | [4, -1], 36 | black.main, 37 | 0.06 38 | )}`, 39 | lg: `${boxShadow([0, 10], [15, -3], black.main, 0.1)}, ${boxShadow( 40 | [0, 4], 41 | [6, -2], 42 | black.main, 43 | 0.05 44 | )}`, 45 | xl: `${boxShadow([0, 20], [25, -5], black.main, 0.1)}, ${boxShadow( 46 | [0, 10], 47 | [10, -5], 48 | black.main, 49 | 0.04 50 | )}`, 51 | xxl: boxShadow([0, 20], [27, 0], black.main, 0.05), 52 | inset: boxShadow([0, 1], [2, 0], black.main, 0.075, "inset"), 53 | colored: { 54 | primary: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow( 55 | [0, 7], 56 | [10, -5], 57 | coloredShadows.primary, 58 | 0.4 59 | )}`, 60 | secondary: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow( 61 | [0, 7], 62 | [10, -5], 63 | coloredShadows.secondary, 64 | 0.4 65 | )}`, 66 | info: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow( 67 | [0, 7], 68 | [10, -5], 69 | coloredShadows.info, 70 | 0.4 71 | )}`, 72 | success: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow( 73 | [0, 7], 74 | [10, -5], 75 | coloredShadows.success, 76 | 0.4 77 | )}`, 78 | warning: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow( 79 | [0, 7], 80 | [10, -5], 81 | coloredShadows.warning, 82 | 0.4 83 | )}`, 84 | error: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow( 85 | [0, 7], 86 | [10, -5], 87 | coloredShadows.error, 88 | 0.4 89 | )}`, 90 | light: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow( 91 | [0, 7], 92 | [10, -5], 93 | coloredShadows.light, 94 | 0.4 95 | )}`, 96 | dark: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow( 97 | [0, 7], 98 | [10, -5], 99 | coloredShadows.dark, 100 | 0.4 101 | )}`, 102 | white: `${boxShadow([0, 4], [20, 0], white.main, 0.14)}, ${boxShadow( 103 | [0, 7], 104 | [10, -5], 105 | white.main, 106 | 0.4 107 | )}`, 108 | }, 109 | 110 | sliderBoxShadow: { 111 | thumb: boxShadow([0, 1], [13, 0], black.main, 0.2), 112 | }, 113 | tabsBoxShadow: { 114 | indicator: boxShadow([0, 1], [5, 1], tabs.indicator.boxShadow, 1), 115 | }, 116 | }; 117 | -------------------------------------------------------------------------------- /src/components/MKBox/MKBoxRoot.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // @mui material components 17 | import Box from "@mui/material/Box"; 18 | import {styled} from "@mui/material/styles"; 19 | 20 | export default styled(Box)(({ theme, ownerState }) => { 21 | const { palette, functions, borders, boxShadows } = theme; 22 | const { variant, bgColor, color, opacity, borderRadius, shadow, coloredShadow } = ownerState; 23 | 24 | const { gradients, grey, white } = palette; 25 | const { linearGradient } = functions; 26 | const { borderRadius: radius } = borders; 27 | const { colored } = boxShadows; 28 | 29 | const greyColors = { 30 | "grey-100": grey[100], 31 | "grey-200": grey[200], 32 | "grey-300": grey[300], 33 | "grey-400": grey[400], 34 | "grey-500": grey[500], 35 | "grey-600": grey[600], 36 | "grey-700": grey[700], 37 | "grey-800": grey[800], 38 | "grey-900": grey[900], 39 | }; 40 | 41 | const validGradients = [ 42 | "primary", 43 | "secondary", 44 | "info", 45 | "success", 46 | "warning", 47 | "error", 48 | "dark", 49 | "light", 50 | ]; 51 | 52 | const validColors = [ 53 | "transparent", 54 | "white", 55 | "black", 56 | "primary", 57 | "secondary", 58 | "info", 59 | "success", 60 | "warning", 61 | "error", 62 | "light", 63 | "dark", 64 | "text", 65 | "grey-100", 66 | "grey-200", 67 | "grey-300", 68 | "grey-400", 69 | "grey-500", 70 | "grey-600", 71 | "grey-700", 72 | "grey-800", 73 | "grey-900", 74 | ]; 75 | 76 | const validBorderRadius = ["xs", "sm", "md", "lg", "xl", "xxl", "section"]; 77 | const validBoxShadows = ["xs", "sm", "md", "lg", "xl", "xxl", "inset"]; 78 | 79 | // background value 80 | let backgroundValue = bgColor; 81 | 82 | if (variant === "gradient") { 83 | backgroundValue = validGradients.find((el) => el === bgColor) 84 | ? linearGradient(gradients[bgColor].main, gradients[bgColor].state) 85 | : white.main; 86 | } else if (validColors.find((el) => el === bgColor)) { 87 | backgroundValue = palette[bgColor] ? palette[bgColor].main : greyColors[bgColor]; 88 | } else { 89 | backgroundValue = bgColor; 90 | } 91 | 92 | // color value 93 | let colorValue = color; 94 | 95 | if (validColors.find((el) => el === color)) { 96 | colorValue = palette[color] ? palette[color].main : greyColors[color]; 97 | } 98 | 99 | // borderRadius value 100 | let borderRadiusValue = borderRadius; 101 | 102 | if (validBorderRadius.find((el) => el === borderRadius)) { 103 | borderRadiusValue = radius[borderRadius]; 104 | } 105 | 106 | // boxShadow value 107 | let boxShadowValue = "none"; 108 | 109 | if (validBoxShadows.find((el) => el === shadow)) { 110 | boxShadowValue = boxShadows[shadow]; 111 | } else if (coloredShadow) { 112 | boxShadowValue = colored[coloredShadow] ? colored[coloredShadow] : "none"; 113 | } 114 | 115 | return { 116 | opacity, 117 | background: backgroundValue, 118 | color: colorValue, 119 | borderRadius: borderRadiusValue, 120 | boxShadow: boxShadowValue, 121 | }; 122 | }); 123 | -------------------------------------------------------------------------------- /src/assets/images/logos/small-logos/logo-github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | logo-github 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/assets/images/logos/gray-logos/logo-nasa.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Logos 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/assets/images/logos/medium-logos/logo-nasa.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Logos 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/assets/images/logos/white-logos/logo-nasa-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Logos 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/pages/LandingPages/Rental/sections/Testimonials.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // @mui material components 17 | import Container from "@mui/material/Container"; 18 | import Grid from "@mui/material/Grid"; 19 | 20 | // Material Kit 2 PRO React components 21 | import MKBox from "components/MKBox"; 22 | import MKTypography from "components/MKTypography"; 23 | import MKBadge from "components/MKBadge"; 24 | 25 | // Material Kit 2 PRO React components 26 | import SimpleReviewCard from "examples/Cards/ReviewCards/SimpleReviewCard"; 27 | 28 | // Images 29 | import bgPattern from "assets/images/shapes/pattern-lines.svg"; 30 | import team2 from "assets/images/team-2.jpg"; 31 | import team3 from "assets/images/team-3.jpg"; 32 | import team4 from "assets/images/team-4.jpg"; 33 | 34 | function Testimonials() { 35 | return ( 36 | 37 | 48 | 49 | 54 | 55 | 63 | 64 | Some thoughts from our clients 65 | 66 | 67 | If you're selected for them you'll also get three tickets, opportunity to 68 | access Investor Office Hours and Mentor Hours and much more all for free. 69 | 70 | 71 | 72 | 73 | 74 | 80 | 81 | 82 | 88 | 89 | 90 | 96 | 97 | 98 | 99 | 100 | ); 101 | } 102 | 103 | export default Testimonials; 104 | -------------------------------------------------------------------------------- /src/examples/Footers/SimpleFooter/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // prop-types is a library for typechecking of props 17 | import PropTypes from "prop-types"; 18 | 19 | // @mui material components 20 | import Container from "@mui/material/Container"; 21 | import Link from "@mui/material/Link"; 22 | import Icon from "@mui/material/Icon"; 23 | 24 | // Material Kit 2 PRO React components 25 | import MKBox from "components/MKBox"; 26 | import MKTypography from "components/MKTypography"; 27 | 28 | // Material Kit 2 PRO React base styles 29 | import typography from "assets/theme/base/typography"; 30 | 31 | function SimpleFooter({ company, links, light }) { 32 | const { href, name } = company; 33 | const { size } = typography; 34 | 35 | const renderLinks = () => 36 | links.map((link, key) => ( 37 | 44 | 45 | 46 | {link.name} 47 | 48 | 49 | 50 | )); 51 | 52 | return ( 53 | 54 | 61 | 69 | © {new Date().getFullYear()}, made with 70 | 71 | 72 | favorite 73 | 74 | 75 | by 76 | 77 | 78 |  {name}  79 | 80 | 81 | for a better web. 82 | 83 | ({ 86 | display: "flex", 87 | flexWrap: "wrap", 88 | alignItems: "center", 89 | justifyContent: "center", 90 | listStyle: "none", 91 | mt: 3, 92 | mb: 0, 93 | p: 0, 94 | 95 | [breakpoints.up("lg")]: { 96 | mt: 0, 97 | }, 98 | })} 99 | > 100 | {renderLinks()} 101 | 102 | 103 | 104 | ); 105 | } 106 | 107 | // Setting default values for the props of SimpleFooter 108 | SimpleFooter.defaultProps = { 109 | company: { href: "https://www.creative-tim.com/", name: "Creative Tim" }, 110 | links: [ 111 | { href: "https://www.creative-tim.com/", name: "Creative Tim" }, 112 | { href: "https://www.creative-tim.com/presentation", name: "About Us" }, 113 | { href: "https://www.creative-tim.com/blog", name: "Blog" }, 114 | { href: "https://www.creative-tim.com/license", name: "License" }, 115 | ], 116 | light: false, 117 | }; 118 | 119 | // Typechecking props for the SimpleFooter 120 | SimpleFooter.propTypes = { 121 | company: PropTypes.objectOf(PropTypes.string), 122 | links: PropTypes.arrayOf(PropTypes.object), 123 | light: PropTypes.bool, 124 | }; 125 | 126 | export default SimpleFooter; 127 | -------------------------------------------------------------------------------- /src/examples/Footers/DefaultFooter/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================= 3 | * Material Kit 2 PRO React - v2.0.0 4 | ========================================================= 5 | 6 | * Product Page: https://www.creative-tim.com/product/material-kit-pro-react 7 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | 9 | Coded by www.creative-tim.com 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | */ 15 | 16 | // react-router-dom components 17 | import {Link} from "react-router-dom"; 18 | 19 | // prop-types is a library for typechecking of props. 20 | import PropTypes from "prop-types"; 21 | 22 | // @mui material components 23 | import Container from "@mui/material/Container"; 24 | import Grid from "@mui/material/Grid"; 25 | 26 | // Material Kit 2 PRO React components 27 | import MKBox from "components/MKBox"; 28 | import MKTypography from "components/MKTypography"; 29 | 30 | function DefaultFooter({ content }) { 31 | const { brand, socials, menus, copyright } = content; 32 | 33 | return ( 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | {brand.name} 43 | 44 | 45 | {socials.map(({ icon, link }, key) => ( 46 | 57 | {icon} 58 | 59 | ))} 60 | 61 | 62 | {menus.map(({ name: title, items }) => ( 63 | 64 | 71 | {title} 72 | 73 | 74 | {items.map(({ name, route, href }) => ( 75 | 76 | {href ? ( 77 | 86 | {name} 87 | 88 | ) : ( 89 | 96 | {name} 97 | 98 | )} 99 | 100 | ))} 101 | 102 | 103 | ))} 104 | 105 | {copyright} 106 | 107 | 108 | 109 | 110 | ); 111 | } 112 | 113 | // Typechecking props for the DefaultFooter 114 | DefaultFooter.propTypes = { 115 | content: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.object, PropTypes.array])).isRequired, 116 | }; 117 | 118 | export default DefaultFooter; 119 | --------------------------------------------------------------------------------