new/terminal-inspired-accordion

components/section/react/terminal-accordion/README.md

@@ -0,0 +1,107 @@
+# TerminalAccordion (React)
+
+A cyberpunk-inspired, terminal-themed accordion component built with React. Features command-line aesthetics, smooth animations, and a retro hacker vibe perfect for displaying expandable content with style.
+
+---
+
+## Features
+
+- **Terminal Aesthetics** - Command-line inspired design with monospace fonts and neon accents
+- **Cyberpunk Theme** - Dark background with neon green (#00FF41) and cyan (#00D9FF) colors
+- **Smooth Animations** - Fluid expand/collapse transitions with rotating chevron indicators
+- **Fully Responsive** - Works seamlessly across desktop, tablet, and mobile devices
+- **Accessible** - Built with ARIA attributes and keyboard navigation support
+- **Lightweight** - Minimal dependencies, optimized performance
+- **Single Expansion** - Only one item can be expanded at a time for focused viewing
+- **Hover Effects** - Interactive glowing borders and background highlights  
+
+---
+
+## 📦 Usage
+
+This component is used for accordion.
+
+---
+
+
+This component relies on the following:
+
+- **React**
+- **Tailwind CSS** (for styling)
+- **react-icons/fa** (for icons)
+
+---
+
+## ⚙️ Installation
+
+Install the required icons package:
+
+```bash
+npm install react-icons
+# or
+pnpm add react-icons
+# or
+yarn add react-icons
+```
+
+---
+
+## Usage
+
+This file exports a preview wrapper `App` that renders the card for the docs site. To use the component in your app, import or copy the `SplitLoginCard` function and render it inside a page/container:
+
+```jsx
+import React from 'react';
+import SplitLoginCard from './SplitLoginCard'; // if you export SplitLoginCard from the file
+
+export default function AuthPage() {
+  return (
+    <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
+      <SplitLoginCard />
+    </div>
+  );
+}
+```
+
+---
+
+## ⚙️ Customization
+
+- **Social providers:** Edit the internal `socialProviders` array in `SplitLoginCard.jsx`.
+
+  ```jsx
+  const socialProviders = [
+    { name: 'Google', icon: FaGoogle, handler: () => handleSocialAuth('Google') },
+    { name: 'GitHub', icon: FaGithub, handler: () => handleSocialAuth('GitHub') },
+    // add more providers if needed
+  ];
+  ```
+
+- **Branding:** Update the image `src`, left title, and subtitle in the left pane.
+- **Theming:** Adjust Tailwind classes to match your design system.
+- **Auth logic:** Replace placeholder `setTimeout` calls in `handleAuthSubmit` and `handleSocialAuth` with real API calls.
+
+---
+
+## 🔍 Behavior overview
+
+- Shows 2 social provider buttons by default (`slice(0, 2)`).
+- Toggles between Login and Sign Up modes with dedicated UI text.
+- Shows “I accept Terms” checkbox on Sign Up only.
+- Shows “Forgot your password?” link on Login only.
+- Password field supports visibility toggle using `FiEye`/`FiEyeOff`.
+- Loading states use `FaSpinner` (social and submit buttons).
+
+---
+
+## ♿ Accessibility
+
+- Inputs use proper `autoComplete` attributes and hidden labels.
+- Interactive controls are buttons with focus styles and disabled states.
+- Icons are decorative; labels provide context where needed.
+
+---
+
+## 📄 License
+
+MIT

components/section/react/terminal-accordion/TerminalAccordion.jsx

@@ -0,0 +1,88 @@
+
+import { BiChevronRight } from 'react-icons/bi'
+
+const items = [
+    {
+    id: "item-1",
+    title: "System Information",
+    command: "system --info",
+    content:
+      "Terminal-inspired accordion built with React. Features smooth animations, command-line aesthetics, and a retro hacker vibe. Perfect for displaying hierarchical information in a unique way.",
+  },
+  {
+    id: "item-2",
+    title: "Configuration",
+    command: "config --list",
+    content:
+      "Customize the appearance with CSS variables. Supports dark mode, custom colors, and responsive design. All components are built with accessibility in mind.",
+  },
+  {
+    id: "item-3",
+    title: "Documentation",
+    command: "docs --open",
+    content:
+      "Each accordion item can contain any content you want. Use it for FAQs, settings, code examples, or any expandable content that needs a terminal aesthetic.",
+  },
+  {
+    id: "item-4",
+    title: "Advanced Features",
+    command: "features --advanced",
+    content:
+      "Smooth transitions, keyboard navigation, and semantic HTML. Built with performance in mind using React hooks and CSS animations.",
+  },
+]
+const TerminalAccordion = () => {
+      const [expandedId, setExpandedId] = useState(null)
+
+  const toggleItem = (id) => {
+    setExpandedId(expandedId === id ? null : id)
+  }
+  return (
+    <div className="space-y-0">
+      {items.map((item) => (
+        <div
+          key={item.id}
+          className="border border-[rgba(10,14,39,0.3)] overflow-hidden bg-[rgba(10,14,39,1)] hover:border-[rgba(0,255,65,0.5)] transition-colors lg:w-[80%]"
+        >
+          {/* Header */}
+          <button
+            onClick={() => toggleItem(item.id)}
+            className="w-full px-4 py-3 flex items-center gap-3 hover:bg-[rgba(0,255,65,0.05)] transition-colors text-left group"
+            aria-expanded={expandedId === item.id}
+            aria-controls={`content-${item.id}`}
+          >
+            <BiChevronRight
+              size={16}
+              className={`text-[rgba(0,255,65,1)] flex-shrink-0 transition-transform duration-300 ${
+                expandedId === item.id ? "rotate-90" : ""
+              }`}
+            />
+            <div className="flex-1 min-w-0">
+              <div className="font-mono text-sm text-[rgba(0,217,255,1)]">
+                <span className="text-[rgba(0,255,65,1)]">$</span> {item.command}
+              </div>
+              <div className="font-mono text-xs text-[rgba(0,255,65,0.6)] mt-1">{item.title}</div>
+            </div>
+          </button>
+
+          {/* Content */}
+          <div
+            id={`content-${item.id}`}
+            className={`overflow-hidden transition-all duration-300 ease-in-out ${
+              expandedId === item.id ? "max-h-96" : "max-h-0"
+            }`}
+          >
+            <div className="px-4 py-3 border-t border-[rgba(0,255,65,0.2)] bg-terminal-dark/30">
+              <div className="font-mono text-sm text-[rgba(0,217,255,1)] leading-relaxed">
+                <span className="text-[rgba(0,255,65,0.6)]">&gt;</span> {item.content}
+              </div>
+              <div className="mt-3 text-xs text-[rgba(0,255,65,0.4)] font-mono">Process completed successfully</div>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default TerminalAccordion

components/section/react/terminal-accordion/component.json

@@ -0,0 +1,14 @@
+{
+    "name": "Terminal-Accordion",
+    "category": "section",
+    "framework": "react",
+    "tags": [ "responsive"],
+    "author": "Akhilnair1306",
+    "license": "MIT",
+    "version": "1.0.0",
+    "preview": "A cyberpunk-inspired, terminal-themed accordion component built with React. Features command-line aesthetics, smooth animations, and a retro hacker vibe perfect for displaying expandable content with style.",
+    "demoUrl": "",
+    "props": [
+
+    ]
+  }