Fixed few bugs and added some UI's Compo...

Author: ajay-dhangar

docusaurus.config.js

@@ -109,13 +109,13 @@ const config = {
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
       image: "img/codeharborhub-social-card.jpg",
-      // announcementBar: {
-      //   id: "announcementBar",
-      //   content:
-      //     '📢 Join our <a target="_blank" href="https://www.whatsapp.com/channel/0029Vah6hro8F2pGUhuAcR0B">WhatsApp Channel</a> for the latest updates and collaboration on exciting projects!',
-      //   isCloseable: true,
-      //   backgroundColor: "#4d5061",
-      // },
+      announcementBar: {
+        id: "announcementBar",
+        content:
+          '🤖 <b>New:</b> Master the basics of AI! Explore our <a href="https://codeharborhub.github.io/tutorial/machine-learning" target="_blank">Machine Learning Tutorials</a> today! 🚀',
+        isCloseable: true,
+        backgroundColor: "#1e293b",
+      },
 
       metadata: [
         {

package-lock.json

@@ -39,6 +39,9 @@
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@giscus/react": "^3.0.0",
     "@mdx-js/react": "^3.0.0",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-aspect-ratio": "^1.1.8",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-icons": "^1.3.2",
@@ -91,7 +94,6 @@
     "@types/color": "^4.2.0",
     "@types/node": "^22.6.1",
     "autoprefixer": "^10.4.20",
-    "dotenv": "^16.4.5",
     "gh-pages": "^6.1.1",
     "lighthouse": "^12.2.2",
     "postcss": "^8.4.47",

package.json

@@ -23,6 +23,19 @@
   margin-right: 2rem;
 }
 
+/* Ensure the button container is above the particles */
+.chh__header-content__input {
+  position: relative;
+  z-index: 10; 
+}
+
+/* Ensure the particles stay in the background */
+#tsparticles {
+  position: absolute;
+  z-index: 1;
+  pointer-events: none; /* This allows clicks to pass through the particles */
+}
+
 .chh__header-content h1 {
   font-weight: 700;
   font-size: 62px;

src/components/HomePage/header.css

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDown } from 'lucide-react';
+
+import { cn } from '../../lib/utils';
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn('border-b', className)}
+    {...props}
+  />
+));
+AccordionItem.displayName = 'AccordionItem';
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn('pb-4 pt-0', className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };