13 | {children}
14 |
15 | );
16 | }
17 |
18 | Danger.propTypes = {
19 | classes: PropTypes.object.isRequired
20 | };
21 |
22 | export default withStyles(typographyStyle)(Danger);
23 |
--------------------------------------------------------------------------------
/src/components/Typography/Info.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | // nodejs library to set properties for components
3 | import PropTypes from "prop-types";
4 | // @material-ui/core components
5 | import withStyles from "@material-ui/core/styles/withStyles";
6 | // core components
7 | import typographyStyle from "assets/jss/material-kit-react/components/typographyStyle.jsx";
8 |
9 | function Info({ ...props }) {
10 | const { classes, children } = props;
11 | return (
12 |
13 | {children}
14 |
15 | );
16 | }
17 |
18 | Info.propTypes = {
19 | classes: PropTypes.object.isRequired
20 | };
21 |
22 | export default withStyles(typographyStyle)(Info);
23 |
--------------------------------------------------------------------------------
/src/components/Typography/Muted.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | // nodejs library to set properties for components
3 | import PropTypes from "prop-types";
4 | // @material-ui/core components
5 | import withStyles from "@material-ui/core/styles/withStyles";
6 | // core components
7 | import typographyStyle from "assets/jss/material-kit-react/components/typographyStyle.jsx";
8 |
9 | function Muted({ ...props }) {
10 | const { classes, children } = props;
11 | return (
12 |
13 | {children}
14 |
15 | );
16 | }
17 |
18 | Muted.propTypes = {
19 | classes: PropTypes.object.isRequired
20 | };
21 |
22 | export default withStyles(typographyStyle)(Muted);
23 |
--------------------------------------------------------------------------------
/src/components/Typography/Primary.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | // nodejs library to set properties for components
3 | import PropTypes from "prop-types";
4 | // @material-ui/core components
5 | import withStyles from "@material-ui/core/styles/withStyles";
6 | // core components
7 | import typographyStyle from "assets/jss/material-kit-react/components/typographyStyle.jsx";
8 |
9 | function Primary({ ...props }) {
10 | const { classes, children } = props;
11 | return (
12 |
13 | {children}
14 |
15 | );
16 | }
17 |
18 | Primary.propTypes = {
19 | classes: PropTypes.object.isRequired
20 | };
21 |
22 | export default withStyles(typographyStyle)(Primary);
23 |
--------------------------------------------------------------------------------
/src/components/Typography/Quote.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | // nodejs library to set properties for components
3 | import PropTypes from "prop-types";
4 | // @material-ui/core components
5 | import withStyles from "@material-ui/core/styles/withStyles";
6 | // core components
7 | import typographyStyle from "assets/jss/material-kit-react/components/typographyStyle.jsx";
8 |
9 | function Quote({ ...props }) {
10 | const { classes, text, author } = props;
11 | return (
12 | 13 |16 | ); 17 | } 18 | 19 | Quote.propTypes = { 20 | classes: PropTypes.object.isRequired, 21 | text: PropTypes.node, 22 | author: PropTypes.node 23 | }; 24 | 25 | export default withStyles(typographyStyle)(Quote); 26 | -------------------------------------------------------------------------------- /src/components/Typography/Small.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | // nodejs library to set properties for components 3 | import PropTypes from "prop-types"; 4 | // @material-ui/core components 5 | import withStyles from "@material-ui/core/styles/withStyles"; 6 | // core components 7 | import typographyStyle from "assets/jss/material-kit-react/components/typographyStyle.jsx"; 8 | 9 | function Small({ ...props }) { 10 | const { classes, children } = props; 11 | return ( 12 |{text}
14 | {author} 15 |
13 | {children}
14 |
15 | );
16 | }
17 |
18 | Small.propTypes = {
19 | classes: PropTypes.object.isRequired
20 | };
21 |
22 | export default withStyles(typographyStyle)(Small);
23 |
--------------------------------------------------------------------------------
/src/components/Typography/Success.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | // nodejs library to set properties for components
3 | import PropTypes from "prop-types";
4 | // @material-ui/core components
5 | import withStyles from "@material-ui/core/styles/withStyles";
6 | // core components
7 | import typographyStyle from "assets/jss/material-kit-react/components/typographyStyle.jsx";
8 |
9 | function Success({ ...props }) {
10 | const { classes, children } = props;
11 | return (
12 |
13 | {children}
14 |
15 | );
16 | }
17 |
18 | Success.propTypes = {
19 | classes: PropTypes.object.isRequired
20 | };
21 |
22 | export default withStyles(typographyStyle)(Success);
23 |
--------------------------------------------------------------------------------
/src/components/Typography/Warning.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | // nodejs library to set properties for components
3 | import PropTypes from "prop-types";
4 | // @material-ui/core components
5 | import withStyles from "@material-ui/core/styles/withStyles";
6 | // core components
7 | import typographyStyle from "assets/jss/material-kit-react/components/typographyStyle.jsx";
8 |
9 | function Warning({ ...props }) {
10 | const { classes, children } = props;
11 | return (
12 |
13 | {children}
14 |
15 | );
16 | }
17 |
18 | Warning.propTypes = {
19 | classes: PropTypes.object.isRequired
20 | };
21 |
22 | export default withStyles(typographyStyle)(Warning);
23 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import { createBrowserHistory } from "history";
4 | import { Router, Route, Switch } from "react-router-dom";
5 | import jwtDecode from "jwt-decode";
6 | import { Provider } from "react-redux";
7 | import store from "./store";
8 | import { login } from "./store/actions";
9 | import Cookies from "./utils/Cookies";
10 |
11 | import "./assets/scss/material-kit-react.scss?v=1.4.0";
12 |
13 | // pages for this product
14 | import Components from "views/Components/Components.jsx";
15 | import LandingPage from "views/LandingPage/LandingPage.jsx";
16 | import ProfilePage from "views/ProfilePage/ProfilePage.jsx";
17 | import LoginPage from "views/LoginPage/LoginPage.jsx";
18 |
19 | var hist = createBrowserHistory();
20 |
21 | const token = Cookies.read("token");
22 |
23 | if (token) {
24 | const user = jwtDecode(token);
25 |
26 | store.dispatch(login(user));
27 | }
28 |
29 | ReactDOM.render(
30 |
38 |
50 |
63 |
64 |
87 | );
88 | }
89 | }
90 |
91 | export default withStyles(componentsStyle)(Components);
92 |
--------------------------------------------------------------------------------
/src/views/Components/Sections/SectionCarousel.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | // react component for creating beautiful carousel
3 | import Carousel from "react-slick";
4 | // @material-ui/core components
5 | import withStyles from "@material-ui/core/styles/withStyles";
6 | // @material-ui/icons
7 | import LocationOn from "@material-ui/icons/LocationOn";
8 | // core components
9 | import GridContainer from "components/Grid/GridContainer.jsx";
10 | import GridItem from "components/Grid/GridItem.jsx";
11 | import Card from "components/Card/Card.jsx";
12 | import carouselStyle from "assets/jss/material-kit-react/views/componentsSections/carouselStyle.jsx";
13 | import image1 from "assets/img/bg.jpg";
14 | import image2 from "assets/img/bg2.jpg";
15 | import image3 from "assets/img/bg3.jpg";
16 |
17 | class SectionCarousel extends React.Component {
18 | render() {
19 | const { classes } = this.props;
20 | const settings = {
21 | dots: true,
22 | infinite: true,
23 | speed: 500,
24 | slidesToShow: 1,
25 | slidesToScroll: 1,
26 | autoplay: false
27 | };
28 | return (
29 |
51 |
52 |
53 |
60 |
61 |
62 |
54 |
59 | Material Kit React.
55 |56 | A Badass Material-UI Kit based on Material Design. 57 |
58 |
65 |
76 |
77 |
80 |
81 |
82 |
85 |
86 |
30 |
80 | );
81 | }
82 | }
83 |
84 | export default withStyles(carouselStyle)(SectionCarousel);
85 |
--------------------------------------------------------------------------------
/src/views/Components/Sections/SectionCompletedExamples.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | // @material-ui/core components
3 | import withStyles from "@material-ui/core/styles/withStyles";
4 | // @material-ui/icons
5 |
6 | // core components
7 | import GridContainer from "components/Grid/GridContainer.jsx";
8 | import GridItem from "components/Grid/GridItem.jsx";
9 |
10 | import completedStyle from "assets/jss/material-kit-react/views/componentsSections/completedStyle.jsx";
11 |
12 | class SectionCompletedExamples extends React.Component {
13 | render() {
14 | const { classes } = this.props;
15 | return (
16 |
31 |
32 |
33 |
34 |
35 |
75 |
76 |
77 |
78 |
79 |
36 | 
41 |
48 |
42 |
43 |
46 |
47 |
43 |
46 |
49 | 
54 |
61 |
55 |
56 |
59 |
60 |
56 |
59 |
62 | 
67 |
74 |
68 |
69 |
72 |
73 |
69 |
72 |
17 |
31 | );
32 | }
33 | }
34 |
35 | export default withStyles(completedStyle)(SectionCompletedExamples);
36 |
--------------------------------------------------------------------------------
/src/views/Components/Sections/SectionDownload.jsx:
--------------------------------------------------------------------------------
1 | /*eslint-disable*/
2 | import React from "react";
3 |
4 | // @material-ui/core components
5 | import withStyles from "@material-ui/core/styles/withStyles";
6 | // @material-ui/icons
7 | import GridContainer from "components/Grid/GridContainer.jsx";
8 | import GridItem from "components/Grid/GridItem.jsx";
9 | import Button from "components/CustomButtons/Button.jsx";
10 | // core components
11 | import downloadStyle from "assets/jss/material-kit-react/views/componentsSections/downloadStyle.jsx";
12 |
13 | class SectionDownload extends React.Component {
14 | render() {
15 | const { classes } = this.props;
16 | return (
17 |
18 |
19 |
20 |
28 |
29 |
30 | Completed with examples
21 |22 | The kit comes with three pre-built pages to help you get started 23 | faster. You can change the text and images and you're good to 24 | go. More importantly, looking at them will give you a picture of 25 | what you can build with this powerful kit. 26 |
27 |
18 |
106 | );
107 | }
108 | }
109 |
110 | export default withStyles(downloadStyle)(SectionDownload);
111 |
--------------------------------------------------------------------------------
/src/views/Components/Sections/SectionExamples.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | // react components for routing our app without refresh
3 | import { Link } from "react-router-dom";
4 | // @material-ui/core components
5 | import withStyles from "@material-ui/core/styles/withStyles";
6 | // @material-ui/icons
7 |
8 | // core components
9 | import GridContainer from "components/Grid/GridContainer.jsx";
10 | import GridItem from "components/Grid/GridItem.jsx";
11 | import Button from "components/CustomButtons/Button.jsx";
12 | import exampleStyle from "assets/jss/material-kit-react/views/componentsSections/exampleStyle.jsx";
13 |
14 | import landing from "assets/img/landing.jpg";
15 | import profile from "assets/img/profile.jpg";
16 |
17 | class SectionExamples extends React.Component {
18 | render() {
19 | const { classes } = this.props;
20 | return (
21 |
19 |
20 |
21 |
29 |
30 |
38 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
66 |
67 |
75 |
83 |
84 |
85 |
105 | Do you love this UI Kit?
22 |23 | Cause if you do, it can be yours for FREE. Hit the buttons below 24 | to navigate to our website where you can find the kit. We also 25 | have the Bootstrap 4 version on plain HTML. Start a new project 26 | or give an old Bootstrap project a new look! 27 |
28 |49 |
50 |
Want more?
53 |54 | We've launched{" "} 55 | 59 | Material Kit PRO React{" "} 60 | 61 | .It has a huge number of components, sections and example pages. 62 | Start Your Development With A Badass Material-UI nspired by 63 | Material Design. 64 |
65 |
86 |
87 |
89 |
92 |
96 |
100 |
103 |
104 | Thank you for supporting us!
88 |
22 |
63 | );
64 | }
65 | }
66 |
67 | export default withStyles(exampleStyle)(SectionExamples);
68 |
--------------------------------------------------------------------------------
/src/views/Components/Sections/SectionLogin.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | // @material-ui/core components
3 | import withStyles from "@material-ui/core/styles/withStyles";
4 | import InputAdornment from "@material-ui/core/InputAdornment";
5 | import Icon from "@material-ui/core/Icon";
6 | // @material-ui/icons
7 | import People from "@material-ui/icons/People";
8 | import Email from "@material-ui/icons/Email";
9 | // core components
10 | import GridContainer from "components/Grid/GridContainer.jsx";
11 | import GridItem from "components/Grid/GridItem.jsx";
12 | import Card from "components/Card/Card.jsx";
13 | import CardHeader from "components/Card/CardHeader.jsx";
14 | import CardBody from "components/Card/CardBody.jsx";
15 | import CardFooter from "components/Card/CardFooter.jsx";
16 | import Button from "components/CustomButtons/Button.jsx";
17 | import CustomInput from "components/CustomInput/CustomInput.jsx";
18 |
19 | import loginStyle from "assets/jss/material-kit-react/views/componentsSections/loginStyle.jsx";
20 |
21 | class SectionLogin extends React.Component {
22 | render() {
23 | const { classes } = this.props;
24 | return (
25 |
23 |
24 |
25 |
26 | 
37 |
40 |
41 |
42 |
43 |
44 | 
55 |
58 |
59 |
60 |
61 |
62 |
26 |
132 | );
133 | }
134 | }
135 |
136 | export default withStyles(loginStyle)(SectionLogin);
137 |
--------------------------------------------------------------------------------
/src/views/Components/Sections/SectionNotifications.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | // @material-ui/core components
4 | import withStyles from "@material-ui/core/styles/withStyles";
5 | // @material-ui/icons
6 | import Check from "@material-ui/icons/Check";
7 | import Warning from "@material-ui/icons/Warning";
8 | // core components
9 | import SnackbarContent from "components/Snackbar/SnackbarContent.jsx";
10 | import Clearfix from "components/Clearfix/Clearfix.jsx";
11 | import notificationsStyles from "assets/jss/material-kit-react/views/componentsSections/notificationsStyles.jsx";
12 |
13 | class SectionNotifications extends React.Component {
14 | render() {
15 | const { classes } = this.props;
16 | return (
17 |
27 |
28 |
29 |
30 |
127 |
128 |
129 |
130 |
131 |
18 |
26 | INFO ALERT: You've got some friends nearby, stop looking at
27 | your phone and find them...
28 |
29 | }
30 | close
31 | color="info"
32 | icon="info_outline"
33 | />
34 |
37 | SUCCESS ALERT: You've got some friends nearby, stop looking
38 | at your phone and find them...
39 |
40 | }
41 | close
42 | color="success"
43 | icon={Check}
44 | />
45 |
48 | WARNING ALERT: You've got some friends nearby, stop looking
49 | at your phone and find them...
50 |
51 | }
52 | close
53 | color="warning"
54 | icon={Warning}
55 | />
56 |
59 | DANGER ALERT: You've got some friends nearby, stop looking
60 | at your phone and find them...
61 |
62 | }
63 | close
64 | color="danger"
65 | icon="info_outline"
66 | />
67 |
69 | );
70 | }
71 | }
72 |
73 | export default withStyles(notificationsStyles)(SectionNotifications);
74 |
--------------------------------------------------------------------------------
/src/views/LandingPage/LandingPage.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | // nodejs library that concatenates classes
3 | import classNames from "classnames";
4 | // @material-ui/core components
5 | import withStyles from "@material-ui/core/styles/withStyles";
6 |
7 | // @material-ui/icons
8 |
9 | // core components
10 | import Header from "components/Header/Header.jsx";
11 | import Footer from "components/Footer/Footer.jsx";
12 | import GridContainer from "components/Grid/GridContainer.jsx";
13 | import GridItem from "components/Grid/GridItem.jsx";
14 | import Button from "components/CustomButtons/Button.jsx";
15 | import HeaderLinks from "components/Header/HeaderLinks.jsx";
16 | import Parallax from "components/Parallax/Parallax.jsx";
17 |
18 | import landingPageStyle from "assets/jss/material-kit-react/views/landingPage.jsx";
19 |
20 | // Sections for this page
21 | import ProductSection from "./Sections/ProductSection.jsx";
22 | import TeamSection from "./Sections/TeamSection.jsx";
23 | import WorkSection from "./Sections/WorkSection.jsx";
24 |
25 | const dashboardRoutes = [];
26 |
27 | class LandingPage extends React.Component {
28 | render() {
29 | const { classes, ...rest } = this.props;
30 | return (
31 |
19 |
23 |
20 |
22 | Notifications
21 |
32 |
45 |
68 |
77 | );
78 | }
79 | }
80 |
81 | export default withStyles(landingPageStyle)(LandingPage);
82 |
--------------------------------------------------------------------------------
/src/views/LandingPage/Sections/ProductSection.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | // @material-ui/core components
3 | import withStyles from "@material-ui/core/styles/withStyles";
4 |
5 | // @material-ui/icons
6 | import Chat from "@material-ui/icons/Chat";
7 | import VerifiedUser from "@material-ui/icons/VerifiedUser";
8 | import Fingerprint from "@material-ui/icons/Fingerprint";
9 | // core components
10 | import GridContainer from "components/Grid/GridContainer.jsx";
11 | import GridItem from "components/Grid/GridItem.jsx";
12 | import InfoArea from "components/InfoArea/InfoArea.jsx";
13 |
14 | import productStyle from "assets/jss/material-kit-react/views/landingPageSections/productStyle.jsx";
15 |
16 | class ProductSection extends React.Component {
17 | render() {
18 | const { classes } = this.props;
19 | return (
20 |
46 |
47 |
48 |
50 | Crafted by Creative-Tim, enhanced by AppSeed.
51 |
54 |
55 | 64 |
65 |
66 |
67 | Material Kit React
49 |
50 | Crafted by Creative-Tim, enhanced by AppSeed.
51 |
52 | Web App released under MIT License.
53 |
54 | 55 | 64 |
69 |
75 |
76 |
70 |
74 |
21 |
22 |
23 |
32 |
33 |
65 | );
66 | }
67 | }
68 |
69 | export default withStyles(productStyle)(ProductSection);
70 |
--------------------------------------------------------------------------------
/src/views/LandingPage/Sections/TeamSection.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | // nodejs library that concatenates classes
3 | import classNames from "classnames";
4 | // @material-ui/core components
5 | import withStyles from "@material-ui/core/styles/withStyles";
6 |
7 | // @material-ui/icons
8 |
9 | // core components
10 | import GridContainer from "components/Grid/GridContainer.jsx";
11 | import GridItem from "components/Grid/GridItem.jsx";
12 | import Button from "components/CustomButtons/Button.jsx";
13 | import Card from "components/Card/Card.jsx";
14 | import CardBody from "components/Card/CardBody.jsx";
15 | import CardFooter from "components/Card/CardFooter.jsx";
16 |
17 | import teamStyle from "assets/jss/material-kit-react/views/landingPageSections/teamStyle.jsx";
18 |
19 | import team1 from "assets/img/faces/avatar.jpg";
20 | import team2 from "assets/img/faces/christian.jpg";
21 | import team3 from "assets/img/faces/kendall.jpg";
22 |
23 | class TeamSection extends React.Component {
24 | render() {
25 | const { classes } = this.props;
26 | const imageClasses = classNames(
27 | classes.imgRaised,
28 | classes.imgRoundedCircle,
29 | classes.imgFluid
30 | );
31 | return (
32 | Let's talk product
24 |25 | This is the paragraph where you can write more details about your 26 | product. Keep you user engaged by providing meaningful 27 | information. Remember that by this time, the user is curious, 28 | otherwise he wouldn't scroll to get here. Add a button if you want 29 | the user to see more. 30 |
31 |
34 |
35 |
36 |
44 |
45 |
53 |
54 |
62 |
63 |
64 |
33 |
161 | );
162 | }
163 | }
164 |
165 | export default withStyles(teamStyle)(TeamSection);
166 |
--------------------------------------------------------------------------------
/src/views/LandingPage/Sections/WorkSection.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | // @material-ui/core components
3 | import withStyles from "@material-ui/core/styles/withStyles";
4 |
5 | // @material-ui/icons
6 |
7 | // core components
8 | import GridContainer from "components/Grid/GridContainer.jsx";
9 | import GridItem from "components/Grid/GridItem.jsx";
10 | import CustomInput from "components/CustomInput/CustomInput.jsx";
11 | import Button from "components/CustomButtons/Button.jsx";
12 |
13 | import workStyle from "assets/jss/material-kit-react/views/landingPageSections/workStyle.jsx";
14 |
15 | class WorkSection extends React.Component {
16 | render() {
17 | const { classes } = this.props;
18 | return (
19 | Here is our team
34 |
35 |
36 |
37 |
38 |
39 | 
40 |
41 |
42 | Gigi Hadid
43 |
46 |
47 |
54 |
55 |
62 |
69 |
76 |
77 |
78 |
79 |
80 |
81 |
82 | 
83 |
84 |
85 | Christian Louboutin
86 |
89 |
90 |
97 |
98 |
105 |
112 |
113 |
114 |
115 |
116 |
117 |
118 | 
119 |
120 |
121 | Kendall Jenner
122 |
125 |
126 |
133 |
134 |
141 |
148 |
155 |
156 |
157 |
158 |
159 |
160 |
42 | Gigi Hadid
43 |
44 | Model
45 |
46 | 48 | You can write here details about one of your team members. 49 | You can give more details about what they do. Feel free to 50 | add some links for people to be able to 51 | follow them outside the site. 52 |
53 |
85 | Christian Louboutin
86 |
87 | Designer
88 |
89 | 91 | You can write here details about one of your team members. 92 | You can give more details about what they do. Feel free to 93 | add some links for people to be able to 94 | follow them outside the site. 95 |
96 |
121 | Kendall Jenner
122 |
123 | Model
124 |
125 | 127 | You can write here details about one of your team members. 128 | You can give more details about what they do. Feel free to 129 | add some links for people to be able to 130 | follow them outside the site. 131 |
132 |
20 |
21 |
22 |
74 |
75 |
76 | );
77 | }
78 | }
79 |
80 | export default withStyles(workStyle)(WorkSection);
81 |
--------------------------------------------------------------------------------