first commit

src/components/pages/LandingPages.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { AuthenticatedLayout } from '../layout/AuthenticatedLayout';
+import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
+import { Button } from '../ui/button';
+import { Badge } from '../ui/badge';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table';
+import { Plus, Edit, Eye, Globe } from 'lucide-react';
+
+interface LandingPagesProps {
+  // onNavigate: (route: string) => void;
+  onLogout: () => void;
+  user: any;
+}
+
+const mockPages = [
+  { id: 1, name: 'Executive Leadership Programme', status: 'Published', updated: '2024-01-15', views: 1250 },
+  { id: 2, name: 'Digital Transformation Course', status: 'Draft', updated: '2024-01-12', views: 0 }
+];
+
+export function LandingPages({ onLogout, user }: LandingPagesProps) {
+  const breadcrumbs = [{ label: 'Landing Pages' }];
+
+  return (
+    <AuthenticatedLayout
+      currentRoute="/landing-pages"
+      // onNavigate={onNavigate}
+      onLogout={onLogout}
+      user={user}
+      breadcrumbs={breadcrumbs}
+    >
+      <div className="p-6 space-y-6">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-3xl font-semibold">Landing Pages</h1>
+            <p className="text-muted-foreground">Create and manage programmatic landing pages</p>
+          </div>
+          <Button style={{ backgroundColor: 'var(--color-brand-primary)' }}>
+            <Plus className="h-4 w-4 mr-2" />
+            Create Landing Page
+          </Button>
+        </div>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Landing Pages</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Page Name</TableHead>
+                  <TableHead>Status</TableHead>
+                  <TableHead>Updated</TableHead>
+                  <TableHead>Views</TableHead>
+                  <TableHead>Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {mockPages.map((page) => (
+                  <TableRow key={page.id}>
+                    <TableCell className="font-medium">{page.name}</TableCell>
+                    <TableCell>
+                      <Badge variant={page.status === 'Published' ? 'default' : 'secondary'}>
+                        {page.status}
+                      </Badge>
+                    </TableCell>
+                    <TableCell>{page.updated}</TableCell>
+                    <TableCell>{page.views.toLocaleString()}</TableCell>
+                    <TableCell>
+                      <div className="flex space-x-2">
+                        <Button variant="ghost" size="sm">
+                          <Edit className="h-4 w-4" />
+                        </Button>
+                        <Button variant="ghost" size="sm">
+                          <Eye className="h-4 w-4" />
+                        </Button>
+                        <Button variant="ghost" size="sm">
+                          <Globe className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+      </div>
+    </AuthenticatedLayout>
+  );
+}