Coursespace homepage

package.json

@@ -19,7 +19,8 @@
     "react": "18.0.0",
     "react-dom": "18.0.0",
     "react-scroll": "^1.8.7",
-    "react-slick": "^0.29.0"
+    "react-slick": "^0.29.0",
+    "slick-carousel": "^1.8.1"
   },
   "devDependencies": {
     "@types/node": "17.0.25",

src/components/course/course-card-item.tsx

@@ -0,0 +1,78 @@
+import React, { FC } from 'react'
+import Image from 'next/image'
+import Box from '@mui/material/Box'
+import Rating from '@mui/material/Rating'
+import Typography from '@mui/material/Typography'
+import IconButton, { iconButtonClasses } from '@mui/material/IconButton'
+import ArrowForward from '@mui/icons-material/ArrowForward'
+import { Course } from '@/interfaces/course'
+
+interface Props {
+  item: Course
+}
+
+const CourseCardItem: FC<Props> = ({ item }) => {
+  return (
+    <Box
+      sx={{
+        px: 1,
+        py: 4,
+      }}
+    >
+      <Box
+        sx={{
+          p: 2,
+          backgroundColor: 'background.paper',
+          borderRadius: 4,
+          transition: (theme) => theme.transitions.create(['box-shadow']),
+          '&:hover': {
+            boxShadow: 2,
+            [`& .${iconButtonClasses.root}`]: {
+              backgroundColor: 'primary.main',
+              color: 'primary.contrastText',
+              boxShadow: 2,
+            },
+          },
+        }}
+      >
+        <Box
+          sx={{
+            lineHeight: 0,
+            overflow: 'hidden',
+            borderRadius: 3,
+            mb: 2,
+          }}
+        >
+          <Image src={item.cover} width={760} height={760} alt={'Course ' + item.id} />
+        </Box>
+        <Box sx={{ mb: 2 }}>
+          <Typography component="h2" variant="h5" sx={{ mb: 2, height: 56, overflow: 'hidden', fontSize: '1.2rem' }}>
+            {item.title}
+          </Typography>
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            <Rating name="rating-course" value={item.rating} max={5} sx={{ color: '#ffce31', mr: 1 }} readOnly />
+            <Typography component="span" variant="h5">
+              ({item.ratingCount})
+            </Typography>
+          </Box>
+        </Box>
+        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            <Typography variant="h5" color="primary.main">
+              {'$' + item.price}
+            </Typography>
+            <Typography variant="h6">/ course</Typography>
+          </Box>
+          <IconButton
+            color="primary"
+            sx={{ '&:hover': { backgroundColor: 'primary.main', color: 'primary.contrastText' } }}
+          >
+            <ArrowForward />
+          </IconButton>
+        </Box>
+      </Box>
+    </Box>
+  )
+}
+
+export default CourseCardItem

src/components/course/index.ts

@@ -0,0 +1 @@
+export { default as CourseCardItem } from './course-card-item'

src/components/footer/footer-navigation.tsx

@@ -0,0 +1,84 @@
+import React, { FC } from 'react'
+import Link from 'next/link'
+import Grid from '@mui/material/Grid'
+import MuiLink from '@mui/material/Link'
+import type { Navigation } from '@/interfaces/navigation'
+import { navigations as headerNavigations } from '@/components/navigation/navigation.data'
+import { FooterSectionTitle } from '@/components/footer'
+
+const courseMenu: Array<Navigation> = [
+  {
+    label: 'UI/UX Design',
+    path: '#',
+  },
+  {
+    label: 'Mobile Development',
+    path: '#',
+  },
+  {
+    label: 'Machine Learning',
+    path: '#',
+  },
+  {
+    label: 'Web Development',
+    path: '#',
+  },
+]
+
+const pageMenu = headerNavigations
+
+const companyMenu: Array<Navigation> = [
+  { label: 'Contact Us', path: '#' },
+  { label: 'Privacy & Policy', path: '#' },
+  { label: 'Term & Condition', path: '#' },
+  { label: 'FAQ', path: '#' },
+]
+
+interface NavigationItemProps {
+  label: string
+  path: string
+}
+
+const NavigationItem: FC<NavigationItemProps> = ({ label, path }) => {
+  return (
+    <Link href={path} passHref>
+      <MuiLink
+        underline="hover"
+        sx={{
+          display: 'block',
+          mb: 1,
+          color: 'primary.contrastText',
+        }}
+      >
+        {label}
+      </MuiLink>
+    </Link>
+  )
+}
+
+const FooterNavigation: FC = () => {
+  return (
+    <Grid container spacing={2}>
+      <Grid item xs={12} md={4}>
+        <FooterSectionTitle title="Course" />
+        {courseMenu.map(({ label, path }, index) => (
+          <NavigationItem key={index + path} label={label} path={/* path */ '#'} />
+        ))}
+      </Grid>
+      <Grid item xs={12} md={4}>
+        <FooterSectionTitle title="Menu" />
+        {pageMenu.map(({ label, path }, index) => (
+          <NavigationItem key={index + path} label={label} path={path} />
+        ))}
+      </Grid>
+      <Grid item xs={12} md={4}>
+        <FooterSectionTitle title="About" />
+        {companyMenu.map(({ label, path }, index) => (
+          <NavigationItem key={index + path} label={label} path={path} />
+        ))}
+      </Grid>
+    </Grid>
+  )
+}
+
+export default FooterNavigation

src/components/footer/footer-section-title.tsx

@@ -0,0 +1,25 @@
+import React, { FC } from 'react'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+
+interface Props {
+  title: string
+}
+
+const FooterSectionTitle: FC<Props> = ({ title }: Props) => {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        mb: 2,
+      }}
+    >
+      <Typography component="p" variant="h5" sx={{ mb: 1, color: 'primary.contrastText', fontWeight: '700' }}>
+        {title}
+      </Typography>
+    </Box>
+  )
+}
+
+export default FooterSectionTitle

src/components/footer/footer-social-links.tsx

@@ -0,0 +1,97 @@
+import React, { FC } from 'react'
+import Box from '@mui/material/Box'
+import Link from '@mui/material/Link'
+import { SocialLink } from '@/interfaces/social-link'
+
+export const socialLinks: SocialLink[] = [
+  {
+    name: 'Instagram',
+    link: '#',
+    icon: '/images/icons/instagram.svg',
+  },
+  {
+    name: 'YouTube',
+    link: '#',
+    icon: '/images/icons/youtube.svg',
+  },
+  {
+    name: 'Twitter',
+    link: '#',
+    icon: '/images/icons/twitter.svg',
+  },
+  {
+    name: 'Dribbble',
+    link: 'https://dribbble.com/shots/18114471-Coursespace-Online-Course-Landing-Page',
+    icon: '/images/icons/dribbble.svg',
+  },
+  {
+    name: 'Github',
+    link: 'https://github.com/hiriski/coursespace-landing-page',
+    icon: '/images/icons/github.svg',
+  },
+]
+
+interface SocialLinkItemProps {
+  item: SocialLink
+}
+
+const SocialLinkItem: FC<SocialLinkItemProps> = ({ item }) => (
+  <Box
+    component="li"
+    sx={{
+      display: 'inline-block',
+      color: 'primary.contrastText',
+      mr: 0.5,
+    }}
+  >
+    <Link
+      target="_blank"
+      sx={{
+        lineHeight: 0,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 36,
+        height: 36,
+        borderRadius: '50%',
+        color: 'inherit',
+        '&:hover': {
+          backgroundColor: 'secondary.main',
+        },
+        '& img': {
+          fill: 'currentColor',
+          width: 22,
+          height: 'auto',
+        },
+      }}
+      href={item.link}
+    >
+      {/* eslint-disable-next-line */}
+      <img src={item.icon} alt={item.name + 'icon'} />
+    </Link>
+  </Box>
+)
+
+// default
+const SocialLinks: FC = () => {
+  return (
+    <Box sx={{ ml: -1 }}>
+      <Box
+        component="ul"
+        sx={{
+          m: 0,
+          p: 0,
+          lineHeight: 0,
+          borderRadius: 3,
+          listStyle: 'none',
+        }}
+      >
+        {socialLinks.map((item) => {
+          return <SocialLinkItem key={item.name} item={item} />
+        })}
+      </Box>
+    </Box>
+  )
+}
+
+export default SocialLinks

src/components/footer/footer.tsx

@@ -0,0 +1,33 @@
+import React, { FC } from 'react'
+import Box from '@mui/material/Box'
+import Grid from '@mui/material/Grid'
+import Container from '@mui/material/Container'
+import Typography from '@mui/material/Typography'
+import { FooterNavigation, FooterSocialLinks } from '@/components/footer'
+
+const Footer: FC = () => {
+  return (
+    <Box component="footer" sx={{ backgroundColor: 'primary.main', py: 10, color: 'primary.contrastText' }}>
+      <Container>
+        <Grid container spacing={1}>
+          <Grid item xs={12} md={5}>
+            <Box sx={{ width: { xs: '100%', md: 360 } }}>
+              <Typography component="h2" variant="h2" sx={{ mb: 2 }}>
+                Coursespace
+              </Typography>
+              <Typography variant="subtitle1" sx={{ letterSpacing: 1, mb: 2 }}>
+                Coursespace is an online learning platform that has been operating since 2018 until now.
+              </Typography>
+              <FooterSocialLinks />
+            </Box>
+          </Grid>
+          <Grid item xs={12} md={7}>
+            <FooterNavigation />
+          </Grid>
+        </Grid>
+      </Container>
+    </Box>
+  )
+}
+
+export default Footer

src/components/footer/index.ts

@@ -0,0 +1,4 @@
+export { default as Footer } from './footer'
+export { default as FooterSectionTitle } from './footer-section-title'
+export { default as FooterNavigation } from './footer-navigation'
+export { default as FooterSocialLinks } from './footer-social-links'