Add missing frontend platform components and update production deployment

This commit adds all previously untracked files and modifications needed for production deployment:
- New marketing components (BenefitsSection, CodeBlock, PluginShowcase, PricingTable)
- Platform admin components (EditPlatformEntityModal, PlatformListRow, PlatformListing, PlatformTable)
- Updated deployment configuration and scripts
- Various frontend API and component improvements

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

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

frontend/src/components/DevQuickLogin.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import apiClient from '../api/client';
 import { setCookie } from '../utils/cookies';
 import { useQueryClient } from '@tanstack/react-query';
+import { getBaseDomain, buildSubdomainUrl } from '../utils/domain';
 
 export interface TestUser {
   username: string;
@@ -88,7 +89,7 @@ export function DevQuickLogin({ embedded = false }: DevQuickLoginProps) {
     setLoading(user.username);
     try {
       // Call token auth API
-      const response = await apiClient.post('/auth-token/', {
+      const response = await apiClient.post('/api/auth-token/', {
         username: user.username,
         password: user.password,
       });
@@ -97,7 +98,7 @@ export function DevQuickLogin({ embedded = false }: DevQuickLoginProps) {
       setCookie('access_token', response.data.token, 7);
 
       // Fetch user data to determine redirect
-      const userResponse = await apiClient.get('/auth/me/');
+      const userResponse = await apiClient.get('/api/auth/me/');
       const userData = userResponse.data;
 
       // Determine the correct subdomain based on user role
@@ -115,13 +116,13 @@ export function DevQuickLogin({ embedded = false }: DevQuickLoginProps) {
       }
 
       // Check if we need to redirect to a different subdomain
-      const isOnTargetSubdomain = currentHostname === `${targetSubdomain}.lvh.me`;
+      const baseDomain = getBaseDomain();
+      const isOnTargetSubdomain = currentHostname === (targetSubdomain ? `${targetSubdomain}.${baseDomain}` : baseDomain);
       const needsRedirect = targetSubdomain && !isOnTargetSubdomain;
 
       if (needsRedirect) {
         // Redirect to the correct subdomain
-        const portStr = currentPort ? `:${currentPort}` : '';
-        window.location.href = `http://${targetSubdomain}.lvh.me${portStr}/`;
+        window.location.href = buildSubdomainUrl(targetSubdomain, '/');
         return;
       }
 

frontend/src/components/marketing/BenefitsSection.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Rocket, Shield, Zap, Headphones } from 'lucide-react';
+
+const BenefitsSection: React.FC = () => {
+    const benefits = [
+        {
+            icon: Rocket,
+            title: 'Rapid Deployment',
+            description: 'Launch your branded booking portal in minutes with our pre-configured industry templates.',
+            color: 'text-blue-600 dark:text-blue-400',
+            bgColor: 'bg-blue-100 dark:bg-blue-900/30',
+        },
+        {
+            icon: Shield,
+            title: 'Enterprise Security',
+            description: 'Sleep soundly knowing your data is physically isolated in its own dedicated secure vault.',
+            color: 'text-green-600 dark:text-green-400',
+            bgColor: 'bg-green-100 dark:bg-green-900/30',
+        },
+        {
+            icon: Zap,
+            title: 'High Performance',
+            description: 'Built on a modern, edge-cached architecture to ensure instant loading times globally.',
+            color: 'text-purple-600 dark:text-purple-400',
+            bgColor: 'bg-purple-100 dark:bg-purple-900/30',
+        },
+        {
+            icon: Headphones,
+            title: 'Expert Support',
+            description: 'Our team of scheduling experts is available to help you optimize your automation workflows.',
+            color: 'text-orange-600 dark:text-orange-400',
+            bgColor: 'bg-orange-100 dark:bg-orange-900/30',
+        },
+    ];
+
+    return (
+        <section className="py-20 bg-white dark:bg-gray-900 border-y border-gray-100 dark:border-gray-800">
+            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+                    {benefits.map((benefit, index) => (
+                        <div key={index} className="text-center group hover:-translate-y-1 transition-transform duration-300">
+                            <div className={`inline-flex p-4 rounded-2xl ${benefit.bgColor} mb-6 group-hover:scale-110 transition-transform duration-300`}>
+                                <benefit.icon className={`w-8 h-8 ${benefit.color}`} />
+                            </div>
+                            <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-3">
+                                {benefit.title}
+                            </h3>
+                            <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
+                                {benefit.description}
+                            </p>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default BenefitsSection;

frontend/src/components/marketing/CodeBlock.tsx

@@ -0,0 +1,122 @@
+import React from 'react';
+import { Check, Copy } from 'lucide-react';
+
+interface CodeBlockProps {
+    code: string;
+    language?: string;
+    filename?: string;
+}
+
+const CodeBlock: React.FC<CodeBlockProps> = ({ code, language = 'python', filename }) => {
+    const [copied, setCopied] = React.useState(false);
+
+    const handleCopy = () => {
+        navigator.clipboard.writeText(code);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    };
+
+    return (
+        <div className="rounded-xl overflow-hidden bg-gray-900 border border-gray-800 shadow-2xl">
+            {/* Header */}
+            <div className="flex items-center justify-between px-4 py-2 bg-gray-800/50 border-b border-gray-800">
+                <div className="flex items-center gap-2">
+                    <div className="flex gap-1.5">
+                        <div className="w-3 h-3 rounded-full bg-red-500/20 border border-red-500/50" />
+                        <div className="w-3 h-3 rounded-full bg-yellow-500/20 border border-yellow-500/50" />
+                        <div className="w-3 h-3 rounded-full bg-green-500/20 border border-green-500/50" />
+                    </div>
+                    {filename && (
+                        <span className="ml-2 text-xs font-medium text-gray-400 font-mono">
+                            {filename}
+                        </span>
+                    )}
+                </div>
+                <button
+                    onClick={handleCopy}
+                    className="p-1.5 rounded-lg text-gray-400 hover:text-white hover:bg-gray-700/50 transition-colors"
+                    title="Copy code"
+                >
+                    {copied ? <Check className="w-4 h-4 text-green-400" /> : <Copy className="w-4 h-4" />}
+                </button>
+            </div>
+
+            {/* Code */}
+            <div className="p-4 overflow-x-auto">
+                <pre className="font-mono text-sm leading-relaxed">
+                    <code className={`language-${language}`}>
+                        {code.split('\n').map((line, i) => (
+                            <div key={i} className="table-row">
+                                <span className="table-cell text-right pr-4 select-none text-gray-700 w-8">
+                                    {i + 1}
+                                </span>
+                                <span className="table-cell text-gray-300 whitespace-pre">
+                                    {highlightSyntax(line)}
+                                </span>
+                            </div>
+                        ))}
+                    </code>
+                </pre>
+            </div>
+        </div>
+    );
+};
+
+// Simple syntax highlighting for Python/JSON
+const highlightSyntax = (line: string) => {
+    // Comments
+    if (line.trim().startsWith('#') || line.trim().startsWith('//')) {
+        return <span className="text-gray-500">{line}</span>;
+    }
+
+    // Strings
+    const stringRegex = /(['"])(.*?)\1/g;
+    const parts = line.split(stringRegex);
+
+    if (parts.length > 1) {
+        return (
+            <>
+                {parts.map((part, i) => {
+                    // Every 3rd part is the quote, then content, then quote again
+                    // This is a very naive implementation but works for simple marketing snippets
+                    if (i % 3 === 1) return <span key={i} className="text-green-400">"{part}"</span>; // Content
+                    if (i % 3 === 2) return null; // Closing quote (handled by regex split logic usually, but here we just color content)
+
+                    // Keywords
+                    return <React.Fragment key={i}>{highlightKeywords(part)}</React.Fragment>;
+                })}
+            </>
+        );
+    }
+
+    return highlightKeywords(line);
+};
+
+const highlightKeywords = (text: string) => {
+    const keywords = ['def', 'class', 'return', 'import', 'from', 'if', 'else', 'for', 'in', 'True', 'False', 'None'];
+    const words = text.split(' ');
+
+    return (
+        <>
+            {words.map((word, i) => {
+                const isKeyword = keywords.includes(word.trim());
+                const isFunction = word.includes('(');
+
+                return (
+                    <React.Fragment key={i}>
+                        {isKeyword ? (
+                            <span className="text-purple-400">{word}</span>
+                        ) : isFunction ? (
+                            <span className="text-blue-400">{word}</span>
+                        ) : (
+                            word
+                        )}
+                        {' '}
+                    </React.Fragment>
+                );
+            })}
+        </>
+    );
+};
+
+export default CodeBlock;

frontend/src/components/marketing/Hero.tsx

@@ -1,165 +1,109 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Play, ArrowRight, CheckCircle } from 'lucide-react';
+import { ArrowRight, Play, CheckCircle2 } 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 className="relative overflow-hidden bg-white dark:bg-gray-900 pt-16 pb-20 lg:pt-24 lg:pb-28">
+      {/* Background Elements */}
+      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full max-w-7xl pointer-events-none">
+        <div className="absolute top-20 right-0 w-[600px] h-[600px] bg-brand-500/10 rounded-full blur-3xl" />
+        <div className="absolute bottom-0 left-0 w-[400px] h-[400px] bg-purple-500/10 rounded-full blur-3xl" />
       </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="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="grid lg:grid-cols-2 gap-12 lg:gap-8 items-center">
+          {/* Text 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" />
+            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-50 dark:bg-brand-900/30 border border-brand-100 dark:border-brand-800 mb-6">
+              <span className="flex h-2 w-2 rounded-full bg-brand-600 dark:bg-brand-400 animate-pulse" />
               <span className="text-sm font-medium text-brand-700 dark:text-brand-300">
-                {t('marketing.pricing.startToday')}
+                New: Automation Marketplace
               </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 className="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-gray-900 dark:text-white mb-6">
+              The Operating System for <span className="text-brand-600 dark:text-brand-400">Service Businesses</span>
             </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 className="text-lg sm:text-xl text-gray-600 dark:text-gray-400 mb-8 max-w-2xl mx-auto lg:mx-0">
+              Orchestrate your entire operation with intelligent scheduling and powerful automation. No coding required.
             </p>
 
-            {/* CTAs */}
-            <div className="flex flex-col sm:flex-row items-center gap-4 justify-center lg:justify-start mb-8">
+            <div className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start mb-10">
               <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"
+                className="inline-flex items-center justify-center px-6 py-3 text-base font-medium text-white bg-brand-600 hover:bg-brand-700 rounded-lg transition-colors shadow-lg shadow-brand-600/20"
               >
-                {t('marketing.hero.cta')}
-                <ArrowRight className="h-5 w-5" />
+                Start Free Trial
+                <ArrowRight className="ml-2 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"
+              <Link
+                to="/features"
+                className="inline-flex items-center justify-center px-6 py-3 text-base font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg transition-colors"
               >
-                <Play className="h-5 w-5" />
-                {t('marketing.hero.secondaryCta')}
-              </button>
+                <Play className="mr-2 h-5 w-5 fill-current" />
+                Watch Demo
+              </Link>
             </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 flex-wrap gap-x-8 gap-y-4 justify-center lg:justify-start text-sm text-gray-500 dark:text-gray-400">
               <div className="flex items-center gap-2">
-                <CheckCircle className="h-5 w-5 text-green-500" />
-                <span>{t('marketing.pricing.noCredit')}</span>
+                <CheckCircle2 className="h-4 w-4 text-green-500" />
+                <span>No credit card required</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>
+                <CheckCircle2 className="h-4 w-4 text-green-500" />
+                <span>14-day free trial</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <CheckCircle2 className="h-4 w-4 text-green-500" />
+                <span>Cancel anytime</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>
+          {/* Visual Content */}
+          <div className="relative lg:ml-auto w-full max-w-lg lg:max-w-none mx-auto">
+            <div className="relative rounded-2xl bg-gray-900 shadow-2xl border border-gray-800 overflow-hidden aspect-[4/3] flex items-center justify-center bg-gradient-to-br from-gray-800 to-gray-900">
+              {/* Abstract Representation of Marketplace/Dashboard */}
+              <div className="text-center p-8">
+                <div className="inline-flex p-4 bg-brand-500/20 rounded-2xl mb-6">
+                  <CheckCircle2 className="w-16 h-16 text-brand-400" />
                 </div>
+                <h3 className="text-2xl font-bold text-white mb-2">Automated Success</h3>
+                <p className="text-gray-400">Your business, running on autopilot.</p>
 
-                {/* 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 className="mt-8 grid grid-cols-2 gap-4">
+                  <div className="bg-gray-800/50 p-3 rounded-lg border border-gray-700">
+                    <div className="text-green-400 font-bold">+24%</div>
+                    <div className="text-xs text-gray-500">Revenue</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 className="bg-gray-800/50 p-3 rounded-lg border border-gray-700">
+                    <div className="text-blue-400 font-bold">-40%</div>
+                    <div className="text-xs text-gray-500">No-Shows</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>
+            {/* Floating Badge */}
+            <div className="absolute -bottom-6 -left-6 bg-white dark:bg-gray-800 p-4 rounded-xl shadow-xl border border-gray-100 dark:border-gray-700 flex items-center gap-3 animate-bounce-slow">
+              <div className="p-2 bg-green-100 dark:bg-green-900/30 rounded-lg text-green-600 dark:text-green-400">
+                <CheckCircle2 className="w-6 h-6" />
+              </div>
+              <div>
+                <div className="text-sm font-medium text-gray-900 dark:text-white">Revenue Optimized</div>
+                <div className="text-xs text-gray-500 dark:text-gray-400">+$2,400 this week</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>
+    </div>
   );
 };
 

frontend/src/components/marketing/PluginShowcase.tsx

@@ -0,0 +1,236 @@
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Mail, Calendar, Bell, ArrowRight, Zap, CheckCircle2, Code, LayoutGrid } from 'lucide-react';
+import CodeBlock from './CodeBlock';
+
+const PluginShowcase: React.FC = () => {
+    const [activeTab, setActiveTab] = useState(0);
+    const [viewMode, setViewMode] = useState<'marketplace' | 'code'>('marketplace');
+
+    const examples = [
+        {
+            id: 'winback',
+            icon: Mail,
+            title: 'Client Win-Back',
+            description: 'Automatically re-engage customers who haven\'t visited in 60 days.',
+            stats: ['+15% Retention', '$4k/mo Revenue'],
+            marketplaceImage: 'bg-gradient-to-br from-pink-500 to-rose-500',
+            code: `# Win back lost customers
+days_inactive = 60
+discount = "20%"
+
+# Find inactive customers
+inactive = api.get_customers(
+    last_visit_lt=days_ago(days_inactive)
+)
+
+# Send personalized offer
+for customer in inactive:
+    api.send_email(
+        to=customer.email,
+        subject="We miss you!",
+        body=f"Come back for {discount} off!"
+    )`,
+        },
+        {
+            id: 'noshow',
+            icon: Bell,
+            title: 'No-Show Prevention',
+            description: 'Send SMS reminders 2 hours before appointments to reduce no-shows.',
+            stats: ['-40% No-Shows', 'Better Utilization'],
+            marketplaceImage: 'bg-gradient-to-br from-blue-500 to-cyan-500',
+            code: `# Prevent no-shows
+hours_before = 2
+
+# Find upcoming appointments
+upcoming = api.get_appointments(
+    start_time__within=hours(hours_before)
+)
+
+# Send SMS reminder
+for appt in upcoming:
+    api.send_sms(
+        to=appt.customer.phone,
+        body=f"Reminder: Appointment in 2h at {appt.time}"
+    )`,
+        },
+        {
+            id: 'report',
+            icon: Calendar,
+            title: 'Daily Reports',
+            description: 'Get a summary of tomorrow\'s schedule sent to your inbox every evening.',
+            stats: ['Save 30min/day', 'Full Visibility'],
+            marketplaceImage: 'bg-gradient-to-br from-purple-500 to-indigo-500',
+            code: `# Daily Manager Report
+tomorrow = date.today() + timedelta(days=1)
+
+# Get schedule stats
+stats = api.get_schedule_stats(date=tomorrow)
+revenue = api.forecast_revenue(date=tomorrow)
+
+# Email manager
+api.send_email(
+    to="manager@business.com",
+    subject=f"Schedule for {tomorrow}",
+    body=f"Bookings: {stats.count}, Est. Rev: \${revenue}"
+)`,
+        },
+    ];
+
+    const CurrentIcon = examples[activeTab].icon;
+
+    return (
+        <section className="py-24 bg-gray-50 dark:bg-gray-900 overflow-hidden">
+            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div className="grid lg:grid-cols-2 gap-16 items-center">
+
+                    {/* Left Column: Content */}
+                    <div>
+                        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-100 dark:bg-brand-900/30 text-brand-600 dark:text-brand-400 text-sm font-medium mb-6">
+                            <Zap className="w-4 h-4" />
+                            <span>Limitless Automation</span>
+                        </div>
+
+                        <h2 className="text-4xl font-bold text-gray-900 dark:text-white mb-6">
+                            Choose from our Marketplace, or build your own.
+                        </h2>
+
+                        <p className="text-lg text-gray-600 dark:text-gray-400 mb-10">
+                            Browse hundreds of pre-built plugins to automate your workflows instantly.
+                            Need something custom? Developers can write Python scripts to extend the platform endlessly.
+                        </p>
+
+                        <div className="space-y-4">
+                            {examples.map((example, index) => (
+                                <button
+                                    key={example.id}
+                                    onClick={() => setActiveTab(index)}
+                                    className={`w-full text-left p-4 rounded-xl transition-all duration-200 border ${activeTab === index
+                                            ? 'bg-white dark:bg-gray-800 border-brand-500 shadow-lg scale-[1.02]'
+                                            : 'bg-transparent border-transparent hover:bg-white/50 dark:hover:bg-gray-800/50'
+                                        }`}
+                                >
+                                    <div className="flex items-start gap-4">
+                                        <div className={`p-2 rounded-lg ${activeTab === index
+                                                ? 'bg-brand-100 text-brand-600 dark:bg-brand-900/50 dark:text-brand-400'
+                                                : 'bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400'
+                                            }`}>
+                                            <example.icon className="w-6 h-6" />
+                                        </div>
+                                        <div>
+                                            <h3 className={`font-semibold mb-1 ${activeTab === index ? 'text-gray-900 dark:text-white' : 'text-gray-600 dark:text-gray-400'
+                                                }`}>
+                                                {example.title}
+                                            </h3>
+                                            <p className="text-sm text-gray-500 dark:text-gray-500">
+                                                {example.description}
+                                            </p>
+                                        </div>
+                                    </div>
+                                </button>
+                            ))}
+                        </div>
+                    </div>
+
+                    {/* Right Column: Visuals */}
+                    <div className="relative">
+                        {/* Background Decor */}
+                        <div className="absolute -inset-4 bg-gradient-to-r from-brand-500/20 to-purple-500/20 rounded-3xl blur-2xl opacity-50" />
+
+                        {/* View Toggle */}
+                        <div className="absolute -top-12 right-0 flex bg-gray-100 dark:bg-gray-800 p-1 rounded-lg border border-gray-200 dark:border-gray-700">
+                            <button
+                                onClick={() => setViewMode('marketplace')}
+                                className={`flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium transition-all ${viewMode === 'marketplace'
+                                        ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm'
+                                        : 'text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'
+                                    }`}
+                            >
+                                <LayoutGrid className="w-4 h-4" />
+                                Marketplace
+                            </button>
+                            <button
+                                onClick={() => setViewMode('code')}
+                                className={`flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium transition-all ${viewMode === 'code'
+                                        ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm'
+                                        : 'text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'
+                                    }`}
+                            >
+                                <Code className="w-4 h-4" />
+                                Developer
+                            </button>
+                        </div>
+
+                        <AnimatePresence mode="wait">
+                            <motion.div
+                                key={`${activeTab}-${viewMode}`}
+                                initial={{ opacity: 0, y: 20 }}
+                                animate={{ opacity: 1, y: 0 }}
+                                exit={{ opacity: 0, y: -20 }}
+                                transition={{ duration: 0.3 }}
+                                className="relative mt-8" // Added margin top for toggle
+                            >
+                                {/* Stats Cards */}
+                                <div className="flex gap-4 mb-6">
+                                    {examples[activeTab].stats.map((stat, i) => (
+                                        <div key={i} className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
+                                            <CheckCircle2 className="w-4 h-4 text-green-500" />
+                                            <span className="text-sm font-medium text-gray-900 dark:text-white">{stat}</span>
+                                        </div>
+                                    ))}
+                                </div>
+
+                                {viewMode === 'marketplace' ? (
+                                    // Marketplace Card View
+                                    <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-xl overflow-hidden">
+                                        <div className={`h-32 ${examples[activeTab].marketplaceImage} flex items-center justify-center`}>
+                                            <CurrentIcon className="w-16 h-16 text-white opacity-90" />
+                                        </div>
+                                        <div className="p-6">
+                                            <div className="flex justify-between items-start mb-4">
+                                                <div>
+                                                    <h3 className="text-xl font-bold text-gray-900 dark:text-white">{examples[activeTab].title}</h3>
+                                                    <div className="text-sm text-gray-500">by SmoothSchedule Team</div>
+                                                </div>
+                                                <button className="px-4 py-2 bg-brand-600 text-white rounded-lg font-medium text-sm hover:bg-brand-700 transition-colors">
+                                                    Install Plugin
+                                                </button>
+                                            </div>
+                                            <p className="text-gray-600 dark:text-gray-300 mb-6">
+                                                {examples[activeTab].description}
+                                            </p>
+                                            <div className="flex items-center gap-2 text-sm text-gray-500">
+                                                <div className="flex -space-x-2">
+                                                    {[1, 2, 3].map(i => (
+                                                        <div key={i} className="w-6 h-6 rounded-full bg-gray-300 border-2 border-white dark:border-gray-800" />
+                                                    ))}
+                                                </div>
+                                                <span>Used by 1,200+ businesses</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                ) : (
+                                    // Code View
+                                    <CodeBlock
+                                        code={examples[activeTab].code}
+                                        filename={`${examples[activeTab].id}_plugin.py`}
+                                    />
+                                )}
+
+                                {/* CTA */}
+                                <div className="mt-6 text-right">
+                                    <a href="/features" className="inline-flex items-center gap-2 text-brand-600 dark:text-brand-400 font-medium hover:underline">
+                                        Explore the Marketplace <ArrowRight className="w-4 h-4" />
+                                    </a>
+                                </div>
+                            </motion.div>
+                        </AnimatePresence>
+                    </div>
+
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default PluginShowcase;

frontend/src/components/marketing/PricingTable.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import { Check, X } from 'lucide-react';
+import { Link } from 'react-router-dom';
+
+const PricingTable: React.FC = () => {
+    const tiers = [
+        {
+            name: 'Starter',
+            price: '$0',
+            period: '/month',
+            description: 'Perfect for solo practitioners and small studios.',
+            features: [
+                '1 User',
+                'Unlimited Appointments',
+                '1 Active Automation',
+                'Basic Reporting',
+                'Email Support',
+            ],
+            notIncluded: [
+                'Custom Domain',
+                'Python Scripting',
+                'White-Labeling',
+                'Priority Support',
+            ],
+            cta: 'Start Free',
+            ctaLink: '/signup',
+            popular: false,
+        },
+        {
+            name: 'Pro',
+            price: '$29',
+            period: '/month',
+            description: 'For growing businesses that need automation.',
+            features: [
+                '5 Users',
+                'Unlimited Appointments',
+                '5 Active Automations',
+                'Advanced Reporting',
+                'Priority Email Support',
+                'SMS Reminders',
+            ],
+            notIncluded: [
+                'Custom Domain',
+                'Python Scripting',
+                'White-Labeling',
+            ],
+            cta: 'Start Trial',
+            ctaLink: '/signup?plan=pro',
+            popular: true,
+        },
+        {
+            name: 'Business',
+            price: '$99',
+            period: '/month',
+            description: 'Full power of the platform for serious operations.',
+            features: [
+                'Unlimited Users',
+                'Unlimited Appointments',
+                'Unlimited Automations',
+                'Custom Python Scripts',
+                'Custom Domain (White-Label)',
+                'Dedicated Support',
+                'API Access',
+            ],
+            notIncluded: [],
+            cta: 'Contact Sales',
+            ctaLink: '/contact',
+            popular: false,
+        },
+    ];
+
+    return (
+        <div className="grid md:grid-cols-3 gap-8 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            {tiers.map((tier) => (
+                <div
+                    key={tier.name}
+                    className={`relative flex flex-col p-8 bg-white dark:bg-gray-800 rounded-2xl border ${tier.popular
+                            ? 'border-brand-500 shadow-xl scale-105 z-10'
+                            : 'border-gray-200 dark:border-gray-700 shadow-sm'
+                        }`}
+                >
+                    {tier.popular && (
+                        <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 px-4 py-1 bg-brand-500 text-white text-sm font-medium rounded-full">
+                            Most Popular
+                        </div>
+                    )}
+
+                    <div className="mb-8">
+                        <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">{tier.name}</h3>
+                        <p className="text-gray-500 dark:text-gray-400 text-sm mb-6">{tier.description}</p>
+                        <div className="flex items-baseline">
+                            <span className="text-4xl font-bold text-gray-900 dark:text-white">{tier.price}</span>
+                            <span className="text-gray-500 dark:text-gray-400 ml-2">{tier.period}</span>
+                        </div>
+                    </div>
+
+                    <ul className="flex-1 space-y-4 mb-8">
+                        {tier.features.map((feature) => (
+                            <li key={feature} className="flex items-start">
+                                <Check className="w-5 h-5 text-green-500 mr-3 shrink-0" />
+                                <span className="text-gray-600 dark:text-gray-300 text-sm">{feature}</span>
+                            </li>
+                        ))}
+                        {tier.notIncluded.map((feature) => (
+                            <li key={feature} className="flex items-start opacity-50">
+                                <X className="w-5 h-5 text-gray-400 mr-3 shrink-0" />
+                                <span className="text-gray-500 dark:text-gray-400 text-sm">{feature}</span>
+                            </li>
+                        ))}
+                    </ul>
+
+                    <Link
+                        to={tier.ctaLink}
+                        className={`w-full py-3 px-4 rounded-lg text-center font-medium transition-colors ${tier.popular
+                                ? 'bg-brand-600 text-white hover:bg-brand-700'
+                                : 'bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-600'
+                            }`}
+                    >
+                        {tier.cta}
+                    </Link>
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export default PricingTable;

frontend/src/components/marketing/StatsSection.tsx

@@ -1,65 +0,0 @@
-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;