cratebind · Junghyun2006 · Nov 10, 2022 · Nov 11, 2022 · Nov 11, 2022 · Nov 11, 2022
diff --git a/docs/components/CopyButton.tsx b/docs/components/CopyButton.tsx
@@ -76,7 +76,7 @@ const Copy = ({
       name={label}
       disabled={copied}
       className="code-copy-button"
-      zIndex={500}
+      zIndex={10}
       onClick={async () => {
         await copyToClipboard(trim ? content.trim() : content);
         setCopied(true);

diff --git a/docs/components/homepage-components/Layout.tsx b/docs/components/homepage-components/Layout.tsx
@@ -6,7 +6,7 @@ import '@docsearch/css';
 
 export default function Layout({ children }) {
   return (
-    <Box bg="#fafafa" minHeight="100vh">
+    <Box bg="#fafafa" minHeight="100vh" className="main-layout">
       <Nav />
       {children}
       <Footer />

diff --git a/docs/components/homepage-components/Nav.tsx b/docs/components/homepage-components/Nav.tsx
@@ -23,7 +23,7 @@ export default function Nav() {
   const { pathname } = useRouter();
 
   return (
-    <nav className="py-6 pt-8 px-4 sm:px-16 sm:pt-6 mx-auto flex space-between w-full">
+    <nav className="pb-4 pt-16 sm:py-8 lg:py-10 pt-8 px-6 sm:px-4 sm:px-10 lg:px-20 mx-auto flex space-between w-full">
       <DocSearch />
       <Flex className="items-center" minWidth="max-content">
         <div className="sm:hidden flex">
@@ -59,7 +59,7 @@ export default function Nav() {
           <Flex
             borderRight="1px solid #DEDEE0"
             height="max-content"
-            mr="4"
+            mr="8"
             py="2"
             minWidth="max-content"
           >

diff --git a/docs/global.css b/docs/global.css
@@ -10,11 +10,111 @@ h3 code {
   font-size: inherit;
 }
 
+code {
+  background-color: transparent;
+  color: #130F1C;
+}
+
+
 content pre {
   position: relative;
   background-color: rgba(101, 31, 255, 0.05);
 }
 
+.token {
+  color: #000000 !important;
+  /* font-family: 'Roboto Mono'; */
+  font-weight: normal !important;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 32px;
+  letter-spacing: -0.02em;
+}
+
+.comment {
+  color: #8E82A9 !important;
+}
+
+
+pre code .token-line .function {
+  color: #651FFF !important;
+}
+
+pre code .token-line .function-variable {
+  color: #000000 !important;
+}
+
+
+main p {
+ font-family: 'Roboto Condensed';
+ color: #56447F;
+ font-weight: 400;
+}
+
+main li {
+  list-style: none;
+}
+
+main ul {
+  margin-left: 0px;
+}
+
+main a {
+  color: #651FFF;
+}
+
+main li {
+  font-family: 'Roboto Condensed';
+}
+
+main h1 {
+  font-family: 'Roboto';
+  color: #130F1C;
+  font-weight: 500;
+  letter-spacing: -0.02em;
+}
+
+main h2 {
+  font-family: 'Roboto';
+  font-size: 24px;
+  color: #130F1C;
+  font-weight: 500;
+  letter-spacing: -0.02em;
+}
+
+main h3 {
+    font-family: 'Roboto';
+    font-size: 20px;
+    color: #130F1C;
+    font-weight: 500;
+    line-height: 28px;
+    letter-spacing: -0.02em;
+    margin: 32px 0 32px 0;
+}
+
+main ol li {
+  color: #56447F;
+}
+
+
+/* .noblur *{
+  z-index: 200;
+  filter: blur(5px);
+} */
+
+.sidebar-blur {
+  backdrop-filter: blur(5px);
+  background-color: rgba(30, 6, 84, 0.33);
+  width: 25%;
+  height: 100vh;
+  position: absolute;
+  right: 0px;
+  bottom: 0px;
+  z-index: 10;
+  opacity: 1;
+}
+
+
 input[type='color'] {
   width: 40px;
   height: 40px;
@@ -44,6 +144,10 @@ input[type='color']::-webkit-color-swatch {
   height: auto;
 }
 
+.DocSearch-Button-Keys {
+  visibility: hidden;
+}
+
 .DocSearch-Search-Icon {
   color: #bab9bd !important;
 }

diff --git a/docs/pages/about.tsx b/docs/pages/about.tsx
@@ -11,6 +11,8 @@ import {
 } from 'minerva-ui';
 import Layout from '../components/homepage-components/Layout';
 
+import Head from 'next/head';
+
 const MidSection = styled(Box)`
   margin-top: -8rem;
 `;
@@ -76,6 +78,18 @@ const MainText = styled(Text)`
 export default function About() {
   return (
     <Layout>
+      <Head>
+        <title>About - Minerva UI</title>
+        <meta
+          name="description"
+          content="We’re a team of product people passionate about building apps that work seamlessly and look amazing"
+        />
+        <meta
+          name="og:description"
+          content="We’re a team of product people passionate about building apps that work seamlessly and look amazing"
+        />
+        <meta name="og:image" content="../public/minerva_logo_purple.png" />
+      </Head>
       <Flex
         // className="lg:align-items-center"
         flexDirection="column"

diff --git a/docs/pages/homepage.tsx b/docs/pages/homepage.tsx
@@ -1,9 +1,22 @@
 import Layout from '../components/homepage-components/Layout';
 import HomeBody from '../components/homepage-components/HomeBody';
+import Head from 'next/head';
 
 export default function HomePage() {
   return (
     <Layout>
+      <Head>
+        <title>Home - Minerva UI</title>
+        <meta
+          name="description"
+          content="Your new favorite React component library. Professionally designed and built by a team of React developers and product designers—Minerva gives you the components needed to start building your React app stat."
+        />
+        <meta
+          name="og:description"
+          content="Your new favorite React component library. Professionally designed and built by a team of React developers and product designers—Minerva gives you the components needed to start building your React app stat."
+        />
+        <meta name="og:image" content="../public/minerva_logo_purple.png" />
+      </Head>
       <HomeBody />
     </Layout>
   );

diff --git a/docs/theme/arrow-right.tsx b/docs/theme/arrow-right.tsx
@@ -1,14 +1,20 @@
 import React from 'react';
 
-const ArrowRight = ({ height = 24, ...props }) => {
+const ArrowRight = ({ height = 12, ...props }) => {
   return (
-    <svg height={height} viewBox="0 0 24 24" fill="none" {...props}>
+    <svg
+      width="24"
+      height={height}
+      viewBox="0 0 7 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
       <path
-        d="M3 12h18m0 0l-6.146-6M21 12l-6.146 6"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M2.16026 11.5195L0.240234 10.0796L3.30025 5.99941L0.240257 1.91956L2.16023 0.479531L6.30025 5.99936L2.16026 11.5195Z"
+        fill="#8E82A9"
       />
     </svg>
   );

diff --git a/docs/theme/close-icon.tsx b/docs/theme/close-icon.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const CloseIcon = ({ height = 12, ...props }) => {
+  return (
+    <svg height={height} viewBox="0 0 12 12" fill="none" {...props}>
+      <path
+        d="M6.00009 7.6991L9.95156 11.6506L11.6486 9.95352L7.69715 6.00204L11.6486 2.05057L9.95156 0.353516L6.00009 4.30499L2.04862 0.353516L0.351562 2.05057L4.30303 6.00204L0.351562 9.95352L2.04862 11.6506L6.00009 7.6991Z"
+        fill="#130F1C"
+      />
+    </svg>
+  );
+};
+
+export default CloseIcon;
diff --git a/docs/theme/hamburger.tsx b/docs/theme/hamburger.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+const Hamburger = ({ height = 24, ...props }) => {
+  return (
+    <svg height={height} viewBox="0 0 24 24" fill="none" {...props}>
+      <rect x="4" y="5" width="16" height="2" fill="#8E82A9" />
+      <rect x="4" y="11" width="16" height="2" fill="#8E82A9" />
+      <rect x="4" y="17" width="16" height="2" fill="#8E82A9" />
+    </svg>
+  );
+};
+
+export default Hamburger;