*/}
7 |
8 |
9 |
10 |
11 |
12 |
Newsletter.
13 |
14 | Subscribe our newsletter for discounts,
promo and many more.
15 |
16 |
17 |
18 |
19 |
20 |
21 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 | )
36 | }
37 |
38 | export default Newsletter;
--------------------------------------------------------------------------------
/public/assets/carousel/google.svg:
--------------------------------------------------------------------------------
1 |
9 |
--------------------------------------------------------------------------------
/public/assets/banner/check.svg:
--------------------------------------------------------------------------------
1 |
11 |
--------------------------------------------------------------------------------
/app/components/Companies/Companies.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 | import Image from "next/image";
3 | import React, { Component } from "react";
4 | import Slider from "react-slick";
5 |
6 | // IMAGES DATA FOR CAROUSEL
7 | interface Data {
8 | imgSrc: string;
9 | }
10 | // sample data
11 | const data: Data[] = [
12 | {
13 | imgSrc: "/assets/carousel/airbnb.svg"
14 | },
15 | {
16 | imgSrc: "/assets/carousel/fedex.svg"
17 | },
18 | {
19 | imgSrc: "/assets/carousel/google.svg"
20 | },
21 | {
22 | imgSrc: "/assets/carousel/hubspot.svg"
23 | },
24 | {
25 | imgSrc: "/assets/carousel/microsoft.svg"
26 | },
27 | {
28 | imgSrc: "/assets/carousel/walmart.svg"
29 | },
30 | {
31 | imgSrc: "/assets/carousel/airbnb.svg"
32 | },
33 | {
34 | imgSrc: "/assets/carousel/fedex.svg"
35 | }
36 | ]
37 |
38 |
39 | // CAROUSEL SETTINGS
40 | export default class MultipleItems extends Component {
41 | render() {
42 | const settings = {
43 | dots: false,
44 | infinite: true,
45 | slidesToShow: 4,
46 | slidesToScroll: 1,
47 | arrows: false,
48 | autoplay: true,
49 | speed: 2000,
50 | autoplaySpeed: 2000,
51 | cssEase: "linear",
52 | responsive: [
53 | {
54 | breakpoint: 1024,
55 | settings: {
56 | slidesToShow: 4,
57 | slidesToScroll: 1,
58 | infinite: true,
59 | dots: false
60 | }
61 | },
62 | {
63 | breakpoint: 700,
64 | settings: {
65 | slidesToShow: 2,
66 | slidesToScroll: 1,
67 | infinite: true,
68 | dots: false
69 | }
70 | },
71 | {
72 | breakpoint: 500,
73 | settings: {
74 | slidesToShow: 1,
75 | slidesToScroll: 1,
76 | infinite: true,
77 | dots: false
78 | }
79 | }
80 | ]
81 | };
82 |
83 | return (
84 |
85 |
86 |
87 |
Trusted by companies of all sizes
88 |
89 | {/* @ts-ignore */}
90 |
91 | {data.map((item, i) =>
92 |
93 |
94 |
95 | )}
96 |
97 |
98 |
99 |
100 |
101 |
102 | )
103 | }
104 | }
105 |
--------------------------------------------------------------------------------
/app/components/Banner/index.tsx:
--------------------------------------------------------------------------------
1 | import Image from 'next/image';
2 |
3 | const Banner = () => {
4 |
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
Get 70% off on first enroll
15 |
16 |
Advance your engineering skills with us.
17 |
Build skills with our courses and mentor from world-class companies.
18 |
19 |
20 |
21 |
22 |
25 |
26 |
27 |
28 |
29 |
33 |
34 |
35 |
Learning path
36 |
37 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 | )
51 | }
52 |
53 | export default Banner;
54 |
--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap');
2 | @import "slick-carousel/slick/slick.css";
3 | @import "slick-carousel/slick/slick-theme.css";
4 |
5 | @tailwind base;
6 | @tailwind components;
7 | @tailwind utilities;
8 |
9 | body {
10 | font-family: 'Poppins', sans-serif;
11 | }
12 |
13 | html {
14 | --scroll-behavior: smooth !important;
15 | scroll-behavior: smooth !important;
16 | }
17 |
18 | html:not([data-scroll="0"]) .navbar {
19 | position: fixed;
20 | top: 0;
21 | width: 100%;
22 | background-color: white !important;
23 | opacity: 1.9;
24 | box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
25 | transition: 0.4s linear;
26 | padding: 0px !important;
27 | z-index: 3;
28 | }
29 |
30 | hr {
31 | background: #9BA3B0;
32 | color: #9BA3B0;
33 | opacity: 0.45;
34 | }
35 |
36 | .underline-links {
37 | position: relative;
38 | }
39 |
40 | .underline-links::before {
41 | content: "";
42 | position: absolute;
43 | left: 34%;
44 | bottom: 16px;
45 | margin-top: 10px;
46 | bottom: 16%;
47 | width: 30px;
48 | height: 5px;
49 | border-radius: 50px;
50 | transform: skew(-12deg) translateX(-50%);
51 | background: #6556FF;
52 | z-index: -1;
53 | }
54 |
55 | .testimonialbg {
56 | background: linear-gradient(-60deg, #1CBEEE 29.34%, #1A21BC 107.98%);
57 | /* background-image: url('/assets/newsletter/bgg.png'); */
58 | clip-path: polygon(100% 0, 100% 38%, 100% 100%, 0 100%, 0 20%);
59 | }
60 |
61 | .clipPath {
62 | clip-path: polygon(0 0, 100% 0, 100% 93%, 0 100%);
63 | }
64 |
65 | .space-links {
66 | transition: .3s;
67 | }
68 |
69 | .space-links:hover {
70 | letter-spacing: 1px;
71 | }
72 |
73 | .lh-120 {
74 | line-height: 120% !important;
75 | }
76 |
77 | .lh-160 {
78 | line-height: 160% !important;
79 | }
80 |
81 | .footer-icons {
82 | transition: .5s;
83 | }
84 |
85 | .footer-icons:hover {
86 | transform: translateY(-8px);
87 | }
88 |
89 | .footer-icons:hover>.sepiaa {
90 | filter: invert(100.10);
91 | }
92 |
93 | .slick-dots li.slick-active button:before {
94 | opacity: 1;
95 | color: #1A21BC!important;
96 | }
97 |
98 | .slick-dots li button:before {
99 | font-size: 11px!important;
100 | }
101 |
102 | .slick-prev {
103 | left: 69rem!important;
104 | }
105 |
106 | .slick-prev, .slick-next {
107 | font-size: 0;
108 | line-height: 0;
109 | position: absolute;
110 | top: -14%!important;
111 | display: block;
112 | width: 20px;
113 | height: 20px;
114 | padding: 0;
115 | transform: translate(0, -50%);
116 | cursor: pointer;
117 | color: transparent;
118 | border: none;
119 | outline: none;
120 | background: transparent;
121 | }
122 |
123 | @media (min-width: 800px) {
124 | .lh-82 {
125 | line-height: 82px !important;
126 | }
127 | }
128 |
129 | .input-shadow {
130 | box-shadow: 0px 63px 59px rgba(26, 33, 188, 0.1);
131 | }
132 |
133 | .w-270 {
134 | width: 270px;
135 | }
136 |
137 | @media (max-width: 450px) {
138 | .smallImage {
139 | width: 15px;
140 | }
141 | }
142 |
143 | .shadow-courses {
144 | box-shadow: 0px 40px 20px rgba(0, 0, 0, 0.15);
145 | }
146 |
147 | .testimonial-shadow {
148 | box-shadow: 0px 5.54348px 11.087px rgba(89, 104, 118, 0.05);
149 | border-radius: 22.1739px;
150 | }
151 |
152 | .middleDiv {
153 | box-shadow: 5.54348px 38.8043px 110.87px rgba(89, 104, 118, 0.15)!important;
154 | border-radius: 22.1739px;
155 | transform: scale(1.05);
156 | }
157 |
158 | .slick-dots {
159 | color: #1A21BC;
160 | }
161 |
162 | .leftRightAngle {
163 | width: 0px;
164 | height: 0px;
165 | border: 200px solid;
166 | border-bottom-color: brown;
167 | border-top-color: transparent;
168 | border-left-color: brown;
169 | border-right-color: transparent;
170 | }
171 | /* here the url will focus its path to public folder location for the image */
172 | .bg-imagee {
173 | background-image: url('/assets/newsletter/bgFile.png');
174 | background-size: cover;
175 | border-radius: 20px;
176 | }
177 |
--------------------------------------------------------------------------------
/app/components/Footer/Footer.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import Image from "next/image";
3 |
4 | interface ProductType {
5 | id: number;
6 | section: string;
7 | link: string[];
8 | }
9 |
10 | interface socialLinks {
11 | imgSrc: string;
12 | link: string;
13 | width: number;
14 | }
15 |
16 | const socialLinks: socialLinks[] = [
17 | {
18 | imgSrc: '/assets/footer/facebook.svg',
19 | link: 'www.facebook.com',
20 | width: 10
21 | },
22 | {
23 | imgSrc: '/assets/footer/insta.svg',
24 | link: 'www.instagram.com',
25 | width: 14
26 | },
27 | {
28 | imgSrc: '/assets/footer/twitter.svg',
29 | link: 'www.twitter.com',
30 | width: 14
31 | },
32 |
33 | ]
34 |
35 | const products: ProductType[] = [
36 | {
37 | id: 1,
38 | section: "Company",
39 | link: ['About', 'Careers', 'Mobile', 'Blog', 'How we work?'],
40 | },
41 | {
42 | id: 2,
43 | section: "Contact",
44 | link: ['Help/FAQ', 'Press', 'Affiliates', 'Instructors', 'Partners']
45 | }
46 | ,
47 | {
48 | id: 3,
49 | section: "More",
50 | link: [ 'Scholarship', 'Badges &', 'Certificates']
51 | }
52 | ]
53 |
54 | const footer = () => {
55 | return (
56 |
57 |
58 |
59 |
60 | {/* COLUMN-1 */}
61 |
62 |
63 |
66 |
Learn within Just Hours, become full professional
and get into High Paying Jobs
67 |
68 |
69 | {socialLinks.map((items, i) => (
70 |
71 |
72 |
73 |
74 |
75 | ))}
76 |
77 |
78 |
79 |
80 | {/* CLOUMN-2/3/4 */}
81 |
82 |
83 | {products.map((product) => (
84 |
85 |
{product.section}
86 |
87 | {product.link.map((link: string, index: number) => (
88 | -
89 | {link}
90 |
91 | ))}
92 |
93 |
94 | ))}
95 |
96 |
97 |
98 | {/* All Rights Reserved */}
99 |
100 |
101 |
@2024 SkillTrills All rights reserved.
102 |
103 |
Privacy policy
104 |
105 |
Terms & conditions
106 |
107 |
108 |
109 | )
110 | }
111 |
112 | export default footer;
113 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | # SkillThrills
4 |
5 | [](https://github.com/muhammad-fiaz/SkillThrills/blob/main/LICENSE)
6 | [](https://github.com/muhammad-fiaz/SkillThrills/graphs/contributors)
7 | [](https://github.com/sponsors/muhammad-fiaz)
8 | [](https://github.com/muhammad-fiaz/SkillThrills/issues)
9 | [](https://github.com/muhammad-fiaz/SkillThrills/pulls)
10 | 
11 | [](https://discord.gg/Wu7Kcpz9)
12 |
13 |
14 |
15 |
16 | **Skill Thrills** is an educational learning website built with **Next.js** and **TypeScript**, designed to offer immersive and interactive learning experiences.
17 |
18 | ## Table of Contents
19 |
20 | - [About the Project](#about-the-project)
21 | - [Features](#features)
22 | - [Installation](#installation)
23 | - [Usage](#usage)
24 | - [Folder Structure](#folder-structure)
25 | - [Technologies Used](#technologies-used)
26 | - [Contributing](#contributing)
27 | - [License](#license)
28 |
29 | ## About the Project
30 |
31 | Skill Thrills aims to create an educational platform that provides engaging and interactive learning content. While the project is still under development, the future goal is to offer diverse educational experiences in various subjects. The platform is built using modern web technologies such as **Next.js** and **TypeScript** to ensure scalability and performance.
32 |
33 | > **Note:** All the content, data, and images are for development purposes and are subject to change. The current assets are dummy content, and no ownership is claimed over any images used.
34 |
35 | ## Features
36 |
37 | - Built with **Next.js** for server-side rendering and optimized performance.
38 | - Developed in **TypeScript** for static type checking and improved code quality.
39 | - Scalable folder structure for managing components and pages(using `app/` router).
40 | - Supports interactive educational modules (in development).
41 | - Placeholder content for now, but ready for integration with real data.
42 |
43 | ## Installation
44 |
45 | To get started, clone the repository and install the dependencies:
46 |
47 | ```bash
48 | git clone https://github.com/your-username/skill-thrills.git
49 | cd skill-thrills
50 | ```
51 |
52 | Then install the required packages:
53 |
54 | Using npm:
55 |
56 | ```bash
57 | npm install
58 | ```
59 |
60 | Using Yarn:
61 |
62 | ```bash
63 | yarn install
64 | ```
65 |
66 | Using pnpm:
67 |
68 | ```bash
69 | pnpm install
70 | ```
71 |
72 | ## Usage
73 |
74 | To run the development server:
75 |
76 | ```bash
77 | npm run dev
78 | # or
79 | yarn dev
80 | # or
81 | pnpm dev
82 | ```
83 |
84 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
85 |
86 | You can start editing the pages by modifying the files in the `app/` directory. The application will auto-update as you edit the files.
87 |
88 | ## Folder Structure
89 |
90 | ```bash
91 | .
92 | ├── app/components # Reusable React components
93 | ├── app # Next.js pages
94 | ├── public # Static assets
95 | ├── app/global.css # Global and component-level styles
96 | ├── app/courses # Course pages
97 | ├── tsconfig.json # TypeScript configuration
98 | └── next.config.js # Next.js configuration
99 | ```
100 |
101 | ## Technologies Used
102 |
103 | - **Next.js**: React framework for building fast web applications.
104 | - **TypeScript**: Superset of JavaScript that adds static types.
105 | - **React**: JavaScript library for building user interfaces.
106 | - **Heroicons**: Used for Icons
107 | - **CSS**: For global styles
108 | - **Tailwindcss**: for styling the application
109 | - **Vercel**: Hosting platform for serverless deployment.
110 |
111 | ## Contributing
112 |
113 | Contributions are welcome! If you'd like to contribute to this project, please follow these steps:
114 |
115 | 1. Fork the repository.
116 | 2. Create a new branch with your feature or fix (`git checkout -b feature/YourFeature`).
117 | 3. Commit your changes (`git commit -m 'Add some feature'`).
118 | 4. Push to the branch (`git push origin feature/YourFeature`).
119 | 5. Open a pull request and describe your changes.
120 |
121 | ## License
122 |
123 | This project is licensed under the **MIT License**. See the [LICENSE](./LICENSE) file for more details.
124 |
125 |
--------------------------------------------------------------------------------
/app/components/Navbar/Navbar.tsx:
--------------------------------------------------------------------------------
1 | import { Disclosure } from '@headlessui/react';
2 | import Link from 'next/link';
3 | import React, { useState } from 'react';
4 | import { Bars3Icon } from '@heroicons/react/24/outline';
5 | import Drawer from "./Drawer";
6 | import Drawerdata from "./Drawerdata";
7 | import Signdialog from "./Signdialog";
8 | import Registerdialog from "./Registerdialog";
9 | import Image from "next/image";
10 |
11 | interface NavigationItem {
12 | name: string;
13 | href: string;
14 | current: boolean;
15 | }
16 |
17 | const navigation: NavigationItem[] = [
18 | { name: 'Home', href: '/', current: true },
19 | { name: 'Courses', href: '/courses', current: false },
20 | { name: 'Instructor', href: '#mentor', current: false },
21 | { name: 'Our Learners', href: '', current: false },
22 |
23 | ];
24 |
25 | function classNames(...classes: string[]) {
26 | return classes.filter(Boolean).join(' ');
27 | }
28 |
29 | const CustomLink = ({ href, onClick, children }: { href: string; onClick: () => void; children: React.ReactNode }) => {
30 | return (
31 |
32 |
36 | {children}
37 |
38 |
39 | );
40 | };
41 |
42 |
43 | const Navbar = () => {
44 | const [isOpen, setIsOpen] = React.useState(false);
45 |
46 | const [currentLink, setCurrentLink] = useState('/');
47 |
48 | const handleLinkClick = (href: string) => {
49 | setCurrentLink(href);
50 | };
51 |
52 | return (
53 |
54 | <>
55 |
56 |
57 |
58 |
59 | {/* LOGO */}
60 |
61 |
62 |
SkillThrills.
63 |
SkillThrills.
65 |
66 |
67 |
68 | {/* LINKS */}
69 |
70 |
71 |
72 | {navigation.map((item) => (
73 | handleLinkClick(item.href)}
77 | >
78 |
85 | {item.name}
86 |
87 |
88 | ))}
89 |
90 |
91 |
92 |
93 | {/* SIGNIN DIALOG */}
94 |
95 |
96 |
97 |
98 | {/* REGISTER DIALOG */}
99 |
100 |
101 |
102 |
103 | {/* DRAWER FOR MOBILE VIEW */}
104 |
105 | {/* DRAWER ICON */}
106 |
107 |
108 | setIsOpen(true)} />
109 |
110 |
111 | {/* DRAWER LINKS DATA */}
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
122 | );
123 | };
124 |
125 | export default Navbar;
126 |
--------------------------------------------------------------------------------
/app/components/OurLearners/index.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 | import Slider from "react-slick";
3 | import React, { Component } from "react";
4 | import { StarIcon } from '@heroicons/react/24/solid';
5 | import Image from "next/image";
6 |
7 | // CAROUSEL DATA
8 |
9 | interface DataType {
10 | profession: string;
11 | comment: string;
12 | imgSrc: string;
13 | name: string;
14 | }
15 | // sample data
16 | const postData: DataType[] = [
17 | {
18 | name: "John Doe",
19 | profession: 'Student',
20 | comment: 'There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour',
21 | imgSrc: '/assets/mentor/user1.png',
22 | },
23 | {
24 | name: "alex john",
25 | profession: 'Senior UX Designer',
26 | comment: 'There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour',
27 | imgSrc: '/assets/mentor/user2.png',
28 | },
29 | {
30 | name: "Taylor Otwell",
31 | profession: 'Senior Frontend Developer',
32 | comment: 'There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour',
33 | imgSrc: '/assets/mentor/user1.png',
34 | },
35 |
36 | ]
37 |
38 | // CAROUSEL SETTINGS
39 |
40 |
41 | export default class MultipleItems extends Component {
42 |
43 | render() {
44 | const settings = {
45 | dots: true,
46 | dotsClass: "slick-dots",
47 | infinite: true,
48 | slidesToShow: 3,
49 | // centerMode: true,
50 | slidesToScroll: 2,
51 | arrows: false,
52 | autoplay: false,
53 | speed: 500,
54 | autoplaySpeed: 2000,
55 | cssEase: "linear",
56 | responsive: [
57 | {
58 | breakpoint: 1200,
59 | settings: {
60 | slidesToShow: 3,
61 | slidesToScroll: 1,
62 | infinite: true,
63 | dots: false
64 | }
65 | },
66 | {
67 | breakpoint: 800,
68 | settings: {
69 | slidesToShow: 2,
70 | slidesToScroll: 1,
71 | infinite: true,
72 | dots: false
73 | }
74 | },
75 | {
76 | breakpoint: 600,
77 | settings: {
78 | slidesToShow: 1,
79 | slidesToScroll: 1,
80 | infinite: true,
81 | dots: false
82 | }
83 | }
84 | ]
85 | };
86 |
87 | return (
88 |
89 |
90 | {/* @ts-ignore */}
91 |
92 |
93 | {postData.map((items, i) => (
94 |
95 |
96 |
97 |
98 |
99 |
{items.comment}
100 |
101 |
102 |
103 |
{items.name}
104 | {items.profession}
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
118 |
119 |
120 |
121 | );
122 | }
123 | }
124 |
--------------------------------------------------------------------------------
/public/assets/carousel/hubspot.svg:
--------------------------------------------------------------------------------
1 |
10 |
--------------------------------------------------------------------------------
/app/components/Instructor/index.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 | import Slider from "react-slick";
3 | import React, { Component } from "react";
4 | import Image from "next/image";
5 |
6 | // CAROUSEL DATA
7 |
8 | interface DataType {
9 | profession: string;
10 | name: string;
11 | imgSrc: string;
12 | }
13 |
14 | const postData: DataType[] = [
15 | {
16 | profession: 'Senior UX Designer',
17 | name: 'John Doe',
18 | imgSrc: '/assets/mentor/user1.png',
19 | },
20 | {
21 | profession: 'Full Stack Developer',
22 | name: 'william john',
23 | imgSrc: '/assets/mentor/user1.png',
24 | },
25 | {
26 | profession: 'Frontend Developer',
27 | name: 'Taylor Otwell',
28 | imgSrc: '/assets/mentor/user1.png',
29 | },
30 |
31 | ]
32 |
33 | // CAROUSEL SETTINGS
34 |
35 | function SampleNextArrow(props: { className: any; style: any; onClick: any; }) {
36 | const { className, style, onClick } = props;
37 | return (
38 |
43 | );
44 | }
45 |
46 | function SamplePrevArrow(props: { className: any; style: any; onClick: any; }) {
47 | const { className, style, onClick } = props;
48 | return (
49 |
54 | );
55 | }
56 |
57 |
58 |
59 | export default class MultipleItems extends Component {
60 |
61 | render() {
62 | const settings = {
63 | dots: false,
64 | infinite: true,
65 | slidesToShow: 3,
66 | // centerMode: true,
67 | slidesToScroll: 1,
68 | arrows: false,
69 | autoplay: false,
70 | speed: 4000,
71 | nextArrow:
,
72 | prevArrow:
,
73 | autoplaySpeed: 4500,
74 | cssEase: "linear",
75 | responsive: [
76 | {
77 | breakpoint: 1200,
78 | settings: {
79 | slidesToShow: 3,
80 | slidesToScroll: 1,
81 | infinite: true,
82 | dots: false
83 | }
84 | },
85 | {
86 | breakpoint: 1000,
87 | settings: {
88 | slidesToShow: 2,
89 | slidesToScroll: 1,
90 | infinite: true,
91 | dots: false
92 | }
93 | },
94 | {
95 | breakpoint: 530,
96 | settings: {
97 | slidesToShow: 1,
98 | slidesToScroll: 1,
99 | infinite: true,
100 | dots: false
101 | }
102 | }
103 | ]
104 | };
105 |
106 |
107 | return (
108 |
109 |
110 |
111 |
Meet with our
Instructor.
112 | {/* @ts-ignore */}
113 |
114 |
115 | {postData.map((items, i) => (
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
{items.name}
126 | {items.profession}
127 |
128 |
129 |
132 |
133 |
134 |
135 |
136 | );
137 | }
138 | }
139 |
--------------------------------------------------------------------------------
/public/assets/carousel/walmart.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/public/assets/carousel/microsoft.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/public/assets/carousel/airbnb.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/app/components/Courses/index.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 | import Slider from "react-slick";
3 | import React, { Component } from "react";
4 | import Link from "next/link";
5 | import Image from "next/image";
6 | import { StarIcon } from '@heroicons/react/24/solid'
7 |
8 | // CAROUSEL DATA
9 |
10 | interface DataType {
11 | heading: string;
12 | heading2: string;
13 | imgSrc: string;
14 | name: string;
15 | students: number;
16 | classes: number;
17 | price: number;
18 | rating: number;
19 | }
20 |
21 | const postData: DataType[] = [
22 | {
23 | heading: 'Full stack modern',
24 | heading2: 'web development',
25 | name: "william john",
26 | imgSrc: '/assets/courses/courseone.png',
27 | students: 150,
28 | classes: 12,
29 | price: 50,
30 | rating: 4.9,
31 | },
32 | {
33 | heading: 'Front end web development',
34 | heading2: 'with React',
35 | name: "taylor otwell",
36 | imgSrc: '/assets/courses/coursetwo.png',
37 | students: 130,
38 | classes: 6,
39 | price: 25,
40 | rating: 4.0,
41 | },
42 | {
43 | heading: 'UI/UX design',
44 | heading2: 'with Figma',
45 | name: "John doe",
46 | imgSrc: '/assets/courses/coursethree.png',
47 | students: 120,
48 | classes: 8,
49 | price: 15,
50 | rating: 4.5,
51 | },
52 | {
53 | heading: 'Back end web development',
54 | heading2: 'with Node.js and MongoDB',
55 | name: "william john",
56 | imgSrc: '/assets/courses/courseone.png',
57 | students: 150,
58 | classes: 9,
59 | price: 20,
60 | rating: 4.7,
61 | },
62 | {
63 | heading: 'database management',
64 | heading2: 'with SQL and NoSQL',
65 | name: "scott william",
66 | imgSrc: '/assets/courses/coursetwo.png',
67 | students: 150,
68 | classes: 8,
69 | price: 20,
70 | rating: 4.7,
71 | },
72 | {
73 | heading: 'Deploying web applications',
74 | heading2: 'with AWS and Heroku',
75 | name: "john doe",
76 | imgSrc: '/assets/courses/coursethree.png',
77 | students: 150,
78 | classes: 7,
79 | price: 25,
80 | rating: 4.7,
81 | },
82 | ]
83 |
84 | // CAROUSEL SETTINGS
85 |
86 |
87 | export default class MultipleItems extends Component {
88 |
89 | render() {
90 | const settings = {
91 | dots: false,
92 | infinite: true,
93 | slidesToShow: 3,
94 | // centerMode: true,
95 | slidesToScroll: 2,
96 | arrows: false,
97 | autoplay: false,
98 | speed: 500,
99 | cssEase: "linear",
100 | responsive: [
101 | {
102 | breakpoint: 1200,
103 | settings: {
104 | slidesToShow: 2,
105 | slidesToScroll: 1,
106 | infinite: true,
107 | dots: false
108 | }
109 | },
110 | {
111 | breakpoint: 600,
112 | settings: {
113 | slidesToShow: 1,
114 | slidesToScroll: 1,
115 | infinite: true,
116 | dots: false
117 | }
118 | }
119 | ]
120 | };
121 |
122 |
123 | return (
124 |
125 |
126 |
127 |
128 |
Popular courses.
129 | Explore courses >
130 |
131 |
132 | {/* @ts-ignore */}
133 |
134 |
135 | {postData.map((items, i) => (
136 |
137 |
138 |
139 |
140 |
141 |
142 |
best
seller
143 |
144 |
145 |
146 |
147 |
{items.heading}
148 |
{items.heading2}
149 |
150 |
151 |
{items.name}
152 |
153 |
154 |
155 |
156 |
{items.rating}
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
${items.price}
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
{items.classes} classes
176 |
177 |
178 |
179 |
{items.students} students
180 |
181 |
182 |
183 |
184 |
187 |
188 |
189 |
190 | );
191 | }
192 | }
193 |
--------------------------------------------------------------------------------
/app/components/Navbar/Registerdialog.tsx:
--------------------------------------------------------------------------------
1 | import { Dialog, Transition } from '@headlessui/react'
2 | import React, { Fragment, useState } from 'react'
3 | import { LockClosedIcon } from '@heroicons/react/20/solid'
4 |
5 |
6 | const Register = () => {
7 | let [isOpen, setIsOpen] = useState(false)
8 |
9 | const closeModal = () => {
10 | setIsOpen(false)
11 | }
12 |
13 | const openModal = () => {
14 | setIsOpen(true)
15 | }
16 |
17 | return (
18 | <>
19 |
20 |
21 |
24 |
25 |
26 |
27 |
28 |
142 |
143 |
144 | )
145 | }
146 |
147 | export default Register;
148 |
--------------------------------------------------------------------------------
/app/components/Navbar/Signdialog.tsx:
--------------------------------------------------------------------------------
1 | import { Dialog, Transition } from '@headlessui/react'
2 | import React, { Fragment, useState } from 'react'
3 | import { LockClosedIcon } from '@heroicons/react/20/solid'
4 |
5 |
6 | const Signin = () => {
7 | let [isOpen, setIsOpen] = useState(false)
8 |
9 | const closeModal = () => {
10 | setIsOpen(false)
11 | }
12 |
13 | const openModal = () => {
14 | setIsOpen(true)
15 | }
16 |
17 | return (
18 | <>
19 |
20 |
21 |
24 |
25 |
26 |
27 |
28 |
147 |
148 |
149 | )
150 | }
151 |
152 | export default Signin;
153 |
--------------------------------------------------------------------------------
/public/assets/footer/logo.svg:
--------------------------------------------------------------------------------
1 |
15 |
--------------------------------------------------------------------------------
31 |