update UI

Author: ajay-dhangar

.yarn/install-state.gz

@@ -21,6 +21,7 @@
     "@docusaurus/plugin-content-docs": "3.0.0-beta.0",
     "@docusaurus/preset-classic": "3.0.0-beta.0",
     "@docusaurus/theme-live-codeblock": "3.0.0-beta.0",
+    "@fluentui/react-icons": "^2.0.264",
     "@heroicons/react": "^2.1.5",
     "@mdx-js/react": "^2.3.0",
     "aegis-web-sdk": "^1.38.3",
@@ -31,7 +32,9 @@
     "raw-loader": "^4.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-feather": "^2.0.10",
     "react-icons": "^5.3.0",
+    "react-markdown": "^9.0.1",
     "react-simple-code-editor": "^0.11.0",
     "rehype-katex": "6",
     "remark-math": "5",

package.json

@@ -0,0 +1,81 @@
+import React, { ReactNode, PropsWithChildren } from 'react';
+import { paramCase } from 'param-case';
+import Link from '@docusaurus/Link';
+import clsx from 'clsx';
+
+export function CardSection({
+  id,
+  title,
+  children,
+  description,
+  className,
+  hasSubSections = false,
+  HeadingTag = 'h3',
+}: {
+  id?: string;
+  title: string;
+  children: ReactNode;
+  description?: ReactNode;
+  hasSubSections?: boolean;
+  HeadingTag?: keyof JSX.IntrinsicElements;
+  className?: string;
+}) {
+  return (
+    <div
+      className={clsx(
+        'homepage-section',
+        hasSubSections && 'has-sub-sections',
+        className
+      )}
+    >
+      {title && <HeadingTag id={id ?? paramCase(title)}>{title}</HeadingTag>}
+      {description && <p className="section-description">{description}</p>}
+      <div className="section-content">{children}</div>
+    </div>
+  );
+}
+
+export function Card({
+  id,
+  icon,
+  title,
+  description,
+  to,
+  tag,
+  className,
+}: PropsWithChildren<{
+  id?: string;
+  icon?: JSX.Element;
+  title: string;
+  description?: string;
+  to: string;
+  tag?: {
+    label: string;
+    color: string;
+    description: string;
+  };
+  className?: string;
+}>) {
+  return (
+    <Link to={to} className={clsx("homepage-card",className)}>
+      {icon && <div className="icon">{icon}</div>}
+      <div className="card-content">
+        <div className="title" id={id && paramCase(title)}>
+          {title}
+        </div>
+        {description && <div className="description">{description}</div>}
+      </div>
+      {tag && (
+        <div className="tag absolute right-0 top-0 h-16 w-16">
+          <span
+            className="absolute right-[-28px] top-[-2px] w-[80px] rotate-45 transform bg-gray-600 py-1 text-center font-semibold text-white"
+            style={{ backgroundColor: tag.color }}
+            title={tag.description}
+          >
+            {tag.label}
+          </span>
+        </div>
+      )}
+    </Link>
+  );
+}

src/components/CardComponents.tsx

@@ -1,76 +1,52 @@
-import React from 'react';
-import Link from '@docusaurus/Link';
-import { FaComments, FaUsers, FaChalkboardTeacher, FaHeadset } from 'react-icons/fa'; // React Icons
+import React from "react";
+import Link from "@docusaurus/Link";
 
-interface Feature {
-  title: string;
-  description: string;
-  icon: React.FC<React.SVGProps<SVGSVGElement>>; // This type remains the same
-  link: string;
-}
+import { GitHub, Linkedin } from "react-feather";
 
-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 githubUsernames = [
+  "CodeWith-PeterBull",
+  "Rukundo-Bahati",
+  "AkshitLakhera",
+  "mcpdigital",
 ];
 
-const Community: React.FC = () => {
+export default function Community() {
   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
+    <section className="no-underline-links">
+      <div className="mx-auto flex w-full flex-col items-center justify-center bg-gradient-to-b from-[#262626] to-black px-4 py-16 pt-64 text-white dark:from-zinc-200/90 dark:to-white dark:text-zinc-700">
+        <h2 className="text-3xl">
+          Join the <span className="text-primary-100">community</span>
         </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 className="mb-10">
+          Join thousands of learners in mastering JavaScript from basics to
+          advanced topics. Start your journey to becoming a JavaScript pro today
         </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 className="mx-auto mb-16 flex flex-wrap -space-x-1.5">
+          {githubUsernames.map((username) => (
+            <img
+              key={username}
+              src={`https://github.com/${username}.png?size=60`}
+              alt={`User ${username}`}
+              loading="lazy"
+              className="h-6 w-6 rounded-full border-2 border-solid border-white transition hover:-translate-y-2 hover:scale-150 lg:h-12 lg:w-12"
+            />
           ))}
         </div>
+        <div className="flex w-full flex-col items-center justify-center gap-2 text-sm font-semibold lg:flex-row lg:gap-8">
+          <Link
+            className="flex w-full items-center justify-center gap-2 rounded-sm border border-solid border-primary-100 bg-primary-100/10 px-2 py-2 text-primary-100 lg:w-auto"
+            href="https://www.linkedin.com/in/ajay-dhangar/"
+          >
+            <Linkedin className="h-5 w-5" /> LinkedIn &rarr;
+          </Link>
+          <Link
+            className="flex w-full items-center justify-center gap-2 rounded-sm border border-solid border-primary-100 bg-primary-100/10 px-2 py-2 text-primary-100 lg:w-auto"
+            href="https://github.com/javascript-mastery"
+          >
+            <GitHub className="h-5 w-5" /> GitHub &rarr;
+          </Link>
+        </div>
       </div>
     </section>
   );
-};
-
-export default Community;
+}

src/components/Home/Community.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+import clsx from 'clsx';
+
+export default function HelpSection({ className = '' }) {
+  return (
+    <section className="px-4 pt-16">
+      <div
+        className={clsx(
+          'mx-auto max-w-7xl rounded-3xl bg-white p-4 py-10 text-black dark:bg-black dark:text-white lg:p-24 lg:py-20',
+          className
+        )}
+      >
+        <h2 className="mb-12 text-center lg:text-3xl">
+          How can we help you today?
+        </h2>
+        <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
+          <div className="rounded-lg bg-zinc-100 p-6 dark:bg-zinc-900">
+            <img
+              src="/landing/calendar.svg"
+              alt="Book a demo"
+              width="48"
+              height="48"
+            />
+            <h3 className="my-3">Book a Demo</h3>
+            <p className="text-zinc-600 dark:text-zinc-400">
+              Contact us for a demo. We are looking forward to connecting with
+              you.
+            </p>
+            <Link
+              href="#"
+              className="text-primary dark:text-primary-100"
+            >
+              Schedule a Call &rarr;
+            </Link>
+          </div>
+
+          <div className="rounded-lg bg-zinc-100 p-6 dark:bg-zinc-900">
+            <img
+              src="/landing/customer.svg"
+              alt="Support"
+              width="48"
+              height="48"
+            />
+            <h3 className="my-3">Support</h3>
+            <p className="text-zinc-600 dark:text-zinc-400">
+              Dyte&apos;s expert support team is always available to help. Connect for
+              dedicated 1:1 support!
+            </p>
+            <Link
+              href="#"
+              className="text-primary dark:text-primary-100"
+            >
+              Contact Us &rarr;
+            </Link>
+          </div>
+
+          <div className="rounded-lg bg-zinc-100 p-6 dark:bg-zinc-900">
+            <img
+              src="/landing/chat.svg"
+              alt="FAQs"
+              width="48"
+              height="48"
+            />
+            <h3 className="my-3">FAQs</h3>
+            <p className="text-zinc-600 dark:text-zinc-400">
+              Browse through our FAQs to find answers to commonly asked
+              questions.
+            </p>
+            <Link href="/faq" className="text-primary dark:text-primary-100">
+              View FAQs &rarr;
+            </Link>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/Home/Courses.tsx

@@ -3,12 +3,12 @@ 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">
+    <section className="noise-bg grid grid-cols-1 lg:grid-cols-2 min-h-screen gap-8 items-center px-6">
       <div className="text-center lg:text-left">
-        <h1 className="text-4xl lg:text-5xl font-bold leading-tight mb-4">
+        <h1 className="text-4xl lg:text-5xl font-bold leading-tight mb-6">
           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">
+        <p className="text-lg lg:text-xl opacity-90 mb-8">
           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/">