Tutoring Request Landing Page

Overview

The /request-tutoring page is a comprehensive landing page where potential students can request tutoring services. It collects their information and sends notifications to admin users.

Features

🎨 Design & UX

• Responsive Design: Works perfectly on desktop, tablet, and mobile devices
• Interactive Animations: Smooth fade-in animations and hover effects
• Modern UI: Gradient backgrounds, cards, and professional styling
• Accessibility: Proper labels, focus states, and semantic HTML

📝 Form Fields

• Name: Full name (required, 2-100 characters)
• Phone: Phone number (required, 10-15 characters)
• Email: Email address (required, valid email format)
• Tutoring Type: Interactive selection between:
  • Group Bulk Tutoring: Cost-effective learning with 3-5 students
  • Specialized One-on-One: Personalized attention with dedicated tutor
• Additional Info: Optional text area for specific requirements (max 1000 characters)

🔔 Notification System

• Admin Email Notifications: Automatically sends beautifully formatted emails to all admin users
• Professional Email Template: Includes all request details with proper styling
• Quick Action CTA: Direct email link to contact the requester
• Timestamp: Shows when the request was submitted (Nigeria timezone)

✨ Interactive Elements

• Tutoring Type Cards: Clickable cards with hover effects and selection states
• Loading States: Shows spinner and "Submitting..." text during form submission
• Success/Error Messages: Clear feedback for form submission results
• Form Validation: Real-time validation with helpful error messages

🖼️ Visual Elements

• Hero Image: Placeholder for tutoring-related image (/images/tutoring-hero.jpg)
• Floating Icons: Animated star and book icons for visual appeal
• Statistics: Shows platform stats (500+ tutors, 10k+ students, 95% success rate)
• Feature Cards: Highlights benefits of each tutoring type

Technical Implementation

🛠️ Technologies Used

• Remix: Full-stack React framework
• TypeScript: Type-safe development
• Zod: Schema validation
• Tailwind CSS: Utility-first styling
• Lucide React: Modern icon library

📧 Email Integration

• Uses the existing email service (~/services/email.server)
• Sends to all users with ADMIN role
• Professional HTML email template with inline CSS
• Error handling and logging

🎯 Form Validation

• Client-side validation with TypeScript
• Server-side validation with Zod schema
• Comprehensive error handling
• User-friendly error messages

Usage Examples

Basic Request Flow

1. User visits /request-tutoring
2. Fills out the form with their details
3. Selects preferred tutoring type
4. Submits the form
5. Admin receives email notification
6. User sees success message

Admin Email Content

The admin receives an email with:

• Requester's full contact information
• Preferred tutoring type with visual badge
• Additional information/requirements
• Direct contact button
• Urgency reminder (24-hour response time)
• Timestamp in Nigeria timezone

File Structure

app/routes/_site+/
├── request-tutoring.tsx          # Main landing page component
└── README.md                     # This documentation

app/services/
└── notification-examples.server.ts  # Email notification function

public/images/
└── tutoring-hero.jpg            # Hero image (to be added)

Customization

Adding Images

Place your hero image at /public/images/tutoring-hero.jpg. The component includes fallback handling if the image doesn't exist.

Styling

The page uses Tailwind CSS classes. Key styling features:

• Gradient backgrounds
• Smooth animations
• Responsive grid layouts
• Interactive hover states
• Professional color scheme (blue/purple theme)

Email Template

The email template can be customized in the sendTutoringInterestNotification function in notification-examples.server.ts.

SEO & Meta

• Optimized meta tags for search engines
• Descriptive title and description
• Relevant keywords for tutoring services
• Sitemap integration

Accessibility

• Semantic HTML structure
• Proper ARIA labels
• Keyboard navigation support
• Screen reader friendly
• High contrast colors
• Focus indicators

Performance

• Optimized animations
• Efficient form handling
• Minimal JavaScript bundle
• Fast loading times
• Progressive enhancement