import Header from '@/components/Header';

export default function Layout({ children }) {
  return (
    <main className="app-shell">
      <Header />
      {children}
    </main>
  );
}

const useTheme = () => {
  const [theme, setTheme] = useState('dark');
  return { theme, setTheme };
};

@media (min-width: 1024px) {
  .grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 2rem;
  }
}

import Image from 'next/image';

<Image
  src={work.image}
  alt={work.title}
  width={400}
  height={300}
/>

export const NAV_ITEMS = [
  { id: 'home', href: '/' },
  { id: 'works', href: '/works' },
  { id: 'contact', href: '/contact' },
];

useEffect(() => {
  if (!isOpen) return;
  document.body.style.overflow = 'hidden';
  return () => {
    document.body.style.overflow = '';
  };
}, [isOpen]);

.portfolio-modal__panel {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 48px);
  border-radius: 16px;
  animation: portfolio-modal-panel-in 0.4s ease;
}

const WorksSection = () => {
  const [activeWork, setActiveWork] = useState(null);

  return (
    <ul className="portfolio-grid">
      {portfolioWorks.map(...)}
    </ul>
  );
};

/** Site shell — shared layout */
export default function SiteLayout({ children }) {
  return (
    <ContentScroll>{children}</ContentScroll>
  );
}

if (e.key === 'Escape') {
  requestClose();
}

@media (prefers-reduced-motion: reduce) {
  animation: none;
}

import Header from '@/components/Header';

export default function Layout({ children }) {
  return (
    <main className="app-shell">
      <Header />
      {children}
    </main>
  );
}

const useTheme = () => {
  const [theme, setTheme] = useState('dark');
  return { theme, setTheme };
};

@media (min-width: 1024px) {
  .grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 2rem;
  }
}

import Image from 'next/image';

<Image
  src={work.image}
  alt={work.title}
  width={400}
  height={300}
/>

export const NAV_ITEMS = [
  { id: 'home', href: '/' },
  { id: 'works', href: '/works' },
  { id: 'contact', href: '/contact' },
];

useEffect(() => {
  if (!isOpen) return;
  document.body.style.overflow = 'hidden';
  return () => {
    document.body.style.overflow = '';
  };
}, [isOpen]);

.portfolio-modal__panel {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 48px);
  border-radius: 16px;
  animation: portfolio-modal-panel-in 0.4s ease;
}

const WorksSection = () => {
  const [activeWork, setActiveWork] = useState(null);

  return (
    <ul className="portfolio-grid">
      {portfolioWorks.map(...)}
    </ul>
  );
};

/** Site shell — shared layout */
export default function SiteLayout({ children }) {
  return (
    <ContentScroll>{children}</ContentScroll>
  );
}

if (e.key === 'Escape') {
  requestClose();
}

@media (prefers-reduced-motion: reduce) {
  animation: none;
}