create-varity-app 2.0.0-beta.1

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

@@ -0,0 +1,116 @@
+'use client';
+
+import {
+  LayoutDashboard,
+  Users,
+  BarChart3,
+  ListChecks,
+  Shield,
+  Zap,
+} from 'lucide-react';
+
+export function Features() {
+  const features = [
+    {
+      icon: 'layoutDashboard',
+      iconColor: 'text-blue-600',
+      title: 'Project Dashboard',
+      description:
+        'See all your projects at a glance with real-time status, progress, and deadlines in one unified view.',
+      iconBg: 'bg-blue-100',
+      hoverBorder: 'hover:border-blue-200',
+    },
+    {
+      icon: 'listChecks',
+      iconColor: 'text-amber-600',
+      title: 'Task Management',
+      description:
+        'Create, assign, and track tasks with priorities, statuses, and due dates. Keep every deliverable on track.',
+      iconBg: 'bg-amber-100',
+      hoverBorder: 'hover:border-amber-200',
+    },
+    {
+      icon: 'users',
+      iconColor: 'text-green-600',
+      title: 'Team Collaboration',
+      description:
+        'Invite team members, assign roles, and coordinate work. Everyone stays aligned without endless meetings.',
+      iconBg: 'bg-green-100',
+      hoverBorder: 'hover:border-green-200',
+    },
+    {
+      icon: 'barChart',
+      iconColor: 'text-purple-600',
+      title: 'Analytics & Insights',
+      description:
+        'Track completion rates, team velocity, and project health with KPIs that update as your team works.',
+      iconBg: 'bg-purple-100',
+      hoverBorder: 'hover:border-purple-200',
+    },
+    {
+      icon: 'shield',
+      iconColor: 'text-rose-600',
+      title: 'Secure by Default',
+      description:
+        'Email and social login built in. Your data is protected with industry-standard authentication and encryption.',
+      iconBg: 'bg-rose-100',
+      hoverBorder: 'hover:border-rose-200',
+    },
+    {
+      icon: 'zap',
+      iconColor: 'text-cyan-600',
+      title: 'Instant Setup',
+      description:
+        'No complex configuration. Sign up, create a project, and invite your team in under a minute.',
+      iconBg: 'bg-cyan-100',
+      hoverBorder: 'hover:border-cyan-200',
+    },
+  ];
+
+  const getIcon = (name: string, color: string) => {
+    const className = `h-6 w-6 ${color}`;
+    switch (name) {
+      case 'layoutDashboard': return <LayoutDashboard className={className} />;
+      case 'listChecks': return <ListChecks className={className} />;
+      case 'users': return <Users className={className} />;
+      case 'barChart': return <BarChart3 className={className} />;
+      case 'shield': return <Shield className={className} />;
+      case 'zap': return <Zap className={className} />;
+      default: return null;
+    }
+  };
+
+  return (
+    <section id="features" className="py-24 bg-gray-50">
+      <div className="mx-auto max-w-7xl px-4">
+        <div className="mx-auto max-w-2xl text-center">
+          <p className="text-sm font-semibold uppercase tracking-wider text-primary-600">
+            Features
+          </p>
+          <h2 className="mt-2 heading-section text-gray-900">
+            Everything your team needs
+          </h2>
+          <p className="mt-4 text-lg text-gray-600">
+            Simple, powerful tools to keep projects moving and teams productive.
+          </p>
+        </div>
+        <div className="mt-16 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
+          {features.map((feature) => (
+            <div
+              key={feature.title}
+              className={`group rounded-xl border border-gray-200 bg-white p-8 shadow-sm transition-all duration-300 ${feature.hoverBorder} hover:shadow-lg hover:-translate-y-1`}
+            >
+              <div className={`flex h-12 w-12 items-center justify-center rounded-lg ${feature.iconBg} transition-transform duration-200 group-hover:scale-110`}>
+                {getIcon(feature.icon, feature.iconColor)}
+              </div>
+              <h3 className="mt-5 text-lg font-semibold text-gray-900">
+                {feature.title}
+              </h3>
+              <p className="mt-2 leading-relaxed text-gray-600">{feature.description}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,146 @@
+'use client';
+
+import Link from 'next/link';
+import { ArrowRight, BarChart3, Shield, Zap, CheckCircle2 } from 'lucide-react';
+import { APP_NAME } from '@/lib/constants';
+
+function DashboardMockup() {
+  return (
+    <div className="animate-fade-in-up-delay-3 mx-auto mt-16 max-w-4xl px-4">
+      <div className="rounded-xl border border-gray-200 bg-white shadow-2xl shadow-gray-200/50 ring-1 ring-gray-900/5 overflow-hidden">
+        {/* Browser chrome */}
+        <div className="flex items-center gap-2 border-b border-gray-100 bg-gray-50 px-4 py-2.5">
+          <div className="flex gap-1.5">
+            <div className="h-2.5 w-2.5 rounded-full bg-red-400" />
+            <div className="h-2.5 w-2.5 rounded-full bg-amber-400" />
+            <div className="h-2.5 w-2.5 rounded-full bg-green-400" />
+          </div>
+          <div className="ml-3 flex-1 rounded-md bg-gray-100 px-3 py-1 text-xs text-gray-400">
+            app.yourcompany.com/dashboard
+          </div>
+        </div>
+        {/* Mock dashboard content */}
+        <div className="p-6">
+          <div className="grid grid-cols-4 gap-3">
+            {[
+              { label: 'Projects', value: '12', color: 'bg-blue-500' },
+              { label: 'Tasks', value: '48', color: 'bg-amber-500' },
+              { label: 'Completed', value: '31', color: 'bg-green-500' },
+              { label: 'Team', value: '8', color: 'bg-purple-500' },
+            ].map((stat) => (
+              <div key={stat.label} className="rounded-lg border border-gray-100 p-3">
+                <div className={`mb-2 h-1.5 w-6 rounded-full ${stat.color} opacity-60`} />
+                <div className="text-lg font-bold text-gray-900">{stat.value}</div>
+                <div className="text-xs text-gray-500">{stat.label}</div>
+              </div>
+            ))}
+          </div>
+          <div className="mt-4 space-y-2">
+            {[
+              { name: 'Website Redesign', status: 'In Progress', pct: 65 },
+              { name: 'Mobile App v2', status: 'Planning', pct: 20 },
+              { name: 'API Integration', status: 'Review', pct: 85 },
+            ].map((project) => (
+              <div key={project.name} className="flex items-center gap-3 rounded-lg border border-gray-50 bg-gray-50/50 px-3 py-2">
+                <div className="flex-1">
+                  <div className="text-sm font-medium text-gray-800">{project.name}</div>
+                  <div className="text-xs text-gray-400">{project.status}</div>
+                </div>
+                <div className="h-1.5 w-24 rounded-full bg-gray-100">
+                  <div
+                    className="h-1.5 rounded-full bg-primary-500"
+                    style={{ width: `${project.pct}%` }}
+                  />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function Hero() {
+  const highlights = [
+    { icon: 'zap', label: 'Fast setup' },
+    { icon: 'shield', label: 'Secure by default' },
+    { icon: 'barChart', label: 'Built-in analytics' },
+  ];
+
+  const getIcon = (name: string) => {
+    const className = "h-4 w-4 text-primary-500";
+    switch (name) {
+      case 'zap': return <Zap className={className} />;
+      case 'shield': return <Shield className={className} />;
+      case 'barChart': return <BarChart3 className={className} />;
+      default: return null;
+    }
+  };
+
+  return (
+    <section className="relative overflow-hidden bg-gradient-to-b from-primary-50 via-white to-white py-24 sm:py-32">
+      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-primary-100/40 via-transparent to-transparent" />
+      <div className="relative mx-auto max-w-7xl px-4 text-center">
+        <div className="animate-fade-in-up mx-auto inline-flex items-center gap-2 rounded-full border border-primary-200 bg-primary-50 px-4 py-1.5 text-sm font-medium text-primary-700">
+          <span className="h-1.5 w-1.5 rounded-full bg-primary-500" />
+          Free to get started
+        </div>
+        <h1 className="animate-fade-in-up-delay-1 mt-6 heading-hero tracking-tight text-gray-900">
+          Manage Projects,{' '}
+          <span className="bg-gradient-to-r from-primary-600 to-primary-500 bg-clip-text text-transparent">
+            Ship Faster
+          </span>
+        </h1>
+        <p className="animate-fade-in-up-delay-2 mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-gray-600">
+          {APP_NAME} gives your team a clear view of every project, task, and deadline.
+          Stop juggling spreadsheets and start delivering on time.
+        </p>
+        <div className="animate-fade-in-up-delay-2 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-primary-600 px-6 py-3 text-base font-medium text-white shadow-lg shadow-primary-200 hover:bg-primary-700 hover:shadow-xl hover:shadow-primary-200/50 transition-all"
+          >
+            Start Free
+            <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
+          </Link>
+          <a
+            href="#how-it-works"
+            className="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-6 py-3 text-base font-medium text-gray-700 hover:bg-gray-50 hover:border-gray-400 transition-all"
+          >
+            See How It Works
+          </a>
+        </div>
+
+        {/* Social proof */}
+        <div className="animate-fade-in-up-delay-3 mt-12 flex flex-col items-center gap-3">
+          <div className="flex -space-x-2">
+            {['bg-blue-500', 'bg-green-500', 'bg-amber-500', 'bg-purple-500', 'bg-pink-500'].map((color, i) => (
+              <div
+                key={i}
+                className={`flex h-8 w-8 items-center justify-center rounded-full ${color} text-xs font-bold text-white ring-2 ring-white`}
+              >
+                {String.fromCharCode(65 + i)}
+              </div>
+            ))}
+          </div>
+          <div className="flex items-center gap-1.5 text-sm text-gray-500">
+            <CheckCircle2 className="h-4 w-4 text-green-500" />
+            <span>Trusted by teams who ship on time</span>
+          </div>
+        </div>
+
+        <div className="animate-fade-in-up-delay-4 mt-12 flex items-center justify-center gap-8 sm:gap-12">
+          {highlights.map((item) => (
+            <div key={item.label} className="flex items-center gap-2 text-sm text-gray-500">
+              {getIcon(item.icon)}
+              <span>{item.label}</span>
+            </div>
+          ))}
+        </div>
+
+        <DashboardMockup />
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,80 @@
+'use client';
+
+import { FolderPlus, ListTodo, TrendingUp } from 'lucide-react';
+
+export function HowItWorks() {
+  const steps = [
+    {
+      number: '01',
+      icon: 'folderPlus',
+      title: 'Create a Project',
+      description:
+        'Set up a project in seconds. Add a name, description, and due date. Invite your team to collaborate.',
+      color: 'bg-blue-600',
+      shadow: 'shadow-blue-200',
+    },
+    {
+      number: '02',
+      icon: 'listTodo',
+      title: 'Add Tasks & Assign',
+      description:
+        'Break work into tasks with priorities and assignees. Everyone knows what to do and when it is due.',
+      color: 'bg-amber-600',
+      shadow: 'shadow-amber-200',
+    },
+    {
+      number: '03',
+      icon: 'trendingUp',
+      title: 'Track & Deliver',
+      description:
+        'Monitor progress on your dashboard. Update task statuses with a click and ship on schedule.',
+      color: 'bg-green-600',
+      shadow: 'shadow-green-200',
+    },
+  ];
+
+  const getIcon = (name: string) => {
+    const className = "h-7 w-7 text-white";
+    switch (name) {
+      case 'folderPlus': return <FolderPlus className={className} />;
+      case 'listTodo': return <ListTodo className={className} />;
+      case 'trendingUp': return <TrendingUp className={className} />;
+      default: return null;
+    }
+  };
+
+  return (
+    <section id="how-it-works" className="py-24 bg-gray-50">
+      <div className="mx-auto max-w-7xl px-4">
+        <div className="mx-auto max-w-2xl text-center">
+          <p className="text-sm font-semibold uppercase tracking-wider text-primary-600">
+            How It Works
+          </p>
+          <h2 className="mt-2 heading-section text-gray-900">
+            Up and running in three steps
+          </h2>
+          <p className="mt-4 text-lg text-gray-600">
+            No complicated setup. No steep learning curve. Just results.
+          </p>
+        </div>
+        <div className="relative mt-16 grid gap-12 md:grid-cols-3">
+          {/* Connecting line between steps (desktop only) */}
+          <div className="absolute top-8 left-[calc(16.67%+32px)] right-[calc(16.67%+32px)] hidden h-0.5 bg-gradient-to-r from-blue-200 via-amber-200 to-green-200 md:block" />
+
+          {steps.map((step) => (
+            <div key={step.number} className="relative text-center">
+              <div className={`relative z-10 mx-auto flex h-16 w-16 items-center justify-center rounded-2xl ${step.color} shadow-lg ${step.shadow}`}>
+                {getIcon(step.icon)}
+              </div>
+              <span className="mt-4 block text-xs font-bold uppercase tracking-widest text-primary-500">
+                Step {step.number}
+              </span>
+              <h3 className="mt-2 text-xl font-semibold text-gray-900">{step.title}</h3>
+              <p className="mt-3 leading-relaxed text-gray-600">{step.description}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,124 @@
+import { Check } from 'lucide-react';
+
+const plans = [
+  {
+    name: 'Free',
+    price: 0,
+    priceLabel: '$0',
+    period: 'forever',
+    description: 'Perfect for trying out the platform',
+    features: [
+      '3 projects',
+      '10 tasks per project',
+      'Basic analytics',
+      'Email support',
+    ],
+    cta: 'Get Started Free',
+    popular: false,
+  },
+  {
+    name: 'Pro',
+    price: 1900,
+    priceLabel: '$19',
+    period: 'per month',
+    description: 'Best for growing teams',
+    features: [
+      'Unlimited projects',
+      'Unlimited tasks',
+      'Advanced analytics',
+      'Priority support',
+      'Team collaboration',
+      'Custom integrations',
+    ],
+    cta: 'Start Pro Trial',
+    popular: true,
+  },
+  {
+    name: 'Enterprise',
+    price: 9900,
+    priceLabel: '$99',
+    period: 'per month',
+    description: 'For large organizations',
+    features: [
+      'Everything in Pro',
+      'SSO authentication',
+      'Audit logs',
+      'Dedicated account manager',
+      'SLA guarantee',
+      'Custom contracts',
+    ],
+    cta: 'Contact Sales',
+    popular: false,
+  },
+];
+
+export function Pricing() {
+  return (
+    <section id="pricing" className="py-24 bg-white">
+      <div className="mx-auto max-w-7xl px-4">
+        <div className="mx-auto max-w-2xl text-center">
+          <p className="text-sm font-semibold uppercase tracking-wider text-primary-600">
+            Pricing
+          </p>
+          <h2 className="mt-2 heading-section text-gray-900">
+            Simple, transparent pricing
+          </h2>
+          <p className="mt-4 text-lg text-gray-600">
+            Choose the plan that works for your team. All plans include a 14-day free trial.
+          </p>
+        </div>
+
+        <div className="mt-16 grid gap-8 lg:grid-cols-3">
+          {plans.map((plan) => (
+            <div
+              key={plan.name}
+              className={`relative rounded-2xl border ${
+                plan.popular
+                  ? 'border-primary-500 shadow-xl ring-2 ring-primary-500/20'
+                  : 'border-gray-200 shadow-md hover:shadow-xl transition-shadow duration-300'
+              } bg-white p-8`}
+            >
+              {plan.popular && (
+                <span className="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-primary-600 px-4 py-1 text-sm font-medium text-white">
+                  Most Popular
+                </span>
+              )}
+
+              <h3 className="text-xl font-semibold text-gray-900">{plan.name}</h3>
+              <p className="mt-2 text-sm text-gray-600">{plan.description}</p>
+
+              <div className="mt-6">
+                <span className="text-4xl font-bold text-gray-900">{plan.priceLabel}</span>
+                <span className="text-gray-600">/{plan.period}</span>
+              </div>
+
+              <ul className="mt-8 space-y-4">
+                {plan.features.map((feature) => (
+                  <li key={feature} className="flex items-start gap-3">
+                    <Check className="h-5 w-5 text-primary-600 shrink-0" />
+                    <span className="text-gray-600">{feature}</span>
+                  </li>
+                ))}
+              </ul>
+
+              <div className="mt-8">
+                <a
+                  href="/login"
+                  className={`block w-full rounded-lg py-3 text-center font-medium transition-colors ${
+                    plan.popular
+                      ? 'bg-primary-600 text-white hover:bg-primary-700'
+                      : plan.price === 0
+                        ? 'bg-gray-100 text-gray-900 hover:bg-gray-200'
+                        : 'bg-gray-900 text-white hover:bg-gray-800'
+                  }`}
+                >
+                  {plan.cta}
+                </a>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,78 @@
+import { Star } from 'lucide-react';
+
+const testimonials = [
+  {
+    quote:
+      'We switched from a messy spreadsheet to this and our team is finally aligned. Projects get shipped on time now.',
+    name: 'Sarah Chen',
+    role: 'Engineering Manager',
+    company: 'Acme Corp',
+    color: 'bg-blue-500',
+  },
+  {
+    quote:
+      'The setup took less than a minute. No config files, no environment variables. It just works.',
+    name: 'Marcus Rodriguez',
+    role: 'CTO',
+    company: 'StartupHQ',
+    color: 'bg-green-500',
+  },
+  {
+    quote:
+      'Our team went from constant status meetings to a dashboard everyone actually checks. Huge time saver.',
+    name: 'Emily Park',
+    role: 'Product Lead',
+    company: 'BuildFast',
+    color: 'bg-purple-500',
+  },
+];
+
+export function Testimonials() {
+  return (
+    <section id="testimonials" className="py-24 bg-white">
+      <div className="mx-auto max-w-7xl px-4">
+        <div className="mx-auto max-w-2xl text-center">
+          <p className="text-sm font-semibold uppercase tracking-wider text-primary-600">
+            Testimonials
+          </p>
+          <h2 className="mt-2 heading-section text-gray-900">
+            Teams love using it
+          </h2>
+          <p className="mt-4 text-lg text-gray-600">
+            See why teams switch to a simpler way of managing projects.
+          </p>
+        </div>
+        <div className="mt-16 grid gap-8 md:grid-cols-3">
+          {testimonials.map((testimonial) => (
+            <div
+              key={testimonial.name}
+              className="rounded-xl border border-gray-200 bg-white p-8 shadow-sm transition-all duration-300 hover:shadow-lg hover:-translate-y-1"
+            >
+              <div className="flex gap-0.5">
+                {[...Array(5)].map((_, i) => (
+                  <Star key={i} className="h-4 w-4 fill-amber-400 text-amber-400" />
+                ))}
+              </div>
+              <p className="mt-4 leading-relaxed text-gray-600">
+                &ldquo;{testimonial.quote}&rdquo;
+              </p>
+              <div className="mt-6 flex items-center gap-3">
+                <div
+                  className={`flex h-10 w-10 items-center justify-center rounded-full ${testimonial.color} text-sm font-bold text-white`}
+                >
+                  {testimonial.name.split(' ').map((n) => n[0]).join('')}
+                </div>
+                <div>
+                  <p className="text-sm font-semibold text-gray-900">{testimonial.name}</p>
+                  <p className="text-xs text-gray-500">
+                    {testimonial.role}, {testimonial.company}
+                  </p>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

package/template/src/components/providers.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+import { ReactNode } from 'react';
+import { ToastProvider } from '@varity-labs/ui-kit';
+
+export function Providers({ children }: { children: ReactNode }) {
+  // Only ToastProvider at the global level.
+  // PrivyStack is added in dashboard/layout.tsx and login/page.tsx —
+  // the landing page loads instantly without any auth dependency.
+  return <ToastProvider>{children}</ToastProvider>;
+}

package/template/src/components/shared/Footer.tsx

@@ -0,0 +1,71 @@
+import Link from 'next/link';
+import { CheckCircle } from 'lucide-react';
+import { APP_NAME } from '@/lib/constants';
+
+export function Footer() {
+  const year = new Date().getFullYear();
+
+  return (
+    <footer className="border-t border-gray-200 bg-white py-12">
+      <div className="mx-auto max-w-7xl px-4">
+        <div className="flex flex-col items-center justify-between gap-6 sm:flex-row">
+          <div className="flex items-center gap-2">
+            <CheckCircle className="h-5 w-5 text-primary-600" />
+            <span className="font-semibold text-gray-900">{APP_NAME}</span>
+          </div>
+          <div className="flex items-center gap-6 text-sm text-gray-500">
+            <a href="#features" className="hover:text-gray-700 transition-colors">
+              Features
+            </a>
+            <a href="#how-it-works" className="hover:text-gray-700 transition-colors">
+              How It Works
+            </a>
+            <a href="#pricing" className="hover:text-gray-700 transition-colors">
+              Pricing
+            </a>
+            <Link href="/login" className="hover:text-gray-700 transition-colors">
+              Sign In
+            </Link>
+          </div>
+        </div>
+        <div className="mt-8 border-t border-gray-100 pt-6 text-center text-sm text-gray-400">
+          &copy; {year} {APP_NAME}. Built with{' '}
+          <a
+            href="https://varity.so"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-1 text-primary-500 hover:text-primary-600 transition-colors"
+          >
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 64 64"
+              xmlns="http://www.w3.org/2000/svg"
+              className="inline-block"
+            >
+              <defs>
+                <linearGradient id="varity-lf-f1" x1="0%" y1="0%" x2="100%" y2="100%">
+                  <stop offset="0%" stopColor="#5EEAD4"/><stop offset="100%" stopColor="#0D9488"/>
+                </linearGradient>
+                <linearGradient id="varity-lf-f2" x1="100%" y1="0%" x2="0%" y2="100%">
+                  <stop offset="0%" stopColor="#60A5FA"/><stop offset="100%" stopColor="#1D4ED8"/>
+                </linearGradient>
+                <linearGradient id="varity-lf-f4" x1="0%" y1="100%" x2="100%" y2="0%">
+                  <stop offset="0%" stopColor="#14B8A6"/><stop offset="100%" stopColor="#2DD4BF"/>
+                </linearGradient>
+              </defs>
+              <path d="M32 6 L48 22 L32 32 L16 22 Z" fill="url(#varity-lf-f4)"/>
+              <path d="M16 22 L32 32 L32 58 L8 36 Z" fill="url(#varity-lf-f1)"/>
+              <path d="M48 22 L56 36 L32 58 L32 32 Z" fill="url(#varity-lf-f2)"/>
+              <path d="M8 36 L32 58 L20 58 Z" fill="url(#varity-lf-f1)" opacity="0.7"/>
+              <path d="M56 36 L44 58 L32 58 Z" fill="url(#varity-lf-f2)" opacity="0.7"/>
+              <path d="M32 12 L40 22 L32 28 L24 22 Z" fill="white" opacity="0.25"/>
+            </svg>
+            Varity
+          </a>
+          .
+        </div>
+      </div>
+    </footer>
+  );
+}