Add features to home page (#1590)

* Add bare features to homepage

* Add styles to features

* Further style features

* Replace Control Panel with Integration

* Update Features.module.css

docs/components/Features.module.css

@@ -0,0 +1,61 @@
+.features {
+  margin: 0 auto;
+  max-width: 1208px;
+  padding: min(12vw, 5rem) 0;
+  padding-left: max(env(safe-area-inset-left), 1.5rem);
+  padding-right: max(env(safe-area-inset-right), 1.5rem);
+  border-top: 1px solid rgb(229, 231, 235);
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  place-items: start center;
+  row-gap: 40px;
+
+  @media (min-width: 640px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media (min-width: 960px) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  :global(.dark) & {
+    border-top: 1px solid rgb(31, 31, 31);
+  }
+
+  li {
+    max-width: 300px;
+    color: hsl(204 12% 45%);
+
+    :global(.dark) & {
+      color: hsl(204, 8%, 50%);
+    }
+
+    @media (min-width: 640px) {
+      max-width: 256px;
+    }
+
+    svg {
+      display: inline;
+      margin-right: 2px;
+      transform: translate(0, -1px);
+    }
+
+    strong {
+      display: block;
+      font-weight: 400;
+      color: hsl(204 12% 5%);
+
+      @media (min-width: 640px) {
+        display: inline;
+
+        &::after {
+          content: '.';
+        }
+      }
+
+      :global(.dark) & {
+        color: hsl(204, 8%, 90%);
+      }
+    }
+  }
+}

docs/components/Features.tsx

@@ -0,0 +1,61 @@
+import { ReactNode } from 'react';
+import styles from './Features.module.css';
+import BoxSvg from './svg/icons/box.svg';
+import CodeSvg from './svg/icons/code.svg';
+import MonitorSvg from './svg/icons/monitor.svg';
+import SettingsSvg from './svg/icons/settings.svg';
+import UploadCloudSvg from './svg/icons/upload-cloud.svg';
+import ZapSvg from './svg/icons/zap.svg';
+
+export function Features() {
+  return (
+    <ul className={styles.features}>
+      <Feature
+        title="Fixtures"
+        description="File-system based module convention for defining component states effortlessly."
+        icon={<CodeSvg />}
+      />
+      <Feature
+        title="User Interface"
+        description="Beautiful interface for browsing fixtures and manipulating component inputs."
+        icon={<MonitorSvg />}
+      />
+      <Feature
+        title="Static Export"
+        description="Interactive component library deployable to any static hosting service."
+        icon={<UploadCloudSvg />}
+      />
+      <Feature
+        title="Integration"
+        description="Vite, Webpack, React Native, Next.js, and support for custom setups."
+        icon={<SettingsSvg />}
+      />
+      <Feature
+        title="Plugins"
+        description="Full-stack plugin system for extending every aspect of React Cosmos."
+        icon={<BoxSvg />}
+      />
+      <Feature
+        title="High Quality"
+        description="100% TypeScript. Minimal deps. Meticulously designed and tested."
+        icon={<ZapSvg />}
+      />
+    </ul>
+  );
+}
+
+type FeatureProps = {
+  title: string;
+  description: string;
+  icon: ReactNode;
+};
+function Feature({ title, description, icon }: FeatureProps) {
+  return (
+    <li>
+      <strong>
+        {icon} {title}
+      </strong>{' '}
+      {description}
+    </li>
+  );
+}

docs/components/Homepage.tsx

@@ -1,4 +1,5 @@
 import { useData } from 'nextra/data';
+import { Features } from './Features';
 import styles from './Homepage.module.css';
 import { HomepageHero } from './HomepageHero';
 import { HomepageLogos } from './HomepageLogos';
@@ -23,6 +24,7 @@ export function Homepage() {
           <img src="/demo.png" />
         </a>
         <HomepageLogos />
+        <Features />
       </div>
     </div>
   );