Info: create wrapper around body sections

src/components/Info/Info.css

@@ -0,0 +1,49 @@
+section.info {
+  margin: 72px auto 96px;
+  width: 66.67%;
+}
+
+h2 {
+  font-size: 48px;
+  font-weight: 400;
+  line-height: 60px;
+  margin: 0 0 96px;
+}
+
+h4 {
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 40px;
+  margin: 0 0 8px;
+}
+
+p {
+  margin-top: 0;
+}
+
+ul {
+  margin: 0 0 32px;
+  list-style: circle outside;
+  padding-left: 32px;
+}
+
+.feature {
+  display: flex;
+  margin-bottom: 96px;
+}
+
+.feature h3 {
+  flex: 1;
+  margin: 0;
+  padding-right: 40px;
+  font-size: 32px;
+  font-weight: 400;
+  line-height: 40px;
+}
+
+.feature-contents {
+  flex: 3;
+  padding-top: 6px;
+  font-size: 20px;
+  line-height: 30px;
+}

src/components/Info/Info.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import "./Info.css";
+
+type InfoProps = { id: string, role?: string };
+
+const Info: React.FC<InfoProps> = ({ id, role, children }) => {
+  return <section id={id} role={role} className="info">{children}</section>;
+};
+
+export default Info;

src/components/index.ts

@@ -1,8 +1,11 @@
 export { default as App } from "./App/App";
-export { default as Header } from "./Header/Header";
+export { default as NavBar } from "./NavBar/NavBar";
-export { default as IconGrid } from "./IconGrid/IconGrid";
+export { default as Panorama } from "./Panorama/Panorama";
-export { default as IconGridUV } from "./IconGrid/IconGridUV";
+export { default as Info } from "./Info/Info";
 export { default as Toolbar } from "./Toolbar/Toolbar";
+export { default as IconGrid } from "./IconGrid/IconGrid";
+export { default as IconGridStatic } from "./IconGrid/IconGridStatic";
+export { default as IconGridUV } from "./IconGrid/IconGridUV";
 export { default as ColorInput } from "./ColorInput/ColorInput";
 export { default as SearchInput } from "./SearchInput/SearchInput";
 export { default as SizeInput } from "./SizeInput/SizeInput";