Add direct links for videos in Resource Library

cline_docs/activeContext.md

@@ -0,0 +1,71 @@
+# Active Context
+
+## Current State
+- Initial Memory Bank setup completed
+- Documentation structure established
+- Project analysis completed
+
+## Recent Changes
+1. Created Memory Bank directory structure
+2. Documented project context and architecture
+3. Established technical documentation
+4. Mapped out progress status
+
+## Documentation Created
+1. productContext.md
+   - Project purpose and goals
+   - Problems solved
+   - Core functionality
+
+2. systemPatterns.md
+   - Architecture overview
+   - Technical decisions
+   - Implementation patterns
+
+3. techContext.md
+   - Technology stack details
+   - Development setup
+   - Technical constraints
+
+4. progress.md
+   - Feature implementation status
+   - Testing status
+   - Deployment status
+
+## Next Steps
+1. Immediate Tasks
+   - Verify all documented features
+   - Review codebase for accuracy
+   - Update documentation as needed
+
+2. Short-term Goals
+   - Complete pending tests
+   - Perform accessibility audit
+   - Optimize performance
+
+3. Long-term Goals
+   - Implement continuous documentation updates
+   - Maintain technical debt management
+   - Plan feature enhancements
+
+## Current Focus Areas
+1. Documentation
+   - Ensure accuracy of Memory Bank
+   - Keep technical documentation current
+   - Document any new findings
+
+2. Quality Assurance
+   - Verify feature implementations
+   - Review accessibility compliance
+   - Test performance metrics
+
+3. Maintenance
+   - Monitor system health
+   - Address technical debt
+   - Update dependencies
+
+## Notes
+- Memory Bank established as single source of truth
+- Documentation reflects current project state
+- Regular updates needed to maintain accuracy
+- Team coordination required for verification

cline_docs/productContext.md

@@ -0,0 +1,57 @@
+# Product Context
+
+## Purpose
+DeafGain LLC Website serves as a digital platform dedicated to empowering the Deaf community through innovative communication solutions, training, and accessibility services.
+
+## Problems Solved
+1. Digital Accessibility
+   - Provides ADA-compliant transcripts
+   - Implements universal website design principles
+   - Ensures content accessibility through WebVTT subtitles and transcriptions
+
+2. Communication Barriers
+   - Facilitates board communication protocols
+   - Offers leadership training
+   - Bridges communication gaps between deaf and hearing communities
+
+3. Service Visibility
+   - Showcases comprehensive service offerings
+   - Provides easy access to resources
+   - Demonstrates commitment to professional quality
+
+## Intended Functionality
+
+### Core Features
+1. Interactive Components
+   - USA region map visualization
+   - Custom video player with accessibility features
+   - Contact form with email notifications
+   - Snow peaks animation effect
+
+2. Content Sections
+   - Service showcase
+   - Biography section
+   - Testimonials
+   - Timeline visualization
+   - Resources library
+
+3. Accessibility Features
+   - WebVTT subtitles
+   - Text transcriptions
+   - Universal design principles
+   - Responsive layout
+
+### User Experience
+- Modern, responsive design
+- Smooth animations and transitions
+- Clear navigation structure
+- Accessible content presentation
+- Professional and engaging interface
+
+### Technical Requirements
+- Fast loading times
+- Mobile responsiveness
+- Email notification system
+- Rate limiting for security
+- Caching for performance
+- Secure contact form handling

cline_docs/progress.md

@@ -0,0 +1,92 @@
+# Project Progress
+
+## Implemented Features
+
+### Core Components
+✅ Project Structure
+  - Layout components (Navbar, Footer)
+  - Page components (Home, About, Contact, Resources, Services)
+  - Shared components (Toast notifications)
+
+✅ Video Features
+  - Custom VideoPlayer component
+  - WebVTT subtitle support
+  - Transcription integration
+
+✅ Interactive Elements
+  - SnowPeaks animation
+  - Contact form with email integration
+  - Toast notification system
+
+### Content
+✅ Media Assets
+  - Video content
+  - Subtitle files (.vtt)
+  - Transcription files (.txt)
+  - Images and thumbnails
+
+✅ Page Content
+  - Navigation structure
+  - Service information
+  - Resource materials
+  - Contact functionality
+
+### Infrastructure
+✅ Development Environment
+  - Docker configuration
+  - TypeScript setup
+  - ESLint configuration
+  - Build system (Vite)
+
+✅ Backend Services
+  - Express server
+  - Email handling
+  - Rate limiting
+  - Redis integration
+
+## In Progress Features
+🔄 None currently identified - need to verify with team
+
+## Planned Features
+📋 To be determined based on roadmap and requirements
+
+## Known Issues
+- None documented yet - need to review issue tracker
+
+## Next Steps
+1. Review and verify all implemented features
+2. Test accessibility compliance
+3. Perform performance optimization
+4. Conduct security audit
+5. Update documentation as needed
+
+## Testing Status
+### Completed
+- Basic component rendering
+- Route navigation
+- Form submission
+- Video playback
+
+### Pending
+- End-to-end testing
+- Accessibility testing
+- Performance testing
+- Security testing
+
+## Deployment Status
+- Development environment: Configured
+- Production environment: Configured
+- Docker containers: Set up
+- Nginx configuration: Complete
+- Redis integration: Complete
+
+## Documentation Status
+✅ README
+✅ Technical documentation
+✅ API documentation
+✅ Deployment guides
+
+## Notes
+- Project appears to be in a mature state with core features implemented
+- Focus should be on testing, optimization, and maintenance
+- Regular updates to documentation needed as features evolve

cline_docs/systemPatterns.md

@@ -0,0 +1,119 @@
+# System Patterns
+
+## Architecture Overview
+
+### Frontend Architecture
+1. React Component Structure
+   - Layout components for consistent structure
+   - Shared components for reusability
+   - Page-specific components for unique features
+   - Context providers for state management
+
+2. Routing System
+   - React Router v7 for navigation
+   - Client-side routing
+   - Protected routes where necessary
+
+3. State Management
+   - React Context for global state
+   - Local state for component-specific data
+   - Notification context for toast messages
+
+### Backend Architecture
+1. API Structure
+   - Express.js server
+   - RESTful endpoints
+   - Rate-limited routes
+   - Email service integration
+
+2. Caching Layer
+   - Redis-backed caching
+   - Session management
+   - Rate limiting implementation
+
+## Key Technical Decisions
+
+### Development Environment
+1. Build System
+   - Vite for fast development
+   - Hot Module Replacement
+   - TypeScript compilation
+   - Concurrent frontend/backend development
+
+2. Docker Configuration
+   - Multi-container setup
+   - Development and production configurations
+   - Volume mounting for persistent data
+   - Bridge network setup
+
+### Production Setup
+1. Deployment Strategy
+   - Multi-stage Docker builds
+   - Nginx for static file serving
+   - Node.js API server
+   - Automatic container restart
+
+2. Performance Optimizations
+   - Tree shaking
+   - Code splitting
+   - Redis caching
+   - Static file optimization
+
+### Security Patterns
+1. API Security
+   - Rate limiting
+   - CORS configuration
+   - Environment variable protection
+   - Secure email handling
+
+2. Data Protection
+   - Form validation
+   - Input sanitization
+   - Redis session management
+   - Secure credential storage
+
+## Directory Structure
+```
+src/
+├── api/            # Backend API routes
+├── components/     # UI components
+│   ├── Layout/     # Layout structure
+│   └── shared/     # Reusable components
+├── context/        # React Context
+├── lib/           # Utility functions
+├── pages/         # Route pages
+└── assets/        # Static assets
+
+public/
+├── images/        # Image assets
+├── subtitles/     # WebVTT files
+├── transcriptions/# Text files
+└── videos/        # Video content
+```
+
+## Implementation Patterns
+
+### Component Patterns
+- Functional components with hooks
+- TypeScript interfaces for props
+- Separation of concerns
+- Reusable styling with Tailwind
+
+### Animation Patterns
+- Framer Motion for complex animations
+- CSS transitions for simple effects
+- Intersection Observer for scroll animations
+- Performance-optimized animations
+
+### Accessibility Patterns
+- ARIA labels
+- Semantic HTML
+- Keyboard navigation
+- Screen reader support
+- Color contrast compliance
+
+### Testing Strategy
+- Component testing
+- API endpoint testing
+- Integration testing
+- Accessibility testing

cline_docs/techContext.md

@@ -0,0 +1,113 @@
+# Technical Context
+
+## Technology Stack
+
+### Frontend Technologies
+| Technology | Version | Purpose |
+|------------|---------|---------|
+| React | 19.0.0 | Core UI Framework |
+| TypeScript | 5.7.2 | Type Safety |
+| React Router | 7.0.2 | Routing |
+| Tailwind CSS | 3.4.16 | Styling |
+| Framer Motion | 11.13.5 | Animations |
+| React Simple Maps | 4.0.0-beta.6 | Geographic Visualization |
+| Next.js | 14.1.0 | Framework Features |
+| React Icons | 5.4.0 | Icon Library |
+| React Intersection Observer | 9.13.1 | Scroll Detection |
+
+### Backend Technologies
+| Technology | Version | Purpose |
+|------------|---------|---------|
+| Express | 4.21.2 | API Server |
+| Node.js | Latest LTS | Runtime Environment |
+| Nodemailer | 6.9.9 | Email Service |
+| Upstash Redis | 1.28.4 | Caching/Rate Limiting |
+| TypeScript | 5.7.2 | Type Safety |
+| dotenv | 16.4.7 | Environment Management |
+
+### Development Tools
+| Tool | Version | Purpose |
+|------|---------|---------|
+| Vite | 6.0.3 | Build System |
+| pnpm | 9.14.2 | Package Manager |
+| ESLint | 9.15.0 | Code Linting |
+| Docker | Latest | Containerization |
+| PostCSS | 8.4.49 | CSS Processing |
+| Autoprefixer | 10.4.20 | CSS Compatibility |
+| Concurrently | 8.2.2 | Process Management |
+
+## Development Setup
+
+### Prerequisites
+- Node.js LTS version
+- pnpm 9.14.2
+- Docker and Docker Compose
+- Git
+
+### Local Development
+```bash
+# Install dependencies
+pnpm install
+
+# Start development servers
+pnpm dev    # Runs frontend (3000) and backend (4000)
+
+# Build for production
+pnpm build
+
+# Preview production build
+pnpm preview
+```
+
+### Environment Variables
+Required variables:
+- `GMAIL_USER`: Email service username
+- `GMAIL_PASS`: Email service password
+- `REDIS_URL`: Upstash Redis connection URL
+- `REDIS_TOKEN`: Upstash Redis auth token
+- `API_URL`: Backend API URL
+- `NODE_ENV`: Environment (development/production)
+
+### Docker Development
+```bash
+# Development environment
+docker-compose -f docker-compose.dev.yml up
+
+# Production build
+docker-compose up --build
+```
+
+## Technical Constraints
+
+### Performance Requirements
+- First Contentful Paint < 1.5s
+- Time to Interactive < 3.5s
+- Lighthouse Performance Score > 90
+- Mobile-responsive breakpoints
+
+### Browser Support
+- Modern browsers (last 2 versions)
+- Chrome, Firefox, Safari, Edge
+- Mobile browsers (iOS Safari, Chrome Android)
+
+### Accessibility Requirements
+- WCAG 2.1 Level AA compliance
+- Screen reader compatibility
+- Keyboard navigation support
+- Color contrast ratios
+- Subtitle and transcript support
+
+### Security Requirements
+- Rate limiting on API endpoints
+- CORS policy configuration
+- Secure email handling
+- Environment variable protection
+- Input validation and sanitization
+
+### Infrastructure Requirements
+- Docker container deployment
+- Nginx reverse proxy
+- Redis caching layer
+- Email service integration
+- Static file serving
+- API server configuration

src/App.tsx

@@ -18,6 +18,7 @@ function App() {
             <Route path="/about" element={<About />} />
             <Route path="/contact" element={<Contact />} />
             <Route path="/resources" element={<Resources />} />
+            <Route path="/resources/video/:videoId" element={<Resources />} />
           </Routes>
         </Layout>
       </Router>

src/pages/Resources.tsx

@@ -1,6 +1,8 @@
 import { useState, useRef, useEffect } from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
+import { useNotification } from '../context/notification-context'
 import { motion, AnimatePresence } from 'framer-motion'
-import { FaBookReader, FaTimes, FaVideo } from 'react-icons/fa'
+import { FaBookReader, FaTimes, FaVideo, FaLink } from 'react-icons/fa'
 import VideoPlayer from '../components/VideoPlayer'
 
 interface Video {
@@ -73,6 +75,9 @@ const resourceCategories: Category[] = [
 ]
 
 const Resources = () => {
+  const { videoId } = useParams<{ videoId?: string }>()
+  const navigate = useNavigate()
+  const { showNotification } = useNotification()
   const [selectedVideo, setSelectedVideo] = useState<Video | null>(null)
   const [currentPage, setCurrentPage] = useState<Record<string, number>>({})
   const [showTranscript, setShowTranscript] = useState(false)
@@ -81,6 +86,19 @@ const Resources = () => {
   const popupRef = useRef<HTMLDivElement>(null)
   const transcriptRef = useRef<HTMLDivElement>(null)
 
+  // Handle direct video links
+  useEffect(() => {
+    if (videoId) {
+      const video = resourceCategories
+        .flatMap(category => category.videos)
+        .find(v => v.id === videoId)
+      
+      if (video) {
+        setSelectedVideo(video)
+      }
+    }
+  }, [videoId])
+
   useEffect(() => {
     const handleResize = () => setScreenWidth(window.innerWidth)
     window.addEventListener('resize', handleResize)
@@ -156,13 +174,29 @@ const Resources = () => {
                       className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
                     />
                     <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center gap-4">
+                      <div className="flex items-center gap-4">
                         <button
-                        onClick={() => setSelectedVideo(video)}
+                          onClick={() => {
+                            setSelectedVideo(video)
+                            navigate(`/resources/video/${video.id}`, { replace: true })
+                          }}
                           className="bg-primary/90 hover:bg-primary text-white px-4 py-2 rounded-full flex items-center gap-2 transition-colors"
                           aria-label={`Watch ${video.title}`}
                         >
                           <FaVideo /> Watch
                         </button>
+                        <button
+                          onClick={() => {
+                            const url = `${window.location.origin}/resources/video/${video.id}`
+                            navigator.clipboard.writeText(url)
+                            showNotification('Link copied to clipboard!', 'success')
+                          }}
+                          className="bg-accent-lake/90 hover:bg-accent-lake text-white px-4 py-2 rounded-full flex items-center gap-2 transition-colors"
+                          aria-label={`Copy link to ${video.title}`}
+                        >
+                          <FaLink /> Copy Link
+                        </button>
+                      </div>
                       {video.transcriptSrc && (
                         <button
                           onClick={() => fetchTranscript(video.id)}
@@ -211,7 +245,10 @@ const Resources = () => {
           <div className="w-full max-w-6xl" ref={popupRef}>
             <div className="relative">
               <button
-                onClick={() => setSelectedVideo(null)}
+                onClick={() => {
+                  setSelectedVideo(null)
+                  navigate('/resources', { replace: true })
+                }}
                 className="absolute -top-12 right-0 text-white hover:text-accent-lake bg-black/50 p-2 rounded-full transition-colors"
                 aria-label="Close video"
               >