feat: update branding

docs/cloud/introduction.mdx

@@ -14,7 +14,10 @@ import UnifiedApiIcon from '@site/static/img/icons/unified-api.svg';
 import PaymentsIcon from '@site/static/img/icons/payments.svg';
 import { FeatureCard, FeatureCardGrid } from '@site/src/components/FeatureCard';
 
-**Run AI models with complete privacy.** NEAR AI Cloud delivers verifiable private inference through hardware-enforced security, giving you access to leading AI models without compromising your data. Built on Trusted Execution Environments (TEEs) and blockchain verification, your computations remain private, tamper-proof, and under your control.
+[**Run AI models with complete privacy.**](./private-inference.mdx) NEAR AI Cloud delivers verifiable private inference through hardware-enforced security, giving you access to leading AI models without compromising your data. Built on Trusted Execution Environments (TEEs) and blockchain verification, your computations remain private, tamper-proof, and under your control.
+
+![NEAR AI Cloud](../../static/img/cloud.png)
+
 
 ## Why NEAR AI Cloud?
 

docusaurus.config.js

@@ -12,7 +12,7 @@ import { themes as prismThemes } from 'prism-react-renderer';
 const config = {
   title: 'NEAR AI',
   tagline: 'Private. Intelligent. Yours.',
-  favicon: 'img/favicon.ico',
+  favicon: 'img/favicon.svg',
   // Future flags, see https://docusaurus.io/docs/api/docusaurus-config#future
   future: {
     v4: true, // Improve compatibility with the upcoming Docusaurus v4
@@ -76,7 +76,7 @@ const config = {
       navbar: {
         logo: {
           alt: 'NEAR AI Logo',
-          src: 'img/nearAI-logo.jpg',
+          src: 'img/nearAI-logo.svg',
         },
         items: [
           {
@@ -101,6 +101,10 @@ const config = {
                 label: 'Quickstart',
                 to: 'cloud/quickstart',
               },
+              {
+                label: 'Models',
+                to: 'cloud/models',
+              },
               {
                 label: 'Private Inference',
                 to: 'cloud/private-inference',

src/components/HomePageContent/styles.module.css

@@ -8,24 +8,35 @@
   text-align: center;
   position: relative;
   overflow: hidden;
-  background: linear-gradient(180deg, rgba(0, 235, 154, 0.03) 0%, rgba(0, 235, 154, 0.01) 50%, transparent 100%);
+  background: linear-gradient(180deg, rgba(11, 143, 246, 0.15) 0%, rgba(131, 210, 250, 0.05) 50%, #000000 100%);
 }
 
 .heroBanner h1 {
   font-size: 3.5rem;
   font-weight: 600;
   letter-spacing: -0.03em;
   margin-bottom: 1rem;
-  color: var(--ifm-font-color-base) !important;
+  background-color: transparent;
+  background-image: linear-gradient(180deg, #0B8FF6 0%, #83D2FA 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
 }
 
-/* Ensure title is visible in both light and dark modes */
+/* Ensure title is visible in both light and dark modes with gradient */
 .hero--primary h1 {
-  color: var(--ifm-font-color-base) !important;
+  background-color: transparent;
+  background-image: linear-gradient(180deg, #0B8FF6 0%, #83D2FA 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
 }
 
 [data-theme='dark'] .hero--primary h1 {
-  color: var(--ifm-color-content) !important;
+  background-image: linear-gradient(180deg, #83D2FA 0%, #6BC1F0 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
 }
 
 .heroBanner .hero__subtitle {
@@ -139,8 +150,8 @@
   padding: 1rem 1.25rem;
   margin-bottom: 1.5rem;
   border-radius: 12px;
-  border: none;
-  background: none;
+  border: 1px solid rgba(131, 210, 250, 0.15);
+  background: rgba(131, 210, 250, 0.03);
 }
 
 .leadCopy {
@@ -167,7 +178,6 @@
   height: 100%;
   display: flex;
   flex-direction: column;
-  transition: all 0.3s ease;
   border-radius: var(--ifm-card-border-radius);
   border: 1px solid var(--accent-border);
   background: linear-gradient(
@@ -177,22 +187,12 @@
   );
 }
 
-:global(.card:hover) .featureCard {
-  background: linear-gradient(
-    180deg,
-    var(--accent-gradient-hover-top) 0%,
-    var(--accent-gradient-hover-bottom) 100%
-  );
-  border-color: var(--accent-border-hover);
-}
-
- .featureIcon {
+.featureIcon {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-bottom: 0.75rem;
-  color: var(--ifm-color-primary);
-  transition: color 0.3s ease;
+  color: #0B8FF6;
 }
 
 .featureIcon svg {
@@ -202,32 +202,33 @@
 
 :global(.card) {
   height: 100%;
-  transition: all 0.3s ease;
+  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
   text-decoration: none !important;
   color: var(--ifm-font-color-base);
+  background-color: #000000 !important;
 }
 
 :global(.card:hover) {
-  transform: translateY(-4px);
-  box-shadow: 0 4px 12px var(--accent-shadow);
+  transform: translateY(-3px);
+  box-shadow: 0 8px 20px var(--accent-shadow);
   text-decoration: none;
 }
 
-:global(.card:hover) .featureIcon {
-  color: var(--accent-icon-hover);
+:global(.card:hover) .featureCard {
+  border-color: var(--accent-border-hover);
+  background: linear-gradient(
+    180deg,
+    var(--accent-gradient-hover-top) 0%,
+    var(--accent-gradient-hover-bottom) 100%
+  );
 }
 
 .featureCard h3 {
   margin-bottom: 0.5rem;
-  transition: color 0.3s ease;
   text-align: center;
   font-size: 1rem;
 }
 
-:global(.card:hover) .featureCard h3 {
-  color: var(--ifm-color-primary);
-}
-
 .featureCard p {
   flex-grow: 1;
   margin-bottom: 0;