Development

app/components/ComponentDetailClient.tsx

@@ -41,18 +41,6 @@ export default function ComponentDetailClient({
               <div dangerouslySetInnerHTML={{ __html: variant.code }} />
             </ComponentPreview>
 
-            <div className="flex items-center -mt-2">
-              <p className="text-sm font-medium text-gray-400 dark:text-gray-500">
-                contributed by&nbsp;
-                <a
-                  href={`https://github.com/${variant.contributor ?? ""}`}
-                  target="_blank"
-                  className="text-gray-500 dark:text-gray-400 hover:text-primary hover:underline font-semibold transition-colors"
-                >
-                  {variant.contributor ?? "unknown"}
-                </a>
-              </p>
-            </div>
           </div>
         ))}
       </div>

app/layout.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import { Poppins } from "next/font/google";
-import { GoogleAnalytics } from "@next/third-parties/google";
+
 import "./globals.css";
 import { ThemeProvider } from "./components/ThemeProvider";
 import Header from "./components/Header";
@@ -73,7 +73,7 @@ export default function RootLayout({
           </div>
         </ThemeProvider>
       </body>
-      <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_ID || ""} />
+
     </html>
   );
 }

lib/data/components/application/accordions.tsx

@@ -0,0 +1,144 @@
+import { IconLayoutList } from '@tabler/icons-react';
+import { ComponentType } from '../types';
+
+export const accordions: ComponentType = {
+    slug: 'accordions',
+    name: 'Accordions',
+    icon: <IconLayoutList stroke={1.5} />,
+    description: 'Vertically stacked sections that expand to show content.',
+    variants: [
+        {
+            id: 'simple-accordion',
+            name: 'Simple Accordion',
+            code: `<div class="w-full max-w-lg mx-auto space-y-4">
+  <!-- Item 1 -->
+  <details class="group border-b border-neutral-200 dark:border-neutral-800 pb-1">
+    <summary class="flex cursor-pointer list-none items-center justify-between py-4 text-lg font-medium text-neutral-900 dark:text-neutral-100 group-open:text-lime-600 dark:group-open:text-lime-400 transition-colors">
+      Simple Accordion
+      <span class="transition-transform duration-300 group-open:rotate-180">
+        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+        </svg>
+      </span>
+    </summary>
+    <div class="pb-4 pt-2 text-neutral-600 dark:text-neutral-400 text-sm leading-relaxed">
+      The accordion uses the native HTML details and summary elements. It works without any JavaScript, making it lightweight and accessible by default.
+    </div>
+  </details>
+
+  <!-- Item 2 -->
+  <details class="group border-b border-neutral-200 dark:border-neutral-800 pb-1">
+    <summary class="flex cursor-pointer list-none items-center justify-between py-4 text-lg font-medium text-neutral-900 dark:text-neutral-100 group-open:text-lime-600 dark:group-open:text-lime-400 transition-colors">
+      Bordered Accordion
+      <span class="transition-transform duration-300 group-open:rotate-180">
+        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+        </svg>
+      </span>
+    </summary>
+    <div class="pb-4 pt-2 text-neutral-600 dark:text-neutral-400 text-sm leading-relaxed">
+      Absolutely! Since it uses standard Tailwind utilities, you can change colors, spacing, typography, and animations to match your brand's design system completely.
+    </div>
+  </details>
+
+  <!-- Item 3 -->
+  <details class="group border-b border-neutral-200 dark:border-neutral-800 pb-1">
+    <summary class="flex cursor-pointer list-none items-center justify-between py-4 text-lg font-medium text-neutral-900 dark:text-neutral-100 group-open:text-lime-600 dark:group-open:text-lime-400 transition-colors">
+      Split Accordion
+      <span class="transition-transform duration-300 group-open:rotate-180">
+        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+        </svg>
+      </span>
+    </summary>
+    <div class="pb-4 pt-2 text-neutral-600 dark:text-neutral-400 text-sm leading-relaxed">
+      Yes, the details and summary elements are semantically correct and accessible to screen readers out of the box. Keyboard navigation is also supported natively.
+    </div>
+  </details>
+</div>`,
+        },
+        {
+            id: 'bordered-accordion',
+            name: 'Bordered Accordion',
+            code: `<div class="w-full max-w-lg mx-auto overflow-hidden rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 divide-y divide-neutral-200 dark:divide-neutral-800">
+
+  <details class="group bg-white dark:bg-neutral-900 p-0">
+    <summary class="flex cursor-pointer list-none items-center justify-between p-4 font-medium text-neutral-900 dark:text-neutral-100 group-open:bg-neutral-50 dark:group-open:bg-neutral-800 transition-colors hover:bg-neutral-50 dark:hover:bg-neutral-800">
+      <span>Connected Account</span>
+      <span class="ml-2 transition-transform duration-300 group-open:rotate-180">
+        <svg class="h-5 w-5 text-neutral-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+        </svg>
+      </span>
+    </summary>
+    <div class="border-t border-neutral-200 dark:border-neutral-700 p-4 text-sm text-neutral-600 dark:text-neutral-400">
+      Manage your connected bank accounts and credit cards here. You can add or remove accounts at any time.
+    </div>
+  </details>
+
+  <details class="group bg-white dark:bg-neutral-900 p-0">
+    <summary class="flex cursor-pointer list-none items-center justify-between p-4 font-medium text-neutral-900 dark:text-neutral-100 group-open:bg-neutral-50 dark:group-open:bg-neutral-800 transition-colors hover:bg-neutral-50 dark:hover:bg-neutral-800">
+      <span>Privacy Settings</span>
+      <span class="ml-2 transition-transform duration-300 group-open:rotate-180">
+        <svg class="h-5 w-5 text-neutral-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+        </svg>
+      </span>
+    </summary>
+    <div class="border-t border-neutral-200 dark:border-neutral-700 p-4 text-sm text-neutral-600 dark:text-neutral-400">
+      Control who can see your profile and activity. We value your privacy and give you full control over your data sharing preferences.
+    </div>
+  </details>
+
+  <details class="group bg-white dark:bg-neutral-900 p-0">
+    <summary class="flex cursor-pointer list-none items-center justify-between p-4 font-medium text-neutral-900 dark:text-neutral-100 group-open:bg-neutral-50 dark:group-open:bg-neutral-800 transition-colors hover:bg-neutral-50 dark:hover:bg-neutral-800">
+      <span>Notifications</span>
+      <span class="ml-2 transition-transform duration-300 group-open:rotate-180">
+        <svg class="h-5 w-5 text-neutral-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+        </svg>
+      </span>
+    </summary>
+    <div class="border-t border-neutral-200 dark:border-neutral-700 p-4 text-sm text-neutral-600 dark:text-neutral-400">
+      Choose which notifications you want to receive. You can get updates via email, push notifications, or SMS.
+    </div>
+  </details>
+</div>`,
+        },
+        {
+            id: 'split-accordion',
+            name: 'Split Accordion',
+            code: `<div class="w-full max-w-lg mx-auto space-y-3">
+
+  <details class="group rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 overflow-hidden shadow-sm hover:shadow-md transition-shadow">
+    <summary class="flex cursor-pointer list-none items-center justify-between p-4 font-medium text-neutral-900 dark:text-neutral-100 bg-neutral-50/50 dark:bg-neutral-800/50 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors">
+      <span>Personal Info</span>
+      <div class="flex h-8 w-8 items-center justify-center rounded-full bg-white dark:bg-neutral-700 group-open:bg-lime-500 group-open:text-white transition-colors duration-200 shadow-sm border border-neutral-100 dark:border-neutral-600">
+        <svg class="h-4 w-4 transition-transform duration-300 group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+        </svg>
+      </div>
+    </summary>
+    <div class="p-4 text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed border-t border-neutral-100 dark:border-neutral-800">
+      Update your photo and personal details here. Your public profile will show this information.
+    </div>
+  </details>
+
+  <details class="group rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 overflow-hidden shadow-sm hover:shadow-md transition-shadow">
+    <summary class="flex cursor-pointer list-none items-center justify-between p-4 font-medium text-neutral-900 dark:text-neutral-100 bg-neutral-50/50 dark:bg-neutral-800/50 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors">
+      <span>Billing Address</span>
+      <div class="flex h-8 w-8 items-center justify-center rounded-full bg-white dark:bg-neutral-700 group-open:bg-lime-500 group-open:text-white transition-colors duration-200 shadow-sm border border-neutral-100 dark:border-neutral-600">
+        <svg class="h-4 w-4 transition-transform duration-300 group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+        </svg>
+      </div>
+    </summary>
+    <div class="p-4 text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed border-t border-neutral-100 dark:border-neutral-800">
+      Edit your billing address and shipping preferences. This will be used for your next invoice or delivery.
+    </div>
+  </details>
+
+</div>`,
+        }
+    ]
+};

lib/data/components/application/index.ts

@@ -8,6 +8,9 @@ import { avatars } from './avatars';
 import { progress } from './progress';
 import { skeleton } from './skeleton';
 import { loaders } from './loaders';
+import { modals } from './modals';
+import { accordions } from './accordions';
+import { tables } from './tables';
 import { breadcrumbs } from './breadcrumbs';
 import { sidebars } from './sidebars';
 import { navbars } from './navbars';
@@ -25,4 +28,8 @@ export const applicationComponents: ComponentType[] = [
   alerts,
   progress,
   skeleton,
+  loaders,
+  modals,
+  accordions,
+  tables,
 ];

lib/data/components/application/modals.tsx

@@ -0,0 +1,132 @@
+import { IconAppWindow } from '@tabler/icons-react';
+import { ComponentType } from '../types';
+
+export const modals: ComponentType = {
+  slug: 'modals',
+  name: 'Modals',
+  icon: <IconAppWindow stroke={1.5} />,
+  description: 'Modal dialogs for capturing user attention or displaying information.',
+  variants: [
+    {
+      id: 'simple-modal',
+      name: 'Simple Modal',
+      code: `<div>
+  <input type="checkbox" id="modal-toggle" class="peer hidden" />
+
+  <label for="modal-toggle" class="inline-flex items-center justify-center rounded-lg bg-lime-600 px-5 py-2.5 text-sm font-medium text-white transition-colors hover:bg-lime-700 focus:outline-none focus:ring-4 focus:ring-lime-300 dark:focus:ring-lime-900 cursor-pointer">
+    Open Modal
+  </label>
+
+  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm opacity-0 invisible peer-checked:opacity-100 peer-checked:visible peer-checked:[&>div]:scale-100 peer-checked:[&>div]:opacity-100 transition-all duration-300">
+    <div class="relative w-full max-w-md transform rounded-2xl bg-white dark:bg-neutral-900 p-6 shadow-xl transition-all scale-95 opacity-0 duration-300 delay-75">
+      <label for="modal-toggle" class="absolute right-4 top-4 cursor-pointer text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+      </label>
+
+      <div class="text-center">
+        <div class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-lime-100 dark:bg-lime-900/30">
+          <svg class="h-6 w-6 text-lime-600 dark:text-lime-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+          </svg>
+        </div>
+
+        <h3 class="text-lg font-bold text-neutral-900 dark:text-neutral-100">
+          Payment Successful
+        </h3>
+
+        <p class="mt-2 text-sm text-neutral-500 dark:text-neutral-400">
+          Lorem ipsum dolor sit amet. 19 juta lapangan kerja.
+        </p>
+
+        <div class="mt-6 flex justify-center gap-3">
+          <label for="modal-toggle" class="cursor-pointer rounded-lg border border-neutral-200 bg-white px-5 py-2.5 text-sm font-medium text-neutral-900 hover:bg-neutral-50 hover:text-lime-700 focus:z-10 focus:ring-4 focus:ring-neutral-200 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-white dark:focus:ring-neutral-700">
+            Cancel
+          </label>
+          <label for="modal-toggle" class="cursor-pointer rounded-lg bg-lime-600 px-5 py-2.5 text-sm font-medium text-white hover:bg-lime-700 focus:ring-4 focus:ring-lime-300 dark:focus:ring-lime-900">
+            Continue
+          </label>
+        </div>
+      </div>
+    </div>
+
+    <label for="modal-toggle" class="absolute inset-0 -z-10 cursor-default"></label>
+  </div>
+</div>`
+    },
+    {
+      id: 'terms-modal',
+      name: 'Large Scrollable Modal',
+      code: `<div>
+  <input type="checkbox" id="terms-modal-toggle" class="peer hidden" />
+
+  <label for="terms-modal-toggle" class="inline-flex items-center justify-center rounded-lg bg-neutral-900 px-5 py-2.5 text-sm font-medium text-white transition-colors hover:bg-neutral-800 dark:bg-white dark:text-neutral-900 dark:hover:bg-neutral-100 cursor-pointer">
+    Terms of Service
+  </label>
+
+  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm opacity-0 invisible peer-checked:opacity-100 peer-checked:visible peer-checked:[&>div]:scale-100 peer-checked:[&>div]:opacity-100 transition-all duration-300 p-4">
+    <div class="relative w-full max-w-2xl transform rounded-2xl bg-white dark:bg-neutral-900 shadow-2xl transition-all scale-95 opacity-0 duration-300 flex flex-col max-h-[90vh]">
+      <div class="flex items-center justify-between border-b border-neutral-200 dark:border-neutral-800 p-6">
+        <h3 class="text-xl font-bold text-neutral-900 dark:text-neutral-100">
+          Terms of Service
+        </h3>
+        <label for="terms-modal-toggle" class="cursor-pointer rounded-full p-1 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors">
+          <svg class="h-6 w-6 text-neutral-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </label>
+      </div>
+
+      <div class="overflow-y-auto p-6 space-y-4 text-sm text-neutral-700 dark:text-neutral-300 leading-relaxed">
+        <strong>Program 19 Juta Lapangan Kerja</strong><br /><br />
+        Welcome to the “19 Million Job Opportunities” Program. Please read these terms carefully before having hope.<br /><br />
+
+        <strong>1. Acceptance of Terms</strong><br />
+        By hearing, reading, or sharing the phrase “19 juta lapangan kerja”, you automatically agree to these Terms.
+        If you disagree, you remain unemployed — but with awareness.<br /><br />
+
+        <strong>2. Eligibility</strong><br />
+        • Fresh graduate with a minimum of 5 years experience<br />
+        • Maximum age: 23 years old (flexible, depending on HR mood)<br />
+        • Able to work under pressure, multitasking, and low salary<br />
+        • Own a laptop, a motorcycle, a strong mindset, and mental resilience<br /><br />
+        Meeting all requirements does not guarantee employment.<br /><br />
+
+        <strong>3. Use License</strong><br />
+        Permission is granted to temporarily believe in the availability of jobs for personal motivation only.
+        Commercial use, expectations, and long-term planning are strictly discouraged.<br /><br />
+
+        <strong>4. Disclaimer</strong><br />
+        All job opportunities are provided on an “as is” basis.
+        We make no guarantees regarding job placement, salary, career growth, or mental health.
+        Any resemblance to actual vacancies is purely coincidental.<br /><br />
+
+        <strong>5. Limitation of Responsibility</strong><br />
+        We are not responsible if positions are suddenly “filled internally”, vacancies disappear after CV submission,
+        you are ghosted after interview, or the job exists only in reports.<br /><br />
+
+        <strong>6. Changes to Terms</strong><br />
+        These Terms may change at any time without notice, usually after a press conference.<br /><br />
+
+        <strong>7. Governing Law</strong><br />
+        These Terms are governed by statistics, PowerPoint presentations, and national optimism.
+      </div>
+
+      <div class="border-t border-neutral-200 dark:border-neutral-800 p-6 flex justify-end gap-3">
+        <label for="terms-modal-toggle" class="cursor-pointer rounded-lg px-5 py-2.5 text-sm font-medium text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100">
+          Decline
+        </label>
+        <label for="terms-modal-toggle" class="cursor-pointer rounded-lg bg-lime-600 px-5 py-2.5 text-sm font-medium text-white hover:bg-lime-700 transition-colors">
+          I Accept
+        </label>
+      </div>
+    </div>
+
+    <label for="terms-modal-toggle" class="absolute inset-0 -z-10 cursor-default"></label>
+  </div>
+</div>`
+    }
+  ]
+};
+