├── .eslintrc.json ├── .gitignore ├── .prettierrc.json ├── .vscode └── settings.json ├── README.md ├── next-env.d.ts ├── next.config.js ├── package.json ├── public ├── favicon.ico ├── images │ ├── avatars │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ └── 5.jpg │ ├── certificate.png │ ├── companies │ │ ├── airbnb.png │ │ ├── google.png │ │ ├── grab.png │ │ └── microsoft.png │ ├── course-space-shape.svg │ ├── courses │ │ ├── a9e7b27a0c5e986a22416d79e2e9dba9.jpg │ │ ├── alvaro-reyes-qWwpHwip31M-unsplash.jpg │ │ ├── annie-spratt-QckxruozjRg-unsplash.jpg │ │ ├── christopher-gower-m_HRfLhgABo-unsplash.jpg │ │ ├── grovemade-RvPDe41lYBA-unsplash.jpg │ │ ├── sai-kiran-anagani-5Ntkpxqt54Y-unsplash.jpg │ │ ├── stillness-inmotion-Jh6aQX-25Uo-unsplash.jpg │ │ ├── stillness-inmotion-YSCCnRGrD-4-unsplash.jpg │ │ └── true-agency-o4UhdLv5jbQ-unsplash.jpg │ ├── daniel-korpai-pKRNxEguRgM-unsplash.jpg │ ├── headline-curve.svg │ ├── home-feature.png │ ├── home-hero.jpg │ ├── home-testimonial.png │ ├── icons │ │ ├── dribbble.svg │ │ ├── github.svg │ │ ├── instagram.svg │ │ ├── twitter.svg │ │ └── youtube.svg │ ├── image_processing20220419-31825-1yzr3x9.png │ ├── mentors │ │ ├── christian-buehner-DItYlc26zVI-unsplash.jpg │ │ ├── jonas-kakaroto-KIPqvvTOC1s-unsplash.jpg │ │ ├── noah-buscher-8A7fD6Y5VF8-unsplash.jpg │ │ └── philip-martin-5aGUyCW_PJw-unsplash.jpg │ └── shape.png └── vercel.svg ├── src ├── components │ ├── course │ │ ├── course-card-item.tsx │ │ └── index.ts │ ├── footer │ │ ├── footer-navigation.tsx │ │ ├── footer-section-title.tsx │ │ ├── footer-social-links.tsx │ │ ├── footer.tsx │ │ └── index.ts │ ├── header │ │ ├── header.tsx │ │ └── index.ts │ ├── hello.tsx │ ├── home │ │ ├── feature.data.tsx │ │ ├── feature.tsx │ │ ├── hero.tsx │ │ ├── index.ts │ │ ├── mentors.data.ts │ │ ├── mentors.tsx │ │ ├── newsletter.tsx │ │ ├── popular-course.data.ts │ │ ├── popular-courses.tsx │ │ ├── testimonial.data.ts │ │ └── testimonial.tsx │ ├── layout │ │ ├── index.ts │ │ └── main-layout.tsx │ ├── logo │ │ ├── index.ts │ │ └── logo.tsx │ ├── mentor │ │ ├── index.ts │ │ └── mentor-card-item.tsx │ ├── navigation │ │ ├── auth-navigation.tsx │ │ ├── index.ts │ │ ├── navigation.data.ts │ │ └── navigation.tsx │ ├── styled-button │ │ ├── index.ts │ │ └── styled-button.tsx │ └── testimonial │ │ ├── index.ts │ │ └── testimonial-item.tsx ├── config │ └── theme │ │ ├── index.ts │ │ ├── palette-base.ts │ │ ├── palette-dark.ts │ │ ├── palette-light.ts │ │ ├── shadows.ts │ │ └── typography.ts ├── interfaces │ ├── course.ts │ ├── layout.ts │ ├── mentor.ts │ ├── navigation.ts │ ├── social-link.ts │ ├── testimonial.ts │ └── user.ts ├── pages │ ├── _app.tsx │ ├── _document.tsx │ └── index.tsx ├── providers │ ├── index.ts │ └── mui-provider.tsx ├── styles │ ├── globals.css │ └── react-slick.css └── utils │ ├── emotion-cache.ts │ └── index.ts ├── tsconfig.json └── yarn.lock /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es2021": true 5 | }, 6 | "extends": ["plugin:@typescript-eslint/recommended", "next", "next/core-web-vitals", "prettier"], 7 | "parser": "@typescript-eslint/parser", 8 | "parserOptions": { 9 | "ecmaFeatures": { 10 | "jsx": true 11 | }, 12 | "ecmaVersion": 12, 13 | "sourceType": "module" 14 | }, 15 | "plugins": ["@typescript-eslint"], 16 | "rules": { 17 | "prefer-const": "error", 18 | "react/jsx-props-no-spreading": "off", 19 | "@typescript-eslint/explicit-function-return-type": ["error", { "allowExpressions": true }], 20 | "react/jsx-filename-extension": ["warn", { "extensions": [".tsx"] }] 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "useTabs": false, 4 | "tabWidth": 2, 5 | "semi": false, 6 | "singleQuote": true, 7 | "endOfLine": "auto", 8 | "printWidth": 120 9 | } 10 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.formatOnSave": true, 3 | "editor.defaultFormatter": "esbenp.prettier-vscode", 4 | "editor.codeActionsOnSave": { 5 | "source.fixAll.eslint": true 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | Coursespace - React Online Course Landing Page 4 | 5 |
6 |

7 | 8 | ![screenshot](public/images/image_processing20220419-31825-1yzr3x9.png) 9 | 10 | **Coursespace** is a free landing page template built on top of Material UI and fully coded in **React**. 11 | Simple & light is designed to provide all the basic components using the `sx` prop for a developer need to create landing page for Online Course product. 12 | 13 | ## Live Demo 14 | 15 | Take a look the live demo here 👉 [https://coursespace.vercel.app/](https://coursespace.vercel.app/) 16 | 17 | ## Getting Started 18 | 19 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 20 | 21 | First, run the development server: 22 | 23 | ```bash 24 | npm run dev 25 | # or 26 | yarn dev 27 | ``` 28 | 29 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 30 | 31 | You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file. 32 | 33 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`. 34 | 35 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 36 | 37 | ## Learn More 38 | 39 | To learn more about Next.js, take a look at the following resources: 40 | 41 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 42 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 43 | 44 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 45 | 46 | ## Deploy on Vercel 47 | 48 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 49 | 50 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 51 | 52 | ## Credits 53 | 54 | - [Unsplash](https://unsplash.com/) 55 | - [Icons8](https://icons8.com/) 56 | - [MUI](https://mui.com/) 57 | - [React Slick](https://github.com/akiran/react-slick) 58 | 59 |
60 |
61 |

62 | Alfian Ramadhan 63 |

64 |

65 | Designed by 66 |

67 | Alfian Ramadhan 68 |

69 | -------------------------------------------------------------------------------- /next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/basic-features/typescript for more information. 6 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | } 5 | 6 | module.exports = nextConfig 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "coursespace-landing-page", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@emotion/cache": "^11.7.1", 13 | "@emotion/react": "^11.9.0", 14 | "@emotion/server": "^11.4.0", 15 | "@emotion/styled": "^11.8.1", 16 | "@mui/icons-material": "^5.6.2", 17 | "@mui/material": "^5.6.2", 18 | "next": "12.1.5", 19 | "react": "18.0.0", 20 | "react-dom": "18.0.0", 21 | "react-scroll": "^1.8.7", 22 | "react-slick": "^0.29.0", 23 | "slick-carousel": "^1.8.1" 24 | }, 25 | "devDependencies": { 26 | "@types/node": "17.0.25", 27 | "@types/react": "18.0.6", 28 | "@types/react-dom": "18.0.2", 29 | "@types/react-scroll": "^1.8.3", 30 | "@types/react-slick": "^0.23.8", 31 | "@typescript-eslint/eslint-plugin": "^5.20.0", 32 | "@typescript-eslint/parser": "^5.20.0", 33 | "eslint": "8.14.0", 34 | "eslint-config-next": "12.1.5", 35 | "eslint-config-prettier": "^8.5.0", 36 | "eslint-import-resolver-typescript": "^2.7.1", 37 | "eslint-plugin-import": "^2.26.0", 38 | "eslint-plugin-prettier": "^4.0.0", 39 | "prettier": "^2.6.2", 40 | "typescript": "4.6.3" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hiriski/coursespace-landing-page/a80b98e4aa3150b1f8970597abb767654f36a686/public/favicon.ico -------------------------------------------------------------------------------- /public/images/avatars/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hiriski/coursespace-landing-page/a80b98e4aa3150b1f8970597abb767654f36a686/public/images/avatars/1.jpg -------------------------------------------------------------------------------- /public/images/avatars/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hiriski/coursespace-landing-page/a80b98e4aa3150b1f8970597abb767654f36a686/public/images/avatars/2.jpg -------------------------------------------------------------------------------- /public/images/avatars/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hiriski/coursespace-landing-page/a80b98e4aa3150b1f8970597abb767654f36a686/public/images/avatars/3.jpg -------------------------------------------------------------------------------- /public/images/avatars/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hiriski/coursespace-landing-page/a80b98e4aa3150b1f8970597abb767654f36a686/public/images/avatars/4.jpg -------------------------------------------------------------------------------- /public/images/avatars/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hiriski/coursespace-landing-page/a80b98e4aa3150b1f8970597abb767654f36a686/public/images/avatars/5.jpg -------------------------------------------------------------------------------- /public/images/certificate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hiriski/coursespace-landing-page/a80b98e4aa3150b1f8970597abb767654f36a686/public/images/certificate.png -------------------------------------------------------------------------------- /public/images/companies/airbnb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hiriski/coursespace-landing-page/a80b98e4aa3150b1f8970597abb767654f36a686/public/images/companies/airbnb.png -------------------------------------------------------------------------------- /public/images/companies/google.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hiriski/coursespace-landing-page/a80b98e4aa3150b1f8970597abb767654f36a686/public/images/companies/google.png -------------------------------------------------------------------------------- /public/images/companies/grab.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hiriski/coursespace-landing-page/a80b98e4aa3150b1f8970597abb767654f36a686/public/images/companies/grab.png -------------------------------------------------------------------------------- /public/images/companies/microsoft.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hiriski/coursespace-landing-page/a80b98e4aa3150b1f8970597abb767654f36a686/public/images/companies/microsoft.png -------------------------------------------------------------------------------- /public/images/course-space-shape.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /public/images/courses/a9e7b27a0c5e986a22416d79e2e9dba9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hiriski/coursespace-landing-page/a80b98e4aa3150b1f8970597abb767654f36a686/public/images/courses/a9e7b27a0c5e986a22416d79e2e9dba9.jpg -------------------------------------------------------------------------------- /public/images/courses/alvaro-reyes-qWwpHwip31M-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hiriski/coursespace-landing-page/a80b98e4aa3150b1f8970597abb767654f36a686/public/images/courses/alvaro-reyes-qWwpHwip31M-unsplash.jpg -------------------------------------------------------------------------------- /public/images/courses/annie-spratt-QckxruozjRg-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hiriski/coursespace-landing-page/a80b98e4aa3150b1f8970597abb767654f36a686/public/images/courses/annie-spratt-QckxruozjRg-unsplash.jpg -------------------------------------------------------------------------------- /public/images/courses/christopher-gower-m_HRfLhgABo-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hiriski/coursespace-landing-page/a80b98e4aa3150b1f8970597abb767654f36a686/public/images/courses/christopher-gower-m_HRfLhgABo-unsplash.jpg -------------------------------------------------------------------------------- /public/images/courses/grovemade-RvPDe41lYBA-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hiriski/coursespace-landing-page/a80b98e4aa3150b1f8970597abb767654f36a686/public/images/courses/grovemade-RvPDe41lYBA-unsplash.jpg -------------------------------------------------------------------------------- /public/images/courses/sai-kiran-anagani-5Ntkpxqt54Y-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hiriski/coursespace-landing-page/a80b98e4aa3150b1f8970597abb767654f36a686/public/images/courses/sai-kiran-anagani-5Ntkpxqt54Y-unsplash.jpg -------------------------------------------------------------------------------- /public/images/courses/stillness-inmotion-Jh6aQX-25Uo-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hiriski/coursespace-landing-page/a80b98e4aa3150b1f8970597abb767654f36a686/public/images/courses/stillness-inmotion-Jh6aQX-25Uo-unsplash.jpg -------------------------------------------------------------------------------- /public/images/courses/stillness-inmotion-YSCCnRGrD-4-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hiriski/coursespace-landing-page/a80b98e4aa3150b1f8970597abb767654f36a686/public/images/courses/stillness-inmotion-YSCCnRGrD-4-unsplash.jpg -------------------------------------------------------------------------------- /public/images/courses/true-agency-o4UhdLv5jbQ-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hiriski/coursespace-landing-page/a80b98e4aa3150b1f8970597abb767654f36a686/public/images/courses/true-agency-o4UhdLv5jbQ-unsplash.jpg -------------------------------------------------------------------------------- /public/images/daniel-korpai-pKRNxEguRgM-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hiriski/coursespace-landing-page/a80b98e4aa3150b1f8970597abb767654f36a686/public/images/daniel-korpai-pKRNxEguRgM-unsplash.jpg -------------------------------------------------------------------------------- /public/images/headline-curve.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/images/home-feature.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hiriski/coursespace-landing-page/a80b98e4aa3150b1f8970597abb767654f36a686/public/images/home-feature.png -------------------------------------------------------------------------------- /public/images/home-hero.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hiriski/coursespace-landing-page/a80b98e4aa3150b1f8970597abb767654f36a686/public/images/home-hero.jpg -------------------------------------------------------------------------------- /public/images/home-testimonial.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hiriski/coursespace-landing-page/a80b98e4aa3150b1f8970597abb767654f36a686/public/images/home-testimonial.png -------------------------------------------------------------------------------- /public/images/icons/dribbble.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/icons/github.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/icons/instagram.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/icons/twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/icons/youtube.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/image_processing20220419-31825-1yzr3x9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hiriski/coursespace-landing-page/a80b98e4aa3150b1f8970597abb767654f36a686/public/images/image_processing20220419-31825-1yzr3x9.png -------------------------------------------------------------------------------- /public/images/mentors/christian-buehner-DItYlc26zVI-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hiriski/coursespace-landing-page/a80b98e4aa3150b1f8970597abb767654f36a686/public/images/mentors/christian-buehner-DItYlc26zVI-unsplash.jpg -------------------------------------------------------------------------------- /public/images/mentors/jonas-kakaroto-KIPqvvTOC1s-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hiriski/coursespace-landing-page/a80b98e4aa3150b1f8970597abb767654f36a686/public/images/mentors/jonas-kakaroto-KIPqvvTOC1s-unsplash.jpg -------------------------------------------------------------------------------- /public/images/mentors/noah-buscher-8A7fD6Y5VF8-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hiriski/coursespace-landing-page/a80b98e4aa3150b1f8970597abb767654f36a686/public/images/mentors/noah-buscher-8A7fD6Y5VF8-unsplash.jpg -------------------------------------------------------------------------------- /public/images/mentors/philip-martin-5aGUyCW_PJw-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hiriski/coursespace-landing-page/a80b98e4aa3150b1f8970597abb767654f36a686/public/images/mentors/philip-martin-5aGUyCW_PJw-unsplash.jpg -------------------------------------------------------------------------------- /public/images/shape.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hiriski/coursespace-landing-page/a80b98e4aa3150b1f8970597abb767654f36a686/public/images/shape.png -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/course/course-card-item.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react' 2 | import Image from 'next/image' 3 | import Box from '@mui/material/Box' 4 | import Rating from '@mui/material/Rating' 5 | import Typography from '@mui/material/Typography' 6 | import IconButton, { iconButtonClasses } from '@mui/material/IconButton' 7 | import ArrowForward from '@mui/icons-material/ArrowForward' 8 | import { Course } from '@/interfaces/course' 9 | 10 | interface Props { 11 | item: Course 12 | } 13 | 14 | const CourseCardItem: FC = ({ item }) => { 15 | return ( 16 | 22 | theme.transitions.create(['box-shadow']), 28 | '&:hover': { 29 | boxShadow: 2, 30 | [`& .${iconButtonClasses.root}`]: { 31 | backgroundColor: 'primary.main', 32 | color: 'primary.contrastText', 33 | boxShadow: 2, 34 | }, 35 | }, 36 | }} 37 | > 38 | 46 | {'Course 47 | 48 | 49 | 50 | {item.title} 51 | 52 | 53 | 54 | 55 | ({item.ratingCount}) 56 | 57 | 58 | 59 | 60 | 61 | 62 | {'$' + item.price} 63 | 64 | / course 65 | 66 | 70 | 71 | 72 | 73 | 74 | 75 | ) 76 | } 77 | 78 | export default CourseCardItem 79 | -------------------------------------------------------------------------------- /src/components/course/index.ts: -------------------------------------------------------------------------------- 1 | export { default as CourseCardItem } from './course-card-item' 2 | -------------------------------------------------------------------------------- /src/components/footer/footer-navigation.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react' 2 | import Link from 'next/link' 3 | import Grid from '@mui/material/Grid' 4 | import MuiLink from '@mui/material/Link' 5 | import type { Navigation } from '@/interfaces/navigation' 6 | import { navigations as headerNavigations } from '@/components/navigation/navigation.data' 7 | import { FooterSectionTitle } from '@/components/footer' 8 | 9 | const courseMenu: Array = [ 10 | { 11 | label: 'UI/UX Design', 12 | path: '#', 13 | }, 14 | { 15 | label: 'Mobile Development', 16 | path: '#', 17 | }, 18 | { 19 | label: 'Machine Learning', 20 | path: '#', 21 | }, 22 | { 23 | label: 'Web Development', 24 | path: '#', 25 | }, 26 | ] 27 | 28 | const pageMenu = headerNavigations 29 | 30 | const companyMenu: Array = [ 31 | { label: 'Contact Us', path: '#' }, 32 | { label: 'Privacy & Policy', path: '#' }, 33 | { label: 'Term & Condition', path: '#' }, 34 | { label: 'FAQ', path: '#' }, 35 | ] 36 | 37 | interface NavigationItemProps { 38 | label: string 39 | path: string 40 | } 41 | 42 | const NavigationItem: FC = ({ label, path }) => { 43 | return ( 44 | 45 | 53 | {label} 54 | 55 | 56 | ) 57 | } 58 | 59 | const FooterNavigation: FC = () => { 60 | return ( 61 | 62 | 63 | 64 | {courseMenu.map(({ label, path }, index) => ( 65 | 66 | ))} 67 | 68 | 69 | 70 | {pageMenu.map(({ label, path }, index) => ( 71 | 72 | ))} 73 | 74 | 75 | 76 | {companyMenu.map(({ label, path }, index) => ( 77 | 78 | ))} 79 | 80 | 81 | ) 82 | } 83 | 84 | export default FooterNavigation 85 | -------------------------------------------------------------------------------- /src/components/footer/footer-section-title.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react' 2 | import Box from '@mui/material/Box' 3 | import Typography from '@mui/material/Typography' 4 | 5 | interface Props { 6 | title: string 7 | } 8 | 9 | const FooterSectionTitle: FC = ({ title }: Props) => { 10 | return ( 11 | 18 | 19 | {title} 20 | 21 | 22 | ) 23 | } 24 | 25 | export default FooterSectionTitle 26 | -------------------------------------------------------------------------------- /src/components/footer/footer-social-links.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react' 2 | import Box from '@mui/material/Box' 3 | import Link from '@mui/material/Link' 4 | import { SocialLink } from '@/interfaces/social-link' 5 | 6 | export const socialLinks: SocialLink[] = [ 7 | { 8 | name: 'Instagram', 9 | link: '#', 10 | icon: '/images/icons/instagram.svg', 11 | }, 12 | { 13 | name: 'YouTube', 14 | link: '#', 15 | icon: '/images/icons/youtube.svg', 16 | }, 17 | { 18 | name: 'Twitter', 19 | link: '#', 20 | icon: '/images/icons/twitter.svg', 21 | }, 22 | { 23 | name: 'Dribbble', 24 | link: 'https://dribbble.com/shots/18114471-Coursespace-Online-Course-Landing-Page', 25 | icon: '/images/icons/dribbble.svg', 26 | }, 27 | { 28 | name: 'Github', 29 | link: 'https://github.com/hiriski/coursespace-landing-page', 30 | icon: '/images/icons/github.svg', 31 | }, 32 | ] 33 | 34 | interface SocialLinkItemProps { 35 | item: SocialLink 36 | } 37 | 38 | const SocialLinkItem: FC = ({ item }) => ( 39 | 47 | 69 | {/* eslint-disable-next-line */} 70 | {item.name 71 | 72 | 73 | ) 74 | 75 | // default 76 | const SocialLinks: FC = () => { 77 | return ( 78 | 79 | 89 | {socialLinks.map((item) => { 90 | return 91 | })} 92 | 93 | 94 | ) 95 | } 96 | 97 | export default SocialLinks 98 | -------------------------------------------------------------------------------- /src/components/footer/footer.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react' 2 | import Box from '@mui/material/Box' 3 | import Grid from '@mui/material/Grid' 4 | import Container from '@mui/material/Container' 5 | import Typography from '@mui/material/Typography' 6 | import { FooterNavigation, FooterSocialLinks } from '@/components/footer' 7 | 8 | const Footer: FC = () => { 9 | return ( 10 | 14 | 15 | 16 | 17 | 18 | 19 | Coursespace 20 | 21 | 22 | Coursespace is an online learning platform that has been operating since 2018 until now. 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | ) 34 | } 35 | 36 | export default Footer 37 | -------------------------------------------------------------------------------- /src/components/footer/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Footer } from './footer' 2 | export { default as FooterSectionTitle } from './footer-section-title' 3 | export { default as FooterNavigation } from './footer-navigation' 4 | export { default as FooterSocialLinks } from './footer-social-links' 5 | -------------------------------------------------------------------------------- /src/components/header/header.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC, useState } from 'react' 2 | import Box from '@mui/material/Box' 3 | import Container from '@mui/material/Container' 4 | import IconButton from '@mui/material/IconButton' 5 | import useMediaQuery from '@mui/material/useMediaQuery' 6 | import { Logo } from '@/components/logo' 7 | import { Navigation, AuthNavigation } from '@/components/navigation' 8 | import { useTheme } from '@mui/material/styles' 9 | import { Menu, Close } from '@mui/icons-material' 10 | 11 | const Header: FC = () => { 12 | const [visibleMenu, setVisibleMenu] = useState(false) 13 | const { breakpoints } = useTheme() 14 | const matchMobileView = useMediaQuery(breakpoints.down('md')) 15 | 16 | return ( 17 | 18 | 19 | 20 | 21 | 22 | setVisibleMenu(!visibleMenu)}> 23 | 24 | 25 | 26 | theme.transitions.create(['top']), 35 | ...(matchMobileView && { 36 | py: 6, 37 | backgroundColor: 'background.paper', 38 | zIndex: 'appBar', 39 | position: 'fixed', 40 | height: { xs: '100vh', md: 'auto' }, 41 | top: visibleMenu ? 0 : '-120vh', 42 | left: 0, 43 | }), 44 | }} 45 | > 46 | {/* Magic space */} 47 | 48 | 49 | {visibleMenu && matchMobileView && ( 50 | setVisibleMenu(!visibleMenu)} 57 | > 58 | 59 | 60 | )} 61 | 62 | 63 | 64 | 65 | ) 66 | } 67 | 68 | export default Header 69 | -------------------------------------------------------------------------------- /src/components/header/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Header } from './header' 2 | -------------------------------------------------------------------------------- /src/components/hello.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react' 2 | import Box from '@mui/material/Box' 3 | import Typography from '@mui/material/Typography' 4 | 5 | interface Props { 6 | name: string 7 | } 8 | 9 | const Hello: FC = ({ name }) => { 10 | return ( 11 | 12 | Hello {name} 13 | 14 | ) 15 | } 16 | 17 | export default Hello 18 | -------------------------------------------------------------------------------- /src/components/home/feature.data.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactNode } from 'react' 2 | import ArtTrackIcon from '@mui/icons-material/ArtTrack' 3 | import AttachMoneyIcon from '@mui/icons-material/AttachMoney' 4 | import LocalLibraryIcon from '@mui/icons-material/LocalLibrary' 5 | import ContactSupportIcon from '@mui/icons-material/ContactSupport' 6 | 7 | interface Data { 8 | title: string 9 | description: string 10 | icon?: ReactNode 11 | } 12 | 13 | export const data: Data[] = [ 14 | { 15 | title: 'Easy Accessable', 16 | description: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore', 17 | icon: , 18 | }, 19 | { 20 | title: 'More Affordable Cost', 21 | description: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore', 22 | icon: , 23 | }, 24 | { 25 | title: 'Flexible Study Time', 26 | description: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore', 27 | icon: , 28 | }, 29 | { 30 | title: 'Consultation With Mentor', 31 | description: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore', 32 | icon: , 33 | }, 34 | ] 35 | -------------------------------------------------------------------------------- /src/components/home/feature.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react' 2 | import Image from 'next/image' 3 | import Box from '@mui/material/Box' 4 | import Grid from '@mui/material/Grid' 5 | import { styled } from '@mui/material/styles' 6 | import Container from '@mui/material/Container' 7 | import Typography from '@mui/material/Typography' 8 | import CircularProgress from '@mui/material/CircularProgress' 9 | import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress' 10 | import { data } from './feature.data' 11 | 12 | interface LinearProgressProps { 13 | order: number 14 | } 15 | 16 | const BorderLinearProgress = styled(LinearProgress, { 17 | shouldForwardProp: (prop) => prop !== 'color', 18 | })(({ theme, order }) => ({ 19 | height: 6, 20 | borderRadius: 5, 21 | [`&.${linearProgressClasses.colorPrimary}`]: { 22 | backgroundColor: theme.palette.grey[200], 23 | }, 24 | [`& .${linearProgressClasses.bar}`]: { 25 | borderRadius: 5, 26 | ...(order === 1 && { 27 | backgroundColor: '#f303ff', 28 | }), 29 | ...(order === 2 && { 30 | backgroundColor: '#26e8bd', 31 | }), 32 | ...(order === 3 && { 33 | backgroundColor: '#0063ff', 34 | }), 35 | }, 36 | })) 37 | 38 | const HomeFeature: FC = () => { 39 | return ( 40 | 41 | 42 | 43 | 44 | 45 | Feature img 46 | 60 | 61 | Lorem ipsum dolor 62 | 63 | 64 | 65 | UI/UI Design 66 | 67 | 68 | 69 | 70 | 71 | Mobile Development 72 | 73 | 74 | 75 | 76 | 77 | Web Development 78 | 79 | 80 | 81 | 82 | 83 | 97 | 106 | Lorem ipsum 107 | 108 | Lorem ipsum 109 | 110 | 120 | 121 | 75% 122 | 123 | 130 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 156 | Make your{' '} 157 | 167 | Learning
168 | 177 | {/* eslint-disable-next-line @next/next/no-img-element */} 178 | Headline curve 179 | 180 | 181 | Enjoyable 182 | 183 | 184 | 185 | Set the way of learning according to your wishes with some of the benefits that you get us, so you on 186 | enjoy the lessons that we provide. 187 | 188 | 189 | 190 | {data.map(({ title, description, icon }, index) => ( 191 | 192 | 193 | 209 | {icon} 210 | 211 | 212 | 213 | {title} 214 | 215 | 216 | {description} 217 | 218 | 219 | 220 | 221 | ))} 222 | 223 | 224 | 225 | 226 | 227 | ) 228 | } 229 | 230 | export default HomeFeature 231 | -------------------------------------------------------------------------------- /src/components/home/hero.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react' 2 | import Image from 'next/image' 3 | import Box from '@mui/material/Box' 4 | import Grid from '@mui/material/Grid' 5 | import Container from '@mui/material/Container' 6 | import Typography from '@mui/material/Typography' 7 | import { Link as ScrollLink } from 'react-scroll' 8 | import { StyledButton } from '@/components/styled-button' 9 | import PlayArrowIcon from '@mui/icons-material/PlayArrow' 10 | 11 | interface Exp { 12 | label: string 13 | value: string 14 | } 15 | interface ExpItemProps { 16 | item: Exp 17 | } 18 | 19 | const exps: Array = [ 20 | { 21 | label: 'Students', 22 | value: '10K+', 23 | }, 24 | { 25 | label: 'Quality Course', 26 | value: '20+', 27 | }, 28 | { 29 | label: 'Experience Mentors', 30 | value: '10+', 31 | }, 32 | ] 33 | 34 | const ExpItem: FC = ({ item }) => { 35 | const { value, label } = item 36 | return ( 37 | 38 | 41 | {value} 42 | 43 | 44 | {label} 45 | 46 | 47 | ) 48 | } 49 | 50 | const HomeHero: FC = () => { 51 | return ( 52 | 53 | 54 | 55 | 56 | 65 | 66 | 76 | 86 | Improve{' '} 87 | 96 | {/* eslint-disable-next-line */} 97 | Headline curve 98 | 99 | 100 | your{' '} 101 | 116 | Skill 117 | 118 | 119 | 123 | 127 | 131 | 132 | 133 | {' '} 134 |
135 | with Different Way 136 | 137 | 138 | 139 | 140 | { 141 | "Let's take an online course to improve your skills in a different way, you can set your own study time according to your learning speed. So you san study comfortable and absorb tge material easily." 142 | } 143 | 144 | 145 | 146 | 147 | 148 | Get Started 149 | 150 | 151 | 152 | }> 153 | Watch Video 154 | 155 | 156 | 157 | 158 | 159 | 160 | {/* Sertificate badge */} 161 | 177 | 190 | Certificate icon 191 | 192 | 193 | 197 | Certificate 198 | 199 | 200 | There are certificates for all courses. 201 | 202 | 203 | 204 | 205 | Hero img 206 | 207 | 208 | 209 | 210 | {/* Experience */} 211 | 212 | 213 | {exps.map((item) => ( 214 | 215 | 216 | 217 | ))} 218 | 219 | 220 | 221 | 222 | ) 223 | } 224 | 225 | export default HomeHero 226 | -------------------------------------------------------------------------------- /src/components/home/index.ts: -------------------------------------------------------------------------------- 1 | export { default as HomeHero } from './hero' 2 | export { default as HomePopularCourse } from './popular-courses' 3 | export { default as HomeFeature } from './feature' 4 | export { default as HomeTestimonial } from './testimonial' 5 | export { default as HomeOurMentors } from './mentors' 6 | export { default as HomeNewsLetter } from './newsletter' 7 | -------------------------------------------------------------------------------- /src/components/home/mentors.data.ts: -------------------------------------------------------------------------------- 1 | import type { Mentor } from '@/interfaces/mentor' 2 | 3 | export const data: Array = [ 4 | { 5 | id: 1, 6 | photo: '/images/mentors/christian-buehner-DItYlc26zVI-unsplash.jpg', 7 | name: 'Jhon Dwirian', 8 | category: 'UI/UX Design', 9 | description: 10 | 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', 11 | company: { 12 | name: 'Grab', 13 | logo: '/images/companies/grab.png', 14 | }, 15 | }, 16 | { 17 | id: 2, 18 | photo: '/images/mentors/jonas-kakaroto-KIPqvvTOC1s-unsplash.jpg', 19 | name: 'Leon S Kennedy', 20 | category: 'Machine Learning', 21 | description: 22 | 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', 23 | company: { 24 | name: 'Google', 25 | logo: '/images/companies/google.png', 26 | }, 27 | }, 28 | { 29 | id: 3, 30 | photo: '/images/mentors/noah-buscher-8A7fD6Y5VF8-unsplash.jpg', 31 | name: 'Nguyễn Thuy', 32 | category: 'Android Development', 33 | description: 34 | 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', 35 | company: { 36 | name: 'Airbnb', 37 | logo: '/images/companies/airbnb.png', 38 | }, 39 | }, 40 | { 41 | id: 4, 42 | photo: '/images/mentors/philip-martin-5aGUyCW_PJw-unsplash.jpg', 43 | name: 'Rizki Known', 44 | category: 'Fullstack Development', 45 | description: 46 | 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', 47 | company: { 48 | name: 'Microsoft', 49 | logo: '/images/companies/microsoft.png', 50 | }, 51 | }, 52 | ] 53 | -------------------------------------------------------------------------------- /src/components/home/mentors.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react' 2 | import Box from '@mui/material/Box' 3 | import Slider, { Settings } from 'react-slick' 4 | import Container from '@mui/material/Container' 5 | import Typography from '@mui/material/Typography' 6 | import IconButton from '@mui/material/IconButton' 7 | import useMediaQuery from '@mui/material/useMediaQuery' 8 | import { useTheme, styled } from '@mui/material/styles' 9 | import IconArrowBack from '@mui/icons-material/ArrowBack' 10 | import IconArrowForward from '@mui/icons-material/ArrowForward' 11 | import { MentorCardItem } from '@/components/mentor' 12 | import { data } from './mentors.data' 13 | 14 | interface SliderArrowArrow { 15 | onClick?: () => void 16 | type: 'next' | 'prev' 17 | className?: 'string' 18 | } 19 | 20 | const SliderArrow: FC = (props) => { 21 | const { onClick, type, className } = props 22 | return ( 23 | 39 | {type === 'next' ? : } 40 | 41 | ) 42 | } 43 | 44 | const StyledDots = styled('ul')(({ theme }) => ({ 45 | '&.slick-dots': { 46 | position: 'absolute', 47 | left: 0, 48 | bottom: -20, 49 | paddingLeft: theme.spacing(1), 50 | textAlign: 'left', 51 | '& li': { 52 | marginRight: theme.spacing(2), 53 | '&.slick-active>div': { 54 | backgroundColor: theme.palette.primary.main, 55 | }, 56 | }, 57 | }, 58 | })) 59 | 60 | const HomeOurMentors: FC = () => { 61 | const { breakpoints } = useTheme() 62 | const matchMobileView = useMediaQuery(breakpoints.down('md')) 63 | 64 | const sliderConfig: Settings = { 65 | infinite: true, 66 | // autoplay: true, 67 | speed: 300, 68 | slidesToShow: matchMobileView ? 1 : 3, 69 | slidesToScroll: 1, 70 | prevArrow: , 71 | nextArrow: , 72 | dots: true, 73 | appendDots: (dots) => {dots}, 74 | customPaging: () => ( 75 | 76 | ), 77 | } 78 | 79 | return ( 80 | 94 | 95 | 96 | Our Expert Mentors 97 | 98 | 99 | 100 | {data.map((item) => ( 101 | 102 | ))} 103 | 104 | 105 | 106 | ) 107 | } 108 | 109 | export default HomeOurMentors 110 | -------------------------------------------------------------------------------- /src/components/home/newsletter.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react' 2 | import Box from '@mui/material/Box' 3 | import InputBase from '@mui/material/InputBase' 4 | import Container from '@mui/material/Container' 5 | import Typography from '@mui/material/Typography' 6 | import { StyledButton } from '../styled-button' 7 | 8 | const HomeNewsLetter: FC = () => { 9 | return ( 10 | 11 | 12 | 21 | 22 | Subscribe to Our News Letter 23 | 24 | Subscribe to our newsletter to get information about our courses. 25 | 26 | 36 | 48 | 49 | 50 | Subscribe 51 | 52 | 53 | 54 | 55 | 56 | 57 | ) 58 | } 59 | 60 | export default HomeNewsLetter 61 | -------------------------------------------------------------------------------- /src/components/home/popular-course.data.ts: -------------------------------------------------------------------------------- 1 | import type { Course } from '@/interfaces/course' 2 | 3 | export const data: Array = [ 4 | { 5 | id: 1, 6 | cover: '/images/courses/a9e7b27a0c5e986a22416d79e2e9dba9.jpg', 7 | title: 'Android Development from Zeo to Hero', 8 | rating: 5, 9 | ratingCount: 8, 10 | price: 25, 11 | category: 'Beginner', 12 | }, 13 | { 14 | id: 2, 15 | cover: '/images/courses/alvaro-reyes-qWwpHwip31M-unsplash.jpg', 16 | title: 'UI/UX Complete Guide', 17 | rating: 5, 18 | ratingCount: 15, 19 | price: 20, 20 | category: 'Intermediate', 21 | }, 22 | { 23 | id: 3, 24 | cover: '/images/courses/christopher-gower-m_HRfLhgABo-unsplash.jpg', 25 | title: 'Mastering Data Modeling Fundamentals', 26 | rating: 4, 27 | ratingCount: 7, 28 | price: 30, 29 | category: 'Beginner', 30 | }, 31 | { 32 | id: 4, 33 | cover: '/images/courses/true-agency-o4UhdLv5jbQ-unsplash.jpg', 34 | title: 'The Complete Guide Docker and Kubernetes', 35 | rating: 4, 36 | ratingCount: 12, 37 | price: 30, 38 | category: 'Intermediate', 39 | }, 40 | { 41 | id: 5, 42 | cover: '/images/courses/stillness-inmotion-Jh6aQX-25Uo-unsplash.jpg', 43 | title: 'Modern React with MUI & Redux', 44 | rating: 4, 45 | ratingCount: 32, 46 | price: 35, 47 | category: 'Intermediate', 48 | }, 49 | { 50 | id: 6, 51 | cover: '/images/courses/stillness-inmotion-YSCCnRGrD-4-unsplash.jpg', 52 | title: 'Ethical Hacking Bootcamp Zero to Mastery', 53 | rating: 5, 54 | ratingCount: 14, 55 | price: 35, 56 | category: 'Beginner', 57 | }, 58 | { 59 | id: 7, 60 | cover: '/images/courses/grovemade-RvPDe41lYBA-unsplash.jpg', 61 | title: 'Adobe Lightroom For Beginners: Complete Photo Editing', 62 | rating: 4, 63 | ratingCount: 6, 64 | price: 25, 65 | category: 'Beginner', 66 | }, 67 | ] 68 | -------------------------------------------------------------------------------- /src/components/home/popular-courses.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react' 2 | import Box from '@mui/material/Box' 3 | import Grid from '@mui/material/Grid' 4 | import Slider, { Settings } from 'react-slick' 5 | import Container from '@mui/material/Container' 6 | import Typography from '@mui/material/Typography' 7 | import { useTheme, styled } from '@mui/material/styles' 8 | import { IconButton, useMediaQuery } from '@mui/material' 9 | import IconArrowBack from '@mui/icons-material/ArrowBack' 10 | import IconArrowForward from '@mui/icons-material/ArrowForward' 11 | 12 | import { data } from './popular-course.data' 13 | import { CourseCardItem } from '@/components/course' 14 | 15 | interface SliderArrowArrow { 16 | onClick?: () => void 17 | type: 'next' | 'prev' 18 | className?: 'string' 19 | } 20 | 21 | const SliderArrow: FC = (props) => { 22 | const { onClick, type, className } = props 23 | return ( 24 | 40 | {type === 'next' ? : } 41 | 42 | ) 43 | } 44 | 45 | const StyledDots = styled('ul')(({ theme }) => ({ 46 | '&.slick-dots': { 47 | position: 'absolute', 48 | left: 0, 49 | bottom: -20, 50 | paddingLeft: theme.spacing(1), 51 | textAlign: 'left', 52 | '& li': { 53 | marginRight: theme.spacing(2), 54 | '&.slick-active>div': { 55 | backgroundColor: theme.palette.primary.main, 56 | }, 57 | }, 58 | }, 59 | })) 60 | 61 | const HomePopularCourse: FC = () => { 62 | const { breakpoints } = useTheme() 63 | const matchMobileView = useMediaQuery(breakpoints.down('md')) 64 | 65 | const sliderConfig: Settings = { 66 | infinite: true, 67 | autoplay: true, 68 | speed: 300, 69 | slidesToShow: matchMobileView ? 1 : 3, 70 | slidesToScroll: 1, 71 | prevArrow: , 72 | nextArrow: , 73 | dots: true, 74 | appendDots: (dots) => {dots}, 75 | customPaging: () => ( 76 | 77 | ), 78 | } 79 | 80 | return ( 81 | 92 | 93 | 94 | 95 | 104 | 105 | Most Popular Courses 106 | 107 | 108 | 109 | 110 | 111 | 112 | {data.map((item) => ( 113 | 114 | ))} 115 | 116 | 117 | 118 | 119 | 120 | ) 121 | } 122 | 123 | export default HomePopularCourse 124 | -------------------------------------------------------------------------------- /src/components/home/testimonial.data.ts: -------------------------------------------------------------------------------- 1 | import type { Testimonial } from '@/interfaces/testimonial' 2 | 3 | export const data: Array = [ 4 | { 5 | id: 1, 6 | title: 'Detailed learning materials', 7 | content: 8 | 'Classes that provide very detailed material in term of making UI UX Design starting team making low and hight quality, system designs, using data layout and make prototypes and testing.', 9 | user: { 10 | id: 1, 11 | name: 'Luis Sera', 12 | professional: 'UI/UX Engineer', 13 | photo: '1.jpg', 14 | }, 15 | }, 16 | { 17 | id: 2, 18 | title: 'Best Quality Online Course!', 19 | content: 20 | 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', 21 | user: { 22 | id: 1, 23 | name: 'Riski', 24 | professional: 'Software Engineer', 25 | photo: '2.jpg', 26 | }, 27 | }, 28 | { 29 | id: 3, 30 | title: 'Very complete class', 31 | content: 32 | 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', 33 | user: { 34 | id: 1, 35 | name: 'Nguyễn Văn', 36 | professional: 'FullStack Designer', 37 | photo: '3.jpg', 38 | }, 39 | }, 40 | { 41 | id: 4, 42 | title: 'Great Quality!', 43 | content: 44 | 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', 45 | user: { 46 | id: 1, 47 | name: 'Diana Jordan', 48 | professional: 'SEO Expert', 49 | photo: '4.jpg', 50 | }, 51 | }, 52 | { 53 | id: 5, 54 | title: 'Detailed learning materials', 55 | content: 56 | 'Classes that provide very detailed material in term of making UI UX Design starting team making low and hight quality, system designs, using data layout and make prototypes and testing.', 57 | user: { 58 | id: 1, 59 | name: 'Ashley Graham', 60 | professional: 'Back-End Developer', 61 | photo: '5.jpg', 62 | }, 63 | }, 64 | ] 65 | -------------------------------------------------------------------------------- /src/components/home/testimonial.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC, useRef } from 'react' 2 | import Image from 'next/image' 3 | import Box from '@mui/material/Box' 4 | import Grid from '@mui/material/Grid' 5 | import Slider, { Settings } from 'react-slick' 6 | import Container from '@mui/material/Container' 7 | import Typography from '@mui/material/Typography' 8 | import IconButton from '@mui/material/IconButton' 9 | import { styled } from '@mui/material/styles' 10 | import IconArrowBack from '@mui/icons-material/ArrowBack' 11 | import IconArrowForward from '@mui/icons-material/ArrowForward' 12 | 13 | import { TestimonialItem } from '@/components/testimonial' 14 | import { data } from './testimonial.data' 15 | 16 | interface SliderArrowArrow { 17 | onClick?: () => void 18 | type: 'next' | 'prev' 19 | className?: 'string' 20 | } 21 | 22 | const SliderArrow: FC = (props) => { 23 | const { onClick, type, className } = props 24 | return ( 25 | 41 | {type === 'next' ? : } 42 | 43 | ) 44 | } 45 | 46 | const StyledSlickContainer = styled('div')(() => ({ 47 | position: 'relative', 48 | 49 | '& .slick-list': { marginLeft: '-30px', marginBottom: '24px' }, 50 | })) 51 | 52 | const HomeTestimonial: FC = () => { 53 | const sliderRef = useRef(null) 54 | 55 | const sliderConfig: Settings = { 56 | infinite: true, 57 | autoplay: true, 58 | speed: 300, 59 | slidesToShow: 1, 60 | slidesToScroll: 1, 61 | prevArrow: , 62 | nextArrow: , 63 | } 64 | 65 | return ( 66 | 67 | 68 | 69 | 70 | 81 | Testimonial What our{' '} 82 | 92 | Students{' '} 93 | 101 | {/* eslint-disable-next-line @next/next/no-img-element */} 102 | Headline curve 103 | 104 | 105 | Say 106 | 107 | 108 | 109 | 110 | {data.map((item, index) => ( 111 | 112 | ))} 113 | 114 | 115 | 116 | 117 | 118 | Testimonial img 119 | 120 | 121 | 122 | 123 | 124 | ) 125 | } 126 | 127 | export default HomeTestimonial 128 | -------------------------------------------------------------------------------- /src/components/layout/index.ts: -------------------------------------------------------------------------------- 1 | export { default as MainLayout } from './main-layout' 2 | -------------------------------------------------------------------------------- /src/components/layout/main-layout.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC, ReactNode } from 'react' 2 | import Box from '@mui/material/Box' 3 | import { Footer } from '@/components/footer' 4 | import { Header } from '@/components/header' 5 | 6 | interface Props { 7 | children: ReactNode 8 | } 9 | 10 | const MainLayout: FC = ({ children }) => { 11 | return ( 12 | 13 |
14 | {children} 15 |