🎨 [RE]Print Studios Client Portal

A vibrant and energetic client portal for creative collaboration and project management, empowering aspiring creatives and young adults on their creative journey.

✨ Features

🏠 Landing Page

• Professional hero section with clear CTAs
• Feature showcase with smooth animations
• Inquiry form with real-time validation
• Client login modal
• Fully responsive design
• Bone white (#F9F6F1) aesthetic with Montserrat typography

📊 Client Portal Dashboard

• Dashboard Overview: Project stats, recent activity, progress tracking
• Project Management: Detailed project cards with progress bars and status tracking
• File Management: Secure file browser with upload/download capabilities
• Real-time Messaging: Direct communication with project-specific threads
• Invoice Management: View invoices, payment history, and online payments
• Mobile Responsive: Optimized for all screen sizes

🛠️ Technology Stack

Frontend

• HTML5: Semantic markup with accessibility considerations
• CSS3: Modern layouts with Grid/Flexbox, smooth animations
• JavaScript (ES6+): Object-oriented design with classes and modules
• Responsive Design: Mobile-first approach

Design System

• Colors: Bone white (#F9F6F1), Dark text (#333), Subtle grays
• Typography: Montserrat (300, 400, 700 weights)
• Style: Minimalist with square bracket [notation]
• Animation: Smooth transitions and micro-interactions

📁 File Structure

website/
├── index.html              # Landing page
├── portal.html            # Client portal dashboard  
├── styles.css             # Main stylesheet
├── portal.css             # Portal-specific styles
├── script.js              # Landing page functionality
├── portal.js              # Portal dashboard functionality
├── package.json           # Dependencies and scripts
├── .env                   # Environment variables
├── setup.mjs              # Setup script
└── README.md              # This file

� Quick Start

1. Clone and Setup

   git clone <repository>
   cd website
   npm install

2. Development

   # Simply open in browser or use live server
   open index.html

3. View Portal Demo

   # Open the client portal dashboard
   open portal.html

💡 Key Features Explained

🎯 Landing Page Experience

• Hero Section: Introduces the client portal concept with clear value proposition
• Feature Grid: Showcases portal capabilities with icons and descriptions
• Inquiry Form: Multi-step form with project type, budget, and timeline selection
• Client Login: Modal-based authentication with proper UX patterns

📱 Portal Dashboard

• Navigation: Tab-based navigation with smooth transitions
• Real-time Updates: Simulated real-time data updates and notifications
• File Management: Drag-and-drop uploads, file previews, and secure downloads
• Progress Tracking: Visual progress bars and milestone indicators
• Communication: Threaded messaging with file attachments

🎨 Design Philosophy

• Minimalism: Clean, uncluttered interface focusing on content
• Typography: Square bracket notation for headings maintains brand consistency
• Accessibility: WCAG guidelines with proper focus states and keyboard navigation
• Performance: Optimized animations with respect for user preferences

🔧 Customization

Colors

:root {
  --primary-bg: #F9F6F1;    /* Bone white background */
  --text-dark: #333;         /* Primary text */
  --text-medium: #666;       /* Secondary text */
  --text-light: #999;        /* Tertiary text */
  --accent: #333;            /* Buttons and highlights */
}

Typography

--font-family: 'Montserrat', sans-serif;
--font-light: 300;
--font-regular: 400;
--font-bold: 700;

📱 Responsive Breakpoints

• Mobile: < 480px
• Tablet: 481px - 768px
• Desktop: 769px - 1024px
• Large Desktop: > 1024px

🔒 Security Considerations

• Input Validation: All forms include client-side validation
• Authentication: Ready for JWT-based session management
• File Security: Type validation and secure file handling
• HTTPS: SSL/TLS encryption for all communications

🚀 Deployment Options

Option 1: Static Hosting

• Netlify, Vercel, or GitHub Pages
• Perfect for frontend-only version

Option 2: Full-Stack Hosting

• Node.js hosting (Heroku, DigitalOcean, AWS)
• Includes backend API and database

Option 3: Integrated CMS

• WordPress, Webflow, or headless CMS
• Content management capabilities

� Future Enhancements

Phase 1: Backend Integration

• Express.js API server
• SQLite/PostgreSQL database
• JWT authentication
• File upload handling

Phase 2: Real-time Features

• Socket.io integration
• Live messaging
• Real-time notifications
• Collaborative features

Phase 3: Advanced Features

• Payment integration (Stripe)
• PDF generation
• Email notifications
• Analytics dashboard

Phase 4: Mobile App

• React Native app
• Push notifications
• Offline capabilities
• Camera integration

🎨 Brand Guidelines

Visual Identity

• Primary: Bone white background with dark text
• Accent: Minimal use of color, primarily black/gray
• Typography: Montserrat font family exclusively
• Style: Clean, professional, slightly edgy

Voice & Tone

• Professional: Maintains credibility and trust
• Friendly: Approachable and collaborative
• Clear: Direct communication without jargon
• Creative: Reflects the designer's artistic background

📞 Support

For questions, feature requests, or issues:

• Email: hello@reprintstudios.com
• Website: [reprintstudios.com]
• Documentation: This README file

📄 License

© 2025 [RE]Print Studios. All rights reserved.

---

Built with care for seamless client collaboration 🎨✨