tailwind css added

docusaurus.config.js

@@ -1,6 +1,7 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 const path = require("path");
+const tailwindPlugin = require("./src/plugins/tailwind-config.cjs");
 // const lightCodeTheme = require("prism-react-renderer/themes/github");
 const darkCodeTheme = require("prism-react-renderer/themes/vsDark");
 module.exports = async function createConfigAsync() {
@@ -11,7 +12,8 @@ module.exports = async function createConfigAsync() {
     baseUrl: "/",
     onBrokenLinks: "throw",
     onBrokenMarkdownLinks: "warn",
-    favicon: "img/favicon.ico",
+    // favicon: "img/favicon.ico",
+    favicon: "img/js.svg",
     organizationName: "javascript-mastery",
     projectName: "JavaScript Mastery",
 
@@ -31,6 +33,7 @@ module.exports = async function createConfigAsync() {
         };
       },
       "docusaurus-plugin-sass",
+      tailwindPlugin,
     ],
     presets: [
       [
@@ -70,11 +73,11 @@ module.exports = async function createConfigAsync() {
             hideable: true,
           },
         },
-        algolia: {
-          appId: "NIXA4HHO8S",
-          apiKey: "0e434f5d05dd96ad91008f11f2903066",
-          indexName: "our-index",
-        },
+        // algolia: {
+        //   appId: "NIXA4HHO8S",
+        //   apiKey: "0e434f5d05dd96ad91008f11f2903066",
+        //   indexName: "our-index",
+        // },
         navbar: {
           title: "JavaScript Mastery",
           hideOnScroll: true,

package.json

@@ -50,7 +50,10 @@
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.0.0-beta.0",
     "@docusaurus/tsconfig": "3.0.0-beta.0",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.47",
     "prettier": "^2.5.1",
+    "tailwindcss": "^3.4.14",
     "typescript": "~5.2.2"
   }
 }

src/components/Home/About.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+const About: React.FC = () => {
+  return (
+    <section className="py-16 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200">
+      <div className="container mx-auto px-4">
+        <h2 className="text-3xl lg:text-4xl font-bold text-center mb-8">
+          About JavaScript Mastery
+        </h2>
+        <p className="text-lg lg:text-xl text-center mb-6">
+          At JavaScript Mastery, we believe in empowering learners to become proficient in JavaScript through engaging and interactive learning experiences.
+        </p>
+        <div className="flex flex-col lg:flex-row justify-center items-start">
+          <div className="max-w-sm lg:max-w-md mx-auto mb-6 lg:mb-0 lg:mr-6 p-6 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
+            <h3 className="text-xl font-semibold mb-3">Interactive Learning</h3>
+            <p>
+              Dive into hands-on projects that help solidify your understanding of JavaScript concepts and techniques.
+            </p>
+          </div>
+          <div className="max-w-sm lg:max-w-md mx-auto mb-6 lg:mb-0 lg:mr-6 p-6 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
+            <h3 className="text-xl font-semibold mb-3">Community Support</h3>
+            <p>
+              Join a vibrant community of learners and experienced developers who are eager to share knowledge and support each other.
+            </p>
+          </div>
+          <div className="max-w-sm lg:max-w-md mx-auto mb-6 lg:mb-0 lg:mr-6 p-6 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
+            <h3 className="text-xl font-semibold mb-3">Flexible Learning Path</h3>
+            <p>
+              Choose your own learning journey, whether you're starting from scratch or looking to deepen your existing skills.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default About;

src/components/Home/Hero.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+
+const Hero: React.FC = () => {
+  return (
+    <section className="grid grid-cols-1 lg:grid-cols-2 min-h-screen gap-8 items-center bg-gradient-to-br from-[#1f1c2e] to-[#4285f4] text-white px-2 py-10 dark:from-gray-900 dark:to-gray-800 px-4">
+      <div className="text-center lg:text-left">
+        <h1 className="text-4xl lg:text-5xl font-bold leading-tight mb-4">
+          Master JavaScript with <span className="text-yellow-300 dark:text-yellow-400">Confidence</span>
+        </h1>
+        <p className="text-lg lg:text-xl opacity-90 mb-6">
+          Join thousands of learners in mastering JavaScript from basics to advanced topics. Start your journey to becoming a JavaScript pro today!
+        </p>
+        <Link to="/docs/">
+          <button className="px-8 py-3 bg-yellow-300 dark:bg-yellow-500 text-blue-700 dark:text-white font-semibold rounded-lg shadow-lg hover:bg-yellow-400 dark:hover:bg-yellow-600 transition duration-300 ease-in-out transform hover:-translate-y-1 border-none">
+            Get Started
+          </button>
+        </Link>
+      </div>
+
+      <div className="mt-8 lg:mt-0 mx-auto">
+        <img src="/img/js.svg" alt="JavaScript Learning" className="w-64 lg:w-80" />
+      </div>
+    </section>
+  );
+};
+
+export default Hero;

src/components/Home/WhyLearnJavaScript.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+
+const WhyLearnJavaScript: React.FC = () => {
+  return (
+    <section className="py-16 bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200">
+      <div className="container mx-auto px-4">
+        <h2 className="text-3xl lg:text-4xl font-bold text-center mb-8">
+          Why Learn JavaScript?
+        </h2>
+        <p className="text-lg lg:text-xl text-center mb-12">
+          JavaScript is one of the most popular and versatile programming languages today. Here’s why you should start learning JavaScript:
+        </p>
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 md:grid-cols-2 gap-6">
+          {/* Feature 1 */}
+          <div className="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-2xl transition-shadow duration-300">
+            <h3 className="text-xl font-semibold mb-3">High Demand in the Job Market</h3>
+            <p>
+              JavaScript skills are highly valued, opening doors to careers in web development, mobile app development, and even backend programming.
+            </p>
+          </div>
+
+          {/* Feature 2 */}
+          <div className="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-2xl transition-shadow duration-300">
+            <h3 className="text-xl font-semibold mb-3">Versatility Across Platforms</h3>
+            <p>
+              JavaScript powers both frontend and backend development, enabling you to create dynamic websites, server applications, and mobile apps.
+            </p>
+          </div>
+
+          {/* Feature 3 */}
+          <div className="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-2xl transition-shadow duration-300">
+            <h3 className="text-xl font-semibold mb-3">Thriving Community and Resources</h3>
+            <p>
+              JavaScript has a vast community and extensive resources, providing endless support for both beginners and experienced developers.
+            </p>
+          </div>
+
+          {/* Feature 4 */}
+          <div className="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-2xl transition-shadow duration-300">
+            <h3 className="text-xl font-semibold mb-3">Constantly Evolving Language</h3>
+            <p>
+              JavaScript continues to grow and adapt with new frameworks and tools, keeping it relevant and exciting in the tech industry.
+            </p>
+          </div>
+
+          {/* Feature 5 */}
+          <div className="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-2xl transition-shadow duration-300">
+            <h3 className="text-xl font-semibold mb-3">Foundation for Frontend Frameworks</h3>
+            <p>
+              Mastering JavaScript provides a strong foundation for popular frameworks like React, Vue, and Angular, used widely in modern web development.
+            </p>
+          </div>
+
+          {/* Feature 6 */}
+          <div className="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-2xl transition-shadow duration-300">
+            <h3 className="text-xl font-semibold mb-3">Enhanced Problem-Solving Skills</h3>
+            <p>
+              Learning JavaScript enhances your problem-solving abilities as you build interactive applications and tackle real-world challenges.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default WhyLearnJavaScript;

src/css/custom.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 :root {
   --ifm-color-primary: #2dbb9d;
   --ifm-color-primary-dark: rgb(33, 175, 144);
@@ -9,16 +13,6 @@
   --ifm-code-font-size: 95%;
 }
 
-/* :root {
-  --ifm-color-primary: #2eb9f5;
-  --ifm-color-primary-dark: #12b0f4;
-  --ifm-color-primary-darker: #0ba8ec;
-  --ifm-color-primary-darkest: #098bc2;
-  --ifm-color-primary-light: #4ac2f6;
-  --ifm-color-primary-lighter: #58c7f7;
-  --ifm-color-primary-lightest: #81d5f9;
-} */
-
 [data-theme="dark"] {
   --ifm-color-primary: #70d4ff;
   --ifm-color-primary-dark: #4bc9ff;

src/pages/index.js

@@ -3,40 +3,19 @@ import clsx from "clsx";
 import Layout from "@theme/Layout";
 import Link from "@docusaurus/Link";
 import styles from "./index.module.css";
-import HomepageFeatures from "../components/HomepageFeatures";
-//
-function HomepageHeader() {
-  return (
-    <header className={clsx("hero hero--primary", styles.heroBanner)}>
-      <div className="container">
-        <h1 className="hero__title">Xiaohai's Mind Palace</h1>
-        <p className="hero__subtitle">
-          A place for organizing <b>notes</b>, writing <b>blogs</b>, and
-          showcasing <b>projects</b>.
-        </p>
-        <div className={styles.buttons}>
-          <Link className="button button--secondary button--lg" to="/docs">
-            📘 View Notes
-          </Link>
-          <Link className="button button--secondary button--lg" to="/about">
-            👨‍🏭 View Resume
-          </Link>
-        </div>
-      </div>
-    </header>
-  );
-}
+import Hero from "@src/components/Home/Hero";
+import About from "@src/components/Home/About";
+import WhyLearnJavaScript from "@src/components/Home/WhyLearnJavaScript";
 
 export default function Home() {
   return (
     <Layout
       title="Home"
       description="Xiaohai's Mind Palace. A place for organizing notes across multiple domains. A place for writing blogs. A place for showcasing projects."
     >
-      <HomepageHeader />
-      <main>
-        <HomepageFeatures />
-      </main>
+      <Hero />
+      <About />
+      <WhyLearnJavaScript />
     </Layout>
   );
 }

src/plugins/tailwind-config.cjs

@@ -0,0 +1,15 @@
+function tailwindPlugin(context, options) {
+    return {
+      name: 'tailwind-plugin',
+      configurePostCss(postcssOptions) {
+        postcssOptions.plugins = [
+          require('postcss-import'),
+          require('tailwindcss'),
+          require('autoprefixer'),
+        ];
+        return postcssOptions;
+      },
+    };
+  }
+
+  module.exports = tailwindPlugin;

tailwind.config.js

@@ -0,0 +1,28 @@
+const { fontFamily } = require("tailwindcss/defaultTheme");
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  corePlugins: {
+    preflight: false,
+    container: false,
+  },
+  darkMode: ["class", '[data-theme="dark"]'],
+  content: ["./src/**/*.{jsx,tsx,html}"],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['"Inter"', ...fontFamily.sans],
+        jakarta: ['"Plus Jakarta Sans"', ...fontFamily.sans],
+        mono: ['"Fira Code"', ...fontFamily.mono],
+      },
+      borderRadius: {
+        sm: "4px",
+      },
+      screens: {
+        sm: "0px",
+        lg: "997px",
+      },
+      colors: {},
+    },
+  },
+  plugins: [],
+};