diff --git a/pages/index.tsx b/pages/index.tsx
index 5ce9fe57c..474f5bc50 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,10 +1,13 @@
-import Button from "../ui/Button";
+import { Featurebar, Button } from "ui";
export default function Home() {
return (
-
Hello World
+
diff --git a/ui/Featurebar/Featurebar.module.css b/ui/Featurebar/Featurebar.module.css
new file mode 100644
index 000000000..a51eaa7bb
--- /dev/null
+++ b/ui/Featurebar/Featurebar.module.css
@@ -0,0 +1,11 @@
+.root {
+ @apply py-4 bg-black text-white flex justify-center;
+}
+
+.title {
+ @apply text-indigo-500 font-medium;
+}
+
+.description {
+ @apply ml-2 text-white font-medium;
+}
diff --git a/ui/Featurebar/Featurebar.tsx b/ui/Featurebar/Featurebar.tsx
new file mode 100644
index 000000000..5af3ebde7
--- /dev/null
+++ b/ui/Featurebar/Featurebar.tsx
@@ -0,0 +1,25 @@
+import cn from "classnames";
+import { FunctionComponent } from "react";
+import s from "./Featurebar.module.css";
+
+interface Props {
+ className?: string;
+ title: string;
+ description: string;
+}
+
+const Featurebar: FunctionComponent = ({
+ title,
+ description,
+ className,
+}) => {
+ const rootClassName = cn(s.root, className);
+ return (
+
+ {title}
+ {description}
+
+ );
+};
+
+export default Featurebar;
diff --git a/ui/Featurebar/index.ts b/ui/Featurebar/index.ts
new file mode 100644
index 000000000..158415285
--- /dev/null
+++ b/ui/Featurebar/index.ts
@@ -0,0 +1 @@
+export { default } from "./Featurebar";
diff --git a/ui/Logo/Logo.tsx b/ui/Logo/Logo.tsx
new file mode 100644
index 000000000..31e2856bd
--- /dev/null
+++ b/ui/Logo/Logo.tsx
@@ -0,0 +1,40 @@
+const Logo = () => (
+
+);
+
+export default Logo;
diff --git a/ui/Logo/index.ts b/ui/Logo/index.ts
new file mode 100644
index 000000000..f252704a4
--- /dev/null
+++ b/ui/Logo/index.ts
@@ -0,0 +1 @@
+export { default } from "./Logo";
diff --git a/ui/Navbar/Navbar.tsx b/ui/Navbar/Navbar.tsx
new file mode 100644
index 000000000..54397b238
--- /dev/null
+++ b/ui/Navbar/Navbar.tsx
@@ -0,0 +1,15 @@
+import cn from "classnames";
+import { FunctionComponent } from "react";
+import s from "./Navbar.module.css";
+
+interface Props {
+ className?: string;
+ children?: any;
+}
+
+const Navbar: FunctionComponent = ({ children, className }) => {
+ const rootClassName = cn(s.root, className);
+ return {children}
;
+};
+
+export default Navbar;
diff --git a/ui/Navbar/index.ts b/ui/Navbar/index.ts
new file mode 100644
index 000000000..8d95d6656
--- /dev/null
+++ b/ui/Navbar/index.ts
@@ -0,0 +1 @@
+export { default } from "./Navbar";
diff --git a/ui/_BLANK/Featurebar.tsx b/ui/_BLANK/Featurebar.tsx
new file mode 100644
index 000000000..3f1f9cd27
--- /dev/null
+++ b/ui/_BLANK/Featurebar.tsx
@@ -0,0 +1,15 @@
+import cn from "classnames";
+import { FunctionComponent } from "react";
+import s from "./Featurebar.module.css";
+
+interface Props {
+ className?: string;
+ children?: any;
+}
+
+const Featurebar: FunctionComponent = ({ children, className }) => {
+ const rootClassName = cn(s.root, className);
+ return {children}
;
+};
+
+export default Featurebar;
diff --git a/ui/_BLANK/index.ts b/ui/_BLANK/index.ts
new file mode 100644
index 000000000..158415285
--- /dev/null
+++ b/ui/_BLANK/index.ts
@@ -0,0 +1 @@
+export { default } from "./Featurebar";
diff --git a/ui/index.ts b/ui/index.ts
new file mode 100644
index 000000000..47bc8169f
--- /dev/null
+++ b/ui/index.ts
@@ -0,0 +1,2 @@
+export { default as Button } from "./Button";
+export { default as Featurebar } from "./Featurebar";