├── .eslintrc.json ├── .github └── workflows │ └── nextjs.yml ├── .gitignore ├── .npmrc ├── CHANGELOG.md ├── ISSUE_TEMPLATE.md ├── LICENSE.md ├── README.md ├── next.config.js ├── package.json ├── postcss.config.js ├── public ├── image │ ├── Background.png │ ├── Image7.svg │ ├── avatar1.jpg │ ├── avatar2.jpg │ ├── avatar3.jpg │ ├── blogs │ │ ├── blog-1.svg │ │ ├── blog-10.jpeg │ │ ├── blog-12.jpeg │ │ ├── blog-13.png │ │ ├── blog-3.png │ │ ├── blog2.svg │ │ ├── blog3.svg │ │ ├── blog4.svg │ │ ├── blog5.svg │ │ └── blog6.svg │ ├── books │ │ ├── Rectangle10.svg │ │ ├── Rectangle11.svg │ │ ├── Rectangle12.svg │ │ ├── Rectangle13.svg │ │ ├── Rectangle14.svg │ │ ├── Rectangle8.svg │ │ ├── Rectangle9.svg │ │ ├── RectangleBig1.svg │ │ ├── RectangleBig2.svg │ │ ├── RectangleBig3.svg │ │ ├── RectangleBig4.svg │ │ ├── RectangleBig5.svg │ │ ├── RectangleBig6.svg │ │ └── RectangleBig7.svg │ ├── image8.svg │ └── logos │ │ ├── logo-amazon 2.svg │ │ └── logo-amazon 3.svg └── logos │ ├── logo-amazon.svg │ ├── logo-coinbase.svg │ ├── logo-google.svg │ ├── logo-netflix.svg │ ├── logo-pinterest.svg │ └── logo-spotify.svg ├── src ├── app │ ├── courses-categories.tsx │ ├── events.tsx │ ├── explore-courses.tsx │ ├── globals.css │ ├── hero.tsx │ ├── index.tsx │ ├── layout.tsx │ ├── out-impressive-stats.tsx │ ├── page.tsx │ ├── students-feedback.tsx │ ├── testimonial.tsx │ └── trusted-companies.tsx └── components │ ├── category-card.tsx │ ├── course-card.tsx │ ├── event-card.tsx │ ├── feedback-card.tsx │ ├── fixed-plugin.tsx │ ├── footer.tsx │ ├── index.ts │ ├── layout.tsx │ ├── navbar.tsx │ └── stats-card.tsx ├── tailwind.config.ts └── tsconfig.json /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /.github/workflows/nextjs.yml: -------------------------------------------------------------------------------- 1 | # Sample workflow for building and deploying a Next.js site to GitHub Pages 2 | # 3 | # To get started with Next.js see: https://nextjs.org/docs/getting-started 4 | # 5 | name: Deploy Next.js site to Pages 6 | 7 | on: 8 | # Runs on pushes targeting the default branch 9 | push: 10 | branches: ["live-demo"] 11 | 12 | # Allows you to run this workflow manually from the Actions tab 13 | workflow_dispatch: 14 | 15 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages 16 | permissions: 17 | contents: read 18 | pages: write 19 | id-token: write 20 | 21 | # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. 22 | # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. 23 | concurrency: 24 | group: "pages" 25 | cancel-in-progress: false 26 | 27 | jobs: 28 | # Build job 29 | build: 30 | runs-on: ubuntu-latest 31 | steps: 32 | - name: Checkout 33 | uses: actions/checkout@v3 34 | - name: Detect package manager 35 | id: detect-package-manager 36 | run: | 37 | if [ -f "${{ github.workspace }}/yarn.lock" ]; then 38 | echo "manager=yarn" >> $GITHUB_OUTPUT 39 | echo "command=install" >> $GITHUB_OUTPUT 40 | echo "runner=yarn" >> $GITHUB_OUTPUT 41 | exit 0 42 | elif [ -f "${{ github.workspace }}/package.json" ]; then 43 | echo "manager=npm" >> $GITHUB_OUTPUT 44 | echo "command=ci" >> $GITHUB_OUTPUT 45 | echo "runner=npx --no-install" >> $GITHUB_OUTPUT 46 | exit 0 47 | else 48 | echo "Unable to determine package manager" 49 | exit 1 50 | fi 51 | - name: Setup Node 52 | uses: actions/setup-node@v3 53 | with: 54 | node-version: "lts/*" 55 | cache: ${{ steps.detect-package-manager.outputs.manager }} 56 | - name: Setup Pages 57 | uses: actions/configure-pages@v3 58 | - name: Restore cache 59 | uses: actions/cache@v3 60 | with: 61 | path: | 62 | .next/cache 63 | # Generate a new cache whenever packages or source files change. 64 | key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }} 65 | # If source files changed but packages didn't, rebuild from a prior cache. 66 | restore-keys: | 67 | ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}- 68 | - name: Install dependencies 69 | run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }} 70 | - name: Build with Next.js 71 | run: ${{ steps.detect-package-manager.outputs.runner }} next build 72 | - name: Upload artifact 73 | uses: actions/upload-pages-artifact@v1 74 | with: 75 | path: ./out 76 | 77 | # Deployment job 78 | deploy: 79 | environment: 80 | name: github-pages 81 | url: ${{ steps.deployment.outputs.page_url }} 82 | runs-on: ubuntu-latest 83 | needs: build 84 | steps: 85 | - name: Deploy to GitHub Pages 86 | id: deployment 87 | uses: actions/deploy-pages@v2 88 | -------------------------------------------------------------------------------- /.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 | 27 | # local env files 28 | .env*.local 29 | 30 | # vercel 31 | .vercel 32 | 33 | # typescript 34 | *.tsbuildinfo 35 | next-env.d.ts 36 | 37 | package-lock.json 38 | pnpm-lock.yaml 39 | yarn.lock -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | legacy-peer-deps=true 2 | auto-install-peers=true 3 | strict-peer-dependencies=false -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | ## [1.0.0] 2023-11-21 4 | 5 | ### Original Release 6 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2013-2023 Creative Tim (https://www.creative-tim.com) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [NextJS Tailwind Course Landing Page](http://demos.creative-tim.com/nextjs-tailwind-course-landing-page?ref=readme-ntpp) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/intent/tweet?url=https://www.creative-tim.com/product/nextjs-tailwind-course-landing-page&text=Check%20Material%20Tailwind%202%20Template%20made%20by%20@CreativeTim%20#webdesign%20#template%20#materialdesign%20#react%20https://www.creative-tim.com/product/nextjs-tailwind-course-landing-page) 2 | 3 | ![version](https://img.shields.io/badge/version-1.0.0-blue.svg) [![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/nextjs-tailwind-course-landing-page.svg)](https://github.com/creativetimofficial/nextjs-tailwind-course-landing-page/issues?q=is%3Aopen+is%3Aissue) [![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/nextjs-tailwind-course-landing-page.svg)](https://github.com/creativetimofficial/nextjs-tailwind-course-landing-page/issues?q=is%3Aissue+is%3Aclosed) 4 | 5 | ![Image](https://s3.amazonaws.com/creativetim_bucket/products/744/original/material-tailwind-react-courses-template-thumbnail.jpg?1697633842) 6 | 7 | Introducing Tailwind Course Landing Page, a versatile and engaging landing page template designed using Tailwind CSS and Material Tailwind. 8 | 9 | Are you looking for a professionally designed and highly customizable course landing page template, ideal for clients like educators, institutions, and online course creators to showcase courses, attract potential students, and gain conversions? Your search ends here! We are excited to present to you our Free Course Landing Page Template, meticulously crafted to cater to the needs of course providers. 10 | 11 | This template, created with Tailwind CSS and Material Tailwind, offers seamless customization to align perfectly with your course offerings and branding. The free course landing page template includes essential features such as hero image, stats, features, and testimonial sections. 12 | 13 | **Documentation built by Developers** 14 | 15 | Each element is well presented in very complex documentation. 16 | 17 | You can read more about the [documentation here](https://www.material-tailwind.com/docs/react/installation). 18 | 19 | **HELPFUL LINKS** 20 | 21 | - View [Github Repository](https://github.com/creativetimofficial/nextjs-tailwind-course-landing-page) 22 | - Check [FAQ Page](https://www.creative-tim.com/faq) 23 | 24 | ## [Demo](https://creative-tim.com/product/nextjs-tailwind-course-landing-page) 25 | 26 | ## Quick start 27 | 28 | Quick start options: 29 | 30 | - Download from [Creative Tim](https://www.creative-tim.com/product/nextjs-tailwind-course-landing-page?ref=readme-ntpp). 31 | 32 | ## Terminal Commands 33 | 34 | 1. Download and Install NodeJs LTS version from [NodeJs Official Page](https://nodejs.org/en/download/). 35 | 2. Navigate to the root ./ directory of the product and run `npm install` to install our local dependencies. 36 | 37 | ## Documentation 38 | 39 | The documentation for the Material Dashboard is hosted at our [website](https://www.material-tailwind.com/docs/react/installation?ref=readme-ntpp). 40 | 41 | ## Browser Support 42 | 43 | At present, we officially aim to support the last two versions of the following browsers: 44 | 45 | 46 | 47 | ## Resources 48 | 49 | - [Live Preview](https://demos.creative-tim.com/nextjs-tailwind-course-landing-page?ref=readme-ntpp) 50 | - [Download Page](https://www.creative-tim.com/product/nextjs-tailwind-course-landing-page?ref=readme-ntpp) 51 | - Documentation is [here](https://www.material-tailwind.com/docs/react/installation?ref=readme-ntpp) 52 | - [License Agreement](https://www.creative-tim.com/license?ref=readme-ntpp) 53 | - [Support](https://www.creative-tim.com/contact-us?ref=readme-ntpp) 54 | - Issues: [Github Issues Page](https://github.com/creativetimofficial/nextjs-tailwind-course-landing-page/issues) 55 | - [Nepcha Analytics](https://nepcha.com?ref=readme) - Analytics tool for your website 56 | 57 | ## Reporting Issues 58 | 59 | We use GitHub Issues as the official bug tracker for the Nextjs Tailwind Course Landing Page. Here are some advices for our users that want to report an issue: 60 | 61 | 1. Make sure that you are using the latest version of the Nextjs Tailwind Course Landing Page. Check the CHANGELOG from your dashboard on our [website](https://www.creative-tim.com/product/nextjs-tailwind-course-landing-page?ref=readme-ntpp). 62 | 2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed. 63 | 3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help. 64 | 65 | ## Technical Support or Questions 66 | 67 | If you have questions or need help integrating the product please [contact us](https://www.creative-tim.com/contact-us?ref=readme-ntpp) instead of opening an issue. 68 | 69 | ## Licensing 70 | 71 | - Copyright 2023 [Creative Tim](https://www.creative-tim.com?ref=readme-ntpp) 72 | - Creative Tim [license](https://www.creative-tim.com/license?ref=readme-ntpp) 73 | 74 | ## Useful Links 75 | 76 | - [More products](https://www.creative-tim.com/templates?ref=readme-ntpp) from Creative Tim 77 | 78 | - [Tutorials](https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w) 79 | 80 | - [Freebies](https://www.creative-tim.com/bootstrap-themes/free?ref=readme-ntpp) from Creative Tim 81 | 82 | - [Affiliate Program](https://www.creative-tim.com/affiliates/new?ref=readme-ntpp) (earn money) 83 | 84 | ##### Social Media 85 | 86 | Twitter: 87 | 88 | Facebook: 89 | 90 | Dribbble: 91 | 92 | Google+: 93 | 94 | Instagram: 95 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | images: { 4 | remotePatterns: [ 5 | { 6 | protocol: "https", 7 | hostname: "**", 8 | }, 9 | ], 10 | }, 11 | }; 12 | 13 | module.exports = nextConfig; 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nextjs-tailwind-course-landing-page", 3 | "version": "1.0.0", 4 | "private": true, 5 | "author": "Creative Tim", 6 | "license": "See license in https://www.creative-tim.com/license", 7 | "homepage": "https://demos.creative-tim.com/nextjs-tailwind-course-landing-page", 8 | "scripts": { 9 | "dev": "next dev", 10 | "build": "next build", 11 | "start": "next start", 12 | "lint": "next lint" 13 | }, 14 | "dependencies": { 15 | "@heroicons/react": "2.0.18", 16 | "@material-tailwind/react": "2.1.2", 17 | "next": "13.4.0", 18 | "react": "18", 19 | "react-dom": "18" 20 | }, 21 | "devDependencies": { 22 | "@types/node": "20", 23 | "@types/react": "18", 24 | "@types/react-dom": "18", 25 | "autoprefixer": "10", 26 | "eslint": "8", 27 | "eslint-config-next": "13.5.4", 28 | "postcss": "8", 29 | "tailwindcss": "3", 30 | "typescript": "5" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/image/Background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/nextjs-tailwind-course-landing-page/85eb515fd16ea833db7997ad90cf1f8649dd4130/public/image/Background.png -------------------------------------------------------------------------------- /public/image/avatar1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/nextjs-tailwind-course-landing-page/85eb515fd16ea833db7997ad90cf1f8649dd4130/public/image/avatar1.jpg -------------------------------------------------------------------------------- /public/image/avatar2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/nextjs-tailwind-course-landing-page/85eb515fd16ea833db7997ad90cf1f8649dd4130/public/image/avatar2.jpg -------------------------------------------------------------------------------- /public/image/avatar3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/nextjs-tailwind-course-landing-page/85eb515fd16ea833db7997ad90cf1f8649dd4130/public/image/avatar3.jpg -------------------------------------------------------------------------------- /public/image/blogs/blog-1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /public/image/blogs/blog-10.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/nextjs-tailwind-course-landing-page/85eb515fd16ea833db7997ad90cf1f8649dd4130/public/image/blogs/blog-10.jpeg -------------------------------------------------------------------------------- /public/image/blogs/blog-12.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/nextjs-tailwind-course-landing-page/85eb515fd16ea833db7997ad90cf1f8649dd4130/public/image/blogs/blog-12.jpeg -------------------------------------------------------------------------------- /public/image/blogs/blog-13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/nextjs-tailwind-course-landing-page/85eb515fd16ea833db7997ad90cf1f8649dd4130/public/image/blogs/blog-13.png -------------------------------------------------------------------------------- /public/image/blogs/blog-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/nextjs-tailwind-course-landing-page/85eb515fd16ea833db7997ad90cf1f8649dd4130/public/image/blogs/blog-3.png -------------------------------------------------------------------------------- /public/image/logos/logo-amazon 2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | logo-amazon 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /public/image/logos/logo-amazon 3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | logo-amazon 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /public/logos/logo-amazon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | logo-amazon 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /public/logos/logo-coinbase.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | logo-coinbase 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /public/logos/logo-google.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | logo-google 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /public/logos/logo-netflix.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | logo-netflix 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /public/logos/logo-pinterest.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | logo-pinterest 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /public/logos/logo-spotify.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | logo-spotify 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/app/courses-categories.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import React from "react"; 4 | import { 5 | Button, 6 | Typography, 7 | Card, 8 | CardBody, 9 | } from "@material-tailwind/react"; 10 | 11 | import { 12 | GlobeEuropeAfricaIcon, 13 | MicrophoneIcon, 14 | PuzzlePieceIcon, 15 | HeartIcon, 16 | } from "@heroicons/react/24/solid"; 17 | 18 | import CategoryCard from "@/components/category-card"; 19 | 20 | 21 | const CATEGORIES = [ 22 | { 23 | img: "/image/blogs/blog-3.png", 24 | icon: HeartIcon, 25 | title: "Frontend Web Development", 26 | desc: "300 Courses", 27 | }, 28 | { 29 | img: "/image/blogs/blog-12.jpeg", 30 | icon: PuzzlePieceIcon, 31 | title: "Backend Web Development", 32 | desc: "200 Courses", 33 | }, 34 | { 35 | img: "/image/blogs/blog-10.jpeg", 36 | icon: GlobeEuropeAfricaIcon, 37 | title: "Web Security & Performance", 38 | desc: "240 Courses", 39 | }, 40 | { 41 | img: "/image/blogs/blog-13.png", 42 | icon: MicrophoneIcon, 43 | title: "Full-Stack Web Development", 44 | desc: "100 Courses", 45 | }, 46 | ]; 47 | 48 | export function CoursesCategories() { 49 | return ( 50 |
51 |
52 | 53 | Courses Categories 54 | 55 | 56 | A comprehensive selection of courses designed to empower you with the 57 | skills you need to thrive in the dynamic world of web development. 58 | 59 |
60 |
61 | 65 |
66 | 67 | 68 | HTML, CSS & Javascript 69 | 70 | 71 | Web Development Intro 72 | 73 | 77 | Ready to start your web development journey? 78 | 79 | 82 | 83 | 84 |
85 | {CATEGORIES.slice(0, 2).map((props, key) => ( 86 | 87 | ))} 88 |
89 |
90 | {CATEGORIES.slice(2, 4).map((props, key) => ( 91 | 92 | ))} 93 |
94 |
95 |
96 | ); 97 | } 98 | 99 | export default CoursesCategories; -------------------------------------------------------------------------------- /src/app/events.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import React from "react"; 4 | import { Typography, Card, CardBody, CardHeader, Button } from "@material-tailwind/react"; 5 | import EventCard from "@/components/event-card"; 6 | 7 | const EVENTS = [ 8 | { 9 | img: "/image/blogs/blog-1.svg", 10 | title: "Future of Web Development: Trends and Innovations", 11 | desc: "Discover the latest trends and innovations shaping the future of web development.", 12 | buttonLabel: "register for free", 13 | }, 14 | { 15 | img: "/image/blogs/blog2.svg", 16 | title: "WebDev Pro Code-a-Thon: Build a Responsive Website", 17 | desc: "Participants will have 48 hours to create a responsive website from scratch using HTML, CSS, and JavaScript.", 18 | buttonLabel: "register for free", 19 | }, 20 | { 21 | img: "/image/blogs/blog3.svg", 22 | title: "Ask the Experts: Frontend Web Development", 23 | desc: "Join our live Q&A session with our experienced instructors. Get answers to your queries, insights into best practices.", 24 | buttonLabel: "get ticket", 25 | }, 26 | { 27 | img: "/image/blogs/blog4.svg", 28 | title: "Web Accessibility: Building Inclusive Websites", 29 | desc: "Industry experts will discuss the importance of inclusive design and share strategies for creating websites.", 30 | buttonLabel: "get ticket", 31 | }, 32 | ]; 33 | 34 | export function Events() { 35 | return ( 36 |
37 |
38 | 39 | Upcoming Events 40 | 41 | 45 | Join our web development events designed to share insights, trends, 46 | and real-world experiences. 47 | 48 |
49 |
50 | {EVENTS.map((props, idx) => ( 51 | 52 | ))} 53 |
54 |
55 | ); 56 | } 57 | 58 | 59 | export default Events; 60 | -------------------------------------------------------------------------------- /src/app/explore-courses.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { Typography } from "@material-tailwind/react"; 4 | import CourseCard from "@/components/course-card"; 5 | 6 | const COURSES = [ 7 | { 8 | img: "/image/blogs/blog4.svg", 9 | tag: "Beginner • 25 Classes • 200 Students", 10 | title: "Unlock the Web Foundation", 11 | label: "from $99", 12 | desc: "Dive into HTML to structure your content and CSS to style it. By the end, you'll be crafting beautiful web pages from scratch.", 13 | }, 14 | { 15 | img: "/image/blogs/blog3.svg", 16 | tag: "Medium • 10 Classes • 150 Students", 17 | title: "Craft Websites That Adapt", 18 | label: "from $199", 19 | desc: "Our Responsive Design course teaches you the art of creating websites that seamlessly adapt to different devices and screen sizes.", 20 | }, 21 | { 22 | img: "/image/blogs/blog2.svg", 23 | tag: "Medium • 23 Classes • 590 Students", 24 | title: "Master the Power of React", 25 | label: "from $499", 26 | desc: "Take your frontend development to the next level with our React Development course. Learn how to build interactive, dynamic web applications.", 27 | }, 28 | { 29 | img: "/image/blogs/blog5.svg", 30 | tag: "Beginner • 35 Classes • 400 Students", 31 | title: "Frontend Essentials Course", 32 | label: "from $49", 33 | desc: "For aspiring web developers, the Frontend Essentials course is a must. Dive into the core technologies - HTML, CSS, and JavaScript.", 34 | }, 35 | { 36 | img: "/image/blogs/blog6.svg", 37 | tag: "Medium • 10 Classes • 150 Students", 38 | title: "Streamline Your CSS Workflow", 39 | label: "from $99", 40 | desc: "Our Tailwind CSS Introduction course teaches you how to use this utility-first CSS framework to streamline your workflow, saving you time.", 41 | }, 42 | { 43 | img: "/image/blogs/blog4.svg", 44 | tag: "Medium • 33 Classes • 690 Students", 45 | title: "Master Backend Development", 46 | label: "from $299", 47 | desc: "Dream of becoming a backend developer? Our intensive one-month Node.js course is your fast track to achieving that goal.", 48 | }, 49 | ]; 50 | 51 | export function ExploreCourses() { 52 | return ( 53 |
54 |
55 | 56 | Explore Courses 57 | 58 | 62 | Browse through 1,000+ web development courses and find the one that 63 | fits your needs. 64 | 65 |
66 |
67 | {COURSES.map((props, idx) => ( 68 | 69 | ))} 70 |
71 |
72 | ); 73 | } 74 | 75 | export default ExploreCourses; 76 | -------------------------------------------------------------------------------- /src/app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /src/app/hero.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import Image from "next/image"; 4 | import { Button, Typography, Card } from "@material-tailwind/react"; 5 | 6 | function Hero() { 7 | return ( 8 |
9 | bg-img 16 |
17 |
18 | 19 | 24 | Unlock the Power of the Web with Our Expert Courses 25 | 26 | 27 | Are you ready to embark on an exciting journey into the world of 28 | web development? Look no further! We are your trusted partner for 29 | mastering the art of web development. 30 | 31 |
32 | 33 | 36 |
37 |
38 | pinterest 45 | netflix 52 | coinbase 59 | google 66 |
67 | 68 |
69 |
70 |
71 | ); 72 | } 73 | export default Hero; 74 | -------------------------------------------------------------------------------- /src/app/index.tsx: -------------------------------------------------------------------------------- 1 | 2 | export * from "./out-impressive-stats"; 3 | export * from "./hero"; 4 | export * from "./layout"; 5 | export * from "./page"; 6 | export * from "./students-feedback"; 7 | export * from "./explore-courses"; 8 | export * from "./testimonial"; 9 | export * from "./courses-categories"; 10 | export * from "./events"; 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import "./globals.css"; 2 | import type { Metadata } from "next"; 3 | import { Roboto } from "next/font/google"; 4 | import { Layout, FixedPlugin } from "@/components"; 5 | 6 | const roboto = Roboto({ 7 | subsets: ["latin"], 8 | weight: ["300", "400", "500", "700", "900"], 9 | display: "swap", 10 | }); 11 | 12 | export const metadata: Metadata = { 13 | title: "NextJS Tailwind Course Landing Page", 14 | description: 15 | "Introducing Tailwind Course Landing Page, a versatile and engaging landing page template designed using Tailwind CSS and Material Tailwind.", 16 | }; 17 | 18 | export default function RootLayout({ 19 | children, 20 | }: { 21 | children: React.ReactNode; 22 | }) { 23 | return ( 24 | 25 | 26 | 31 | 32 | 33 | 34 | 35 | {children} 36 | 37 | 38 | 39 | 40 | ); 41 | } 42 | -------------------------------------------------------------------------------- /src/app/out-impressive-stats.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import React from "react"; 4 | import { Typography } from "@material-tailwind/react"; 5 | import { 6 | DocumentTextIcon, 7 | PlayCircleIcon, 8 | PencilSquareIcon, 9 | PhoneArrowDownLeftIcon, 10 | } from "@heroicons/react/24/solid"; 11 | 12 | import StatsCard from "@/components/stats-card"; 13 | 14 | 15 | const STATS = [ 16 | { 17 | icon: DocumentTextIcon, 18 | count: "10,200+", 19 | title: "Students", 20 | }, 21 | { 22 | icon: PlayCircleIcon, 23 | count: "50+", 24 | title: "Instructors", 25 | }, 26 | { 27 | icon: PencilSquareIcon, 28 | count: "10+", 29 | title: "Courses", 30 | }, 31 | { 32 | icon: PhoneArrowDownLeftIcon, 33 | count: "24/7", 34 | title: "Support", 35 | }, 36 | ]; 37 | 38 | export function OutImpressiveStats() { 39 | return ( 40 |
41 |
42 |
43 | 44 | Explore Our Impressive Stats 45 | 46 | 50 | We take pride in our commitment to excellence and our dedication to 51 | your success. 52 | 53 |
54 |
55 | {STATS.map((props, key) => ( 56 | 57 | ))} 58 |
59 |
60 |
61 | ); 62 | } 63 | export default OutImpressiveStats; -------------------------------------------------------------------------------- /src/app/page.tsx: -------------------------------------------------------------------------------- 1 | // components 2 | import { Navbar, Footer } from "@/components"; 3 | 4 | // sections 5 | import Hero from "./hero"; 6 | import OutImpressiveStats from "./out-impressive-stats"; 7 | import CoursesCategories from "./courses-categories"; 8 | import ExploreCourses from "./explore-courses"; 9 | import Testimonial from "./testimonial"; 10 | import Events from "./events"; 11 | import StudentsFeedback from "./students-feedback"; 12 | import TrustedCompany from "./trusted-companies"; 13 | 14 | export default function Campaign() { 15 | return ( 16 | <> 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |