Merge pull request #14 from ts-graphviz/fix-hero-component-styles

Update components and fix styles for better consistency and visual appeal

Author: kamiazya

src/components/HeroSection/index.tsx

@@ -26,6 +26,7 @@ const HeroSection: React.FC = () => {
           Bringing the power of Graphviz to the TypeScript/JavaScript ecosystem.
         </Translate>
       </Heading>
+      <div className={styles.background} />
       <img src={useBaseUrl('/img/logo.png')} alt="ts-graphviz" />
       <p>
         <Translate id="HeroSection.headline">
@@ -45,6 +46,8 @@ const HeroSection: React.FC = () => {
         <Link
           className="button button--secondary button--lg"
           to="https://ts-graphviz.github.io/ts-graphviz/"
+          target="_blank"
+          rel="noopener noreferrer"
         >
           <Translate id="HeroSection.api">API Reference 📖</Translate>{' '}
         </Link>

src/components/HeroSection/styles.module.css

@@ -2,13 +2,27 @@
   text-align: center;
   padding: 80px 16px;
   position: relative;
+}
+
+.background {
   background: var(--ifm-color-primary-lighter);
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  padding: 0;
+  margin: 0;
   z-index: -2;
 }
 
-[data-theme="dark"] .hero {
+[data-theme="dark"] .background {
   background: var(--ifm-color-primary-darker);
 }
+.content {
+  z-index: 100;
+}
+
 .particles {
   position: absolute;
   top: 0;