Merge pull request #733 from zackproser/codex/improve-navigation-and-products-page

Simplify nav and refine products animation

Author: zackproser

src/app/products/products-client.tsx

@@ -45,17 +45,19 @@ export default function ProductsPageClient({ products }: { products: ProductCont
       padding: 24,
       fontFamily: 'monospace',
       backgroundColor: 'rgba(20, 20, 30, 0.95)',
-      textColor: '#38a169', // Darker green for better readability
       cursorColor: '#38a169',
       glowColor: 'rgba(56, 161, 105, 0.4)',
-      borderRadius: 8
+      borderRadius: 8,
+      textColors: ['#38a169', '#0ea5e9', '#facc15'],
     }
 
     // Value proposition statements that will be typed into the terminal
     const valuePropStrings = [
       'git checkout a new skill',
       'git push yourself',
-      'git paid'
+      'git commit to greatness',
+      'git merge knowledge',
+      'git rebase your career',
     ]
 
     // Terminal class
@@ -187,7 +189,6 @@ export default function ProductsPageClient({ products }: { products: ProductCont
         ctx.fillText('premium-dev-tools ~ zsh', this.x + this.width / 2, this.y + 20)
 
         // Draw text content
-        ctx.fillStyle = terminalConfig.textColor
         ctx.textAlign = 'left'
 
         // Calculate maximum width to avoid text cutoff
@@ -216,22 +217,24 @@ export default function ProductsPageClient({ products }: { products: ProductCont
 
         // Draw previous lines with flash effects
         this.text.forEach((line, i) => {
+          const lineColor = terminalConfig.textColors[i % terminalConfig.textColors.length]
           // Check if this line has a flash effect
           const flashEffect = this.flashEffects?.find(e => e.lineIndex === i)
 
           if (flashEffect) {
             // Apply scaling effect
             const fontSize = terminalConfig.charSize * flashEffect.scale
             ctx.font = `bold ${fontSize}px ${terminalConfig.fontFamily}`
-            
+
             // Add a more pronounced glow for flash effect
-            ctx.shadowColor = terminalConfig.textColor
+            ctx.shadowColor = lineColor
             ctx.shadowBlur = 10
             // Make text brighter during the effect
             ctx.fillStyle = '#4ade80'
           } else {
             ctx.font = `bold ${terminalConfig.charSize}px ${terminalConfig.fontFamily}`
             ctx.shadowBlur = 0
+            ctx.fillStyle = lineColor
           }
 
           ctx.fillText(
@@ -248,6 +251,7 @@ export default function ProductsPageClient({ products }: { products: ProductCont
 
         // Draw current line with cursor
         const currentLineY = this.y + terminalConfig.padding + 40 + this.text.length * terminalConfig.charSize
+        ctx.fillStyle = terminalConfig.textColors[this.text.length % terminalConfig.textColors.length]
         ctx.fillText(this.currentLine, this.x + terminalConfig.padding, currentLineY, maxWidth)
 
         // Draw cursor

src/app/tutorials/page.tsx

@@ -5,6 +5,7 @@ import { ContentCard } from '@/components/ContentCard'
 import { Container } from '@/components/Container'
 import { createMetadata } from '@/utils/createMetadata'
 import { Content } from '@/types'
+import Link from 'next/link'
 
 // Base metadata using createMetadata
 const baseMetadata = createMetadata({
@@ -54,6 +55,10 @@ export default async function TutorialsPage() {
           <p className="mt-6 text-base text-gray-700 dark:text-gray-300">
             Here you&apos;ll find in-depth tutorials and learning resources covering various technologies and concepts in software engineering and AI.
           </p>
+          <p className="mt-4 text-sm text-gray-600 dark:text-gray-400">
+            Looking for complete, project-based guides? Browse our{' '}
+            <Link href="/products" className="underline font-medium text-blue-700 dark:text-blue-300">digital products</Link>.
+          </p>
         </header>
         <div className="mt-16 sm:mt-20">
           {tutorials.length > 0 && (

src/components/ConsultancyNav.jsx

@@ -9,28 +9,37 @@ import { AuthStatus } from './AuthStatus'
 
 // Export navigation items to be used in components
 export const navItems = [
-  { name: 'Services', dropdown: [
-    { name: 'Custom Gen AI Solutions', href: '/services' },
-    { name: '90-Day AI Team Transformation', href: '/ai-training' }
-  ]},
-  { name: 'Work', dropdown: [
-    { name: 'Products', href: '/products' },
-    { name: 'Case Studies', href: '/projects' },
-    { name: 'Demos', href: '/demos' },
-    { name: 'Collections', href: '/collections' }
-  ]},
-  { name: 'Insights', dropdown: [
-    { name: 'Blog', href: '/blog' },
-    { name: 'Research', href: '/publications' },
-    { name: 'Tutorials', href: '/tutorials' },
-    { name: 'Videos', href: '/videos' },
-    { name: 'Vector Databases', href: '/vectordatabases' },
-    { name: 'Comparisons', href: '/comparisons' },
-    { name: 'Chat', href: '/chat' }
-  ]},
+  {
+    name: 'Services',
+    dropdown: [
+      { name: 'Custom Gen AI Solutions', href: '/services' },
+      { name: '90-Day AI Team Transformation', href: '/ai-training' },
+    ],
+  },
+  {
+    name: 'Products',
+    dropdown: [
+      { name: 'All Products', href: '/products' },
+      { name: 'Tutorials', href: '/tutorials' },
+      { name: 'Case Studies', href: '/projects' },
+      { name: 'Demos', href: '/demos' },
+      { name: 'Collections', href: '/collections' },
+    ],
+  },
+  {
+    name: 'Resources',
+    dropdown: [
+      { name: 'Blog', href: '/blog' },
+      { name: 'Research', href: '/publications' },
+      { name: 'Videos', href: '/videos' },
+      { name: 'Vector Databases', href: '/vectordatabases' },
+      { name: 'Comparisons', href: '/comparisons' },
+      { name: 'Chat', href: '/chat' },
+    ],
+  },
   { name: 'About', href: '/about' },
   { name: 'Testimonials', href: '/testimonials' },
-  { name: 'Contact', href: '/contact' }
+  { name: 'Contact', href: '/contact' },
 ];
 
 function DropdownMenu({ label, items }) {