add carrer fitur

api/carrer/carrer.js

@@ -0,0 +1,100 @@
+import apollo from "../../lib/apollo.js";
+
+async function GetCarrerS1(token="") {
+	var res = await apollo.query(
+		`
+        query {
+            carrers(where: {category: "S1"})
+                {
+                    id
+                    name
+                    description
+                    img{
+                    url
+                    }
+                    start_regis
+                    until_regis
+                    name_description
+                }
+            }`,
+		token
+	);
+	return res;
+}
+
+async function GetCarrerD3(token="") {
+	var res = await apollo.query(
+		`
+        query {
+            carrers(where: {category: "D3"})
+                {
+                    id
+                    name
+                    description
+                    img{
+                    url
+                    }
+                    start_regis
+                    until_regis
+                    name_description
+                }
+            }`,
+		token
+	);
+	return res;
+}
+
+async function GetCarrerSMA(token="") {
+	var res = await apollo.query(
+		`
+        query {
+            carrers(where: {category: "SMA"})
+                {
+                    id
+                    name
+                    description
+                    img{
+                    url
+                    }
+                    start_regis
+                    until_regis
+                    name_description
+                }
+            }`,
+		token
+	);
+	return res;
+}
+
+async function GetDetailCarrer(id, token="") {
+	var res = await apollo.query(
+		`
+        query($input: ID!){
+            carrers(where:{id:$input})
+            {
+                name
+                description
+                category
+                img{
+                    url
+                }
+                start_regis
+                until_regis
+                name_description
+            }
+        }		
+        `,
+        token, 
+        {	
+            "input": id
+        }
+    );
+	return res;
+}
+
+module.exports = {
+    GetCarrerS1:GetCarrerS1,
+    GetCarrerD3:GetCarrerD3,
+    GetCarrerSMA:GetCarrerSMA,
+    GetDetailCarrer:GetDetailCarrer,
+};

api/latest_news/news.js

@@ -12,6 +12,7 @@ async function GetNews(token="", start = 0) {
             img{
               url
             }
+            published_at
           }
         }
       `,
@@ -35,6 +36,7 @@ async function GetDetailNews(id, token="") {
             img{
               url
             }
+            published_at
           }
         }
       `,

components/Footer/footer.css

@@ -0,0 +1,370 @@
+.page-wrapper
+{
+      position: absolute;
+    bottom: 0;
+    width: 100%;
+    z-index: 11111;
+    top: 35px;
+}
+
+footer p, footer strong, footer b, footer {
+    color: #b0b0b0;
+}
+
+.footer-top {
+    background: #303030;
+    background-size: cover;
+    background-position: center;
+    padding: 0 0 20px;
+    font-family: rubik;
+  padding-top:30px;
+  
+}
+
+.footer-top, .footer-bottom {
+    background-color: #1c1f2f;
+}
+
+.footer-bottom {
+    padding: 15px 0;
+    border-top: 1px solid #313646;
+    background-color: #181828 !important;
+    color: #b0b0b0;
+    font-family: rubik;
+}
+
+.footer-site-info {
+    font-size: 92.86%;
+}
+#footer-navigation, #footer-navigation li a:hover, .custom-footer, .custom-footer li a:hover {
+    color: white;
+}
+
+#footer-navigation, #footer-navigation li a, .custom-footer, .custom-footer li a {
+    color: #99a9b5;
+    padding-top: 15px;
+}
+
+.footer-bottom ul {
+    margin: 0;
+}
+.inline-inside {
+    font-size: 0;
+    line-height: 0;
+}
+.clearfix:after, .clearfix:before {
+    content: "";
+    display: table;
+}
+#footer-menu li {
+    display: inline-block;
+    padding: 0 21px;
+    position: relative;
+    line-height: 1;
+}
+
+#footer-navigation, #footer-navigation li a, .custom-footer, .custom-footer li a {
+    color: #99a9b5;
+    padding-top: 15px;
+}
+
+#footer-navigation, #footer-navigation li a, .custom-footer, .custom-footer li a {
+    color: #99a9b5;
+    padding-top: 15px;
+}
+#footer-menu li+li:before {
+    content: '';
+    width: 0;
+    height: 100%;
+    position: absolute;
+    left: -1px;
+    top: 0;
+    font-size: 0;
+    border-left: 1px solid #232234;
+    border-right: 1px solid #333146;
+}
+
+
+navigation li a, .custom-footer, .custom-footer li a {
+    color: #99a9b5;
+    padding-top: 15px;
+}
+
+#footer-socials {
+    text-align: right;
+}
+
+#footer-socials .socials {
+    text-align: right;
+    margin: 0 -7px;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+a.socials-item {
+    display: inline-block;
+    vertical-align: top;
+    text-align: center;
+    -o-transition: all 0.3s;
+    -webkit-transition: all 0.3s;
+    transition: all 0.3s;
+    margin: 0 5px;
+    line-height: 16px;
+    padding: 10px;
+    border-radius: 50%;
+    background-color: #141421;
+    border: 1px solid #2e2e4c;
+    box-shadow: 3px 9px 16px rgb(0,0,0,0.4), -3px -3px 10px rgba(255,255,255, 0.06), inset 14px 14px 26px rgb(0,0,0,0.3), inset -3px -3px 15px rgba(255,255,255, 0.05);
+}
+
+.socials-item i {
+    display: inline-block;
+    font-weight: normal;
+    width: 1em;
+    height: 1em;
+    line-height: 1;
+    font-size: 16px;
+    text-align: center;
+    vertical-align: top;
+    font-feature-settings: normal;
+    font-kerning: auto;
+    font-language-override: normal;
+    font-size-adjust: none;
+    font-stretch: normal;
+    font-style: normal;
+    font-synthesis: weight style;
+    font-variant: normal;
+    font-weight: normal;
+    text-rendering: auto;
+}
+
+.facebook {
+    color: #4e64b5;
+}
+
+.twitter {
+    color: #00aced;
+}
+.instagram {
+    color: #9a8f62;
+}
+.youtube {
+    color: #c82929;
+}
+
+.telegram {
+    color: #2ca5e0;
+}
+
+
+a.socials-item:hover {
+    box-shadow: 0 0px 20px rgba(84, 1, 74, 0.7);
+    border-color: rgba(255, 6, 224, 0.61);
+    background: linear-gradient(to right, rgba(255, 9, 9, 0.12941176470588237), #c000ffb5, rgba(255, 0, 94, 0.14));
+}
+
+.footer-bottom a:hover {
+    color: white;
+}
+
+
+footer p, footer li {
+    font-size: 15px;
+    line-height: 22px;
+}
+
+
+.widget {
+    margin-bottom: 50px;
+}
+
+.footer-title {
+    margin-bottom: 40px;
+    color: #fff;
+    font-weight: 500;
+    text-transform: capitalize;
+    padding-bottom: 15px;
+    font-size: 16px;
+    position: relative;
+}
+
+.footer-title:after {
+    width: 50px;
+    background: #fff;
+    opacity: 0.2;
+    height: 1px;
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+}
+
+.gem-contacts-item {
+    padding-top: 10px;
+    font-size: 15px;
+}
+
+.gem-contacts-item i {
+    padding-right: 10px;
+}
+
+footer .widget ul {
+    list-style: none;
+    margin-top: 5px;
+}
+
+.posts li {
+    border-bottom: 1px solid #393d50;
+    padding-bottom: 12px;
+    padding-top: 6px;
+}
+
+footer p, footer li {
+    font-size: 15px;
+    line-height: 22px;
+}
+
+.gem-pp-posts-date {
+    color: #00bcd4;
+    font-size: 89.5%;
+}
+
+footer p {
+    line-height: 24px;
+    margin-bottom: 10px;font-size: 15px;
+}
+
+.wpcf7-form-control-wrap .wpcf7-form-control {
+    padding: 7px!important;
+    width: 100%;
+}
+
+.wpcf7-form-control-wrap input {
+    background: #1c1f2f;
+    overflow: hidden;
+    border: 1px solid #2e344d;
+    background-color: #1c1f2f;
+    box-shadow: 10px 10px 36px rgb(0,0,0,0.5), -13px -13px 23px rgba(255,255,255, 0.03);
+    border-radius: 5px;
+    transition: all 0.3s ease-in-out 0s;
+}
+
+.wpcf7-form-control-wrap input:hover {
+    background-color: transparent;
+    box-shadow: 10px 10px 36px rgb(0,0,0,0.5), -13px -13px 23px rgba(255,255,255, 0.03), inset 14px 14px 70px rgb(0,0,0,0.2), inset -15px -15px 30px rgba(255,255,255, 0.04);
+    border-color: rgba(255, 255, 255, 0.2);
+    color: white;
+}
+
+.wpcf7 .wpcf7-form .contact-form-footer textarea {
+    height: 160px;
+    width: 100%;
+}
+
+.wpcf7-form-control-wrap textarea:hover {
+    background-color: transparent;
+    box-shadow: 10px 10px 36px rgb(0,0,0,0.5), -13px -13px 23px rgba(255,255,255, 0.03), inset 14px 14px 70px rgb(0,0,0,0.2), inset -15px -15px 30px rgba(255,255,255, 0.04);
+    border-color: rgba(255, 255, 255, 0.2);
+    color: white;
+}
+
+.wpcf7-form-control-wrap textarea {
+    background: #1c1f2f;
+    overflow: hidden;
+    border: 1px solid #2e344d;
+    background-color: #1c1f2f;
+    box-shadow: 10px 10px 36px rgb(0,0,0,0.5), -13px -13px 23px rgba(255,255,255, 0.03);
+    border-radius: 5px;
+    transition: all 0.3s ease-in-out 0s;
+}
+
+textarea {
+    overflow: auto;
+    resize: vertical;
+}
+
+.wpcf7 .wpcf7-form .contact-form-footer .wpcf7-submit {
+    width: 100%;
+    padding: 11px;
+    margin: 0;
+    line-height: 0;
+}
+.wpcf7-form .contact-form-footer .wpcf7-submit {
+    background-color: #394050;
+    color: #99a9b5;
+    border: none;
+    cursor: pointer;
+    padding: 15px 40px;
+    font-size: 14px;
+    font-weight: 400;
+    transition: all 0.5s;
+    letter-spacing: 2px;
+    color: rgba(255,255,255,.5);
+    box-shadow: none;
+    text-transform: uppercase;
+    outline: none !important;
+    background-color: #1c1f2f;
+    border-radius: 5px;
+    min-width: 140px;
+    /* box-shadow: 10px 10px 36px rgb(0,0,0,0.5), -13px -13px 23px rgba(255,255,255, 0.03), inset 14px 14px 70px rgb(0,0,0,0.2), inset -15px -15px 30px rgba(255,255,255, 0.04); */
+    box-shadow: 3px 9px 16px rgb(0,0,0,0.4), -3px -3px 10px rgba(255,255,255, 0.06), inset 14px 14px 26px rgb(0,0,0,0.3), inset -3px -3px 15px rgba(255,255,255, 0.05);
+    border-width: 1px 0px 0px 1px;
+    border-style: solid;
+    border-color: #2e344d;
+    transition: all 0.3s ease-in-out 0s;
+}
+
+.wpcf7-form input[type=submit] {
+    height: 40px;
+    line-height: 21px;
+    padding: 10px 40px;
+    font-size: 14px;
+}
+
+.posts li a {
+    color: #99a9b5;
+}
+
+.wpcf7-form .contact-form-footer .wpcf7-submit:hover {
+    box-shadow: 0 0px 20px rgba(84, 1, 74, 0.7);
+    border-color: rgba(255, 6, 224, 0.61);
+    background: linear-gradient(to right, rgba(255, 9, 9, 0.12941176470588237), #c000ffb5, rgba(255, 0, 94, 0.14));
+    color: white;
+}
+
+img {
+    border-style: none;
+    height: auto;
+    max-width: 100%;
+    vertical-align: middle;
+}
+.widget_gallery a {
+    display: inline-block;
+}
+footer .widget ul {
+    list-style: none;
+    margin-top: 5px;
+}
+.widget_gallery ul {
+    padding-left: 0;
+    display: table;
+}
+
+.widget_gallery li {
+    display: inline-block;
+    width: 33.33%;
+    transition: all 0.5s;
+    -webkit-transition: all 0.5s;
+    -moz-transition: all 0.5s;
+    -o-transition: all 0.5s;
+    padding: 2px;
+}
+
+.widget_gallery.gallery-grid-4 li {
+    width: 30%;
+}
+
+.footer-site-info
+{
+  padding-top: 10px;
+}

pages-sections/SectionCarrer.js

@@ -1,104 +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 Dashboard from "@material-ui/icons/Dashboard";
-import LocalGroceryStoreIcon from "@material-ui/icons/LocalGroceryStore";
-
-// Component
-import GridContainer from "components/Grid/GridContainer.js";
-import GridItem from "components/Grid/GridItem.js";
-import NavPills from "components/NavPills/NavPills.js";
-import Card from "components/Card/Card.js";
-import CardBody from "components/Card/CardBody.js";
-import CardHeader from "components/Card/CardHeader.js";
-import CardFooter from "components/Card/CardFooter.js";
-import Button from "components/CustomButtons/Button.js";
-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 (
-    <Card className={classes.textCenter}>
-    <div align="center">
-      <CardHeader color="info">Thamrin Group Carrer</CardHeader>
-    </div>
-    <CardBody>
-      <div align="center">
-        <h2>Carrer & Job Vacancies</h2>
-      </div>
-      <GridContainer justify="center">
-        <GridItem>
-          <NavPills
-            alignCenter
-            color="primary"
-            tabs={[
-              {
-                tabButton: "S1 & D3",
-                tabIcon: Dashboard,
-                tabContent: (
-                  <GridContainer justify="center">
-                  </GridContainer>
-                ),
-              },
-              {
-                tabButton: "SMA / SMK / MA",
-                tabIcon: Dashboard,
-                tabContent: (
-                  <GridContainer justify="center">
-                    
-                  </GridContainer>
-                ),
-              },
-              {
-                tabButton: "Information",
-                tabIcon: Dashboard,
-                tabContent: (
-                  <GridContainer justify="center">
-
-                  </GridContainer>
-                ),
-              },
-              {
-                tabButton: "Reqruitment Process",
-                tabIcon: Dashboard,
-                tabContent: (
-                  <GridContainer justify="center">
-                    <GridItem>
-                    <div align="center">
-                      <img
-                        alt="..."
-                        style={{ width: "1000px", height: "800px", display: "block" }}
-                        src=" https://www.yamaha-motor.co.id/uploads/career/big_img/5d305eca19dfb8171.jpg"
-                        className={navImageClasses}
-                      />
-                    </div>
-                    </GridItem>
-                  </GridContainer>
-                ),
-              },
-            ]}
-          />
-        </GridItem>
-      </GridContainer>
-    </CardBody>
-    <CardFooter className={classes.textMuted} textAlign="center">
-      © 2020 , All Right Reserved by @Thamrin Brother Company
-    </CardFooter>
-  </Card>
-  );
-}

pages-sections/carrer/carrer.js

@@ -0,0 +1,163 @@
+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";
+import Card from "components/Card/Card.js";
+import CardBody from "components/Card/CardBody.js";
+import CardHeader from "components/Card/CardHeader.js";
+import Quote from "components/Typography/Quote.js"
+import Grid from '@material-ui/core/Grid';
+import Button from "components/CustomButtons/Button.js";
+import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js";
+import Icon from "@material-ui/core/Icon";
+
+const useStyles = makeStyles(styles);
+
+const DataCarrers = function ({ backend, s1, d3, sma, ...props }) {
+  const classes = useStyles();
+  const { ...rest } = props;
+  const imageClasses = classNames(
+    classes.imgRaised,
+    classes.imgRoundedCircle,
+    classes.imgFluid
+  );
+  const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
+  const CarrerS1 = s1.map((data) => {
+    return (
+      <Grid style={{width:"600px", padding:"30px"}}>
+        <Card>
+          <CardHeader color="danger"><div align="center">{data.name}</div></CardHeader>
+          <CardBody>
+            <Quote
+              text={data.name_description}
+              author="Post By Thamrin Group"
+            />
+            Masa Pendaftaran : {data.start_regis} s/d {data.until_regis}
+            <Button color="danger" style={{marginLeft:"20px"}} round href={"/carrer_details?s="+data.id}>
+                <Icon className={classes.icons}>open_in_new</Icon>Detail Carrer
+            </Button>
+          </CardBody>
+        </Card>
+      </Grid>
+    );
+  })
+  const CarrerD3 = d3.map((data) => {
+    return (
+      <Grid style={{width:"600px", padding:"30px"}}>
+        <Card>
+          <CardHeader color="danger">{data.name}</CardHeader>
+          <CardBody>
+            <Quote
+              text={data.name_description}
+              author="Post By Thamrin Group"
+            />
+            Masa Pendaftaran : {data.start_regis} s/d {data.until_regis}
+            <Button color="danger" style={{marginLeft:"20px"}} round href={"/carrer_details?s="+data.id}>
+                <Icon className={classes.icons}>open_in_new</Icon>Detail Carrer
+            </Button>
+          </CardBody>
+        </Card>
+      </Grid>
+    );
+  })
+  const CarrerSMA = sma.map((data) => {
+    return (
+      <Grid style={{width:"600px", padding:"30px"}}>
+        <Card>
+          <CardHeader justify="center" color="danger">{data.name}</CardHeader>
+          <CardBody>
+            <Quote
+              text={data.name_description}
+              author="Post By Thamrin Group"
+            />
+            Masa Pendaftaran : {data.start_regis} s/d {data.until_regis}
+            <Button color="danger" style={{marginLeft:"20px"}} round href={"/carrer_details?s="+data.id}>
+                <Icon className={classes.icons}>open_in_new</Icon>Detail Carrer
+            </Button>
+          </CardBody>
+        </Card>
+      </Grid>
+    );
+  })
+  return (
+    <Card className={classes.textCenter}>
+      <div align="center">
+        <CardHeader color="info">Product</CardHeader>
+      </div>
+      <CardBody>
+        <div align="center">
+          <h2>Carrer & Job Vacancies</h2>
+        </div>
+          <GridContainer justify="center">
+            <GridItem>
+              <NavPills
+                alignCenter
+                color="primary"
+                tabs={[
+                  {
+                    tabButton: "S1",
+                    tabIcon: Dashboard,
+                    tabContent: (
+                      <GridContainer justify="center">
+                        {CarrerS1}{CarrerS1}{CarrerS1}
+                      </GridContainer>
+                    ),
+                  },
+                  {
+                    tabButton: "D3",
+                    tabIcon: Dashboard,
+                    tabContent: (
+                      <GridContainer justify="center">
+                        {CarrerD3}
+                        {CarrerD3}
+                      </GridContainer>
+                    ),
+                  },
+                  {
+                    tabButton: "SMA / SMK ",
+                    tabIcon: Dashboard,
+                    tabContent: (
+                      <GridContainer justify="center">
+                        {CarrerSMA}
+                      </GridContainer>
+                    ),
+                  },
+                  {
+                    tabButton: "Recruitment Process",
+                    tabIcon: Dashboard,
+                    tabContent: (
+                      <GridContainer justify="center">
+                        <GridItem>
+                        <div align="center">
+                          <img
+                            alt="..."
+                            style={{ width: "1000px", height: "800px", display: "block" }}
+                            src=" https://www.yamaha-motor.co.id/uploads/career/big_img/5d305eca19dfb8171.jpg"
+                            className={navImageClasses}
+                          />
+                        </div>
+                        </GridItem>
+                      </GridContainer>
+                    ),
+                  },
+                ]}
+              />
+            </GridItem>
+          </GridContainer>
+      </CardBody>
+    </Card>
+  );
+}
+
+export default DataCarrers;

pages-sections/carrer/carrer_details.js

@@ -0,0 +1,40 @@
+import React, { useState, useEffect } 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";
+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>
+            <CardHeader color="info"><h3><div align="center">{data.name}</div></h3></CardHeader>
+            <CardBody>
+                <div align="center">
+                    <img src={`${backend}${data.img[0]["url"]}`} alt="First slide" className="slick-image" />
+                </div>
+                <h5 align="center">Masa Pendaftaran : {data.start_regis} s/d {data.until_regis}</h5>
+                <h5 align="center">Syarat & Tata Cara Pendaftaran :</h5>
+                <h5 align="center" align="justify">
+                    {data.description}
+                </h5>
+            </CardBody>
+        </Card>
+        );
+    })
+    return (
+        <div>
+            {carrer}
+        </div>
+    );
+}
+
+export default DataCarrer;

pages-sections/latest_news/news.js

@@ -75,18 +75,16 @@ const DataLatestNews = function ({ backend, news, ...props }) {
       </div>
       <div align="center">
         <Paginations
-          color="info"
           pages={[
+            { text: "PREV" },
             { text: 1 },
-            { text: "..." },
+            { text: 2 },
+            { active: true, text: 3 },
+            { text: 4 },
             { text: 5 },
-            { text: 6 },
-            { active: true, text: 7 },
-            { text: 8 },
-            { text: 9 },
-            { text: "..." },
-            { text: 12 }
+            { text: "NEXT" }
           ]}
+          color="info"
         />
       </div>
     </div>

pages-sections/latest_news/news_details.js

@@ -44,7 +44,10 @@ const DataLatestNews = function ({ backend, news, ...props }) {
             </div><br></br><br></br>
             <div align="center">
                 <img src={`${backend}${data.img[0]["url"]}`} alt="First slide" className="slick-image" />
-            </div><br></br><br></br>
+                <div><br></br>
+                {data.published_at}
+                </div>
+            </div><br></br>
             <h5 align="justify">
                 {data.description}
             </h5>

pages-sections/product/product_details.js

@@ -41,7 +41,7 @@ const DataProduct = function ({ backend, detailproduct, ...props })  {
           <Grid>
             <div className={classes.section}>
               <div className={classes.container}>
-                <Card style={{width:"500px", height:"400px"}}>
+                <Card style={{width:"700px", height:"400px"}}>
                     <div>
                       <img className={navImageClasses} width="300px" height="400px" alt="First slide" src={`${backend}${data.img[0]["url"]}`} />
                     </div>
@@ -61,6 +61,7 @@ const DataProduct = function ({ backend, detailproduct, ...props })  {
           <NavPills
               color="primary"
               align="center"
+              alignCenter
               tabs={[
                 {
                   tabButton: "Overview",

pages/carrer.js

@@ -12,13 +12,14 @@ 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/SectionCarrer.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";
+import Getcarrer from "../api/carrer/carrer.js"
 
 const useStyles = makeStyles(styles);
 
-export default function Components(props) {
+const Carrer = function ({ backend, s1, d3, sma, ...props }) {
   const classes = useStyles();
   const { ...rest } = props;
   return (
@@ -33,7 +34,7 @@ export default function Components(props) {
         }}
         {...rest}
       />
-      <Parallax image={require("assets/img/carrer.jpg")} width="100px">
+      <Parallax image={require("assets/img/carrer.png")} height="50px">
         <div className={classes.container}>
           <GridContainer>
             <GridItem>
@@ -48,9 +49,37 @@ export default function Components(props) {
         </div>
       </Parallax>
       <div className={classNames(classes.main, classes.mainRaised)}>
-        <SectionCarrer />  
+        <SectionCarrer s1={s1} d3={d3} sma={sma} backend={backend}/>  
       </div>
       <Footer />
     </div>
   );
 }
+
+export default Carrer;
+
+export async function getServerSideProps(context) {
+  var s1 = [];
+  var d3 = [];
+  var sma = [];
+  const backend = process.env.BACKEND_SERVER_URI;
+
+  var res = await Getcarrer.GetCarrerS1();
+	if (res["STATUS"] === 1) {
+		s1 = res["DATA"]["carrers"];
+	}
+
+  var res = await Getcarrer.GetCarrerD3();
+	if (res["STATUS"] === 1) {
+		d3 = res["DATA"]["carrers"];
+	}
+
+  var res = await Getcarrer.GetCarrerSMA();
+	if (res["STATUS"] === 1) {
+		sma = res["DATA"]["carrers"];
+	}
+
+	return {
+		props: { s1, d3, sma, backend }, // will be passed to the page component as props
+	};
+}

pages/carrer_details.js

@@ -0,0 +1,76 @@
+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";
+import GetDetailcarrer from "../api/carrer/carrer.js"
+
+const useStyles = makeStyles(styles);
+
+const CarrerDetails = function ({ backend, detailcarrer, ...props })  {
+    const classes = useStyles();
+    const { ...rest } = props;
+    return (
+        <div>
+        <Header
+            rightLinks={<HeaderLinks/>}
+            fixed
+            color="info"
+            changeColorOnScroll={{
+            height: 400,
+            color: "white"
+            }}
+            {...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>
+        <div className={classNames(classes.main, classes.mainRaised)}>
+            <CarrerDetail detailcarrer={detailcarrer} backend={backend}/>  
+        </div>
+        <Footer />
+        </div>
+    );
+}
+
+export default CarrerDetails;
+
+export async function getServerSideProps(context) {
+    var {query} = context;
+	var detailcarrer = [];
+    const backend = process.env.BACKEND_SERVER_URI;
+
+	var res = await GetDetailcarrer.GetDetailCarrer(query.s||0);
+	if (res["STATUS"] === 1) {
+		detailcarrer = res["DATA"]["carrers"];
+	}
+
+    console.log(res);
+
+	return {
+		props: { detailcarrer, backend }, // will be passed to the page component as props
+	};
+}

pages/login.js

@@ -36,8 +36,7 @@ export default function LoginPage(props) {
     <div>
       <Header
         absolute
-        color="transparent"
-        brand="Thamrin Brothers"
+        color="info"
         rightLinks={<HeaderLinks />}
         {...rest}
       />