-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
36568d1
commit 826e614
Showing
16 changed files
with
692 additions
and
34 deletions.
There are no files selected for viewing
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| import React from "react"; | ||
| import { FaBookOpen, FaNewspaper, FaImages } from "react-icons/fa"; | ||
|
|
||
| import Link from "@docusaurus/Link"; | ||
|
|
||
| const Blog: React.FC = () => { | ||
| const blogPosts = [ | ||
| { | ||
| title: "Getting Started with JavaScript", | ||
| description: | ||
| "Learn the fundamentals of JavaScript and how to set up your development environment.", | ||
| icon: ( | ||
| <FaBookOpen className="h-12 w-12 text-blue-500 dark:text-yellow-400 mb-4" /> | ||
| ), | ||
| link: "#", // /blog/getting-started-with-js | ||
| }, | ||
| { | ||
| title: "Advanced JavaScript Techniques", | ||
| description: | ||
| "Explore advanced topics in JavaScript, such as closures, async programming, and more.", | ||
| icon: ( | ||
| <FaNewspaper className="h-12 w-12 text-blue-500 dark:text-yellow-400 mb-4" /> | ||
| ), | ||
| link: "#", // /blog/advanced-js-techniques | ||
| }, | ||
| { | ||
| title: "JavaScript Tools & Libraries", | ||
| description: | ||
| "Discover powerful tools and libraries to streamline your JavaScript development process.", | ||
| icon: ( | ||
| <FaImages className="h-12 w-12 text-blue-500 dark:text-yellow-400 mb-4" /> | ||
| ), | ||
| link: "#", // /blog/js-tools-and-libraries | ||
| }, | ||
| ]; | ||
|
|
||
| return ( | ||
| <section className="py-20 bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-100"> | ||
| <div className="container mx-auto px-6 lg:px-20 text-center"> | ||
| <h2 className="text-3xl lg:text-4xl font-bold mb-12"> | ||
| Blog & Resources | ||
| </h2> | ||
| <p className="text-lg mb-8 text-gray-600 dark:text-gray-300"> | ||
| Stay updated with the latest JavaScript trends, tutorials, and tips | ||
| from our expert team. | ||
| </p> | ||
| <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3"> | ||
| {blogPosts.map((post, index) => ( | ||
| <Link | ||
| key={index} | ||
| to={post.link} | ||
| className="flex flex-col items-center p-6 bg-white dark:bg-gray-800 shadow-lg rounded-lg transform hover:scale-105 transition duration-300" | ||
| > | ||
| {post.icon} | ||
| <h3 className="text-xl font-semibold mb-2">{post.title}</h3> | ||
| <p className="text-sm text-gray-600 dark:text-gray-400"> | ||
| {post.description} | ||
| </p> | ||
| </Link> | ||
| ))} | ||
| </div> | ||
| <div className="mt-12"> | ||
| <a | ||
| href="/blog" | ||
| className="text-blue-600 dark:text-yellow-400 font-semibold text-lg underline hover:text-blue-700 dark:hover:text-yellow-500" | ||
| > | ||
| View All Articles | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| ); | ||
| }; | ||
|
|
||
| export default Blog; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| import React from 'react'; | ||
| import Link from '@docusaurus/Link'; | ||
| import { FaComments, FaUsers, FaChalkboardTeacher, FaHeadset } from 'react-icons/fa'; // React Icons | ||
|
|
||
| interface Feature { | ||
| title: string; | ||
| description: string; | ||
| icon: React.FC<React.SVGProps<SVGSVGElement>>; // This type remains the same | ||
| link: string; | ||
| } | ||
|
|
||
| const features: Feature[] = [ | ||
| { | ||
| title: 'Community Forums', | ||
| description: | ||
| 'Engage with fellow learners and experienced developers. Share knowledge, ask questions, and collaborate on projects.', | ||
| icon: FaComments, // Replacing ChatAlt2Icon with FaComments | ||
| link: '#', // /community/forums | ||
| }, | ||
| { | ||
| title: 'Live Chat Groups', | ||
| description: | ||
| 'Join real-time discussions in our chat groups. Stay updated with the latest trends and get instant help when you need it.', | ||
| icon: FaUsers, // Replacing UsersIcon with FaUsers | ||
| link: '#', // /community/chat | ||
| }, | ||
| { | ||
| title: 'Expert Mentorship', | ||
| description: | ||
| 'Receive guidance from industry experts. Our mentors are here to help you navigate your learning journey and achieve your goals.', | ||
| icon: FaChalkboardTeacher, // Replacing AcademicCapIcon with FaChalkboardTeacher | ||
| link: '#', | ||
| }, | ||
| { | ||
| title: '24/7 Support', | ||
| description: | ||
| 'Access our support team anytime. Whether you have technical issues or need assistance with your learning path, we’re here to help.', | ||
| icon: FaHeadset, // Replacing SupportIcon with FaHeadset | ||
| link: '#', | ||
| }, | ||
| ]; | ||
|
|
||
| const Community: React.FC = () => { | ||
| return ( | ||
| <section className="py-20 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"> | ||
| <div className="container px-4"> | ||
| <h2 className="text-3xl lg:text-4xl font-bold text-center mb-8"> | ||
| Community & Support | ||
| </h2> | ||
| <p className="text-lg lg:text-xl text-center mb-12"> | ||
| Join our vibrant community and take advantage of comprehensive support to enhance your learning experience. Connect, collaborate, and grow with JavaScript Mastery. | ||
| </p> | ||
| <div className="grid gap-8 grid-cols-1 lg:grid-cols-4 md:grid-cols-2"> | ||
| {features.map((feature, index) => ( | ||
| <div | ||
| key={index} | ||
| className="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 flex flex-col items-center text-center" | ||
| > | ||
| <feature.icon className="h-12 w-12 text-blue-500 dark:text-yellow-400 mb-4" /> | ||
| <h3 className="text-xl font-semibold mb-2">{feature.title}</h3> | ||
| <p className="flex-grow mb-4">{feature.description}</p> | ||
| <Link | ||
| to={feature.link} | ||
| className="mt-auto inline-block px-4 py-2 bg-blue-500 dark:bg-yellow-400 text-white dark:text-gray-800 font-semibold rounded-lg shadow-md hover:bg-blue-600 dark:hover:bg-yellow-500 transition-colors duration-300" | ||
| > | ||
| Learn More | ||
| </Link> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </section> | ||
| ); | ||
| }; | ||
|
|
||
| export default Community; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| import React from 'react'; | ||
| import Link from '@docusaurus/Link'; | ||
|
|
||
| interface Course { | ||
| title: string; | ||
| description: string; | ||
| link: string; | ||
| } | ||
|
|
||
| const courses: Course[] = [ | ||
| { | ||
| title: 'JavaScript Basics', | ||
| description: 'Get started with JavaScript fundamentals and build a strong foundation.', | ||
| link: '#', | ||
| }, | ||
| { | ||
| title: 'Advanced JavaScript', | ||
| description: 'Deepen your understanding with advanced topics like closures, prototypes, and async programming.', | ||
| link: '#', | ||
| }, | ||
| { | ||
| title: 'JavaScript for Web Development', | ||
| description: 'Learn how to build dynamic web applications with JavaScript, HTML, and CSS.', | ||
| link: '#', | ||
| }, | ||
| { | ||
| title: 'Node.js Essentials', | ||
| description: 'Master back-end JavaScript and create powerful server-side applications with Node.js.', | ||
| link: '#', | ||
| }, | ||
| { | ||
| title: 'JavaScript Libraries & Frameworks', | ||
| description: 'Explore popular libraries and frameworks like React, Vue, and Angular.', | ||
| link: '#', | ||
| }, | ||
| { | ||
| title: 'Full-Stack JavaScript', | ||
| description: 'Combine front-end and back-end skills to become a full-stack JavaScript developer.', | ||
| link: '#', | ||
| }, | ||
| ]; | ||
|
|
||
| const Courses: React.FC = () => { | ||
| return ( | ||
| <section className="py-16 bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100"> | ||
| <div className="container mx-auto px-4"> | ||
| <h2 className="text-3xl lg:text-4xl font-bold text-center mb-8"> | ||
| Courses & Learning Paths | ||
| </h2> | ||
| <p className="text-lg lg:text-xl text-center mb-12"> | ||
| Discover comprehensive courses and learning paths to take you from JavaScript beginner to pro. Start your journey today! | ||
| </p> | ||
| <div className="grid gap-8 grid-cols-1 lg:grid-cols-3 md:grid-cols-2"> | ||
| {courses.map((course, index) => ( | ||
| <div key={index} className="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md flex flex-col"> | ||
| <h3 className="text-xl font-semibold mb-3">{course.title}</h3> | ||
| <p className="flex-grow mb-6">{course.description}</p> | ||
| <Link | ||
| to={course.link} | ||
| className="mt-auto inline-block px-5 py-3 text-white bg-blue-600 hover:bg-blue-700 rounded-lg text-center transition duration-300" | ||
| > | ||
| Learn More | ||
| </Link> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </section> | ||
| ); | ||
| }; | ||
|
|
||
| export default Courses; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import Link from '@docusaurus/Link'; | ||
| import React from 'react'; | ||
| import { FaArrowRight } from 'react-icons/fa'; // React Icon for Arrow | ||
|
|
||
| const GetStarted: React.FC = () => { | ||
| return ( | ||
| <section className="py-20 bg-blue-500 dark:bg-blue-700 text-white"> | ||
| <div className="container mx-auto px-6 text-center"> | ||
| <h2 className="text-3xl lg:text-4xl font-bold mb-4"> | ||
| Get Started Today! | ||
| </h2> | ||
| <p className="text-lg lg:text-xl mb-8 max-w-2xl mx-auto"> | ||
| Take the first step towards mastering JavaScript with our interactive courses and hands-on projects. Join thousands of learners who are already on their journey to becoming JavaScript experts. | ||
| </p> | ||
| <Link | ||
| to="/docs/" | ||
| className="inline-flex items-center justify-center px-6 py-3 bg-yellow-400 hover:bg-yellow-500 text-gray-800 font-semibold rounded-lg shadow-md transition-colors duration-300" | ||
| > | ||
| Get Started | ||
| <FaArrowRight className="ml-2 h-5 w-5" /> | ||
| </Link> | ||
| </div> | ||
| </section> | ||
| ); | ||
| }; | ||
|
|
||
| export default GetStarted; |
Oops, something went wrong.