accessibility resource page

devandapaige · devandapaige · commit d0222a763f44 · 2025-09-27T16:09:19.000-04:00
diff --git a/README.md b/README.md
@@ -229,6 +229,7 @@ const result = await tryCatch(
 - **Deep forest green:** #2E3D2A (`--brand-green-dark`)
 - **Rich purple:** #442B48 (`--brand-purple-dark`)
 - **Vibrant green accent:** #32d24d (`--brand-green-accent`)
+- **Hyperlink green:** #156624 (`--brand-green-hyperlink`) - High contrast green for links
 - **Soft cream:** #F4f1de (`--brand-cream`)
 - **Light purple accent:** #D8B9F7 (`--brand-purple-light`)
 - **Bright Blue:** #00A6FB (`--brand-blue`)
@@ -245,6 +246,7 @@ Common color applications:
 - Text on dark: `text-white`, `text-white/90`, `text-brand-cream`
 - Text on light: `text-brand-purple-dark`, `text-brand-green-dark`
 - Accents: `text-brand-green-accent`, `text-brand-purple-light`, `text-brand-blue`
+- Hyperlinks: `text-brand-green-hyperlink` (high contrast green for links)
 - Backgrounds: Dark gradient combinations of `brand-green-dark` and `brand-purple-dark`
 - Overlays: `bg-white/5`, `bg-white/10` with `backdrop-blur-sm`
 
@@ -253,6 +255,7 @@ Common color applications:
 --brand-green-dark: #2E3D2A;    /* Deep forest green */
 --brand-purple-dark: #442B48;   /* Rich purple */
 --brand-green-accent: #32d24d;  /* Vibrant green accent */
+--brand-green-hyperlink: #156624; /* High contrast green for links */
 --brand-cream: #F4f1de;         /* Soft cream */
 --brand-purple-light: #D8B9F7;  /* Light purple accent */
 --brand-blue: #00A6FB;          /* Bright Blue */
diff --git a/src/app/accessibility/page.tsx b/src/app/accessibility/page.tsx
diff --git a/src/app/back-to-basics/page.tsx b/src/app/back-to-basics/page.tsx
@@ -3,15 +3,6 @@ import Link from 'next/link'
 import { ReactNode } from 'react'
 import NewsletterSection from '../components/home/NewsletterSection'
 
-// Define types for our content
-interface NewsletterWeek {
-  title: string;
-  description: string;
-  keyPoints: string[];
-  url: string;
-  weekNumber: number;
-}
-
 // Enhanced metadata for better SEO
 export const metadata: Metadata = {
   title: 'Back to Basics: Digital Organization & AI-Ready Workflows - The Pythoness Programmer',
@@ -29,58 +20,6 @@ export const metadata: Metadata = {
   },
 }
 
-// Content data
-const newsletterWeeks: NewsletterWeek[] = [
-  {
-    weekNumber: 1,
-    title: 'From Digital Chaos to Creative Flow: Why Your Folders Matter',
-    description: 'How your digital filing system affects AI effectiveness and creative workflow, plus the 3-Folder Rule that changed everything.',
-    keyPoints: [
-      'The AI-Organization Connection: Why AI tools need well-organized inputs',
-      'The 3-Folder Rule: Active Projects, Reference Materials, and Archive',
-      'Obsidian for interconnected note-taking and project organization',
-      'The Wooden Snake\'s "observe before you judge" principle for digital patterns',
-    ],
-    url: 'https://newsletter.pythonessprogrammer.com/p/from-digital-chaos-to-creative-flow-why-your-folders-matter',
-  },
-  {
-    weekNumber: 2,
-    title: 'The Creative Workflow Revolution: How Organization Becomes Your Creative Superpower',
-    description: 'Transform your digital organization from a chore into a creative advantage that amplifies your ideas and energy.',
-    keyPoints: [
-      'Workflow systems that support your creative process',
-      'Building systems that adapt to your energy levels',
-      'Creating sustainable creative practices',
-      'The connection between organization and creative flow',
-    ],
-    url: 'https://newsletter.pythonessprogrammer.com/p/the-creative-workflow-revolution-how-organization-becomes-your-creative-superpower',
-  },
-  {
-    weekNumber: 3,
-    title: 'Data Flow: From Chaos to Conscious',
-    description: 'Understanding how data moves through your creative work and building systems that make information work for you.',
-    keyPoints: [
-      'Understanding data flow in your creative work',
-      'Building information systems that serve creativity',
-      'The Wooden Snake\'s wisdom applied to data organization',
-      'Creating conscious data practices',
-    ],
-    url: 'https://newsletter.pythonessprogrammer.com/p/data-flow-from-chaos-to-conscious',
-  },
-  {
-    weekNumber: 4,
-    title: 'Basic Automation That Serves Your Creativity: From Data Flow to AI Agents',
-    description: 'Learn to build automation systems that enhance your creative process instead of overwhelming it.',
-    keyPoints: [
-      'Basic automation that serves your creativity',
-      'From data flow to AI agents',
-      'Building automation that respects your brain patterns',
-      'Creating sustainable tech habits',
-    ],
-    url: 'https://newsletter.pythonessprogrammer.com/p/basic-automation-that-serves-your-creativity-from-data-flow-to-ai-agents',
-  },
-];
-
 export default function BackToBasicsPage(): ReactNode {
   return (
     <main className="min-h-screen pt-20 bg-gradient-to-br from-brand-green-dark via-brand-purple-dark to-brand-green-dark">
@@ -167,7 +106,7 @@ export default function BackToBasicsPage(): ReactNode {
                 href="https://newsletter.pythonessprogrammer.com/p/lunar-new-year-2025" 
                 target="_blank" 
                 rel="noopener noreferrer"
-                className="text-brand-green-accent hover:text-brand-green-accent/80 underline"
+                className="text-brand-green-hyperlink hover:text-brand-green-hyperlink/80 underline"
               >
                 Lunar New Year edition
               </Link>
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -10,6 +10,7 @@
   --brand-light-purple: #d8b9f7;
   --brand-purple: #442b48;
   --brand-blue: #00a6fb;
+  --brand-hyperlink-green: #156624;
 }
 
 html {
@@ -43,6 +44,11 @@ body {
     text-wrap: balance;
   }
 
+  /* Brand color utilities */
+  .text-brand-hyperlink {
+    color: var(--brand-hyperlink-green);
+  }
+
   /* Animation utilities */
   .animate-fade-in-up {
     animation: fadeInUp 0.8s ease-out forwards;
diff --git a/src/app/resources/page.tsx b/src/app/resources/page.tsx
@@ -279,6 +279,47 @@ export default function ResourcesPage() {
                 </Link>
               </div>
 
+              {/* Digital Accessibility Legal Guide */}
+              <div className="bg-white/95 border-2 border-brand-purple-accent rounded-3xl p-8 shadow-2xl">
+                <div className="flex items-center mb-6">
+                  <div className="w-12 h-12 bg-brand-purple-accent/20 rounded-full flex items-center justify-center mr-4">
+                    <span className="text-2xl">⚖️</span>
+                  </div>
+                  <div>
+                    <h3 className="text-2xl font-display text-brand-purple-dark mb-1">Digital Accessibility Legal Guide</h3>
+                    <p className="text-brand-purple-dark/70 text-sm">Starting Point for Business Owners</p>
+                  </div>
+                </div>
+                <p className="text-brand-purple-dark mb-6">
+                  Essential starting guide to digital accessibility laws, compliance requirements, and practical implementation 
+                  for business owners. Legal framework, risk management, and actionable first steps.
+                </p>
+                <div className="space-y-3 mb-6">
+                  <div className="flex items-center text-brand-purple-dark text-sm">
+                    <span className="w-2 h-2 bg-brand-purple-accent rounded-full mr-2"></span>
+                    Four Simple Tests You Can Do Right Now
+                  </div>
+                  <div className="flex items-center text-brand-purple-dark text-sm">
+                    <span className="w-2 h-2 bg-brand-purple-accent rounded-full mr-2"></span>
+                    90-Day Implementation Plan
+                  </div>
+                  <div className="flex items-center text-brand-purple-dark text-sm">
+                    <span className="w-2 h-2 bg-brand-purple-accent rounded-full mr-2"></span>
+                    Legal Framework & Compliance Requirements
+                  </div>
+                  <div className="flex items-center text-brand-purple-dark text-sm">
+                    <span className="w-2 h-2 bg-brand-purple-accent rounded-full mr-2"></span>
+                    Free Testing Tools & Resources
+                  </div>
+                </div>
+                <Link
+                  href="/accessibility"
+                  className="block bg-brand-purple-accent text-white text-center px-4 py-3 rounded-lg hover:bg-opacity-90 transition-colors font-semibold"
+                >
+                  Explore Accessibility Guide
+                </Link>
+              </div>
+
               {/* Back to Basics */}
               <div className="bg-white/95 border-2 border-brand-green-accent rounded-3xl p-8 shadow-2xl">
                 <div className="flex items-center mb-6">
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -59,8 +59,9 @@ export default function Footer() {
           {/* Free Resources */}
           <FooterSection title="Free Resources">
             <ul className="space-y-1" role="list" aria-label="Free resources">
-              <li><Link href="/network" className={footerLinkClass}>Pythoness Network</Link></li>
+              <li><Link href="/accessibility" className={footerLinkClass}>Accessibility Legal Guide</Link></li>
               <li><Link href="/ai-mythbusting" className={footerLinkClass}>AI Myth-Busting</Link></li>
+              <li><Link href="/back-to-basics" className={footerLinkClass}>Back to Basics</Link></li>
               <li><Link href="/sourdough" className={footerLinkClass}>Sourdough Corner</Link></li>
               <li><Link href="/digital-spring-cleaning" className={footerLinkClass}>Digital Spring Cleaning</Link></li>
               <li><Link href="/mindful-automation" className={footerLinkClass}>Mindful Automation</Link></li>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -5,11 +5,16 @@ import Link from 'next/link'
 
 export default function Header() {
   const [isMenuOpen, setIsMenuOpen] = useState(false)
+  const [isResourcesOpen, setIsResourcesOpen] = useState(false)
 
   const toggleMenu = () => {
     setIsMenuOpen(!isMenuOpen)
   }
 
+  const toggleResources = () => {
+    setIsResourcesOpen(!isResourcesOpen)
+  }
+
   return (
     <>
       <header 
@@ -44,18 +49,77 @@ export default function Header() {
             >
               Services
             </Link>
-            <Link 
-              href="/resources" 
-              className="text-white hover:text-brand-green-accent transition-colors focus:outline-none focus:ring-2 focus:ring-brand-green-accent focus:ring-offset-2 rounded-lg px-2 py-1"
-            >
-              Resources
-            </Link>
-            <Link 
-              href="/network" 
-              className="text-white hover:text-brand-green-accent transition-colors focus:outline-none focus:ring-2 focus:ring-brand-green-accent focus:ring-offset-2 rounded-lg px-2 py-1"
-            >
-              Pythoness Network
-            </Link>
+            <div className="relative">
+              <button
+                onClick={toggleResources}
+                className="text-white hover:text-brand-green-accent transition-colors focus:outline-none focus:ring-2 focus:ring-brand-green-accent focus:ring-offset-2 rounded-lg px-2 py-1 flex items-center"
+                aria-expanded={isResourcesOpen}
+                aria-haspopup="true"
+              >
+                Resources
+                <svg 
+                  className={`ml-1 h-4 w-4 transition-transform ${isResourcesOpen ? 'rotate-180' : ''}`}
+                  fill="none" 
+                  stroke="currentColor" 
+                  viewBox="0 0 24 24"
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                </svg>
+              </button>
+              {isResourcesOpen && (
+                <div className="absolute top-full left-0 mt-2 w-64 bg-white rounded-lg shadow-lg border border-brand-green-accent/20 py-2 z-50">
+                  <Link 
+                    href="/resources" 
+                    className="block px-4 py-2 text-brand-green-hyperlink hover:text-brand-green-accent hover:bg-brand-green-accent/10 transition-colors"
+                    onClick={() => setIsResourcesOpen(false)}
+                  >
+                    All Resources
+                  </Link>
+                  <Link 
+                    href="/digital-spring-cleaning" 
+                    className="block px-4 py-2 text-brand-green-hyperlink hover:text-brand-green-accent hover:bg-brand-green-accent/10 transition-colors"
+                    onClick={() => setIsResourcesOpen(false)}
+                  >
+                    Digital Spring Cleaning
+                  </Link>
+                  <Link 
+                    href="/mindful-automation" 
+                    className="block px-4 py-2 text-brand-green-hyperlink hover:text-brand-green-accent hover:bg-brand-green-accent/10 transition-colors"
+                    onClick={() => setIsResourcesOpen(false)}
+                  >
+                    Mindful Automation
+                  </Link>
+                  <Link 
+                    href="/accessibility" 
+                    className="block px-4 py-2 text-brand-green-hyperlink hover:text-brand-green-accent hover:bg-brand-green-accent/10 transition-colors"
+                    onClick={() => setIsResourcesOpen(false)}
+                  >
+                    Accessibility Legal Guide
+                  </Link>
+                  <Link 
+                    href="/back-to-basics" 
+                    className="block px-4 py-2 text-brand-green-hyperlink hover:text-brand-green-accent hover:bg-brand-green-accent/10 transition-colors"
+                    onClick={() => setIsResourcesOpen(false)}
+                  >
+                    Back to Basics
+                  </Link>
+                  <Link 
+                    href="/ai-mythbusting" 
+                    className="block px-4 py-2 text-brand-green-hyperlink hover:text-brand-green-accent hover:bg-brand-green-accent/10 transition-colors"
+                    onClick={() => setIsResourcesOpen(false)}
+                  >
+                    AI Myth-Busting
+                  </Link>
+                  <Link 
+                    href="/vibe-coding-cheatsheet" 
+                    className="block px-4 py-2 text-brand-green-hyperlink hover:text-brand-green-accent hover:bg-brand-green-accent/10 transition-colors"
+                    onClick={() => setIsResourcesOpen(false)}
+                  >
+                    Vibe Coding Cheatsheet
+                  </Link>
+                </div>
+              )}
+            </div>
             <Link 
               href="/blog" 
               className="text-white hover:text-brand-green-accent transition-colors focus:outline-none focus:ring-2 focus:ring-brand-green-accent focus:ring-offset-2 rounded-lg px-2 py-1"
@@ -134,20 +198,60 @@ export default function Header() {
           >
             Services
           </Link>
-          <Link 
-            href="/resources" 
-            className="text-white hover:text-brand-green-accent transition-colors focus:outline-none focus:ring-2 focus:ring-brand-green-accent focus:ring-offset-2 rounded-lg px-2 py-1"
-            onClick={() => setIsMenuOpen(false)}
-          >
-            Resources
-          </Link>
-          <Link 
-            href="/network" 
-            className="text-white hover:text-brand-green-accent transition-colors focus:outline-none focus:ring-2 focus:ring-brand-green-accent focus:ring-offset-2 rounded-lg px-2 py-1"
-            onClick={() => setIsMenuOpen(false)}
-          >
-            Pythoness Network
-          </Link>
+          <div className="space-y-2">
+            <div className="text-white font-medium px-2 py-1">Resources</div>
+            <div className="ml-4 space-y-2">
+              <Link 
+                href="/resources" 
+                className="block text-white/80 hover:text-brand-green-accent transition-colors focus:outline-none focus:ring-2 focus:ring-brand-green-accent focus:ring-offset-2 rounded-lg px-2 py-1"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                All Resources
+              </Link>
+              <Link 
+                href="/digital-spring-cleaning" 
+                className="block text-white/80 hover:text-brand-green-accent transition-colors focus:outline-none focus:ring-2 focus:ring-brand-green-accent focus:ring-offset-2 rounded-lg px-2 py-1"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                Digital Spring Cleaning
+              </Link>
+              <Link 
+                href="/mindful-automation" 
+                className="block text-white/80 hover:text-brand-green-accent transition-colors focus:outline-none focus:ring-2 focus:ring-brand-green-accent focus:ring-offset-2 rounded-lg px-2 py-1"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                Mindful Automation
+              </Link>
+              <Link 
+                href="/accessibility" 
+                className="block text-white/80 hover:text-brand-green-accent transition-colors focus:outline-none focus:ring-2 focus:ring-brand-green-accent focus:ring-offset-2 rounded-lg px-2 py-1"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                Accessibility Legal Guide
+              </Link>
+              <Link 
+                href="/back-to-basics" 
+                className="block text-white/80 hover:text-brand-green-accent transition-colors focus:outline-none focus:ring-2 focus:ring-brand-green-accent focus:ring-offset-2 rounded-lg px-2 py-1"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                Back to Basics
+              </Link>
+              <Link 
+                href="/ai-mythbusting" 
+                className="block text-white/80 hover:text-brand-green-accent transition-colors focus:outline-none focus:ring-2 focus:ring-brand-green-accent focus:ring-offset-2 rounded-lg px-2 py-1"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                AI Myth-Busting
+              </Link>
+              <Link 
+                href="/vibe-coding-cheatsheet" 
+                className="block text-white/80 hover:text-brand-green-accent transition-colors focus:outline-none focus:ring-2 focus:ring-brand-green-accent focus:ring-offset-2 rounded-lg px-2 py-1"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                Vibe Coding Cheatsheet
+              </Link>
+            </div>
+          </div>
           <Link 
             href="/blog" 
             className="text-white hover:text-brand-green-accent transition-colors focus:outline-none focus:ring-2 focus:ring-brand-green-accent focus:ring-offset-2 rounded-lg px-2 py-1"
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -13,6 +13,7 @@ const config: Config = {
           green: {
             dark: '#2e3d2a',
             accent: '#32d24d',
+            hyperlink: '#156624',
           },
           cream: '#f4f1d3',
           purple: {
