Design

docusaurus.config.js

@@ -89,8 +89,8 @@ module.exports = {
         },
         {
           href: 'https://github.com/cardano-foundation/developer-portal',
-          label: 'GitHub',
           position: 'right',
+          className: 'header-github-link',
         },
 
       ],
@@ -101,6 +101,14 @@ module.exports = {
         {
           title: 'Docs',
           items: [
+            {
+              label: 'Adrestia - SDKs and APIs',
+              to: 'docs/adrestia-SDKs-and-APIs/adrestia-cardano-node',
+            },
+            {
+              label: 'Resources',
+              to: 'docs/resources/developer-portal-updates',
+            },
             {
               label: 'Style Guide',
               to: 'docs/',
@@ -144,8 +152,12 @@ module.exports = {
               href: 'https://www.cardano.org',
             },
             {
-              label: 'Developer Spotlight',
-              to: 'blog',
+              label: 'Cardano Documentation',
+              href: 'https://docs.cardano.org/en/latest/',
+            },
+            {
+              label: 'Testnets',
+              to: 'https://developers.cardano.org/en/testnets/cardano/overview/',
             },
           ],
         },

src/css/custom.css

@@ -35,17 +35,21 @@ html[data-theme="dark"] {
   padding: 0 var(--ifm-pre-padding);
 }
 
+@keyframes fadeInUp {
+   0% { opacity: 0; transform: translateY(1.5rem); }
+ }
+
 .card {
-   padding: 1rem;
+   padding: 0rem;
    margin-top: 0rem;
    animation: fadeInUp 400ms backwards;
    animation-delay: 150ms;
    transition-property: all;
    transition-duration: 200ms;
    box-shadow: 0 8px 28px 4px rgba(86,91,115,0.15);
+   height: calc(100% - 30px);
   }
-
-
+
 .card a {
    text-decoration: none;
 }
@@ -57,3 +61,21 @@ html[data-theme="dark"] {
 .footer--dark {
   background-color: #232323 !important;
 }
+
+.header-github-link:before {
+  content: '';
+  width: 24px;
+  height: 24px;
+  display: flex;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
+    no-repeat;
+}
+
+html[data-theme='dark'] .header-github-link:before {
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
+    no-repeat;
+}
+
+.header-github-link:hover {
+  opacity: 0.6;
+}

src/pages/index.js

@@ -9,7 +9,7 @@ import styles from './styles.module.css';
 const features = [
   {
     title: 'Learn Cardano',
-    imageUrl: 'img/cardano-black.png',
+    imageUrl: 'img/card-learn-cardano.svg',
     targetUrl: 'docs/learn-cardano/token-locking',
     description: (
       <>
@@ -19,7 +19,7 @@ const features = [
   },
   {
     title: 'Getting Started',
-    imageUrl: 'img/cardano-black.png',
+    imageUrl: 'img/card-getting-started.svg',
     targetUrl: 'docs/getting-started/cardano-node',
     description: (
       <>
@@ -29,18 +29,18 @@ const features = [
   },
   {
     title: 'Smart Contracts and Building DApps',
-    imageUrl: 'img/cardano-black.png',
+    imageUrl: 'img/card-smart-contracts.svg',
     targetUrl: 'docs/smart-contracts-and-building-dapps/plutus/plutus-overview',
     description: (
       <>
         Creating smart contracts and decentralized applications with Cardano.
       </>
     ),
   },
-
+/*
   {
     title: 'Adrestia - SDKs and APIs',
-    imageUrl: 'img/cardano-black.png',
+    //imageUrl: 'img/cardano-black.png',
     targetUrl: 'docs/adrestia-SDKs-and-APIs/adrestia-cardano-node',
     description: (
       <>
@@ -50,25 +50,30 @@ const features = [
   },
   {
     title: 'Resources',
-    imageUrl: 'img/cardano-black.png',
+    //imageUrl: 'img/cardano-black.png',
     targetUrl: 'docs/resources/developer-portal-updates',
     description: (
       <>
       Community, research paper, news, events, funding.
       </>
     ),
-  },
+  },*/
 ];
 
 function Feature({imageUrl, title, description, targetUrl}) {
   const imgUrl = useBaseUrl(imageUrl); // not used right now
   const trgUrl = useBaseUrl(targetUrl);
   return (
     <div className={clsx('col col--4', styles.feature)}>
-      {imgUrl && (
+      {targetUrl && (
         <Link className="navbar__link" to={trgUrl}>
         <div className="card">
           <div className="card__header">
+          {imgUrl && (
+            <div className="text--center">
+               <img className={styles.featureImage} src={imgUrl} alt={title}/>
+            </div>
+          )}
             <h3>{title}</h3>
           </div>
           <div className="card__body">
@@ -96,11 +101,11 @@ function Home() {
           <div className={styles.buttons}>
             <Link
               className={clsx(
-                'button button--outline button--secondary button--lg',
+                'button button--outline button--warn button--lg',
                 styles.getStarted,
               )}
               to={useBaseUrl('docs/')}>
-              Get Started
+              Sign Up
             </Link>
           </div>
         </div>