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/AboutPage.tsx

@@ -0,0 +1,140 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Lightbulb, Shield, Eye, HeartHandshake } from 'lucide-react';
+import CTASection from '../../components/marketing/CTASection';
+
+const AboutPage: React.FC = () => {
+  const { t } = useTranslation();
+
+  const values = [
+    {
+      icon: Lightbulb,
+      titleKey: 'marketing.about.values.simplicity.title',
+      descriptionKey: 'marketing.about.values.simplicity.description',
+      color: 'brand',
+    },
+    {
+      icon: Shield,
+      titleKey: 'marketing.about.values.reliability.title',
+      descriptionKey: 'marketing.about.values.reliability.description',
+      color: 'green',
+    },
+    {
+      icon: Eye,
+      titleKey: 'marketing.about.values.transparency.title',
+      descriptionKey: 'marketing.about.values.transparency.description',
+      color: 'purple',
+    },
+    {
+      icon: HeartHandshake,
+      titleKey: 'marketing.about.values.support.title',
+      descriptionKey: 'marketing.about.values.support.description',
+      color: 'orange',
+    },
+  ];
+
+  const colorClasses: Record<string, string> = {
+    brand: 'bg-brand-100 dark:bg-brand-900/30 text-brand-600 dark:text-brand-400',
+    green: 'bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400',
+    purple: 'bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400',
+    orange: 'bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400',
+  };
+
+  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-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <h1 className="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white mb-6">
+            {t('marketing.about.title')}
+          </h1>
+          <p className="text-xl text-gray-600 dark:text-gray-400">
+            {t('marketing.about.subtitle')}
+          </p>
+        </div>
+      </section>
+
+      {/* Story Section */}
+      <section className="py-20 bg-white dark:bg-gray-900">
+        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid md:grid-cols-2 gap-12 items-center">
+            <div>
+              <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6">
+                {t('marketing.about.story.title')}
+              </h2>
+              <p className="text-gray-600 dark:text-gray-400 leading-relaxed mb-6">
+                {t('marketing.about.story.content')}
+              </p>
+              <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
+                {t('marketing.about.story.content2')}
+              </p>
+            </div>
+            <div className="bg-gradient-to-br from-brand-500 to-brand-600 rounded-2xl p-8 text-white">
+              <div className="text-6xl font-bold mb-2">2017</div>
+              <div className="text-brand-100">{t('marketing.about.story.founded')}</div>
+              <div className="mt-8 space-y-4">
+                <div className="flex items-center gap-3">
+                  <div className="w-2 h-2 bg-brand-200 rounded-full" />
+                  <span className="text-brand-100">8+ years building scheduling solutions</span>
+                </div>
+                <div className="flex items-center gap-3">
+                  <div className="w-2 h-2 bg-brand-200 rounded-full" />
+                  <span className="text-brand-100">Battle-tested with real businesses</span>
+                </div>
+                <div className="flex items-center gap-3">
+                  <div className="w-2 h-2 bg-brand-200 rounded-full" />
+                  <span className="text-brand-100">Features born from customer feedback</span>
+                </div>
+                <div className="flex items-center gap-3">
+                  <div className="w-2 h-2 bg-brand-200 rounded-full" />
+                  <span className="text-brand-100">Now available to everyone</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Mission Section */}
+      <section className="py-20 bg-gray-50 dark:bg-gray-800/50">
+        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6">
+            {t('marketing.about.mission.title')}
+          </h2>
+          <p className="text-xl text-gray-600 dark:text-gray-400 leading-relaxed max-w-3xl mx-auto">
+            {t('marketing.about.mission.content')}
+          </p>
+        </div>
+      </section>
+
+      {/* Values Section */}
+      <section className="py-20 bg-white dark:bg-gray-900">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-12 text-center">
+            {t('marketing.about.values.title')}
+          </h2>
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+            {values.map((value) => (
+              <div key={value.titleKey} className="text-center">
+                <div className={`inline-flex p-4 rounded-2xl ${colorClasses[value.color]} mb-4`}>
+                  <value.icon className="h-8 w-8" />
+                </div>
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
+                  {t(value.titleKey)}
+                </h3>
+                <p className="text-gray-600 dark:text-gray-400">
+                  {t(value.descriptionKey)}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* CTA Section */}
+      <CTASection variant="minimal" />
+    </div>
+  );
+};
+
+export default AboutPage;