@@ -0,0 +1,120 @@ | |||||
import React from "react"; | |||||
// nodejs library that concatenates classes | |||||
import classNames from "classnames"; | |||||
// nodejs library to set properties for components | |||||
import PropTypes from "prop-types"; | |||||
// @material-ui/core components | |||||
import { makeStyles } from "@material-ui/core/styles"; | |||||
import makeStyles from "@material-ui/core/styles/makeStyles"; | |||||
import Button from "@material-ui/core/Button"; | |||||
// @material-ui/icons | |||||
// core components | |||||
import Cardstyles from "assets/jss/nextjs-material-kit/components/cardStyle.js"; | |||||
import CardBodystyles from "assets/jss/nextjs-material-kit/components/cardBodyStyle.js"; | |||||
import CardFooterstyles from "assets/jss/nextjs-material-kit/components/cardFooterStyle.js"; | |||||
import CardHeaderstyles from "assets/jss/nextjs-material-kit/components/cardHeaderStyle.js"; | |||||
import buttonStyle from "assets/jss/nextjs-material-kit/components/buttonStyle.js"; | |||||
const CarduseStyles = makeStyles(Cardstyles); | |||||
const CardBodyuseStyles = makeStyles(CardBodystyles); | |||||
const CardFooteruseStyles = makeStyles(CardFooterstyles); | |||||
const CardHeaderuseStyles = makeStyles(CardHeaderstyles); | |||||
const makeComponentStyles = makeStyles(() => ({ | |||||
...buttonStyle | |||||
})); | |||||
async function Card(props) { | |||||
const classes = CarduseStyles(); | |||||
const { className, children, plain, carousel, ...rest } = props; | |||||
const cardClasses = classNames({ | |||||
[classes.card]: true, | |||||
[classes.cardPlain]: plain, | |||||
[classes.cardCarousel]: carousel, | |||||
[className]: className !== undefined | |||||
}); | |||||
return ( | |||||
<div className={cardClasses} {...rest}> | |||||
{children} | |||||
</div> | |||||
); | |||||
} | |||||
async function CardBody(props) { | |||||
const classes = CardBodyuseStyles(); | |||||
const { className, children, ...rest } = props; | |||||
const cardBodyClasses = classNames({ | |||||
[classes.cardBody]: true, | |||||
[className]: className !== undefined | |||||
}); | |||||
return ( | |||||
<div className={cardBodyClasses} {...rest}> | |||||
{children} | |||||
</div> | |||||
); | |||||
} | |||||
async function CardFooter(props) { | |||||
const classes = CardFooteruseStyles(); | |||||
const { className, children, ...rest } = props; | |||||
const cardFooterClasses = classNames({ | |||||
[classes.cardFooter]: true, | |||||
[className]: className !== undefined | |||||
}); | |||||
return ( | |||||
<div className={cardFooterClasses} {...rest}> | |||||
{children} | |||||
</div> | |||||
); | |||||
} | |||||
async function CardHeader(props) { | |||||
const classes = CardHeaderuseStyles(); | |||||
const { className, children, color, plain, ...rest } = props; | |||||
const cardHeaderClasses = classNames({ | |||||
[classes.cardHeader]: true, | |||||
[classes[color + "CardHeader"]]: color, | |||||
[classes.cardHeaderPlain]: plain, | |||||
[className]: className !== undefined | |||||
}); | |||||
return ( | |||||
<div className={cardHeaderClasses} {...rest}> | |||||
{children} | |||||
</div> | |||||
); | |||||
} | |||||
Card.propTypes = { | |||||
className: PropTypes.string, | |||||
plain: PropTypes.bool, | |||||
carousel: PropTypes.bool, | |||||
children: PropTypes.node | |||||
}; | |||||
CardBody.propTypes = { | |||||
className: PropTypes.string, | |||||
children: PropTypes.node | |||||
}; | |||||
CardFooter.propTypes = { | |||||
className: PropTypes.string, | |||||
children: PropTypes.node | |||||
}; | |||||
CardHeader.propTypes = { | |||||
className: PropTypes.string, | |||||
color: PropTypes.oneOf(["warning", "success", "danger", "info", "primary"]), | |||||
plain: PropTypes.bool, | |||||
children: PropTypes.node | |||||
}; | |||||
module.exports = { | |||||
Card: Card, | |||||
CardBody: CardBody, | |||||
CardFooter: CardFooter, | |||||
CardHeader: CardHeader, | |||||
}; |
@@ -1,35 +0,0 @@ | |||||
import React from "react"; | |||||
// nodejs library to set properties for components | |||||
import PropTypes from "prop-types"; | |||||
// @material-ui/core components | |||||
import { makeStyles } from "@material-ui/core/styles"; | |||||
import styles from "assets/jss/nextjs-material-kit/components/badgeStyle.js"; | |||||
const useStyles = makeStyles(styles); | |||||
export default function Badge(props) { | |||||
const classes = useStyles(); | |||||
const { color, children } = props; | |||||
return ( | |||||
<span className={classes.badge + " " + classes[color]}>{children}</span> | |||||
); | |||||
} | |||||
Badge.defaultProps = { | |||||
color: "gray" | |||||
}; | |||||
Badge.propTypes = { | |||||
color: PropTypes.oneOf([ | |||||
"primary", | |||||
"warning", | |||||
"danger", | |||||
"success", | |||||
"info", | |||||
"rose", | |||||
"gray" | |||||
]), | |||||
children: PropTypes.node | |||||
}; |
@@ -1,25 +0,0 @@ | |||||
import React from "react"; | |||||
// mterial-ui components | |||||
import { makeStyles } from "@material-ui/core/styles"; | |||||
const styles = { | |||||
clearfix: { | |||||
"&:after,&:before": { | |||||
display: "table", | |||||
content: '" "' | |||||
}, | |||||
"&:after": { | |||||
clear: "both" | |||||
} | |||||
} | |||||
}; | |||||
const useStyles = makeStyles(styles); | |||||
export default function Clearfix() { | |||||
const classes = useStyles(); | |||||
return <div className={classes.clearfix} />; | |||||
} | |||||
Clearfix.propTypes = {}; |
@@ -1,41 +0,0 @@ | |||||
import React from "react"; | |||||
// nodejs library to set properties for components | |||||
import PropTypes from "prop-types"; | |||||
// @material-ui/core components | |||||
import { makeStyles } from "@material-ui/core/styles"; | |||||
import LinearProgress from "@material-ui/core/LinearProgress"; | |||||
// core components | |||||
import styles from "assets/jss/nextjs-material-kit/components/customLinearProgressStyle.js"; | |||||
const useStyles = makeStyles(styles); | |||||
export default function CustomLinearProgress(props) { | |||||
const classes = useStyles(); | |||||
const { color, ...rest } = props; | |||||
return ( | |||||
<LinearProgress | |||||
{...rest} | |||||
classes={{ | |||||
root: classes.root + " " + classes[color + "Background"], | |||||
bar: classes.bar + " " + classes[color] | |||||
}} | |||||
/> | |||||
); | |||||
} | |||||
CustomLinearProgress.defaultProps = { | |||||
color: "gray" | |||||
}; | |||||
CustomLinearProgress.propTypes = { | |||||
color: PropTypes.oneOf([ | |||||
"primary", | |||||
"warning", | |||||
"danger", | |||||
"success", | |||||
"info", | |||||
"rose", | |||||
"gray" | |||||
]) | |||||
}; |
@@ -1,104 +0,0 @@ | |||||
import React from "react"; | |||||
// nodejs library that concatenates classes | |||||
import classNames from "classnames"; | |||||
// nodejs library to set properties for components | |||||
import PropTypes from "prop-types"; | |||||
// material-ui components | |||||
import { makeStyles } from "@material-ui/core/styles"; | |||||
import Tabs from "@material-ui/core/Tabs"; | |||||
import Tab from "@material-ui/core/Tab"; | |||||
import Icon from "@material-ui/core/Icon"; | |||||
// core components | |||||
import Card from "components/Card/Card.js"; | |||||
import CardBody from "components/Card/CardBody.js"; | |||||
import CardHeader from "components/Card/CardHeader.js"; | |||||
import styles from "assets/jss/nextjs-material-kit/components/customTabsStyle.js"; | |||||
const useStyles = makeStyles(styles); | |||||
export default function CustomTabs(props) { | |||||
const [value, setValue] = React.useState(0); | |||||
const handleChange = (event, value) => { | |||||
setValue(value); | |||||
}; | |||||
const classes = useStyles(); | |||||
const { headerColor, plainTabs, tabs, title, rtlActive } = props; | |||||
const cardTitle = classNames({ | |||||
[classes.cardTitle]: true, | |||||
[classes.cardTitleRTL]: rtlActive | |||||
}); | |||||
return ( | |||||
<Card plain={plainTabs}> | |||||
<CardHeader color={headerColor} plain={plainTabs}> | |||||
{title !== undefined ? <div className={cardTitle}>{title}</div> : null} | |||||
<Tabs | |||||
value={value} | |||||
onChange={handleChange} | |||||
classes={{ | |||||
root: classes.tabsRoot, | |||||
indicator: classes.displayNone | |||||
}} | |||||
> | |||||
{tabs.map((prop, key) => { | |||||
var icon = {}; | |||||
if (prop.tabIcon) { | |||||
icon = { | |||||
icon: | |||||
typeof prop.tabIcon === "string" ? ( | |||||
<Icon>{prop.tabIcon}</Icon> | |||||
) : ( | |||||
<prop.tabIcon /> | |||||
) | |||||
}; | |||||
} | |||||
return ( | |||||
<Tab | |||||
classes={{ | |||||
root: classes.tabRootButton, | |||||
label: classes.tabLabel, | |||||
selected: classes.tabSelected, | |||||
wrapper: classes.tabWrapper | |||||
}} | |||||
key={key} | |||||
label={prop.tabName} | |||||
{...icon} | |||||
/> | |||||
); | |||||
})} | |||||
</Tabs> | |||||
</CardHeader> | |||||
<CardBody> | |||||
{tabs.map((prop, key) => { | |||||
if (key === value) { | |||||
return <div key={key}>{prop.tabContent}</div>; | |||||
} | |||||
return null; | |||||
})} | |||||
</CardBody> | |||||
</Card> | |||||
); | |||||
} | |||||
CustomTabs.propTypes = { | |||||
headerColor: PropTypes.oneOf([ | |||||
"warning", | |||||
"success", | |||||
"danger", | |||||
"info", | |||||
"primary", | |||||
"rose" | |||||
]), | |||||
title: PropTypes.string, | |||||
tabs: PropTypes.arrayOf( | |||||
PropTypes.shape({ | |||||
tabName: PropTypes.string.isRequired, | |||||
tabIcon: PropTypes.object, | |||||
tabContent: PropTypes.node.isRequired | |||||
}) | |||||
), | |||||
rtlActive: PropTypes.bool, | |||||
plainTabs: PropTypes.bool | |||||
}; |
@@ -1,28 +0,0 @@ | |||||
import React from "react"; | |||||
// @material-ui/core components | |||||
import List from "@material-ui/core/List"; | |||||
import ListItem from "@material-ui/core/ListItem"; | |||||
import ListItemText from "@material-ui/core/ListItemText"; | |||||
// @material-ui icons | |||||
// core components | |||||
import Card from "components/Card/Card.js"; | |||||
import CardHeader from "components/Card/CardHeader.js"; | |||||
import cardBlog5 from "assets/img/examples/studio-1.jpg"; | |||||
export default function Motor() { | |||||
return ( | |||||
<Card style={{ width: "20rem" }}> | |||||
<CardHeader color="info">All New Nmax</CardHeader> | |||||
<List component="nav"> | |||||
<ListItem> | |||||
<img | |||||
style={{ height: "180px", width: "100%", display: "block" }} | |||||
src="https://www.yamaha-motor.co.id/uploads/products/2020020510350637523I93808.png" | |||||
alt="Card-img-cap" | |||||
/> | |||||
</ListItem> | |||||
</List> | |||||
</Card> | |||||
); | |||||
} |
@@ -1,9 +1,6 @@ | |||||
import React from "react"; | import React from "react"; | ||||
// @material-ui/core components | |||||
import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
// component | |||||
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | ||||
import Card from "components/Card/Card.js"; | import Card from "components/Card/Card.js"; | ||||
import CardBody from "components/Card/CardBody.js"; | import CardBody from "components/Card/CardBody.js"; | ||||
@@ -1,9 +1,6 @@ | |||||
import React from "react"; | import React from "react"; | ||||
// @material-ui/core components | |||||
import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
// component | |||||
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | ||||
import Card from "components/Card/Card.js"; | import Card from "components/Card/Card.js"; | ||||
import CardBody from "components/Card/CardBody.js"; | import CardBody from "components/Card/CardBody.js"; | ||||
@@ -1,9 +1,6 @@ | |||||
import React from "react"; | import React from "react"; | ||||
// @material-ui/core components | |||||
import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
// component | |||||
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | ||||
import Card from "components/Card/Card.js"; | import Card from "components/Card/Card.js"; | ||||
import CardBody from "components/Card/CardBody.js"; | import CardBody from "components/Card/CardBody.js"; | ||||
@@ -1,9 +1,6 @@ | |||||
import React from "react"; | import React from "react"; | ||||
// @material-ui/core components | |||||
import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
// component | |||||
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | ||||
import Card from "components/Card/Card.js"; | import Card from "components/Card/Card.js"; | ||||
import CardBody from "components/Card/CardBody.js"; | import CardBody from "components/Card/CardBody.js"; | ||||
@@ -1,9 +1,6 @@ | |||||
import React from "react"; | import React from "react"; | ||||
// @material-ui/core components | |||||
import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
// component | |||||
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | ||||
import Card from "components/Card/Card.js"; | import Card from "components/Card/Card.js"; | ||||
import CardBody from "components/Card/CardBody.js"; | import CardBody from "components/Card/CardBody.js"; | ||||
@@ -1,9 +1,6 @@ | |||||
import React from "react"; | import React from "react"; | ||||
// @material-ui/core components | |||||
import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
// component | |||||
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | ||||
import Card from "components/Card/Card.js"; | import Card from "components/Card/Card.js"; | ||||
import CardBody from "components/Card/CardBody.js"; | import CardBody from "components/Card/CardBody.js"; | ||||
@@ -1,9 +1,6 @@ | |||||
import React from "react"; | import React from "react"; | ||||
// @material-ui/core components | |||||
import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
// component | |||||
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | ||||
import Card from "components/Card/Card.js"; | import Card from "components/Card/Card.js"; | ||||
import CardBody from "components/Card/CardBody.js"; | import CardBody from "components/Card/CardBody.js"; | ||||
@@ -1,9 +1,6 @@ | |||||
import React from "react"; | import React from "react"; | ||||
// @material-ui/core components | |||||
import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
// component | |||||
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | ||||
import Card from "components/Card/Card.js"; | import Card from "components/Card/Card.js"; | ||||
import CardBody from "components/Card/CardBody.js"; | import CardBody from "components/Card/CardBody.js"; | ||||
@@ -1,15 +1,9 @@ | |||||
import React from "react"; | import React from "react"; | ||||
// nodejs library that concatenates classes | |||||
import classNames from "classnames"; | import classNames from "classnames"; | ||||
// @material-ui/core components | |||||
import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
// @material-ui/icons | |||||
import Dashboard from "@material-ui/icons/Dashboard"; | import Dashboard from "@material-ui/icons/Dashboard"; | ||||
// Component | |||||
import GridContainer from "components/Grid/GridContainer.js"; | import GridContainer from "components/Grid/GridContainer.js"; | ||||
import GridItem from "components/Grid/GridItem.js"; | import GridItem from "components/Grid/GridItem.js"; | ||||
import NavPills from "components/NavPills/NavPills.js"; | import NavPills from "components/NavPills/NavPills.js"; | ||||
@@ -1,19 +1,12 @@ | |||||
import React, { useState, useEffect } from 'react'; | |||||
// @material-ui/core components | |||||
import React from 'react'; | |||||
import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
import parse from 'react-html-parser'; | |||||
// component | |||||
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | ||||
import Card from "components/Card/Card.js"; | import Card from "components/Card/Card.js"; | ||||
import CardBody from "components/Card/CardBody.js"; | import CardBody from "components/Card/CardBody.js"; | ||||
import CardHeader from "components/Card/CardHeader.js"; | import CardHeader from "components/Card/CardHeader.js"; | ||||
const useStyles = makeStyles(styles); | |||||
const DataCarrer = function ({ backend, detailcarrer, ...props }) { | const DataCarrer = function ({ backend, detailcarrer, ...props }) { | ||||
const classes = useStyles(); | |||||
const carrer = detailcarrer.map((data) => { | const carrer = detailcarrer.map((data) => { | ||||
return ( | return ( | ||||
<Card> | <Card> | ||||
@@ -24,9 +17,7 @@ const DataCarrer = function ({ backend, detailcarrer, ...props }) { | |||||
</div> | </div> | ||||
<h5 align="center">Masa Pendaftaran : {data.start_regis} s/d {data.until_regis}</h5> | <h5 align="center">Masa Pendaftaran : {data.start_regis} s/d {data.until_regis}</h5> | ||||
<h5 align="center" align="justify"> | <h5 align="center" align="justify"> | ||||
<div> | |||||
{ parse () } | |||||
</div> | |||||
parse({data.description}) | |||||
</h5> | </h5> | ||||
</CardBody> | </CardBody> | ||||
</Card> | </Card> | ||||
@@ -1,270 +0,0 @@ | |||||
import React from "react"; | |||||
// @material-ui/core components | |||||
import { makeStyles } from "@material-ui/core/styles"; | |||||
// Component | |||||
import SnackbarContent from "components/Snackbar/SnackbarContent.js"; | |||||
import Clearfix from "components/Clearfix/Clearfix.js"; | |||||
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | |||||
import GridContainer from "components/Grid/GridContainer.js"; | |||||
import GridItem from "components/Grid/GridItem.js"; | |||||
import Grid from '@material-ui/core/Grid'; | |||||
import Paper from '@material-ui/core/Paper'; | |||||
import CardBody from "components/Card/CardBody.js"; | |||||
import Card from "components/Card/Card.js"; | |||||
import Button from "components/CustomButtons/Button.js"; | |||||
// react component for creating beautiful carousel | |||||
import Carousel from "react-slick"; | |||||
// @material-ui/icons | |||||
import LocationOn from "@material-ui/icons/LocationOn"; | |||||
import image1 from "assets/img/bg.jpg"; | |||||
import image2 from "assets/img/bg2.png"; | |||||
import image3 from "assets/img/bg3.jpg"; | |||||
// import "assets/css/hover.css"; | |||||
// import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/carouselStyle.js"; | |||||
const useStyles = makeStyles(styles); | |||||
const DataSnackbarContent = function() { | |||||
const classes = useStyles(); | |||||
return ( | |||||
<div className={classes.section} id="notifications"> | |||||
<SnackbarContent | |||||
message={ | |||||
<span> | |||||
<b>Thamrin Group</b> bersama Anda melawan COVID-19. Untuk informasi silakan klik di sini. | |||||
</span> | |||||
} | |||||
align="center" | |||||
color="danger" | |||||
icon="info_outline" | |||||
/> | |||||
</div> | |||||
); | |||||
} | |||||
const DataCarousel = function ({ carousel, ...props }) { | |||||
const classes = useStyles(); | |||||
const settings = { | |||||
dots: true, | |||||
infinite: true, | |||||
speed: 500, | |||||
slidesToShow: 1, | |||||
slidesToScroll: 1, | |||||
autoplay: true, | |||||
time: 5 | |||||
}; | |||||
return ( | |||||
<div className={classes.section} id="notifications"> | |||||
<div className={classes.section}> | |||||
<div className={classes.container}> | |||||
<GridContainer> | |||||
<GridItem className={classes.marginAuto}> | |||||
<Card carousel> | |||||
<Carousel {...settings}> | |||||
<div> | |||||
<img src={image1} alt="First slide" className="slick-image" /> | |||||
</div> | |||||
<div> | |||||
<img src={image2} alt="Second slide" className="slick-image"/> | |||||
</div> | |||||
<div> | |||||
<img src={image3} alt="Third slide" className="slick-image" /> | |||||
</div> | |||||
</Carousel> | |||||
</Card> | |||||
</GridItem> | |||||
</GridContainer> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
); | |||||
} | |||||
const DataService = function ({ service, ...props }) { | |||||
const classes = useStyles(); | |||||
const services = service.map((data) => ( | |||||
<GridContainer justify="center"> | |||||
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}> | |||||
<Paper className={classes.paper}> | |||||
<Card style={{width: "20rem"}}> | |||||
<img | |||||
style={{height: "180px", width: "100%", padding:"20px", display: "block"}} | |||||
className={classes.imgCardTop} | |||||
src={data.img} | |||||
/> | |||||
</Card> | |||||
</Paper> | |||||
</Grid> | |||||
</GridContainer> | |||||
)); | |||||
return ( | |||||
<div className={classes.section} id="notifications"> | |||||
<div align="center"> | |||||
<h2>Our Service</h2> | |||||
</div> | |||||
<div> | |||||
{services} | |||||
</div> | |||||
</div> | |||||
); | |||||
} | |||||
const DataBusinessPartner = function ({ businessPartners, ...props }) { | |||||
const classes = useStyles(); | |||||
const settings = { | |||||
dots: true, | |||||
infinite: true, | |||||
speed: 500, | |||||
slidesToShow: 1, | |||||
slidesToScroll: 1, | |||||
autoplay: true, | |||||
time: 5 | |||||
}; | |||||
return ( | |||||
<div className={classes.section} id="notifications"> | |||||
<div align="center"> | |||||
<h2>Our Business Partner</h2> | |||||
</div> | |||||
<GridContainer justify="center"> | |||||
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}> | |||||
<Paper className={classes.paper}> | |||||
<Card style={{width: "20rem"}}> | |||||
<div align="center"> | |||||
<img | |||||
style={{height: "180px", width: "300px", display: "block"}} | |||||
className={classes.imgCardTop} | |||||
src="https://imgx.gridoto.com/crop/31x4:629x377/750x500/photo/2020/06/28/829813812.jpg" | |||||
/> | |||||
</div> | |||||
</Card> | |||||
</Paper> | |||||
</Grid> | |||||
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}> | |||||
<Paper className={classes.paper}> | |||||
<Card style={{width: "20rem"}}> | |||||
<div align="center"> | |||||
<img | |||||
style={{height: "180px", width: "270px", display: "block"}} | |||||
className={classes.imgCardTop} | |||||
src="https://i.pinimg.com/originals/64/e7/73/64e773194975e702677c5089fc6c8ae2.png" | |||||
alt="Card-img-cap" | |||||
/> | |||||
</div> | |||||
</Card> | |||||
</Paper> | |||||
</Grid> | |||||
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}> | |||||
<Paper className={classes.paper}> | |||||
<Card style={{width: "20rem"}}> | |||||
<div align="center"> | |||||
<img | |||||
style={{height: "180px", width: "270px", padding:"20px", display: "block"}} | |||||
className={classes.imgCardTop} | |||||
src="https://upload.wikimedia.org/wikipedia/id/d/d5/Honda-logo.png" | |||||
alt="Card-img-cap" | |||||
/> | |||||
</div> | |||||
</Card> | |||||
</Paper> | |||||
</Grid> | |||||
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}> | |||||
<Paper className={classes.paper}> | |||||
<Card style={{width: "20rem"}}> | |||||
<div align="center"> | |||||
<img | |||||
style={{height: "180px", width: "200px", padding:"20px", display: "block"}} | |||||
className={classes.imgCardTop} | |||||
src="https://i.pinimg.com/originals/1e/12/a3/1e12a32f6f4838188f71eeb6d48ccc55.png" | |||||
alt="Card-img-cap" | |||||
/> | |||||
</div> | |||||
</Card> | |||||
</Paper> | |||||
</Grid> | |||||
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}> | |||||
<Paper className={classes.paper}> | |||||
<Card style={{width: "20rem"}}> | |||||
<div align="center"> | |||||
<img | |||||
style={{height: "180px", width: "200px", padding:"20px", display: "block"}} | |||||
className={classes.imgCardTop} | |||||
src="https://3.bp.blogspot.com/-hUQJabKTGCg/WfcN66wVQCI/AAAAAAAAAxU/OW8hrgMH6nA-XyYkg6Pt6fNYmbpzY4noACLcBGAs/s1600/softskill.png" | |||||
/> | |||||
</div> | |||||
</Card> | |||||
</Paper> | |||||
</Grid> | |||||
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}> | |||||
<Paper className={classes.paper}> | |||||
<Card style={{width: "20rem"}}> | |||||
<div align="center"> | |||||
<img | |||||
style={{height: "180px", width: "300px", padding:"20px", display: "block"}} | |||||
className={classes.imgCardTop} | |||||
src="http://bprberkatsejati.com/wp-content/uploads/2019/03/cover1.jpg" | |||||
alt="Card-img-cap" | |||||
/> | |||||
</div> | |||||
</Card> | |||||
</Paper> | |||||
</Grid> | |||||
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}> | |||||
<Paper className={classes.paper}> | |||||
<Card style={{width: "20rem"}}> | |||||
<div align="center"> | |||||
<img | |||||
style={{height: "180px", width: "250px", padding:"20px", display: "block"}} | |||||
className={classes.imgCardTop} | |||||
src="https://d5b1dwptmw1mf.cloudfront.net/uploads/malls/logo/L1_w_dvWvn_1lsCh-palembang-indah-mall-1479113878_1.jpg" | |||||
alt="Card-img-cap" | |||||
/> | |||||
</div> | |||||
</Card> | |||||
</Paper> | |||||
</Grid> | |||||
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}> | |||||
<Paper className={classes.paper}> | |||||
<Card style={{width: "20rem"}}> | |||||
<div align="center"> | |||||
<img | |||||
style={{height: "180px", width: "330px", padding:"20px", display: "block"}} | |||||
className={classes.imgCardTop} | |||||
src="https://lh3.googleusercontent.com/proxy/5AktadKOHE-SrymxW0Ffgw4P_eKgXjNsuSs9mpTHAfYbm5UMfdbT3vefgtxA8NnbJEUdMYdj5kpQolEu5r-938-T9sHM6ApF1M_k1DgloSP0d7kL5Qeoi_-e6lIuwYa2XR8" | |||||
alt="Card-img-cap" | |||||
/> | |||||
</div> | |||||
</Card> | |||||
</Paper> | |||||
</Grid> | |||||
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}> | |||||
<Paper className={classes.paper}> | |||||
<Card style={{width: "20rem"}}> | |||||
<div align="center"> | |||||
<img | |||||
style={{height: "180px", width: "330px", padding:"20px", display: "block"}} | |||||
className={classes.imgCardTop} | |||||
src="https://3.bp.blogspot.com/-NFjgD_eGwy8/Wn70CKGh5QI/AAAAAAAACRg/7fAzLraWggwc5HJU-KVJUrKYAnKQ52VWgCLcBGAs/s1600/Thamrin%2BHomes.png" | |||||
/> | |||||
</div> | |||||
</Card> | |||||
</Paper> | |||||
</Grid> | |||||
</GridContainer> | |||||
</div> | |||||
); | |||||
} | |||||
module.exports = { | |||||
DataSnackbarContent: DataSnackbarContent, | |||||
DataCarousel: DataCarousel, | |||||
DataService: DataService, | |||||
DataBusinessPartner: DataBusinessPartner, | |||||
}; |
@@ -1,11 +1,8 @@ | |||||
import React from "react"; | import React from "react"; | ||||
// @material-ui/core components | |||||
import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
import GridContainer from "components/Grid/GridContainer.js"; | import GridContainer from "components/Grid/GridContainer.js"; | ||||
import Grid from '@material-ui/core/Grid'; | import Grid from '@material-ui/core/Grid'; | ||||
import Paper from '@material-ui/core/Paper'; | |||||
import Card from "components/Card/Card.js"; | import Card from "components/Card/Card.js"; | ||||
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | ||||
@@ -1,15 +1,10 @@ | |||||
import React from "react"; | import React from "react"; | ||||
// @material-ui/core components | |||||
import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
// Component | |||||
import GridContainer from "components/Grid/GridContainer.js"; | import GridContainer from "components/Grid/GridContainer.js"; | ||||
import GridItem from "components/Grid/GridItem.js"; | import GridItem from "components/Grid/GridItem.js"; | ||||
import Card from "components/Card/Card.js"; | import Card from "components/Card/Card.js"; | ||||
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | ||||
// react component for creating beautiful carousel | |||||
import Carousel from "react-slick"; | import Carousel from "react-slick"; | ||||
const useStyles = makeStyles(styles); | const useStyles = makeStyles(styles); | ||||
@@ -1,15 +1,10 @@ | |||||
import React from "react"; | import React from "react"; | ||||
// @material-ui/core components | |||||
import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
// Component | |||||
import GridContainer from "components/Grid/GridContainer.js"; | import GridContainer from "components/Grid/GridContainer.js"; | ||||
import GridItem from "components/Grid/GridItem.js"; | import GridItem from "components/Grid/GridItem.js"; | ||||
import Card from "components/Card/Card.js"; | import Card from "components/Card/Card.js"; | ||||
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | ||||
// react component for creating beautiful carousel | |||||
import Carousel from "react-slick"; | import Carousel from "react-slick"; | ||||
import image1 from "assets/img/core1.png"; | import image1 from "assets/img/core1.png"; | ||||
@@ -1,6 +1,4 @@ | |||||
import React from "react"; | import React from "react"; | ||||
// @material-ui/core components | |||||
import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
import GridContainer from "components/Grid/GridContainer.js"; | import GridContainer from "components/Grid/GridContainer.js"; | ||||
@@ -1,161 +0,0 @@ | |||||
import React from "react"; | |||||
// @material-ui/core components | |||||
import { makeStyles } from "@material-ui/core/styles"; | |||||
// component | |||||
import SnackbarContent from "components/Snackbar/SnackbarContent.js"; | |||||
import Clearfix from "components/Clearfix/Clearfix.js"; | |||||
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | |||||
import Paper from '@material-ui/core/Paper'; | |||||
import Grid from '@material-ui/core/Grid'; | |||||
import GridContainer from "components/Grid/GridContainer.js"; | |||||
import Card from "components/Card/Card.js"; | |||||
import CardBody from "components/Card/CardBody.js"; | |||||
import Button from "components/CustomButtons/Button.js"; | |||||
import Paginations from "components/Pagination/Pagination.js"; | |||||
const useStyles = makeStyles(styles); | |||||
const LatestNews = function ({ news, ...props }) { | |||||
const classes = useStyles(); | |||||
return ( | |||||
<div className={classes.section} id="notifications"> | |||||
<SnackbarContent | |||||
message={ | |||||
<span> | |||||
<b>Thamrin Group</b> bersama Anda melawan COVID-19. Untuk informasi silakan klik di sini. | |||||
</span> | |||||
} | |||||
align="center" | |||||
color="danger" | |||||
icon="info_outline" | |||||
/> | |||||
<Clearfix /> | |||||
<div align="center"> | |||||
<h2>Latest News</h2> | |||||
</div> | |||||
<GridContainer justify="center"> | |||||
<Grid align="center" style={{padding:"5px"}}> | |||||
<Paper className={classes.paper}> | |||||
<Card style={{width: "20rem"}}> | |||||
<img | |||||
style={{height: "180px", width: "100%", display: "block"}} | |||||
className={classes.imgCardTop} | |||||
src="https://www.yamaha-motor.co.id/uploads/content/2021012915132285551O25635.jpg" | |||||
/> | |||||
<CardBody> | |||||
<h4 className={classes.cardTitle}>Dance Seru sambil Menang Banyak? Yuk...</h4> | |||||
<p>Jakarta – Let’s Gear Up! PT Yamaha Indonesia Motor Manufacturing (PT YIMM) mengajak para generasi muda...</p> | |||||
<Button color="info">Read More</Button> | |||||
</CardBody> | |||||
</Card> | |||||
</Paper> | |||||
</Grid> | |||||
<Grid align="center" style={{padding:"5px"}}> | |||||
<Paper className={classes.paper}> | |||||
<Card style={{width: "20rem"}}> | |||||
<img | |||||
style={{height: "180px", width: "100%", display: "block"}} | |||||
className={classes.imgCardTop} | |||||
src="https://www.yamaha-motor.co.id/uploads/content/2021012810494925493U23162.jpg" | |||||
alt="Card-img-cap" | |||||
/> | |||||
<CardBody> | |||||
<h4 className={classes.cardTitle}>Makin Agresif, Ini Warna Baru MT-25 !</h4> | |||||
<p>Makin Agresif, Ini Warna Baru MT-25 ! Yamaha gencar melakukan penyegaran produk-produknya...</p> | |||||
<Button color="info">Read More</Button> | |||||
</CardBody> | |||||
</Card> | |||||
</Paper> | |||||
</Grid> | |||||
<Grid align="center" style={{padding:"5px"}}> | |||||
<Paper className={classes.paper}> | |||||
<Card style={{width: "20rem"}}> | |||||
<img | |||||
style={{height: "180px", width: "100%", display: "block"}} | |||||
className={classes.imgCardTop} | |||||
src="https://www.yamaha-motor.co.id/uploads/content/2021012716374767982G99280.jpg" | |||||
alt="Card-img-cap" | |||||
/> | |||||
<CardBody> | |||||
<h4 className={classes.cardTitle}>Awal Tahun 2021, Yamaha Fino 125 Sporty Tampil... </h4> | |||||
<p>Jakarta – Melanjutkan penyegaran warna baru pada Yamaha Fino 125 Premium sebelumnya, kini saatnya...</p> | |||||
<Button color="info">Read More</Button> | |||||
</CardBody> | |||||
</Card> | |||||
</Paper> | |||||
</Grid> | |||||
<Grid align="center" style={{padding:"5px"}}> | |||||
<Paper className={classes.paper}> | |||||
<Card style={{width: "20rem"}}> | |||||
<img | |||||
style={{height: "180px", width: "100%", display: "block"}} | |||||
className={classes.imgCardTop} | |||||
src="https://www.yamaha-motor.co.id/uploads/content/2021011912521629671C71533.jpg" | |||||
alt="Card-img-cap" | |||||
/> | |||||
<CardBody> | |||||
<h4 className={classes.cardTitle}>Ini Warna Baru Yamaha R15 !</h4> | |||||
<p>Tahun 2021 baru bergulir, Yamaha sudah memanjakan konsumen dengan melansir warna teranyar...</p> | |||||
<Button color="info">Read More</Button> | |||||
</CardBody> | |||||
</Card> | |||||
</Paper> | |||||
</Grid> | |||||
<Grid align="center" style={{padding:"5px"}}> | |||||
<Paper className={classes.paper}> | |||||
<Card style={{width: "20rem"}}> | |||||
<img | |||||
style={{height: "180px", width: "100%", display: "block"}} | |||||
className={classes.imgCardTop} | |||||
src="https://www.yamaha-motor.co.id/uploads/content/202101141322331084Z7315.jpg" | |||||
alt="Card-img-cap" | |||||
/> | |||||
<CardBody> | |||||
<h4 className={classes.cardTitle}>Awal Tahun 2021, MX King 150 Warna Baru Meluncur </h4> | |||||
<p>Awal tahun 2021 ini dibuka Yamaha dengan merilis warna baru MX King 150 yang kian menonjolkan tampilan...</p> | |||||
<Button color="info">Read More</Button> | |||||
</CardBody> | |||||
</Card> | |||||
</Paper> | |||||
</Grid> | |||||
<Grid align="center" style={{padding:"5px"}}> | |||||
<Paper className={classes.paper}> | |||||
<Card style={{width: "20rem"}}> | |||||
<img | |||||
style={{height: "180px", width: "100%", display: "block"}} | |||||
className={classes.imgCardTop} | |||||
src="https://www.yamaha-motor.co.id/uploads/content/2020121515490320942H80353.jpg" | |||||
alt="Card-img-cap" | |||||
/> | |||||
<CardBody> | |||||
<h4 className={classes.cardTitle}>Semakin Sporty, Yamaha Luncurkan All New...</h4> | |||||
<p>Jakarta – Sebagai wujud apresiasi terhadap pecinta MotoGP di Indonesia dan semangat sportifitas MotoGP...</p> | |||||
<Button color="info">Read More</Button> | |||||
</CardBody> | |||||
</Card> | |||||
</Paper> | |||||
</Grid> | |||||
</GridContainer> | |||||
<div align="center"> | |||||
<Paginations | |||||
color="info" | |||||
pages={[ | |||||
{ text: 1 }, | |||||
{ text: "..." }, | |||||
{ text: 5 }, | |||||
{ text: 6 }, | |||||
{ active: true, text: 7 }, | |||||
{ text: 8 }, | |||||
{ text: 9 }, | |||||
{ text: "..." }, | |||||
{ text: 12 } | |||||
]} | |||||
/> | |||||
</div> | |||||
</div> | |||||
); | |||||
} | |||||
export default LatestNews; |
@@ -1,13 +1,8 @@ | |||||
import React, { useState, useEffect } from 'react'; | |||||
import Router, { withRouter } from 'next/router' | |||||
import React from 'react'; | |||||
// @material-ui/core components | |||||
import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
import ReactPaginate from 'react-paginate'; | |||||
// component | |||||
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | ||||
import Paper from '@material-ui/core/Paper'; | |||||
import Grid from '@material-ui/core/Grid'; | import Grid from '@material-ui/core/Grid'; | ||||
import GridContainer from "components/Grid/GridContainer.js"; | import GridContainer from "components/Grid/GridContainer.js"; | ||||
import Card from "components/Card/Card.js"; | import Card from "components/Card/Card.js"; | ||||
@@ -19,29 +14,6 @@ import Icon from "@material-ui/core/Icon"; | |||||
const useStyles = makeStyles(styles); | const useStyles = makeStyles(styles); | ||||
const DataLatestNews = function ({ backend, news, ...props }) { | const DataLatestNews = function ({ backend, news, ...props }) { | ||||
const [isLoading, setLoading] = useState(false); //State for the loading indicator | |||||
const startLoading = () => setLoading(true); | |||||
const stopLoading = () => setLoading(false); | |||||
useEffect(() => { //After the component is mounted set router event handlers | |||||
Router.events.on('routeChangeStart', startLoading); | |||||
Router.events.on('routeChangeComplete', stopLoading); | |||||
return () => { | |||||
Router.events.off('routeChangeStart', startLoading); | |||||
Router.events.off('routeChangeComplete', stopLoading); | |||||
} | |||||
}, []) | |||||
const pagginationHandler = (page) => { | |||||
const currentPath = props.router.pathname; | |||||
const currentQuery = props.router.query; | |||||
currentQuery.page = page.selected + 1; | |||||
props.router.push({ | |||||
pathname: currentPath, | |||||
query: currentQuery, | |||||
}); | |||||
}; | |||||
const classes = useStyles(); | const classes = useStyles(); | ||||
const latnews = news.map((data) => { | const latnews = news.map((data) => { | ||||
return ( | return ( | ||||
@@ -53,7 +25,6 @@ const DataLatestNews = function ({ backend, news, ...props }) { | |||||
src={`${backend}${data.img[0]["url"]}`} | src={`${backend}${data.img[0]["url"]}`} | ||||
/> | /> | ||||
<CardBody> | <CardBody> | ||||
{/* <h4 className={classes.cardTitle}>{data.title}</h4> */} | |||||
<p>{data.title}</p> | <p>{data.title}</p> | ||||
<Button color="info" round href={"/latestnews_details?s="+data.id}> | <Button color="info" round href={"/latestnews_details?s="+data.id}> | ||||
<Icon className={classes.icons}>open_in_new</Icon>Read More | <Icon className={classes.icons}>open_in_new</Icon>Read More | ||||
@@ -1,40 +1,12 @@ | |||||
import React, { useState, useEffect } from 'react'; | import React, { useState, useEffect } from 'react'; | ||||
import Router, { withRouter } from 'next/router' | |||||
// @material-ui/core components | |||||
import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
import ReactPaginate from 'react-paginate'; | |||||
// component | |||||
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | ||||
import Paginations from "components/Pagination/Pagination.js"; | |||||
const useStyles = makeStyles(styles); | const useStyles = makeStyles(styles); | ||||
const DataLatestNews = function ({ backend, news, ...props }) { | const DataLatestNews = function ({ backend, news, ...props }) { | ||||
const [isLoading, setLoading] = useState(false); //State for the loading indicator | |||||
const startLoading = () => setLoading(true); | |||||
const stopLoading = () => setLoading(false); | |||||
useEffect(() => { //After the component is mounted set router event handlers | |||||
Router.events.on('routeChangeStart', startLoading); | |||||
Router.events.on('routeChangeComplete', stopLoading); | |||||
return () => { | |||||
Router.events.off('routeChangeStart', startLoading); | |||||
Router.events.off('routeChangeComplete', stopLoading); | |||||
} | |||||
}, []) | |||||
const pagginationHandler = (page) => { | |||||
const currentPath = props.router.pathname; | |||||
const currentQuery = props.router.query; | |||||
currentQuery.page = page.selected + 1; | |||||
props.router.push({ | |||||
pathname: currentPath, | |||||
query: currentQuery, | |||||
}); | |||||
}; | |||||
const classes = useStyles(); | const classes = useStyles(); | ||||
const latnews = news.map((data) => { | const latnews = news.map((data) => { | ||||
return ( | return ( | ||||
@@ -1,15 +1,9 @@ | |||||
import React from "react"; | import React from "react"; | ||||
// nodejs library that concatenates classes | |||||
import classNames from "classnames"; | import classNames from "classnames"; | ||||
// @material-ui/core components | |||||
import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
// @material-ui/icons | |||||
import Dashboard from "@material-ui/icons/Dashboard"; | import Dashboard from "@material-ui/icons/Dashboard"; | ||||
// Component | |||||
import GridContainer from "components/Grid/GridContainer.js"; | import GridContainer from "components/Grid/GridContainer.js"; | ||||
import GridItem from "components/Grid/GridItem.js"; | import GridItem from "components/Grid/GridItem.js"; | ||||
import NavPills from "components/NavPills/NavPills.js"; | import NavPills from "components/NavPills/NavPills.js"; | ||||
@@ -1,16 +1,10 @@ | |||||
import React from "react"; | import React from "react"; | ||||
// nodejs library that concatenates classes | |||||
import classNames from "classnames"; | import classNames from "classnames"; | ||||
// @material-ui/core components | |||||
import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
// @material-ui/icons | |||||
import Dashboard from "@material-ui/icons/Dashboard"; | import Dashboard from "@material-ui/icons/Dashboard"; | ||||
import LocalGroceryStoreIcon from "@material-ui/icons/LocalGroceryStore"; | import LocalGroceryStoreIcon from "@material-ui/icons/LocalGroceryStore"; | ||||
// Component | |||||
import GridContainer from "components/Grid/GridContainer.js"; | import GridContainer from "components/Grid/GridContainer.js"; | ||||
import Grid from '@material-ui/core/Grid'; | import Grid from '@material-ui/core/Grid'; | ||||
import GridItem from "components/Grid/GridItem.js"; | import GridItem from "components/Grid/GridItem.js"; | ||||
@@ -1,20 +1,3 @@ | |||||
/*! | |||||
========================================================= | |||||
* NextJS Material Kit v1.1.0 based on Material Kit Free - v2.0.2 (Bootstrap 4.0.0 Final Edition) and Material Kit React v1.8.0 | |||||
========================================================= | |||||
* Product Page: https://www.creative-tim.com/product/nextjs-material-kit | |||||
* Copyright 2020 Creative Tim (https://www.creative-tim.com) | |||||
* Licensed under MIT (https://github.com/creativetimofficial/nextjs-material-kit/blob/master/LICENSE.md) | |||||
* Coded by Creative Tim | |||||
========================================================= | |||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. | |||||
*/ | |||||
import React from "react"; | import React from "react"; | ||||
import ReactDOM from "react-dom"; | import ReactDOM from "react-dom"; | ||||
import App from "next/app"; | import App from "next/app"; | ||||
@@ -1,17 +1,10 @@ | |||||
import React from "react"; | import React from "react"; | ||||
// nodejs library that concatenates classes | |||||
import classNames from "classnames"; | import classNames from "classnames"; | ||||
// react components for routing our app without refresh | |||||
import Link from "next/link"; | |||||
// @material-ui/core components | |||||
import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
// @material-ui/icons | |||||
// core components | |||||
import Header from "components/Header/Header.js"; | import Header from "components/Header/Header.js"; | ||||
import HeaderLinks from "components/Header/HeaderLinks.js"; | import HeaderLinks from "components/Header/HeaderLinks.js"; | ||||
import Footer from "components/Footer/Footer.js"; | import Footer from "components/Footer/Footer.js"; | ||||
import GridContainer from "components/Grid/GridContainer.js"; | |||||
import GridItem from "components/Grid/GridItem.js"; | |||||
import SectionCarrer from "pages-sections/carrer/carrer.js"; | import SectionCarrer from "pages-sections/carrer/carrer.js"; | ||||
import Parallax from "components/Parallax/Parallax.js"; | import Parallax from "components/Parallax/Parallax.js"; | ||||
import styles from "assets/jss/nextjs-material-kit/pages/components.js"; | import styles from "assets/jss/nextjs-material-kit/pages/components.js"; | ||||
@@ -34,20 +27,7 @@ const Carrer = function ({ backend, s1, d3, sma, ...props }) { | |||||
}} | }} | ||||
{...rest} | {...rest} | ||||
/> | /> | ||||
<Parallax image={require("assets/img/carrer.png")} height="50px"> | |||||
<div className={classes.container}> | |||||
<GridContainer> | |||||
<GridItem> | |||||
{/* <div className={classes.brand}> | |||||
<h1 className={classes.title}>NextJS Material Kit.</h1> | |||||
<h3 className={classes.subtitle}> | |||||
A Badass Material Kit based on Material-UI and NextJS. | |||||
</h3> | |||||
</div> */} | |||||
</GridItem> | |||||
</GridContainer> | |||||
</div> | |||||
</Parallax> | |||||
<Parallax image={require("assets/img/carrer.png")} height="50px"/> | |||||
<div className={classNames(classes.main, classes.mainRaised)}> | <div className={classNames(classes.main, classes.mainRaised)}> | ||||
<SectionCarrer s1={s1} d3={d3} sma={sma} backend={backend}/> | <SectionCarrer s1={s1} d3={d3} sma={sma} backend={backend}/> | ||||
</div> | </div> | ||||
@@ -1,17 +1,10 @@ | |||||
import React from "react"; | import React from "react"; | ||||
// nodejs library that concatenates classes | |||||
import classNames from "classnames"; | import classNames from "classnames"; | ||||
// react components for routing our app without refresh | |||||
import Link from "next/link"; | |||||
// @material-ui/core components | |||||
import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
// @material-ui/icons | |||||
// core components | |||||
import Header from "components/Header/Header.js"; | import Header from "components/Header/Header.js"; | ||||
import HeaderLinks from "components/Header/HeaderLinks.js"; | import HeaderLinks from "components/Header/HeaderLinks.js"; | ||||
import Footer from "components/Footer/Footer.js"; | import Footer from "components/Footer/Footer.js"; | ||||
import GridContainer from "components/Grid/GridContainer.js"; | |||||
import GridItem from "components/Grid/GridItem.js"; | |||||
import CarrerDetail from "pages-sections/carrer/carrer_details.js"; | import CarrerDetail from "pages-sections/carrer/carrer_details.js"; | ||||
import Parallax from "components/Parallax/Parallax.js"; | import Parallax from "components/Parallax/Parallax.js"; | ||||
import styles from "assets/jss/nextjs-material-kit/pages/components.js"; | import styles from "assets/jss/nextjs-material-kit/pages/components.js"; | ||||
@@ -34,20 +27,7 @@ const CarrerDetails = function ({ backend, detailcarrer, ...props }) { | |||||
}} | }} | ||||
{...rest} | {...rest} | ||||
/> | /> | ||||
<Parallax image={require("assets/img/carrer.png")} height="50px"> | |||||
<div className={classes.container}> | |||||
<GridContainer> | |||||
<GridItem> | |||||
{/* <div className={classes.brand}> | |||||
<h1 className={classes.title}>NextJS Material Kit.</h1> | |||||
<h3 className={classes.subtitle}> | |||||
A Badass Material Kit based on Material-UI and NextJS. | |||||
</h3> | |||||
</div> */} | |||||
</GridItem> | |||||
</GridContainer> | |||||
</div> | |||||
</Parallax> | |||||
<Parallax image={require("assets/img/carrer.png")} height="50px"/> | |||||
<div className={classNames(classes.main, classes.mainRaised)}> | <div className={classNames(classes.main, classes.mainRaised)}> | ||||
<CarrerDetail detailcarrer={detailcarrer} backend={backend}/> | <CarrerDetail detailcarrer={detailcarrer} backend={backend}/> | ||||
</div> | </div> | ||||
@@ -1,17 +1,10 @@ | |||||
import React from "react"; | import React from "react"; | ||||
// nodejs library that concatenates classes | |||||
import classNames from "classnames"; | import classNames from "classnames"; | ||||
// react components for routing our app without refresh | |||||
import Link from "next/link"; | |||||
// @material-ui/core components | |||||
import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
// @material-ui/icons | |||||
// core components | |||||
import Header from "components/Header/Header.js"; | import Header from "components/Header/Header.js"; | ||||
import HeaderLinks from "components/Header/HeaderLinks.js"; | import HeaderLinks from "components/Header/HeaderLinks.js"; | ||||
import Footer from "components/Footer/Footer.js"; | import Footer from "components/Footer/Footer.js"; | ||||
import GridContainer from "components/Grid/GridContainer.js"; | |||||
import GridItem from "components/Grid/GridItem.js"; | |||||
// import SectionChart from "pages-sections/Components-Sections/SectionChart.js"; | // import SectionChart from "pages-sections/Components-Sections/SectionChart.js"; | ||||
import Parallax from "components/Parallax/Parallax.js"; | import Parallax from "components/Parallax/Parallax.js"; | ||||
import styles from "../assets/jss/nextjs-material-kit/pages/components.js"; | import styles from "../assets/jss/nextjs-material-kit/pages/components.js"; | ||||
@@ -33,20 +26,7 @@ export default function Components(props) { | |||||
}} | }} | ||||
{...rest} | {...rest} | ||||
/> | /> | ||||
<Parallax image={require("assets/img/Promotion_2-1.jpg")} width="200px"> | |||||
<div className={classes.container}> | |||||
<GridContainer> | |||||
<GridItem> | |||||
{/* <div className={classes.brand}> | |||||
<h1 className={classes.title}>NextJS Material Kit.</h1> | |||||
<h3 className={classes.subtitle}> | |||||
A Badass Material Kit based on Material-UI and NextJS. | |||||
</h3> | |||||
</div> */} | |||||
</GridItem> | |||||
</GridContainer> | |||||
</div> | |||||
</Parallax> | |||||
<Parallax image={require("assets/img/Promotion_2-1.jpg")} width="200px"/> | |||||
<div className={classNames(classes.main, classes.mainRaised)}> | <div className={classNames(classes.main, classes.mainRaised)}> | ||||
{/* <SectionChart /> */} | {/* <SectionChart /> */} | ||||
</div> | </div> | ||||
@@ -1,25 +1,16 @@ | |||||
import React from "react"; | import React from "react"; | ||||
// nodejs library that concatenates classes | |||||
import classNames from "classnames"; | import classNames from "classnames"; | ||||
// react components for routing our app without refresh | |||||
import Link from "next/link"; | |||||
// @material-ui/core components | |||||
import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
// @material-ui/icons | |||||
// core components | |||||
import Header from "components/Header/Header.js"; | import Header from "components/Header/Header.js"; | ||||
import HeaderLinks from "components/Header/HeaderLinks.js"; | import HeaderLinks from "components/Header/HeaderLinks.js"; | ||||
import Footer from "components/Footer/Footer.js"; | import Footer from "components/Footer/Footer.js"; | ||||
import GridContainer from "components/Grid/GridContainer.js"; | |||||
import GridItem from "components/Grid/GridItem.js"; | |||||
import Parallax from "components/Parallax/Parallax.js"; | import Parallax from "components/Parallax/Parallax.js"; | ||||
import styles from "assets/jss/nextjs-material-kit/pages/components.js"; | import styles from "assets/jss/nextjs-material-kit/pages/components.js"; | ||||
import Button from "components/CustomButtons/Button.js"; | |||||
import GetbusinessPartners from "../api/home/businessPartner.js"; | import GetbusinessPartners from "../api/home/businessPartner.js"; | ||||
import Getservices from "../api/home/service.js"; | import Getservices from "../api/home/service.js"; | ||||
import Getcarousels from "../api/home/carousel.js"; | import Getcarousels from "../api/home/carousel.js"; | ||||
import DataSnackbarContent from "../pages-sections/snackbar.js"; | import DataSnackbarContent from "../pages-sections/snackbar.js"; | ||||
import DataCarousel from "../pages-sections/home/carousel.js"; | import DataCarousel from "../pages-sections/home/carousel.js"; | ||||
import DataService from "../pages-sections/home/service.js"; | import DataService from "../pages-sections/home/service.js"; | ||||
@@ -50,31 +41,7 @@ const Home = function ({ | |||||
}} | }} | ||||
{...rest} | {...rest} | ||||
/> | /> | ||||
<Parallax | |||||
image={require("assets/img/welcome.png")} | |||||
styles={{ marginTop: "50px" }} | |||||
> | |||||
<div className={classes.container}> | |||||
<GridContainer> | |||||
{/* <GridItem> | |||||
<div className={classes.brand} align="center"> | |||||
<h1 className={classes.title}>Thamrin Group</h1> | |||||
<h3 className={classes.subtitle}> | |||||
A Badass Material Kit based on Material-UI and NextJS. | |||||
</h3> | |||||
</div> | |||||
<Button | |||||
href="/login" | |||||
className={classes.registerNavLink} | |||||
color="info" | |||||
box | |||||
> | |||||
Shop Now | |||||
</Button> | |||||
</GridItem> */} | |||||
</GridContainer> | |||||
</div> | |||||
</Parallax> | |||||
<Parallax image={require("assets/img/welcome.png")}styles={{ marginTop: "50px" }}/> | |||||
<div className={classNames(classes.main, classes.mainRaised)}> | <div className={classNames(classes.main, classes.mainRaised)}> | ||||
<DataSnackbarContent /> | <DataSnackbarContent /> | ||||
<CoreValue /> | <CoreValue /> | ||||
@@ -1,82 +0,0 @@ | |||||
import React from "react"; | |||||
// nodejs library that concatenates classes | |||||
import classNames from "classnames"; | |||||
// @material-ui/core components | |||||
import { makeStyles } from "@material-ui/core/styles"; | |||||
// @material-ui/icons | |||||
// core components | |||||
import Header from "components/Header/Header.js"; | |||||
import Footer from "components/Footer/Footer.js"; | |||||
import GridContainer from "components/Grid/GridContainer.js"; | |||||
import GridItem from "components/Grid/GridItem.js"; | |||||
import Button from "components/CustomButtons/Button.js"; | |||||
import HeaderLinks from "components/Header/HeaderLinks.js"; | |||||
import Parallax from "components/Parallax/Parallax.js"; | |||||
import styles from "assets/jss/nextjs-material-kit/pages/landingPage.js"; | |||||
// Sections for this page | |||||
// import ProductSection from "pages-sections/LandingPage-Sections/ProductSection.js"; | |||||
// import TeamSection from "pages-sections/LandingPage-Sections/TeamSection.js"; | |||||
// import WorkSection from "pages-sections/LandingPage-Sections/WorkSection.js"; | |||||
const dashboardRoutes = []; | |||||
const useStyles = makeStyles(styles); | |||||
export default function LandingPage(props) { | |||||
const classes = useStyles(); | |||||
const { ...rest } = props; | |||||
return ( | |||||
<div> | |||||
<Header | |||||
color="transparent" | |||||
routes={dashboardRoutes} | |||||
brand="NextJS Material Kit" | |||||
rightLinks={<HeaderLinks />} | |||||
fixed | |||||
changeColorOnScroll={{ | |||||
height: 400, | |||||
color: "white", | |||||
}} | |||||
{...rest} | |||||
/> | |||||
<Parallax filter responsive image={require("assets/img/landing-bg.jpg")}> | |||||
<div className={classes.container}> | |||||
<GridContainer> | |||||
<GridItem xs={12} sm={12} md={6}> | |||||
<h1 className={classes.title}>Your Story Starts With Us.</h1> | |||||
<h4> | |||||
Every landing page needs a small description after the big bold | |||||
title, that{"'"}s why we added this text here. Add here all the | |||||
information that can make you or your product create the first | |||||
impression. | |||||
</h4> | |||||
<br /> | |||||
<Button | |||||
color="danger" | |||||
size="lg" | |||||
href="https://www.youtube.com/watch?v=dQw4w9WgXcQ&ref=creativetim" | |||||
target="_blank" | |||||
rel="noopener noreferrer" | |||||
> | |||||
<i className="fas fa-play" /> | |||||
Watch video | |||||
</Button> | |||||
</GridItem> | |||||
</GridContainer> | |||||
</div> | |||||
</Parallax> | |||||
<div className={classNames(classes.main, classes.mainRaised)}> | |||||
<div className={classes.container}> | |||||
{/*<ProductSection /> | |||||
<TeamSection /> | |||||
<WorkSection />*/} | |||||
</div> | |||||
</div> | |||||
<Footer /> | |||||
</div> | |||||
); | |||||
} |
@@ -1,17 +1,10 @@ | |||||
import React from "react"; | import React from "react"; | ||||
// nodejs library that concatenates classes | |||||
import classNames from "classnames"; | import classNames from "classnames"; | ||||
// @material-ui/core components | |||||
import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
// core components | |||||
import Header from "components/Header/Header.js"; | import Header from "components/Header/Header.js"; | ||||
import HeaderLinks from "components/Header/HeaderLinks.js"; | import HeaderLinks from "components/Header/HeaderLinks.js"; | ||||
import Footer from "components/Footer/Footer.js"; | import Footer from "components/Footer/Footer.js"; | ||||
import GridContainer from "components/Grid/GridContainer.js"; | |||||
import GridItem from "components/Grid/GridItem.js"; | |||||
import Parallax from "components/Parallax/Parallax.js"; | import Parallax from "components/Parallax/Parallax.js"; | ||||
import styles from "assets/jss/nextjs-material-kit/pages/components.js"; | import styles from "assets/jss/nextjs-material-kit/pages/components.js"; | ||||
@@ -37,20 +30,7 @@ const LatestNews = function ({ backend, news, ...props }) { | |||||
}} | }} | ||||
{...rest} | {...rest} | ||||
/> | /> | ||||
<Parallax image={require("assets/img/simulasicicilan.jpg")} width="200px"> | |||||
<div className={classes.container}> | |||||
<GridContainer> | |||||
<GridItem> | |||||
{/* <div className={classes.brand}> | |||||
<h1 className={classes.title}>NextJS Material Kit.</h1> | |||||
<h3 className={classes.subtitle}> | |||||
A Badass Material Kit based on Material-UI and NextJS. | |||||
</h3> | |||||
</div> */} | |||||
</GridItem> | |||||
</GridContainer> | |||||
</div> | |||||
</Parallax> | |||||
<Parallax image={require("assets/img/simulasicicilan.jpg")} width="200px"/> | |||||
<div className={classNames(classes.main, classes.mainRaised)}> | <div className={classNames(classes.main, classes.mainRaised)}> | ||||
<DataSnackbarContent/> | <DataSnackbarContent/> | ||||
<DataLatestNews news={news} backend={backend}/> | <DataLatestNews news={news} backend={backend}/> | ||||
@@ -1,17 +1,10 @@ | |||||
import React from "react"; | import React from "react"; | ||||
// nodejs library that concatenates classes | |||||
import classNames from "classnames"; | import classNames from "classnames"; | ||||
// @material-ui/core components | |||||
import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
// core components | |||||
import Header from "components/Header/Header.js"; | import Header from "components/Header/Header.js"; | ||||
import HeaderLinks from "components/Header/HeaderLinks.js"; | import HeaderLinks from "components/Header/HeaderLinks.js"; | ||||
import Footer from "components/Footer/Footer.js"; | import Footer from "components/Footer/Footer.js"; | ||||
import GridContainer from "components/Grid/GridContainer.js"; | |||||
import GridItem from "components/Grid/GridItem.js"; | |||||
import Parallax from "components/Parallax/Parallax.js"; | import Parallax from "components/Parallax/Parallax.js"; | ||||
import styles from "assets/jss/nextjs-material-kit/pages/components.js"; | import styles from "assets/jss/nextjs-material-kit/pages/components.js"; | ||||
@@ -37,20 +30,7 @@ const detailLatestNews = function ({ backend, news, ...props }) { | |||||
}} | }} | ||||
{...rest} | {...rest} | ||||
/> | /> | ||||
<Parallax image={require("assets/img/simulasicicilan.jpg")} width="200px"> | |||||
<div className={classes.container}> | |||||
<GridContainer> | |||||
<GridItem> | |||||
{/* <div className={classes.brand}> | |||||
<h1 className={classes.title}>NextJS Material Kit.</h1> | |||||
<h3 className={classes.subtitle}> | |||||
A Badass Material Kit based on Material-UI and NextJS. | |||||
</h3> | |||||
</div> */} | |||||
</GridItem> | |||||
</GridContainer> | |||||
</div> | |||||
</Parallax> | |||||
<Parallax image={require("assets/img/simulasicicilan.jpg")} width="200px"/> | |||||
<div className={classNames(classes.main, classes.mainRaised)}> | <div className={classNames(classes.main, classes.mainRaised)}> | ||||
<DataSnackbarContent/> | <DataSnackbarContent/> | ||||
<DetailLatestNews news={news} backend={backend}/> | <DetailLatestNews news={news} backend={backend}/> | ||||
@@ -1,17 +1,10 @@ | |||||
import React from "react"; | import React from "react"; | ||||
// nodejs library that concatenates classes | |||||
import classNames from "classnames"; | import classNames from "classnames"; | ||||
// react components for routing our app without refresh | |||||
import Link from "next/link"; | |||||
// @material-ui/core components | |||||
import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
// @material-ui/icons | |||||
// core components | |||||
import Header from "components/Header/Header.js"; | import Header from "components/Header/Header.js"; | ||||
import HeaderLinks from "components/Header/HeaderLinks.js"; | import HeaderLinks from "components/Header/HeaderLinks.js"; | ||||
import Footer from "components/Footer/Footer.js"; | import Footer from "components/Footer/Footer.js"; | ||||
import GridContainer from "components/Grid/GridContainer.js"; | |||||
import GridItem from "components/Grid/GridItem.js"; | |||||
import DataProduct from "pages-sections/product/product.js"; | import DataProduct from "pages-sections/product/product.js"; | ||||
import Parallax from "components/Parallax/Parallax.js"; | import Parallax from "components/Parallax/Parallax.js"; | ||||
import styles from "assets/jss/nextjs-material-kit/pages/components.js"; | import styles from "assets/jss/nextjs-material-kit/pages/components.js"; | ||||
@@ -46,20 +39,7 @@ const Product = function ({ | |||||
}} | }} | ||||
{...rest} | {...rest} | ||||
/> | /> | ||||
<Parallax image={require("assets/img/Promotion_2-1.jpg")} width="200px"> | |||||
<div className={classes.container}> | |||||
<GridContainer> | |||||
<GridItem> | |||||
{/* <div className={classes.brand}> | |||||
<h1 className={classes.title}>NextJS Material Kit.</h1> | |||||
<h3 className={classes.subtitle}> | |||||
A Badass Material Kit based on Material-UI and NextJS. | |||||
</h3> | |||||
</div> */} | |||||
</GridItem> | |||||
</GridContainer> | |||||
</div> | |||||
</Parallax> | |||||
<Parallax image={require("assets/img/Promotion_2-1.jpg")} width="200px"/> | |||||
<div className={classNames(classes.main, classes.mainRaised)}> | <div className={classNames(classes.main, classes.mainRaised)}> | ||||
<DataProduct | <DataProduct | ||||
yamaha={yamaha} | yamaha={yamaha} | ||||
@@ -1,17 +1,10 @@ | |||||
import React from "react"; | import React from "react"; | ||||
// nodejs library that concatenates classes | |||||
import classNames from "classnames"; | import classNames from "classnames"; | ||||
// react components for routing our app without refresh | |||||
import Link from "next/link"; | |||||
// @material-ui/core components | |||||
import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
// @material-ui/icons | |||||
// core components | |||||
import Header from "components/Header/Header.js"; | import Header from "components/Header/Header.js"; | ||||
import HeaderLinks from "components/Header/HeaderLinks.js"; | import HeaderLinks from "components/Header/HeaderLinks.js"; | ||||
import Footer from "components/Footer/Footer.js"; | import Footer from "components/Footer/Footer.js"; | ||||
import GridContainer from "components/Grid/GridContainer.js"; | |||||
import GridItem from "components/Grid/GridItem.js"; | |||||
import ProductDetail from "pages-sections/product/product_details.js"; | import ProductDetail from "pages-sections/product/product_details.js"; | ||||
import Parallax from "components/Parallax/Parallax.js"; | import Parallax from "components/Parallax/Parallax.js"; | ||||
import styles from "assets/jss/nextjs-material-kit/pages/components.js"; | import styles from "assets/jss/nextjs-material-kit/pages/components.js"; | ||||
@@ -34,20 +27,7 @@ const ProductDetails = function ({ backend, detailproduct, ...props }) { | |||||
}} | }} | ||||
{...rest} | {...rest} | ||||
/> | /> | ||||
<Parallax image={require("assets/img/Promotion_2-1.jpg")} width="200px"> | |||||
<div className={classes.container}> | |||||
<GridContainer> | |||||
<GridItem> | |||||
{/* <div className={classes.brand}> | |||||
<h1 className={classes.title}>NextJS Material Kit.</h1> | |||||
<h3 className={classes.subtitle}> | |||||
A Badass Material Kit based on Material-UI and NextJS. | |||||
</h3> | |||||
</div> */} | |||||
</GridItem> | |||||
</GridContainer> | |||||
</div> | |||||
</Parallax> | |||||
<Parallax image={require("assets/img/Promotion_2-1.jpg")} width="200px"/> | |||||
<div className={classNames(classes.main, classes.mainRaised)}> | <div className={classNames(classes.main, classes.mainRaised)}> | ||||
<ProductDetail detailproduct={detailproduct} backend={backend}/> | <ProductDetail detailproduct={detailproduct} backend={backend}/> | ||||
</div> | </div> | ||||
@@ -1,215 +0,0 @@ | |||||
import React from "react"; | |||||
// nodejs library that concatenates classes | |||||
import classNames from "classnames"; | |||||
// @material-ui/core components | |||||
import { makeStyles } from "@material-ui/core/styles"; | |||||
// @material-ui/icons | |||||
import Camera from "@material-ui/icons/Camera"; | |||||
import Palette from "@material-ui/icons/Palette"; | |||||
import Favorite from "@material-ui/icons/Favorite"; | |||||
// core components | |||||
import Header from "components/Header/Header.js"; | |||||
import Footer from "components/Footer/Footer.js"; | |||||
import Button from "components/CustomButtons/Button.js"; | |||||
import GridContainer from "components/Grid/GridContainer.js"; | |||||
import GridItem from "components/Grid/GridItem.js"; | |||||
import HeaderLinks from "components/Header/HeaderLinks.js"; | |||||
import NavPills from "components/NavPills/NavPills.js"; | |||||
import Parallax from "components/Parallax/Parallax.js"; | |||||
import profile from "assets/img/faces/christian.jpg"; | |||||
import studio1 from "assets/img/examples/studio-1.jpg"; | |||||
import studio2 from "assets/img/examples/studio-2.jpg"; | |||||
import studio3 from "assets/img/examples/studio-3.jpg"; | |||||
import studio4 from "assets/img/examples/studio-4.jpg"; | |||||
import studio5 from "assets/img/examples/studio-5.jpg"; | |||||
import work1 from "assets/img/examples/olu-eletu.jpg"; | |||||
import work2 from "assets/img/examples/clem-onojeghuo.jpg"; | |||||
import work3 from "assets/img/examples/cynthia-del-rio.jpg"; | |||||
import work4 from "assets/img/examples/mariya-georgieva.jpg"; | |||||
import work5 from "assets/img/examples/clem-onojegaw.jpg"; | |||||
import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js"; | |||||
const useStyles = makeStyles(styles); | |||||
export default function ProfilePage(props) { | |||||
const classes = useStyles(); | |||||
const { ...rest } = props; | |||||
const imageClasses = classNames( | |||||
classes.imgRaised, | |||||
classes.imgRoundedCircle, | |||||
classes.imgFluid | |||||
); | |||||
const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); | |||||
return ( | |||||
<div> | |||||
<Header | |||||
color="transparent" | |||||
brand="NextJS Material Kit" | |||||
rightLinks={<HeaderLinks />} | |||||
fixed | |||||
changeColorOnScroll={{ | |||||
height: 200, | |||||
color: "white" | |||||
}} | |||||
{...rest} | |||||
/> | |||||
<Parallax small filter image={require("assets/img/profile-bg.jpg")} /> | |||||
<div className={classNames(classes.main, classes.mainRaised)}> | |||||
<div> | |||||
<div className={classes.container}> | |||||
<GridContainer justify="center"> | |||||
<GridItem xs={12} sm={12} md={6}> | |||||
<div className={classes.profile}> | |||||
<div> | |||||
<img src={profile} alt="..." className={imageClasses} /> | |||||
</div> | |||||
<div className={classes.name}> | |||||
<h3 className={classes.title}>Christian Louboutin</h3> | |||||
<h6>DESIGNER</h6> | |||||
<Button justIcon link className={classes.margin5}> | |||||
<i className={"fab fa-twitter"} /> | |||||
</Button> | |||||
<Button justIcon link className={classes.margin5}> | |||||
<i className={"fab fa-instagram"} /> | |||||
</Button> | |||||
<Button justIcon link className={classes.margin5}> | |||||
<i className={"fab fa-facebook"} /> | |||||
</Button> | |||||
</div> | |||||
</div> | |||||
</GridItem> | |||||
</GridContainer> | |||||
<div className={classes.description}> | |||||
<p> | |||||
An artist of considerable range, Chet Faker — the name taken by | |||||
Melbourne-raised, Brooklyn-based Nick Murphy — writes, performs | |||||
and records all of his own music, giving it a warm, intimate | |||||
feel with a solid groove structure.{" "} | |||||
</p> | |||||
</div> | |||||
<GridContainer justify="center"> | |||||
<GridItem xs={12} sm={12} md={8} className={classes.navWrapper}> | |||||
<NavPills | |||||
alignCenter | |||||
color="primary" | |||||
tabs={[ | |||||
{ | |||||
tabButton: "Studio", | |||||
tabIcon: Camera, | |||||
tabContent: ( | |||||
<GridContainer justify="center"> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
src={studio1} | |||||
className={navImageClasses} | |||||
/> | |||||
<img | |||||
alt="..." | |||||
src={studio2} | |||||
className={navImageClasses} | |||||
/> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
src={studio5} | |||||
className={navImageClasses} | |||||
/> | |||||
<img | |||||
alt="..." | |||||
src={studio4} | |||||
className={navImageClasses} | |||||
/> | |||||
</GridItem> | |||||
</GridContainer> | |||||
) | |||||
}, | |||||
{ | |||||
tabButton: "Work", | |||||
tabIcon: Palette, | |||||
tabContent: ( | |||||
<GridContainer justify="center"> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
src={work1} | |||||
className={navImageClasses} | |||||
/> | |||||
<img | |||||
alt="..." | |||||
src={work2} | |||||
className={navImageClasses} | |||||
/> | |||||
<img | |||||
alt="..." | |||||
src={work3} | |||||
className={navImageClasses} | |||||
/> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
src={work4} | |||||
className={navImageClasses} | |||||
/> | |||||
<img | |||||
alt="..." | |||||
src={work5} | |||||
className={navImageClasses} | |||||
/> | |||||
</GridItem> | |||||
</GridContainer> | |||||
) | |||||
}, | |||||
{ | |||||
tabButton: "Favorite", | |||||
tabIcon: Favorite, | |||||
tabContent: ( | |||||
<GridContainer justify="center"> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
src={work4} | |||||
className={navImageClasses} | |||||
/> | |||||
<img | |||||
alt="..." | |||||
src={studio3} | |||||
className={navImageClasses} | |||||
/> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
src={work2} | |||||
className={navImageClasses} | |||||
/> | |||||
<img | |||||
alt="..." | |||||
src={work1} | |||||
className={navImageClasses} | |||||
/> | |||||
<img | |||||
alt="..." | |||||
src={studio1} | |||||
className={navImageClasses} | |||||
/> | |||||
</GridItem> | |||||
</GridContainer> | |||||
) | |||||
} | |||||
]} | |||||
/> | |||||
</GridItem> | |||||
</GridContainer> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<Footer /> | |||||
</div> | |||||
); | |||||
} |