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>
2025-11-27 01:43:20 -05:00
commit 2e111364a2
567 changed files with 96410 additions and 0 deletions
--- a/frontend/src/components/marketing/CTASection.tsx
+++ b/frontend/src/components/marketing/CTASection.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { ArrowRight } from 'lucide-react';
+
+interface CTASectionProps {
+  variant?: 'default' | 'minimal';
+}
+
+const CTASection: React.FC<CTASectionProps> = ({ variant = 'default' }) => {
+  const { t } = useTranslation();
+
+  if (variant === 'minimal') {
+    return (
+      <section className="py-16 bg-white dark:bg-gray-900">
+        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <h2 className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-4">
+            {t('marketing.cta.ready')}
+          </h2>
+          <p className="text-gray-600 dark:text-gray-400 mb-8">
+            {t('marketing.cta.readySubtitle')}
+          </p>
+          <Link
+            to="/signup"
+            className="inline-flex items-center gap-2 px-6 py-3 text-base font-semibold text-white bg-brand-600 rounded-xl hover:bg-brand-700 transition-colors"
+          >
+            {t('marketing.cta.startFree')}
+            <ArrowRight className="h-5 w-5" />
+          </Link>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section className="py-20 lg:py-28 bg-gradient-to-br from-brand-600 to-brand-700 relative overflow-hidden">
+      {/* Background Pattern */}
+      <div className="absolute inset-0">
+        <div className="absolute top-0 left-1/4 w-96 h-96 bg-white/5 rounded-full blur-3xl" />
+        <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-white/5 rounded-full blur-3xl" />
+      </div>
+
+      <div className="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+        <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-6">
+          {t('marketing.cta.ready')}
+        </h2>
+        <p className="text-lg sm:text-xl text-brand-100 mb-10 max-w-2xl mx-auto">
+          {t('marketing.cta.readySubtitle')}
+        </p>
+
+        <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+          <Link
+            to="/signup"
+            className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-8 py-4 text-base font-semibold text-brand-600 bg-white rounded-xl hover:bg-brand-50 shadow-lg shadow-black/10 transition-colors"
+          >
+            {t('marketing.cta.startFree')}
+            <ArrowRight className="h-5 w-5" />
+          </Link>
+          <Link
+            to="/contact"
+            className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-8 py-4 text-base font-semibold text-white bg-white/10 rounded-xl hover:bg-white/20 border border-white/20 transition-colors"
+          >
+            {t('marketing.cta.talkToSales')}
+          </Link>
+        </div>
+
+        <p className="mt-6 text-sm text-brand-200">
+          {t('marketing.cta.noCredit')}
+        </p>
+      </div>
+    </section>
+  );
+};
+
+export default CTASection;
--- a/frontend/src/components/marketing/FAQAccordion.tsx
+++ b/frontend/src/components/marketing/FAQAccordion.tsx
@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import { ChevronDown } from 'lucide-react';
+
+interface FAQItem {
+  question: string;
+  answer: string;
+}
+
+interface FAQAccordionProps {
+  items: FAQItem[];
+}
+
+const FAQAccordion: React.FC<FAQAccordionProps> = ({ items }) => {
+  const [openIndex, setOpenIndex] = useState<number | null>(0);
+
+  const toggleItem = (index: number) => {
+    setOpenIndex(openIndex === index ? null : index);
+  };
+
+  return (
+    <div className="space-y-4">
+      {items.map((item, index) => (
+        <div
+          key={index}
+          className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden"
+        >
+          <button
+            onClick={() => toggleItem(index)}
+            className="w-full flex items-center justify-between p-6 text-left hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors"
+            aria-expanded={openIndex === index}
+          >
+            <span className="text-base font-medium text-gray-900 dark:text-white dark:hover:text-white pr-4">
+              {item.question}
+            </span>
+            <ChevronDown
+              className={`h-5 w-5 text-gray-500 dark:text-gray-400 flex-shrink-0 transition-transform duration-200 ${
+                openIndex === index ? 'rotate-180' : ''
+              }`}
+            />
+          </button>
+          <div
+            className={`overflow-hidden transition-all duration-200 ${
+              openIndex === index ? 'max-h-96' : 'max-h-0'
+            }`}
+          >
+            <div className="px-6 pt-2 pb-6 text-gray-600 dark:text-gray-400 leading-relaxed">
+              {item.answer}
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default FAQAccordion;
--- a/frontend/src/components/marketing/FeatureCard.tsx
+++ b/frontend/src/components/marketing/FeatureCard.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { LucideIcon } from 'lucide-react';
+
+interface FeatureCardProps {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+  iconColor?: string;
+}
+
+const FeatureCard: React.FC<FeatureCardProps> = ({
+  icon: Icon,
+  title,
+  description,
+  iconColor = 'brand',
+}) => {
+  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',
+    pink: 'bg-pink-100 dark:bg-pink-900/30 text-pink-600 dark:text-pink-400',
+    cyan: 'bg-cyan-100 dark:bg-cyan-900/30 text-cyan-600 dark:text-cyan-400',
+  };
+
+  return (
+    <div className="group p-6 bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 hover:border-brand-300 dark:hover:border-brand-700 hover:shadow-lg hover:shadow-brand-600/5 transition-all duration-300">
+      <div className={`inline-flex p-3 rounded-xl ${colorClasses[iconColor]} mb-4`}>
+        <Icon className="h-6 w-6" />
+      </div>
+      <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2 group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors">
+        {title}
+      </h3>
+      <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
+        {description}
+      </p>
+    </div>
+  );
+};
+
+export default FeatureCard;
--- a/frontend/src/components/marketing/Footer.tsx
+++ b/frontend/src/components/marketing/Footer.tsx
@@ -0,0 +1,136 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Twitter, Linkedin, Github, Youtube } from 'lucide-react';
+import SmoothScheduleLogo from '../SmoothScheduleLogo';
+
+const Footer: React.FC = () => {
+  const { t } = useTranslation();
+  const currentYear = new Date().getFullYear();
+
+  const footerLinks = {
+    product: [
+      { to: '/features', label: t('marketing.nav.features') },
+      { to: '/pricing', label: t('marketing.nav.pricing') },
+      { to: '/signup', label: t('marketing.nav.getStarted') },
+    ],
+    company: [
+      { to: '/about', label: t('marketing.nav.about') },
+      { to: '/contact', label: t('marketing.nav.contact') },
+    ],
+    legal: [
+      { to: '/privacy', label: t('marketing.footer.legal.privacy') },
+      { to: '/terms', label: t('marketing.footer.legal.terms') },
+    ],
+  };
+
+  const socialLinks = [
+    { href: 'https://twitter.com/smoothschedule', icon: Twitter, label: 'Twitter' },
+    { href: 'https://linkedin.com/company/smoothschedule', icon: Linkedin, label: 'LinkedIn' },
+    { href: 'https://github.com/smoothschedule', icon: Github, label: 'GitHub' },
+    { href: 'https://youtube.com/@smoothschedule', icon: Youtube, label: 'YouTube' },
+  ];
+
+  return (
+    <footer className="bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16">
+        {/* Main Footer Content */}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 lg:gap-12">
+          {/* Brand Column */}
+          <div className="col-span-2 md:col-span-1">
+            <Link to="/" className="flex items-center gap-2 mb-4 group">
+              <SmoothScheduleLogo className="h-12 w-12 text-gray-900 dark:text-white group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors" />
+              <span className="text-lg font-bold text-gray-900 dark:text-white">
+                Smooth Schedule
+              </span>
+            </Link>
+            <p className="text-sm text-gray-600 dark:text-gray-400 mb-6">
+              {t('marketing.description')}
+            </p>
+            {/* Social Links */}
+            <div className="flex items-center gap-4">
+              {socialLinks.map((social) => (
+                <a
+                  key={social.label}
+                  href={social.href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="p-2 rounded-lg text-gray-500 hover:text-brand-600 dark:text-gray-400 dark:hover:text-brand-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+                  aria-label={social.label}
+                >
+                  <social.icon className="h-5 w-5" />
+                </a>
+              ))}
+            </div>
+          </div>
+
+          {/* Product Links */}
+          <div>
+            <h3 className="text-sm font-semibold text-gray-900 dark:text-white uppercase tracking-wider mb-4">
+              {t('marketing.footer.product.title')}
+            </h3>
+            <ul className="space-y-3">
+              {footerLinks.product.map((link) => (
+                <li key={link.to}>
+                  <Link
+                    to={link.to}
+                    className="text-sm text-gray-600 dark:text-gray-400 hover:text-brand-600 dark:hover:text-brand-400 transition-colors"
+                  >
+                    {link.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Company Links */}
+          <div>
+            <h3 className="text-sm font-semibold text-gray-900 dark:text-white uppercase tracking-wider mb-4">
+              {t('marketing.footer.company.title')}
+            </h3>
+            <ul className="space-y-3">
+              {footerLinks.company.map((link) => (
+                <li key={link.to}>
+                  <Link
+                    to={link.to}
+                    className="text-sm text-gray-600 dark:text-gray-400 hover:text-brand-600 dark:hover:text-brand-400 transition-colors"
+                  >
+                    {link.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Legal Links */}
+          <div>
+            <h3 className="text-sm font-semibold text-gray-900 dark:text-white uppercase tracking-wider mb-4">
+              {t('marketing.footer.legal.title')}
+            </h3>
+            <ul className="space-y-3">
+              {footerLinks.legal.map((link) => (
+                <li key={link.to}>
+                  <Link
+                    to={link.to}
+                    className="text-sm text-gray-600 dark:text-gray-400 hover:text-brand-600 dark:hover:text-brand-400 transition-colors"
+                  >
+                    {link.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+
+        {/* Bottom Bar */}
+        <div className="mt-12 pt-8 border-t border-gray-200 dark:border-gray-800">
+          <p className="text-sm text-center text-gray-500 dark:text-gray-400">
+            &copy; {currentYear} {t('marketing.footer.copyright')}
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
--- a/frontend/src/components/marketing/Hero.tsx
+++ b/frontend/src/components/marketing/Hero.tsx
@@ -0,0 +1,166 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Play, ArrowRight, CheckCircle } from 'lucide-react';
+
+const Hero: React.FC = () => {
+  const { t } = useTranslation();
+
+  return (
+    <section className="relative overflow-hidden bg-gradient-to-br from-white via-brand-50/30 to-white dark:from-gray-900 dark:via-gray-900 dark:to-gray-900">
+      {/* Background Pattern */}
+      <div className="absolute inset-0 overflow-hidden">
+        <div className="absolute -top-40 -right-40 w-80 h-80 bg-brand-100 dark:bg-brand-500/10 rounded-full blur-3xl opacity-50 dark:opacity-30" />
+        <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-brand-100 dark:bg-brand-500/10 rounded-full blur-3xl opacity-50 dark:opacity-30" />
+      </div>
+
+      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 lg:py-32">
+        <div className="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
+          {/* Left Content */}
+          <div className="text-center lg:text-left">
+            {/* Badge */}
+            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-50 dark:bg-brand-900/30 border border-brand-200 dark:border-brand-800 mb-6">
+              <span className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
+              <span className="text-sm font-medium text-brand-700 dark:text-brand-300">
+                {t('marketing.pricing.startToday')}
+              </span>
+            </div>
+
+            {/* Headline */}
+            <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 dark:text-white leading-tight mb-6">
+              {t('marketing.hero.headline')}
+            </h1>
+
+            {/* Subheadline */}
+            <p className="text-lg sm:text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-xl mx-auto lg:mx-0">
+              {t('marketing.hero.subheadline')}
+            </p>
+
+            {/* CTAs */}
+            <div className="flex flex-col sm:flex-row items-center gap-4 justify-center lg:justify-start mb-8">
+              <Link
+                to="/signup"
+                className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-6 py-3.5 text-base font-semibold text-white bg-brand-600 rounded-xl hover:bg-brand-700 shadow-lg shadow-brand-600/25 hover:shadow-brand-600/40 transition-all duration-200"
+              >
+                {t('marketing.hero.cta')}
+                <ArrowRight className="h-5 w-5" />
+              </Link>
+              <button
+                onClick={() => {/* TODO: Open demo modal/video */}}
+                className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-6 py-3.5 text-base font-semibold text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors"
+              >
+                <Play className="h-5 w-5" />
+                {t('marketing.hero.secondaryCta')}
+              </button>
+            </div>
+
+            {/* Trust Indicators */}
+            <div className="flex flex-col sm:flex-row items-center gap-4 text-sm text-gray-500 dark:text-gray-400 justify-center lg:justify-start">
+              <div className="flex items-center gap-2">
+                <CheckCircle className="h-5 w-5 text-green-500" />
+                <span>{t('marketing.pricing.noCredit')}</span>
+              </div>
+              <div className="hidden sm:block w-1 h-1 bg-gray-300 dark:bg-gray-600 rounded-full" />
+              <div className="flex items-center gap-2">
+                <CheckCircle className="h-5 w-5 text-green-500" />
+                <span>{t('marketing.pricing.startToday')}</span>
+              </div>
+            </div>
+          </div>
+
+          {/* Right Content - Dashboard Preview */}
+          <div className="relative">
+            <div className="relative rounded-2xl overflow-hidden shadow-2xl shadow-brand-600/10 border border-gray-200 dark:border-gray-700">
+              {/* Mock Dashboard */}
+              <div className="bg-white dark:bg-gray-800 aspect-[4/3]">
+                {/* Mock Header */}
+                <div className="flex items-center gap-2 px-4 py-3 border-b border-gray-200 dark:border-gray-700">
+                  <div className="flex gap-1.5">
+                    <div className="w-3 h-3 rounded-full bg-red-400" />
+                    <div className="w-3 h-3 rounded-full bg-yellow-400" />
+                    <div className="w-3 h-3 rounded-full bg-green-400" />
+                  </div>
+                  <div className="flex-1 text-center">
+                    <div className="inline-block px-4 py-1 rounded-lg bg-gray-100 dark:bg-gray-700 text-xs text-gray-500 dark:text-gray-400">
+                      dashboard.smoothschedule.com
+                    </div>
+                  </div>
+                </div>
+
+                {/* Mock Content */}
+                <div className="p-4 space-y-4">
+                  {/* Stats Row */}
+                  <div className="grid grid-cols-3 gap-3">
+                    {[
+                      { label: 'Today', value: '12', color: 'brand' },
+                      { label: 'This Week', value: '48', color: 'green' },
+                      { label: 'Revenue', value: '$2.4k', color: 'purple' },
+                    ].map((stat) => (
+                      <div key={stat.label} className="p-3 rounded-lg bg-gray-50 dark:bg-gray-700/50">
+                        <div className="text-xs text-gray-500 dark:text-gray-400 mb-1">{stat.label}</div>
+                        <div className="text-lg font-bold text-gray-900 dark:text-white">{stat.value}</div>
+                      </div>
+                    ))}
+                  </div>
+
+                  {/* Calendar Mock */}
+                  <div className="rounded-lg bg-gray-50 dark:bg-gray-700/50 p-3">
+                    <div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-3">Today's Schedule</div>
+                    <div className="space-y-2">
+                      {[
+                        { time: '9:00 AM', title: 'Sarah J. - Haircut', color: 'brand' },
+                        { time: '10:30 AM', title: 'Mike T. - Consultation', color: 'green' },
+                        { time: '2:00 PM', title: 'Emma W. - Color', color: 'purple' },
+                      ].map((apt, i) => (
+                        <div key={i} className="flex items-center gap-3 p-2 rounded-lg bg-white dark:bg-gray-800">
+                          <div className={`w-1 h-8 rounded-full ${
+                            apt.color === 'brand' ? 'bg-brand-500' :
+                            apt.color === 'green' ? 'bg-green-500' : 'bg-purple-500'
+                          }`} />
+                          <div>
+                            <div className="text-xs text-gray-500 dark:text-gray-400">{apt.time}</div>
+                            <div className="text-sm font-medium text-gray-900 dark:text-white">{apt.title}</div>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Floating Elements */}
+            <div className="absolute -bottom-4 -left-4 px-4 py-3 rounded-xl bg-white dark:bg-gray-800 shadow-xl border border-gray-200 dark:border-gray-700">
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center">
+                  <CheckCircle className="h-5 w-5 text-green-600 dark:text-green-400" />
+                </div>
+                <div>
+                  <div className="text-sm font-semibold text-gray-900 dark:text-white">New Booking!</div>
+                  <div className="text-xs text-gray-500 dark:text-gray-400">Just now</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Trust Badge */}
+        <div className="mt-16 text-center">
+          <p className="text-sm text-gray-500 dark:text-gray-400 mb-6">
+            {t('marketing.hero.trustedBy')}
+          </p>
+          <div className="flex flex-wrap items-center justify-center gap-8 opacity-50">
+            {/* Mock company logos - replace with actual logos */}
+            {['TechCorp', 'Innovate', 'StartupX', 'GrowthCo', 'ScaleUp'].map((name) => (
+              <div key={name} className="text-lg font-bold text-gray-400 dark:text-gray-500">
+                {name}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Hero;
--- a/frontend/src/components/marketing/HowItWorks.tsx
+++ b/frontend/src/components/marketing/HowItWorks.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { UserPlus, Settings, Rocket } from 'lucide-react';
+
+const HowItWorks: React.FC = () => {
+  const { t } = useTranslation();
+
+  const steps = [
+    {
+      number: '01',
+      icon: UserPlus,
+      title: t('marketing.howItWorks.step1.title'),
+      description: t('marketing.howItWorks.step1.description'),
+      color: 'brand',
+    },
+    {
+      number: '02',
+      icon: Settings,
+      title: t('marketing.howItWorks.step2.title'),
+      description: t('marketing.howItWorks.step2.description'),
+      color: 'purple',
+    },
+    {
+      number: '03',
+      icon: Rocket,
+      title: t('marketing.howItWorks.step3.title'),
+      description: t('marketing.howItWorks.step3.description'),
+      color: 'green',
+    },
+  ];
+
+  const colorClasses: Record<string, { bg: string; text: string; border: string }> = {
+    brand: {
+      bg: 'bg-brand-100 dark:bg-brand-900/30',
+      text: 'text-brand-600 dark:text-brand-400',
+      border: 'border-brand-200 dark:border-brand-800',
+    },
+    purple: {
+      bg: 'bg-purple-100 dark:bg-purple-900/30',
+      text: 'text-purple-600 dark:text-purple-400',
+      border: 'border-purple-200 dark:border-purple-800',
+    },
+    green: {
+      bg: 'bg-green-100 dark:bg-green-900/30',
+      text: 'text-green-600 dark:text-green-400',
+      border: 'border-green-200 dark:border-green-800',
+    },
+  };
+
+  return (
+    <section className="py-20 lg:py-28 bg-gray-50 dark:bg-gray-800/50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Header */}
+        <div className="text-center mb-16">
+          <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-4">
+            {t('marketing.howItWorks.title')}
+          </h2>
+          <p className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
+            {t('marketing.howItWorks.subtitle')}
+          </p>
+        </div>
+
+        {/* Steps */}
+        <div className="grid md:grid-cols-3 gap-8 lg:gap-12">
+          {steps.map((step, index) => {
+            const colors = colorClasses[step.color];
+            return (
+              <div key={step.number} className="relative">
+                {/* Connector Line (hidden on mobile) */}
+                {index < steps.length - 1 && (
+                  <div className="hidden md:block absolute top-16 left-1/2 w-full h-0.5 bg-gradient-to-r from-gray-200 dark:from-gray-700 to-transparent" />
+                )}
+
+                <div className="relative bg-white dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700 text-center">
+                  {/* Step Number */}
+                  <div className={`absolute -top-4 left-1/2 -translate-x-1/2 px-3 py-1 rounded-full ${colors.bg} ${colors.text} border ${colors.border} text-sm font-bold`}>
+                    {step.number}
+                  </div>
+
+                  {/* Icon */}
+                  <div className={`inline-flex p-4 rounded-2xl ${colors.bg} mb-6`}>
+                    <step.icon className={`h-8 w-8 ${colors.text}`} />
+                  </div>
+
+                  {/* Content */}
+                  <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">
+                    {step.title}
+                  </h3>
+                  <p className="text-gray-600 dark:text-gray-400">
+                    {step.description}
+                  </p>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default HowItWorks;
--- a/frontend/src/components/marketing/Navbar.tsx
+++ b/frontend/src/components/marketing/Navbar.tsx
@@ -0,0 +1,164 @@
+import React, { useState, useEffect } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Menu, X, Sun, Moon } from 'lucide-react';
+import SmoothScheduleLogo from '../SmoothScheduleLogo';
+import LanguageSelector from '../LanguageSelector';
+
+interface NavbarProps {
+  darkMode: boolean;
+  toggleTheme: () => void;
+}
+
+const Navbar: React.FC<NavbarProps> = ({ darkMode, toggleTheme }) => {
+  const { t } = useTranslation();
+  const location = useLocation();
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 10);
+    };
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  // Close mobile menu on route change
+  useEffect(() => {
+    setIsMenuOpen(false);
+  }, [location.pathname]);
+
+  const navLinks = [
+    { to: '/features', label: t('marketing.nav.features') },
+    { to: '/pricing', label: t('marketing.nav.pricing') },
+    { to: '/about', label: t('marketing.nav.about') },
+    { to: '/contact', label: t('marketing.nav.contact') },
+  ];
+
+  const isActive = (path: string) => location.pathname === path;
+
+  return (
+    <nav
+      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
+        isScrolled
+          ? 'bg-white/80 dark:bg-gray-900/80 backdrop-blur-lg shadow-sm'
+          : 'bg-transparent'
+      }`}
+    >
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between h-16 lg:h-20">
+          {/* Logo */}
+          <Link to="/" className="flex items-center gap-2 group">
+            <SmoothScheduleLogo className="h-12 w-12 text-gray-900 dark:text-white group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors" />
+            <span className="text-xl font-bold text-gray-900 dark:text-white hidden sm:block">
+              Smooth Schedule
+            </span>
+          </Link>
+
+          {/* Desktop Navigation */}
+          <div className="hidden lg:flex items-center gap-8">
+            {navLinks.map((link) => (
+              <Link
+                key={link.to}
+                to={link.to}
+                className={`text-sm font-medium transition-colors ${
+                  isActive(link.to)
+                    ? 'text-brand-600 dark:text-brand-400'
+                    : 'text-gray-600 dark:text-gray-300 hover:text-brand-600 dark:hover:text-brand-400'
+                }`}
+              >
+                {link.label}
+              </Link>
+            ))}
+          </div>
+
+          {/* Right Section */}
+          <div className="flex items-center gap-3">
+            {/* Language Selector - Hidden on mobile */}
+            <div className="hidden md:block">
+              <LanguageSelector />
+            </div>
+
+            {/* Theme Toggle */}
+            <button
+              onClick={toggleTheme}
+              className="p-2 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+              aria-label={darkMode ? 'Switch to light mode' : 'Switch to dark mode'}
+            >
+              {darkMode ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
+            </button>
+
+            {/* Login Button - Hidden on mobile */}
+            <Link
+              to="/login"
+              className="hidden md:inline-flex px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-brand-600 dark:hover:text-brand-400 transition-colors"
+            >
+              {t('marketing.nav.login')}
+            </Link>
+
+            {/* Get Started CTA */}
+            <Link
+              to="/signup"
+              className="hidden sm:inline-flex px-4 py-2 text-sm font-medium text-white bg-brand-600 rounded-lg hover:bg-brand-700 transition-colors shadow-sm"
+            >
+              {t('marketing.nav.getStarted')}
+            </Link>
+
+            {/* Mobile Menu Button */}
+            <button
+              onClick={() => setIsMenuOpen(!isMenuOpen)}
+              className="lg:hidden p-2 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+              aria-label="Toggle menu"
+            >
+              {isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile Menu */}
+      <div
+        className={`lg:hidden overflow-hidden transition-all duration-300 ${
+          isMenuOpen ? 'max-h-96' : 'max-h-0'
+        }`}
+      >
+        <div className="px-4 py-4 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800">
+          <div className="flex flex-col gap-2">
+            {navLinks.map((link) => (
+              <Link
+                key={link.to}
+                to={link.to}
+                className={`px-4 py-3 rounded-lg text-sm font-medium transition-colors ${
+                  isActive(link.to)
+                    ? 'bg-brand-50 dark:bg-brand-900/20 text-brand-600 dark:text-brand-400'
+                    : 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
+                }`}
+              >
+                {link.label}
+              </Link>
+            ))}
+            <hr className="my-2 border-gray-200 dark:border-gray-800" />
+            <Link
+              to="/login"
+              className="px-4 py-3 rounded-lg text-sm font-medium text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+            >
+              {t('marketing.nav.login')}
+            </Link>
+            <Link
+              to="/signup"
+              className="px-4 py-3 rounded-lg text-sm font-medium text-center text-white bg-brand-600 hover:bg-brand-700 transition-colors"
+            >
+              {t('marketing.nav.getStarted')}
+            </Link>
+            <div className="px-4 py-2">
+              <LanguageSelector />
+            </div>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;
--- a/frontend/src/components/marketing/PricingCard.tsx
+++ b/frontend/src/components/marketing/PricingCard.tsx
@@ -0,0 +1,185 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Check } from 'lucide-react';
+
+interface PricingCardProps {
+  tier: 'free' | 'professional' | 'business' | 'enterprise';
+  highlighted?: boolean;
+  billingPeriod: 'monthly' | 'annual';
+}
+
+const PricingCard: React.FC<PricingCardProps> = ({
+  tier,
+  highlighted = false,
+  billingPeriod,
+}) => {
+  const { t } = useTranslation();
+
+  const tierData = {
+    free: {
+      price: 0,
+      annualPrice: 0,
+    },
+    professional: {
+      price: 29,
+      annualPrice: 290,
+    },
+    business: {
+      price: 79,
+      annualPrice: 790,
+    },
+    enterprise: {
+      price: 'custom',
+      annualPrice: 'custom',
+    },
+  };
+
+  const data = tierData[tier];
+  const price = billingPeriod === 'annual' ? data.annualPrice : data.price;
+  const isCustom = price === 'custom';
+
+  // Get features array from i18n
+  const features = t(`marketing.pricing.tiers.${tier}.features`, { returnObjects: true }) as string[];
+  const transactionFee = t(`marketing.pricing.tiers.${tier}.transactionFee`);
+  const trialInfo = t(`marketing.pricing.tiers.${tier}.trial`);
+
+  if (highlighted) {
+    return (
+      <div className="relative flex flex-col p-8 bg-brand-600 rounded-2xl shadow-xl shadow-brand-600/20">
+        {/* Most Popular Badge */}
+        <div className="absolute -top-4 left-1/2 -translate-x-1/2 px-4 py-1.5 bg-brand-500 text-white text-sm font-semibold rounded-full whitespace-nowrap">
+          {t('marketing.pricing.mostPopular')}
+        </div>
+
+        {/* Header */}
+        <div className="mb-6">
+          <h3 className="text-xl font-bold text-white mb-2">
+            {t(`marketing.pricing.tiers.${tier}.name`)}
+          </h3>
+          <p className="text-brand-100">
+            {t(`marketing.pricing.tiers.${tier}.description`)}
+          </p>
+        </div>
+
+        {/* Price */}
+        <div className="mb-6">
+          {isCustom ? (
+            <span className="text-4xl font-bold text-white">
+              {t('marketing.pricing.tiers.enterprise.price')}
+            </span>
+          ) : (
+            <>
+              <span className="text-5xl font-bold text-white">${price}</span>
+              <span className="text-brand-200 ml-2">
+                {billingPeriod === 'annual' ? '/year' : t('marketing.pricing.perMonth')}
+              </span>
+            </>
+          )}
+          {trialInfo && (
+            <div className="mt-2 text-sm text-brand-100">
+              {trialInfo}
+            </div>
+          )}
+        </div>
+
+        {/* Features */}
+        <ul className="flex-1 space-y-3 mb-8">
+          {features.map((feature, index) => (
+            <li key={index} className="flex items-start gap-3">
+              <Check className="h-5 w-5 text-brand-200 flex-shrink-0 mt-0.5" />
+              <span className="text-white">{feature}</span>
+            </li>
+          ))}
+          <li className="flex items-start gap-3 pt-2 border-t border-brand-500">
+            <span className="text-brand-200 text-sm">{transactionFee}</span>
+          </li>
+        </ul>
+
+        {/* CTA */}
+        {isCustom ? (
+          <Link
+            to="/contact"
+            className="block w-full py-3.5 px-4 text-center text-base font-semibold text-brand-600 bg-white rounded-xl hover:bg-brand-50 transition-colors"
+          >
+            {t('marketing.pricing.contactSales')}
+          </Link>
+        ) : (
+          <Link
+            to="/signup"
+            className="block w-full py-3.5 px-4 text-center text-base font-semibold text-brand-600 bg-white rounded-xl hover:bg-brand-50 transition-colors"
+          >
+            {t('marketing.pricing.getStarted')}
+          </Link>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative flex flex-col p-8 bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700">
+      {/* Header */}
+      <div className="mb-6">
+        <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">
+          {t(`marketing.pricing.tiers.${tier}.name`)}
+        </h3>
+        <p className="text-gray-500 dark:text-gray-400">
+          {t(`marketing.pricing.tiers.${tier}.description`)}
+        </p>
+      </div>
+
+      {/* Price */}
+      <div className="mb-6">
+        {isCustom ? (
+          <span className="text-4xl font-bold text-gray-900 dark:text-white">
+            {t('marketing.pricing.tiers.enterprise.price')}
+          </span>
+        ) : (
+          <>
+            <span className="text-5xl font-bold text-gray-900 dark:text-white">${price}</span>
+            <span className="text-gray-500 dark:text-gray-400 ml-2">
+              {billingPeriod === 'annual' ? '/year' : t('marketing.pricing.perMonth')}
+            </span>
+          </>
+        )}
+        {trialInfo && (
+          <div className="mt-2 text-sm text-brand-600 dark:text-brand-400">
+            {trialInfo}
+          </div>
+        )}
+      </div>
+
+      {/* Features */}
+      <ul className="flex-1 space-y-3 mb-8">
+        {features.map((feature, index) => (
+          <li key={index} className="flex items-start gap-3">
+            <Check className="h-5 w-5 text-brand-600 dark:text-brand-400 flex-shrink-0 mt-0.5" />
+            <span className="text-gray-700 dark:text-gray-300">{feature}</span>
+          </li>
+        ))}
+        <li className="flex items-start gap-3 pt-2 border-t border-gray-100 dark:border-gray-700">
+          <span className="text-gray-500 dark:text-gray-400 text-sm">{transactionFee}</span>
+        </li>
+      </ul>
+
+      {/* CTA */}
+      {isCustom ? (
+        <Link
+          to="/contact"
+          className="block w-full py-3.5 px-4 text-center text-base font-semibold text-brand-600 bg-brand-50 dark:bg-brand-900/30 rounded-xl hover:bg-brand-100 dark:hover:bg-brand-900/50 transition-colors"
+        >
+          {t('marketing.pricing.contactSales')}
+        </Link>
+      ) : (
+        <Link
+          to="/signup"
+          className="block w-full py-3.5 px-4 text-center text-base font-semibold text-brand-600 bg-brand-50 dark:bg-brand-900/30 rounded-xl hover:bg-brand-100 dark:hover:bg-brand-900/50 transition-colors"
+        >
+          {t('marketing.pricing.getStarted')}
+        </Link>
+      )}
+    </div>
+  );
+};
+
+export default PricingCard;
--- a/frontend/src/components/marketing/StatsSection.tsx
+++ b/frontend/src/components/marketing/StatsSection.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Calendar, Building2, Globe, Clock } from 'lucide-react';
+
+const StatsSection: React.FC = () => {
+  const { t } = useTranslation();
+
+  const stats = [
+    {
+      icon: Calendar,
+      value: '1M+',
+      label: t('marketing.stats.appointments'),
+      color: 'brand',
+    },
+    {
+      icon: Building2,
+      value: '5,000+',
+      label: t('marketing.stats.businesses'),
+      color: 'green',
+    },
+    {
+      icon: Globe,
+      value: '50+',
+      label: t('marketing.stats.countries'),
+      color: 'purple',
+    },
+    {
+      icon: Clock,
+      value: '99.9%',
+      label: t('marketing.stats.uptime'),
+      color: 'orange',
+    },
+  ];
+
+  const colorClasses: Record<string, string> = {
+    brand: 'text-brand-600 dark:text-brand-400',
+    green: 'text-green-600 dark:text-green-400',
+    purple: 'text-purple-600 dark:text-purple-400',
+    orange: 'text-orange-600 dark:text-orange-400',
+  };
+
+  return (
+    <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">
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
+          {stats.map((stat) => (
+            <div key={stat.label} className="text-center">
+              <div className="inline-flex p-3 rounded-xl bg-gray-100 dark:bg-gray-800 mb-4">
+                <stat.icon className={`h-6 w-6 ${colorClasses[stat.color]}`} />
+              </div>
+              <div className={`text-4xl lg:text-5xl font-bold mb-2 ${colorClasses[stat.color]}`}>
+                {stat.value}
+              </div>
+              <div className="text-sm text-gray-600 dark:text-gray-400">
+                {stat.label}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default StatsSection;
--- a/frontend/src/components/marketing/TestimonialCard.tsx
+++ b/frontend/src/components/marketing/TestimonialCard.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import { Star } from 'lucide-react';
+
+interface TestimonialCardProps {
+  quote: string;
+  author: string;
+  role: string;
+  company: string;
+  avatarUrl?: string;
+  rating?: number;
+}
+
+const TestimonialCard: React.FC<TestimonialCardProps> = ({
+  quote,
+  author,
+  role,
+  company,
+  avatarUrl,
+  rating = 5,
+}) => {
+  return (
+    <div className="flex flex-col p-6 bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 shadow-sm hover:shadow-md transition-shadow">
+      {/* Stars */}
+      <div className="flex gap-1 mb-4">
+        {[...Array(5)].map((_, i) => (
+          <Star
+            key={i}
+            className={`h-5 w-5 ${
+              i < rating
+                ? 'text-yellow-400 fill-yellow-400'
+                : 'text-gray-300 dark:text-gray-600'
+            }`}
+          />
+        ))}
+      </div>
+
+      {/* Quote */}
+      <blockquote className="flex-1 text-gray-700 dark:text-gray-300 mb-6 leading-relaxed">
+        "{quote}"
+      </blockquote>
+
+      {/* Author */}
+      <div className="flex items-center gap-3">
+        {avatarUrl ? (
+          <img
+            src={avatarUrl}
+            alt={author}
+            className="w-12 h-12 rounded-full object-cover"
+          />
+        ) : (
+          <div className="w-12 h-12 rounded-full bg-brand-100 dark:bg-brand-900/30 flex items-center justify-center">
+            <span className="text-lg font-semibold text-brand-600 dark:text-brand-400">
+              {author.charAt(0)}
+            </span>
+          </div>
+        )}
+        <div>
+          <div className="font-semibold text-gray-900 dark:text-white">{author}</div>
+          <div className="text-sm text-gray-500 dark:text-gray-400">
+            {role} at {company}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TestimonialCard;