Initial commit: SmoothSchedule multi-tenant scheduling platform

This commit includes:
- Django backend with multi-tenancy (django-tenants)
- React + TypeScript frontend with Vite
- Platform administration API with role-based access control
- Authentication system with token-based auth
- Quick login dev tools for testing different user roles
- CORS and CSRF configuration for local development
- Docker development environment setup

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/src/pages/marketing/FeaturesPage.tsx

@@ -0,0 +1,173 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Calendar,
+  Users,
+  CreditCard,
+  Building2,
+  Palette,
+  BarChart3,
+  Plug,
+  UserCircle,
+  Bell,
+  Shield,
+  Smartphone,
+  Clock,
+} from 'lucide-react';
+import FeatureCard from '../../components/marketing/FeatureCard';
+import CTASection from '../../components/marketing/CTASection';
+
+const FeaturesPage: React.FC = () => {
+  const { t } = useTranslation();
+
+  const featureCategories = [
+    {
+      title: 'Scheduling & Calendar',
+      features: [
+        {
+          icon: Calendar,
+          titleKey: 'marketing.features.scheduling.title',
+          descriptionKey: 'marketing.features.scheduling.description',
+          color: 'brand',
+        },
+        {
+          icon: Clock,
+          title: 'Real-Time Availability',
+          description: 'Customers see only available time slots. No double bookings, ever.',
+          color: 'green',
+        },
+        {
+          icon: Bell,
+          title: 'Automated Reminders',
+          description: 'Reduce no-shows with email and SMS reminders sent automatically.',
+          color: 'purple',
+        },
+      ],
+    },
+    {
+      title: 'Resource Management',
+      features: [
+        {
+          icon: Users,
+          titleKey: 'marketing.features.resources.title',
+          descriptionKey: 'marketing.features.resources.description',
+          color: 'orange',
+        },
+        {
+          icon: Smartphone,
+          title: 'Staff Mobile App',
+          description: 'Your team can view schedules and manage appointments on the go.',
+          color: 'pink',
+        },
+        {
+          icon: Shield,
+          title: 'Role-Based Access',
+          description: 'Control what each team member can see and do with granular permissions.',
+          color: 'cyan',
+        },
+      ],
+    },
+    {
+      title: 'Customer Experience',
+      features: [
+        {
+          icon: UserCircle,
+          titleKey: 'marketing.features.customers.title',
+          descriptionKey: 'marketing.features.customers.description',
+          color: 'brand',
+        },
+        {
+          icon: CreditCard,
+          titleKey: 'marketing.features.payments.title',
+          descriptionKey: 'marketing.features.payments.description',
+          color: 'green',
+        },
+        {
+          icon: Palette,
+          titleKey: 'marketing.features.whiteLabel.title',
+          descriptionKey: 'marketing.features.whiteLabel.description',
+          color: 'purple',
+        },
+      ],
+    },
+    {
+      title: 'Business Growth',
+      features: [
+        {
+          icon: Building2,
+          titleKey: 'marketing.features.multiTenant.title',
+          descriptionKey: 'marketing.features.multiTenant.description',
+          color: 'orange',
+        },
+        {
+          icon: BarChart3,
+          titleKey: 'marketing.features.analytics.title',
+          descriptionKey: 'marketing.features.analytics.description',
+          color: 'pink',
+        },
+        {
+          icon: Plug,
+          titleKey: 'marketing.features.integrations.title',
+          descriptionKey: 'marketing.features.integrations.description',
+          color: 'cyan',
+        },
+      ],
+    },
+  ];
+
+  return (
+    <div>
+      {/* Header Section */}
+      <section className="py-20 lg:py-28 bg-gradient-to-br from-white via-brand-50/30 to-white dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <h1 className="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white mb-4">
+              {t('marketing.features.title')}
+            </h1>
+            <p className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
+              {t('marketing.features.subtitle')}
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Feature Categories */}
+      {featureCategories.map((category, categoryIndex) => (
+        <section
+          key={categoryIndex}
+          className={`py-20 ${
+            categoryIndex % 2 === 0
+              ? 'bg-white dark:bg-gray-900'
+              : 'bg-gray-50 dark:bg-gray-800/50'
+          }`}
+        >
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <h2 className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-10 text-center">
+              {category.title}
+            </h2>
+            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
+              {category.features.map((feature, featureIndex) => (
+                <FeatureCard
+                  key={featureIndex}
+                  icon={feature.icon}
+                  title={feature.titleKey ? t(feature.titleKey) : feature.title || ''}
+                  description={
+                    feature.descriptionKey
+                      ? t(feature.descriptionKey)
+                      : feature.description || ''
+                  }
+                  iconColor={feature.color}
+                />
+              ))}
+            </div>
+          </div>
+        </section>
+      ))}
+
+      {/* CTA Section */}
+      <CTASection />
+    </div>
+  );
+};
+
+export default FeaturesPage;