Add Khiyal Studio homepage clone with Meshkee integration.

Initial Next.js site covering home, about, and contact, matching the live studio layout. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-31 12:40:27 +03:30
commit d2a82849ef
85 changed files with 10231 additions and 0 deletions
@@ -0,0 +1,89 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
+import { navItems, socialLinks } from "@/data/content";
+import { CONTACT } from "@/lib/site";
+import { SocialIcon } from "./SocialIcon";
+
+export function Header() {
+  const [open, setOpen] = useState(false);
+  const pathname = usePathname();
+
+  useEffect(() => {
+    document.body.classList.toggle("menu-open", open);
+    return () => document.body.classList.remove("menu-open");
+  }, [open]);
+
+  const close = () => setOpen(false);
+
+  return (
+    <>
+      <header className="site-header">
+        <Link href="/" className="logo" aria-label="Khiyal Architecture Studio">
+          <img src="/images/brand/logo-white.png" alt="Khiyal Architecture Studio" />
+        </Link>
+        <button
+          type="button"
+          className="hamburger"
+          aria-label="Open menu"
+          aria-expanded={open}
+          onClick={() => setOpen(true)}
+        >
+          <span />
+          <span />
+          <span />
+          <span />
+        </button>
+      </header>
+
+      <div className={`menu-overlay ${open ? "open" : ""}`} role="dialog" aria-modal="true">
+        <button type="button" className="menu-close" aria-label="Close menu" onClick={() => setOpen(false)}>
+          ×
+        </button>
+        <div className="menu-grid">
+          <div>
+            <Link href="/" onClick={close}>
+              <img src="/images/brand/logo-footer.png" alt="Khiyal" style={{ height: 72, width: "auto" }} />
+            </Link>
+            <div className="menu-meta">
+              <div>
+                <span className="eyebrow">Appointments</span>
+                <p>For better access to the office, please visit the contact page.</p>
+              </div>
+              <div>
+                <span className="eyebrow">Let&apos;s talk</span>
+                <a href={`mailto:${CONTACT.email}`} className="heading-white">
+                  {CONTACT.email}
+                </a>
+              </div>
+              <div>
+                <span className="eyebrow">Connect with us</span>
+                <div className="social-row">
+                  {socialLinks.map((item) => (
+                    <a key={item.label} href={item.href} target="_blank" rel="noreferrer" aria-label={item.label}>
+                      <SocialIcon name={item.icon} />
+                    </a>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+          <nav className="menu-nav" aria-label="Primary">
+            {navItems.map((item) => (
+              <Link
+                key={item.label}
+                href={item.href}
+                className={pathname === item.href ? "active" : undefined}
+                onClick={close}
+              >
+                {item.label}
+              </Link>
+            ))}
+          </nav>
+        </div>
+      </div>
+    </>
+  );
+}