create-varity-app 2.0.0-beta.1

package/template/src/app/globals.css

@@ -0,0 +1,177 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/*
+ * ============================================================
+ * BRAND COLORS — Switch themes in seconds
+ * ============================================================
+ *
+ * HOW TO SWITCH:
+ *   1. Comment out the active "Blue" :root block below
+ *   2. Uncomment one of the preset blocks (Purple, Green, or Orange)
+ *   3. Save — your entire app updates instantly
+ *
+ * Or set your own colors using any Tailwind color palette:
+ *   https://tailwindcss.com/docs/customizing-colors
+ *
+ * ── Purple ──────────────────────────────────────────────────
+ * :root {
+ *   --color-primary-50: #faf5ff;  --color-primary-100: #f3e8ff;
+ *   --color-primary-200: #e9d5ff; --color-primary-300: #d8b4fe;
+ *   --color-primary-400: #c084fc; --color-primary-500: #a855f7;
+ *   --color-primary-600: #9333ea; --color-primary-700: #7e22ce;
+ *   --color-primary-800: #6b21a8; --color-primary-900: #581c87;
+ * }
+ *
+ * ── Green ───────────────────────────────────────────────────
+ * :root {
+ *   --color-primary-50: #ecfdf5;  --color-primary-100: #d1fae5;
+ *   --color-primary-200: #a7f3d0; --color-primary-300: #6ee7b7;
+ *   --color-primary-400: #34d399; --color-primary-500: #10b981;
+ *   --color-primary-600: #059669; --color-primary-700: #047857;
+ *   --color-primary-800: #065f46; --color-primary-900: #064e3b;
+ * }
+ *
+ * ── Orange ──────────────────────────────────────────────────
+ * :root {
+ *   --color-primary-50: #fff7ed;  --color-primary-100: #ffedd5;
+ *   --color-primary-200: #fed7aa; --color-primary-300: #fdba74;
+ *   --color-primary-400: #fb923c; --color-primary-500: #f97316;
+ *   --color-primary-600: #ea580c; --color-primary-700: #c2410c;
+ *   --color-primary-800: #9a3412; --color-primary-900: #7c2d12;
+ * }
+ * ============================================================
+ */
+:root {
+  /* Tailwind primary palette */
+  --color-primary-50: #eef2ff;
+  --color-primary-100: #e0e7ff;
+  --color-primary-200: #c7d2fe;
+  --color-primary-300: #a5b4fc;
+  --color-primary-400: #818cf8;
+  --color-primary-500: #6366f1;
+  --color-primary-600: #4f46e5;
+  --color-primary-700: #4338ca;
+  --color-primary-800: #3730a3;
+  --color-primary-900: #312e81;
+
+  /* Varity UI-Kit theme bridge — aligns inline-style CSS vars with Tailwind palette */
+  --varity-primary-color: #4f46e5;
+  --varity-bg-primary: #f9fafb;
+  --varity-bg-sidebar: #ffffff;
+  --varity-bg-header: #ffffff;
+  --varity-bg-footer: #ffffff;
+  --varity-bg-secondary: #f3f4f6;
+  --varity-bg-hover: #eef2ff;
+  --varity-text-primary: #111827;
+  --varity-text-secondary: #6b7280;
+  --varity-border-color: #e5e7eb;
+  --varity-accent-color: #ef4444;
+}
+
+/* Typography Scale */
+.heading-hero {
+  font-size: 3.5rem;
+  font-weight: 800;
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+}
+
+.heading-section {
+  font-size: 2.25rem;
+  font-weight: 700;
+  line-height: 1.2;
+  letter-spacing: -0.01em;
+}
+
+.heading-card {
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+@media (max-width: 640px) {
+  .heading-hero {
+    font-size: 2.5rem;
+  }
+  .heading-section {
+    font-size: 1.875rem;
+  }
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.animate-fade-in-up {
+  animation: fade-in-up 0.6s ease-out forwards;
+}
+
+.animate-fade-in-up-delay-1 {
+  animation: fade-in-up 0.6s ease-out 0.1s forwards;
+  opacity: 0;
+}
+
+.animate-fade-in-up-delay-2 {
+  animation: fade-in-up 0.6s ease-out 0.2s forwards;
+  opacity: 0;
+}
+
+.animate-fade-in-up-delay-3 {
+  animation: fade-in-up 0.6s ease-out 0.3s forwards;
+  opacity: 0;
+}
+
+.animate-fade-in-up-delay-4 {
+  animation: fade-in-up 0.6s ease-out 0.4s forwards;
+  opacity: 0;
+}
+
+.animate-fade-in {
+  animation: fade-in 0.8s ease-out forwards;
+}
+
+@keyframes toast-enter {
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes toast-progress {
+  from { width: 100%; }
+  to { width: 0%; }
+}
+
+@keyframes progress-stripes {
+  0% { background-position: 1rem 0; }
+  100% { background-position: 0 0; }
+}

package/template/src/app/icon.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="16" cy="16" r="14" fill="#4f46e5"/>
+  <path d="M10 16L14.5 20.5L22 11.5" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/template/src/app/layout.tsx

@@ -0,0 +1,33 @@
+import type { Metadata } from 'next';
+import { Providers } from '@/components/providers';
+import './globals.css';
+
+export const metadata: Metadata = {
+  title: 'TaskFlow - Project Management',
+  description: 'Manage projects, track tasks, and collaborate with your team.',
+  metadataBase: new URL('https://example.com'),
+  openGraph: {
+    title: 'TaskFlow - Project Management',
+    description: 'Manage projects, track tasks, and collaborate with your team.',
+    type: 'website',
+  },
+  twitter: {
+    card: 'summary',
+    title: 'TaskFlow - Project Management',
+    description: 'Manage projects, track tasks, and collaborate with your team.',
+  },
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}

package/template/src/app/login/page.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { CheckCircle } from 'lucide-react';
+import { APP_NAME } from '@/lib/constants';
+
+let PrivyStackComponent: any = null;
+let usePrivyHook: (() => { authenticated: boolean; ready: boolean; login: () => void }) | null = null;
+
+try {
+  const uiKit = require('@varity-labs/ui-kit');
+  PrivyStackComponent = uiKit.PrivyStack;
+  usePrivyHook = uiKit.usePrivy;
+} catch {}
+
+function LoginContent() {
+  const router = useRouter();
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- conditional on require() success, stable across renders
+  const privy = usePrivyHook ? usePrivyHook() : null;
+
+  useEffect(() => {
+    if (privy?.authenticated) {
+      router.push('/dashboard');
+    }
+  }, [privy?.authenticated, router]);
+
+  const handleLogin = () => {
+    if (privy?.login) {
+      privy.login();
+    }
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4">
+      <div className="w-full max-w-md space-y-8">
+        <div className="text-center">
+          <Link href="/" className="inline-flex items-center gap-2">
+            <CheckCircle className="h-8 w-8 text-primary-600" />
+            <span className="text-2xl font-bold text-gray-900">{APP_NAME}</span>
+          </Link>
+          <h2 className="mt-6 text-2xl font-bold text-gray-900">
+            Sign in to your account
+          </h2>
+          <p className="mt-2 text-sm text-gray-600">
+            Use your email or social account to get started.
+          </p>
+        </div>
+
+        <div className="rounded-xl border border-gray-200 bg-white p-8 shadow-sm">
+          {privy ? (
+            <button
+              onClick={handleLogin}
+              disabled={!privy.ready || privy.authenticated}
+              className="w-full px-6 py-3 bg-primary-600 hover:bg-primary-700 disabled:bg-gray-300 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors shadow-sm"
+            >
+              {!privy.ready
+                ? 'Loading...'
+                : privy.authenticated
+                ? 'Already Signed In'
+                : 'Sign In with Email or Social'}
+            </button>
+          ) : (
+            <div className="text-center space-y-4">
+              <p className="text-sm text-gray-600">
+                Loading authentication...
+              </p>
+            </div>
+          )}
+        </div>
+
+        <p className="text-center text-xs text-gray-500">
+          By signing in, you agree to our Terms of Service and Privacy Policy.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default function LoginPage() {
+  // Always wrap in PrivyStack - it uses dev credentials automatically when no appId is provided
+  if (PrivyStackComponent) {
+    return (
+      <PrivyStackComponent
+        appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID}
+        thirdwebClientId={process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID}
+        loginMethods={['email', 'google']}
+        appearance={{ theme: 'light', accentColor: '#2563EB', logo: '/logo.svg' }}
+      >
+        <LoginContent />
+      </PrivyStackComponent>
+    );
+  }
+
+  // Fallback if ui-kit package isn't installed
+  return <LoginContent />;
+}

package/template/src/app/not-found.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import Link from 'next/link';
+
+export default function NotFound() {
+  return (
+    <div className="min-h-screen bg-white flex items-center justify-center px-4">
+      <div className="text-center">
+        <h1 className="text-6xl font-bold text-gray-900 mb-4">404</h1>
+        <p className="text-xl text-gray-600 mb-8">Page not found</p>
+        <Link
+          href="/"
+          className="inline-flex items-center gap-2 rounded-lg bg-primary-600 px-6 py-3 text-base font-medium text-white hover:bg-primary-700 transition-all"
+        >
+          Go Home
+        </Link>
+      </div>
+    </div>
+  );
+}

package/template/src/app/page.tsx

@@ -0,0 +1,23 @@
+import { Navbar } from '@/components/shared/Navbar';
+import { Hero } from '@/components/landing/Hero';
+import { Features } from '@/components/landing/Features';
+import { HowItWorks } from '@/components/landing/HowItWorks';
+import { Testimonials } from '@/components/landing/Testimonials';
+import { Pricing } from '@/components/landing/Pricing';
+import { CTA } from '@/components/landing/CTA';
+import { Footer } from '@/components/shared/Footer';
+
+export default function HomePage() {
+  return (
+    <div className="min-h-screen bg-white">
+      <Navbar />
+      <Hero />
+      <Features />
+      <HowItWorks />
+      <Testimonials />
+      <Pricing />
+      <CTA />
+      <Footer />
+    </div>
+  );
+}

package/template/src/components/dashboard/DashboardStats.tsx

@@ -0,0 +1,137 @@
+'use client';
+
+import { useMemo } from 'react';
+import { EnhancedKPICard, Skeleton } from '@varity-labs/ui-kit';
+import type { Project, Task, TeamMember } from '@/types';
+
+interface DashboardStatsProps {
+  projects: Project[];
+  tasks: Task[];
+  team: TeamMember[];
+  loading?: boolean;
+}
+
+export function DashboardStats({
+  projects,
+  tasks,
+  team,
+  loading = false,
+}: DashboardStatsProps) {
+  const activeProjects = projects.filter((p) => p.status === 'active').length;
+  const activeTasks = tasks.filter((t) => t.status !== 'done').length;
+  const doneTasks = tasks.filter((t) => t.status === 'done').length;
+  const completionRate =
+    tasks.length > 0 ? Math.round((doneTasks / tasks.length) * 100) : 0;
+
+  // Generate sparkline data (mock trend data for each metric)
+  const projectsSparkline = useMemo(() => {
+    const baseValue = projects.length || 8;
+    return Array.from({ length: 7 }, (_, i) => {
+      const progress = i / 6;
+      const trend = baseValue * (1 - 0.125 * (1 - progress));
+      return Math.max(1, Math.round(trend + (Math.random() - 0.5) * 2));
+    });
+  }, [projects.length]);
+
+  const tasksSparkline = useMemo(() => {
+    const baseValue = tasks.length || 12;
+    return Array.from({ length: 7 }, (_, i) => {
+      const progress = i / 6;
+      const trend = baseValue * (1 + 0.15 * progress);
+      return Math.max(1, Math.round(trend + (Math.random() - 0.5) * 2));
+    });
+  }, [tasks.length]);
+
+  const teamSparkline = useMemo(() => {
+    const baseValue = team.length || 3;
+    return Array.from({ length: 7 }, (_, i) => {
+      const progress = i / 6;
+      const trend = baseValue * (1 + 0.08 * progress);
+      return Math.max(1, Math.round(trend + (Math.random() - 0.5) * 0.5));
+    });
+  }, [team.length]);
+
+  const completionSparkline = useMemo(() => {
+    return Array.from({ length: 7 }, (_, i) => {
+      const progress = i / 6;
+      const trend = completionRate * (1 - 0.10 * (1 - progress));
+      return Math.max(0, Math.min(100, trend + (Math.random() - 0.5) * 5));
+    });
+  }, [completionRate]);
+
+  if (loading) {
+    return (
+      <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
+        <Skeleton height={180} />
+        <Skeleton height={180} />
+        <Skeleton height={180} />
+        <Skeleton height={180} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
+      <EnhancedKPICard
+        title="Active Projects"
+        value={activeProjects.toString()}
+        change={{
+          value: 12.5,
+          period: 'vs last month'
+        }}
+        icon="📊"
+        trend="up"
+        color="blue"
+        sparklineData={projectsSparkline}
+        showSparkline
+        lastSynced={new Date().toISOString()}
+        helpText={`${projects.length} total projects (${activeProjects} active)`}
+      />
+      <EnhancedKPICard
+        title="Open Tasks"
+        value={activeTasks.toString()}
+        change={{
+          value: 8.3,
+          period: 'vs last week'
+        }}
+        icon="✓"
+        trend="up"
+        color="orange"
+        sparklineData={tasksSparkline}
+        showSparkline
+        lastSynced={new Date().toISOString()}
+        helpText={`${doneTasks} completed tasks out of ${tasks.length} total`}
+      />
+      <EnhancedKPICard
+        title="Team Members"
+        value={team.length.toString()}
+        change={{
+          value: 5.0,
+          period: 'vs last month'
+        }}
+        icon="👥"
+        trend="up"
+        color="green"
+        sparklineData={teamSparkline}
+        showSparkline
+        lastSynced={new Date().toISOString()}
+        helpText="Active team members with access"
+      />
+      <EnhancedKPICard
+        title="Completion Rate"
+        value={`${completionRate}%`}
+        change={{
+          value: completionRate > 0 ? 3.2 : 0,
+          period: 'vs last week'
+        }}
+        icon="📈"
+        trend={completionRate >= 50 ? 'up' : completionRate > 0 ? 'neutral' : 'down'}
+        color={completionRate >= 50 ? 'green' : completionRate > 0 ? 'blue' : 'red'}
+        sparklineData={completionSparkline}
+        showSparkline
+        lastSynced={new Date().toISOString()}
+        helpText="Percentage of tasks marked as complete"
+      />
+    </div>
+  );
+}

package/template/src/components/dashboard/RecentActivity.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import Link from 'next/link';
+import { DataTable } from '@varity-labs/ui-kit';
+import { TaskStatusBadge, PriorityBadge } from '@varity-labs/ui-kit';
+import { formatRelativeDate } from '@/lib/utils';
+import { ArrowRight } from 'lucide-react';
+import type { Task } from '@/types';
+
+interface RecentActivityProps {
+  tasks: Task[];
+  loading?: boolean;
+}
+
+export function RecentActivity({ tasks, loading = false }: RecentActivityProps) {
+  const recentTasks = [...tasks]
+    .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
+    .slice(0, 5);
+
+  const columns = [
+    { key: 'title', header: 'Task', sortable: true },
+    {
+      key: 'status',
+      header: 'Status',
+      render: (value: string) => <TaskStatusBadge status={value} />,
+    },
+    {
+      key: 'priority',
+      header: 'Priority',
+      render: (value: string) => <PriorityBadge priority={value} />,
+    },
+    {
+      key: 'createdAt',
+      header: 'Created',
+      render: (value: string) => formatRelativeDate(value),
+    },
+  ];
+
+  return (
+    <div className="rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
+      <div className="mb-4 flex items-center justify-between">
+        <h3 className="text-lg font-semibold text-gray-900">
+          Recent Activity
+        </h3>
+        {tasks.length > 5 && (
+          <Link
+            href="/dashboard/tasks"
+            className="flex items-center gap-1 text-sm font-medium text-primary-600 hover:text-primary-700 transition-colors"
+          >
+            View all tasks
+            <ArrowRight className="h-4 w-4" />
+          </Link>
+        )}
+      </div>
+      <DataTable
+        columns={columns}
+        data={recentTasks}
+        loading={loading}
+        emptyMessage="No tasks yet. Create a project and add tasks to get started."
+      />
+    </div>
+  );
+}

package/template/src/components/landing/CTA.tsx

@@ -0,0 +1,42 @@
+import Link from 'next/link';
+import { ArrowRight, CheckCircle2 } from 'lucide-react';
+import { APP_NAME } from '@/lib/constants';
+
+const perks = [
+  'Free to get started',
+  'No credit card required',
+  'Set up in under a minute',
+];
+
+export function CTA() {
+  return (
+    <section className="relative overflow-hidden bg-gray-900 py-24">
+      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-primary-900/20 via-transparent to-transparent" />
+      <div className="relative mx-auto max-w-7xl px-4 text-center">
+        <h2 className="heading-section text-white">
+          Ready to get your team organized?
+        </h2>
+        <p className="mx-auto mt-4 max-w-xl text-lg text-gray-400">
+          Join teams who use {APP_NAME} to ship projects on time.
+        </p>
+        <div className="mt-8 flex flex-wrap items-center justify-center gap-x-6 gap-y-2">
+          {perks.map((perk) => (
+            <div key={perk} className="flex items-center gap-2 text-sm text-gray-300">
+              <CheckCircle2 className="h-4 w-4 text-green-400" />
+              {perk}
+            </div>
+          ))}
+        </div>
+        <div className="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
+          <Link
+            href="/login"
+            className="group inline-flex items-center gap-2 rounded-lg bg-white px-6 py-3 text-base font-medium text-gray-900 shadow-lg hover:bg-gray-100 transition-all"
+          >
+            Get Started Free
+            <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
+          </Link>
+        </div>
+      </div>
+    </section>
+  );
+}