awel 0.1.2 → 0.2.0

package/dist/cli/templates/templates/saas/src/app/pricing/page.tsx

@@ -0,0 +1,53 @@
+import { Navbar } from '@/components/Navbar';
+import { PricingCard } from '@/components/PricingCard';
+
+const plans = [
+  {
+    name: 'Free',
+    price: '$0',
+    period: 'forever',
+    description: 'For individuals getting started.',
+    features: ['1 project', '100 API calls/day', 'Community support'],
+    cta: 'Get started',
+    highlighted: false,
+  },
+  {
+    name: 'Pro',
+    price: '$29',
+    period: '/month',
+    description: 'For growing teams.',
+    features: ['Unlimited projects', '10,000 API calls/day', 'Priority support', 'Advanced analytics'],
+    cta: 'Start free trial',
+    highlighted: true,
+  },
+  {
+    name: 'Enterprise',
+    price: 'Custom',
+    period: '',
+    description: 'For large organizations.',
+    features: ['Unlimited everything', 'Dedicated support', 'Custom integrations', 'SLA guarantee'],
+    cta: 'Contact sales',
+    highlighted: false,
+  },
+];
+
+export default function Pricing() {
+  return (
+    <>
+      <Navbar />
+      <main className="px-6 py-24">
+        <div className="mx-auto max-w-5xl text-center">
+          <h1 className="text-4xl font-bold tracking-tight">Simple, transparent pricing</h1>
+          <p className="mt-4 text-gray-600 dark:text-gray-400">
+            Choose the plan that works for your team.
+          </p>
+        </div>
+        <div className="mx-auto mt-16 grid max-w-5xl gap-8 lg:grid-cols-3">
+          {plans.map((plan) => (
+            <PricingCard key={plan.name} {...plan} />
+          ))}
+        </div>
+      </main>
+    </>
+  );
+}

package/dist/cli/templates/templates/saas/src/components/Navbar.tsx

@@ -0,0 +1,25 @@
+import Link from 'next/link';
+
+export function Navbar() {
+  return (
+    <nav className="flex items-center justify-between px-6 py-4">
+      <Link href="/" className="text-lg font-bold">
+        SaaSApp
+      </Link>
+      <div className="flex items-center gap-6">
+        <Link
+          href="/pricing"
+          className="text-sm text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
+        >
+          Pricing
+        </Link>
+        <Link
+          href="/dashboard"
+          className="rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-500"
+        >
+          Dashboard
+        </Link>
+      </div>
+    </nav>
+  );
+}

package/dist/cli/templates/templates/saas/src/components/PricingCard.tsx

@@ -0,0 +1,46 @@
+interface PricingCardProps {
+  name: string;
+  price: string;
+  period: string;
+  description: string;
+  features: string[];
+  cta: string;
+  highlighted: boolean;
+}
+
+export function PricingCard({ name, price, period, description, features, cta, highlighted }: PricingCardProps) {
+  return (
+    <div
+      className={`rounded-xl border p-8 ${
+        highlighted
+          ? 'border-blue-600 ring-2 ring-blue-600 dark:border-blue-400 dark:ring-blue-400'
+          : 'border-gray-200 dark:border-gray-800'
+      }`}
+    >
+      <h3 className="text-lg font-semibold">{name}</h3>
+      <p className="mt-1 text-sm text-gray-600 dark:text-gray-400">{description}</p>
+      <p className="mt-6">
+        <span className="text-4xl font-bold">{price}</span>
+        {period && <span className="text-sm text-gray-500">{period}</span>}
+      </p>
+      <ul className="mt-8 space-y-3">
+        {features.map((feature) => (
+          <li key={feature} className="flex items-center gap-2 text-sm">
+            <span className="text-green-600 dark:text-green-400">&#10003;</span>
+            {feature}
+          </li>
+        ))}
+      </ul>
+      <a
+        href="/dashboard"
+        className={`mt-8 block rounded-lg py-2.5 text-center text-sm font-semibold ${
+          highlighted
+            ? 'bg-blue-600 text-white hover:bg-blue-500'
+            : 'border border-gray-300 text-gray-900 hover:bg-gray-50 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800'
+        }`}
+      >
+        {cta}
+      </a>
+    </div>
+  );
+}