Initial import: property management SaaS + security hardening + admin dashboard

Property Management Network — Next.js 16 (App Router), Better Auth,
Drizzle ORM over PostgreSQL, Stripe, OpenAI, Resend.

Includes:
- Security hardening: access-control/IDOR fixes, TLS-by-default DB layer,
  constant-time cron auth, strict security headers, atomic AI quota gating,
  HTML/email output encoding, demo-backdoor disabled in production.
- Superadmin dashboard at /admin (overview/MRR, server-paginated users with
  ban/impersonate/plan/delete, billing, platform activity + admin audit log,
  AI usage, system health) via the Better Auth admin plugin.
- Seed/migration utility scripts under scripts/.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

components/marketing/problem.tsx

@@ -0,0 +1,99 @@
+"use client"
+
+import { motion } from "framer-motion"
+import { useInView } from "framer-motion"
+import { useRef } from "react"
+import { X, Check } from "lucide-react"
+
+const BEFORE = [
+  "Chasing rent via text message every month",
+  "Spreadsheets breaking when you add a new property",
+  "Tenants calling you at 11pm about maintenance",
+  "Losing track of lease expiry dates",
+  "No idea which property is actually profitable",
+  "Receipts and invoices scattered in email",
+]
+
+const AFTER = [
+  "Automated reminders — tenants pay on time",
+  "One dashboard for all properties, all tenants",
+  "Tenants submit requests through their portal",
+  "60-day lease expiry alerts, auto-renewal ready",
+  "Per-property expense tracking and P&L view",
+  "Expenses categorised and exportable as CSV",
+]
+
+function fadeIn(delay = 0) {
+  return {
+    initial: { opacity: 0, y: 20 },
+    whileInView: { opacity: 1, y: 0 },
+    viewport: { once: true },
+    transition: { duration: 0.5, delay },
+  }
+}
+
+export function Problem() {
+  return (
+    <section className="mx-auto max-w-7xl px-4 sm:px-6 py-16 sm:py-24">
+      <motion.div {...fadeIn()} className="text-center mb-14">
+        <p className="text-xs font-semibold uppercase tracking-widest text-indigo-400 mb-3">Sound familiar?</p>
+        <h2 className="text-3xl font-bold text-white sm:text-4xl">The old way is exhausting</h2>
+        <p className="mt-4 text-white/50 max-w-xl mx-auto">
+          Most landlords are drowning in WhatsApp messages, broken spreadsheets, and missed follow-ups. There's a better way.
+        </p>
+      </motion.div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {/* Before */}
+        <motion.div {...fadeIn(0.1)} className="rounded-2xl border border-red-500/20 bg-red-500/[0.04] p-7">
+          <div className="flex items-center gap-2 mb-6">
+            <div className="flex h-7 w-7 items-center justify-center rounded-full bg-red-500/20">
+              <X className="h-4 w-4 text-red-400" />
+            </div>
+            <h3 className="font-semibold text-red-400">Before Property Management Network</h3>
+          </div>
+          <ul className="space-y-3">
+            {BEFORE.map((item, i) => (
+              <motion.li
+                key={item}
+                initial={{ opacity: 0, x: -10 }}
+                whileInView={{ opacity: 1, x: 0 }}
+                viewport={{ once: true }}
+                transition={{ delay: 0.15 + i * 0.07 }}
+                className="flex items-start gap-3 text-sm text-white/60"
+              >
+                <X className="h-4 w-4 text-red-500/60 mt-0.5 shrink-0" />
+                {item}
+              </motion.li>
+            ))}
+          </ul>
+        </motion.div>
+
+        {/* After */}
+        <motion.div {...fadeIn(0.2)} className="rounded-2xl border border-emerald-500/20 bg-emerald-500/[0.04] p-7">
+          <div className="flex items-center gap-2 mb-6">
+            <div className="flex h-7 w-7 items-center justify-center rounded-full bg-emerald-500/20">
+              <Check className="h-4 w-4 text-emerald-400" />
+            </div>
+            <h3 className="font-semibold text-emerald-400">With Property Management Network</h3>
+          </div>
+          <ul className="space-y-3">
+            {AFTER.map((item, i) => (
+              <motion.li
+                key={item}
+                initial={{ opacity: 0, x: 10 }}
+                whileInView={{ opacity: 1, x: 0 }}
+                viewport={{ once: true }}
+                transition={{ delay: 0.15 + i * 0.07 }}
+                className="flex items-start gap-3 text-sm text-white/60"
+              >
+                <Check className="h-4 w-4 text-emerald-400 mt-0.5 shrink-0" />
+                {item}
+              </motion.li>
+            ))}
+          </ul>
+        </motion.div>
+      </div>
+    </section>
+  )
+}