@kalikayi/shared 0.1.0

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@kalikayi/shared",
+  "version": "0.1.0",
+  "description": "Shared components, hooks, and utilities for the Kalikayi ecosystem",
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./styles/theme-base.css": "./src/styles/theme-base.css"
+  },
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "lucide-react": ">=0.400.0",
+    "next": "^14.0.0 || ^15.0.0 || ^16.0.0",
+    "next-themes": ">=0.3.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "clsx": "^2.1.0",
+    "tailwind-merge": "^3.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^25.3.5",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "typescript": "^5.7.0"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sunilkalikayi/kalikayi-hub"
+  },
+  "keywords": [
+    "kalikayi",
+    "shared",
+    "components",
+    "next.js"
+  ]
+}

package/src/components/ads/ad-banner.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { cn } from "../../lib/utils";
+
+const slotHeights: Record<string, string> = {
+  "top-leaderboard": "min-h-[90px]",
+  "in-content": "min-h-[250px]",
+  "bottom-rectangle": "min-h-[280px]",
+  sidebar: "min-h-[250px]",
+};
+
+interface AdBannerProps {
+  slot?: string;
+  format?: "auto" | "rectangle" | "horizontal" | "vertical";
+  className?: string;
+}
+
+export function AdBanner({ slot, format = "auto", className }: AdBannerProps) {
+  const adRef = useRef<HTMLDivElement>(null);
+  const adsenseId = typeof window !== "undefined"
+    ? process.env.NEXT_PUBLIC_ADSENSE_ID
+    : undefined;
+  const height = slot ? (slotHeights[slot] ?? "min-h-[90px]") : "min-h-[90px]";
+
+  useEffect(() => {
+    if (!adsenseId || !slot) return;
+    try {
+      const w = window as Window & { adsbygoogle?: unknown[] };
+      (w.adsbygoogle = w.adsbygoogle ?? []).push({});
+    } catch {
+      // AdSense not loaded
+    }
+  }, [adsenseId, slot]);
+
+  // Dev placeholder or no slot/adsenseId
+  if (!adsenseId || !slot) {
+    return (
+      <div
+        className={cn(
+          "flex items-center justify-center rounded-lg border border-dashed border-border/50 bg-muted/30 text-xs text-muted-foreground/40",
+          height,
+          className
+        )}
+        aria-hidden="true"
+      >
+        Ad: {slot || "placeholder"}
+      </div>
+    );
+  }
+
+  // Production AdSense
+  return (
+    <div ref={adRef} className={cn("ad-container overflow-hidden", height, className)} aria-hidden="true">
+      <ins
+        className="adsbygoogle"
+        style={{ display: "block" }}
+        data-ad-client={adsenseId}
+        data-ad-slot={slot}
+        data-ad-format={format}
+        data-full-width-responsive="true"
+      />
+    </div>
+  );
+}

package/src/components/ads/tool-promo-banner.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { ExternalLink } from "lucide-react";
+import { getLiveTools } from "../../lib/kalikayi-tools";
+import { cn } from "../../lib/utils";
+
+interface ToolPromoBannerProps {
+  variant: "horizontal" | "card-grid";
+  excludeTool?: string;
+  className?: string;
+}
+
+export function ToolPromoBanner({ variant, excludeTool, className }: ToolPromoBannerProps) {
+  const tools = getLiveTools().filter((t) => t.name !== excludeTool);
+
+  if (tools.length === 0) return null;
+
+  if (variant === "horizontal") {
+    return (
+      <div
+        className={cn(
+          "rounded-xl border border-primary/20 bg-primary/5 p-4",
+          className
+        )}
+      >
+        <p className="mb-3 text-xs font-semibold uppercase tracking-wider text-primary">
+          More Free Tools by Kalikayi
+        </p>
+        <div className="flex flex-wrap gap-3">
+          {tools.map((tool) => (
+            <a
+              key={tool.name}
+              href={tool.href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-1.5 rounded-lg border border-border/50 bg-background/60 px-3 py-2 text-sm font-medium text-foreground hover:border-primary/30 hover:bg-primary/5"
+            >
+              {tool.name}
+              <ExternalLink className="h-3 w-3 text-muted-foreground" />
+            </a>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={className}>
+      <p className="mb-4 text-xs font-semibold uppercase tracking-wider text-primary">
+        Explore More Free Tools
+      </p>
+      <div className="grid gap-3 sm:grid-cols-2">
+        {tools.map((tool) => (
+          <a
+            key={tool.name}
+            href={tool.href}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="rounded-lg border border-border/50 p-4 hover:border-primary/30 hover:shadow-md"
+          >
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="font-semibold text-foreground">{tool.name}</p>
+                <p className="text-sm text-muted-foreground">{tool.tagline}</p>
+              </div>
+              <ExternalLink className="h-4 w-4 text-muted-foreground" />
+            </div>
+          </a>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/layout/footer.tsx

@@ -0,0 +1,119 @@
+import { Github, Linkedin, Globe } from "lucide-react";
+
+const QUICK_LINKS = [
+  { href: "https://kalikayi.com/tools", label: "Tools" },
+  { href: "https://kalikayi.com/blog", label: "Blog" },
+  { href: "https://kalikayi.com/about", label: "About" },
+  { href: "https://kalikayi.com/contact", label: "Contact" },
+  { href: "https://kalikayi.com/creator", label: "Creator" },
+];
+
+const LEGAL_LINKS = [
+  { href: "https://kalikayi.com/privacy-policy", label: "Privacy Policy" },
+  { href: "https://kalikayi.com/terms", label: "Terms of Service" },
+  { href: "https://kalikayi.com/disclaimer", label: "Disclaimer" },
+];
+
+const SOCIAL = {
+  github: "https://github.com/sunilkalikayi",
+  linkedin: "https://linkedin.com/in/sunilkalikayi",
+  portfolio: "https://sunilkalikayi.vercel.app/",
+};
+
+export function Footer() {
+  const year = new Date().getFullYear();
+
+  return (
+    <footer className="border-t border-border/30 bg-card/50">
+      <div className="mx-auto max-w-7xl px-6 py-12">
+        <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
+          {/* Brand */}
+          <div className="space-y-3">
+            <h3 className="text-lg font-bold text-primary">Kalikayi</h3>
+            <p className="text-sm leading-relaxed text-muted-foreground">
+              Free online tools that just work. No sign-up, no paywalls, no tricks.
+            </p>
+          </div>
+
+          {/* Quick Links */}
+          <div className="space-y-3">
+            <h4 className="text-sm font-semibold">Quick Links</h4>
+            <nav className="flex flex-col gap-2">
+              {QUICK_LINKS.map((link) => (
+                <a
+                  key={link.href}
+                  href={link.href}
+                  className="text-sm text-muted-foreground transition-colors hover:text-foreground"
+                >
+                  {link.label}
+                </a>
+              ))}
+            </nav>
+          </div>
+
+          {/* Legal */}
+          <div className="space-y-3">
+            <h4 className="text-sm font-semibold">Legal</h4>
+            <nav className="flex flex-col gap-2">
+              {LEGAL_LINKS.map((link) => (
+                <a
+                  key={link.href}
+                  href={link.href}
+                  className="text-sm text-muted-foreground transition-colors hover:text-foreground"
+                >
+                  {link.label}
+                </a>
+              ))}
+            </nav>
+          </div>
+
+          {/* Connect */}
+          <div className="space-y-3">
+            <h4 className="text-sm font-semibold">Connect</h4>
+            <div className="flex gap-3">
+              <a
+                href={SOCIAL.github}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-muted-foreground transition-colors hover:text-foreground"
+                aria-label="GitHub"
+              >
+                <Github size={20} />
+              </a>
+              <a
+                href={SOCIAL.linkedin}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-muted-foreground transition-colors hover:text-foreground"
+                aria-label="LinkedIn"
+              >
+                <Linkedin size={20} />
+              </a>
+              <a
+                href={SOCIAL.portfolio}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-muted-foreground transition-colors hover:text-foreground"
+                aria-label="Portfolio"
+              >
+                <Globe size={20} />
+              </a>
+            </div>
+          </div>
+        </div>
+
+        {/* Separator */}
+        <div className="my-8 h-px bg-border/30" />
+
+        <div className="flex flex-col items-center justify-between gap-2 text-center sm:flex-row">
+          <p className="text-xs text-muted-foreground">
+            &copy; {year} Kalikayi. All rights reserved.
+          </p>
+          <p className="text-xs text-muted-foreground">
+            Made with care for everyone
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+}

package/src/components/layout/header.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { AccentPicker } from "../theme/accent-picker";
+import { ThemeToggle } from "../theme/theme-toggle";
+import { MobileNav } from "./mobile-nav";
+import { cn } from "../../lib/utils";
+import type { SubHeaderConfig } from "../../types";
+
+const NAV_LINKS = [
+  { href: "https://kalikayi.com", label: "Home" },
+  { href: "https://kalikayi.com/tools", label: "Tools" },
+  { href: "https://kalikayi.com/blog", label: "Blog" },
+  { href: "https://kalikayi.com/about", label: "About" },
+  { href: "https://kalikayi.com/contact", label: "Contact" },
+];
+
+interface HeaderProps {
+  subHeaderConfig?: SubHeaderConfig;
+}
+
+export function Header({ subHeaderConfig }: HeaderProps) {
+  const pathname = usePathname();
+
+  return (
+    <header className="sticky top-0 z-50 w-full border-b border-border/30 bg-background/80 backdrop-blur-xl">
+      <div className="mx-auto flex h-14 max-w-7xl items-center justify-between px-6">
+        {/* Logo */}
+        <a
+          href="https://kalikayi.com"
+          className="text-xl font-bold tracking-tight text-primary"
+        >
+          Kalikayi
+        </a>
+
+        {/* Desktop nav */}
+        <nav className="hidden items-center gap-1 md:flex">
+          {NAV_LINKS.map((link) => {
+            const isActive =
+              link.href === "https://kalikayi.com"
+                ? pathname === "/"
+                : pathname.startsWith(new URL(link.href).pathname);
+            return (
+              <a
+                key={link.href}
+                href={link.href}
+                className={cn(
+                  "relative px-3 py-2 text-sm font-medium transition-colors",
+                  isActive
+                    ? "text-primary"
+                    : "text-muted-foreground hover:text-foreground"
+                )}
+              >
+                {link.label}
+                {isActive && (
+                  <span className="absolute inset-x-3 -bottom-[13px] h-0.5 rounded-full bg-primary" />
+                )}
+              </a>
+            );
+          })}
+        </nav>
+
+        {/* Right side controls */}
+        <div className="flex items-center gap-2">
+          <div className="hidden items-center gap-2 md:flex">
+            <AccentPicker />
+            <ThemeToggle />
+          </div>
+          <MobileNav subHeaderConfig={subHeaderConfig} />
+        </div>
+      </div>
+    </header>
+  );
+}

package/src/components/layout/mobile-nav.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { Menu, X } from "lucide-react";
+import { AccentPicker } from "../theme/accent-picker";
+import { ThemeToggle } from "../theme/theme-toggle";
+import { cn } from "../../lib/utils";
+import type { SubHeaderConfig } from "../../types";
+
+const HUB_NAV_LINKS = [
+  { href: "https://kalikayi.com", label: "Home" },
+  { href: "https://kalikayi.com/tools", label: "Tools" },
+  { href: "https://kalikayi.com/blog", label: "Blog" },
+  { href: "https://kalikayi.com/about", label: "About" },
+  { href: "https://kalikayi.com/contact", label: "Contact" },
+];
+
+interface MobileNavProps {
+  subHeaderConfig?: SubHeaderConfig;
+}
+
+export function MobileNav({ subHeaderConfig }: MobileNavProps) {
+  const [open, setOpen] = useState(false);
+  const pathname = usePathname();
+
+  return (
+    <>
+      <button
+        className="inline-flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground md:hidden"
+        onClick={() => setOpen(true)}
+        aria-label="Open menu"
+      >
+        <Menu className="h-5 w-5" />
+      </button>
+
+      {/* Overlay */}
+      {open && (
+        <div className="fixed inset-0 z-50 md:hidden">
+          {/* Backdrop */}
+          <div
+            className="fixed inset-0 bg-background/80 backdrop-blur-sm"
+            onClick={() => setOpen(false)}
+          />
+
+          {/* Sheet */}
+          <div className="fixed inset-y-0 right-0 w-[280px] border-l border-border/30 bg-background p-0 shadow-lg">
+            {/* Header */}
+            <div className="flex items-center justify-between border-b border-border/30 px-6 py-4">
+              <span className="font-bold text-primary">Kalikayi</span>
+              <button
+                className="inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
+                onClick={() => setOpen(false)}
+                aria-label="Close menu"
+              >
+                <X className="h-4 w-4" />
+              </button>
+            </div>
+
+            {/* Hub nav */}
+            <nav className="flex flex-col gap-1 p-4">
+              <p className="mb-1 px-4 text-xs font-semibold uppercase tracking-wider text-muted-foreground/60">
+                Kalikayi
+              </p>
+              {HUB_NAV_LINKS.map((link) => (
+                <a
+                  key={link.href}
+                  href={link.href}
+                  onClick={() => setOpen(false)}
+                  className={cn(
+                    "rounded-lg px-4 py-2.5 text-sm font-medium transition-colors",
+                    "text-muted-foreground hover:bg-accent hover:text-foreground"
+                  )}
+                >
+                  {link.label}
+                </a>
+              ))}
+            </nav>
+
+            {/* Tool nav */}
+            {subHeaderConfig && (
+              <nav className="flex flex-col gap-1 border-t border-border/30 p-4">
+                <p className="mb-1 px-4 text-xs font-semibold uppercase tracking-wider text-muted-foreground/60">
+                  {subHeaderConfig.name}
+                </p>
+
+                {subHeaderConfig.dropdowns?.map((dropdown) => (
+                  <div key={dropdown.label}>
+                    <p className="px-4 py-1.5 text-xs font-medium text-primary">
+                      {dropdown.label}
+                    </p>
+                    {dropdown.items.map((item) => (
+                      <Link
+                        key={item.href}
+                        href={item.href}
+                        onClick={() => setOpen(false)}
+                        className="block rounded-lg px-6 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+                      >
+                        {item.label}
+                      </Link>
+                    ))}
+                  </div>
+                ))}
+
+                {subHeaderConfig.navLinks?.map((link) => {
+                  const isActive = pathname === link.href || pathname.startsWith(link.href + "/");
+                  return (
+                    <Link
+                      key={link.href}
+                      href={link.href}
+                      onClick={() => setOpen(false)}
+                      className={cn(
+                        "rounded-lg px-4 py-2.5 text-sm font-medium transition-colors",
+                        isActive
+                          ? "bg-primary/10 text-primary"
+                          : "text-muted-foreground hover:bg-accent hover:text-foreground"
+                      )}
+                    >
+                      {link.label}
+                    </Link>
+                  );
+                })}
+              </nav>
+            )}
+
+            {/* Controls */}
+            <div className="mt-auto border-t border-border/30 px-6 py-4">
+              <div className="flex items-center justify-between">
+                <AccentPicker />
+                <ThemeToggle />
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

package/src/components/layout/sub-header.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../../lib/utils";
+import type { SubHeaderConfig } from "../../types";
+
+interface SubHeaderProps {
+  config: SubHeaderConfig;
+}
+
+export function SubHeader({ config }: SubHeaderProps) {
+  const pathname = usePathname();
+  const [openDropdown, setOpenDropdown] = useState<string | null>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+        setOpenDropdown(null);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  return (
+    <div className="sticky top-14 z-40 w-full border-b border-border/20 bg-card/50 backdrop-blur-lg">
+      <div className="mx-auto flex h-12 max-w-7xl items-center gap-6 px-6" ref={dropdownRef}>
+        {/* Tool logo + name */}
+        <Link
+          href={config.href}
+          className="flex items-center gap-2 text-sm font-bold text-foreground"
+        >
+          {config.logo}
+          <span>{config.name}</span>
+        </Link>
+
+        {/* Desktop nav */}
+        <nav className="hidden items-center gap-1 md:flex">
+          {/* Dropdowns */}
+          {config.dropdowns?.map((dropdown) => (
+            <div key={dropdown.label} className="relative">
+              <button
+                className={cn(
+                  "flex items-center gap-1 rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
+                  openDropdown === dropdown.label
+                    ? "text-primary"
+                    : "text-muted-foreground hover:text-foreground"
+                )}
+                onClick={() =>
+                  setOpenDropdown(
+                    openDropdown === dropdown.label ? null : dropdown.label
+                  )
+                }
+              >
+                {dropdown.label}
+                <ChevronDown
+                  className={cn(
+                    "h-3.5 w-3.5 transition-transform",
+                    openDropdown === dropdown.label && "rotate-180"
+                  )}
+                />
+              </button>
+              {openDropdown === dropdown.label && (
+                <div className="absolute left-0 top-full z-50 mt-1 w-64 rounded-lg border border-border/50 bg-popover p-2 shadow-lg">
+                  {dropdown.items.map((item) => (
+                    <Link
+                      key={item.href}
+                      href={item.href}
+                      onClick={() => setOpenDropdown(null)}
+                      className="block rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+                    >
+                      <span className="font-medium text-foreground">
+                        {item.label}
+                      </span>
+                      {item.description && (
+                        <span className="mt-0.5 block text-xs text-muted-foreground">
+                          {item.description}
+                        </span>
+                      )}
+                    </Link>
+                  ))}
+                </div>
+              )}
+            </div>
+          ))}
+
+          {/* Nav links */}
+          {config.navLinks?.map((link) => {
+            const isActive = pathname === link.href || pathname.startsWith(link.href + "/");
+            return (
+              <Link
+                key={link.href}
+                href={link.href}
+                className={cn(
+                  "rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
+                  isActive
+                    ? "text-primary"
+                    : "text-muted-foreground hover:text-foreground"
+                )}
+              >
+                {link.label}
+              </Link>
+            );
+          })}
+        </nav>
+      </div>
+    </div>
+  );
+}

package/src/components/seo/json-ld.tsx

@@ -0,0 +1,81 @@
+import type { FAQ, BreadcrumbItem } from "../../types";
+
+interface JsonLdProps {
+  data: Record<string, unknown>;
+}
+
+export function JsonLd({ data }: JsonLdProps) {
+  return (
+    <script
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
+    />
+  );
+}
+
+export function WebAppJsonLd({
+  name,
+  url,
+  description,
+}: {
+  name: string;
+  url: string;
+  description: string;
+}) {
+  return (
+    <JsonLd
+      data={{
+        "@context": "https://schema.org",
+        "@type": "WebApplication",
+        name,
+        url,
+        description,
+        applicationCategory: "UtilityApplication",
+        operatingSystem: "All",
+        offers: {
+          "@type": "Offer",
+          price: "0",
+          priceCurrency: "USD",
+        },
+      }}
+    />
+  );
+}
+
+export function FAQJsonLd({ faqs }: { faqs: FAQ[] }) {
+  if (faqs.length === 0) return null;
+
+  return (
+    <JsonLd
+      data={{
+        "@context": "https://schema.org",
+        "@type": "FAQPage",
+        mainEntity: faqs.map((faq) => ({
+          "@type": "Question",
+          name: faq.question,
+          acceptedAnswer: {
+            "@type": "Answer",
+            text: faq.answer,
+          },
+        })),
+      }}
+    />
+  );
+}
+
+export function BreadcrumbJsonLd({ items }: { items: BreadcrumbItem[] }) {
+  return (
+    <JsonLd
+      data={{
+        "@context": "https://schema.org",
+        "@type": "BreadcrumbList",
+        itemListElement: items.map((item, i) => ({
+          "@type": "ListItem",
+          position: i + 1,
+          name: item.name,
+          item: item.url,
+        })),
+      }}
+    />
+  );
+}

package/src/components/theme/accent-picker.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { cn } from "../../lib/utils";
+
+const ACCENTS = [
+  { name: "teal", color: "oklch(0.55 0.15 165)" },
+  { name: "blue", color: "oklch(0.55 0.20 260)" },
+  { name: "purple", color: "oklch(0.55 0.22 290)" },
+  { name: "orange", color: "oklch(0.65 0.18 55)" },
+  { name: "rose", color: "oklch(0.55 0.20 10)" },
+] as const;
+
+type AccentName = (typeof ACCENTS)[number]["name"];
+
+function getStoredAccent(): AccentName {
+  if (typeof window === "undefined") return "teal";
+  return (localStorage.getItem("accent") as AccentName) || "teal";
+}
+
+function applyAccent(accent: AccentName) {
+  const root = document.documentElement;
+  if (accent === "teal") {
+    root.removeAttribute("data-accent");
+  } else {
+    root.setAttribute("data-accent", accent);
+  }
+  localStorage.setItem("accent", accent);
+}
+
+export function AccentPicker() {
+  const [active, setActive] = useState<AccentName>("teal");
+
+  useEffect(() => {
+    const stored = getStoredAccent();
+    setActive(stored);
+    applyAccent(stored);
+  }, []);
+
+  return (
+    <div className="flex items-center gap-1.5" role="radiogroup" aria-label="Accent color">
+      {ACCENTS.map(({ name, color }) => (
+        <button
+          key={name}
+          role="radio"
+          aria-checked={active === name}
+          aria-label={`${name} accent`}
+          className={cn(
+            "h-5 w-5 rounded-full border-2 transition-transform duration-200 hover:scale-110",
+            active === name
+              ? "border-foreground scale-110"
+              : "border-transparent"
+          )}
+          style={{ backgroundColor: color }}
+          onClick={() => {
+            setActive(name);
+            applyAccent(name);
+          }}
+        />
+      ))}
+    </div>
+  );
+}

package/src/components/theme/theme-provider.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import type { ReactNode } from "react";
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  return (
+    <NextThemesProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange={false}
+    >
+      {children}
+    </NextThemesProvider>
+  );
+}

package/src/components/theme/theme-toggle.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+import { Moon, Sun } from "lucide-react";
+
+export function ThemeToggle() {
+  const { resolvedTheme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => setMounted(true), []);
+
+  if (!mounted) {
+    return (
+      <button
+        className="inline-flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground opacity-50"
+        disabled
+        aria-label="Toggle theme"
+      >
+        <Sun className="h-[18px] w-[18px]" />
+      </button>
+    );
+  }
+
+  const isDark = resolvedTheme === "dark";
+
+  return (
+    <button
+      className="inline-flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+      onClick={() => setTheme(isDark ? "light" : "dark")}
+      aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
+    >
+      {isDark ? (
+        <Sun className="h-[18px] w-[18px]" />
+      ) : (
+        <Moon className="h-[18px] w-[18px]" />
+      )}
+    </button>
+  );
+}

package/src/hooks/use-copy-to-clipboard.ts

@@ -0,0 +1,23 @@
+"use client";
+
+import { useState, useCallback } from "react";
+
+export function useCopyToClipboard(resetDelay = 2000) {
+  const [copied, setCopied] = useState(false);
+
+  const copy = useCallback(
+    async (text: string) => {
+      try {
+        await navigator.clipboard.writeText(text);
+        setCopied(true);
+        setTimeout(() => setCopied(false), resetDelay);
+        return true;
+      } catch {
+        return false;
+      }
+    },
+    [resetDelay]
+  );
+
+  return { copy, copied };
+}

package/src/index.ts

@@ -0,0 +1,43 @@
+// Types
+export type {
+  FAQ,
+  BreadcrumbItem,
+  KalikayiTool,
+  NavLink,
+  NavDropdown,
+  SubHeaderConfig,
+} from "./types";
+
+// Lib
+export { cn } from "./lib/utils";
+export {
+  kalikayiTools,
+  getLiveTools,
+  getRandomTools,
+} from "./lib/kalikayi-tools";
+
+// SEO
+export {
+  JsonLd,
+  WebAppJsonLd,
+  FAQJsonLd,
+  BreadcrumbJsonLd,
+} from "./components/seo/json-ld";
+
+// Ads
+export { AdBanner } from "./components/ads/ad-banner";
+export { ToolPromoBanner } from "./components/ads/tool-promo-banner";
+
+// Theme
+export { ThemeProvider } from "./components/theme/theme-provider";
+export { AccentPicker } from "./components/theme/accent-picker";
+export { ThemeToggle } from "./components/theme/theme-toggle";
+
+// Layout
+export { Header } from "./components/layout/header";
+export { SubHeader } from "./components/layout/sub-header";
+export { MobileNav } from "./components/layout/mobile-nav";
+export { Footer } from "./components/layout/footer";
+
+// Hooks
+export { useCopyToClipboard } from "./hooks/use-copy-to-clipboard";

package/src/lib/kalikayi-tools.ts

@@ -0,0 +1,35 @@
+import type { KalikayiTool } from "../types";
+
+export const kalikayiTools: KalikayiTool[] = [
+  {
+    name: "FreeResumePick",
+    tagline: "Free resume builder & ATS scanner",
+    href: "https://kalikayi.com/tools/free-resume-pick",
+    icon: "FileText",
+    isLive: true,
+  },
+  {
+    name: "FreeTypingBoard",
+    tagline: "Free typing tutor with 30+ lessons",
+    href: "https://kalikayi.com/tools/free-typing-board",
+    icon: "Keyboard",
+    isLive: true,
+  },
+  {
+    name: "FreeCalcKit",
+    tagline: "50+ free calculators & converters",
+    href: "https://freecalckit.com",
+    icon: "Calculator",
+    isLive: true,
+  },
+];
+
+export function getLiveTools(): KalikayiTool[] {
+  return kalikayiTools.filter((tool) => tool.isLive);
+}
+
+export function getRandomTools(exclude?: string, count = 3): KalikayiTool[] {
+  const live = getLiveTools().filter((t) => t.name !== exclude);
+  const shuffled = [...live].sort(() => Math.random() - 0.5);
+  return shuffled.slice(0, count);
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/styles/theme-base.css

@@ -0,0 +1,159 @@
+/* ========================================
+   KALIKAYI BASE THEME — OKLCH Color System
+   5 accents (Teal, Blue, Purple, Orange, Rose) x 2 modes (Light/Dark)
+   ======================================== */
+
+/* ========================================
+   BASE LIGHT THEME (Teal accent — default)
+   ======================================== */
+:root {
+  --radius: 0.625rem;
+  --background: oklch(0.985 0.002 250);
+  --foreground: oklch(0.13 0.03 265);
+  --card: oklch(0.97 0.003 250);
+  --card-foreground: oklch(0.13 0.03 265);
+  --popover: oklch(0.985 0.002 250);
+  --popover-foreground: oklch(0.13 0.03 265);
+  --primary: oklch(0.55 0.15 165);
+  --primary-foreground: oklch(0.98 0.005 165);
+  --secondary: oklch(0.95 0.005 250);
+  --secondary-foreground: oklch(0.2 0.03 265);
+  --muted: oklch(0.95 0.005 250);
+  --muted-foreground: oklch(0.45 0.03 260);
+  --accent: oklch(0.93 0.01 250);
+  --accent-foreground: oklch(0.2 0.03 265);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.9 0.01 255);
+  --input: oklch(0.9 0.01 255);
+  --ring: oklch(0.55 0.15 165);
+  --glow: oklch(0.55 0.15 165);
+  --glow-muted: oklch(0.55 0.15 165 / 15%);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.984 0.003 247.858);
+  --sidebar-foreground: oklch(0.129 0.042 264.695);
+  --sidebar-primary: oklch(0.208 0.042 265.755);
+  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-accent: oklch(0.968 0.007 247.896);
+  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
+  --sidebar-border: oklch(0.929 0.013 255.508);
+  --sidebar-ring: oklch(0.704 0.04 256.788);
+}
+
+/* ========================================
+   BASE DARK THEME (Teal accent — default)
+   ======================================== */
+.dark {
+  --background: oklch(0.07 0.01 260);
+  --foreground: oklch(0.96 0.005 250);
+  --card: oklch(0.12 0.015 260);
+  --card-foreground: oklch(0.96 0.005 250);
+  --popover: oklch(0.12 0.015 260);
+  --popover-foreground: oklch(0.96 0.005 250);
+  --primary: oklch(0.8 0.17 165);
+  --primary-foreground: oklch(0.07 0.01 260);
+  --secondary: oklch(0.17 0.02 260);
+  --secondary-foreground: oklch(0.96 0.005 250);
+  --muted: oklch(0.17 0.02 260);
+  --muted-foreground: oklch(0.73 0.015 255);
+  --accent: oklch(0.17 0.02 260);
+  --accent-foreground: oklch(0.96 0.005 250);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 14%);
+  --input: oklch(1 0 0 / 18%);
+  --ring: oklch(0.8 0.17 165);
+  --glow: oklch(0.8 0.17 165);
+  --glow-muted: oklch(0.8 0.17 165 / 18%);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.1 0.015 260);
+  --sidebar-foreground: oklch(0.93 0.008 250);
+  --sidebar-primary: oklch(0.72 0.19 165);
+  --sidebar-primary-foreground: oklch(0.93 0.008 250);
+  --sidebar-accent: oklch(0.15 0.02 260);
+  --sidebar-accent-foreground: oklch(0.93 0.008 250);
+  --sidebar-border: oklch(1 0 0 / 8%);
+  --sidebar-ring: oklch(0.72 0.19 165);
+}
+
+/* ========================================
+   ACCENT: BLUE
+   ======================================== */
+[data-accent="blue"] {
+  --primary: oklch(0.55 0.20 260);
+  --primary-foreground: oklch(0.98 0.005 260);
+  --ring: oklch(0.55 0.20 260);
+  --glow: oklch(0.55 0.20 260);
+  --glow-muted: oklch(0.55 0.20 260 / 15%);
+}
+[data-accent="blue"].dark,
+.dark[data-accent="blue"] {
+  --primary: oklch(0.70 0.18 260);
+  --primary-foreground: oklch(0.07 0.01 260);
+  --ring: oklch(0.70 0.18 260);
+  --glow: oklch(0.70 0.18 260);
+  --glow-muted: oklch(0.70 0.18 260 / 18%);
+}
+
+/* ========================================
+   ACCENT: PURPLE
+   ======================================== */
+[data-accent="purple"] {
+  --primary: oklch(0.55 0.22 290);
+  --primary-foreground: oklch(0.98 0.005 290);
+  --ring: oklch(0.55 0.22 290);
+  --glow: oklch(0.55 0.22 290);
+  --glow-muted: oklch(0.55 0.22 290 / 15%);
+}
+[data-accent="purple"].dark,
+.dark[data-accent="purple"] {
+  --primary: oklch(0.70 0.20 290);
+  --primary-foreground: oklch(0.07 0.01 260);
+  --ring: oklch(0.70 0.20 290);
+  --glow: oklch(0.70 0.20 290);
+  --glow-muted: oklch(0.70 0.20 290 / 18%);
+}
+
+/* ========================================
+   ACCENT: ORANGE
+   ======================================== */
+[data-accent="orange"] {
+  --primary: oklch(0.65 0.18 55);
+  --primary-foreground: oklch(0.98 0.005 55);
+  --ring: oklch(0.65 0.18 55);
+  --glow: oklch(0.65 0.18 55);
+  --glow-muted: oklch(0.65 0.18 55 / 15%);
+}
+[data-accent="orange"].dark,
+.dark[data-accent="orange"] {
+  --primary: oklch(0.78 0.16 55);
+  --primary-foreground: oklch(0.07 0.01 260);
+  --ring: oklch(0.78 0.16 55);
+  --glow: oklch(0.78 0.16 55);
+  --glow-muted: oklch(0.78 0.16 55 / 18%);
+}
+
+/* ========================================
+   ACCENT: ROSE
+   ======================================== */
+[data-accent="rose"] {
+  --primary: oklch(0.55 0.20 10);
+  --primary-foreground: oklch(0.98 0.005 10);
+  --ring: oklch(0.55 0.20 10);
+  --glow: oklch(0.55 0.20 10);
+  --glow-muted: oklch(0.55 0.20 10 / 15%);
+}
+[data-accent="rose"].dark,
+.dark[data-accent="rose"] {
+  --primary: oklch(0.72 0.18 10);
+  --primary-foreground: oklch(0.07 0.01 260);
+  --ring: oklch(0.72 0.18 10);
+  --glow: oklch(0.72 0.18 10);
+  --glow-muted: oklch(0.72 0.18 10 / 18%);
+}

package/src/types/index.ts

@@ -0,0 +1,38 @@
+import type { ReactNode } from "react";
+
+export interface FAQ {
+  question: string;
+  answer: string;
+}
+
+export interface BreadcrumbItem {
+  name: string;
+  url: string;
+}
+
+export interface KalikayiTool {
+  name: string;
+  tagline: string;
+  href: string;
+  icon: string;
+  isLive: boolean;
+}
+
+export interface NavLink {
+  href: string;
+  label: string;
+  description?: string;
+}
+
+export interface NavDropdown {
+  label: string;
+  items: NavLink[];
+}
+
+export interface SubHeaderConfig {
+  name: string;
+  href: string;
+  logo: ReactNode;
+  navLinks?: NavLink[];
+  dropdowns?: NavDropdown[];
+}