@@ -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"; | |||
// @material-ui/core components | |||
import { makeStyles } from "@material-ui/core/styles"; | |||
// component | |||
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | |||
import Card from "components/Card/Card.js"; | |||
import CardBody from "components/Card/CardBody.js"; | |||
@@ -1,9 +1,6 @@ | |||
import React from "react"; | |||
// @material-ui/core components | |||
import { makeStyles } from "@material-ui/core/styles"; | |||
// component | |||
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | |||
import Card from "components/Card/Card.js"; | |||
import CardBody from "components/Card/CardBody.js"; | |||
@@ -1,9 +1,6 @@ | |||
import React from "react"; | |||
// @material-ui/core components | |||
import { makeStyles } from "@material-ui/core/styles"; | |||
// component | |||
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | |||
import Card from "components/Card/Card.js"; | |||
import CardBody from "components/Card/CardBody.js"; | |||
@@ -1,9 +1,6 @@ | |||
import React from "react"; | |||
// @material-ui/core components | |||
import { makeStyles } from "@material-ui/core/styles"; | |||
// component | |||
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | |||
import Card from "components/Card/Card.js"; | |||
import CardBody from "components/Card/CardBody.js"; | |||
@@ -1,9 +1,6 @@ | |||
import React from "react"; | |||
// @material-ui/core components | |||
import { makeStyles } from "@material-ui/core/styles"; | |||
// component | |||
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | |||
import Card from "components/Card/Card.js"; | |||
import CardBody from "components/Card/CardBody.js"; | |||
@@ -1,9 +1,6 @@ | |||
import React from "react"; | |||
// @material-ui/core components | |||
import { makeStyles } from "@material-ui/core/styles"; | |||
// component | |||
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | |||
import Card from "components/Card/Card.js"; | |||
import CardBody from "components/Card/CardBody.js"; | |||
@@ -1,9 +1,6 @@ | |||
import React from "react"; | |||
// @material-ui/core components | |||
import { makeStyles } from "@material-ui/core/styles"; | |||
// component | |||
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | |||
import Card from "components/Card/Card.js"; | |||
import CardBody from "components/Card/CardBody.js"; | |||
@@ -1,9 +1,6 @@ | |||
import React from "react"; | |||
// @material-ui/core components | |||
import { makeStyles } from "@material-ui/core/styles"; | |||
// component | |||
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | |||
import Card from "components/Card/Card.js"; | |||
import CardBody from "components/Card/CardBody.js"; | |||
@@ -1,15 +1,9 @@ | |||
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 Dashboard from "@material-ui/icons/Dashboard"; | |||
// Component | |||
import GridContainer from "components/Grid/GridContainer.js"; | |||
import GridItem from "components/Grid/GridItem.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 parse from 'react-html-parser'; | |||
// component | |||
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | |||
import Card from "components/Card/Card.js"; | |||
import CardBody from "components/Card/CardBody.js"; | |||
import CardHeader from "components/Card/CardHeader.js"; | |||
const useStyles = makeStyles(styles); | |||
const DataCarrer = function ({ backend, detailcarrer, ...props }) { | |||
const classes = useStyles(); | |||
const carrer = detailcarrer.map((data) => { | |||
return ( | |||
<Card> | |||
@@ -24,9 +17,7 @@ const DataCarrer = function ({ backend, detailcarrer, ...props }) { | |||
</div> | |||
<h5 align="center">Masa Pendaftaran : {data.start_regis} s/d {data.until_regis}</h5> | |||
<h5 align="center" align="justify"> | |||
<div> | |||
{ parse () } | |||
</div> | |||
parse({data.description}) | |||
</h5> | |||
</CardBody> | |||
</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"; | |||
// @material-ui/core components | |||
import { makeStyles } from "@material-ui/core/styles"; | |||
import GridContainer from "components/Grid/GridContainer.js"; | |||
import Grid from '@material-ui/core/Grid'; | |||
import Paper from '@material-ui/core/Paper'; | |||
import Card from "components/Card/Card.js"; | |||
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | |||
@@ -1,15 +1,10 @@ | |||
import React from "react"; | |||
// @material-ui/core components | |||
import { makeStyles } from "@material-ui/core/styles"; | |||
// Component | |||
import GridContainer from "components/Grid/GridContainer.js"; | |||
import GridItem from "components/Grid/GridItem.js"; | |||
import Card from "components/Card/Card.js"; | |||
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | |||
// react component for creating beautiful carousel | |||
import Carousel from "react-slick"; | |||
const useStyles = makeStyles(styles); | |||
@@ -1,15 +1,10 @@ | |||
import React from "react"; | |||
// @material-ui/core components | |||
import { makeStyles } from "@material-ui/core/styles"; | |||
// Component | |||
import GridContainer from "components/Grid/GridContainer.js"; | |||
import GridItem from "components/Grid/GridItem.js"; | |||
import Card from "components/Card/Card.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 image1 from "assets/img/core1.png"; | |||
@@ -1,6 +1,4 @@ | |||
import React from "react"; | |||
// @material-ui/core components | |||
import { makeStyles } from "@material-ui/core/styles"; | |||
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 ReactPaginate from 'react-paginate'; | |||
// component | |||
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"; | |||
@@ -19,29 +14,6 @@ import Icon from "@material-ui/core/Icon"; | |||
const useStyles = makeStyles(styles); | |||
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 latnews = news.map((data) => { | |||
return ( | |||
@@ -53,7 +25,6 @@ const DataLatestNews = function ({ backend, news, ...props }) { | |||
src={`${backend}${data.img[0]["url"]}`} | |||
/> | |||
<CardBody> | |||
{/* <h4 className={classes.cardTitle}>{data.title}</h4> */} | |||
<p>{data.title}</p> | |||
<Button color="info" round href={"/latestnews_details?s="+data.id}> | |||
<Icon className={classes.icons}>open_in_new</Icon>Read More | |||
@@ -1,40 +1,12 @@ | |||
import React, { useState, useEffect } from 'react'; | |||
import Router, { withRouter } from 'next/router' | |||
// @material-ui/core components | |||
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 Paginations from "components/Pagination/Pagination.js"; | |||
const useStyles = makeStyles(styles); | |||
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 latnews = news.map((data) => { | |||
return ( | |||
@@ -1,15 +1,9 @@ | |||
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 Dashboard from "@material-ui/icons/Dashboard"; | |||
// Component | |||
import GridContainer from "components/Grid/GridContainer.js"; | |||
import GridItem from "components/Grid/GridItem.js"; | |||
import NavPills from "components/NavPills/NavPills.js"; | |||
@@ -1,16 +1,10 @@ | |||
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 Dashboard from "@material-ui/icons/Dashboard"; | |||
import LocalGroceryStoreIcon from "@material-ui/icons/LocalGroceryStore"; | |||
// Component | |||
import GridContainer from "components/Grid/GridContainer.js"; | |||
import Grid from '@material-ui/core/Grid'; | |||
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 ReactDOM from "react-dom"; | |||
import App from "next/app"; | |||
@@ -1,17 +1,10 @@ | |||
import React from "react"; | |||
// nodejs library that concatenates classes | |||
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"; | |||
// @material-ui/icons | |||
// core components | |||
import Header from "components/Header/Header.js"; | |||
import HeaderLinks from "components/Header/HeaderLinks.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 Parallax from "components/Parallax/Parallax.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} | |||
/> | |||
<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)}> | |||
<SectionCarrer s1={s1} d3={d3} sma={sma} backend={backend}/> | |||
</div> | |||
@@ -1,17 +1,10 @@ | |||
import React from "react"; | |||
// nodejs library that concatenates classes | |||
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"; | |||
// @material-ui/icons | |||
// core components | |||
import Header from "components/Header/Header.js"; | |||
import HeaderLinks from "components/Header/HeaderLinks.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 Parallax from "components/Parallax/Parallax.js"; | |||
import styles from "assets/jss/nextjs-material-kit/pages/components.js"; | |||
@@ -34,20 +27,7 @@ const CarrerDetails = function ({ backend, detailcarrer, ...props }) { | |||
}} | |||
{...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)}> | |||
<CarrerDetail detailcarrer={detailcarrer} backend={backend}/> | |||
</div> | |||
@@ -1,17 +1,10 @@ | |||
import React from "react"; | |||
// nodejs library that concatenates classes | |||
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"; | |||
// @material-ui/icons | |||
// core components | |||
import Header from "components/Header/Header.js"; | |||
import HeaderLinks from "components/Header/HeaderLinks.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 Parallax from "components/Parallax/Parallax.js"; | |||
import styles from "../assets/jss/nextjs-material-kit/pages/components.js"; | |||
@@ -33,20 +26,7 @@ export default function Components(props) { | |||
}} | |||
{...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)}> | |||
{/* <SectionChart /> */} | |||
</div> | |||
@@ -1,25 +1,16 @@ | |||
import React from "react"; | |||
// nodejs library that concatenates classes | |||
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"; | |||
// @material-ui/icons | |||
// core components | |||
import Header from "components/Header/Header.js"; | |||
import HeaderLinks from "components/Header/HeaderLinks.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 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 Getservices from "../api/home/service.js"; | |||
import Getcarousels from "../api/home/carousel.js"; | |||
import DataSnackbarContent from "../pages-sections/snackbar.js"; | |||
import DataCarousel from "../pages-sections/home/carousel.js"; | |||
import DataService from "../pages-sections/home/service.js"; | |||
@@ -50,31 +41,7 @@ const Home = function ({ | |||
}} | |||
{...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)}> | |||
<DataSnackbarContent /> | |||
<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"; | |||
// nodejs library that concatenates classes | |||
import classNames from "classnames"; | |||
// @material-ui/core components | |||
import { makeStyles } from "@material-ui/core/styles"; | |||
// core components | |||
import Header from "components/Header/Header.js"; | |||
import HeaderLinks from "components/Header/HeaderLinks.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 styles from "assets/jss/nextjs-material-kit/pages/components.js"; | |||
@@ -37,20 +30,7 @@ const LatestNews = function ({ backend, news, ...props }) { | |||
}} | |||
{...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)}> | |||
<DataSnackbarContent/> | |||
<DataLatestNews news={news} backend={backend}/> | |||
@@ -1,17 +1,10 @@ | |||
import React from "react"; | |||
// nodejs library that concatenates classes | |||
import classNames from "classnames"; | |||
// @material-ui/core components | |||
import { makeStyles } from "@material-ui/core/styles"; | |||
// core components | |||
import Header from "components/Header/Header.js"; | |||
import HeaderLinks from "components/Header/HeaderLinks.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 styles from "assets/jss/nextjs-material-kit/pages/components.js"; | |||
@@ -37,20 +30,7 @@ const detailLatestNews = function ({ backend, news, ...props }) { | |||
}} | |||
{...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)}> | |||
<DataSnackbarContent/> | |||
<DetailLatestNews news={news} backend={backend}/> | |||
@@ -1,17 +1,10 @@ | |||
import React from "react"; | |||
// nodejs library that concatenates classes | |||
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"; | |||
// @material-ui/icons | |||
// core components | |||
import Header from "components/Header/Header.js"; | |||
import HeaderLinks from "components/Header/HeaderLinks.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 Parallax from "components/Parallax/Parallax.js"; | |||
import styles from "assets/jss/nextjs-material-kit/pages/components.js"; | |||
@@ -46,20 +39,7 @@ const Product = function ({ | |||
}} | |||
{...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)}> | |||
<DataProduct | |||
yamaha={yamaha} | |||
@@ -1,17 +1,10 @@ | |||
import React from "react"; | |||
// nodejs library that concatenates classes | |||
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"; | |||
// @material-ui/icons | |||
// core components | |||
import Header from "components/Header/Header.js"; | |||
import HeaderLinks from "components/Header/HeaderLinks.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 Parallax from "components/Parallax/Parallax.js"; | |||
import styles from "assets/jss/nextjs-material-kit/pages/components.js"; | |||
@@ -34,20 +27,7 @@ const ProductDetails = function ({ backend, detailproduct, ...props }) { | |||
}} | |||
{...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)}> | |||
<ProductDetail detailproduct={detailproduct} backend={backend}/> | |||
</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> | |||
); | |||
} |