@tangle-network/starter-foundry 0.1.0

package/registry/layers/capability/layout-admin/files/admin-page.tsx

@@ -0,0 +1,141 @@
+'use client'
+
+import { useState } from 'react'
+import { type ColumnDef } from '@tanstack/react-table'
+import { DataTable } from '@/components/admin/data-table'
+import { ColumnHeader } from '@/components/admin/column-header'
+import { EntityForm, type FieldDef } from '@/components/admin/entity-form'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { Plus, MoreHorizontal, Pencil, Trash2 } from 'lucide-react'
+
+interface User {
+  id: string
+  name: string
+  email: string
+  role: 'admin' | 'user' | 'viewer'
+  status: 'active' | 'inactive' | 'suspended'
+  createdAt: string
+}
+
+const users: User[] = [
+  { id: '1', name: 'Sarah Chen', email: 'sarah@example.com', role: 'admin', status: 'active', createdAt: '2024-01-15' },
+  { id: '2', name: 'Marcus Johnson', email: 'marcus@example.com', role: 'user', status: 'active', createdAt: '2024-02-03' },
+  { id: '3', name: 'Emily Rodriguez', email: 'emily@example.com', role: 'user', status: 'inactive', createdAt: '2024-02-18' },
+  { id: '4', name: 'David Kim', email: 'david@example.com', role: 'viewer', status: 'active', createdAt: '2024-03-07' },
+  { id: '5', name: 'Lisa Wang', email: 'lisa@example.com', role: 'admin', status: 'active', createdAt: '2024-03-22' },
+  { id: '6', name: 'James Wilson', email: 'james@example.com', role: 'user', status: 'suspended', createdAt: '2024-04-01' },
+  { id: '7', name: 'Ana Petrov', email: 'ana@example.com', role: 'viewer', status: 'active', createdAt: '2024-04-14' },
+  { id: '8', name: 'Tom Baker', email: 'tom@example.com', role: 'user', status: 'active', createdAt: '2024-05-02' },
+  { id: '9', name: 'Priya Sharma', email: 'priya@example.com', role: 'admin', status: 'inactive', createdAt: '2024-05-19' },
+  { id: '10', name: 'Carlos Mendez', email: 'carlos@example.com', role: 'user', status: 'active', createdAt: '2024-06-08' },
+]
+
+const statusVariant: Record<User['status'], 'default' | 'secondary' | 'destructive'> = {
+  active: 'default',
+  inactive: 'secondary',
+  suspended: 'destructive',
+}
+
+const formFields: FieldDef[] = [
+  { name: 'name', label: 'Name', type: 'text' },
+  { name: 'email', label: 'Email', type: 'email' },
+  { name: 'role', label: 'Role', type: 'select', options: ['admin', 'user', 'viewer'] },
+  { name: 'status', label: 'Status', type: 'select', options: ['active', 'inactive', 'suspended'] },
+]
+
+export default function AdminPage() {
+  const [formOpen, setFormOpen] = useState(false)
+  const [editUser, setEditUser] = useState<User | null>(null)
+
+  const columns: ColumnDef<User>[] = [
+    {
+      accessorKey: 'name',
+      header: ({ column }) => <ColumnHeader column={column} title="Name" />,
+      cell: ({ row }) => <span className="font-medium">{row.getValue('name')}</span>,
+    },
+    {
+      accessorKey: 'email',
+      header: ({ column }) => <ColumnHeader column={column} title="Email" />,
+    },
+    {
+      accessorKey: 'role',
+      header: ({ column }) => <ColumnHeader column={column} title="Role" />,
+      cell: ({ row }) => (
+        <span className="capitalize">{row.getValue<string>('role')}</span>
+      ),
+    },
+    {
+      accessorKey: 'status',
+      header: ({ column }) => <ColumnHeader column={column} title="Status" />,
+      cell: ({ row }) => {
+        const status = row.getValue<User['status']>('status')
+        return <Badge variant={statusVariant[status]}>{status}</Badge>
+      },
+    },
+    {
+      accessorKey: 'createdAt',
+      header: ({ column }) => <ColumnHeader column={column} title="Created" />,
+    },
+    {
+      id: 'actions',
+      cell: ({ row }) => (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="icon" className="h-8 w-8">
+              <MoreHorizontal className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={() => { setEditUser(row.original); setFormOpen(true) }}>
+              <Pencil className="mr-2 h-3.5 w-3.5" />
+              Edit
+            </DropdownMenuItem>
+            <DropdownMenuItem className="text-destructive">
+              <Trash2 className="mr-2 h-3.5 w-3.5" />
+              Delete
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ),
+    },
+  ]
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">Users</h1>
+          <p className="text-muted-foreground">Manage user accounts and permissions.</p>
+        </div>
+        <Button onClick={() => { setEditUser(null); setFormOpen(true) }}>
+          <Plus className="mr-2 h-4 w-4" />
+          Add user
+        </Button>
+      </div>
+
+      <DataTable
+        columns={columns}
+        data={users}
+        searchKey="email"
+        onBulkDelete={(rows) => console.log('Delete', rows)}
+        onBulkExport={(rows) => console.log('Export', rows)}
+      />
+
+      <EntityForm
+        open={formOpen}
+        onOpenChange={setFormOpen}
+        fields={formFields}
+        defaultValues={editUser ? { name: editUser.name, email: editUser.email, role: editUser.role, status: editUser.status } : undefined}
+        title={editUser ? 'Edit user' : 'Add user'}
+        onSubmit={(values) => console.log(editUser ? 'Update' : 'Create', values)}
+      />
+    </div>
+  )
+}

package/registry/layers/capability/layout-admin/files/column-header.tsx

@@ -0,0 +1,37 @@
+import { type Column } from '@tanstack/react-table'
+import { Button } from '@/components/ui/button'
+import { ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react'
+
+interface ColumnHeaderProps<TData, TValue> {
+  column: Column<TData, TValue>
+  title: string
+}
+
+export function ColumnHeader<TData, TValue>({
+  column,
+  title,
+}: ColumnHeaderProps<TData, TValue>) {
+  if (!column.getCanSort()) {
+    return <span>{title}</span>
+  }
+
+  const sorted = column.getIsSorted()
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className="-ml-3 h-8"
+      onClick={() => column.toggleSorting(sorted === 'asc')}
+    >
+      {title}
+      {sorted === 'asc' ? (
+        <ArrowUp className="ml-2 h-3.5 w-3.5" />
+      ) : sorted === 'desc' ? (
+        <ArrowDown className="ml-2 h-3.5 w-3.5" />
+      ) : (
+        <ArrowUpDown className="ml-2 h-3.5 w-3.5" />
+      )}
+    </Button>
+  )
+}

package/registry/layers/capability/layout-admin/files/data-table.tsx

@@ -0,0 +1,221 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  useReactTable,
+  getCoreRowModel,
+  getSortedRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  flexRender,
+  type ColumnDef,
+  type SortingState,
+  type ColumnFiltersState,
+  type RowSelectionState,
+} from '@tanstack/react-table'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
+import { Checkbox } from '@/components/ui/checkbox'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { Search, Trash2, Download, ChevronDown } from 'lucide-react'
+
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[]
+  data: TData[]
+  searchKey?: string
+  onBulkDelete?: (rows: TData[]) => void
+  onBulkExport?: (rows: TData[]) => void
+}
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+  searchKey,
+  onBulkDelete,
+  onBulkExport,
+}: DataTableProps<TData, TValue>) {
+  const [sorting, setSorting] = useState<SortingState>([])
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+  const [globalFilter, setGlobalFilter] = useState('')
+
+  const selectColumn: ColumnDef<TData, TValue> = {
+    id: 'select',
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && 'indeterminate')
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  }
+
+  const table = useReactTable({
+    data,
+    columns: [selectColumn, ...columns],
+    state: { sorting, columnFilters, rowSelection, globalFilter },
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onRowSelectionChange: setRowSelection,
+    onGlobalFilterChange: setGlobalFilter,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    enableRowSelection: true,
+  })
+
+  const selectedRows = table.getFilteredSelectedRowModel().rows
+  const hasSelection = selectedRows.length > 0
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-4">
+        <div className="relative flex-1 max-w-sm">
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            placeholder={searchKey ? `Filter by ${searchKey}...` : 'Search...'}
+            value={searchKey ? (table.getColumn(searchKey)?.getFilterValue() as string ?? '') : globalFilter}
+            onChange={(e) =>
+              searchKey
+                ? table.getColumn(searchKey)?.setFilterValue(e.target.value)
+                : setGlobalFilter(e.target.value)
+            }
+            className="pl-9"
+          />
+        </div>
+      </div>
+
+      {hasSelection && (
+        <div className="flex items-center gap-3 rounded-lg border bg-muted/50 px-4 py-2">
+          <span className="text-sm font-medium">
+            {selectedRows.length} row{selectedRows.length > 1 ? 's' : ''} selected
+          </span>
+          <div className="ml-auto flex items-center gap-2">
+            {onBulkExport && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => onBulkExport(selectedRows.map((r) => r.original))}
+              >
+                <Download className="mr-2 h-3.5 w-3.5" />
+                Export
+              </Button>
+            )}
+            {onBulkDelete && (
+              <Button
+                variant="destructive"
+                size="sm"
+                onClick={() => onBulkDelete(selectedRows.map((r) => r.original))}
+              >
+                <Trash2 className="mr-2 h-3.5 w-3.5" />
+                Delete
+              </Button>
+            )}
+          </div>
+        </div>
+      )}
+
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(header.column.columnDef.header, header.getContext())}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell colSpan={columns.length + 1} className="h-24 text-center">
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      <div className="flex items-center justify-between">
+        <p className="text-sm text-muted-foreground">
+          Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
+        </p>
+        <div className="flex items-center gap-2">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" size="sm">
+                {table.getState().pagination.pageSize} per page
+                <ChevronDown className="ml-2 h-3.5 w-3.5" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              {[10, 20, 50, 100].map((size) => (
+                <DropdownMenuItem key={size} onClick={() => table.setPageSize(size)}>
+                  {size} per page
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+          >
+            Previous
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+          >
+            Next
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/registry/layers/capability/layout-admin/files/entity-form.tsx

@@ -0,0 +1,109 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Button } from '@/components/ui/button'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+
+export interface FieldDef {
+  name: string
+  label: string
+  type: 'text' | 'number' | 'email' | 'select'
+  options?: string[]
+}
+
+interface EntityFormProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onSubmit: (values: Record<string, string>) => void
+  defaultValues?: Record<string, string>
+  fields: FieldDef[]
+  title?: string
+}
+
+export function EntityForm({
+  open,
+  onOpenChange,
+  onSubmit,
+  defaultValues,
+  fields,
+  title,
+}: EntityFormProps) {
+  const [values, setValues] = useState<Record<string, string>>({})
+
+  useEffect(() => {
+    if (open) {
+      setValues(defaultValues ?? {})
+    }
+  }, [open, defaultValues])
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    onSubmit(values)
+    onOpenChange(false)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{title ?? (defaultValues ? 'Edit' : 'Create')}</DialogTitle>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {fields.map((field) => (
+            <div key={field.name} className="space-y-2">
+              <Label htmlFor={field.name}>{field.label}</Label>
+              {field.type === 'select' ? (
+                <Select
+                  value={values[field.name] ?? ''}
+                  onValueChange={(v) => setValues((prev) => ({ ...prev, [field.name]: v }))}
+                >
+                  <SelectTrigger id={field.name}>
+                    <SelectValue placeholder={`Select ${field.label.toLowerCase()}`} />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {field.options?.map((opt) => (
+                      <SelectItem key={opt} value={opt}>
+                        {opt}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              ) : (
+                <Input
+                  id={field.name}
+                  type={field.type}
+                  value={values[field.name] ?? ''}
+                  onChange={(e) => setValues((prev) => ({ ...prev, [field.name]: e.target.value }))}
+                  placeholder={field.label}
+                />
+              )}
+            </div>
+          ))}
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+              Cancel
+            </Button>
+            <Button type="submit">
+              {defaultValues ? 'Save changes' : 'Create'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/registry/layers/capability/layout-admin/files/media-manifest.json

@@ -0,0 +1,14 @@
+{
+  "slots": [
+    {
+      "id": "admin-empty-state",
+      "path": "public/images/admin-empty.svg",
+      "width": 240,
+      "height": 200,
+      "purpose": "Illustration for empty table state when no entities exist",
+      "prompt": "Minimal line illustration of an empty data table with a plus icon, muted colors",
+      "fallback": "icon",
+      "usedIn": "src/components/admin/admin-page.tsx"
+    }
+  ]
+}

package/registry/layers/capability/layout-admin/manifest.json

@@ -0,0 +1,30 @@
+{
+  "id": "layout-admin",
+  "description": "Pre-built admin panel with data table (TanStack), entity forms, filters, and bulk actions.",
+  "group": "capability",
+  "appliesTo": ["nextjs-ts", "react-vite-ts", "fullstack-ts"],
+  "keywords": ["admin", "admin panel", "crud", "data table", "back office", "management", "content management"],
+  "capabilityRequires": ["shadcn"],
+  "files": [
+    { "source": "files/data-table.tsx", "target": "src/components/admin/data-table.tsx" },
+    { "source": "files/entity-form.tsx", "target": "src/components/admin/entity-form.tsx" },
+    { "source": "files/admin-page.tsx", "target": "app/admin/page.tsx" },
+    { "source": "files/admin-page.tsx", "target": "app/page.tsx" },
+    { "source": "files/admin-page.tsx", "target": "src/App.tsx" },
+    { "source": "files/column-header.tsx", "target": "src/components/admin/column-header.tsx" },
+    { "source": "files/media-manifest.json", "target": "media-manifest.json" }
+  ],
+  "buildHints": {
+    "pages": ["/admin", "/admin/[entity]", "/admin/[entity]/[id]"],
+    "apiRoutes": ["/api/admin/[entity]"],
+    "components": ["DataTable", "EntityForm", "ColumnHeader", "BulkActionBar", "FilterBar"],
+    "integrations": ["@tanstack/react-table for headless table logic"],
+    "architectureNotes": [
+      "DataTable is powered by @tanstack/react-table with sorting, filtering, and pagination.",
+      "Column definitions are typed — add your entity columns in the page file.",
+      "EntityForm renders a create/edit dialog with shadcn form components.",
+      "Bulk actions bar appears when rows are selected (delete, export, etc.).",
+      "Wire API routes to your database (Drizzle, Prisma, etc.)."
+    ]
+  }
+}

package/registry/layers/capability/layout-auth/files/sign-in-page.tsx

@@ -0,0 +1,82 @@
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Separator } from "@/components/ui/separator"
+
+export default function SignInPage() {
+  return (
+    <div className="flex min-h-screen">
+      {/* Branded panel — hidden on mobile */}
+      <div className="hidden lg:flex lg:w-1/2 flex-col justify-between bg-primary p-12 text-primary-foreground">
+        <div>
+          <h1 className="text-2xl font-bold">{{headline}}</h1>
+        </div>
+        <div>
+          <blockquote className="text-lg font-medium leading-relaxed opacity-90">
+            "This platform completely transformed how our team works. The speed and quality are unmatched."
+          </blockquote>
+          <p className="mt-4 text-sm opacity-75">— Happy Customer, CEO at Company</p>
+        </div>
+        <p className="text-sm opacity-50">© 2026 {{headline}}. All rights reserved.</p>
+      </div>
+
+      {/* Form panel */}
+      <div className="flex w-full items-center justify-center p-6 lg:w-1/2">
+        <Card className="w-full max-w-sm border-0 shadow-none">
+          <CardHeader className="text-center">
+            <CardTitle className="text-2xl">Welcome back</CardTitle>
+            <CardDescription>Sign in to your account to continue</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {/* Social login buttons */}
+            <div className="grid grid-cols-2 gap-3">
+              <Button variant="outline" className="w-full">
+                <svg className="mr-2 h-4 w-4" viewBox="0 0 24 24"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/></svg>
+                Google
+              </Button>
+              <Button variant="outline" className="w-full">
+                <svg className="mr-2 h-4 w-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
+                GitHub
+              </Button>
+            </div>
+
+            <div className="relative">
+              <Separator />
+              <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-card px-2 text-xs text-muted-foreground">
+                or continue with email
+              </span>
+            </div>
+
+            {/* Email/password form */}
+            <form className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="email">Email</Label>
+                <Input id="email" type="email" placeholder="you@example.com" />
+              </div>
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <Label htmlFor="password">Password</Label>
+                  <a href="/forgot-password" className="text-xs text-primary hover:underline">
+                    Forgot password?
+                  </a>
+                </div>
+                <Input id="password" type="password" />
+              </div>
+              <Button type="submit" className="w-full">
+                Sign In
+              </Button>
+            </form>
+
+            <p className="text-center text-sm text-muted-foreground">
+              Don't have an account?{" "}
+              <a href="/sign-up" className="font-medium text-primary hover:underline">
+                Sign up
+              </a>
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}