m2s2-cli 0.1.9

import {
  Navbar,
  Footer,
  PageHeader,
  FeatureCard,
  CtaSection,
  M2S2Provider,
} from '@m2s2/react-lib';
import type {
  NavbarConfig,
  FooterConfig,
  PageHeaderConfig,
  FeatureCardConfig,
  CtaConfig,
} from '@m2s2/react-lib';
import './App.scss';

const navbar: NavbarConfig = {
  brand: '{{name}}',
  brandPath: '/',
  isFixed: true,
  buttons: [
    { id: 'home',    title: 'Home',    href: '/' },
    { id: 'about',   title: 'About',   href: '/about' },
    { id: 'contact', title: 'Contact', href: '/contact' },
  ],
};

const hero: PageHeaderConfig = {
  title: 'Welcome to {{name}}',
  subtitle: 'Built with the M²S² design system — start building something great.',
};

const features: FeatureCardConfig[] = [
  {
    icon: '🎨',
    title: 'Design Tokens',
    body: 'Consistent colours, spacing, and typography powered by @m2s2/tokens.',
  },
  {
    icon: '⚡',
    title: 'Ready-made Components',
    body: 'Production-quality UI components wired up and ready to use out of the box.',
    featured: true,
  },
  {
    icon: '🚀',
    title: 'Fast by Default',
    body: 'Vite-powered dev server with hot module replacement for instant feedback.',
  },
];

const cta: CtaConfig = {
  title: 'Ready to build?',
  body: 'Open src/App.tsx and start replacing this content with your own.',
  label: 'View the docs',
  route: 'https://github.com/M2S2-Engineering-Group',
};

const footer: FooterConfig = {
  brandName: '{{name}}',
  links: [
    { type: 'github', href: 'https://github.com/M2S2-Engineering-Group' },
  ],
};

export default function App() {
  return (
    <M2S2Provider>
      <Navbar config={navbar} />
      <main className="app-main">
        <PageHeader config={hero} />
        <section className="features">
          {features.map((f) => (
            <FeatureCard key={f.title} config={f} />
          ))}
        </section>
        <CtaSection config={cta} />
      </main>
      <Footer config={footer} />
    </M2S2Provider>
  );
}